釘釘（工做協同）應用以前端源碼賞析

這幾天在興趣下翻看了釘釘（工做協同）應用的前端源碼，分析其目錄結構、構建工具及框架使用等，進行前端技術研究，分享個人總結成果。

PS：不知道這應用的不要緊，由於總結出來是前端通用的東西。

PS：其應用樣子。

前言

我研究的是PC桌面版的釘釘應用，應用是由「chrome內核容器+ web頁面」構成的，也就是桌面的混合應用（跟手機Hybrid應用的原理同樣），針對分析的也是其web頁面部分。

首先它是一個單頁面的應用，主體框架是用AngularJS，頁面路由也是由AngularJS完成。因爲框架是會主導着項目的開發方式，因此它的目錄劃分會以AngularJS的模塊進行。

我將分析的部分放到個人Github上，主要是這四個文件：https://github.com/codingforme/code-learn/tree/master/dingding

js依賴庫分析

看別人用的依賴庫的好處在於，你知道有什麼能夠用，什麼能夠借鑑。

PS：人最怕是不知道，而不是你不會。

1. jQuery

釘釘使用了1.9.1版本的jQuery，jQuery做爲一個最爲普遍使用庫，已經不用說明它是什麼了。

學習地址：http://jquery.com/

PS：Includes Sizzle.js

2. jQuery Hotkeys

jQuery插件，可用來監聽鍵盤事件，幾乎支持全部的組合鍵。

學習地址：https://github.com/jeresig/jquery.hotkeys

3. jQuery Caret

jQuery插件，處理文本框的插入位置。

學習地址：https://github.com/accursoft/caret

4. jQuery atwho

jQuery插件，自動完成提示插件（autocomplete mentions），相似微博的@功能。

學習地址：https://github.com/ichord/At.js

演示地址：http://ichord.github.io/At.js/ （支持Textarea、ContentEditable、CKeditor等富文本編輯器）

PS：基於Caret.js

5. jQuery tooltips

jQuery插件，一個簡單的提示插件，風格挺舒服的。

學習地址：https://formstone.it/components/tooltip/

PS：這只是formstone其中一個庫，還有其餘有意思的。

6. jQuery mousewheel

jQuery插件，用於添加跨瀏覽器的鼠標滾輪支持。

mousewheel事件的處理函數有一點小小的變化，它除了第一個參數event 外，還接收到第二個參數delta。經過參數delta能夠獲取鼠標滾輪的方向和速度。

學習地址：https://github.com/jquery/jquery-mousewheel

7.  QR Code Generator

二維碼生成器，純前端生成。

學習地址：https://github.com/kazuhikoarase/qrcode-generator/tree/master/js

PS：其餘語言的該做者也有提供。

8. libphonenumber

Google的JavaScript庫，用於解析，格式化和校驗國際電話號碼。

學習地址：https://github.com/googlei18n/libphonenumber/tree/master/javascript

9. Underscore.js

Underscore一個JavaScript實用庫，提供了一整套函數式編程的實用功能，可是沒有擴展任何JavaScript內置對象。

學習地址：http://www.css88.com/doc/underscore/

PS：這個真是個不錯的庫。

10. AngularJS

AngularJS是一個框架（不是庫），在我印象裏最大的特色是雙向數據綁定。

學習地址1： http://angularjs.org

學習地址2： http://www.apjs.net/

AngularJS拓展指令

1. angular-qrcode

An AngularJS directive to creates QR Codes using Kazuhiko Arase’s qrcode-generator library.

學習地址：https://github.com/monospaced/angular-qrcode

2. angular-ui/ui-select2

This directive allows you to enhance your select elements with behaviour from the select2 library.（這個指令已通過時。）

學習地址：https://github.com/angular-ui/ui-select2

PS：這個指令依賴的jQuery select2庫（https://select2.github.io/），這個庫很是不錯，效果以下：

3. others

還有使用到其餘AngularJS拓展指令， 可在這查看：http://angular-ui.github.io/

PS：上面的只是簡寫，完整的能夠看我另一篇文：【釘釘js依賴庫學習】

css分析

查看釘釘的樣式文件（壓縮合並後）後，我以爲其樣式內容能夠分爲5大種（分文別類是爲了開發更加清晰）。

1. reset.css | 重置樣式

2. base.css | 基礎樣式

3. common.css | 通用樣式

4. module.css | 模塊樣式

5. unit.css | 元件樣式

reset.css

（0-49行）重置樣式，消除默認樣式和瀏覽器差別。

這個已是約定俗成的，sass工具也有庫可直接使用，或者在網上尋找別人總結好的來用也可，例如：

【HTML css reset 】http://www.zhangxinxu.com/wordpress/2010/08/html5-css-reset/

base.css

（50-529行）基礎樣式，含HTML標籤的初始樣式、字體圖標、顯隱樣式。

例如：body、a、input、button、.visiable、.hide等。

common.css

（530-1441行）通用樣式， 全局通用樣式、佈局（與業務無關）等。

例如：

1. 佈局（將頁面分割爲幾個大塊，一般有頭部、主體、主欄、側欄、尾部等）

2. 滾動條（progress）

3. 進度條（loading）

4. 表單 （form-area、checkbox、radiobox）

.....

modules.css

（1442-3465）模塊樣式，業務相關的模塊樣式（一個語義化的能夠重複使用的較大的總體！）

例如：

1. 菜單（menu-pannel ）

2. 內容區域（content-pannel）

3. 搜索欄（search-wrapper ）

4. 遮罩層（ding-modal）

5. 對話框、彈出框（dialog、unpop-modal）

6. Tab

7. 提示語（tip-menu）

8. 音頻（audio-player）

9. 下拉菜單（dropdown）

10. 消息提示框（Toast）

11. 表情（emotion-container）

.....

unit.css

（3465-end ） 元件樣式，一般是一個不可再分的較爲小巧的個體，一般被重複用於各類模塊中！

例如：

1. 登陸Tab（login-tab）、登陸表單（login-form）、密碼增強（pwd-strength-panel）

2. 文件對話框（file-area ）

3. 羣組（ding-group-pannel）、羣組聯繫人（contact-group-pannel）

4. 好友請求（friend-request-pannel）

6. 組織列表（org-list-pannel）、詳情（org-detail-pannel）

7. 小應用列表（micro-app-list-pannel）

8. 我的資料卡（profile-card）

9. 沒有內容（nocontent）

10. 預覽文件（preview-file-modal ）

......

值得學習地方

1. 命名簡約而不失語義。

它的樣式的命名很清晰明瞭，特別是模塊、小元件部分，上面括號裏就是其樣式名。

2. 樣式劃分清晰，在該在的地方。

它按照 reset->base->common->module->unit，把代碼寫在該在的地方。有時某些開發人員可能沒把通用抽出來，而是在每一個模塊業務代碼寫，例如：把button樣式寫在業務代碼裏面，而它明顯是通用的。

因此，能往上提的樣式，就往上提，這樣利於複用。

js業務代碼分析

在js業務代碼裏，我發現了使用的構建工具是browserify，因而我決定將其目錄結構還原出來。

PS：怎麼還原能夠看我另外一篇文章【browserify壓縮合並源碼反編譯】。

目錄結構

頂級目錄：

directive：

filter：

module：

service：

因爲篇幅關係，就只看到二級目錄。另外因爲代碼是壓縮合並後，很差看邏輯，並且這樣翻別人源碼感受不大好，因此就不解析具體源碼。

值得學習地方

1. 目錄分類

前言裏面說了，框架影響了開發套路，因此屬於AngularJS的service、directive、 filter是確定存在的，module目錄放置每一個模塊的入口js，目錄看來是簡單合理的。

另外就是模塊（service、module）的細化程度，我之前的前端代碼分類從沒這麼細化，就變成了某些業務邏輯文件變得很長。

2. 單頁開發方式

單頁的模塊開發，使用browserify構建工具，頁面路由用AngularJS的router。

 

總結

js依賴庫部分裏面一些庫就很好用，這點之後能夠用上。

樣式部分着重命名和抽象（複用）。

js業務邏輯並無細看，我以爲學習別人前端源碼，目錄結構已經夠用了，畢竟項目的骨架搭好了，其餘的也就是添磚加瓦而已（雖然可能某些磚瓦很是好）。

PS：中秋節好無聊~~~

本文爲原創文章，轉載請保留原出處，方便溯源，若有錯誤地方，謝謝指正。

本文地址 ： http://www.cnblogs.com/lovesong/p/5875230.html