Module

Outline

Before ES6, the community developed a number of modules to load programs, the most important are CommonJS and AMD two kinds. The former is for the server, which is used browser. ES6 on the level of language standards, to achieve the function module, the module can determine dependencies, as well as input and output variables of the design ideas ES6 module is to minimize static, making compilation. CommonJS and AMD modules, these things can only be determined at runtime. For example, CommonJS module is the object, the object must find the property you type.


let { stat, exists, readFile } = require('fs');
// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

The above is the whole essence of the code module loaded fs (fs i.e. all methods of loading), to produce an object (_fs), and then read the object 3 from the above method. This load is called "load running" because the object is only to get run-time, resulting in absolutely no way to do a "static optimization" at compile time.

ES6 module is not the object, but the code is explicitly specified by the export command output through the import command input.

1 2	// ES6模块 import { stat, exists, readFile } from 'fs';

Substance of the above code is loaded from 3 fs module method, other methods are not loaded. This load is called "Loading a compile-time" or static load that can be completed ES6 module is loaded at compile time, high loading efficiency than CommonJS module.

Strict Mode

ES6 modules automatically use strict mode, whether you have add "use strict" in the module header ;.

Strict mode mainly has the following limitations:

Variables must be declared before use

Function parameters can not have the same name attribute, otherwise an error

You can not use the with statement

You can not assign read-only attribute, otherwise an error

You can not use the prefix 0 indicates octal number, otherwise an error

You can not delete the property can not be deleted, otherwise an error

You can not delete variables delete prop, will complain, can only remove property delete global [prop]

eval not introduce variable in its enclosing scope

eval and arguments can not be reassigned

arguments do not automatically reflect changes in function parameters

You can not use arguments.callee

You can not use arguments.caller

Prohibit this point to the global object

You can not use fn.caller and fn.arguments get the function call stack

An increase of reserved words (such as protected, static and interface)

export order

export command is used to specify the external interface module

// output variables 
Export  the let firstName = 'Michael' ; 
Export  the let lastName = 'Jackson' ; 
Export  the let year = 1958 ; 
// short or 
the let firstName = 'Michael' ; 
the let lastName = 'Jackson' ; 
the let year = 1958 ; 
Export firstName {, lastName, year}; 
// output function or class (class) 
export  function ( X, Y ) { return X * Y; };

import command

import command input function provided on another module, the import command with lifting effect, will be raised to the head of the whole module is first performed

import {firstName, lastName, year} from './index';
function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

as keywords

// Re-enter a name for the variable of 
Import {lastName AS Surname} from  './index' ; 
// entire loading module 
Import * AS Circle from  './circle'

export default command

Designated as the default output module

// export-default.js
export default function () {
  console.log('foo');
}
// import-default.js
import customName from './export-default';
customName(); // 'foo'

chestnut

Vuex a module (Module1) Example

//com.js
import * as types from '../types'
const state = {
    showLoading: false,
}
const actions = {
    setShowLoading({ commit }, status) {
        commit(types.COM_SHOW_LOADING, status)
    }
}
const getters = {
    showLoading: state => state.showLoading,
}
const mutations = {
    [types.COM_SHOW_LOADING](state, status) {
        state.showLoading = status
    },
}
export default {
    state,
    Actions, 
    getters, 
    mutations 
} 
//serach.vue 
Import {mapGetters} from  'vuex'
 computed: { // mapGetters (Map: the Array <String> | Object): Object, create a calculated getter properties of the component returns the return value // use object drill operator to getters mixed computed subject     ... mapGetters ([ 'showLoading' 	]) },

Original: Large column reading notes -es6Module

Study notes -es6Module