模塊化js的嘗試

go4it 發(fā)布于2019-08-19 17:53 / 2702人閱讀

最初設(shè)想

require.js

var es = {};
es.each = function(arr, fn) {
  var i = 0;
  while(arr.length !== i) {
    fn(i, arr[i]);
    i++;
  }
};
var count = 0;
var cache = {};
var module = {};
module.exports = null;
var arr = [];
var require = function(m, cb) {
  while(m[0]) {

    var js = document.createElement("script");
    js.src = m[0];
    js.id = m[0];
    js.charset = "utf-8";
    document.querySelectorAll("head")[0].appendChild(js);

    count++;
    js.onload = function() {
      count--;
      if (count === 0) {
        es.each(arr, function(i, cb) {
          cb(require, module.exports, module);
          arr[i] = module.exports;
        });
        cb.apply(null, arr)
      }
    };
    m.shift();
  }
}

var define = function(cb) {
  var id = document.currentScript.id;
  cache[id] = {
    status: "loading",
    callback: cb
  };
  arr.push(cb);
};

require(["a.js", "b.js"], function(a, b) {
  console.log(a);// aaa
  console.log(b);// bbb
});

a.js

define(function(require, exports, module) {
  module.exports = "aaa";
});

b.js

define(function(require, exports, module) {
  module.exports = "bbb";
});

云服務(wù)器 GPU云服務(wù)器云服務(wù)器怎么解決你正嘗試從不屬于 js模塊化 js模塊化視頻教程模塊化機(jī)房的優(yōu)勢(shì)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78943.html

相關(guān)文章

通過(guò)源碼解析 Node.js 中一個(gè)文件被 require 后所發(fā)生的故事

摘要：在中，要說(shuō)如果有幾乎會(huì)在每一個(gè)文件都要用到的一個(gè)全局函數(shù)和一個(gè)全局對(duì)象，那應(yīng)該是非和莫屬了。它們是模塊機(jī)制的基石。若仍未返回，則為指定的模塊路徑依次加上，和，判斷是否存在，若存在則返回拼接后的路徑。在 Node.js 中，要說(shuō)如果有幾乎會(huì)在每一個(gè)文件都要用到的一個(gè)全局函數(shù)和一個(gè)全局對(duì)象，那應(yīng)該是非 require 和 module.exports 莫屬了。它們是 Node.js 模塊...

lcodecorex 2019-08-21 13:38 評(píng)論0 收藏0
node模塊加載層級(jí)優(yōu)化

摘要：環(huán)境變量法通過(guò)上一節(jié)的源碼分析，我們知道了的作用，那么如何使用或者優(yōu)雅的使用來(lái)解決依賴加載問(wèn)題呢嘗試一最為直接的是，修改系統(tǒng)的環(huán)境變量。模塊加載痛點(diǎn) 大家也或多或少的了解node模塊的加載機(jī)制，最為粗淺的表述就是依次從當(dāng)前目錄向上級(jí)查詢node_modules目錄，若發(fā)現(xiàn)依賴則加載。但是隨著應(yīng)用規(guī)模的加大，目錄層級(jí)越來(lái)越深，若是在某個(gè)模塊中想要通過(guò)require方式以依賴名稱或相對(duì)路...

eccozhou 2019-08-20 12:21 評(píng)論0 收藏0
嘗試造了個(gè)工具類庫(kù)，名為 Diana

摘要：的另一種形式測(cè)試踩坑之路代碼覆蓋率單元測(cè)試的代碼覆蓋率統(tǒng)計(jì)，是衡量測(cè)試用例好壞的一個(gè)的方法。 showImg(https://segmentfault.com/img/remote/1460000012564211?w=640&h=280); 項(xiàng)目地址: diana文檔地址: http://muyunyun.cn/diana/ 造輪子的意義為啥已經(jīng)有如此多的前端工具類庫(kù)還要自己造輪...

zhichangterry 2019-08-21 18:22 評(píng)論0 收藏0
webpack 配置多頁(yè)面應(yīng)用的一次嘗試

摘要：最近有一個(gè)項(xiàng)目，考慮到要進(jìn)行，所以要做成多頁(yè)面應(yīng)用。為了保證開發(fā)速度和開發(fā)效率，所以決定使用做一套模塊化配置方案。最近有一個(gè)項(xiàng)目，考慮到要進(jìn)行 SEO，所以要做成多頁(yè)面應(yīng)用。為了保證開發(fā)速度和開發(fā)效率，所以決定使用 webpack 做一套模塊化配置方案。下面主要針對(duì)一些重要的點(diǎn)提供思路，并不作詳解。完整的代碼，我會(huì)放在 github（項(xiàng)目地址）上供大家參考，如果有優(yōu)化的地方，請(qǐng)?jiān)?..

lushan 2019-08-02 15:18 評(píng)論0 收藏0
webpack 配置多頁(yè)面應(yīng)用的一次嘗試

摘要：最近有一個(gè)項(xiàng)目，考慮到要進(jìn)行，所以要做成多頁(yè)面應(yīng)用。為了保證開發(fā)速度和開發(fā)效率，所以決定使用做一套模塊化配置方案。最近有一個(gè)項(xiàng)目，考慮到要進(jìn)行 SEO，所以要做成多頁(yè)面應(yīng)用。為了保證開發(fā)速度和開發(fā)效率，所以決定使用 webpack 做一套模塊化配置方案。下面主要針對(duì)一些重要的點(diǎn)提供思路，并不作詳解。完整的代碼，我會(huì)放在 github（項(xiàng)目地址）上供大家參考，如果有優(yōu)化的地方，請(qǐng)?jiān)?..

Mike617 2019-08-23 18:07 評(píng)論0 收藏0