頻道欄目
首頁 > 資訊 > JS 庫 > 正文

前端技術小講

16-04-12        來源:[db:作者]  
收藏   我要投稿


說到前端,html,css與javascript是無法跳過的三個技術點,其中js對于現在emap開發尤為重要,因為大部分的業務邏輯都是寫在js文件里面,通過瀏覽器執行的,而其中js的庫jquery更加重要,因為現在不僅僅是emap,公司其他的前端都是基于jquery的。學會了jquery,就可以運用emap進行基礎的開發了。本文將從js入手,講述自己入公司半年來學到的一些淺薄的技術。
對于js來說,它的致命弱點就是其弱語言類型,但是這也是其強大的原因。首先我們先看一段代碼:

上圖的代碼是對于js中isNaN方法的復寫(isNaN是用來判斷所傳參數是否是非數字,如果是非數字則返回true,如果是數字則返回false)。第二行代碼的加號(+),這個加號在這里表示的含義是正號的意思,如果result可以轉化為數字,例如字符串“123”(此時js會自動將其轉化為數字類型Number),或者它本身就是數字,那么正號對于其來說沒有任何作用,而如同它是一個無法轉換成數字的字符串例如“adc”,那么正號操作符根本無法對一個字符串進行操作,此時result將被賦值為NaN,這是一個js里面特殊的對象 ,它表示非數字類型,它本身和本身就不相等,即NaN!=NaN,之后第三行對result本身進行判斷,此時的!==運算符號是表示js將會按照其本身的數據類型進行判斷,即數字只能等于數字,字符串只能等于字符串。如果其傳入的result可以變轉換為數字,那么這個時候result與其本身應該是相等的,返回false,如果result成為NaN,那么本身不等于本身,那么返回true。從這個小代碼里面,我發現雖然js是弱語言類型,但是如果嚴格的去用typeof判斷數據模式,js有機會成為一個假的強語言類型。
Js的數據類型分為:undenfine,null,Boolean,Number,String,Object。這些,由于是弱語言,所以這些類型之間可以相互轉化,例如在if判斷的語句里面,假如你傳一個值為null的參數,那么js將會將其轉化為false進行if中的判斷。其中操作符’==’是將兩者進行類型上的自動轉化后在進行判斷,即’1243’ == 1243這個語句是正確的,因為轉化為String類型后他們是相等的,這個操作符不會對數據的類型進行判斷,而你想要對數據類型進行判斷,那么你需要使用操作符’===’,這個操作符將會對數據的類型進行嚴格的判斷。其中所有的數據類型都可以成為object類型。
Js是事件驅動(Event Driver)的編程語言。Dom元素上的事件綁定是用來驅動業務邏輯的主要手段。Js中的事件流分為兩種:1.事件冒泡,2.事件捕獲。事件冒泡個人的簡單理解就是從確定到不確定,從小的元素到最后的document,事件捕獲則恰巧相反,它是從不確定到確定,從大到小。
這里寫圖片描述
而這兩個方式都被運用在了dom2的事件流中,首先事件將會從捕獲開始,即綁定事件的元素在事件捕獲中將不會被觸發事件,這給我們在此過程里面改變事件阻止事件的發生提供了缺口,之后才是事件冒泡,此時事件已經被觸發,事件將會驅動頁面中業務邏輯的運轉。
事件在實際的業務開發里面十分的重要,它不僅僅是業務邏輯的推動者也是與對象交互的入口。每個事件都會有一個event對象,對象里面包含了各種你所想得到的信息,一般來說我們實際里面需要的是綁定事件的這個dom元素本身,此時通過e.target就可以得到觸發事件的元素本身了。在實際開發里面,我們將會用兩種事件綁定的形式,一是事件的綁定,它會直接綁定到具體的元素,只有這個元素的事件被觸發的時候,事件才會進行,具體的代碼如下(jquery):
這里寫圖片描述
這段代碼為一個id為id的dom元素綁定了一個click事件,當dom元素被點擊的事件,將會觸發里面的方法彈出一個內容為“hello”的彈出框。這種事件直接綁定到具體的元素,當元素在頁面上是唯一不變,或者一直存在的時候是可以用的,但是如果一個元素的動態生成的,同時又有多個,那么事件的綁定就不可以,第一它可能無法定位元素,第二它需要一個個綁定,代碼量巨大。我們此時需要的是事件的代理:
這里寫圖片描述
上面的代碼表示為一個id為id的父元素綁定了一個監聽器,監聽器將監聽發生在其上的所有click事件,但是只有當其中有class包含class的子元素被點擊的時候,監聽器才會觸發方法,進行事件的執行。這樣的好處就是內部的元素只要其存在的時候有class的樣式就會在點擊的時候觸發事件,這樣就可以動態的生成dom元素而無需一遍遍的為才生成的節點綁定事件了。
上面已經提到了事件,那么就不能不將事件的主體:函數。函數可以看作一個包含你想執行的語句的集合,它的作用在于完成事件,得到期望的結果。在js里面函數的定義有兩種方式:函數聲明與函數表達式。
這里寫圖片描述
前三行代碼是函數聲明,它重要特性就是函數聲明將會被提升到執行環境頂部首先被解釋編譯,也就是說當解釋器解釋js代碼的時候,聲明的函數將會被首先編譯,即使你在函數聲明之前就使用了函數也會正常執行,因為它在解釋一開始就被編譯了。
后三行則是函數表達式,它無法被提升到頂部,所以只能順序解釋執行,在之前其之前將無法使用。
這里寫圖片描述
上圖中函數fn1將會被提升到整個全局的頂部,而函數a則會被提升到方法fn3內部的頂部,所以說函數的提升也和它所處的作用域有關系。此時不得不說到this,我們通常會在函數里面用到this這個特殊的對象,但是和我們所想的不同,this指向的并不是方法本身,即fn1里面的this并不是指向fn1,而是指向的是函數據以執行的環境對象,一般來說就是window對象,如下代碼:
這里寫圖片描述
即使是在函數內部定義一個函數,它的this依舊指向的是window而不是其外部包裹的函數:
這里寫圖片描述
既然講到了函數,那么js函數中的閉包就不得不提到。很多人都會把匿名函數與閉包混淆。閉包是指有權訪問另一個函數作用域中的變量的函數。一般來說雖然js沒有模塊的概念,但是函數內部定義的變量,外部的其余函數是無法調用的。
這里寫圖片描述
雖然都是a,但是兩個a在不同函數內部定義,所以他們所指向的是完全不一樣的,fn1中的自定義變量fn2中是不可以訪問的。而閉包則可以訪問自己所處的父函數內部的變量:
這里寫圖片描述
如上圖,b就是一個閉包。一般來說函數a在被執行過后,里面的變量等等會被回收,即在執行完畢后,它內部的所有都應該被銷毀,但是執行b的時候,其a內部的變量c依舊可以被訪問到。a的作用域鏈在a執行完畢后就被銷毀,但是其活動對象依舊會存在于內存里面直到b被銷毀后。
閉包在實際的業務場景里面我到現在幾乎沒有使用,但是在在我的看法中,閉包在組件的開發里面使用率將會很高

 
相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片