讀京東 nutui 框架總結（1）

VUE 給你們帶來了組件化，這個功能給開發人員帶來了強大而且簡潔的複用組件能力。設計精美，擴展良好的組件無疑會讓產品效果更加統一，帶來更好的觀看感受，減小大量重複性工做，提升代碼的可維護性。帶着這些個目的我準備研讀大廠源碼，京東的 nutui 是我比較中意的一款，大量小巧漂亮的動畫讓我愛不釋手。這篇文章就是我爲你們奉上的閱讀 nutui 源碼心得

目前已經重複實現的組件

1. picker
2. actionsheet
3. radio
4. checkbox
5. switch
6. button
7. buttongroup
8. backtop
9. toast
10. cell

目錄結構的劃分

目前裏面我特別崇拜的就是對於目錄結構的劃分，很是清晰。(這裏主要說的是 src 目錄下的代碼。)

|-- src
    |-- config.json // 配置文件
    |-- nutui.js    // 入口文件
    |-- assets // 靜態資源
    |   |-- svg
    |-- locales // 多語言支持文件
    |   |-- index.js
    |   |-- lang
    |       |-- en-US.js
    |       |-- zn-CH.js
    |-- mixins // 混合函數
    |   |-- findCptUpward
    |   |   |-- index.js
    |   |-- locale
    |       |-- index.js
    |-- packages   // 主要的組件代碼都放到了這裏面
    |   |-- actionsheet
    |   |-- backtop
    |   |-- badge
    |   |-- button
    |-- styles    // 樣式代碼
    |   |-- index.scss
    |   |-- variable.scss // 定義的全局默認樣式文件
    |   |-- animation  // 所有都是動畫樣式
    |   |-- mixins  // 使用了 sass 的 mixins 的樣式
    |-- utils // 工具類
        |-- date.js

複製代碼

注意源代碼裏面要比這些文件多的多，我爲了讓文章看起來簡短因此進行了刪減

一目瞭然的目錄結構，直接創建起了我宏觀上對項目的瞭解，很舒服

picker 詳解

就目前來講我看到的 picker 插件效果最好的就專屬 nutui 的了（若是你看到過比這更好地歡迎評論留言）,他好在了加入了一個滾輪效果不是一個平面的，感受很是細節。

如何實現的 3d 滾輪效果？

主要用到了倆個 CSS3 的新特性 transform 中的 rotate3d, translate3d。

屬性名	做用
rotate3d(x,y,z,angle)	定義 3D 旋轉。
translate3d(x,y,z)	定義 3D 轉換。

只使用 rotate3d 不配置 translate3d, 元素會圍繞着本身的中心點進行旋轉。因此須要配合 translate3d 修改元素 z 軸的位置。 z 軸設置的值至關於旋轉的時候的半徑。瞭解了這些，只須要給一組元素設置相同 z 軸的值，設置不一樣的圍繞 x 軸旋轉的角度就實現了一個靜態滾輪的效果。監聽用戶的 touchstart, touchmove, touchend 事件進行相關的計算便可。

比較經典的部分我以爲是用到了 CSS3 的 transition 過分效果。判斷用戶是手指滑動狀態就去掉這個屬性，不然的話就加入這個屬性進行一個動畫的過渡效果。

這裏面須要注意的地方有倆點：

1. 是在某些瀏覽器中用戶觸摸的時候會致使整個頁面進行滾動，體驗效果很是插件。 解決方式也很簡單在 touchstart 事件中取消事件的默認動做就能夠了。代碼以下

event.preventDefault()
複製代碼

2. 3d 效果不理想，由於少了一個 3d 屬性

transform-style: preserve-3d
複製代碼

不瞭解的能夠看這篇文章 blog.sina.com.cn/s/blog_65c2…

radio, checkbox, button 樣式的重置

radio, checkbox

appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
複製代碼

上面的是去掉瀏覽器自帶樣式的核心樣式，惟一問題是存在兼容問題須要IE9+。不過這裏是手機端 UI 庫，就無需擔憂了。

input[type=checkbox] {
  appearance:none;
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari 和 Chrome */
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: #f0250f;
  outline: 0;
}
input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml, %3Csvg width='20' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8l2.5-2.5 5 4.5 10-9.5L20 3 8 15H7z' fill='%23FFFFFF' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-color: #f0250f;
  background-repeat: no-repeat;
  background-position: center;
  border-color: #f0250f;
  background-size: 60%;
  box-shadow: 0 4px 6px 0 rgba(240,37,15,0.15);
}
複製代碼

以上代碼就實現了京東無動畫版的 checkbox, 修改一下 border 的圓角就實現了 radio。上面的 outline 樣式很重要，input 標籤會有焦點事件，焦點會給元素生成一個輪廓。因此須要重置輪廓屬性

有同窗可能要說了，我最想要的是選中時放大的漸變消失效果，這個效果讓個人組件賊上檔次。其實這個效果很簡單，他用了元素的僞元素當選中的時候執行一個大小變大，透明度消失的動畫效果。爲了保持文章的可讀性，這裏就不貼代碼了。歡迎你們閱讀 nutui 的源碼。

button

button 的樣式重置我本覺得會跟 radio, checkbox 會差很少，可是我發現我錯了。button 你只須要將 border 去掉你就發現他看其實沒有多高大上了。並且設置了 appearance 也沒用。這裏我蠻想知道官方的這套默認的 button 樣式是如何設置的，由於他除了樣式醜一點，其餘的真的是很是棒的。它自己實現的那種單機效果的交互操做是很是完美的，針對這一點 nutui 框架的 button 並不算出衆。

toast 與 VUE 的 extend 的結合感悟

寫這個其實我是有點迷糊的，並非我不理解，也不是他的設計多麼複雜。而是由於好像就應該這麼設計，一個就應該這麼設計的東西寫他幹嗎呢，這就是我迷糊的地方。但是反過來講你若是不知道 VUE 的 extend 方法我相信你也依然可以實現同樣功能。這裏就引起了個人思考：多學不如專精

意思就是你掌握了十種技能，但是你卻不會組合他就只是純粹的十種技能。另外一我的可能只會八種技能，但是他專精其中的四種技能。這四種技能他可以經過倆倆組合，三三組合衍生出來 12 種可能性。這種人寫的代碼讀起來行雲流水，對其瞭解顯淺易懂。這種人難道不更應該值得欽佩麼？

強調一點，這個觀點並非讓你故步自封，並且我也支持技多不壓身的觀點，可是必定要有本身的核心優點

總結

上面幾個是對我感觸最深的，像沒有說的 toggle 他用到了 VUE 的 .sync 使得父子組件之間的數據雙向綁定的優雅寫法。作按鈕組的時候 nth-child,nth-last-child 的運用都是很不錯的思考。這些個東西你去菜鳥教程，w3c 上是找不到的。他們更多的像是 API 查詢文檔。而對於這些日常不經常使用的屬性，方法運用得當總會給人一種驚豔的感受