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 相关文章推荐
javascript 鼠标滚轮事件
Apr 09 Javascript
jquery ajax执行后台方法
Mar 18 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
jquery实现页面加载效果
Feb 21 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
微信小程序实现图片滚动效果示例
Dec 05 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
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
javascript引用对象的方法
2007/01/11 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
Python实现的自定义多线程多进程类示例
2018/03/23 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
python中Lambda表达式详解
2019/11/20 Python
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
焊接专业毕业生求职信
2013/10/01 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
开学第一天的感想
2015/08/10 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
成人成长感言如何写?
2019/08/16 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android