JavaScriptモード読書ノート第5章対象作成モード
194322 ワード
1,名前空間モード namespace
jsライブラリは通常モジュール化され、名前空間によって組織される.
JSは特別な文法で私有を表していません.JSのすべての対象のメンバーは共通です.
prototypeによりオブジェクトに属性と方法を動的に追加することができます.
大域変数によって匿名関数のプライベート方法を公開することができる.
モジュールモードは名前空間を通じて関数変数の定義と使用を完了します.
沙箱モードの名前空間パターンを解決するのは以下のような特徴があります.
-1つのグローバル変数に対する依存性は、アプリケーションのグローバル変数依存性に変わります.名前空間モードでは、同じアプリケーションまたはライブラリの2つのバージョンを同じページに使用することはできません.両方とも同じグローバル記号名が必要です.
-2,このような点で区切られた名前には、より長い文字を入力する必要があります.同時に解析するには時間がかかります.myap.a.b.c.d
サンドボックスモードは、モジュールの動作に使用できる環境を提供し、他のモジュールやサンドボックスに影響を与えません.
10、グローバルコンストラクタ
基本的な使用は下図の通りです.
-1,オブジェクトを作成するときはnew操作符は使用されません.
-2,Sandbox()パパラッチ関数は、オブジェクト事例に必要なモジュール名を変更する追加の設定パラメータを受け入れることができます.
-1つのタイプのチェックステートメントがありますが、Sandboxの一例であるかどうかチェックします.
-2,このコンストラクタにはいくつかの属性がthisに追加されます.
-3,必要なモジュールは、洞窟の名前配列の形で転送できます.
13、公有静的メンバー
-1,メンバーを同じ構造関数で作成したすべてのオブジェクトで共有します.
-2,構造関数の外部はメンバーにアクセスできません.
例えば:
<script>
var myApp = {};//
maApp.Parent = function (){
};
myApp.Child = function(){
};
</script>
<script>
//
var myApp = {};
//
if(typeof myApp === "undefined"){
var myApp = {};
}
//
var myApp = myApp || {};
</script>
<script>
myApp.namespace("myApp.modules.module2");
//
var myApp = {
modules : {
module2:{}
}
};
</script>
<script>
var myApp = myApp || {};
myApp.namespace = function(ns_string){
var parts = ns_string.split('.'), parent = myApp, i;
if(parent[0] === "myApp"){
parts = parts.slice(1);
}
for(i = 0; i < parts.length; i++){
if(typeof parent[parts[i]] === "undefined"){
parent = parent[parts[i]];
}
}
return parent;
};
var modules2 = myApp.namespace("myApp.modules.module2");
console.log(modules2 === myApp.modules.module2);
myApp.namespace("modules.module2");
</script>
jsライブラリは通常モジュール化され、名前空間によって組織される.
var myFunction = function(){ var event = YAHOO.util.event, dom = YAHOO.util.Dom; }
JSは特別な文法で私有を表していません.JSのすべての対象のメンバーは共通です.
var myObj = {
myProp : 1,
getPro: function(){
return this.myProp;
}
};
console.log(myObj.myProp);
console.log(myObj.getPro());
<script>
function Gadget(){
//
var name = "iPoid";
//
this.getName = function(){
return name;
};
}
var toy = new Gadget();
console.log(toy.name);//undefined
console.log(toy.getName);//iPoid
</script>
<script>
function Gadget(){
//
var specs = {
screen_width: 320,
screen_hight: 650,
color: 'RED'
};
//
this.getSpecs = function(){
return specs;
};
}
var toy = new Gadget(),
specs = toy.getSpecs();
specs.color = "GUESS";
console.log(specs.screen_width);//320
console.log(specs.color);//GUESS
console.dir(toy.getSpecs());
</script>
<script>
var myObj = (function(){
var name = "name";
return {
getName: function(){
return name;
}
};
}());
console.log(myObj.getName());//name
</script>
prototypeによりオブジェクトに属性と方法を動的に追加することができます.
<script>
function Gadget(){
var name = "Ipod";
this.getName = function(){
return name;
};
}
Gadget.prototype = (function(){
var browser = "others";
return{
getBrowser: function(){
return browser;
}
};
}());
var toy = new Gadget();
console.log(toy.getName());//name
console.log(toy.getBrowser());//others
</script>
大域変数によって匿名関数のプライベート方法を公開することができる.
<script>
var myArray;
(function(){
var astr = "[object Array]",
toString = Object.prototype.toString;
function isArray(s){
return toString.call(s) === astr;
}
function indexOf(haystack, needle){
var i = 0,
max = haystack.length;
for(; i < max; i+= 1){
if(haystack[i] === needle){
return i;
}
}
return -1;
}
myArray = {isArray: isArray,
indexOf: indexOf,
inArray: indexOf};
console.log(myArray.isArray([1, 2]));//true
console.log(myArray.isArray({0 : 1}));//false
console.log(myArray.indexOf(["a", "b"], "a"));//0
console.log(myArray.indexOf(["a", "b"], "d"));//-1
}());
console.log(myArray.indexOf(["a", "b"], "a"));//0
console.log(myArray.indexOf(["a", "b"], "d"));//-1
</script>
モジュールモードは名前空間を通じて関数変数の定義と使用を完了します.
<script>
myApp.namespace("myApp.util.array");
myApp.util.array = (function(){
var uobj = myApp.util.object,
ulang = myApp.util.lang,
array_string = "[object Array]",
ops = Object.prototype.toString;
return {
inArray: function(needle, haystack){
for(var i = 0, max = haystack.length; i < max; i+= 1){
if(haystack[i] === needle){
return true;
}
}
},
isArray: function(s){
return ops.call(a) === array_string;
}
};
}());
</script>
<script>
myApp.namespace("myApp.util.array");
myApp.util.array = (function(){
var uobj = myApp.util.object,
ulang = myApp.util.lang,
array_string = "[object Array]",
ops = Object.prototype.toString;
inArray: function(needle, haystack){
for(var i = 0, max = haystack.length; i < max; i+= 1){
if(haystack[i] === needle){
return true;
}
}
},
isArray: function(s){
return ops.call(a) === array_string;
};
return {
isArray: isArray,
indexOf: inArray
};
}());
</script>
<script>
myApp.namespace("myApp.util.array");
myApp.util.array = (function(){
var uobj = myApp.util.object,
ulang = myApp.util.lang;
Constr;
Constr = function(o){
this.elements = this.toArray(o);
};
// API
Constr.prototype = {
constructor: myApp.util.array,
version: "2.0",
toArray: function(obj){
for(var i = 0, a= [], len = obj.length; i < len; i+= 1){
a[i] = obj[i];
}
return a;
}
};
//
return Constr;
});
var arr = new myApp.util.array([obj]);
</script>
<script>
MYAPP.util.module = (function(app, global){
//
}(MYAPP, this));
</script>
沙箱モードの名前空間パターンを解決するのは以下のような特徴があります.
-1つのグローバル変数に対する依存性は、アプリケーションのグローバル変数依存性に変わります.名前空間モードでは、同じアプリケーションまたはライブラリの2つのバージョンを同じページに使用することはできません.両方とも同じグローバル記号名が必要です.
-2,このような点で区切られた名前には、より長い文字を入力する必要があります.同時に解析するには時間がかかります.myap.a.b.c.d
サンドボックスモードは、モジュールの動作に使用できる環境を提供し、他のモジュールやサンドボックスに影響を与えません.
10、グローバルコンストラクタ
基本的な使用は下図の通りです.
<script>
new Sandbox(function(box){
//write your code
});
</script>
-1,オブジェクトを作成するときはnew操作符は使用されません.
-2,Sandbox()パパラッチ関数は、オブジェクト事例に必要なモジュール名を変更する追加の設定パラメータを受け入れることができます.
<script>
Sandbox(['ajax', 'event'], function(box){
//your code
});
</script>
<script>
Sandbox('ajax', 'event', function(box){
//your code
});
</script>
<script>
Sandbox('dom', 'event', function(box){
//your code
Sandbox('ajax', function(box){
//your cide
})
// ajax
});
</script>
<script>
Sandbox.modules = ();
Sandbox.modules.dom = function(box){
box.getElement = function(){};
box.getStyle = function(){};
box.foo = "bar";
};
Sandbox.modules.event = function(box){
// ， Sandbox
//box.constructor.prototype.m = "mmmmm";
box.attachEvent = function(){};
box.dettachEvent = function(){};
};
Sandbox.modules.ajax = function(box){
box.makeRequest = function(){};
boix.getResponse = function(){};
}
</script>
<script>
function Sandbox(){
//
var args = Array.prototype.slice.call(arguments),
//
callback = args.pop(),
// ，
modules = (args[0] && typeof args[0] === "string") ? args : args[0],
i;
//
if(! (this instanceof Sandbox)){
return new Sandbox(modules, callback);
}
// this
this.a = 1;
this.b = 2;
// this
// “*”
if(!modules || modules === "*"){
for(i in Sandbox.modules){
if(Sandbox.modules.hasOwnProperty(i)){
moduls.push(i);
}
}
}
//
for(i = 0; i < modules.length; i+= 1){
Sandbox.modules[[moduls[i]]](this);
}
callback(this);
}
Sandbox.prototype = {
name: "My Application",
version: "1.00",
getName: function(){
return this.name;
}
};
</script>
-1つのタイプのチェックステートメントがありますが、Sandboxの一例であるかどうかチェックします.
-2,このコンストラクタにはいくつかの属性がthisに追加されます.
-3,必要なモジュールは、洞窟の名前配列の形で転送できます.
13、公有静的メンバー
<script>
//
var Gadget = function(){};
//
Gadget.isShiny = function(){
return "Static Method!";
};
//
Gadget.prototype.setPrice = function(price){
this.price = price;
};
console.log(Gadget.isShiny());//Static Method!
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());//Static Method!
</script>
-1,メンバーを同じ構造関数で作成したすべてのオブジェクトで共有します.
-2,構造関数の外部はメンバーにアクセスできません.
<script>
var Gadget = (function(){
var counter = 0;
return function(){
console.log(counter += 1);
}
}());//
var g1 = new Gadget();//1
var g2 = new Gadget();//2
</script>
例えば:
myObj.method1("11").method2("w").method3();
var Person = function(name){
this.name = name;
}.method("getName", function(){
return this.name;
});