【javascript高级】前端模块化，js模块化

js中没有类的概念，但js开发越来越复杂，需要有模块化的需求，于是很多技术应运而生。

commonjs

amd

cmd

他们的区别

requirejs是什么，它和commonjs的区别

 

别着急慢慢搞清楚，

 

请搞清楚后，自己手写在这里，禁止复制粘贴

 

相关链接：http://www.cnblogs.com/dolphinX/p/4381855.html

搜索关键词：前端模块化

 

 

请眼熟这个结构：

;(function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // Register as an anonymous AMD module:
        define([
            'jquery',
            'jquery.ui.widget'
        ], factory);
    } else if (typeof exports === 'object') {
        // Node/CommonJS:
        factory(
            require('jquery'),
            require('./vendor/jquery.ui.widget')
        );
    } else {
        // Browser globals:
        factory(window.jQuery);
    }
}(function ($) {
    'use strict';

    // code here

}));

肢解它：

;();

function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // Register as an anonymous AMD module:
        define([
            'jquery',
            'jquery.ui.widget'
        ], factory);
    } else if (typeof exports === 'object') {
        // Node/CommonJS:
        factory(
            require('jquery'),
            require('./vendor/jquery.ui.widget')
        );
    } else {
        // Browser globals:
        factory(window.jQuery);
    }
}(function ($) {
    'use strict';

    // code here

})

function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // Register as an anonymous AMD module:
        define([
            'jquery',
            'jquery.ui.widget'
        ], factory);
    } else if (typeof exports === 'object') {
        // Node/CommonJS:
        factory(
            require('jquery'),
            require('./vendor/jquery.ui.widget')
        );
    } else {
        // Browser globals:
        factory(window.jQuery);
    }
}

//下面的部分，作为参数传入上面那个函数中
(function ($) {
    'use strict';

    // code here

})

 进一步 

amd

function (factory) {
    // Register as an anonymous AMD module:
   define([
      'jquery',
      'jquery.ui.widget'
   ], factory);
}

node/commonJS

function (factory) {
     // Node/CommonJS:
    factory(
        require('jquery'),
        require('./vendor/jquery.ui.widget')
    );
}

浏览器原生

function (factory) {
    // Browser globals:
    factory(window.jQuery);
}

相当于：

amd

//amd 常见的写法
define( ['jquery','jquery.ui.widget'] , function ($) {

    // code here

    }
);

 

node/commonJS

// 有待研究。。。。。。。
function (factory) {
     // Node/CommonJS:

(function ($) {
    'use strict';

    // code here

})( require('jquery'), require('./vendor/jquery.ui.widget') ); 

}

 

 

浏览器原生：

//比较常见的写法：
(function ($) {
    'use strict';

    // code here

})(window.jQuery);