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 相关文章推荐
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 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脚本[带参数]的方法
2010/01/22 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python爬豆瓣电影实例
2018/02/23 Python
浅谈Django的缓存机制
2018/08/23 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
语文课外活动总结
2014/08/27 职场文书
经营场所证明范本
2015/06/19 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js