javascript篇:建立對象模式

/*
對象建立模式
除了普通的對象字面量和使用構造函數來建立對象外,還有不少更好的對象建立模式
一、命名空間 二、依賴聲明 三、模塊模式 四、沙箱模式
它們都幫助咱們組織應用程序的代碼結構,下降隱含地全局變量帶來的後果
*/設計模式

/*Before*/
// 反模塊設計
Parent = function() {}
Child = function() {}
module1 = {}
module1.data = [1,2,3,4]
module2 = {}數組


/*
命名空間
*/
var NEWAPP = {}閉包

NEWAPP.Parent = function() {}
NEWAPP.Child = function() {}
NEWAPP.modules = {}
NEWAPP.modules.module1 = {}
NEWAPP.modules.module1.data = [1,2,3,4]
NEWAPP.modules.module2 = {}框架

/*
優勢在於避免了命名衝突,
缺點在於代碼量增長、任何部分的代碼均可以修改該全局實例、解析查詢時間變長
*/dom

/*
爲了保證咱們聲明的全局變量不會和其餘文件的變量衝突,能夠進行判斷是否已經存在
*/
if(typeof NEWAPP === "undefined") {
...
}
or 函數

var NEWAPP = NEWAPP || {};this

/*
附加的檢查會增長代碼的重複和量,將其封裝爲一個函數來調用
*/
var NEWAPP = NEWAPP || {};
NEWAPP.namespace = function(ns_string) {
var parts = ns_string.split('.'),
parent = NEWAPP,
i
;
if (parts[0] === "NEWAPP") {
parts = parts.slice(1);
}
for (i = 0, len = parts.length; i < len; i++) {
if (typeof parent[parts[i]] === "undefined") {
parent[parts[i]] = {}
}
parent = parent[parts[i]];
}
return parent;
};
// 將返回值賦給一個局部變量
var module1 = NEWAPP.namespace('NEWAPP.modules.module1');
// return true
console.log(module1 === NEWAPP.modules.module1); spa


/*
聲明依賴關係
*/
var myFunction = function() {
// 依賴
var event = NEWAPP.util.Event,
dom = NEWAPP.util.dom
;
// 使用時間和Dom變量
}
// 顯示地聲明瞭使用到的腳本文件,
// 局部變量的解析速度快過全局變量的解析且只解析一次全局變量,
// 局部變量可壓縮prototype

/*
私有成員和方法
*/
// 對於字面量建立的對象和構造函數使用「this」關鍵字建立的變量和方法,在外部是能夠進行訪問和修改的
// 想將方法和屬性變成私有,只須要讓它成爲函數的局部變量
function inner() {
var name = "cjs";
this.getName = function() {
return name;
};
}
var out = new inner();
// 沒法獲取name
console.log(out.name);
// 經過函數getname獲取
// 這個方法就是特權方法
console.log(out.getName);
// 切記不要返回對象或者數組的引用,設計

/*
經過對象字面量以及私有性
*/
// 使用一個即時運行的匿名函數建立閉包來實現私有性
var obj = {}
(function() {
// 私有成員
var name = "cjs";
// 共有成員,沒有var!
obj = {
getName : function() {
return name;
}
};
}());
// return name
obj.getName();

// 也能夠直接:
var obj = (function() {
var name = "cjs";
return {
getName :function() {
return name;
}
};
}());
obj.getName();

// 這是模塊模式的基礎框架


/*
原型和私有性
*/
// 對於共有的屬性和方法,將其添加到原型對象做爲其方法和屬性,減小複製工做和節省內存

function obj() {
// 私有成員
var name = "cjs"
// 特權共有方法
this.getname = function() {
return name;
}
}

obj.prototype = (function(){
// 私有成員
var age = 18;
// 公有原型方法
return {
getAge : function() {
return age;
}
}
}());

var obj1 = new obj();
obj1.getname();
obj1.getAge();

/*
揭示revalation 模式model
*/
// 將對象的私有方法經過賦值給外部對象做爲其屬性將其暴露成公有方法
// 若是暴露的公有方法被篡改,不會影響到其餘暴露的公有方法
var obj;
(function(){
var name = "cjs";
var age = 18;
var clothes = {
pants : "black",
shirt : "white",
shoes : "yellow"
}
function getName() {
this.what ="hahahahahha";
return name;
}
function getAge() {
return age;
}
obj = {
getName : getName,
getAge : getAge,
getLocal : getName,
clothes : clothes,
color : clothes,
name : name,
localname : name
};

}());

/*
暴露出來的方法因爲只是一個引用,即便被用戶修改到,也不會影響到其餘使用到內部私有函數的其餘公有函數
機智的設計模式,但也只適用於函數,對於對象則不適用,須要進行淺複製將其暴露出來
*/

/*
終極模式--------------------------------------------------------模塊模式
前面多種模式的組合,命名空間、即時函數、私有和特權成員、聲明依賴
*/
// 命名空間
NEWAPP.namespace("NEWAPP.modules.module1")
NEWAPP.modules.module1 = (function() {
// 依賴聲明
var dom = NEWAPP.util.Dom,
_event = NEWAPP.util.Event,

name = "cjs",
age = 18
;

return {
// 公有特權函數
getName : function() {
return name;
},
getAge : function() {
return age;
}
};
}());// 即時函數

/* 揭示模塊模式 方法和模塊模式是相似的,只不過將方法定義爲私有方法,在經過return將函數暴露出來*/

相關文章
相關標籤/搜索