前端模塊化兩種規範

前端模塊化，是指js編寫的的模塊化規範。

本文參考：大神偶像阮一峯老師的文章

爲何要模塊化？

      1.一個文件須要不少js文件作依賴的時候，這些js文件之間的關係很容易讓人眩暈，模塊化後能夠現用現引；

      2. 模塊後能夠防止模塊內的變量和模塊外的變量相互污染；

模塊化發展經歷了哪些階段？連接

模塊化分類

       js是前、後端均可以用的語言，針對先後端不一樣的加載速度，模塊化規範也分爲兩種：後端的CommonJs 和前端的AMD規範

       CommonJs 的應用者就是nodejs。（webpack和它什麼關係？？？？？？）

                CommonJs 規範是同步加載的，正是由於這一點，CommonJs 不適合做爲前端規範來用，

               （由於前端因爲網速限制，每一個文件都加載模塊的話會產生大量的網絡請求，只適合做爲服務器的規範來使用）

                 nodejs每一個文件都是一個模塊；

                 經過module.export /export暴露接口來輸出，經過require來引入（這些必須在學習完nodejs以後才能理解）；

        AMD規範的應用者是requir.js；

                  require.js經過define來定義模塊，經過require來加載模塊，加載完模塊後執行後面的回調函數，回調函數的參數就是加載的模塊

                  具體操做（在html文件裏引入<script   src='./js/require.js'    data-main ='./js/main.js'></script>）

                      main.js裏配置（一般都有單獨的配置文件）和引用

//main.js
require.config({
    baseUrl: ' ./tool'
    paths: {
        'jquery': 'jquery',//若是沒有baseUrl，寫：'./too/query' 'math': 'math'
    }
})
//關於config屬性的參數，是一個對象，對象的屬性經常使用的有pahts（複數），baseUrl，

require(['jquery', 'math'], function ($, math) {//不配置的話會默認去找父級文件下的jQuery文件
    console.log($());
    math.add(1, 2)
})

 

                      定義模塊：兩種方法，函數式和對象式，一般使用函數式，也能夠引用依賴的模塊

                       

 1 //定義模塊有兩種形式：函數式和對象式
 2 define(function() {  //函數式
 3     function add(a,b){
 4         console.log(a + b)
 5         return a + b;
 6     }
 7     return {
 8         add: add
 9     }
10 });
11 // define([
12 //     'require',
13 //     'dependency'
14 // ], function(require, factory) {
15 //     'use strict';
16     
17 // });
18 // define({   //對象式
19 //     add:function(a,b){
20 //         console.log(a + b)
21 //         return a + b;
22 //     }
23 // });

 

 

              require.js的應用者是誰，和webpack有什麼關係，爲何webpack的配置文件和CommonsJs的配置文件格式那麼像？？？？？？？