钉钉(工作联合)应用之前端源码赏析

顿时几乎天在兴下翻看了钉钉(工作联合)应用之前端源码,分析其目录结构、构建工具和框架下等,进行前端技术研究,分享自己的总成果。

PS:不清楚就下之没什么,因为总结下是前者通用的东西。AngularJS 1

PS:其采取则。

前言

自家研究的凡PC桌面版的钉钉应用,应用是由“chrome内核容器+
web页面”构成的,也即是桌面的杂使用(跟手机Hybrid应用的法则同),针对分析的吗是彼web页面部分。

率先她是一个单页面的使,主体框架是为此AngularJS,页面路由为是由AngularJS完成。由于框架是会着力着路之开发方式,所以其的目录划分会以AngularJS的模块进行。

自己以分析的片放到自己之Github上,主要是及时四独公文:https://github.com/codingforme/code-learn/tree/master/dingdingAngularJS 2

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/),这个库房非常正确,效果如下:

  1. others

再有以到外AngularJS拓展指令,
可于就查看:http://angular-ui.github.io/

PS:上面的只是简写,完整的好拘留自己另外一首和:【钉钉js依赖库学习】

css分析

翻钉钉的体制文件(压缩合并后)后,我当该样式内容可分为5大种(分文别类是为着支付尤其分明)。

1. reset.css | 重置样式

  1. base.css | 基础样式

  2. common.css | 通用样式

  3. module.css | 模块样式

  4. 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)

  1. 表情(emotion-container)

…..

unit.css

(3465-end ) 元件样式,通常是一个不可再分的较为精美的私房,通常给重新用于各种模块中!

例如:

1.
登录Tab(login-tab)、登录表单(login-form)、密码加强(pwd-strength-panel)

  1. 文本对话框(file-area )

3. 群组(ding-group-pannel)、群组联系人(contact-group-pannel)

  1. 知音请求(friend-request-pannel)

  2. 集体列表(org-list-pannel)、详情(org-detail-pannel)

  3. 稍加应用列表(micro-app-list-pannel)

  4. 个人资料卡(profile-card)

  5. 从没内容(nocontent)

  6. 预览文件(preview-file-modal )

……

值得学习地方

1. 命名简约而无去语义。

它的体裁的命名很清晰明了,特别是模块、小部件部分,上面括号里就是其样式名。

  1. 体划分清楚,在拖欠在的地方。

它仍
reset->base->common->module->unit,把代码写以该以的地方。有时某些开发人员可能没有将通用抽出来,而是以每个模块业务代码写,例如:把button样式写在事情代码里面,而它们不言而喻是通用的。

于是,能朝上提取的体,就朝着上提,这样有利于复用。

js业务代码分析

于js业务代码里,我发觉了采用的构建工具是browserify,于是自己说了算用那目录结构恢复出。

PS:怎么过来可以看本身别一样首文章【browserify压缩合并源码反编译】。

目结构

顶级目录:

AngularJS 3

directive:

AngularJS 4

filter:

AngularJS 5

module:

AngularJS 6

service:

AngularJS 7

AngularJS 8

AngularJS 9.png)由于篇幅关系,就只有视二级目录。另外由于代码是减合并后,不好看逻辑,而且这样翻译别人源码感觉不大好,所以便非解析具体源码。

值得学习地方

  1. 目分类

前言中说了,框架影响了付出套路,所以属于AngularJS的service、directive、
filter是大势所趋存在的,module目录放置每个模块的入口js,目录看来是简约合理之。

除此以外就是模块(service、module)的细化程度,我先的前端代码分类没有这么细化,就变成了好几事情逻辑文件变得稀丰富。

  1. 单页开发方式

单页的模块出,使用browserify构建工具,页面路由用AngularJS的router。

 

总结

js依赖库有内有些仓房就老好用,这点过后可以用上。

体制部分至关重要命名暨虚幻(复用)。

js业务逻辑并不曾细看,我觉着读人家前端源码,目录结构既够用了,毕竟项目之架子搭好了,其他的吧尽管是加砖加瓦而就(虽然可能某些砖瓦非常好)。

PS:中秋节好俗气~~~

本文也原本创文章AngularJS,转载请保留原来出处,方便溯源,如发错地方,谢谢指正。

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

相关文章