靈活的JavaScript（一）

標籤：模式   自己的   lin   count   this   method   擴充   監聽   實作類別   

　　自己對JavaScript的原型，繼承，閉包，多少也還是瞭解些，但是平時寫的東西都挺簡單的，也用不上，所以感覺提升不大。於是乎買了一本《JavaScript設計模式》來提高下自己，這本是百度寫的，不是國外的那本，看了第一章，哇靠。。。寫的真好，帶入感真的強，看小說的朋友應該都懂。

　　平時也都會看一些別人的部落格之類的，但是平時不怎麼用，所以久而久之也就忘記了。這次便打算一邊看，一邊將自己的理解和書裡的一些東西做個簡單的筆記，以後也好看看。

　　1.用對象收編變數

　　剛開始接觸前端的那會兒，寫一些方法都是直接定義一堆函數或者乾脆寫在onclick事件裡，後來才知道可以通過對象或者函數去封裝，使我們的代碼更加簡潔並且可維護性高。

　　對於一些小項目，我們可能只需要將函數或者屬性直接寫在一個通過字面量的方式所建立的對象裡就夠了，比如：

var obj = {  name: ‘macbai‘,  func1: function () {},  func2: function () {}}

　　但是隨著項目的增大，我們可能會遇到類似於全域變數衝突，或者需要通過繼承等，來使代碼更加精簡等問題，這個時候我們便會需要用到建構函式來建立對象，然後來封裝一系列的方法和屬性等，比如：

var Check = function (nameType) {  this.nameType = nameType;};Check.prototype.checkName = function () {};Check.prototype.checkAcount = function () {};// 使用時var loginCheck = new Check();loginCheck.checkAcount()

　　因為每次通過關鍵字new建立一次對象，就會新建立一個執行個體，所以我們把可以共用的屬性和方法放在原型上，不能共用的放在自身裡。

　　2.像jQuery一樣鏈式調用方法

　　寫jQuery時經常這樣$(‘#id‘).addClass(‘xx‘).siblings().removeClass(‘xx‘)，其實實現還是很簡單的：

var Check = function (nameType) {  this.nameType = nameType;};Check.prototype.checkName = function () {  ...;  return this;};Check.prototype.checkAcount = function () {  ...;  return this;};// 使用時var loginCheck = new Check();loginCheck.checkName().checkAcount()

　　我們只需要return this，返回當前對象就行了。當然這隻是最簡單的一種實現方式，網上還有好些其他的方法，這裡不一一介紹，大家可以自己研究。

　　3.方法的擴充

　　在寫這篇文章的時候剛好要做前端埋點的工作，產品狗也不知道要具體做些什麼，需要什麼資料，就告訴我兩字，全埋！心裡一萬隻草泥馬在奔騰啊....只好百度埋點一般都會需要一些什麼資料，都有哪些方法。

　　看了一圈，大致知道了，但是一想到產品狗說的全埋，每個按鈕和功能都要埋的時候，內心真的是崩潰的......能通過事件監聽的盡量都用事件監聽來做了，但剩下的一些不好做的也還是有好多，這該怎麼辦？踏破鐵鞋無覓處，得來全不費功夫，之前聽說過prototype.js這個東西，但一直不知道幹嘛用的，看到書的第一章的時候才真正接觸。就是給JavaScript的祖先對象類（Function、Array等）進行擴充。比如：

// 擴充方法Function.prototype.stayTime = function () {}// 使用方法var a = function () {}f.stayTime()

 

　　不過不推薦直接擴充JavaScript未經處理資料類型，因為這樣容易造成全域汙染，除非像我這樣一個公司就一個前端的....

　　所以我們可以只擴充一個可以方法，一個可以統一添加方法的功能方法，就像這樣：

Function.prototype.addMethod = function (name, fn) {  this[name] =  fn;}// 建立方法var a = function () {};// 或者var a = new Function ();a.addMethod(‘stayTime‘, fnction () {  ...})// 使用方法a.stayTime();

 　　但是通過函數來調用，總感覺怪怪的，雖然函數也是對象，這樣做也沒錯，不過為了更符合習慣與類式調用，也就是普通的對象那樣去調用，可以改一改：

Function.prototype.addMethod = function (name, fn) {  this.prototype[name] =  fn;  return this; // 還可以鏈式添加方法}// 建立方法var Fun = function () {  ...};Fun.addMethod(‘stayTime‘, fnction () {  ...  return this; // 當然也可以鏈式調用方法}).addMethod(‘counter‘, fnction () {  ...  return this; // 當然也可以鏈式調用方法})// 使用方法var b = new Fun();b.stayTime().counter();

　　要實作類別式調用，其實就是在函數的原型上添加方法。

 

靈活的JavaScript（一）