JavaScript模块管理的简单实现方式详解


Posted in Javascript onJune 15, 2019

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 相关文章推荐
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
uniapp实现可滑动选项卡
Oct 21 Javascript
JavaScript工具库之Lodash详解
Jun 15 #Javascript
jQuery创建折叠式菜单
Jun 15 #jQuery
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 #Javascript
Async/Await替代Promise的6个理由
Jun 15 #Javascript
一些可能会用到的Node.js面试题
Jun 15 #Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 #Javascript
通过实例讲解JS如何防抖动
Jun 15 #Javascript
You might like
解决GD中文乱码问题
2007/02/14 PHP
php的access操作类
2008/04/09 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
一名老师的自我评价
2014/02/07 职场文书
党支部换届选举方案
2014/05/08 职场文书
保护黄河倡议书
2014/05/16 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
公司搬迁通知
2015/04/20 职场文书
七年级生物教学反思
2016/02/20 职场文书
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python