js 的模組化的幾種用法和方式
阿新 • • 發佈:2019-01-04
<script type="text/javascript">
// 在JavaScript裡最令人懊惱的事情是變數沒有使用範圍。任何變數,函式,陣列,物件,只要不在函式內部,都被認為是全域性的,這就是說,這個頁面上的其它指令碼也可以訪問它,而且可以覆蓋重寫它。
// 解決辦法是,把你的變數放在一個匿名函式內部,定義完之後立即呼叫它。例如,下面的寫法將會產生三個全域性變數和兩個全域性函式:
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
}
function getMemberDetails(){
}
//如果這個頁面上的其它腳本里也存在一個叫 status 的變數,麻煩就會出現。如果我們把它們封裝在一個 myApplication 裡,這個問題就迎刃而解了:
var myApplication=function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function getage(){
return age;
}
function getname(){
return name;
}
}();
//但是,這樣一來,在函式外面就沒有什麼功能了。如果這是你需要的,那就可以了。你還可以省去函式的名稱
(function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function getage(){
return age;
}
function getname(){
return name;
}
})();
//如果你想在函式外面也能使用裡面的東西,那就要做些修改。為了能訪問 getage() 或 getage(),你需要把它們變成 myApplication的屬性,從而把它們暴露於外部的世界:*******
// 三種方式種方式
var myf=function(){
var name = 'Chris';
var age = '34';
var status = 'single';
return {getage: function (){
return age;
},
getname:function (){
return name;
}
};
}();
// alert( myf.getage()+"*"+ myf.getname());
var myft= function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function getage(){
return age;
}
function getname(){
return name;
}
return {geta:getage,getn:getname};
}();
// alert( myft.geta()+"*"+ myft.getn());
//物件的方式
var myfd={
name:'Chris',
age:'34',
status:'single',
getage:function(){ return age;},
getname:function(){ return name;}
};
// alert( myfd.getage()+"**"+ myfd.getname());
//帶預設引數的
var $=(function(a,b){
return {
geta:function(s){return a+s;},
getb:function(){return b;}
}
})(1,2);
alert($.geta(8));
//不帶預設引數的帶預設引數的
var $=(function(a,b){
var n=3;
return {
geta:function(s){return a+s;},
getb:function(){return b+n;}
}
});
alert($(2,3).geta(8));
alert($(2,3).getb(8));
</script>
// 在JavaScript裡最令人懊惱的事情是變數沒有使用範圍。任何變數,函式,陣列,物件,只要不在函式內部,都被認為是全域性的,這就是說,這個頁面上的其它指令碼也可以訪問它,而且可以覆蓋重寫它。
// 解決辦法是,把你的變數放在一個匿名函式內部,定義完之後立即呼叫它。例如,下面的寫法將會產生三個全域性變數和兩個全域性函式:
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
}
function getMemberDetails(){
}
//如果這個頁面上的其它腳本里也存在一個叫 status 的變數,麻煩就會出現。如果我們把它們封裝在一個 myApplication 裡,這個問題就迎刃而解了:
var myApplication=function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function getage(){
return age;
}
function getname(){
return name;
}
}();
//但是,這樣一來,在函式外面就沒有什麼功能了。如果這是你需要的,那就可以了。你還可以省去函式的名稱
(function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function getage(){
return age;
}
function getname(){
return name;
}
})();
//如果你想在函式外面也能使用裡面的東西,那就要做些修改。為了能訪問 getage() 或 getage(),你需要把它們變成 myApplication的屬性,從而把它們暴露於外部的世界:*******
// 三種方式種方式
var myf=function(){
var name = 'Chris';
var age = '34';
var status = 'single';
return {getage: function (){
return age;
},
getname:function (){
return name;
}
};
}();
// alert( myf.getage()+"*"+ myf.getname());
var myft= function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function getage(){
return age;
}
function getname(){
return name;
}
return {geta:getage,getn:getname};
}();
// alert( myft.geta()+"*"+ myft.getn());
//物件的方式
var myfd={
name:'Chris',
age:'34',
status:'single',
getage:function(){ return age;},
getname:function(){ return name;}
};
// alert( myfd.getage()+"**"+ myfd.getname());
//帶預設引數的
var $=(function(a,b){
return {
geta:function(s){return a+s;},
getb:function(){return b;}
}
})(1,2);
alert($.geta(8));
//不帶預設引數的帶預設引數的
var $=(function(a,b){
var n=3;
return {
geta:function(s){return a+s;},
getb:function(){return b+n;}
}
});
alert($(2,3).geta(8));
alert($(2,3).getb(8));
</script>