如何學習NgZorro的源碼

1、先閱讀ng-zorro的官方文檔,比如nzButton的如何使用方法,產生的效果,形成初步的映象。

我們先看最簡單的使用方法:

<button nz-button nzType="primary">Primary</button>

效果就是一個圓角藍色背景的按鈕,按鈕帶有文字Primary,鼠標點擊按鈕有波紋效果。

2、選中按鈕審查元素,觀察審查元素中的html和使用方法中的寫的html代碼有什麼區別。

<button _ngcontent-c11="" nz-button="" nztype="primary" class="ant-btn ant-btn-primary" nz-wave="[object Object]"><!----><span>Primary</span></button>

可以看到屬性和樣式都有變化,並且還插入了一個span標籤,span標籤是用來顯示按鈕中的文字的。

此時可以猜測到源碼在生成button的時候增加了class,並且在button中插入了一段span元素,同時還增加了一些不太熟悉的屬性,這些屬性能夠讓button在點擊的時候呈現一些效果。

到此,我們對nz-button有了最初的認識。

3、查看更多的使用方法,按照前文介紹的1、2方法認識nz-button的更多特點。

4、帶着這些初步的認識,閱讀源碼。

源碼所做的事情就是根據你寫的簡潔的代碼轉化成豐富的效果,根據你的配置生成不同效果的按鈕。

5、學習源碼的設計,編碼規範,以及你不太熟悉的知識點,閱讀源碼也是一種高效學習的方法。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章