JavaScript模塊管理的簡單實現(xiàn)方式詳解
1. 為什么會有這個東西?
方便組織你的代碼,提高項目的可維護性。一個項目的可維護性高不高,也體現(xiàn)一個程序員的水平,在如今越來越復雜的前端項目,這一點尤為重要。
2. 為什么不用requirejs,seajs等
它們功能強大,但是文件體積是個問題,此外還有就是業(yè)務有時候可能沒那么復雜,正如開頭所說的:keep it simple
3. 以下的實現(xiàn)從哪里來的?
這些借鑒了requirejs,seajs,commonjs等的實現(xiàn),用于真實的項目,穩(wěn)定運行,效果不錯。
4. 適用場景
移動端頁面,將js注入到html頁面,這樣就不用考慮模塊加載的問題,從而節(jié)省了很多的代碼,在實現(xiàn)上也更為的簡單。
如果是多文件加載的話,需要手動執(zhí)行文件加載順序,那么其實最好用庫來進行依賴管理會好一點。
實現(xiàn)1
(function(global){ var modules = {}; var define = function (id,factory) { if(!modules[id]){ modules[id] = { id : id, factory : factory }; } }; var require = function (id) { var module = modules[id]; if(!module){ return; } if(!module.exports){ module.exports = {}; module.factory.call(module.exports,require,module.exports,module); } return module.exports; } global.define = define; global.require = require; })(this);
使用示例
define('Hello',function(require,exports,module){ function sayHello() { console.log('hello modules'); } module.exports = { sayHello : sayHello } }); var Hello = require('Hello'); Hello.sayHello();
實現(xiàn)2
function Module(main,factory){ var modules = {}; factory(function(id,factory){ modules[id] = { id : id, factory : factory, } }); var require = function (id) { var module = modules[id]; if(!module){ return; } if(!module.exports){ module.exports = {}; module.factory.call(module.exports,require,module.exports,module); } return module.exports; } window.require = require; return require(main); }
使用示例
Module('main',function(define){ define('Hello',function(require,exports,module){ function sayHello () { console.log('hello'); } //有效的寫法 module.exports = { sayHello : syaHello; } //或者 exports.sayHello = sayHello; }); //mian,程序入口 define('main',function(require,exports,module){ var Hello = require('Hello'); Hello.sayHello(); }); });
實現(xiàn)3
另外一種風格的模塊管理
(function(global) { var exports = {}; //存儲模塊暴露的接口 var modules = {}; // global.define = function (id,factory) { modules[id] = factory; } global.require = function (id) { if(exports[id])return exports[id]; else return (exports = modules[id]()); } })(this);
使用示例
define('Hello',function(require,exports,module){ function sayHello() { console.log('hello modules'); } //暴露的接口 return { sayHello : sayHello }; }); var Hello = require('Hello'); Hello.sayHello();
實踐
有了簡易的模塊化管理之后,在項目中,我們就可以采取這樣的結構
-- proj
-- html -- index.html -- css -- js -- common -- module1.js(通用模塊1) -- module2.js(通用模塊2) -- page -- index.js(頁面邏輯) -- lib -- moduler.js 模塊管理庫
配合前端構建工具(wepack,grunt,gulp等等),就可以構建一個移動端的頁面。
總結
如今的框架非常地多,而且越做越龐大??蚣芡ǔ?紤]通用性,對于精益求精的項目來說,可能有時候也要自己動手去實現(xiàn)一些關鍵的點,而學習的來源就是這些牛逼的框架。
相關文章
基于JavaScript代碼實現(xiàn)隨機漂浮圖片廣告
在網上有很多這樣的代碼,不過未必符合W3C標準,因為在頭部加上<!DOCTYPE html>類似標簽之后,漂浮效果就會失效,下面分享一個符合標準的漂浮代碼,使需要的朋友免去大量改造代碼的繁瑣2016-01-01setTimeout 函數(shù)在前端延遲搜索實現(xiàn)中的作用詳解
這篇文章主要為大家介紹了setTimeout 函數(shù)在前端延遲搜索實現(xiàn)中的作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12javascript簡寫常用的12個技巧(可以大大減少你的js代碼量)
這篇文章主要跟大家分享了javascript簡寫常用的12個技巧,通過這12個技巧可以大大減少你的js代碼量,看懂一種是入門,全懂就是大神,你能知道幾個呢?需要的朋友們下面跟著小編來一起學習學習下吧。2017-08-08layui自定義驗證,用ajax查詢后臺是否有重復數(shù)據(jù),form.verify的例子
今天小編就為大家分享一篇layui自定義驗證,用ajax查詢后臺是否有重復數(shù)據(jù),form.verify的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS表格組件BootstrapTable行內編輯解決方案x-editable
這篇文章主要介紹了JS組件系列BootstrapTable行內編輯解決方案:x-editable,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09