關於前端複用的構思

 前端摩爾定律，每隔18個月，前端難度難一倍。

確實是這樣。。想當初只用jquery一個一個趕頁面是多麼……

接觸了一些前端框架，他們都是爲了解決了一些特定的場景而生，一堆一堆的api要記，前端學習成本一個一個框架就上去了。

不要盲目的追框架，若是它提升你工做效率就用，若是不能那爲何要用？框架還有學習成本和踩坑成本，原生維護成本相對較高。複用就是一個提升工做效率的一個點。

框架和原生均可以表現出複用的思想，太簡單的複用就不講了，聽過一些大神們的分享以後，我想談一下組件級的複用的思考。最近不是流行web components麼。

1，關於原生

原生js，html搭建的網頁是蠻難維護的，好比一個表單驗證，一大堆if else確定之後維護或者添加功能上面就麻煩不少。

原生的複用也就是代碼複用，把代碼功能抽象出來，表單驗證的功能都相似吧？把功能抽象到方法，好比驗證字符串的個數，compare，密碼是否是相等，郵箱，手機的驗證，正則表達式的驗證。

傳參驗證。每次我只須要定義驗證規則和傳入input的值就能夠。這樣一個驗證的類，我就把此生所須要寫的全部表單驗證的邏輯寫完了。

項目有兩個頁面須要驗證，不要寫2遍if else，調用這個類，傳相應參數。

加功能怎麼辦，拓展類，拓展規則。這樣，你原來的代碼不用改，你不須要知道之前一堆jq是什麼鬼，你只須要拓展這個類就能夠了。一種好的代碼規範就是拓展而不是修改。

2，angularjs
咱們不盲目崇拜框架，我有原生的一套js驗證，好，那麼我angular也調用這個類。angular好的實踐就是在controller裏面不要加太多業務邏輯和dom操做。若是咱們想複用就別讓它依賴當前controller。

angular的指令分裝飾型指令和組件。通常複用就要組件不依賴外部環境，這樣你才能把這個指令用到任何地方。咱們把該指令分離，他須要的數據經過屬性傳進去，相似vue和react的props，

而後內部就是操做自身邏輯，咱們須要複用邏輯，把「髒」東西扔出去。這點angular作的不是很好，angular1.*並無講組件這個概念，這點會在ng2中有所改變。

一個angular組件，數據在屬性中傳遞，中心驗證我還用原來的那套。好比一個組件

<verify name="username" verify-type="string" model-type="class" />

 

一個驗證組件就相似這樣，我要顯示的組件名好比用戶名，我傳一個username，我要驗證的類型，好比我驗證它是否是字符串，用一個verify-type傳入string，經過那套js驗證後返回驗證結果。

驗證結果能夠用個form-error的指令來封裝一個錯誤類型的指令。每次出錯都複用這個指令，固然出錯信息props傳入。最後能夠定製model-type，指令的樣式，傳入一個js對象，能夠定製。

3.reactjs

react就提倡的web components，它的每一個部分都是一個組件，固然數據是props傳入的，他都給想好了。這個組件就比較好複用了，它維護自身的state，一個組件一個state，兩個組件基本上沒有任何的耦合。那麼複用就好作多了。組件的通訊就經過props，子與父組件的通訊就須要全局的事件系統了。react複用是作的很好了，可是它沒有雙向綁定，驗證表單寫起來較ng麻煩一點，組件間的通訊也很麻煩。因此寫react應用的時候，子組件通常就充當渲染組件，上面傳什麼參數我渲染什麼，並且react組件不要嵌套太深，好的實踐是扁平化，若是用了redux,就會發現若是嵌套太多組件，state是很難維護的。

 

總結：隨便閒扯了幾句，主要是但願咱們工做效率可以提升，我只須要寫html給它傳遞相關屬性來定製一套頁面，這是多麼爽，一句js也不用寫，頁面就寫完了，功能和風格都是統一的，並且它仍是好維護的。純理論，但願之後根據公司業務邏輯寫一套本身的開發框架，用公司的ui庫，達到本身「不寫」頁面的目標……