模塊化js的嘗試

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

最初設想

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";
});

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/78943.html

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

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

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

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

eccozhou 2019-08-20 12:21 評論0 收藏0
嘗試造了個工具類庫，名為 Diana

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

zhichangterry 2019-08-21 18:22 評論0 收藏0
webpack 配置多頁面應用的一次嘗試

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

lushan 2019-08-02 15:18 評論0 收藏0
webpack 配置多頁面應用的一次嘗試

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

Mike617 2019-08-23 18:07 評論0 收藏0