自执行匿名函数剖析整理
????? （function(){
????????? //代碼
??????? })();
解釋：這是相當優雅的代碼（如果你首次看見可能會一頭霧水：）），包圍函數（function(){})的第一對括號向腳本返回未命名的函數，隨后一對空括號立即執行返回的未命名函數，括號內為 匿名函數 的參數。
來個帶參數的例子：
??????? (function(arg){
?????????? alert(arg+100);
??????? })(20);
??????? 這個例子返回120。
重要用途：可以用它創建命名空間，只要把自己所有的代碼都寫在這個特殊的函數包裝內，那么外部就不能訪問，除非你允許。
?????? (function(){
?????????? function $(id){
??????????????? return document.getElementById(id);
?????????? }
?????????? function __addClass(id,className,classValue){
??????????????? $(id).style.className=classValue;
?????????? }
?????????? window['mySpace']={};
?????????? window['mySpace']['addClass']=__addClass;
??????? })();
上面的例子就可以用這種偽命名空間封裝并保護自己的所有函數、對象和變量。而且，由于它們位于同一個函數中，所以可以互相引用。為了對受保護的代碼進行全局化，隨后的一對括號告訴瀏覽器立即執行返回的匿名函數，而且在執行期間將__addClass()賦值給了window的一個方法,這樣在外部只能執行addClass而__addClass被保護起來了。我可以這樣調用它：
mySpace.addClass('oneId','font-width','bold');
實例：test.html
------------------------------
<html>
<head><title>自執行匿名函數</title>
<script type="text/javascript">
(
function(){
?? ?function $(id){
??????? return document.getElementById(id);
??? }
??? function __addClass(id,className,classValue){
?? ??? ?switch(className){
?? ??? ??? ?case 'background':{
?? ??? ??? ??? ?$(id).style.background=classValue;
?? ??? ??? ??? ?break;
?? ??? ??? ?}
?? ??? ??? ?case 'color':{
?? ??? ??? ??? ?$(id).style.color=classValue;
?? ??? ??? ??? ?break;
?? ??? ??? ?}
?? ??? ??? ?case 'fontSize':{
?? ??? ??? ??? ?$(id).style.fontSize=classValue+'px';
?? ??? ??? ??? ?break;
?? ??? ??? ?}
?? ??? ??? ?case 'fontWeight':{
?? ??? ??? ??? ?$(id).style.fontWeight =classValue;
?? ??? ??? ??? ?break;
?? ??? ??? ?}
?? ??? ?}
?????? ?
??? }
??? window['mySpace']={};
??? window['mySpace']['addClass']=__addClass;
}
)();
</script>
</head>
<body>
<div id="div1">
這是測試區塊
</div>
<script type="text/javascript">
mySpace.addClass('div1','background','green');
mySpace.addClass('div1','color','yellow');
mySpace.addClass('div1','fontSize','24');
mySpace.addClass('div1','fontWeight','bold');
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
test2.html、nmFn.js位于同一文件夾
nmFn.js
------------------------(
function(){
? ? //匿名函數內部私有函數，獲取某對象
? ? function $(id){
? ? ? ? return document.getElementById(id);
? ? }
? ? //匿名函數內部私有函數，用于改變某對象屬性
? ? function __addClass(id,className,classValue){
? ? ? ? switch(className){
? ? ? ? ? ? case 'background':{
? ? ? ? ? ? ? ? $(id).style.background=classValue;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? ? ? case 'color':{
? ? ? ? ? ? ? ? $(id).style.color=classValue;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? ? ? case 'fontSize':{
? ? ? ? ? ? ? ? $(id).style.fontSize=classValue+'px';
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? ? ? case 'fontWeight':{
? ? ? ? ? ? ? ? $(id).style.fontWeight =classValue;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ??
? ? }
? ? //往window對象中添加mySpace屬性
? ? window['mySpace']={};
? ? window['mySpace']['addClass']=__addClass;
? ? //1.建立自己的對象
? ? var personObj = {
? ? ? ? ? ? ? ? ? name:"sam",
? ? ? ? ? ? ? ? ? age:18,
? ? ? ? ? ? ? ? ? setAge:function(){var ar=arguments;this.age=ar[0]},
? ? ? ? ? ? ? ? ? getAge:function(){alert("My age is "+this.age);},
? ? ? ? ? ? ? ? ? getName:function(id){
? ? ? ? ? ? ? ? ? ? ? if($(id).value!="" && $(id).value!=" ") this.name=$(id).value;
? ? ? ? ? ? ? ? ? ? ? alert("My name is "+this.name+" "+this.age+" old!!");
? ? ? ? ? ? ? ? ? }
? ? };
? ? //把自己的對象掛靠到window中
? ? window["person"]=personObj;
}
)();
------------------------
test2.html
------------------------
<html>
<head><title>自執行匿名函數</title>
<script type="text/javascript" src="nmFn.js "></script>
</head>
<body>
<div id="div1">
這是測試區塊
</div>
sign your name:<input type="text" id="personName">
<input type="button" value="tell age" οnclick="person.getName('personName');" />
<script type="text/javascript">
mySpace.addClass('div1','background','green');
mySpace.addClass('div1','color','yellow');
mySpace.addClass('div1','fontSize','24');
mySpace.addClass('div1','fontWeight','bold');
</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的自执行匿名函数剖析整理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTTP 错误 404 - 文件或目录未
- 下一篇： bootstrap按钮的边框问题 去除