JavaScript模块管理的简单实现方式详解

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

总结

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

(0)

相关推荐

  • AngularJS模块管理问题的非常规处理方法

    1.起因 自己一直做winform,有幸从某个大神手里接了一个node.js,express,angularJS等集众多开源框架的一个项目,赶鸭子上架,于是一边学习,一边用自己以往的思中去整理,重构代码: 2.问题 在某几个环境下,需要用BootStrap的模态框,咱是学win的么.. 自然而然的想到将boosStrp的模态框整成一个通用的东西,四处调用 ... 于是用patial引用对话框文件,对话框本身用anglurJS进行了服务器相关的通讯 . 后来发现,当只用一个的时候是好用的,如果多次

  • 我的Node.js学习之路(二)NPM模块管理

    NPM是一个Node包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准.有了NPM,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装的包. NPM常用的命令有: (1)$ npm install moduleNames                安装Node模块                注意事项:如果在使用模块的时候不知道其名字,可以通过http://search.npmjs.org网站按照                                

  • 利用Angularjs中模块ui-route管理状态的方法

    ui-router 的工作原理非常类似于 Angular 的路由控制器,但它只关注状态. 在应用程序的整个用户界面和导航中,一个状态对应于一个页面位置 通过定义controller.template和view等属性,来定义指定位置的用户界面和界面行为 通过嵌套的方式来解决页面中的一些重复出现的部位 最简单的形式 模板可以通过下面这种最简单的方式来指定 <!-- in index.html --> <body ng-controller="MainCtrl"> &

  • Nodejs进程管理模块forever详解

    接下来,就让我们看看forever能不能实现目标. 一.forever介绍 forever是一个简单的命令式nodejs的守护进程,能够启动,停止,重启App应用.forever完全基于命令行操作,在forever进程之下,创建node的子进程,通过monitor监控node子进程的运行情况,一旦文件更新,或者进程挂掉,forever会自动重启node服务器,确保应用正常运行. 二. forever安装 全局安装forever 复制代码 代码如下: ~ D:\workspace\javascri

  • 关于Javascript模块化和命名空间管理的问题说明

    [关于模块化以及为什么要模块化] 先说说我们为什么要模块化吧.其实这还是和编码思想和代码管理的便利度相关(没有提及名字空间污染的问题是因为我相信已经考虑到模块化思想的编码者应该至少有了一套自己的命名法则,在中小型的站点中,名字空间污染的概率已经很小了,但也不代表不存在,后面会说这个问题). 其实模块化思想还是和面向对象的思想如出一辙,只不过可能我们口中所谓的"模块"是比所谓的"对象"更大的对象而已.我们把致力完成同一个目的的功能函数通过良好的封装组合起来,并且保证其

  • in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案

    国外的像基于jQuery的RequireJs,YUI Loader,LabJs,RunJs,国内也有淘宝的SeaJs,豆瓣的DoJs等,这些都是一些十分优秀的模块加载器.但是本文将会向大家介绍一个新的开源的轻量级"多线程"异步模块加载器In.js,In的开发借鉴了Do的一些思路和使用习惯,在此期间感谢@kejun同我的耐心交流,In.js压缩后只有4.77k,不仅小巧而且十分好用. 优点: 按需加载 无阻塞加载 依赖关系管理 颗粒化模块管理 如何使用? A.引入In.js 复制代码 代

  • JavaScript模块管理的简单实现方式详解

    1. 为什么会有这个东西? 方便组织你的代码,提高项目的可维护性.一个项目的可维护性高不高,也体现一个程序员的水平,在如今越来越复杂的前端项目,这一点尤为重要. 2. 为什么不用requirejs,seajs等 它们功能强大,但是文件体积是个问题,此外还有就是业务有时候可能没那么复杂,正如开头所说的:keep it simple 3. 以下的实现从哪里来的? 这些借鉴了requirejs,seajs,commonjs等的实现,用于真实的项目,稳定运行,效果不错. 4. 适用场景 移动端页面,将j

  • 基于JavaScript 声明全局变量的三种方式详解

    JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量.该方式即为显式声明详细如下: <script> var test = 5;//全局变量 function a(){ var a = 3;//局部变量 alert(a); } function b(){ alert(test); } //a();//调用a方法,那么方法里面的内容才会执行 //b(

  • JavaScript中子对象访问父对象的方式详解

    在传统面向对象的编程语言里,都会提供一种子类访问父类的特殊语法,引文我们在实现子类方法往往需要父类方法的额外辅助.在这种情况下,子类通常会调用父类中的同名方法,最终以便完成工作. javascript虽然没有类似上述的特殊语法,但我们可以造一个啊! function her(){}; her.prototype.name = 'Anna'; her.prototype.toString = function(){ var const = this.constructor; return cons

  • javascript url几种编码方式详解

    1. escape() 不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值.比如"春节"的返回结果是%u6625%u8282,escape()不对"+"编码主要用于汉子编码,现在已经不提倡使用了. 2. encodeURI()是javascript中真正用来对URL编码的函数.编码整个URL地址,但对特殊含义的符号";/?:@&=+$,#",也不进行编码.对应的解码函数是decodeURI(). 3. encodeU

  • 基于Python实现简单的定时器详解

    所谓定时器,是指间隔特定时间执行特定任务的机制.几乎所有的编程语言,都有定时器的实现.比如,Java有util.Timer和util.TimerTask,JavaScript有setInterval和setTimeout,可以实现非常复杂的定时任务处理.然而,牛叉到无所不能的Python,却没有一个像样的定时器,实在令人难以理解. 刚入门的同学一定会说:不是有个time.sleep吗?定好闹钟睡大觉,闹钟一响,起来干活,这不就是一个定时器吗?没错,time.sleep具备定时器的基本要素,但若作

  • 使用纯前端JavaScript实现Excel导入导出方法过程详解

    公司最近要为某国企做一个**统计和管理系统, 具体要求包含 Excel导入导出根据导入的数据进行展示报表图表展示(包括柱状图,折线图,饼图),而且还要求要有动画效果,扁平化风格Excel导出,并要提供客户端来管理Excel 文件... 要求真多! 现在总算是完成了,于是将我的经验分析出来. 在整个项目架构中,首先就要解决Excel导入的问题. 由于公司没有自己的框架做Excel IO,就只有通过其他渠道了. 嗯,我在github上找到了一个开源库xlsx,通过npm方式来安装. npm inst

  • React状态管理Redux的使用介绍详解

    目录 1. 简介 2. 核心概念 3. redux工作流 4. 模拟redux工作流程 5. 使用redux 6. react-redux 1. 简介 Redux 是 JavaScript 应用的状态容器(对象),提供可预测的状态管理.可以让你开发出行为稳定可预测的应用,运行于不同的环境(客户端.服务器.原生应用),并且易于测试.Redux 除了和 React 一起用外,还支持其它界面库. 解决的问题:多层级组件间通信问题. 2. 核心概念 单一数据源 整个redux中的数据都是集中管理,存储于

  • JS定义类的六种方式详解

    在前端开发中,经常需要定义JS类.那么在JavaScript中,定义类的方式有几种,分别是什么呢?本文就JS定义类的六中方式说明如下(案例说明): 1.工厂方式 function Car(){ var ocar = new Object; ocar.color = "blue"; ocar.doors = 4; ocar.showColor = function(){ document.write(this.color) }; return ocar; } var car1 = Car

  • hibernate4基本配置方式详解

    可编程的配置方式-1 如果在配置cfg.xml的时候,不想在里面配置hbm.xml怎么办呢?可在程序里使用可编程的配置方式,也就是使用程序来指定在cfg.xml里面的配置信息,不推荐这种方式.如下: Configuration cfg= new Configuration() .addResource("Item.hbm.xml") .addResource("Bid.hbm.xml"); 一个替代方法(有时是更好选择)是,指定被映射的类,让Hibernate帮你寻

  • Python selenium 三种等待方式详解(必会)

    很多人在群里问,这个下拉框定位不到.那个弹出框定位不到-各种定位不到,其实大多数情况下就是两种问题:1 有frame,2 没有加等待.殊不知,你的代码运行速度是什么量级的,而浏览器加载渲染速度又是什么量级的,就好比闪电侠和凹凸曼约好去打怪兽,然后闪电侠打完回来之后问凹凸曼你为啥还在穿鞋没出门?凹凸曼分分中内心一万只羊驼飞过,欺负哥速度慢,哥不跟你玩了,抛个异常撂挑子了. 那么怎么才能照顾到凹凸曼缓慢的加载速度呢?只有一个办法,那就是等喽.说到等,又有三种等法,且听博主一一道来: 1. 强制等待

随机推荐