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插件简单实现代码
Apr 19 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
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 动态多文件上传
2009/01/18 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
JS面向对象编程详解
2016/03/06 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
layui select 禁止点击的实现方法
2019/09/05 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
小学教师自我鉴定
2013/11/07 职场文书
我的网上商城创业计划书
2013/12/26 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
人力资源部岗位职责
2015/02/11 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
SQL 聚合、分组和排序
2021/11/11 MySQL