美文网首页
JS模块化工具

JS模块化工具

作者: 大前端之路 | 来源:发表于2016-12-29 15:30 被阅读0次

    AMD规范是依赖前置, CMD规范是依赖后置

    AMD规范的加载器会把所有的JS中的依赖前置执行CMD是懒加载, 如果JS需要这个模块就加载, 否则就不加载, 导致的问题是符合AMD规范的加载器(requireJS), 可能第一次加载的时间会比较久, 因为他把所有依赖的JS全部一次性下载下来;

    一:requirejs
    AMD
    JS模块化工具
    亮点:
    1、防止js加载阻塞页面渲染
    2、防出现各种js引用丑陋的场景

    define,require

    require.config({
        paths : {
            "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
            "a" : "js/a"
        }
    })
    require(["jquery","a"],function($){
        $(function(){
            alert("load finished");
        })
    })
    
    define(function(){ 
        function fun1(){
           alert("it works"); 
        } 
         fun1();
    })
    

    <a href="http://www.ruanyifeng.com/blog/2012/10/javascript_module.html">阮一峰Javascript模块化编程(一、二、三):模块的写法</a>
    <a href="http://www.cnblogs.com/diligenceday/p/4504160.html">Require的MVC方式</a>

    二:sea.js
    CMD
    <a href="http://seajs.org/docs/#docs">sea.js</a>

    目的是解决nodejs的commonjs与前端统一
    当然还有NPM兼容CommonJS, AMD, CMD 和 原生 JS写法

    ;(function(){ 
    function MyModule() {
             // ... 
    } 
    var moduleName = MyModule; 
    if (typeof module !== 'undefined' && typeof exports === 'object') { 
            module.exports = moduleName;
     } else if (typeof define === 'function' && (define.amd || define.cmd)) { 
            define(function() { return moduleName; }); 
    } else { this.moduleName = moduleName; }
    }).call(function() { 
            return this || (typeof window !== 'undefined' ? window : global);
    });
    

    相关文章

      网友评论

          本文标题:JS模块化工具

          本文链接:https://www.haomeiwen.com/subject/sscpvttx.html