javascript篇：建立對象模式

標籤：

/*
對象建立模式
除了普通的對象字面量和使用建構函式來建立對象外，還有很多更好的對象建立模式
1、命名空間 2、依賴聲明 3、模組模式 4、沙箱模式
它們都協助我們組織應用程式的代碼結構，降低隱含地全域變數帶來的後果
*/

/*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 = {}

/*
優點在於避免了命名衝突，
缺點在於代碼量增加、任何部分的代碼都可以修改該全域執行個體、解析查詢時間變長
*/

/*
為了保證我們聲明的全域變數不會和其他檔案的變數衝突，可以進行判斷是否已經存在
*/
if(typeof NEWAPP === "undefined") {
...
}
or

var NEWAPP = NEWAPP || {};

/*
附加的檢查會增加代碼的重複和量，將其封裝為一個函數來調用
*/
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);

/*
聲明依賴關係
*/
var myFunction = function() {
// 依賴
var event = NEWAPP.util.Event,
dom = NEWAPP.util.dom
;
// 使用時間和Dom變數
}
// 顯示地聲明了使用到的指令檔，
// 局部變數的解析速度快過全域變數的解析且只解析一次全域變數，
// 局部變數可壓縮

/*
私人成員和方法
*/
// 對於字面量建立的對象和建構函式使用“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將函數暴露出來
*/

 

javascript篇：建立對象模式