編寫自己的程式碼庫(javascript常用例項的實現與封裝)

發表於2017-07-20

1.前言

因為公司最近專案比較忙,沒那麼多空餘的事件寫文章了,所以這篇文章晚了幾天釋出。但是這也沒什麼關係,不過該來的,總是會來的。
好了,其他的不多說的,大家在開發的時候應該知道,有很多常見的例項操作。比如陣列去重,關鍵詞高亮,打亂陣列等。這些操作,程式碼一般不會很多,實現的邏輯也不會很難,下面的程式碼,我解釋就不解釋太多了,打上註釋,相信大家就會懂了。但是,用的地方會比較,如果專案有哪個地方需要用,如果重複寫的話,就是程式碼冗餘,開發效率也不高,複用基本就是複製貼上!這樣是一個很不好的習慣,大家可以考慮一下把一些常見的操作封裝成函式,呼叫的時候,直接呼叫就好!
原始碼都放在github上了,大家想以後以後有什麼修改或者增加的,歡迎大家來star一下ec-do

2.字串操作

2-1去除字串空格

2-2字母大小寫切換

2-3字串迴圈複製

2-4字串替換

2-5替換*

2-6檢測字串

2-7檢測密碼強度

2-8隨機碼(toString詳解

2-9查詢字串

可能標題會有點誤導,下面我就簡單說明一個需求,在字串'sad44654blog5a1sd67as9dablog4s5d16zxc4sdweasjkblogwqepaskdkblogahseiuadbhjcibloguyeajzxkcabloguyiwezxc967'中找出’blog’的出現次數。程式碼如下

3.陣列操作

3-1陣列去重

這個方法是在太多了,我之前寫的文章(js陣列操作–使用迭代方法替代for迴圈,js關鍵詞變色,陣列打亂,陣列去重的實現和封裝)也有提到,我今天這裡就寫一種之前沒用過的方法。

3-2陣列順序打亂

3-3陣列最大值最小值

3-4陣列求和,平均值

3-5從陣列中隨機獲取元素

3-6返回陣列(字串)一個元素出現的次數

3-7返回陣列(字串)出現最多的幾次元素和出現次數

getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2])
預設情況,返回所有元素出現的次數
bVQN1M

getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3)
傳參(rank=3),只返回出現次數排序前三的
bVQN1N

getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],null,1)
傳參(ranktype=1,rank=null),升序返回所有元素出現次數
bVQN2d

getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3,1)
傳參(rank=3,ranktype=1),只返回出現次數排序(升序)前三的
bVQN2e

3-8得到n1-n2下標的陣列

3-9篩選陣列

4.基礎DOM操作

這個部分程式碼其實參考jquery的一些函式寫法,唯一區別就是呼叫不用,引數一樣.
比如下面的栗子

4-1檢測物件是否有哪個類名

4-2新增類名

4-3刪除類名

4-4替換類名(“被替換的類名”,”替換的類名”)

4-5獲取兄弟節點

4-6設定樣式

4-7設定文字內容

4-8顯示隱藏

5.其他操作

5-1cookie

5-2清除物件中值為空的屬性

5-3現金額大寫轉換函式

5-4獲取,設定url引數

5-5隨機返回一個範圍的數字

5-6隨進產生顏色

//這種寫法,偶爾會有問題。大家得注意哦
//Math.floor(Math.random()*0xffffff).toString(16);
bVQT35

5-7Date日期時間部分

5-8適配rem

這個適配的方法很多,我就寫我自己用的方法。大家也可以去我回答過得一個問題那裡看更詳細的說明!移動端適配問題

6.封裝成形

寫了這麼多的操作,小夥伴應該發現了一問題,全域性函式太多了

可能有小夥伴會有疑問,這樣封裝,呼叫有點麻煩,為什麼不直接在原型上面封裝,呼叫方便。比如下面的栗子!

所以在原生物件原型的修改很不推薦!至少很多的公司禁止這樣操作!

7.小結

這篇文章,寫了很久了,幾個小時了,因為我寫這篇文章,我也是重新改我以前程式碼的,因為我以前寫的程式碼,功能一樣,程式碼比較多,現在是邊想邊改邊寫,還要自己測試(之前的程式碼for迴圈很多,現在有很多簡潔的寫法代替)。加上最近公司比較忙,所以這一篇文章也是花了幾天才整理完成。
原始碼都放在github上了,大家想以後以後有什麼修改或者增加的,歡迎大家來star一下ec-do
我自己封裝這個,並不是我有造輪子的習慣,而是:
1,都是一些常用,但是零散的小例項,網上基本沒有外掛。
2,因為零散的小例項,涉及到的有字串,陣列,物件等型別,就算找到外掛,在專案引入的很有可能不止一個外掛。
3.都是簡單的程式碼,封裝也不難。維護也簡單。
廢話就不多說了,上面的只是我自己在開發中常用到,希望能幫到小夥伴們,最理想就是這篇文章能起到一個拋磚引玉的作用,就是說,如果覺得還有什麼操作是常用的,或者覺得我哪裡寫得不好的,也歡迎指出,讓大家相互幫助,相互學習。

相關文章