最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • Js模块化--AMD、CommonJS、ES6模块总结

    正文概述 掘金(白房子)   2021-06-26   496

    这是我参与更文挑战的第17天,活动详情查看:更文挑战

    CommonJS

    • CommonJS采用同步加载的方式运行,主要应用与服务端,加载完成之后不会立即执行里面的函数

    使用

    var moduleB = require('./moduleB');//导入使用
    // moduleB.js
    module.exports = { //导出模块
    	stuff: moduleB.doStuff();
    };
    
    • 在文件中多次引入同一个模块,只会加载一次,然后就会被缓存,后面继续引入时会去读取缓存,由于是同步加载,所以加载顺序与引入顺序有关

    • 导出文件时,exports=module.exports,需要注意的是,使用exports导出时需要直接点出属性,而不是导出对象

    module.exports={
        name:'tom'
    }
    //等同于
    exports.name ='tom'
    //这种是错误的
    exports={}
    
    • CommonJS模块加载可以嵌套在条件判断语句中,满足条件时会加载依赖,遵循只加载一次的规则,即使前面已经加载影响也不大
    if (loadCondition) {
        require('./moduleA');
    }
    

    AMDJS

    • AMDJS采用异步加载的方式,应用于客户端浏览器,加载完成之后会立即执行依赖它们的模块

    使用

    • 定义模块时,AMD在执行时所需要的依赖,并且指定该模块的唯一标识
    //定义一个moduleA,她依赖于moduleB
    define('moduleA', ['moduleB'], function(moduleB) {
        return {
            stuff: moduleB.doStuff();
        };
    });
    
    
    • AMD定义模块时,可以在它的内部使用CommonJS模块,也可以进行条件判断
    define('moduleA', ['require', 'exports'], function(require, exports) {
        if(true){
            var moduleB = require('moduleB');
            exports.stuff = moduleB.doStuff();
        }
    });
    
    //使用 引入成功之后执行callback()
    require(['moduleA'],function(moduleA){
        moduleA.stuff()
    })
    

    UMDJS

    • 为了统一CommonJS和AMD,产生了这两种规范都可以使用的UMD,UMD定义模块在使用的时候会检测要使用那种模块加载规范
    (function (root, factory) {
        if (typeof define === 'function' && define.amd) { // AMD。注册为匿名模块
            define(['moduleB'], factory);
        } else if (typeof module === 'object' && module.exports) { //CommonJS 环境下使用
            module.exports = factory(require(' moduleB '));
        } else { // 浏览器全局上下文( root 是 window)
            root.returnExports = factory(root. moduleB);
        }
    }(this, function (moduleB) {
        // 以某种方式使用 moduleB
        // 将返回值作为模块的导出
        // 这个例子返回了一个对象
        // 但是模块也可以返回函数作为导出值
        return {};
    }));
    

    ES6模块化

    • ES6模块只在加载后执行
    • 模块只加载一次
    • 在模块中可以继续加载其他模块
    • 异步加载

    使用

    • 导出模块时与CommonJS相似,可以有多个export
    
    //moduleA.js
    export const name ='tom'
    export const age =12
    //等同于
    export {name,age}
    
    
    //在其他文件引用的时候需要指定具体的名称
    import {name,age} from 'moduleA.js'
    
    
    • 但是只能有一个export default,否则会报错
    //moduleB.js
    export default{
    	name:'tom',age:12
    }
    //在其他文件引入时可以自定义引入的标识名称
    import person from  './moduleB'
    

    as

    • as可以用来重新命名导入或者导出的变量
    const foo = 'foo', bar = 'bar', baz = 'baz';
    export { foo, bar, baz }
    import * as Foo from './foo.js';//将导出的这个集合重新命名
    console.log(Foo.foo); // foo
    
    import { foo, bar, baz as myBaz } from './foo.js';  //将baz重新命名
    
    console.log(myBaz); // baz  
    
    • 对于标签引入来说,标签中添加type='module'来表明她是一个模块,在页面渲染时,遇到这个模块时,会直接加载这个js模块,不会阻塞页面解析,当页面解析完成之后在依照顺序执行
    <!-- 第二个执行 -->
    <script type="module"></script>
    <!-- 第三个执行 -->
    <script type="module"></script>
    <!-- 第一个执行 -->
    <script></script>
    另外,可以改为加载外部 JS 模块定义:
    <!-- 第二个执行 -->
    <script type="module" src="module.js"></script>
    <!-- 第三个执行 -->
    <script type="module" src="module.js"></script>
    <!-- 第一个执行 -->
    <script><script>
    

    起源地下载网 » Js模块化--AMD、CommonJS、ES6模块总结

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元