Javascript对象的创建模式 -- 深入了解Javascript
/*
一、模式1:命名空间(namespace)
优点:减少全局命名所需的数量,避免命名冲突或过度
*/
// 更简洁的方式
var MYAPP = MYAPP || {}; //定义通用方法
MYAPP.namespace = function (ns_string) {
var parts = ns_string.split('.'),
parent = MYAPP,
i; // 默认如果第一个节点是MYAPP的话,就忽略掉,比如MYAPP.ModuleA
if (parts[0] === "MYAPP") {
parts = parts.slice(1);
} for (i = 0; i < parts.length; i += 1) {
// 如果属性不存在,就创建
if (typeof parent[parts[i]] === "undefined") {
parent[parts[i]] = {};
}
parent = parent[parts[i]];
}
return parent;
};
/*
二、模式2:定义依赖
*/
var myFunction = function () {
// 依赖模块
var event = YAHOO.util.Event,
dom = YAHOO.util.dom; // 其它函数后面的代码里使用局部变量event和dom
};
/*
三、模式3:私有属性和私有方法 --通过闭包来实现
*/
function Gadget() {
var name = "123";//私有属性
//公有函数
this.getName = function () {
return name;
}
}
var myObj; // 通过自执行函数给myobj赋值
(function () {
var name = "123";//自由对象
myObj = {
//授权方法
getName: function () {
return name;
}
}
}());
/*
四、模式4:Revelation模式 --隐藏私有方法的模式
在外部先声明一个变量,然后在内部给变量赋值公有方法
*/
var myarray;
(function () {
function isFunc() { }
//通过赋值的方式,将上面所有的细节都隐藏了
myarray = {
myFunc: isFunc
};
}());
/*
五、模式5:链模式
链模式可以你连续可以调用一个对象的方法,比如obj.add(1).remove(2).delete(4).add(2)这样的形式,其实现思路非常简单,就是将this原样返回
*/
var obj = {
value: 1,
increment: function () {
return this;
},
add: function () {
return this;
}
}
obj.increment().add();
/*
六、模式6:函数语法糖
函数语法糖是为一个对象快速添加方法(函数)的扩展,这个主要是利用prototype的特性
*/
if (typeof Function.prototype.method !== "function") {
Function.prototype.method = function (name, implementation) {
this.prototype[name] = implementation;
return this;
};
}
var Person = function (name) {
this.name = name;
}
.method('getName',
function () {
return this.name;
})
.method('setName', function (name) {
this.name = name;
return this;
});
/*
六、模式7:对象常量
对象常量是在一个对象提供set,get,ifDefined各种方法的体现,而且对于set的方法只会保留最先设置的对象,后期再设置都是无效的,已达到别人无法重载的目的
*/
var constant = (function () {
var ownProp = Object.prototype.hasOwnProperty,
// 只允许设置这三种类型的值
allowed = {
string: 1,
number: 1,
boolean: 1
},
consstants = {};
return {
set: function (name, value) {
if (this.isDefined(name)) {
return false;
}
if (!ownProp.call(allowed, typeof value)) {
return false;
}
constants[name] = value;
return true;
},
get: function () {
return null;
},
isDefined: function (name) {
return ownProp.call(constants, name);
}
}
}());
/*
六、模式8:沙盒模式
沙盒(Sandbox)模式即时为一个或多个模块提供单独的上下文环境,而不会影响其他模块的上下文环境,比如有个Sandbox里有3个方法event,dom,ajax,在调用其中2个组成一个环境的话,和调用三个组成的环境完全没有干扰
*/
function Sandbox() {
var args = Array.prototype.slice.call(arguments), //获取函数参数
callback = args.pop(),//最后一个参数,并从args除去
modules = (args[0] && typeof args[0] === "string") ? args : args[0], //除去最后一个参数,都为要选择的模块
i; //强制使用new修饰符
if (!(this instanceof Sandbox)) {
return new Sandbox(modules, callback);
}
// 向this对象上添加模块
// 如果没有模块或传入的参数为 "*" ,则以为着传入所有模块
if (!modules || modules == '*') {
modules = [];
for (i in Sandbox.modules) {
if (Sandbox.modules.hasOwnProperty(i)) {
modules.push(i);
}
}
} // 初始化需要的模块
for (i = 0; i < modules.length; i += 1) {
Sandbox.modules[modules[i]](this);
} // 调用 callback
callback(this);
}
Sandbox.modules = {}; Sandbox.modules.dom = function (box) {
box.getElement = function () {
};
box.getStyle = function () {
};
box.foo = "bar";
}; Sandbox.modules.event = function (box) {
// access to the Sandbox prototype if needed:
// box.constructor.prototype.m = "mmm";
box.attachEvent = function () {
};
box.detachEvent = function () {
};
}; Sandbox.modules.ajax = function (box) {
box.makeRequest = function () {
};
box.getResponse = function () {
};
};
// 调用方式
Sandbox(['ajax', 'event'], function (box) {
console.log(typeof (box.foo));
// 没有选择dom,所以box.foo不存在
}); Sandbox('ajax', 'dom', function (box) {
console.log(typeof (box.attachEvent));
// 没有选择event,所以event里定义的attachEvent也不存在
}); Sandbox('*', function (box) {
console.log(box); // 上面定义的所有方法都可访问
});
/*
六、模式9:静态成员
静态成员(Static Members)只是一个函数或对象提供的静态属性,可分为私有的和公有的
*/
// 1. 公有静态函数
// 构造函数
var Gadget = function () {
}; // 公有静态方法
Gadget.isShiny = function () {
return "you bet";
};
// 原型上添加的正常方法
Gadget.prototype.setPrice = function (price) {
this.price = price;
};
// 调用静态方法
console.log(Gadget.isShiny()); // "you bet" // 创建实例,然后调用方法
var iphone = new Gadget();
iphone.setPrice(500);
console.log(typeof Gadget.setPrice); // "undefined"
console.log(typeof iphone.isShiny); // "undefined"
Gadget.prototype.isShiny = Gadget.isShiny;
console.log(iphone.isShiny()); // "you bet"
// 2. 私有静态函数 --利用闭包特性实现
// a.第一种实现方式:
var Gadget = (function () {
// 静态变量/属性
var counter = 0; // 闭包返回构造函数的新实现
return function () {
console.log(counter += 1);
};
}()); // 立即执行
var g1 = new Gadget(); // logs 1
var g2 = new Gadget(); // logs 2
var g3 = new Gadget(); // logs 3
// b.第二种方式:
var Gadget = (function () {
// 静态变量/属性
var counter = 0,
NewGadget; //新构造函数实现
NewGadget = function () {
counter += 1;
}; // 授权可以访问的方法
NewGadget.prototype.getLastId = function () {
return counter;
}; // 覆盖构造函数
return NewGadget;
}()); // 立即执行 var iphone = new Gadget();
iphone.getLastId(); //
var ipod = new Gadget();
ipod.getLastId(); //
var ipad = new Gadget();
ipad.getLastId(); //
Javascript对象的创建模式 -- 深入了解Javascript的更多相关文章
- JavaScript(对象的创建模式)
JavaScript和其他语言略有不同,在JavaScript中,引用数据类型都是对象(包括函数).不过,在JavaScript中并没有“类”的概念,这决定了在JavaScript中不能直接来定义“类 ...
- javascript 对象的创建与继承模式
针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 6.1理解对象 创建对象的两个方法(暂时) //第一种,通过创建一个Object ...
- JavaScript 对象的创建
Object类型是JavaScript中使用最多的一种类型.创建Object实例的方式有多种,接下来一一列举. 1. Object构造函数 person1的friends属性修改影响了person2的 ...
- JavaScript对象的创建
原文 简书原文:https://www.jianshu.com/p/6cb1e7b7e379 大纲 前言 1.简单方式创建对象的方法 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对 ...
- JavaScript对象的创建之使用json格式定义
json: javascript simple object notation. json就是js的对象,但是它省去了xml中的标签,而是通过{}来完成对象的说明. 定义对象 var person = ...
- JavaScript 对象的创建和操作
<script> // 对象是属性的无序集合,每个属性都是一个名/值对. 属性名称是一个字符串. // 对象种类 // 内置对象(nativ ...
- Javascript 对象的创建和属性的判定
1. 创建对象的方法: 直接使用new 对Object对象进行操作,即对Object 对象进行实例化 <!DOCTYPE html> <html lang="en" ...
- JavaScript对象的创建之基于构造方法+原型方式
为了解决原型所带来的问题,此处需要通过组合构造方法和原型来实现对象的创建,将属性在构造方法中定义,将方法在原型中定义.这种有效集合了两者的优点,是目前最为常用的一种方式. function Perso ...
- js对象的创建模式
方式一: Object构造函数模式 * 套路: 先创建空Object对象, 再动态添加属性/方法 * 适用场景: 起始时不确定对象内部数据 * 问题: 语句太多 /* 一个人: name:" ...
随机推荐
- 【转】HTML5新增元素兼容旧浏览器方法
ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...
- 火狐浏览器设置placeholder的时候记得改opacity
最近做项目的时候涉及到需要修改输入框的placeholder的字体颜色,我的CSS如下: ::-webkit-input-placeholder{ color: #c5c5c5;}::-moz-pla ...
- sail.js学习 - 安装篇
导言: 最近在学习sails.js(http://sailsjs.org/),因为用的人不多,资料较少,故写些自己的学习过程.因自己也是初学node.js,有问题大家指出. 介绍: sails.js的 ...
- Spark自定义分区(Partitioner)
我们都知道Spark内部提供了HashPartitioner和RangePartitioner两种分区策略,这两种分区策略在很多情况下都适合我们的场景.但是有些情况下,Spark内部不能符合咱们的需求 ...
- php __clone需要注意的问题
当一个对象的属性是另外一个对象时,当有一个对象复制该对象时,当复制到这个属性(一个对象)时,只复制这个属性(对象)的引用,而不复制引用的对象. class Account{ public $bal ...
- angularJS通过post方法下载excel文件
最近工作中遇到,要使用angularJS的post方法来下载excel的情况.网上找到一个帖子:http://stackoverflow.com/questions/22447952/angularj ...
- 压力测试之TCPP
1.下载源码 tpcc-mysql-src.tgz 2.解压 tpcc-mysql-src.tgz 3.安装 [root@DBMysql mysql]# cd /home/mysql/tpcc-mys ...
- python实现 _ 图书馆书籍到期之前_自动邮件提醒
一共两个脚本: 第一个是[借书完毕以及借书信息有变更(续借等)]的时候需要执行的脚本:实现模拟登陆,同时最新的借书信息的下载到本地文本:之所以没有这样做,是因为如果每次爬取一遍的话,需要每次输入一遍验 ...
- 6.python字符串-内置方法列举
所谓内置方法,就是凡是字符串都能用的方法,这个方法在创建字符串的类中,下面是总结: 首先,我们要学习一个获取帮助的内置函数 help(对象) ,对象可以是一个我们创建出来的,也可以是创建对象的那个类, ...
- Ztack学习笔记(4)-系统网络分析
协调器的组网,终端设备和路由设备发现网络以及加入网络 //第一步:Z-Stack 由 main()函数开始执行,main()函数共做了 2 件事:一是系统初始化,另外一件是开始执行轮转查询式操作系统 ...