javascript 模块化模式总结(二)
一、对象字面值
这种设计模式中,一个对象被描述为一组以逗号分隔的名称/值对括在大括号({})的集合。对象内部的名称可以是字符串或是标记符后跟着一个冒号":"。在对象里最后一个名称/值对不应该以","为结束符,因为这样会导致错误。
例如:var myModel = {
myProperty : "someValue",
//对象字面值包含了属性和方法,例如我们可以定义一个模块配置进对象里边
myConfig:{
useCache : true,
language : "en"
},
//非常基本的方法
myMethod : function(){
console.log(" this is myMethod");
},
//输出基于当前的配置
myMethod1 :function(){
console.log("Cache is:"+ (this.myConfig.useCache)? "enabled" : "disabled" );
},
//重写当前的配置
myMethod2 : function(newConfig){
if(typeof newConfig == "object"){
this.myConfig = newConfig;
consle.log(this.myConfig.language);
}
}
}
1、myModel.myMethod();
输出:this is myMethod
2、myModel.myMethod1();
输出:Cache is:enabled
3、myModel.myMethod2({ language: "zh", useCache : false });
输出: zh
二、使用自包含的模块实现了模块模式
这种模式的特点:
- 可以创建只能被我们模块访问的私有函数。这些函数没有暴露出来(只有一些API是暴露出来的),它们被认为是完全私有的。
- 当我们在一个调试器中,需要发现哪个函数抛出异常的时候,可以很容易的看到调用栈,因为这些函数是正常声明的并且是命名的函数。
- 这种模式同样可以让我们在不同的情况下返回不同的函数。
例如:
var basketModel = ( function(){
var basket = [];
function dosomethingPrivate()
{
}
function dosomethingElsePrivate()
{
}
// Return an object exposed to the public
return{
// Add items to our basket
addItem : funtion(values){
basket.push(values);
},
// Get the count of items in the basket
getItemCount : function(){
return basket.length;
},
dosomething : dosomethingPrivate,
getTotal : function(){
var q = this.getItemCount();
p = 0;
while(q--){
p += this.basket[q].price;
}
return p;
}
};
}()); 使用方法:
basketModule.addItem({ item: "bread", price: 0.5});
basketModule.addItem({ item: "butter", price: 0.3});
//Outputs: 2
console.log( basketModule.getItemCount() );
//Outputs: 0.8
console.log( basketModule.getTotal() );
//undefined
console.log( basketModule.basket );
//undefined
console.log( basket );
三、Import mixins(导入混合)
这个变体展示了如何将全局(例如 jQuery)作为一个参数传入模块的匿名函数。
这种方式允许我们导入全局,并且按照我们的想法在本地为这些全局起一个别名。
var myModel = (function(JQ,_){
function privateMethod1(){
jQ(".container").html("test");
}
function privateMethod2(){
console.log( _.min([10, 5, 100, 2, 1000]) );
}
return {
publicMethod : function(){
privateMethod1();
}
} }(JQ,_));
四、暴露式模块模式
当我们想要在一个公有方法中调用另外一个公有方法,或者访问公有变量的时候,我们不得不重复主对象的名称。他也不喜欢模块模式中,当想要将某个成员变成公共成员时,修改文字标记的做法。因此在这个模式中,我们可以简单地在私有域中定义我们所有的函数和变量,并且返回一个匿名对象,这个对象包含有一些指针,这些指针指向我们想要暴露出来的私有成员,使这些私有成员公有化。
var myRevealingModule = function () {
var privateCounter = 0;
function privateFunction() {
privateCounter++;
}
function publicFunction() {
publicIncrement();
}
function publicIncrement() {
privateFunction();
}
function publicGetCount(){
return privateCounter;
}
// Reveal public pointers to
// private functions and properties
return {
start: publicFunction,
increment: publicIncrement,
count: publicGetCount
};
}(); myRevealingModule.start();
javascript 模块化模式总结(二)的更多相关文章
- Javascript模块化编程(二):AMD规范
Javascript模块化编程(二):AMD规范 作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...
- (转)Javascript模块化编程(二):AMD规范
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
- 简述JavaScript模块化编程(二)
前置阅读:简述JavaScript模块化(一) 在前面一文中,我们对前端模块化所经历的三个阶段进行了了解: CommonJs,由于是同步的,所以主要应用于服务器端,以Node.js为代表. AMD,异 ...
- Javascript模块化编程(二):AMD规范(转)
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
- Javascript模块化编程(二):AMD规范 作者: 阮一峰
声明:转载自阮一峰的网络日志 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可 ...
- Javascript模块化编程(二):AMD规范【转】
作者: 阮一峰 日期: 2012年10月30日 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为 ...
- Javascript模块化编程(二):AMD规范(转)
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
- (转)Javascript模块化编程(二):AMD规范
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
- Javascript模块化编程(二):AMD规范 (转)
原文作者: 阮一峰 日期: 2012年10月30日 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? ...
随机推荐
- LOJ2758 年轮蛋糕
JOI 君马上要和妹妹 JOI 子和 JOI 美一起吃小吃.今天的小吃是他们三个人都很喜欢的年轮蛋糕. 年轮蛋糕是像下图一样呈圆筒形的蛋糕.为了把蛋糕分给三个人,JOI 君必须沿着半径方向切 3 刀, ...
- Ext.js 中 25种类型的Ext.panel.Tool
通过Ext.panel.Panel的tools配置项来设置Ext.panel.Tool实例. 要注意的一点是,Ext框架提供的Ext.panel.Tool仅包含按钮图标而具体的点击事件处理函数需要我们 ...
- 无线遥控器方案 Si4010/Si4012
Si4010包含一个嵌入式兼容8051微控制器(MCU),内具4 kB的RAM.8 kB的一次性编程(OTP)非易失性内存.一个128位EEPROM以及用于函数库(library)功能的12 kB R ...
- 剑客vs刀客 Java vs .NET
刀,无鞘的刀,重三十六斤六两三分,刀重而不大,重而不笨,千年寒铁精炼而成,刀身颀长,刀背轻薄,锋利异常,刀身桔黄色,隐隐泛着青色,刀面嵌龙凤图案,似龙吟,似凤鸣.刀柄带有两环,轻轻撞击会发出" ...
- 一步一步部署WPF浏览器应用程序
WPF浏览器应用程序与Silverlight,Asp.net相比,同是发布到服务器,在IE中运行.WPF浏览器应用程序部署起来却相对困难. 相信很多朋友在第一次部署WPF浏览器应用程序时,都遇到&qu ...
- .NET:用T4消除代码重复,对了,也错了
背景 我需要为int.long.float等这些数值类型写一些扩展方法,但是我发现他们不是一个继承体系,我的第一个思维就是需要为每个类型重复写一遍扩展方法,这让我觉得非常不爽,但是我还是不情愿的写了, ...
- 打造android万能上拉下拉刷新框架——XRefreshView (二)
打造Android万能上拉下拉刷新框架--XRefreshView(一) 打造Android万能上拉下拉刷新框架--XRefreshView(三) 一.前言 自从上次发表了打造android万能上拉下 ...
- sessionid与cookie
转自:http://smiky.iteye.com/blog/649164 发现自己真的是很笨,过去一直用jsp,从来不用怕心用户信息放在session里面会找不到,现在不用jsp,前台全用html, ...
- Web开发中的6个坏习惯
在 Usersnap,我们在能很好的组织网站开发有超过20(总和)年的经验.我们认为这些过去的经验能让我们很好的分辨出什么是好.坏和丑陋的网站开发.如今我们不想把注意力放在消极的部分,但就这一次,我们 ...
- Cognos10.2.1配置加密信息不能被加密
好奇心害死猫,可是我不是猫.这个问题已经不是第一次出现了,之前是从10.1.1到10.2.0出现的,这次是从10.2.0到10.2.1出现的,上次由于时间的问题被搁置了,这次竟然再次遇到同样的问题,已 ...