自執行匿名函數剖析整理

格式:
????? (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://www.pswp.cn/news/247743.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247743.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247743.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

爬蟲界又出神器|一款比selenium更高效的利器

提起selenium想必大家都不陌生&#xff0c;作為一款知名的Web自動化測試框架&#xff0c;selenium支持多款主流瀏覽器&#xff0c;提供了功能豐富的API接口&#xff0c;經常被我們用作爬蟲工具來使用。但是selenium的缺點也很明顯&#xff0c;比如速度太慢、對版本配置要求嚴苛…

java數組 —(7)

* 1.數組的理解&#xff1a;數組(Array)&#xff0c;是多個相同類型數據一定順序排列的集合&#xff0c;并使用一個名字命名&#xff0c; 并通過編號的方式對這些數據進行統一管理。 * 2.數組相關的概念&#xff1a; 數組名 元素 角標、下標、索引 數組的長度&#xff1a;元素…

bootstrap按鈕的邊框問題 去除

問題&#xff1a; 用bootstrap做的按鈕&#xff0c;點擊后&#xff0c;都會出現邊框&#xff0c;請問如何去除&#xff1f; .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {outline: none; }還要去除陰影添…

C#一些面試知識題

1.簡述 private、 protected、 public、internal 修飾符的訪問權限答&#xff1a;private&#xff1a;私有成員, 在類的內部才可以訪問(只能從其聲明上下文中進行訪問)。 protected&#xff1a;保護成員&#xff0c;該類內部和從該類派生的類中可以訪問。 Friend&#xff1a;友…

vue加載時閃現模板語法-處理方法

問題&#xff1a;使用VUE時&#xff0c;頁面加載瞬間&#xff0c;會閃現模板語法&#xff0c;例如{{ item.name }}等 解決辦法&#xff1a; 1、可以通過VUE內置的指令v-cloak解決這個問題&#xff08;推薦&#xff09; 具體實現&#xff1a; <ul v-cloak v-for"ite…

java數組 —(8)

1.數組的創建與元素賦值&#xff1a; 楊輝三角&#xff08;二維數組&#xff09;、回形數&#xff08;二維數組&#xff09;、6個數&#xff0c;1-30之間隨機生成且不重復。 2.針對于數值型的數組&#xff1a; 最大值、最小值、總和、平均數等 3.數組的賦值與復制 int[] a…

idea啟動tomcat時報錯:Error during artifact deployment. See server log for details.

Error during artifact deployment. See server log for details. 這個很多人都找不出來&#xff0c;原因無非2個&#xff1a; 一、jar 包有有些沒能識別&#xff0c;tomcat沒有配置好&#xff01; 二、這個一般代碼錯了&#xff1a; 除了看 server 的報錯&#xff0c;別忘了看…

java運算符 —(9)

1.理解&#xff1a; ① 定義在java.util包下。 ② Arrays:提供了很多操作數組的方法。 2.使用&#xff1a; //1.boolean equals(int[] a,int[] b):判斷兩個數組是否相等。int[] arr1 new int[]{1,2,3,4};int[] arr2 new int[]{1,3,2,4};boolean isEquals Arrays.equals(a…

css 三角角標樣式

.sanjiao {width: 0px;height: 0px;overflow: hidden;border-width: 100px;border-color: red transparent transparent transparent; border-style: solid dashed dashed dashed; }

leetcode 279 四平方定理

可以用四平方和定理&#xff1a;任意一個正整數都可以表示為4個以內整數的平方和。 如果一個數含有因子4&#xff0c;那么我們可以把4都去掉&#xff0c;并不影響結果。比如&#xff1a;8去掉4&#xff0c;12去掉3&#xff0c;返回的結果都相同。 如果一個數除以8余7&#xff0…

java類與對象 —(10)

1.面向對象學習的三條主線&#xff1a; 1.Java類及類的成員&#xff1a;屬性、方法、構造器&#xff1b;代碼塊、內部類2.面向對象的大特征&#xff1a;封裝性、繼承性、多態性、(抽象性)3.其它關鍵字&#xff1a;this、super、static、final、abstract、interface、package、…

RESTful API 編寫規范

基于一些不錯的RESTful開發組件&#xff0c;可以快速的開發出不錯的RESTful API&#xff0c;但如果不了解開發規范的、健壯的RESTful API的基本面&#xff0c;即便優秀的RESTful開發組件擺在面前&#xff0c;也無法很好的理解和使用。下文Gevin結合自己的實踐經驗&#xff0c;整…

Python2與Python3的區別

Python2與Python3的區別 1) 核心類差異 Python3 對 Unicode 字符的原生支持。 Python2 中使用 ASCII 碼作為默認編碼方式導致 string 有兩種類型 str 和 unicode&#xff0c;Python3 只 支持 unicode 的 string。Python2 和 Python3 字節和字符對應關系為&#xff1a; python2p…

JavaScript-內存空間

深入了解js這門語言后&#xff0c;才發現它有著諸多眾所周知的難點&#xff08;例如&#xff1a;閉包、原型鏈、內存空間等&#xff09;。有的是因為js的設計缺陷導致的&#xff0c;而有的則是js的優點。不管如何&#xff0c;總需要去學會它們&#xff0c;在學習過程中我覺得只…

java類的結構1: 屬性 —(11)

類的設計中&#xff0c;兩個重要結構之一&#xff1a;屬性 對比&#xff1a;屬性 vs 局部變量 1.相同點&#xff1a; 1.1 定義變量的格式&#xff1a;數據類型 變量名 變量值1.2 先聲明&#xff0c;后使用1.3 變量都其對應的作用域 2.不同點&#xff1a; 2.1 在類中聲明的…

GXU - 7D - 區間求和 - 前綴和

https://oj.gxu.edu.cn/contest/7/problem/D 描述 有一個所有元素皆為0的數組A&#xff0c;有兩種操作&#xff1a; 1 l r x表示將A區間[l,r]內所有數加上x&#xff1b; 2 l r表示將A區間[l,r]內從左往右數第i個數加上i&#xff1b; 給出m個操作&#xff0c;請輸出操作結束后A中…

javascript-排序算法

插入排序 算法描述&#xff1a; 1. 從第一個元素開始&#xff0c;該元素可以認為已經被排序 2. 取出下一個元素&#xff0c;在已經排序的元素序列中從后向前掃描 3. 如果該元素&#xff08;已排序&#xff09;大于新元素&#xff0c;將該元素移到下一位置 4. 重復步驟 3&am…

DPDK并行計算

參考文獻&#xff1a; 《深入淺出DPDK》 https://www.cnblogs.com/LubinLew/p/cpu_affinity.html ...................................................................... 前言&#xff1a; 處理器提高性能主要是通過兩個途徑&#xff0c;一個是提高IPC&#xff08;CPU每一時…

Highcharts圖表-ajax-獲取json數據生成圖表

重點說明此代碼是針對一個報表顯示多個項對比顯示。 直接貼代碼&#xff1a;web端 <script type"text/JavaScript" src"js/jQuery/jquery-1.7.2.js"></script> <script type"text/javascript" src"j…

關于RGBDSLAMV2學習、安裝、調試過程

Step&#xff11;&#xff1a;https://github.com/felixendres/rgbdslam_v2/wiki/Instructions-for-Compiling-Rgbdslam-(V2)-on-a-Fresh-Ubuntu-16.04-Install-(Ros-Kinetic)-in-Virtualbox 照著這個instructions安裝好 rgbdslamv2&#xff0c;并且在安裝的過程中&#xff0c;…