钉钉（⼯作协同）应⽤的前端源码
这⼏天在兴趣下翻看了钉钉（⼯作协同）应⽤的前端源码，分析其⽬录结构、构建⼯具及框架使⽤等，进⾏前端技术研究，分享我的总结成果。
PS：不知道这应⽤的没关系，因为总结出来是前端通⽤的东西。
PS：其应⽤样⼦。
前⾔
我研究的是PC桌⾯版的钉钉应⽤，应⽤是由“chrome内核容器+ web页⾯”构成的，也就是桌⾯的混合应⽤（跟⼿机Hybrid应⽤的原理⼀样），针对分析的也是其web页⾯部分。
⾸先它是⼀个单页⾯的应⽤，主体框架是⽤AngularJS，页⾯路由也是由AngularJS完成。由于框架是会主导着项⽬的开发⽅式，所以它的⽬录划分会以AngularJS的模块进⾏。
js依赖库分析
看别⼈⽤的依赖库的好处在于，你知道有什么可以⽤，什么可以借鉴。
PS：⼈最怕是不知道，⽽不是你不会。
1. jQuery
钉钉使⽤了1.9.1版本的jQuery，jQuery作为⼀个最为⼴泛使⽤库，已经不⽤说明它是什么了。
PS：Includes Sizzle.js
2. jQuery Hotkeys
jQuery插件，可⽤来监听键盘事件，⼏乎⽀持所有的组合键。
3. jQuery Caret
jQuery插件，处理⽂本框的插⼊位置。
4. jQuery atwho
jQuery插件，⾃动完成提⽰插件（autocomplete mentions），类似微博的@功能。
PS：基于Caret.js
5. jQuery tooltips
jQuery插件，⼀个简单的提⽰插件，风格挺舒服的。
PS：这只是formstone其中⼀个库，还有其他有意思的。
6. jQuery mousewheel
jQuery插件，⽤于添加跨浏览器的⿏标滚轮⽀持。
mousewheel事件的处理函数有⼀点⼩⼩的变化，它除了第⼀个参数event 外，还接收到第⼆个参数delta。通过参数delta可以获取⿏标滚轮的⽅向和速度。
7.  QR Code Generator
⼆维码⽣成器，纯前端⽣成。
PS：其他语⾔的该作者也有提供。
8. libphonenumber
Google的JavaScript库，⽤于解析，格式化和校验国际电话号码。
9. Underscore.js
⼀个JavaScript实⽤库，提供了⼀整套函数式编程的实⽤功能，但是没有扩展任何JavaScript内置对象。
PS：这个真是个不错的库。
10. AngularJS
AngularJS是⼀个框架（不是库），在我印象⾥最⼤的特点是双向数据绑定。
AngularJS拓展指令
1. angular-qrcode
An AngularJS directive to creates QR Codes using Kazuhiko Arase’s qrcode-generator library.
2. angular-ui/ui-select2
This directive allows you to enhance your select elements with behaviour from the select2 library.（这个指令已经过时。）
3. others
PS：上⾯的只是简写，完整的可以看我另外⼀篇⽂：【】
css分析
jquery是什么有什么作用
查看钉钉的样式⽂件（压缩合并后）后，我觉得其样式内容可以分为5⼤种（分⽂别类是为了开发更加清晰）。
1. reset.css | 重置样式
2. base.css | 基础样式
3. common.css | 通⽤样式
4. module.css | 模块样式
5. unit.css | 元件样式
reset.css
（0-49⾏）重置样式，消除默认样式和浏览器差异。
这个已经是约定俗成的，sass⼯具也有库可直接使⽤，或者在⽹上寻别⼈总结好的来⽤也可，例如：
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：怎么还原可以看我另⼀篇⽂章【】。
⽬录结构
顶级⽬录：
directive：
filter：
module：
service：
由于篇幅关系，就只看到⼆级⽬录。另外由于代码是压缩合并后，不好看逻辑，⽽且这样翻别⼈源码感觉不⼤好，所以就不解析具体源码。
值得学习地⽅
1. ⽬录分类
前⾔⾥⾯说了，框架影响了开发套路，所以属于AngularJS的service、directive、 filter是肯定存在的，module⽬录放置每个模块的⼊⼝js，⽬录看来是简单合理的。
另外就是模块（service、module）的细化程度，我以前的前端代码分类从没这么细化，就变成了某些业务逻辑⽂件变得很长。
2. 单页开发⽅式
单页的模块开发，使⽤browserify构建⼯具，页⾯路由⽤AngularJS的router。
总结
js依赖库部分⾥⾯⼀些库就很好⽤，这点以后可以⽤上。
样式部分着重命名和抽象（复⽤）。
js业务逻辑并没有细看，我觉得学习别⼈前端源码，⽬录结构已经够⽤了，毕竟项⽬的⾻架搭好了，其他的也就是添砖加⽡⽽已（虽然可能某些砖⽡⾮常好）。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。