seajs的原理以及基本使用

seajs模塊化開發

　　模塊化開發，把整個文件分割成一個一個小文件。

使用方法

　　使用方法特別簡單，首先在官網中下載sea.js，然後在頁面中引入。

index.html

// 1.路徑
// 2.回調 (在js文件里定義的module.exports里定義的)
seajs.use('./js/part1.js',function (dom) {
    console.log(dom);
    let a = dom('#box');
    console.log(a);
}); 

part1.js

// 1.在js文件里互相引用模塊
// 2.暫時不用管
// 3.導出(告訴別的文件可以使用我的xxx東西)
define(function (require,exports,module) {
    //這裡是定義模塊的地方
    function fn(dom) {
        return document.querySelector(dom);
    }
    module.exports = fn;
});

有一些需要註意的地方

define(function(require,exports,module){
    //這裡的require就把他當成一個關鍵字就可以了，不要去改變他
})

另外這一種判斷使用哪個模塊的

//條件 這種情況就不推薦使用下麵這種方式了，下麵的會把兩種都編譯還是什麼的，推薦使用require.async
define(function(require,exports,module){
    if(a){
        require('hello');
    }else{
        require('word');
    }
})

require.async

　　方法用來在模塊內部非同步載入模塊，併在載入完成後執行指定回調。callback 參數可選。

define(function(require, exports, module) {
  // 非同步載入一個模塊，在載入完成時，執行回調
  require.async('./b', function(b) {
    b.doSomething();
  });
    
  // 非同步載入多個模塊，在載入完成時，執行回調
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });
});
註意：require 是同步往下執行，require.async 則是非同步回調執行。require.async 一般用來載入可延遲非同步載入的模塊

exports

exports 是一個對象，用來向外提供模塊介面。

define(function(require, exports) {
​
  // 對外提供 foo 屬性
  exports.foo = 'bar';
​
  // 對外提供 doSomething 方法
  exports.doSomething = function() {};
​
});

除了給 exports 對象增加成員，還可以使用 return 直接向外提供介面。

define(function(require) {
​
  // 通過 return 直接提供介面
  return {
    foo: 'bar',
    doSomething: function() {}
  };
});

如果 return 語句是模塊中的唯一代碼，還可簡化為：

define({
  foo: 'bar',
  doSomething: function() {}
});

上面這種格式特別適合定義 JSONP 模塊。

特別註意：下麵這種寫法是錯誤的！

define(function(require, exports) {
  // 錯誤用法！！!
  exports = {
    foo: 'bar',
    doSomething: function() {}
  };
});

正確的寫法是用 return 或者給 module.exports 賦值：

define(function(require, exports, module) {
  // 正確寫法
  module.exports = {
    foo: 'bar',
    doSomething: function() {}
  };
});

提示：exports 僅僅是 module.exports 的一個引用。在 factory 內部給 exports 重新賦值時，並不會改變 module.exports 的值。因此給 exports 賦值是無效的，不能用來更改模塊介面。

模擬他的原理

　　步驟如下：

​ 　　1.html文件： seajs.use(1,2)執行

​ 　　2.插件： 模塊插件 創建一個script標簽 通過script把模塊引入進來

​　　 3.插件： 定義一個全局函數define，用來獲取模塊裡面所寫的代碼

​ 　　4.模塊：模塊文件里 執行defined（傳入一個函數）

​　　5.插件： seajs.use插件 執行上一步的函數 並且傳入三個參數

​ 　　6.再執行模塊里傳入的參數過程中，改變了module

​ 　　7.插件：插件里：執行回調函數，插件的第二個參數

　　​ 8.插件：刪除掉上面加入的script標簽

sea.js

let seajs = {};
seajs.use = function seajs(url,cb) {
    let oScript = document.createElement('script');
    let s = document.getElementsByTagName('script')[0];
    oScript.src = url;
    s.parentNode.insertBefore(oScript,s);

    /*function fn(dom) {
        return document.querySelector(dom);
    }*/

    let require,
        exports,
        module = {};
    window.define = function (fn) {
        fn(require,exports,module);
        cb(module.exports);
        s.parentNode.removeChild(oScript);
    };
}

index.html

seajs('./a.js',function(fn){
   let a = fn('#box');
   console.log(a);      
})

a.js

define(function (require,exports,module) {
    //這裡是定義模塊的地方
    function fn(dom) {
        return document.querySelector(dom);
    }
    module.exports = fn;
});

　　上面的代碼就是模擬了一下載入模塊的原理，其實就是自己新建了一個script標簽，將那個引入的模塊添加到了當前頁面當中，和JSONP差不多的原理，模塊中的define函數自己執行，將裡面的函數傳遞到sea.js插件中，然後再去做處理，sea.js將模塊中的module.exports = 的東西提取出來，回調函數傳遞給index中，接受到了這個模塊中的module.exports。

　　其實我寫的不是很清楚了，哈哈，可以用自己的方式去實現一下，我在這裡寫的這篇主要是對這兩天學的一些東西做一下總結。

　　當然，如果你能從中收穫一些我會非常高興的，如果看到這裡感覺什麼都沒用可以去官網去查看，上面講的非常清楚。sea.js官網