奇舞js筆記——第0課——如何寫好原生js代碼

標籤：重新整理   js代碼   可擴充   複雜度   狀態   traffic   cti   原因   分離   

摘要

 

 

1.好的代碼職責要清晰，javscript不要用來操作樣式；

 

2.API要設計的合理：通用性，適度的抽象（資料抽象，過程抽象），可擴充性；

 

3.效率問題：用好的、合適的演算法（前端程式員要把自己當程式員）。

 

註：

 

1.學習視頻地址

2.ppt地址

3.個人感想：

 　　是我hin厲害的師父推薦我看的月影大大的視頻，感覺對於我這個小白來說，真的是一遍又一遍的重新整理知識面。我覺得像月影大大這種大佬的思路，我接觸之後真的是受益匪淺。

　　所以我總結出來不僅是自己記筆記，也是想分享給想要成為真正的前端“工程師”的前端er。

　　真的很珍惜這種知識面被重新整理的感覺——越學習，越感到自己無知，共勉。

 

 

目錄

 

 

1. 問題一：操作DOM 

　　　　版本1，初級工程師： 

　　　　版本2，中規中矩： 

　　　　版本3，專業版： 

　　　　操作DOM問題的總結： 

2.問題二：API的設計 

　　　　版本1： 嵌套setTimeout

　　　　版本2： 資料抽象

　　　　版本3：資料抽象，封裝（七八十分）（一定要會）（中規中矩）（項目中用起來不錯）

　　　　版本4：過程抽象（版本2和3是資料抽象） 

　　　　版本5： 改需求，改時間 的對策

　　　　版本6：（進階程式員寫的） 

　　　　API設計問題總結： 

3.問題三：效率/效能問題

　　　　版本1：兩個迴圈 

　　　　版本2：利用數組的排序方法sort，先排序，再遍曆 

　　　　版本3：空間複雜度換時間複雜度 

　　　　效率問題總結

4.總結

 

本文

 

 

1. 問題一：操作DOM

做一個列表單選

 

版本 1，初級工程師 ：

 

優點：

在ul上添加事件控制代碼，由於事件可以冒泡，在點擊事件中篩選event.target來處理就可以

問題：

js負責的是“行為”

在js中定義樣式,若需求改動後，會導致不靈活

js：不操作DOM樣式，操作DOM狀態

 

版本2，中規中矩：

 

 

分清職責：

css中添加樣式類

js來操作狀態（類屬性）

 

版本3，專業版：

 

這樣實現，充分利用html標準，更具有語義性，靈活

 

操作DOM問題的總結：

1.寫 JavaScript 操作 DOM 要注意什麼

不要操作DOM樣式

（很多wvvm架構禁止直接在js中操作DOM的原因就是這個，害怕寫出版本1那種代碼）

2. JavaScript 與 HTML、CSS 的職責如何分離

html負責內容，語義

css負責樣式

js負責狀態，不負責樣式

3. 把複雜性放在哪一頭，為什嗎？

4. 架構？原生？：

架構幫你解決了代碼寫的不好的問題，一旦用慣了，再換架構，會寫出問題很多的代碼；

寫原生的更能意識到自己的問題；

 

2.問題二：API的設計

三個狀態用紅(stop)、綠(pass)、黃(wait)表示

要求用 JavaScript 讓三個狀態輪流切換

每個狀態的停留時間是 2 秒

 

版本 1：

 

css：

 

優點：

html，css中把三個狀態類”stop”,”wait”,”pass”放在父元素上，然後在css中直接用：nth-child操作父元素的某個子項目，這樣靈活性很高

缺點：

如果需求增加到 5 盞、10 盞燈？

const traffic = document.getElementById(‘traffic‘);(function reset(){  traffic.className = ‘wait‘;  setTimeout(function(){      traffic.className = ‘stop‘;      setTimeout(function(){        traffic.className = ‘pass‘;        setTimeout(function(){          ...            ...              ...                ...                  setTimeout(reset, 2000)                ...              ...            ...          ...        }, 2000)      }, 2000)  }, 2000);})();

過程耦合 + Callback Hell…… 差評！！！：

代碼中，三個狀態有順序，必須先1再2再3，過程耦合；

Callback Hell難以維護

 

版本2：

 

優點：

把狀態抽取出來，通過數組的下標去操作，更改資料很方便

把資料/狀態抽象出來

缺點！！：

依賴於外部變數 stateList、currentStateIndex

封裝性不好……差評！！

 

版本 3：封裝好（七八十分）（一定要會）（中規中矩）

 

 

優點：

把currentStateIndex分裝進函數，因為使用者使用不到；

把state的數組和dom元素暴露出來，以便更改；

很重要：：：：：什麼該暴露，什麼該封裝

缺點：

可複用性差，只有當前的能用到

 

版本4：（ 過程抽象 ）（版本2和3是資料抽象）

 

 

抽象出來了一個poll 函數是一個高階函數（偏函數），傳回值是function，說明做了一個過程抽象。

它的參數是一系列函數，傳回值也是函數，它的功能是按順序調用參數中的函數。

小王去開門：person類，是資料抽象；開門，開xx，是過程抽象

bind函數也是一個高階函數（偏函數），它也返回一個函數，

優點：poll函數可複用，很通用。

例如：

 

 

版本5：改需求：改時間

版本2.3.4做了抽象反而不能改時間，版本1可以改，要回去？？？

 

promise（是es6裡面很重要的概念）

不用promise的版本:

 

 

版本 6：（進階程式員寫的）

 

內部實現很複雜，但是外部API很好用；可以隨意向狀態列表添加狀態，且每個狀態裡面可以做很多種事情；

 

API設計問題總結：

1.寫原生的js有很多方向可以寫，但是用架構類庫模式會很固定

2.避免過程耦合，即上下兩個過程有關聯（例如版本1中，必須先實現狀態1，再狀態2...）

3.要知道什麼資料該封裝，什麼不該封裝（例如例子中的currentIndex該封裝，因為只有在內部實現時要用到它，而狀態列表，元素，不該封裝，因為與具體的過程實現沒關係，而是與外部介面有關係）

4.可複用的過程可以抽象出來（例如例子中的按順序執行幾個行為）

5.與過程無關的資料可以抽象出來（例如例子中的三個狀態，等待時間）

 

 

3. 問題三 ：效率/效能問題：

 

版本1：兩層迴圈

 

效率：兩層迴圈，時間複雜度是O(n^2)，效率很低

 

版本2：利用數組的排序方法sort，先排序，再遍曆

 

 

效率：

排序時間複雜度n*log(n)，遍曆複雜度是O(n)

總的就是O(n*logn+n)

如果數組很大的話，效率高很多，比如n=10000

n^2=100000000,n*logn+n=50000

 

版本3：空間複雜度換時間複雜度

（大致思路就是將1和9中的1放在key上，另一個放在value上）

 

效率問題總結：

1.程式最佳化本質上是要用好的演算法，要重視演算法問題，尤其是在js不止被用在瀏覽器上時（例如用在服務端時，比如處理圖片就要處理大量的像素點，所以演算法很重要，可以在leetcode刷題，前端在程式員比鄙視鏈上，要正式這個問題，別把自己不當程式員）

2.其他最佳化要瞭解：http協議特點，資源請求特點，圖片格式

 

4.總結：

1.好的代碼職責要清晰，javscript不要用來操作樣式

2.API要設計的合理：通用性，適度的抽象，可擴充性

3.用好的、合適的演算法（前端程式員要把自己當程式員）

 

奇舞js筆記——第0課——如何寫好原生js代碼