原始碼學習 classnames

2021-10-11 20:24:16 字數 1167 閱讀 9053

classnames 是公司專案中使用較頻繁的乙個庫,因為能方便動態切換 class 名稱。

放下對比大家感受下~

<

!-- before --

>

let clsname =

'conetnt'

if(showcontent)

else

if(needmargin) clsname +=

' add-margin'

return

/>

<

!-- 使用 classnames 後 --

>

return

/>又比如自己封裝的業務元件,呼叫方經常需要傳入自定義 class 類名,使用classnames

的話是這個樣子:

// 假設 clsname 為父元件傳入的自定義類名,可選

/>以上 classnames 可以根據 truly 值動態選擇拼接 class 名稱,在前端開發中是很方便的。

使用多了逐漸對classnames產生了好奇:它的內部是如何執行的??

github 上檢視原始碼後也從中學到了一些東西 ? ,分享給大家:

// 儲存 object 的 hasownproperty 方法引用

var hasown =

.hasownproperty

function

classnames()

else

if(array.

isarray

(arg)

&& arg.length)

else

if(argtype ===

'object'

)else}}

}// 將 classes 元素通過 ' ' 空格拼接後返回,即拼接後的 class 名稱

return classes.

join

(' '

)}

方法測試截圖:

了解原始碼內部執行機制,能讓我們在使用的時候明確結果是如何產生的,同時哪些使用方法是不適合的等等~ ?

– end –

原始碼學習 ArrayList的擴容原始碼分析

原始碼如下 下面是arraylist的擴容機制 arraylist的擴容機制提高了效能,如果每次只擴充乙個,那麼頻繁的插入會導致頻繁的拷貝,降低效能,而arraylist的擴容機制避免了這種情況。如有必要,增加此arraylist例項的容量,以確保它至少能容納元素的數量 param mincapac...

PicoContainer原始碼學習

介紹下自己,我叫stef wu,是個菜鳥,現在在easyjf團隊學習,得到了大峽等人的熱情幫助。本序列文章是以前在學習研究picocontainer時所記錄下來的,希望借本文,能和正在學習pico新手或者研究pico的高手一起交流學習。由於我水平不好,而且是真實的從頭到尾的記錄,所以其中,特別是前面...

PicoContainer原始碼學習

介紹下自己,我叫stef wu,是個菜鳥,現在在easyjf團隊學習,得到了大峽等人的熱情幫助。本序列文章是以前在學習研究picocontainer時所記錄下來的,希望借本文,能和正在學習pico新手或者研究pico的高手一起交流學習。由於我水平不好,而且是真實的從頭到尾的記錄,所以其中,特別是前面...