es6 模块化学习总结

 ===============commonJS==================
    在node.js 中,由于有且仅有一个入口文件(启动文件),而开发一个应用肯定会涉及到多个文件的配合,
     因此,node.js 对模块的需求比浏览器端要大的多
    模块的导出:
     什么叫做模块: 模块就是一个JS文件,它实现了一部分的功能,并隐藏自己的内部实现,同时提供一些接口供其他模块使用
     模块有两个核心元素: 隐藏和暴露
     隐藏的,是自己内部的实现
     暴露的,是希望外部使用的接口
     在任何一个正常的模块化标准,都应该默认隐藏模块中的所有实现,而通过一些语法或api调用来暴露接口
    模块的导入:
     当需要使用一个模块时,使用的是该模块暴露部分(导出的部分),隐藏的部分永远是无法使用的
   
    commonJS 规范:
     commonJS 使用exports导出模块, require导入模块
     具体规范如下:
       1. 如果一个JS文件中存在exports或require, 该JS文件是一个模块
       2. 模块内所有代码均为隐藏代码,包括全局变量,全局函数,这些全局的内容均不应该对全局变量造成污染
       3. 如果一个模块需要暴露一些API 提供给外部使用,需要通过exports导出,exports是一个空对象,你可以为该对象添加任何需要导出的内存。
       4. 如果一个模块需要导入其他模块,通过require实现,require是一个函数,传入模块的路径即可返回该模块导出的整个内容
       注意: nodejs 中导入模块,使用相对路径,并且必须以./../ 开头

    nodejs 对CommonJS的实现
    为了实现CommonJS规范,nodejs对模块做了以下处理:
      1. 为了保证高效的执行,仅加载必要的模块。nodejs只有执行到require函数才会加载并执行模块
      2. 为了隐藏模块中的代码,nodejs执行模块时,会将模块中的所有代码放置到一个函数中取执行,以保证不污染全局变量
      (function(){})();
      3. 为了保证顺利的导出模块的内容,nodejs做了一些处理:
        1. 在模块开始执行前,初始化一个值为module.exports = _+
        2. module.exports 即模块的导出值
        3. 为了方便开发者便捷的导出,nodejs在初始化完module.exports 后, 又声明了一个变量 exports = module.exports
        (function(module){
            module.exports = {};
            var exports = module.exports;
            // 模块中的代码
            return module.exports;
        })()  
      4. 为了避免反复重复加载同一个模块,nodejs默认开启了模块缓存,如果加载的模块已经被加载过了,则自动使用之前的导出结果    

   ===================es6导入=================================
   模块的引入:
    注意: 这一部分非模块化标准, 目前浏览器使用以下方式引入一个ES6模块文件:
     <script scr="入口文件" type="module">
    ES6模块导入导出分为两种:
     1. 基本的导入导出
     2. 默认的导入导出
     
    基本的导出:
    类似于 export.xxx
    使用方法:
    export 声明表达式
     例如: export const a = 1 // 导出a,值为2, 类似CommonJS中的exports.a = 1
            export function test() {} // 导出test,值为一个函数,类似CommonJS中的 exports.text = function(){}
     export {} 
    例如: const a = 18; export {age} // 将a 的名称当作导出的名称,将a的值当作导出的值
    由于基本导出必须具有名称,所以要求导出的内容必须跟上声明表达式或具名符号

    基本导入:
    由于使用的是依赖预加载,因此,导入的任何其他模块,导入代码必须放置到所有代码之前
    对于基本导出,如果要进行导入,使用下面的代码:
    import {导入的符号列表} from "模块路径"
     例如: import {name, age} from "a.js"
    
     注意:
      1. 导入的时候,可以通过关键字as 来进行重命名
      2. 导入时使用的符号是常量,不可以修改
      3. 可以使用*号导入所有的基本导出,形成一个对象
      
   
    默认的导入导出
    默认导出:每个模块,除了允许有多个基本导出之外,还允许有一个默认导出,默认导出类似于CommonJS中的module。exports,由于只有一个,因此无需具名
    具体的语法是:
    export default 默认导出的数据
     例如: export default 123

    或者export {默认导出的数据 as default} 
    由于每个模块仅允许只有一个默认导出,因此,每个模块只能有一个默认导出 

    默认导入:
    需要想要导入一个模块的默认导出,使用下列语法:
    import 接受变量名 from "路径"
    注意: 如果使用*号,会将所有的默认导出聚和到一个对象里面
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章