博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
模块管理的简单实现方式
阅读量:5846 次
发布时间:2019-06-18

本文共 2577 字,大约阅读时间需要 8 分钟。

Keep It Simple,Stupid

Q&A

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等等),就可以构建一个移动端的页面。

总结

如今的框架非常地多,而且越做越庞大。框架通常考虑通用性,对于精益求精的项目来说,可能有时候也要自己动手去实现一些关键的点,而学习的来源就是这些牛逼的框架。

转载于:https://www.cnblogs.com/Unknw/p/6395440.html

你可能感兴趣的文章
初级文件系统管理之一
查看>>
Mac软件下载备忘
查看>>
java 泛型初探
查看>>
Golang安装包go get使用代理
查看>>
ceph-objectstore-tool工具使用示例
查看>>
在Linux中执行.sh脚本,异常/bin/sh^M: bad interpreter: No such file or directory
查看>>
一个GUI对话框界面
查看>>
Linux中sort 排序
查看>>
就是一个表格
查看>>
CakePHP 2.x CookBook 中文版 第三章 入门 之 CakePHP 的结构
查看>>
介绍2个免费生成手机端软件的网站
查看>>
Objective-C的算术表达式 .
查看>>
RPC failed; result=28, HTTP code = 0
查看>>
gcc编译C++程序
查看>>
linux中nfs的自动挂载
查看>>
统一关闭域客户端防火墙服务/功能
查看>>
expandablelistview open group scroll to top
查看>>
Android通过Aidl调用Service实例
查看>>
找回使用Eclipse删除的文件
查看>>
rabbitmq 消息系统 消息队列
查看>>