模块化模式可以帮助我们组织代码,尤其是随着代码的增长。有别于其他的语言,js没有特定的语法支持包,但是模块化设计模式提供了创建自我包容并减少代码碎片, 这种模式可以被认为是根据你的软件代码的需求进行函数式的可添加替换或删除。
模块化模式是几种模式的集合:
命名空间
函数及时实现
私有和专有成员
声明式依赖
首先,我们先用命名空间函数开始一个有用的模块例子,提供了一个数组:
MYAPP.namespace('MYAPP.utilities.array');
下一步定义模块。这个模式利用及时执行函数提供私有作用域。及时执行函数返回一个对象---事实上的模块和他的公共接口,提供了用户这个模块的接口。
MYAPP.utilities.array = (function () {
return {
// todo...
};
}());
下一步,添加方法和公共接口:
MYAPP.utilities.array = (function () {
return {
inArray: function (needle, haystack) {
// ...
},
isArray: function (a) {
// ...
}
};
}());
用及时执行函数提供的私有作用域,你可以声明一些私有的属性和方法,在及时执行函数的顶端,你也可以道行明任何你的模块拥有的依赖,跟着 变量的声明,你可以吧帮助设置模块化的代码选择性的一次初始化。最后的结果是一个及时执行函数返回的一个对象,包含公共接口和模块:
MYAPP.namespace('MYAPP.utilities.array');
MYAPP.utilities.array = (function () {
// dependencies
var uobj = MYAPP.utilities.object,
ulang = MYAPP.utilities.lang,
// private properties
array_string = "[object Array]",
ops = Object.prototype.toString;
// private methods
// ...
// end var
// optionally one-time init procedures
// ...
// public API
return {
inArray: function (needle, haystack) {
for (var i = 0, max = haystack.length; i < max; i += 1) {
if (haystack[i] === needle) {
return true;
}
}
},
isArray: function (a) {
return ops.call(a) === array_string;
}
// ... more methods and properties
};
}());
模块模式是广泛应用和高度提倡的组织代码的方式,特别是增长型的代码。
揭露模块模式
我们已经在看私有模式时讨论过揭露模式。模块模式可以被看做所有方法都是私有的并仅仅暴露出那些你最终决定的公共api。
以上可转换为:
MYAPP.utilities.array = (function () {
// private properties
var array_string = "[object Array]",
ops = Object.prototype.toString,
// private methods
inArray = function (haystack, needle) {
for (var i = 0, max = haystack.length; i < max; i += 1) {
if (haystack[i] === needle) {
return i;
}
}
return −1;
},
isArray = function (a) {
return ops.call(a) === array_string;
};
// end var
// revealing public API
return {
isArray: isArray,
indexOf: inArray
};
}());
模块创建构造器
上述的例子产生了一个 Myapp.utilities.array 对象, 但是有时使用构造函数创建对象更方便,你可以用模块化来做。
惟一的区别是及时执行函数包装了模块,返回一个函数不是一个对象。
MYAPP.namespace('MYAPP.utilities.Array');
MYAPP.utilities.Array = (function () {
// dependencies
var uobj = MYAPP.utilities.object,
ulang = MYAPP.utilities.lang,
// private properties and methods...
Constr;
// end var
// optionally one-time init procedures
// ...
// public API -- constructor
Constr = function (o) {
this.elements = this.toArray(o);
};
// public API -- prototype
Constr.prototype = {
constructor: MYAPP.utilities.Array,
version: "2.0",
toArray: function (obj) {
for (var i = 0, a = [], len = obj.length; i < len; i += 1) {
a[i] = obj[i];
}
return a;
}
};
// return the constructor
// to be assigned to the new namespace
return Constr;
}());
使用方式:
var arr = new MYAPP.utilities.Array(obj);
模块中引入全局变量
再一个共同的变化模式中,你可以传递参数给包了模块的及时执行函数,你可以传递任何参数,但是通常是全聚德变量的引用,或者是全局变量本身,引入全局变量帮众加快全局符号的解决,因为导入的变量变成了本地
MYAPP.utilities.module = (function (app, global) {
// 全局对象的引用
// 全局程序的命名空间对象
// 都变成本地变量
}(MYAPP, this));
分享到:
相关推荐
javascript模块化
最后,还探讨了模块化的JavaScript模式、jQuery及其插件中的设计模式。 《JavaScript设计模式》适合专业的Web开发人员和前端工程师阅读。通过阅读本书,他们将能够提高对设计模式的认识,并学会如何将设计模式应用...
JS模块化标准技术.JAVASCRIPT的几种模块化技术 作为前端重要组成部分的javascript语言,其面向对象功能非常差.所以要实现代码的模块化,需要一些标准:AMD,CMD 针对2种模块化也有现成的js模块化库SeaJs,require.js 今天...
JavaScript设计模式.pdf
介绍js编程中使用模块化方式进行代码编写,模块化一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口、模块间具有透明性
自己总结的js模块化的大纲,有兴趣的都可以下载来看看,有问题的也欢迎联系我大家一起来讨论,共同进步,共同成长。
JavaScript设计模式与开发实践.pdf
作者针对常见的开发任务,从YUI等实战代码中取材,提供了专家级的解决方案,不仅透彻剖析了JavaScript扣的面向对象编程,而且深入探讨了如何用JavaScript实现以前只在服务器端应用的设计模式,如何根据实际场景选择...
在吃透了前面所说的书之后,接下来两本书的顺序已经无关紧要了,《JavaScript DOM高级程序设计》(注意和《JavaScript 高级程序设计》相区别)和《JavaScript设计模式》,这两本都是重量级的书,能让你的JS技术上一...
Hydra.js 是一个开源的 JavaScript 库,提供 Web 应用的模块化架构。其目的: 避免因为一个小错误导致整个应用挂掉 扩展性 框架 可伸缩、可维护的面向模块的系统 标签:Hydra Web框架
通行的Javascript模块规范共有两种:CommonJS和AMD。我主要介绍AMD,但是要先从CommonJS讲起
js模块系统介绍的ppt,简要介绍js现有的几个模块规范,包括commonJS模块规范,amd,cmd,es6模块系统。并详细对比seaJS和requireJS的异同
javascript 基本设计模式详细介绍 附带js 函数式编程pdf资源
JavaScript 设计模式(高清扫描版本)- 张容铭
本书在尊重《设计模式》原意的同时,针对JavaScript语言特性全面介绍了更适合JavaScript程序员的了16个常用的设计...本书将教会你如何把经典的设计模式应用到JavaScript语言中,编写出优美高效、结构化和可维护的代码。
js模块化(模块化思想)
为了帮助大家快速和较好地理解JavaScript设计模式中的单例模式,本文对JavaScript的单例模式进行了分析并进行简易的代码演示,希望本文能够给有需要的人带来一点小小的帮助。
模块化的js . pdf pdf文档 介绍模块化的js
JavaScript高级与设计模式.zip
js模块化 js模块化 js模块化 js模块化 js模块化 js模块化