JavaScript模块管理的简单实现方式详解
2019-06-15 14:43
936 查看
1. 为什么会有这个东西?
方便组织你的代码,提高项目的可维护性。一个项目的可维护性高不高,也体现一个程序员的水平,在如今越来越复杂的前端项目,这一点尤为重要。
2. 为什么不用requirejs,seajs等
它们功能强大,但是文件体积是个问题,此外还有就是业务有时候可能没那么复杂,正如开头所说的:keep it simple
3. 以下的实现从哪里来的?
这些借鉴了requirejs,seajs,commonjs等的实现,用于真实的项目,稳定运行,效果不错。
4. 适用场景
移动端页面,将js注入到html页面,这样就不用考虑模块加载的问题,从而节省了很多的代码,在实现上也更为的简单。
如果是多文件加载的话,需要手动执行文件加载顺序,那么其实最好用库来进行依赖管理会好一点。
实现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();
实现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(); }); });
实现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等等),就可以构建一个移动端的页面。
总结
如今的框架非常地多,而且越做越庞大。框架通常考虑通用性,对于精益求精的项目来说,可能有时候也要自己动手去实现一些关键的点,而学习的来源就是这些牛逼的框架。
您可能感兴趣的文章:
相关文章推荐
- 基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
- javascript多行字符串的简单实现方式
- Java语言实现简单FTP软件------>上传下载管理模块的实现(十一)
- javascript多行字符串的简单实现方式
- javascript-简单工厂两种实现方式
- javascript实现二级下拉框(简单的方式)
- 详解用原生JavaScript实现jQuery的某些简单功能
- 使用python做一个简单的名片管理系统-------字符串拼接方式实现
- [原创]会议室管理模块的简单实现
- Android数据库SQLite使用详解二 : 学生管理系统的简单实现
- 基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
- 详解Java两种方式简单实现:爬取网页并且保存
- 详解java倒计时三种简单实现方式
- Spring AOP如何整合redis(注解方式)实现缓存统一管理详解
- 最简单纯JavaScript实现Tab标签页切换的方式(推荐)
- javascript中实现对象继承的五种方式详解
- Java语言实现简单FTP软件------>连接管理模块的实现:主机与服务器之间的连接与关闭操作(八)
- Java语言实现简单FTP软件------>本地文件管理模块的实现(九)
- javascript 小数取整简单实现方式
- javascript 小数取整简单实现方式