Modular development

Catalog

One 、 Why modular development is needed ？（ understand ）

Two 、CommonJS

1、 Modularity has two cores ： Export and import

2、ES6 Of export Basic use ：

3、ES6 Of import Use

---

One 、 Why modular development is needed ？（ understand ）

• Early stage of Web Development ,js Do some Simple form verification or animation implementation , Less code . Write the code directly in <script> In the label ;
• ajax The emergence of asynchronous requests , Slowly form front and rear end separation , More and more things need to be done by the client , The amount of code is also increasing . In response to the surge in code , We usually Organize code in multiple js In file , For maintenance . But this way of maintenance , Still can't avoid some Catastrophic problems ： such as Global variable homonymy problem , in addition , The way this code is written Yes js The dependency order of files is almost mandatory ; But when js Too many documents , For example, when there are dozens of them , It's a relatively simultaneous thing to figure out their order .

1. We can use Anonymous functions to solve the problem of duplicate names , But if we want to be in main.js In file , be used aaa.js  Defined flag, How to deal with it ？ obviously , Another file is not easy to use , because flag Is a local variable .
2. Use the module as an exit ： We can use Variables that will need to be exposed , Use a module as an exit , Look at the corresponding code ：

（1） Inside anonymous functions , Define an object .
（2） To object Add various properties and methods that need to be exposed ( No direct definition of exposure is required ).
（3） Finally, return the object to , And used one outside MoudleA Accept .

Next , We are man.js How to use it in ？

We just need to use the properties and methods of our own module
This is the most basic encapsulation of modules , In fact, there are many advanced topics about module encapsulation ：
But we Here is to understand why modules are needed , And the original prototype of the module .

Fortunately, , Front end modular development has many existing specifications , And the corresponding implementation scheme .
Common modular specifications ：CommonJS、AMD、CMD, Also have ES6 Of Modules

Two 、CommonJS

1、 Modularity has two cores ： Export and import

CommonJS Export of ：

        module.export = {
        flag:true,
        test(a,b){
            return a + b
        },
        demo(a,b){
            return a * b
        }
    }

CommonJS Import of ：

        let {test,demo,flag} = require('modeleA');
        // Equate to
        let _mA = require('moduleA');
        let test = _mA.test;
        let demo = _mA.demo;
        let flag = _mA.flag;

2、ES6 Of export Basic use ：

export Instructions for Export variables ,2 Methods ：

// Method 1
    export let name = 'Hi'
    export let age = 18
 // Method 2
    let name = 'Hi'
    let age = 18
    export{name,age}

Output function or output class ,2 Methods ：

// Method 1     

export function test(content){
        console.log(content);
    }
    export class Person {
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        // Defined function
        run(){
            console.log(this.name + ' Running ');
        }
    }

// Method 2
function test(content){
        console.log(content);
    }
    export class Person {
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        // Defined function
        run(){
            console.log(this.name + ' Running ');
        }
    }
    export{test.Person}

export default
Use scenario ： A module contains a function , We don't want to name this feature , And let the importers name themselves

// info.js
export default function (){
    console.log('default function');
}
// main.js
    import myFunc from './info.js'
    myFunc()

Be careful ：export default In the same module , It is not allowed to have more than one .

3、ES6 Of import Use

Use export The interface provided by the instruction export module , Now we can go through the import Command to load the corresponding module
First , We need to be in HTML The code introduces two js file , And the type needs to be set to module
import Instruction is used to import the contents of the module , such as main.js Code for

import {name,age,height} from "./info.js"
console.log(name,age,height);

If we want to All information in a module is imported , Import one by one is obviously troublesome ：
adopt * You can import all the export Variable
But usually we need to give * Make up an alias , Convenient for subsequent use

import * as info from './info.js'
console.log(info.name,info.age,info.height);

Reference resources ：

Up to date Vue、Vuejs course , From entry to mastery