經常使用插件總結

plugs

半年的時間，工做中對於框架的依賴愈來愈少，因此後面常常本身封裝一些所須要用到的模塊或者插件。我這裏只作了實現，至於在項目中如何去封裝，還要看具體框架、模塊機制來作，因此我這裏只做爲一個實現方式的參考。

1.數組處理

咱們從後端返回的列表數據每每須要進行二次加工，以便於前端更方便的處理和顯示，這裏我寫了幾個我常常會用到的一些方法。
https://github.com/Stevenzwzhai/plugs/tree/master/Array-Deal

2.數組去重

這個問題其實好久以來就有，搜索的時候能夠搜出一堆方法，而其中最受歡迎的就是hash去重，可是它仍是有一些缺陷，我前幾天寫過一篇相關文章：數組去重完整版,常常逛掘金的同窗應該看過。代碼地址https://github.com/Stevenzwzhai/plugs/tree/master/Array-Removal

3.數據綁定

最近幾年，雙向數據很是火，一開始是angular，以後vue也作了實現，不過兩者實現方式不一樣，前者使用髒檢查，後者使用Object.defineProperty()，這裏我簡單地作了實現https://github.com/Stevenzwzhai/plugs/tree/master/data-bind

4.模態框

用過bootstrap的同窗都應該常常會用到模態框，最然bootstrap被廣大前端er所排斥，但不能否認，它作的不少控件仍是很好用的，最近工做項目中會有彈窗，因此我簡單地作了一個彈窗動畫，模擬bootstrap的模態框，固然動畫是很簡單，但是最終讓它正常運行就沒那麼簡單了，我以前也寫過文章js實現類bootstrap模態框動畫,代碼地址https://github.com/Stevenzwzhai/plugs/tree/master/dialog

5.移動端拖拽

你們都懂，地址https://github.com/Stevenzwzhai/plugs/tree/master/drag

6.元素顯示隱藏

用過angular或者vue的同窗都瞭解，在能夠用指令來控制元素在渲染後的顯示隱藏，很方便，不用咱們在額外的操做dom元素，可是對於所用框架沒有這個功能的同窗就有點不爽了，因此我這裏作了個原生的實現，能夠根據指令來控制元素的顯示隱藏，固然，指令你能夠更換成你本身想要的。https://github.com/Stevenzwzhai/plugs/tree/master/element-show

7.事件觸發器

事件觸發器是一個框架的基本組成，這裏我作了一個簡單地事件觸發模塊，支持事件綁定、觸發、解綁，以及單次綁定事件。https://github.com/Stevenzwzhai/plugs/tree/master/emitter

8.模板引擎

咱們在渲染的時候常常會用到各類模板引擎，template、artTemplate，或者angular、vue中的，我用es6的$()和new Function，作了個簡單地模板渲染，包括簡單內容渲染和列表渲染，並把以前的元素顯示隱藏加了進去https://github.com/Stevenzwzhai/plugs/tree/master/es6-template

9.模糊查詢

模糊查詢通常都會去請求後端接口，可是當數據量很少，並且是一次返回所有數據的狀況，前端去作模糊查詢是最佳選擇，以前寫過一篇文章有介紹:js前端實現模糊查詢,代碼地址https://github.com/Stevenzwzhai/plugs/tree/master/fuzzySearch

10.獲取元素最終背景色

前一段時間一篇面試文章很火，我也作了其中一個題的實現，還寫了博客一月前端面試--獲取元素最終背景色,代碼地址https://github.com/Stevenzwzhai/plugs/tree/master/get-background-color

11.函數鏈式調用

對於函數鏈式調用最熟悉的就是jquery了，這裏我用es5和es6分別作了鏈式調用的實現。用原生js實現的鏈式調用函數，代碼地址https://github.com/Stevenzwzhai/plugs/tree/master/js-chaincall

12.解析url

這個可能用的很少，可是偶爾會用到，解析出url的各個組成部分，並返回一個對象。https://github.com/Stevenzwzhai/plugs/tree/master/parseQueryString

13.獲取編輯區光標的位置

當你須要自定義選擇編輯區的內容時會用到，用來獲取光標位置，兼容性不用擔憂滴。https://github.com/Stevenzwzhai/plugs/tree/master/selection-%E5%8F%AF%E7%BC%96%E8%BE%91%E5%8C%BA%E5%85%89%E6%A0%87%E4%BD%8D%E7%BD%AE

14.關於一道面試題

// 寫一個 function 讓下面兩行代碼輸出的結果都爲 5
  console.log(sum(2, 3));
  console.log(sum(2)(3));

有人應該看過原文，可是做者沒寫出多個參數怎麼辦，這裏我作了補充https://github.com/Stevenzwzhai/plugs/tree/master/Sum-1

15.函數隊列

關於實現函數按必定順序調用的例子，直接看代碼https://github.com/Stevenzwzhai/plugs/tree/master/%E5%87%BD%E6%95%B0%E9%98%9F%E5%88%97

16.判斷一個函數是否爲質數的算法

基本思路：負數不是質數。一樣的，1和0也不是，所以，首先測試這些數字。此外，2是質數中惟一的偶數。沒有必要用一個循環來驗證4,6,8。再則，若是一個數字不能被2整除，那麼它不能被4，6，8等整除。所以，你的循環必須跳過這些數字。
https://github.com/Stevenzwzhai/plugs/tree/master/%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E6%95%B0%E5%AD%97%E6%98%AF%E5%90%A6%E6%98%AF%E5%9F%BA%E6%95%B0

16.js無限級分類

關於這個我也有文章具體介紹無限級分類和循環渲染

17.自定義短信模板

這裏咱們的需求是：編輯區能夠插入關鍵字，固然是能夠在點擊到文本域中的任意位置，關鍵字以中括號包裹的形式出現【關鍵字】，刪除關鍵字要整個關鍵都刪掉，而不是本身全刪除。
這裏我試過使用div+contentable，關鍵字使用元素插入，雖然刪除很方便，可是在計算光標位置的時候就略複雜，因此這裏使用正則去判斷光標左右中括號的數量來完成，具體看文章：JavaScript實現自定義短信模板代碼地址https://github.com/Stevenzwzhai/plugs/tree/master/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A8%A1%E6%9D%BF-template

以上就是所有內容，固然裏面有些不足或粗糙，請你們指正，博客園和簡書都是我寫的文章，若是以爲不錯star一下，或者提供更多的實用插件。
github:https://github.com/Stevenzwzhai/plugs