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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
js中创建对象的几种方式
Feb 05 Javascript
node.js实现登录注册页面
Apr 08 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 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和XSL stylesheets转换XML文档
2006/10/09 PHP
php at(@)符号的用法简介
2009/07/11 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
关于python写入文件自动换行的问题
2018/06/23 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
python2.7的flask框架之引用js&css等静态文件的实现方法
2019/08/22 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
QML使用Python的函数过程解析
2019/09/26 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
工人先进事迹材料
2014/12/26 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python