/*
一、模式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的更多相关文章

  1. JavaScript(对象的创建模式)

    JavaScript和其他语言略有不同,在JavaScript中,引用数据类型都是对象(包括函数).不过,在JavaScript中并没有“类”的概念,这决定了在JavaScript中不能直接来定义“类 ...

  2. javascript 对象的创建与继承模式

    针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 6.1理解对象 创建对象的两个方法(暂时) //第一种,通过创建一个Object ...

  3. JavaScript 对象的创建

    Object类型是JavaScript中使用最多的一种类型.创建Object实例的方式有多种,接下来一一列举. 1. Object构造函数 person1的friends属性修改影响了person2的 ...

  4. JavaScript对象的创建

    原文 简书原文:https://www.jianshu.com/p/6cb1e7b7e379 大纲 前言 1.简单方式创建对象的方法 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对 ...

  5. JavaScript对象的创建之使用json格式定义

    json: javascript simple object notation. json就是js的对象,但是它省去了xml中的标签,而是通过{}来完成对象的说明. 定义对象 var person = ...

  6. JavaScript 对象的创建和操作

    <script>         // 对象是属性的无序集合,每个属性都是一个名/值对. 属性名称是一个字符串.         // 对象种类         // 内置对象(nativ ...

  7. Javascript 对象的创建和属性的判定

    1. 创建对象的方法: 直接使用new 对Object对象进行操作,即对Object 对象进行实例化 <!DOCTYPE html> <html lang="en" ...

  8. JavaScript对象的创建之基于构造方法+原型方式

    为了解决原型所带来的问题,此处需要通过组合构造方法和原型来实现对象的创建,将属性在构造方法中定义,将方法在原型中定义.这种有效集合了两者的优点,是目前最为常用的一种方式. function Perso ...

  9. js对象的创建模式

    方式一: Object构造函数模式 * 套路: 先创建空Object对象, 再动态添加属性/方法 * 适用场景: 起始时不确定对象内部数据 * 问题: 语句太多 /* 一个人: name:" ...

随机推荐

  1. 下载uboot的调试版本到开发板的sdram中运行

    开发环境:开发板:FriendlyARM Tiny6410 主机:CentOS release 6.4 (Final) 开发板与主机通过串口线连接 调试用的uboot源码为开发板光盘提供的u-boot ...

  2. 数据包判断是否丢包 ping+tracert+mtr

    1.用咱们最常用的Ping命令来查看是不是真的丢包了 这里可以看到数据包发送了4个,返回了4个,丢失=0  证明没有丢失 也有可能中间路由做了策略不给ICMP的回应 这样就ping没法判断了  正常情 ...

  3. jQuery类级别插件--返回顶部,底部,去到任何部位

    先引入js:<script type="text/javascript" src="jquery.js" ></script><s ...

  4. centos查看设置端口开放状态

    centos查看端口是否已开放/etc/init.d/iptables status centos开放端口/sbin/iptables -I INPUT -p tcp --dport 8000 -j ...

  5. jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效

    jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...

  6. Android判断横屏竖屏代码

    // 判断Android当前的屏幕是横屏还是竖屏.横竖屏判断 if (this.getResources().getConfiguration().orientation == Configurati ...

  7. Delphi中nil和null的区别

    nil:空指针,空地址,对象也是指针,可以object := nil;null:是一个未定义值的变量,既不是0也不代表空字符串,它是未定义的.

  8. 判断Check复选框是否选中

    <div id="prm_div" style="font-size: 12px;" align="left"> <for ...

  9. Python数学运算

    python中的加减乘除比其他的语言简单,不需要对其赋值变量 (1)加减乘除 ) #加法 ) #减法 ) #乘法 ) #除法 5.0 ) #乘方 (2)判断 判断返回的是True或者False ) # ...

  10. ORA-08189

    OS: [root@yoon ~]# more /etc/oracle-releaseOracle Linux Server release 5.7 DB: Oracle Database 11g E ...