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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
js仿京东放大镜效果
Aug 09 Javascript
angular共享依赖的解决方案分享
Oct 15 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显示Facebook的粉丝数量方法
2014/01/08 PHP
PHP正则验证Email的方法
2015/06/15 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
web 页面分页打印的实现
2009/06/22 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现队列的方法
2015/05/26 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Django框架视图函数设计示例
2019/07/29 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
Python map及filter函数使用方法解析
2020/08/06 Python
Python识别验证码的实现示例
2020/09/30 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
银行演讲稿范文
2014/01/03 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
总经理检讨书范文
2015/02/16 职场文书
律师催款函范文
2015/06/24 职场文书
2019年教师入党申请书
2019/06/27 职场文书