This is the fifth day of my participation in Gwen Challenge

Front-end modularization

Traditional modularity

var moduleA = (function() {
	var obj = {}
    var flag = false
    obj.flag = flag
    return obj
})()
// This can be used for modular development, just be careful that the moduleA name does not conflict, because functions have their own scope and do not need to be concerned
Copy the code

CommonJS

The implementation specification in Node is CommonJS

export

var flag = false
var sum = function(a,b) {a + b}

module.exports = {		// This thing requires a special environment to parse, such as Webpack, because Webpack supports Node
    // Export the properties and methods of the object
    flag: flag,
    sum: the sum} -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- or the writing below -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --module.exports.flag = flag
module. Exports. Sum = sum -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- at the same time can also be abbreviated -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --exports.flag = flag
exports.sum = sum
Copy the code

The import

let example = require('./ file path ') -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- or adopt the method of deconstruction -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --let {flag, sum} = require('./ file path ')
Copy the code

AMD

Ellipsis… Never used

CMD

Ellipsis… Never used

The Modules ES6

Script tag modularization

When importing ES6 modules using the script label, type must be set to “module”. Otherwise, an error occurs

When type is set to module, each imported JS file is used as a separate module, but at the same time, different JS files cannot communicate with each other. You can use es6 import and export to communicate. Note: Regular imports will cross domains and require a local server

<script src="./aaa.js" type="module"></script>
Copy the code

Export export

Methods a

Accurate export

let flag = false
let sum = function(a, b) {a+b}
export {
	flag,
    sum
}
Copy the code

Way 2

You can export it when you declare it

export let num1 = 1000
export let sun function() {}
Copy the code

Methods three

An “object” (array, function, value, etc.) can be exported by default. Export default can only be used once for a file, not multiple times

export default {
    / / content
}
Copy the code

Import the import

import {flag, sum} from './ file path '
Copy the code

Import (* wildcard import)

This is used when there are too many imported properties or methods, and it is equivalent to setting all imported values to a single object with a single name

import {name, age, num, ... , add} from './ file path ' // Import too much stuff to write

// This can be written in the following way

import * as objName from './ file path '

// objName is the alias of the object

objName.name, objName.age
Copy the code