【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);