this應用詳解-js原生

 

　　學習記錄，以防遺忘，適合新手解惑。老鳥避讓！

　　在微信H5的開發中，不少頁面都是簡單的一個模型item在加上不少不少數據組成起來的。例如微信朋友圈，仔細觀察，他的一個基本模型就是 「頭像圖片 + 用戶暱稱 + 一段文本 + 一張或大於一張小於九張的圖片 + startTime 」。總計五部分，這樣的一個模板寫好之後，只須要去刷新（即請求數據庫數據），拿到數據後，進行動態渲染，把數據填充到模板裏面。拿到了X條數據，就渲染出X個模板，最後，咱們的朋友圈就這樣展現出來了。原理就是這樣，和我今天要記錄的 this 指針有一點點關係。

　　模板只有一個！那麼綁定在五個模塊（即整個模板）上面的方法確定是如出一轍的，那請求的數據是不同的，怎麼區分事件呢？簡單說，就是五個朋友都發了一條朋友圈，你要看第二我的的文字詳情或圖片大圖，你點擊了第二我的的圈圈詳情，他就展現了該人的詳情，那他怎麼不展現其餘人的詳情呢？一個模板出來的模型，靠什麼區分每個 item 呢？可能其餘語言有其餘好的辦法，JS裏面能夠依靠 this 指針來實現。

如圖，經過模板結合數據創造出列表頁，每一個item 都有兩個按鈕，點擊具體的某一個「去閱讀」，不影響其餘的「去閱讀」按鈕，還能夠進行點擊源「去閱讀」按鈕的一些樣式變化和其餘事件。

 

　　模板中，給「去閱讀」按鈕綁定 onclick 事件，傳參 this ，在 函數中利用this 來區分當前用戶點擊的是哪個item並做出該item 對應的事件，例如去請求不一樣的接口以及樣式改變等，

以前我有拿過 e.target 方法來嘗試找到點擊源並作後續的事，但發現可能不太適合以上場景。使用this 卻很方便。以上僅爲記錄回憶用，語言潦草具備理科男文章性質。待有時間在精細修改下。