First, let’s take a look at what modularity is.
Common summary: Modularization is to encapsulate a single function into a module (file). The modules are isolated from each other, but internal members can be exposed through specific interfaces, and they can also rely on other modules (to facilitate code reuse, thereby Improve development efficiency and facilitate later maintenance).
So how is modularity implemented in the Vue project?
Modularization is like a large functional item, and this large functional item can contain multiple components. When used, a single module corresponds to the file directory under the component under our Vue project. There can be multiple components under each module, and these components form a complete module page (single page). However, there must be a main file under each module (module parent component), and this file must be in the routing management ( router/index.js) to register, the following form must be met when registering:
export default new Router({ mode: "history", routes: [{ path: "/", name: "Default", redirect: "/home", component: Home }] })The remaining components can be injected in the following ways. When using it, label the name in the name attribute of the component in the parent component (vue will convert the name named in camel case -------- (BookManager——>book-manager))
First, you need to import it through import in the page you are using. Secondly, you need to register it in compent. When registering, you will use the name attribute of the component for injection.
Basic usage of ES6 modularity
ES5 and js before it are not modular. If you want to perform modular operations, you need to introduce a third-party class library. With the development of technology, the front-end and back-end are separated, and the front-end business becomes more and more complex. Finally, modular operations were introduced in ES6.
In es6, a module is a js file, so we create a new module (js file)
In es6 modularization, the data transmission between the module and the outside depends on the two keywords export (send) and import (receive). Let’s use an example to understand their usage in module1.js
:
export let name = 'aays';//发送name这个变量Create an external file index.js and code:
import {name} from './module1.js'//接收name这个变量
console.log(name)//aaysThe above is the most basic usage. If you want to output multiple variables, you can wrap these variables into objects for modular output:
//模块
let name = 'aays'，age = 18
const sex = '男'
export {
name,
age,
sex
}
//外部
<script type="module">
import {name,age,sex} from './module1.js'
console.log(age)//18
</script>If you want to rename the transferred variables (which can be used to prevent the variable names in the module from being exposed or to simplify the variable names), you can do it through as. The above code is modified to:
//模块
let name = 'aays'，age = 18
const sex = '男'
export {
name as myname,
age as myage,
sex as mysex
}
//外部
import {myname,myage,mysex} from './module1.js'
console.log(myage)//18If you don’t want to deconstruct and assign the exported values one by one, then you can use the * symbol to directly obtain the entire module. The above code is modified to:
//模块
let name = 'aays'，age = 18
const sex = '男'
export {
name,
age,
sex
}
//外部
import * as allmodule from './module1.js'
console.log(`${allmodule.name}今年${allmodule.age}岁
性别${allmodule.sex}`)//aays今年18岁 性别男
Default export vs. hybrid export
A module can only have one default export.
For default exports, the name of the import can be different from the name of the export.
//模块
export default function(){
return "默认导出一个方法"
}
//外部
import fn from './module1.js'//fn可以是任意变量名
console.log(fn())//输出“默认导出一个方法”
//我们可以将要导出的东西都放在默认导出中，
//然后取出来作为一个对象直接取里面的东西来用，比较方便Mixed export means exporting default data and non-default data in one export at the same time. This can be achieved by adding a comma:
//模块
export default function(){
return "默认导出一个方法"
}
export let name ="aays";
//外部
import fn,{name} from "./module1.js";
console.log(fn()+name);//默认导出一个方法aaysRename export and import
If the variable names in multiple imported files are the same, a naming conflict will occur. In order to solve this problem, ES6 provides a renaming method. You can do this when importing names:
export let myName="我来自module1.js";//模块1中
export let myName="我来自module2.js";//模块2中
//外部
import {myName as name1} from "./module1.js";
import {myName as name2} from "./module2.js";
console.log(name1);//我来自module1.js
console.log(name2);//我来自module2.jsModularization of commonjs
mathUtils.js
function add(num1, num2) {
return num1 + num2
}
function mul(num1, num2) {
return num1 * num2
}
module.exports = {
add,
mul
}main.js uses the modularization of commonjs to import info.js
// 1.使用commonjs的模块化规范
const {add, mul} = require('./mathUtils.js')
console.log(add(20, 30));
console.log(mul(20, 30));Modular development technology extension
Modularization is also constantly updated with the development of technology. For example, the development methods currently favored by many developers include dependency packaging and dependency loading.
1. Dependency loading
is currently a widely used method, such as require js, sea.js, etc. In addition to the different writing specifications, the module chunk file is actually retrieved through the relevant require api, and the logic is run after the loading is completed. code.
2.
The classic representative of dependency packaging is Webpack. In fact, the modules are separated when writing code, but when packaging, each module is found according to the dependency relationship, and finally packaged into the same file, and each chunk is given an ID. When running the logic code, it will The module reference points to this id, thereby achieving modularity.
3. Mini Program
In addition, with the practice of WeChat, Alipay and other apps, the mini program container technology FinClip has also become an option for modularization. Its principle is actually the same as the previous modular development model, which combines complex and tightly coupled Functional applications are decoupled into small modules one by one, but the difference is that the carrying mode of these small modules is replaced by small programs, which is simpler from the perspective of development and management.
