Repository: jsfront/src
Branch: master
Commit: d8738bf8a0a5
Files: 11
Total size: 178.6 KB
Directory structure:
gitextract_15dzpybh/
├── README.md
├── book.md
├── call.md
├── css.md
├── hr.md
├── js.md
├── qq.md
├── react.md
├── reg.md
├── ui.md
└── vuejs.md
================================================
FILE CONTENTS
================================================
================================================
FILE: README.md
================================================
# src
这里边是一些常用的资源或代码片段，你不再是一个阅读者，更是一个项目参与者和内容创造者，欢迎fork之后pull。
- [QQ 群规](//github.com/jsfront/src/blob/master/qq.md)
- [CSS 常用代码](//github.com/jsfront/src/blob/master/css.md)
- [JS 常用代码](//github.com/jsfront/src/blob/master/js.md)
# 加群说明
[JS高级前端开发群加群说明](http://www.cnblogs.com/jikey/p/4426105.html)
================================================
FILE: book.md
================================================
### 以下是群福利书单，仅供参考
- [豆瓣 Javascript 搜索结果](https://www.douban.com/search?cat=1001&q=javascript)
- [京东 Javascript 搜索结果](http://search.jd.com/Search?keyword=javascript&enc=utf-8&wq=javascript)
- [知乎前端书籍搜索结果](https://www.zhihu.com/search?type=content&q=%E5%89%8D%E7%AB%AF%E4%B9%A6%E7%B1%8D)
# 1. Javascript
- [JavaScript高级程序设计（第4版）](https://item.jd.com/12958580.html)
- [JavaScript高级程序设计（第3版）](http://product.china-pub.com/199113)
- [JavaScript权威指南(第7版)](https://item.jd.com/10974436.html)
- [JavaScript权威指南(第6版)](http://product.china-pub.com/199271)
- [你不知道的JavaScript（上卷）](http://item.jd.com/11676671.html)
- [你不知道的JavaScript（中卷）](http://item.jd.com/10570721907.html)
- [你不知道的JavaScript（下卷）](https://item.jd.com/41559784502.html)
- [深入理解ES6](http://product.china-pub.com/6011498)
- [ES6标准入门（第3版）](https://item.jd.com/12172449.html)
- [JavaScript语言精粹（修订版）](http://product.china-pub.com/3683795)
- [锋利的jQuery（第2版）](http://item.jd.com/11019625.html)
- [JavaScript设计模式 - 大厂推荐](http://item.jd.com/11747684.html)
- [JavaScript设计模式与开发实践 - 腾讯前端架构师曾探力作](https://item.jd.com/11686375.html)
- [JavaScript面向对象精要](http://item.jd.com/11667775.html)
- [JavaScript面向对象编程指南（第2版）](http://item.jd.com/11642532.html)
- [编写高质量代码：改善JavaScript程序的188个建议](http://item.jd.com/11123174.html)
- [JavaScript忍者秘籍](http://product.china-pub.com/4879620)
- [SVG精髓（第2版）](http://item.jd.com/11783868.html)
- [学习JavaScript数据结构与算法](http://product.china-pub.com/3804284)
- [精通Javascript 第二版](https://item.jd.com/10607212456.html)
- [WebKit技术内幕](http://product.china-pub.com/4172218)
- [实战ES2015：深入现代JavaScript 应用开发](http://product.china-pub.com/5006875)
- [深入理解JavaScript特性](http://product.china-pub.com/8059620)
# 2. Nodejs
- [Node.js项目实践：构建可扩展的Web应用](http://item.jd.com/11688177.html)
- [了不起的Node.js 将JavaScript进行到底](http://item.jd.com/11358579.html)
- [深入浅出Node.js](http://item.jd.com/11355978.html)
- [MongoDB权威指南 第2版 [MongoDB： The Definitive Guide， Second Edition]](http://item.jd.com/11384782.html)
- [NoSQL数据库技术实战](http://item.jd.com/11584538.html)
- [狼书(卷1)：更了不起的Node js](https://item.jd.com/57800488298.html)
- [狼书 卷2 Node.js Web应用开发](https://item.jd.com/35501319170.html)
# 3. HTML5
- [HTML5移动Web开发实战](http://item.jd.com/11241807.html)
- [HTML5程序设计（第2版）](http://item.jd.com/10982275.html)
- [HTML5游戏开发](http://item.jd.com/1049266194.html)
- [HTML5 Canvas核心技术：图形、动画与游戏开发](http://item.jd.com/11231175.html)
- [HTML5+JavaScript动画基础](http://item.jd.com/11253207.html)
- [HTML5+JavaScript动画基础最经典的Canvas图书之一](http://item.jd.com/1056089175.html)
- [HTML5实验室 Canvas世界](http://item.jd.com/1027684138.html)
- [现货 移动Web手册（双色）](http://item.jd.com/1526419766.html)
- [HTML5 canvas开发详解(第2版)](http://item.jd.com/11513456.html)
# 4. Angularjs
- [精通AngularJS](http://item.jd.com/11568614.html)
- [AngularJS深度剖析与最佳实践](http://item.jd.com/11845736.html)
- [AngularJS权威教程](http://item.jd.com/11522200.html)
- [Web Component实战：探索PolymerJS、Mozilla Brick、Bosoni](http://item.jd.com/11796312.html)
- [迈向Angular 2：基于TypeScript的高性能SPA框架](http://product.china-pub.com/4974294)
- [揭秘Angular 2](http://product.china-pub.com/5054651)
# 5. PHP
- [PHP与MySQL程序设计（第4版）](http://item.jd.com/10701892.html)
- [Web开发技术丛书·深入理解PHP：高级技巧、面向对象与核心技术（原书第3版）](http://item.jd.com/11389753.html)
- [细说PHP（第2版）（含DVD光盘1张）](http://item.jd.com/11113844.html)
- [PHP和MySQL Web开发（原书第4版）](http://item.jd.com/10059047.html)
- [自己动手设计数据库](http://item.jd.com/11769793.html)
# 6. CSS
- 《CSS揭秘》 [京东地址](http://item.jd.com/11911279.html) [china-pub地址](http://product.china-pub.com/4942111)
- [图解CSS3：核心技术与案例实战](http://product.china-pub.com/63768)
- [CSS世界 - 张鑫旭](https://item.jd.com/12262251.html)
# 7. 其它
- [私以为可以提高程序员技术档次的书和博客](https://zhuanlan.zhihu.com/p/22151280)
- [软件设计重构](http://product.china-pub.com/4975707)
- [重构：改善既有代码的设计(第2版)](http://product.china-pub.com/4720077)
# 8. Vue
# 9. http 协议
- [httpS权威指南 在服务器和Web应用上部署SSL TLS和PKI](http://product.china-pub.com/4976155)
- [http权威指南(国内首本(http及其相关核心Web技术权威著作)](http://product.china-pub.com/3683063)
- [图解http](http://product.china-pub.com/3769819)
- [图解TCP/IP(第5版)](http://product.china-pub.com/3768070)
# 10. 算法
- [算法:第4版(Sedgewick之巨著，与高德纳TAOCP一脉相承)](http://product.china-pub.com/3684367)
- [算法导论(原书第3版)](http://product.china-pub.com/3021144)
- [数据结构与算法JavaScript描述](http://product.china-pub.com/3804002)
- [啊哈 算法](http://product.china-pub.com/3770208)
- [学习JavaScript数据结构与算法](http://product.china-pub.com/3804284)
- [漫画算法：小灰的算法之旅（全彩）](https://item.jd.com/12513751.html)
# 11. 高性能
- [高性能JavaScript](http://product.china-pub.com/4778083)
- [JavaScript性能优化：度量、监控与可视化](http://product.china-pub.com/3769687)
- [Web性能权威指南](http://product.china-pub.com/3769752)
- [Nginx高性能Web服务器详解](http://product.china-pub.com/62894)
# 12. React
- [React：引领未来的用户界面开发框架](http://item.jd.com/11688174.html)
- [React Native：用JavaScript开发移动应用](http://product.china-pub.com/4879807)
- [React 精髓](http://item.jd.com/11948386.html)
- [React Native开发指南](http://item.jd.com/11942017.html)
- [React Native跨平台移动应用开发](http://item.jd.com/11944670.html)
- [深入React技术栈](http://product.china-pub.com/5007398)
- [React状态管理与同构实战](https://item.jd.com/12403508.html)
# 13. Git, Github
- [GitHub实践](http://product.china-pub.com/5012829)
- [GitHub入门与实践](http://product.china-pub.com/4727673)
# 14. 微信小程序
- [小程序，巧应用：微信小程序开发实战](http://product.china-pub.com/5063953)
# 15. 面试
- [剑指Offer：名企面试官精讲典型编程题(纪念版)](http://product.china-pub.com/3770276)
- [技术之瞳：阿里巴巴技术笔试心得](http://product.china-pub.com/4998571)
# 16. Java
- [Java核心技术 卷Ⅰ 基础知识（原书第10版） ](http://product.china-pub.com/4980491)
- [Java核心技术 卷II 高级特性(原书第9版)](http://product.china-pub.com/3769475)
- [Effective Java中文版(第2版)(第12届Jolt震撼大奖获奖图书)(Java领域四大名著之一)](http://product.china-pub.com/195040)
- [Java编程思想(第4版)(第9届Jolt生产效率大奖、第13届Jolt震撼大奖获奖图书)(经典图书最新版本)](http://product.china-pub.com/34838)
- [数据结构与算法分析：Java语言描述（原书第3版）](http://product.china-pub.com/4927783)
================================================
FILE: call.md
================================================
# 前端联盟群Call资源汇总
标签（空格分隔）： group
---
## 群规
大部分为精确查询，排名不分先后顺序。
- call:area
每个群理论上配套微信群，满100人加入QQ群之后邀请加入。
- 北京前端交流群 578874693
- 上海前端交流群 426462717
- 深圳前端交流群 247687975
- 成都前端交流群 206731784
- 杭州前端交流群 199595055
- 西安前端交流群 369727205
- 武汉前端交流群 210232515
- 福建前端交流群 164254764
- 重庆前端交流群 581612664
- 南昌前端交流群 21774659
- 河北前端交流群 219696823
- 安徽前端交流群 613860249
- 山东前端交流群 613891006
- 海南前端交流群 100392631
- 河南前端交流群 240344448
- 天津前端交流群 484250610
- 吉林前端交流群 462114100
- 内蒙古前端交流群 493071141
- 湖南前端交流群 614589365
- 山西前端交流群 597295627
- 辽宁前端交流群 614536419
- 黑龙江前端交流群 592940556
- 广西前端交流群 596898474
- 新疆前端交流群 423924014
- 云南前端交流群 330628950
- 甘肃前端交流群 543388242
- 宁夏前端交流群 469624497
- 贵州前端交流群 416604172
- 苏州前端交流群 634410637
欢迎此地区的同学、即将前往此地区同学加入，氛围是一样的，都是禁止闲聊高质量。但同时又是地区群，可能有空会线下交流集会、以及工作机会、私单外包、等等有地方特色的一个交流群。欢迎加入。
地区群可能的定位是：以省会城市为中心，以周边城市为辅的地区性前端交流群。其它联盟群以线上交流技术为主，此群以开源项目为驱动，以线下交流为引导，推进地方前端行业的发展。远景：未来成为影响地区性的前端事务的交流平台，为以后回家乡发展的同学提供一个窗口和交流的平台，提前布局，安全回家。
----------
- call:job
- 北京前端求职内推群：279374742
- 上海前端求职内推群：467443327
- 深圳前端求职内推群：533701440
- 成都前端求职内推群：258468409
- 西安前端求职内推群：37948639
- 杭州前端求职内推群：222458130
- 南京前端求职内推群：475057024
- 广州前端求职内推群：175869166
位置有限，不要串群，只允许加一个群。
为了保证质量，本人精力有限，暂无其它城市内推群，为了让Hr能够参与，求职内推群禁止讨论交流技术。
微信群只有一个，比如：北京前端交流群，与求职内推群只有一个微信群：北京前端交流群，禁止低俗，违反和谐的话题，其他不限，即技术、求职为一体。
----------
- call:work
送给实习生或就近找工作的同学：
- http://www.cnblogs.com/jikey/p/4047639.html
- http://www.cnblogs.com/jikey/p/4086385.html
- http://www.cnblogs.com/jikey/p/4118088.html
- http://www.cnblogs.com/jikey/p/4102881.html
- http://www.cnblogs.com/jikey/p/4104940.html
- http://www.cnblogs.com/jikey/p/4280955.html
- http://www.cnblogs.com/jikey/p/4042309.html
----------
- call:blog
https://github.com/jikeytang/front-end-collect
----------
- call:newman
- https://www.zhihu.com/question/19862294
如何帮助前端新人入门和提高？
- https://www.zhihu.com/question/37176452
对即将入职前端工作的新人有哪些建议？
- https://www.zhihu.com/question/20250506
职场新人，入职第一天，要做些什么？面对不认识的同事，该怎么交流？
- https://www.zhihu.com/question/21096526
职场新人，师傅不怎么会带新人，不给你分配任何任务，我该怎么办？
- https://www.zhihu.com/question/31295730
对职场新人有什么好书推荐？
- https://www.zhihu.com/question/21291852
职场新人如何避免被上司、同事随意使唤？
- https://www.zhihu.com/question/19859548
如何做一个好的职场新人？
----------
- call:qa
群主在牛逼管理在厉害也代替不了你们学习，资料视频教程在多还需要坚持一点一点的看，我们只提供大家高质量交流的一个平台，真正的学习还是靠大家的努力，拼搏，坚持，以及对梦想执着的追求和不断对人生誓言的守护还有对目标强有力的执行力。平常我们几个管理或大神们都在上班，都是在为自己心中的一个梦想而努力或拼搏，大神们的抽出的时间或精力有限，所以在提问之前先学习如何提问，提问的智慧等等，没有人回答不要着急，等一等或到其它群试试。希望注意的是，我们群并没有专门以回答问题为已任的无私管理员或同学，都是友情帮忙。我们的原则和底线是在不担搁正常工作的前提下，有余力的前提下帮助到大家。
- http://t.cn/RxmfEl8
如何提问
- http://t.cn/RIu8Lol
如何有条理地提问
- http://t.cn/R5qGYwV
提问的智慧
----------
- call:demo
- 请提供能重现问题的url或资源demo文件包，必须是换个环境完整的能重现所说的bug
- 文字描述不清的bug，在提供第1条所述资源的前提下用截图说明两种状态：现状或期望的状态。
- 没有图片的代码建议发：
1. http://www.jsbin.com
2. http://runjs.cn/
3. http://dojo.hstar.org/
支持：Vue,Vue2,Angular模板
4. http://codepen.io/
支持Babel,Typescript,Coffeescript,Sass,Postcss,Pug,Slim,md
----------
- call:book
- https://github.com/jsfront/src/blob/master/book.md
群福利书单参考大全
----------
- call:editor
- http://www.bootcss.com/p/bootstrap-wysiwyg/
在线编辑器 bootstrap
- http://integ.github.io/BachEditor/
一个有情怀的编辑器。Bach's Editor
- http://ueditor.baidu.com/website/
百度 ueditor
- http://kindeditor.net/
经典的kindeditor
- https://github.com/mycolorway/simditor
tower用的编辑器
- https://github.com/summernote/summernote
summernote 编辑器
- http://neilj.github.io/Squire/
html5编辑器
- https://github.com/wangfupeng1988/wangEditor
wangEditor
- https://github.com/wangfupeng1988/wangEditor-mobile
wangEditor-mobile--移动端编辑器
- https://www.tinymce.com
国外的一款编辑器 - tinymce
- http://alex-d.github.io/Trumbowyg/
Trumbowyg - 轻量编辑器
----------
- call:md
- http://wowubuntu.com/markdown/
Markdown 语法说明 (简体中文版)
- https://github.com/LearnShare/Learning-Markdown/blob/master/README.md
markdown入门参考
- https://www.gitbook.com/
gitbook 国外的在线markdown可编辑成书
- https://www.zybuluo.com/mdeditor
mdeditor 一款国内的在线markdown编辑器
- https://stackedit.io
stackedit 国外的在线markdown编辑器，功能强大，同步云盘
- http://bh-lay.github.io/mditor/
mditor 一款轻量级的markdown编辑器
- https://github.com/lepture/editor
lepture-editor
- https://github.com/jbt/markdown-editor
markdown-editor
- https://github.com/pandao/editor.md
Markdown 在线编辑器
----------
- call:mdn
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
mozilla js参考
- http://developer.chrome.com/extensions/api_index.html
chrome开发中心
- https://developer.apple.com/library/safari/navigation
safari开发中心
- http://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94).aspx
microsoft js参考
- http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html
js秘密花园
- http://bonsaiden.github.io/JavaScript-Garden/zh/
js秘密花园
- http://www.w3help.org/
w3help
----------
- call:es6
- http://www.cnblogs.com/ziyunfei/
学习ES6新特性
- https://leanpub.com/exploring-es6/read
exploring-es6
- https://github.com/es6-org/exploring-es6
exploring-es6翻译
- https://github.com/lenville/understandinges6
- https://leanpub.com/understandinges6
读懂 es6
- http://es6.ruanyifeng.com/
阮一峰 es6入门
- http://javascript.ruanyifeng.com/
阮一峰 Javascript
- http://efe.baidu.com/blog/es6-develop-overview/?qq-pf-to=pcqq.group
使用ES6进行开发的思考
- http://www.cnblogs.com/Wayou/p/es6_new_features.html
ES6新特性概览
- http://www.infoq.com/cn/es6-in-depth/
深入浅出ES6
- http://www.csdn.net/article/2015-04-30/2824595-Modules-in-ES6
【ES6专栏】全面解析ECMAScript 6模块系统
- http://www.infoq.com/cn/author/%E5%88%98%E6%8C%AF%E6%B6%9B
深入浅出ES6
- http://segmentfault.com/a/1190000002920859
http://segmentfault.com/a/1190000003021261
http://segmentfault.com/a/1190000003097911
http://segmentfault.com/a/1190000003781467
http://segmentfault.com/a/1190000004100661
ES6指南系列
----------
- call:template
- http://garann.github.io/template-chooser/
template-chooser
- https://github.com/aui/artTemplate
artTemplate
- https://github.com/aui/tmodjs/blob/master/README.md
tomdjs
- http://juicer.name/docs/docs_zh_cn.html
淘宝模板juicer模板
- http://koen301.github.io/fxtpl/
Fxtpl v1.0 繁星前端模板引擎
- http://sentsin.com/layui/laytpl
laytpl
- https://github.com/mozilla/nunjucks
mozilla - nunjucks
- http://akdubya.github.io/dustjs/
dustjs
- http://ecomfe.github.io/etpl/
etpl
- http://twitter.github.io/hogan.js/
twitter-tpl
----------
- call:dialog
- https://github.com/aui/artDialog
artDialog 最新版
- http://aui.github.io/artDialog/doc/index.html
artDialog 文档
- https://code.google.com/p/artdialog/downloads/list
google code 下载地址
- http://sentsin.com/jquery/layer/
贤心弹出层
- https://github.com/bh-lay/UI
响应式用户交互组件库
- http://t4t5.github.io/sweetalert/
sweetalert-有css3动画弹出层
- http://bootboxjs.com/examples.html
- https://nakupanda.github.io/bootstrap3-dialog/
----------
- call:css
css群：578901836
- http://tympanus.net/codrops/css_reference/
CSS 语法参考
- http://isux.tencent.com/css3/index.html
CSS3动画手册
- http://caniuse.com/
css兼容性查询
- http://css3lib.alloyteam.com/
alloyteam - CSS3 UI 库
- http://isux.tencent.com/css3/tools.html
腾讯css3动画制作工具
- http://linxz.github.io/tianyizone/
志爷css小工具集合
- http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb
css3 js 移动大杂烩
- http://bouncejs.com/
bouncejs 触摸库
- http://fian.my.id/Waves/
css3 按钮动画
- http://daneden.github.io/animate.css/
animate.css
- http://www.alloyteam.com/2015/10/8536/
全局CSS的终结(狗带) [译]
- http://www.w3cplus.com/blog/tags/29.html
ANIMATION - 大漠
- http://www.haorooms.com/tools/css_selecter/
css选择器
----------
- call:react
react-1群：530415177
- https://github.com/enaqx/awesome-react
react海量资源
- http://www.react-china.org/
react.js 中文论坛
- https://facebook.github.io/react/index.html
react.js 官方网址
- https://facebook.github.io/react/docs/getting-started.html
react.js 官方文档
- https://zh-hans.reactjs.org/
React 中文文档
- http://material-ui.com/#/
react.js material UI
- http://touchstonejs.io/
react.js TouchstoneJS UI
- http://amazeui.org/react/
react.js amazeui UI
- http://ant.design/
ant.design
- http://huziketang.mangojuice.top/books/react/
React.js 小书
----------
- call:react-admin
react-1群：530415177
- https://github.com/huzzbuzz/bear-admin
一个简洁的 antd-react-admin 应用
- https://github.com/SuJunming/react-admin
React+AntD 后台管理系统解决方案
- https://github.com/MacKentoch/react-director-admin-template
ReactJS version of Director Responsive Admin Template Free
- https://github.com/creativetimofficial/light-bootstrap-dashboard-react
React version of Light Bootstrap Dashboard
- https://github.com/mrholek/CoreUI-React
CoreUI React is free React admin template based on Bootstrap 4
- https://github.com/yezihaohao/react-admin
react 后台管理系统解决方案
- https://github.com/nelsonkuang/ant-admin
基于 antd 的后台管理平台, 在react中玩转D3.js
- https://github.com/lanux/react-admin
基于antd、redux-observable、redux-thunk、react-router响应式SPA脚手架
- https://github.com/LANIF-UI/dva-boot-admin
react 16 + react-router 4 + dva 2 + antd 3 后台管理 脚手架
- https://juejin.im/post/5db64fa95188256edd7e73ae
快速打造 react 后台管理系统
----------
- call:react-ui
react-1群：530415177
- https://ant.design/docs/react/introduce-cn
Ant Design of React
- https://github.com/xitu/gold-miner/blob/master/TODO/10-best-reactjs-ui-frameworks-for-rapid-prototyping.md
快速构建原型最好用的 10 个 ReactJS UI 框架
----------
- call:react-awesome
- https://github.com/enaqx/awesome-react
- https://github.com/Pines-Cheng/awesome-react-cn
- https://github.com/brillout/awesome-react-components
- https://github.com/rehooks/awesome-react-hooks
----------
- call:fe-nav
- http://www.daqianduan.com/nav
- http://123.jser.us/
- http://www.zhihu.com/question/19951193
有哪些不错的前端开发博客
- http://www.zhihu.com/question/20246142
知乎上，前端开发领域有哪些值得推荐的问答
- http://www.zhihu.com/question/19565118
好的技术博客有哪些
- http://www.zhihu.com/question/22902084
国外，前端领域有什么出名的论坛或者社区
- https://github.com/JacksonTian/fks
前端知识结构
- http://www.awesomes.cn/
前端工具箱
----------
- call:vue
vue-1群：364912432
- [群内禁发](http://www.kancloud.cn/jikeytang/qq/81132)
- [Vuejs群资料](http://t.cn/Rb1aUQT)
- [官网](http://cn.vuejs.org/guide/)
- [论坛](http://forum.vuejs.org/)
- [新版群规](http://t.cn/RUdaGHn)
- http://i.youku.com/u/UMzQxOTE4MDE5Mg==
小凡哥Vuejs视频
- https://github.com/bhnddowinf/vuejs-learn
讲解 vue.js 实例
- http://t.cn/Ri90k28
Vue开源项目库
vue2.0相关文档
- http://vuefe.cn/
中文文档
- http://vuejs.org/guide/
官网原文文档
- http://router.vuejs.org/zh-cn/index.html
vue-router2.0中文文档
- http://vuex.vuejs.org/en/index.html
vuex2.0 英文文档
- https://github.com/bhnddowinf/vuejs2-learn
v2学习项目
- https://github.com/opendigg/awesome-github-vue
vue的组件以及demo全集
- https://github.com/vuejs/awesome-vue
vuejs 英文资料
- https://github.com/Pines-Cheng/awesome-vue-cn
vuejs 中文资料
----------
- call:vue-admin
vue-1群：364912432
- https://github.com/taylorchen709/vue-admin
- https://github.com/lanux/Vue-Admin
- https://github.com/zzmhot/vue-admin
- https://github.com/lifetea/vue-admin
- https://github.com/xufei/vue-admin
- https://github.com/Moearly/Vue-admin
- https://github.com/mgbq/nx-admin
- https://github.com/herozhou/vue-framework-wz
- https://github.com/PanJiaChen/vue-element-admin
- https://github.com/d2-projects/d2-admin
- https://github.com/topfullstack/adminify
- https://github.com/iview/iview-admin
- https://github.com/sendya/ant-design-pro-vue
- https://github.com/iczer/vue-antd-admin
- https://github.com/lin-xin/vue-manage-system
- https://admin.heyui.top/login
- https://pixinvent.com/demo/vuexy-vuejs-admin-dashboard-template/landing/
- https://github.com/chuzhixin/vue-admin-beautiful
- https://github.com/elunez/eladmin
- https://github.com/epicmaxco/vuestic-admin
- https://gitee.com/hooray/fantastic-admin/
- https://github.com/anncwb/vue-vben-admin
- https://gitee.com/wuyanshen/vue-admin
电商后台管理系统(前端项目)
- https://github.com/newbee-ltd/vue3-admin
Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 开发的后台管理系统
----------
- call:vue-ui
- PC端
- https://iviewui.com/
- https://element-cn.eleme.io/#/zh-CN
- https://vue.ant.design/docs/vue/introduce-cn/
- https://vuetifyjs.com/zh-Hans/
基于Material Design实现
- https://www.heyui.top/
一个妹子写的组件库
- 移动端
- https://youzan.github.io/vant/#/zh-CN/intro
有赞-vant
- https://didi.github.io/cube-ui/#/zh-CN/example
滴滴Web 移动端组件库cube-ui
- https://github.com/airyland/vux
vux
- https://github.com/aidenZou/vue-weui
针对 Vue 框架移植的 We UI 框架的适配
- https://github.com/tianyong90/we-vue
使用 Vue2.x + weui1.x 开发的组件
- https://mand-mobile.github.io/2x-doc/#/zh-CN/docs/introduce
面向金融场景的Vue移动端UI组件库
- https://nutui.jd.com/#/intro
京东风格的轻量级移动端Vue组件库
----------
- call:vue-h5
- https://jaweii.github.io/Vue-Layout/dist/#/
Vue-Layout - 可视化布局
- https://vuejsexamples.com/tag/layout/
layout合集
- https://github.com/ly525/luban-h5
鲁班H5- 类似易企秀的H5制作、建站工具
- https://github.com/ymm-tech/gods-pen
码良快速制作H5页面
- https://github.com/Ricbet/panel-magic
Panel-Magic 是基于 Angular8 实现的在线可视化编辑应用
- https://github.com/fireyy/vue-page-designer
Vue component for drag-and-drop to design and build mobile website
- https://github.com/page-pipepline/pipeline-editor
页面可视化搭建框架的web编辑器
- https://github.com/fodelf/esaymarket
拖拽生成落地页，app，小程序实现测试开发运维部署客服一体化
- https://github.com/JakHuang/form-generator
Element UI表单设计及代码生成器
- https://github.com/Kchengz/k-form-design
基于vue Ant-Design 的表单设计器，快速开发
- http://www.form-create.com/
轻松搞定 form 表单，让你不再为表单而烦恼
- https://zhuanlan.zhihu.com/p/256976325
开源H5可视化编辑器Dooring之 动态表单设计器实现
- https://github.com/zhangyuhuihh/vue-page-produce
仿 dataV 的可视化编辑器的骨架模板
- https://github.com/huangwei9527/quark-h5
基于vue2 + koa2的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。类似易企秀、百度H5等H5制作、建站工具
- https://github.com/wangyuan389/mall-cook
低代码平台，H5商城可视化搭建平台
- https://vform666.com/
Variant Form - 可视化低代码表单
----------
- call:vue3-h5
- https://giantgo.github.io/giantgo-render/guide/
基于 vue3+vite2+element-plus 实现的表单设计器
----------
- call:vue-flow
- https://gitee.com/yjblogs/VFD
VUE FLOW DESIGN流程设计器
- https://github.com/didi/LogicFlow
LogicFlow 是一款解决流程可视化的前端框架
- https://github.com/joyceworks/flowchart-vue
Vue.js 流程图&流程图设计器
- https://github.com/caohuatao/vue-super-flow
vue-super-flow Vue 流程图
- https://github.com/happydele/vue-topology
基于le5le-topology方案的核心功能，抽离实现工作流程图功能
----------
- call:react-h5
- https://github.com/lzuntalented/lz-h5-edit
随心秀(react版h5微场景编辑器)，一款类似【易企秀】【兔展】的H5微场景编辑器
- https://github.com/rxwater/rxeditor
HTML Visual Editor, based in Bootstrap. 基于Bootstrap实现的，HTML可视化编辑工具
- https://github.com/MrXujiang/h5-Dooring
(H5编辑器)H5-Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案
- https://github.com/JDFED/drip-form
基于React和JSONSchema的动态表单解决方案
- https://github.com/imcuttle/mometa
Beta 面向研发的低代码元编程，代码可视编辑，辅助编码工具
- https://juejin.cn/post/7063475380199358478
自研开源CMS可视化编辑器
- call:vue-drag
- https://github.com/hilongjw/vue-dragging
A sortable list directive with Vue
- https://david-desmaisons.github.io/draggable-example/
draggable
- https://github.com/Jexordexan/vue-slicksort
vue-slicksort
- https://github.com/kirillmurashov/vue-drag-resize
vue拖拽缩放组件
- https://github.com/euvl/vue-js-grid
Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering
- https://github.com/jbaysolutions/vue-grid-layout
A draggable and resizable grid layout, for Vue.js.
- https://github.com/xiongcaihu/vue-power-drag
基于vue2.x的拖动缩放组件，可嵌套子组件
- https://mauricius.github.io/vue-draggable-resizable/
vue-draggable-resizable
----------
- call:vue-auth
- https://juejin.im/post/5d22bac55188255d7439ad5a
Vue 实现前端权限控制
- https://juejin.im/post/5b5bfd5b6fb9a04fdd7d687a
vue权限路由实现方式总结
- https://www.zhihu.com/question/58991978
Vue 后台管理控制用户权限的解决方案
----------
- call:vue-shop
- https://vuejsexamples.com/tag/shopping/
shopping集合
- https://github.com/nemo-tree/vue2-shop
基于vue全家桶的移动端 电商商城
- https://github.com/andylei18/vue-shopping
基于Vue模仿蘑菇街的单页应用
- https://github.com/sdras/sample-vue-shop
Vue Sample Shop
- https://github.com/Mynameisfwk/vivo-shop
基于vue2.0实现的vivo移动端商城
- https://github.com/beautifulBoys/vue-XiaoMi-Shop
这是一个高仿小米商城（手机版）的Vue项目
- https://github.com/JsAaron/vue2-legao-shops
vue2 商铺单+手机端
- https://github.com/chengzhx76/weixin-shop-spring-cloud
微信商城SpringCloud版本 - 前端vue-shop
- https://github.com/BosNaufal/vue-mini-shop
vue-mini-shop
----------
- call:vue-doc
- https://cn.vuejs.org/v2/guide/installation.html
- https://vuex.vuejs.org/zh/
- https://router.vuejs.org/zh/guide/
- http://es6.ruanyifeng.com/
- https://github.com/axios/axios
- https://www.kancloud.cn/yunye/axios/234845
- https://cli.vuejs.org/zh/guide/installation.html
axios中文说明
- https://ssr.vuejs.org/zh/
Vue.js 服务器端渲染指南
- https://docschina.org/
印记中文
- https://zh.nuxtjs.org/guide/installation
----------
- call:vue-music
- https://github.com/IFmiss/vue-music
- https://github.com/lxyisme/vue-musicApp
- https://github.com/bxm0927/vue-music-webapp
- https://github.com/k-water/vue-music
- https://zq99299.gitbooks.io/vue-note/content/chapter/m/play.html
- https://github.com/SimonZhangITer/VueDemo_Sell_Eleme
- https://github.com/bailicangdu/vue2-elm
- https://github.com/maomao1996/Vue-mmPlayer
- https://github.com/javaSwing/NeteaseCloudWebApp
----------
- call:vue-table
- https://vuejsexamples.com/tag/table/
vue table集合
- https://github.com/huangshuwei/vue-easytable
vue table 组件，支持 单元格合并、单元格编辑、多表头固定、多列固定、列拖动
- https://github.com/xaksis/vue-good-table
一款功能强大易用的表格
- https://www.vuetable.com
数据表格
----------
- call:vue-date
- https://github.com/hilongjw/vue-datepicker
- https://github.com/jinzhe/vue-calendar
- https://github.com/GeoffZhu/vue-event-calendar
- https://github.com/vuejsdevelopers/vuejs-calendar
- https://github.com/Wanderxx/vue-fullcalendar
- https://github.com/icai/vue2-calendar
- https://github.com/zwhGithub/vue-calendar
- https://github.com/richardtallent/vue-simple-calendar
- https://github.com/IBM/vue-a11y-calendar
----------
- call:vue-tree
- https://juejin.im/post/5a265ed551882531ba10cce8
基于Vue的组织架构树组件
- https://juejin.im/post/6892921669149523975
一个基于Vue的组织架构树组件
----------
- call:flutter
Hybrid App 群号：498173484
- https://github.com/flutter
flutter
- https://github.com/Solido/awesome-flutter
awesome-flutter
- https://flutterchina.club
Flutter中文网
- https://github.com/yuhanle/awesome-flutter-app
Flutter 开发资源汇总
- https://github.com/crazycodeboy/awesome-flutter-cn
Flutter学习资源
- https://github.com/alibaba/flutter-go
flutter 开发者帮助 APP
- https://github.com/iampawan/FlutterExampleApps
FlutterExampleApps
----------
- call:angular
Angular-1群 238251402
- https://github.com/jsfront/angular2.0-study
- https://github.com/kittencup/angular2-learning-cn
Angular 2 中文资料汇总(文章，视频，教程);
- https://github.com/gianarb/awesome-angularjs
- https://github.com/AngularClass/awesome-angular2
Angular 资料汇总
----------
- call:angular-admin
Angular-1群 238251402
- https://ng-alain-doc.surge.sh/
一套基于 Ng-zorro-antd【ANT DESIGN】 的企业后台模板
- https://www.erupt.xyz/
Erupt Framework 使用 注解 快速开发管理后台
- https://github.com/ZRenu/ng-deerway
鹿途后台管理系统
- https://github.com/yixiangling/abp-ng-alain
基于ng-alain脚手架，增加对ABP服务端支持（ABP免费模板）
----------
- call:mac
- https://github.com/jaywcjlove/awesome-mac/blob/master/README-zh.md
Awesome Mac
- https://github.com/iCHAIT/awesome-macOS
awesome-macOS
- https://github.com/Louiszhai/tool
开发效率提升：Mac生产力工具链推荐
----------
- call:windows
- https://github.com/Awesome-Windows/Awesome
----------
- call:react
react-1群：530415177
- https://github.com/enaqx/awesome-react
react海量资源
- http://www.react-china.org/
react.js 中文论坛
- https://facebook.github.io/react/index.html
react.js 官方网址
- https://facebook.github.io/react/docs/getting-started.html
react.js 官方文档
- https://zh-hans.reactjs.org/
React 中文文档
- http://material-ui.com/#/
react.js material UI
- http://touchstonejs.io/
react.js TouchstoneJS UI
- http://amazeui.org/react/
react.js amazeui UI
- http://ant.design/
ant.design
- http://huziketang.mangojuice.top/books/react/
React.js 小书
----------
- call:react-awesome
- https://github.com/enaqx/awesome-react
- https://github.com/Pines-Cheng/awesome-react-cn
- https://github.com/brillout/awesome-react-components
- https://github.com/rehooks/awesome-react-hooks
----------
- call:webpack
- https://webpack.js.org
webpack官网
- https://doc.webpack-china.org/concepts/
webpack中文文档
- https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/
Webpack 2 入门教程
- https://github.com/kraaas/webpack-tutorial-collection
webpack 教程资源收集
- https://segmentfault.com/a/1190000005022872
webpack 教科书式入门教程
----------
- call:interview
- https://awesome-interview.github.io/Awesome-Interview/
Awesome Interview
- https://github.com/MaximAbramchuck/awesome-interview-questions
awesome-interview-questions
- https://github.com/ityouknow/awesome-interviews
awesome-interviews
----------
- call:java-interview
- https://github.com/Snailclimb/JavaGuide
【Java学习+面试指南】 一份涵盖大部分Java程序员所需要掌握的核心知识
- https://segmentfault.com/a/1190000016172470
史上最全阿里 Java 面试题总结
- https://juejin.im/entry/5af2557c6fb9a07aa83eb59c
2018年最新Java面试题及答案整理
- https://juejin.im/post/5a99544ef265da23a334ab6c
超详细的Java面试题总结（三）之Java集合篇常见问题
----------
- call:js-interview
- https://github.com/rohan-paul/Awesome-JavaScript-Interviews
- https://github.com/nieyafei/front-end-interview-js
前端面试interview的Js题目收集
- https://github.com/jimuyouyou/node-interview-questions
Node.js面试题，侧重后端应用与对Node核心的理解
- https://github.com/paddingme/Front-end-Web-Development-Interview-Question
前端开发面试题大收集
- https://github.com/huruji/FE-Interview
前端面试题大合集
- https://github.com/CyC2018/CS-Notes
技术面试必备基础知识
- https://github.com/doocs/coding-interview
代码面试题集
- https://zhuanlan.zhihu.com/p/57302141
大厂前端高频面试问题与答案精选
- https://juejin.im/post/5c8f30606fb9a070ef60996d
寒冬中的前端社招面试
- https://zhuanlan.zhihu.com/p/53703176
Vue问得最多的面试题
- https://juejin.im/post/5d13436f6fb9a07eca698ba0
你要的Vue面试题都在这里
- https://juejin.im/post/5d153267e51d4510624f9809
vue 220+个知识点（面试题）为你保驾护航
- https://juejin.im/entry/5d06ce32e51d4510a50335bd
[译] 送你 43 道 JavaScript 面试题
- https://juejin.im/post/5d1d52aff265da1bb2774de0
面试官到底想看什么样的简历？
- https://github.com/Advanced-Frontend/Daily-Interview-Question/blob/master/datum/summary.md
前端面试题及答案汇总
- https://github.com/pwstrick/daily
一份搜集的前端面试题目清单+面试相关的文章
- https://segmentfault.com/a/1190000020181662
Vue面试中，经常会被问到的面试题/知识点(2019改进版)
- https://juejin.im/post/5d7596055188253e4b2f0c29
36 个JS 面试题为你助力金九银十(面试必读)
- https://github.com/0voice/interview_internal_reference
2019年最新总结，阿里，腾讯，百度，美团，头条等技术面试题目，以及答案，专家出题人分析汇总
- https://juejin.im/entry/5db1c186518825646b111a4d
2019年最新经典web前端面试题超全面细节
- https://q.shanyue.tech/fe/
前端面试题小记
- https://q.shanyue.tech/interview.html
前端大厂面经大全集
- https://q.shanyue.tech/base/
计算机基础面试题小计
- https://fecommunity.github.io/front-end-interview/
前端工程师面试宝典
- https://juejin.im/post/6893856813247266823
前端面试题总结
- https://juejin.cn/post/6844904113302568973
艺术喵 2 年前端面试心路历程（字节跳动、YY、虎牙、BIGO）
- https://juejin.cn/post/6930897845369356295
化身面试官出30+Vue面试题，超级干货（附答案）
- https://github.com/Advanced-Frontend/Daily-Interview-Question
[大厂面试题](https://github.com/Advanced-Frontend/Daily-Interview-Question)
- https://bitable.feishu.cn/app8Ok6k9qafpMkgyRbfgxeEnet
[前端年后面试真题，会80%直接进大厂](https://bitable.feishu.cn/app8Ok6k9qafpMkgyRbfgxeEnet)
- https://juejin.cn/post/7036581158670303240
卑微前端菜鸡面经
----------
- call:js-demo
- https://www.zhihu.com/question/64898551
作为程序员，你有哪些正在做的个人项目？
- https://www.zhihu.com/question/25117994
用 JavaScript 写个什么有意思的小东西？
- http://demo.aijc.net/#all
demo页
- https://github.com/FairyEver/study-javascript
- https://github.com/sunhaoxiang/js-practice
- https://github.com/MrRetro/Demo
js的小练习
- https://miaov.com/index.php/example/exampleList
学员作品
- https://www.kancloud.cn/jikeytang/qq/81141
个人作品
扩展了解：
- http://www.cnblogs.com/tk091/p/3421571.html
一万个小时训练
- http://gold.xitu.io/post/58282fe0da2f600056dbdc58
前端的10000小时
- https://baike.baidu.com/item/%E7%95%AA%E8%8C%84%E5%B7%A5%E4%BD%9C%E6%B3%95
番茄工作法
- https://item.jd.com/11569295.html
高效能人士的七个习惯（25周年纪念版）
----------
- call:wxapp-shop
- https://github.com/linlinjava/litemall
Spring Boot后端 + Vue + 微信小程序小商城
----------
- call:java
JAVA群：145381037
- http://www.oracle.com/technetwork/cn/java/javase/documentation/api-jsp-136079-zhs.html
官网手册
- https://github.com/akullpp/awesome-java
- https://github.com/jobbole/awesome-java-cn
- http://www.cnblogs.com/best/p/5876559.html
Java资源大全
----------
- call:php
PHP群：82254462
- http://php.net/manual/zh/index.php
官网手册
- https://github.com/jobbole/awesome-php-cn
- https://github.com/ziadoz/awesome-php
- http://www.cnblogs.com/taletao/p/4212916.html
PHP资源大全
----------
- call:python
python交流群 130705066
- https://github.com/jobbole/awesome-python-cn
Python 资源大全中文版
- https://github.com/vinta/awesome-python
Awesome Python
----------
- call:spring
- https://github.com/spring-cloud-samples
- https://github.com/ityouknow/spring-cloud-examples
Spring Cloud 学习案例，服务发现、服务治理、链路追踪、服务监控等
- http://www.ityouknow.com/springboot/2015/12/30/springboot-collect.html
spring开源项目
----------
- call:weekly
- https://www.kancloud.cn/jsfront/month/82796
前端联盟群月报
- https://github.com/aliyunfe/weekly
阿里云前端技术周刊
- https://juejin.im/user/57a48b632e958a006691b946
D2开源组
- https://weekly.75team.com/
奇舞周刊
- https://fex.baidu.com/weekly/
百度技术周刊
- https://github.com/ruanyf/weekly
阮一峰的科技爱好者周刊
- https://frontend-weekly.com/
tower1229 的前端周刊
其它
- https://dev.to
- https://javascriptweekly.com
- https://frontendfoc.us
- https://webtoolsweekly.com
- https://react.statuscode.com
- http://www.angular-weekly.com
- https://nodeweekly.com
----------
- call:health
- https://www.zhihu.com/question/21227046
有氧运动和无氧运动有哪些区别？
- http://www.iqiyi.com/a_19rrha9iv1.html
FitTime 基础体能训练系列
- http://www.iqiyi.com/a_19rrha3fut.html
解密健身器械
- https://www.zhihu.com/question/20425675
健身房中各种器械的正确使用方法是怎样的？
----------
- call:ts
- https://www.typescriptlang.org
TypeScript
- https://www.tslang.cn
中文网
- https://github.com/xcatliu/typescript-tutorial
TypeScript 入门教程
- https://github.com/semlinker/awesome-typescript
- https://github.com/dzharii/awesome-typescript
- https://github.com/brookshi/awesome-typescript-projects
- https://jkchao.github.io/typescript-book-chinese/
深入理解 TypeScript
----------
- call:api
- https://github.com/marktony/Awesome_API
api集合网站
- https://github.com/rccoder/blog/issues/22
前端打造的mac os
- https://sebastianblade.com/browser-side-image-compress-and-upload/
在浏览器上打造的上传图片
- https://github.com/fangzesheng/free-api
收集免费的接口服务,做一个api的搬运工
----------
- call:composer
- https://getcomposer.org/
官网
- https://www.kancloud.cn/thinkphp/composer/35668
composer中文文档
- composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/
更改镜像
----------
- call:mock
- http://mockjs.com/
生成随机数据，拦截 Ajax 请求
- https://www.easy-mock.com
伪造数据，我们更高效
- http://myjson.com/
A simple JSON store
- http://apizza.cc
极客专属的接口协作管理工具
- https://swagger.io
一款让你更好的书写API文档的框架
- https://www.eolinker.com/
新一代API管理 & 自动化测试平台
----------
- call:js-effect
- https://www.awesomes.cn/
- http://www.lanrenzhijia.com/
- http://www.jq22.com/
- http://www.htmleaf.com/
- https://www.oschina.net/project/tag/273/jquery
----------
- call:bootstrap-admin
- https://adminlte.io/themes/AdminLTE/index2.html
AdminLTE
- https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/
- https://athemes.com/collections/free-bootstrap-admin-templates/
- https://www.creative-tim.com/bootstrap-themes/admin-dashboard
- http://bootstrapzero.com
- https://wrapbootstrap.com/
bootstrap主题集合网站
----------
- call:layui-admin
- https://www.layui.com/admin/
layuiAdmin 后台管理模板
- https://github.com/weberandphper/Layui-admin
一个现成的 Layui+Vue的后台系统模板，开箱即用
- https://learnku.com/articles/32082
layuimini，一款基于 layui 华丽免费的 admin 管理后台模板
- http://x.xuebingsi.com/
X-admin基于layui的轻量级前端后台管理框架
----------
- call:laravel-admin
- https://segmentfault.com/a/1190000020306998
laravel-layui-admin : 支持 Laravel6.0 的 RBAC 后台系统
- https://gitee.com/jqhph/dcat-admin
Dcat Admin是一个基于laravel-admin二次开发而成的后台系统构建工具
- https://laravel-admin.org/
在十分钟内构建一个功能齐全的管理后台
----------
- call:vant-demo
- https://github.com/qiuChengleiy/shop-vue
vant( UI ) 移动端商城 APP项目
- https://github.com/noobzzzz/vantmbshop
基于vant的手机端商城
- https://github.com/sunnie1992/vant-shop-demo
商城常用的组件开发
- https://github.com/qianzhaoy/vant--mobile-mall
基于有赞 vant 组件库的移动商城
- https://github.com/pwx123/vue-vant-store
基于vue，vantUI的商城demo
- https://github.com/Geek-James/ddBuy
Vue2.x 全家桶+Vant 搭建大型单页面电商项目
----------
- call:wuhan
武汉前端交流群 210232515
- https://wh.uranplus.com/
加油湖北--疫区医院捐赠平台
- https://wuhan2020.github.io/
Wuhan2020 社区
- https://onwh.51rry.com/
E起支援疫情物资供需平台
- https://cfh.firesbox.com/
新冠疫情物资互助
- http://rescue.sitiits.com:9966/visur/#/
新冠肺炎物资公益平台
- https://gitee.com/dcloud/xinguan2020
抗疫相关系统
----------
- call:ebook
- https://www.jiumodiary.com/
- https://sobooks.cc/
- https://www.owllook.net/
- https://www.bandubook.com/
- http://dianzishu.renrensousuo.com/
- http://www.zoudupai.com/
- https://sou-yun.cn/eBookIndex.aspx
- https://b-ok.org/
- http://gen.lib.rus.ec/
- https://epubw.com/
- https://www.enjing.com/
- https://5kindle.com/
- https://www.d4j.cn/
----------
- call:to-m
- https://nervjs.github.io/taro/docs/README.html
Taro 遵循 React 语法规范的 多端开发 解决方案
- https://github.com/NervJS/awesome-taro
- https://uniapp.dcloud.io
Vue.js 开发跨平台应用的前端框架
- https://github.com/aben1188/awesome-uni-app
- https://tencent.github.io/wepy/
让小程序支持组件化开发的框架
- https://max-team.github.io/Mars/
Vue 驱动的多端开发框架
- https://github.com/kaola-fed/megalo
基于 Vue 的小程序开发框架
----------
- call:cut
- https://github.com/xiangpaopao/blog/issues/2
前端技能之切图
- http://www.imooc.com/learn/506
前端工程师必备的PS技能——切图篇
- http://zh.snipaste.com/
截图 + 贴图
- http://note.youdao.com/share/?id=4c4ac226e98a7343c188b608122fc98f&type=note
- http://www.cutterman.cn/
切图神器
- https://blog.jimdono.com/qian-duan-qie-tu-shen-qi-avocode/
前端切图神器avocode
- http://lanhuapp.com
蓝湖一款产品文档和设计图的共享平台
----------
- call:go
GO技术交流群 105545914
- https://github.com/yinggaozhen/awesome-go-cn/blob/master/README.md
Awesome Go
- https://github.com/jobbole/awesome-go-cn
Go 资源大全中文版
- https://studygolang.com/
go语言中文网
- https://www.runoob.com/go/go-environment.html
go 菜鸟教程
- https://xueyuanjun.com/post/19709
go入门教程
- https://github.com/qyuhen/book
学习笔记
- https://github.com/zxysilent/books
pdf分享
- https://github.com/Kensuke-Hinata/statistic
电子书
- https://learnku.com/go/docs
Go社区文档
----------
- call:go-admin
- https://github.com/go-admin-team/go-admin
基于Gin + Vue + Element UI的前后端分离权限管理系统脚手架
----------
- call:ui
UI设计么么哒 - 设计交流群 321173051
设计导航
- http://hao.uisdc.com/
- http://so.uehtml.com/
- http://wz.ccdol.com/
- https://admire.so/
================================================
FILE: css.md
================================================
### 以下是常用的代码收集，没有任何技术含量，只是填坑的积累。转载请注明出处，谢谢。
#### 1. css 2.x
- 文字换行
```css
/*强制不换行*/
white-space:nowrap;
/*自动换行*/
word-wrap: break-word;
word-break: normal;
/*强制英文单词断行*/
word-break:break-all;
```
- 两端对齐
```css
text-align:justify;text-justify:inter-ideogra
```
- [去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框](http://www.cnblogs.com/niao/archive/2012/09/07/2674511.html)
```css
input,button,select,textarea{ outline:none;}
textarea{ resize:none;}
```
- [去掉chrome记住密码后自动填充表单的黄色背景](http://www.tuicool.com/articles/EZ777n )
- ie6: position:fixed
```css
.fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0; }
* html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
*html{background-image:url(about:blank);background-attachment:fixed;}
```
- clearfix
```css
.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix{display:block;}
* html .clearfix{height:1%;}
.clearfix{*zoom: 1;}
.clearfix:after{clear:both;display:table;content:"";}
.clearfix{overflow:hidden;_zoom:1;}
```
[http://www.daqianduan.com/3606.html](http://www.daqianduan.com/3606.html)
- seperate-table
```css
.tab{border-collapse:separate;border:1px solid #e0e0e0;}
.tab th,.tab td{padding:3px;font-size:12px;background:#f5f9fb;border:1px solid;border-color:#fff #deedf6 #deedf6 #fff;}
.tab th{background:#edf4f0;}
.tab tr.even td{background:#fff;}
```
```html
```
- min-height: 最小高度兼容代码
```css
.minheight500{min-height:500px;height:auto !important;height:500px;overflow:visible;}
```
- 鼠标不允许点击
```css
cursor:not-allowed;
```
- mac font: osx平台字体优化
```css
font-family:"Hiragino Sans GB","Hiragino Sans GB W3",'微软雅黑';
```
- 文字过多后显示省略号
```css
.ellipsis,.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
```
#### 2. css 3
- title 换行
```html
```
- 关闭 x 符号
```html
×
```
- 投影
```css
.b{box-shadow:inset 1px -1px 0 #f1f1f1;text-shadow:1px 1px 0px #630;}
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000',endColorstr='#99000000');background:rgba(0,0,0,.6);
background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#50000000',endColorstr='#50000000')\9;
```
- [search占位](http://www.qianduan.net/search-box-style-custom-webkit.html)
```css
::-webkit-input-placeholder {}
::-moz-input-placeholder {}
input:focus::-webkit-input-placeholder { color: transparent; }
-webkit-appearance:none; google边框去除
input[type="search"]{-webkit-appearance:textfield;} // 去除chrome默认样式
http://i.wanz.im/2011/02/04/remove_border_from_input_type_search/
http://blog.csdn.net/do_it__/article/details/6789699
line-height: normal; /* for non-ie */
line-height: 22px\9; /* for ie */
```
- [全部浏览器的兼容代码生成](http://www.colorzilla.com/gradient-editor/ )
[CSS 实现 textArea 的 placeholder 换行](http://segmentfault.com/a/1190000000362621)
- 阻止默认事件
```css
pointer-events:none;
```
- [去掉输入框聚焦时候的白色背景](http://ntesmailfetc.blog.163.com/blog/static/20628706120139184457401/)
```css
-webkit-user-modify: read-write-plaintext-only;
```
- [input:focus时input不随软键盘升起而抬高的情况](http://www.cnblogs.com/hongru/archive/2013/02/06/2902938.html)
```css
:focus{-webkit-tap-highlight-color:rgba(255, 255, 255, 0);
-webkit-user-modify:read-write-plaintext-only;}
```
- 变灰 gray
```css
html{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
```
- firefox 阻止选中
```css
-moz-user-focus:ignore;-moz-user-input:disabled;-moz-user-select:none;
```
- 箭头
```css
display:block;border:solid transparent;line-height: 0;width:0; height:0;border-top:solid #0288ce;border-width:8px 6px 0 6px;
border-style:solid; border-width:7px; border-color:transparent transparent transparent #ff7020;
position:absolute;top: 0;left: 0;border-width:20px;border-style:solid;border-color:#d1ddde transparent transparent #d1ddde;
```
ie6 bug测试，把border-style设为dashed.
- 取消textarea右下角可拖动手柄
```css
resize:none
```
- 取消chrome form表单的聚焦边框
```css
input,button,select,textarea{outline:none}
textarea{resize:none}
```
- 取消a链接的黄色边框
```css
a{-webkit-tap-highlight-color:rgba(0,0,0,0);}
```
- 取消input,button焦点或点击时蓝色边框
```css
input{outline:none;}
```
- webkit 水平居中
```css
display:-webkit-box;-webkit-box-pack:center; -webkit-box-align: center;
position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);
```
- 取消chrome 搜索x提示
```css
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
display: none;
}
```
- [chrome取消默认黄色背景](http://stackoverflow.com/questions/2338102/override-browser-form-filling-and-input-highlighting-with-html-css)
```css
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
autocomplete="off"
```
- 手机版本网页a标记虚线框问题
```css
a:focus {outline:none;-moz-outline:none;}
```
- 焦点去除背景
```css
-webkit-tap-highlight-color:rgba(255, 255, 255, 0);
-webkit-tap-highlight-color:transparent; // i.e. Nexus5/Chrome and Kindle Fire HD 7''
```
- placeholder占位符颜色自定义
```css
input:-moz-placeholder {color: #369;}
::-webkit-input-placeholder {color:#369;}
```
- [IOS 禁用高亮](http://hi.barretlee.com/2014/03/31/tap-highlight-in-webview/)
```css
-webkit-tap-highlight-color:rgba(255,0,0,0.5);-webkit-tap-highlight-color:transparent; /* For some Androids */
```
- IOS iframe 滚动 [滚动回弹特效](http://www.cnblogs.com/flash3d/archive/2013/09/28/3343877.html)
```css
-webkit-overflow-scrolling:touch;overflow-y:scroll;
```
- [禁止选中文本](http://www.qianduan.net/introduce-user-select/)
```css
-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
```
- [模糊(毛玻璃)效果1](http://www.zhangxinxu.com/wordpress/2013/11/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE%E7%89%87%E8%BD%AC%E6%8D%A2%E6%88%90%E6%A8%A1%E7%B3%8A%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C/)
- [模糊(毛玻璃)效果2](http://mao.li/css3-blur-filter-pratice/)
- [模糊(毛玻璃)逼真效果](http://codepen.io/ariona/pen/geFIK)
```css
.blur {
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
```
```html
```
- 显示旋转加载图片，[下拉加载数据](https://github.com/chalecao/chale/blob/master/iscroll.js)
```css
#pullDown .pullDownIcon{display:inline-block;vertical-align:middle;width:40px;height:40px;background:url(https://github.com/chalecao/chale/blob/master/pull-icon%402x.png) 0 0 no-repeat;-webkit-background-size:40px 80px;background-size:40px 80px;-webkit-transition-property:-webkit-transform;-webkit-transition-duration:250ms}
#pullDown .pullDownIcon{-webkit-transform:rotate(0deg) translateZ(0)}
#pullDown .pullDownLabel{display:inline-block;vertical-align:middle;margin-left:5px;}
#pullDown.flip .pullDownIcon{-webkit-transform:rotate(-180deg) translateZ(0)}
#pullDown.loading .pullDownIcon{background-position:0 100%;-webkit-transform:rotate(0deg) translateZ(0);-webkit-transition-duration:0ms;-webkit-animation-name:loading;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear}
@-webkit-keyframes loading{
from{-webkit-transform:rotate(0deg) translateZ(0)}
to{-webkit-transform:rotate(360deg) translateZ(0)}
}
```
```html
正在载入中...
```
- 手机多终端适配 media query[web app iphone4 iphone5 iphone6 响应式布局 适配代码](http://club.zoomla.cn/PItem?id=12594)
```css
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
.class{}
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
.class{}
}
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
.class{}
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
.class{}
}
```
- 屏蔽苹果浏览器对数字的识别[Meta标签中的format-detection属性及含义](http://blog.sina.com.cn/s/blog_51048da70101cgea.html)
```html
```
- 移除HTML5 input在type="number"时的上下小箭头
- 在chrome下：
```css
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
```
- Firefox下：
```css
input[type="number"]{-moz-appearance:textfield;}
```
- 第二种方案：
- 将type="number"改为type="tel"，同样是数字键盘，但是没有箭头。
- [HTML5手机浏览直接给一个号码打电话，发短信](http://java-er.com/blog/html5-mobile-call-sms/)
```html
移动WEB页面JS一键拨打号码咨询功能
移动WEB页面JS一键发送短信咨询功能
```
- [CSS判断横屏竖屏](http://www.w3cways.com/1772.html)
```css
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}
```
```javascript
//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert('竖屏状态！');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('横屏状态！');
}
}, false);
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
```
- rem 适配，内容太多，只贴网址
- [rem自适应方案](https://github.com/imweb/mobile/issues/3)
- [html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式](http://www.cnblogs.com/willian/p/3573353.html)
- [移动端高清、多屏适配方案](http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041)
- [通过rem布局+media-query:aspect-ratio实现移动端全机型适配覆盖](http://xiaoyuze88.github.io/blog/2015/05/12/%E9%80%9A%E8%BF%87rem%E5%B8%83%E5%B1%80+media-query%E7%9A%84aspect-ratio%E5%AE%9E%E7%8E%B0%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%85%A8%E6%9C%BA%E5%9E%8B%E9%80%82%E9%85%8D%E8%A6%86%E7%9B%96/)
- [web app变革之rem](http://isux.tencent.com/web-app-rem.html)
- [手机淘宝的flexible设计与实现](http://www.html-js.com/article/2402)
- [移动端自适应方案](https://github.com/amfe/lib-flexible)
- [【原创】移动端高清、多屏适配方案](http://www.html-js.com/article/3041)
- [6个html5页面适配iphone6的技巧](http://qietuwang.baijia.baidu.com/article/73861)
- [关于移动端 rem 布局的一些总结](http://segmentfault.com/a/1190000003690140)
- [从网易与淘宝的font-size思考前端设计稿与工作流](http://www.cnblogs.com/lyzg/p/4877277.html)
- [移动端自适应方案](http://f2e.souche.com/blog/yi-dong-duan-zi-gua-ying-fang-an/)
- [MobileWeb 适配总结](http://www.w3ctech.com/topic/979)
- [移动端web app自适应布局探索与总结](http://www.html-js.com/article/JavaScript-learning-notes%203234)
- 公式
```javascript
var PAGE_MAX_WIDTH = 1280,
BASE_FONT_SIZE = 50;
(function() {
function n() {
e.fontSize = Math.min(window.innerWidth / PAGE_MAX_WIDTH * BASE_FONT_SIZE, BASE_FONT_SIZE) + "px"
}
var e = document.documentElement.style;
window.addEventListener("load", n),
window.addEventListener("resize", n),
n();
}());
```
- 页面的切换使用了page-enter
```html
```
- css相关总结网址
- [css常用效果总结](http://www.haorooms.com/post/css_common)
- [css的不常用效果总结](http://www.haorooms.com/post/css_notuse_common)
- [css开发技巧](http://www.haorooms.com/post/css_skill)
- [重温css的选择器](http://www.haorooms.com/post/css_selectelement)
- [css的变量和继承](http://www.haorooms.com/post/css_inherit_bl)
- [css3的混合模式](http://www.haorooms.com/post/css3_mixblendmode)
- [css中伪元素before或after中content的特殊用法attr](http://www.haorooms.com/post/content_attr)
- 美化滚动条
```css
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
width: 6px;
background: rgba(#101F1C, 0.1);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(#101F1C, 0.5);
background-clip: padding-box;
min-height: 28px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(#101F1C, 1);
}
```
================================================
FILE: hr.md
================================================
# 前端联盟群求职内推资源汇总
标签（空格分隔）： group
---
## 群规
[GITHUB在线地址](http://t.cn/RL2NtqX) `http://t.cn/RL2NtqX`
[看云在线地址](http://t.cn/RUdaGHn) `http://t.cn/RUdaGHn`
这是我们联盟群的求职内推资源汇总页面，方便前端同学们在求职的道路上有一盏明灯参考和指引，有一些小伙伴能够并肩作战。为招聘方能够提供候选人选择，为求职方提供可投递的人脉和渠道。QQ群规如上文如示，如不能遵守请不要加入。QQ群、微信群禁止政治、色情、赌博等不良话题和内容。
以下为联盟群城市资源，供参考，排名不分先后。
入群第一件事规范名片:
名片规则：
- 前端-昵称［也可以是半端、全端］
- HR-昵称
- 猎头-昵称
请大家对号入座
发布招聘信息时的模板：
```html
【内推】xxx公司~财富技术部-3年前端 |【招聘】WEB前端开发工程师-浦东新区张江高科
规模：20人+
是否双休：如：双休 / 单休 / 其他
岗位要求：如：前端工程师:熟悉xxxx等。。。。。
待遇福利：如：5险1金 底薪8000 + 项目提成 + 补贴等 / *****
联系方式：*******
邮箱：xx@xx.com
工作地点：如：西安、高新区
```
---
## 须知
- 每个省市原则上都有配套的QQ群、微信群，有些因为历史原因可能是省会城市群，比如杭州，西安，即统领全浙江省，陕西省。北京、上海、深圳、成都、西安有求职QQ群，其它城市没有求职QQ群。
- QQ群侧重于技术(求职QQ群除外)，微信群侧重于内推职业等话题。
- 由于QQ群、微信群加人有上限，同一个人原则上加群最多不能超过两个，即家乡所在城市群、工作所在城市群。
- 此群只提供交流的平台，内推求职过程中双方有争议的地方，建议直接报警，聊天记录可做为呈堂证供，请大家妥善保管。
- 由于群中有知名互联网公司，也有非知名，所以通过以下网站进行有效识别，面试之前建议自己查询。
- [国家企业信用信息公示系统](http://www.gsxt.gov.cn/index)
- [天眼查](https://www.tianyancha.com/)
## 如何加入
- 由于前端联盟群定位为：高效率、高质量的交流平台，所以只能被邀请加入。由于QQ群广告号泛滥不得不做出这样痛苦的决定，所以所有QQ群、微信群只能邀请加入，加入QQ群之后才能被邀请加入微信群。
- 前端联盟技术群总入口群是：JS前端开发跳板1群 `492107297`，这个是正常开放入口加入的，只要回答对问题答案，自动审核加入。
- 所有联盟城市群只能被群内成员邀请加入，你还没有加入吗？那速度认识一位联盟群的成员，就可以成为大家庭中的一员了。
- 大部分城市微信群超100人，需要联系QQ群管理员邀请加入。
- 大部分同学都在上班，所以处理速度比较慢，请耐心等待哦。
### 北京
- QQ群：
- 北京前端交流群 `578874693`
- 北京前端求职内推群 `279374742`
| 公司 | 岗位 | ID | 地区 |
| --- | --- | --- | --- |
|北京新东方|前端中高级开发|观望-快乐|北京|
- 微信群
| 公司 | 岗位 | ID | 地区 |
| --- | --- | --- | --- |
||前端|||
### 上海
- QQ群：
- 上海前端交流群 `426462717`
- 上海前端求职内推群 `467443327`
| 公司 | 岗位 | ID | 地区 | 备注 |
| --- | --- | --- | --- | --- |
| 花旗金融 | 前端AVP| 董燕虹(微信群)|上海|猎头|
| 花旗金融 |Java - C10及以上 | 董燕虹 | 上海| 猎头 |
### 深圳
- QQ群：
- 深圳前端交流群 `247687975`
- 深圳前端求职内推群 `533701440`
| 公司 | 岗位 | ID | 地区 |
| --- | --- | --- | --- |
||前端| |深圳|
### 杭州
- 杭州前端交流群 `199595055`
- 杭州前端求职内推群 ``
| 公司 | 岗位 | ID | 地区 |
| --- | --- | --- | --- |
|蚂蚁金服|[前端](https://www.yuque.com/thzt/recruiting/antfin)| 何幻 |杭州|
|菜鸟网络|前端| |杭州|
### 南京
- QQ群：
- 南京前端交流群 `475057024`
| 公司 | 岗位 | ID | 地区 |
| --- | --- | --- | --- |
|苏宁|前端| 菜鸟檬檬 |南京|
### 武汉
- QQ群：
- 武汉前端交流群 `210232515`
### 成都
- QQ群：
- 成都前端交流群 `199595055`
- 成都前端求职内推群 `258468409`
| 公司 | 岗位 | ID | 地区 |
| --- | --- | --- | --- |
|蚂蚁金服|前端p6起步| 张力 |成都|
### 西安
- QQ群：
- 西安前端交流群 `369727205`
- WDShare西安前端内推 `37948639`
| 公司 | 岗位 | ID | 地区 |
| --- | --- | --- | --- |
||前端| |深圳|
================================================
FILE: js.md
================================================
### 以下是常用的代码收集，没有任何技术含量，只是填坑的积累。转载请注明出处，谢谢。
#### 1. PC - js
- 返回指定范围的随机数(m-n之间)的公式
```javascript
Math.random()*(n-m)+m
```
- [return false](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false)
- [return false](http://www.75team.com/archives/201)
```javascript
// event.preventDefault()会阻挡预设要发生的事件.
// event.stopPropagation()会阻挡发生冒泡事件.
// 而return false则是前面两者的事情他都会做：
// 他会做event.preventDefault();
// 他会做event.stopPropagation();
// 停止callback function的执行并且立即return回来
```
- 复制文本到剪切板
```javascript
function copyToClipboard(data) {
const _tempInput = document.createElement('input')
_tempInput.value = data.value
document.body.appendChild(_tempInput)
_tempInput.select()
document.execCommand('Copy')
document.body.removeChild(_tempInput)
}
```
- 前端生成文件并下载
```javascript
function createAndDownloadFile(fileName, content) {
const aTag = document.createElement('a');
const blob = new Blob([content]);
aTag.download = `${fileName}.json`;
aTag.href = URL.createObjectURL(blob);
aTag.click();
URL.revokeObjectURL(blob);
}
```
- 高亮文本
```javascript
function highlight(text, words, tag='span') {
let i, len = words.length, re;
for (i = 0; i < len; i++) {
re = new RegExp(words[i], 'g');
if (re.test(text)) {
text = text.replace(re, '<'+ tag +' class="highlight">$&');
}
}
return text;
}
```
- 限制文本字数
```javascript
function excerpt(str, nwords) {
let words = str.split(' ');
words.splice(nwords, words.length-1);
return words.join(' ') +
(words.length !== str.split(' ').length ? '…' : '');
}
```
- 简单创建动态菜单下拉列表
```javascript
function createMenu(items, tags=['ul', 'li']) {
const parent = tags[0];
const child = tags[1];
let item, value = '';
for (let i = 0, l = items.length; i < l; i++) {
item = items[i];
if (/:/.test(item)) {
item = items[i].split(':')[0];
value = items[i].split(':')[1];
}
items[i] = '<'+ child +' '+
(value && 'value="'+value+'"') +'>'+
item +'';
}
return '<'+ parent +'>'+ items.join('') +'';
}
```
- 防止被Iframe嵌套
```javascript
if(top != self){
location.href = ”about:blank”;
}
```
- 两种图片lazy加载的方式
第一个By JS中级交流群 成都-猎巫 第二个By 上海-zenki
```javascript
// @description 准备为图片预加载使用的插件
// 使用的图片容器css类名为lazy-load-wrap
// 图片真实地址为data-lazy-src
// 当lazy-load-wrap容器进入视口，则开始替换容器内所有需要延迟加载的图片路径，并更改容器的加载状态
//第一种方法
$.fn.compassLazyLoad=function(){
var _HEIGHT=window.innerHeight,
_lazyLoadWrap=$('.lazy-load-wrap');
var methods={
setOffsetTop:function(){
$.each(_lazyLoadWrap,function(i,n){
$(n).attr({
'top':n.offsetTop-_HEIGHT,
'status':'wait'
});
})
},
isShow:function(){
var _scrollTop=$(window).scrollTop;
//利用image容器判断是否进入视口，而非image本身
$.each(_lazyLoadWrap,function(){
var _that=$(this);
if (_that.attr('status')==='done') {
return;
};
if (_that.attr('top')<=_scrollTop) {
_that.find('img[data-lazy-src]').each(function(i,n){
n.src=$(n).data('lazy-src');
});
_that.attr('status','done');
};
})
},
scroll:function(){
$(window).on('scroll',function(){
methods.isShow();
});
},
init:function(){
methods.setOffsetTop();
methods.isShow();
methods.scroll();
}
};
methods.init();
}
//第二种方法
var exist=(function($){
var timer=null,
temp=[].slice.call($('.container'));
ret={};
for(var i=0,len=temp.length-1;i<=len;i++){
ret[i]=temp[i];
}
var isExist=function(winTop,winEnd){
for(var i in ret){
console.log(ret);
var item=ret[i],
eleTop=item.offsetTop,
eleEnd=eleTop+item.offsetHeight;
if((eleTop>winTop&&eleTop<=winEnd)||(eleEnd>winTop&&eleEnd<=winEnd)){
$(item).css('background','none');
new Tab($(item).attr('id'),data).init;
delete ret[i];
}
}
}
return {
timer:timer;
isExist:isExist;
};
})($);
//第三种方法
Zepto(function ($) {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 3000,
loop: true,
autoplayDisableOnInteraction: false
});
(function lazyLoad() {
var imgs = $(".lazyLoad");
var src = '';
$.each(imgs, function (index, item) {
src = $(item).attr('data-src');
$(item).attr('src', src);
});
})();
});
$(function () {
var lazyLoadTimerId = null;
/// 智能加载事件
$(window).bind("scroll", function () {
clearTimeout(lazyLoadTimerId);
lazyLoadTimerId = setTimeout(function () {
// 延迟加载所有图片
var isHttp = (location.protocol === "http:");
$("#ym_images img").each(function () {
var self = $(this);
if (self.filter(":above-the-fold").length > 0) {
var originUrl = self.attr("data-original");
self.attr("src", originUrl);
}
});
}, 500);
});
});
```
- 某年某月的1号为星期几
```javascript
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
weekday[new Date(2015, 9, 1).getDay()]; //2015年10月1号
```
#### 2. Mobile - js
- [js 判断IOS, 安卓](http://caibaojian.com/browser-ios-or-android.html)
```javascript
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
alert('是否是Android：'+isAndroid);
alert('是否是iOS：'+isiOS);
```
#### 3. [微信 weixin](http://loo2k.com/blog/detecting-wechat-client/)
- UserAgent 判断微信客户端
```javascript
// Mozilla/5.0 (iPhone; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12F70 MicroMessenger/6.1.5 NetType/WIFI
function isWechat() {
var ua = navigator.userAgent.toLowerCase();
return /micromessenger/i.test(ua) || /windows phone/i.test(ua);
}
```
- 获取单个dom元素
```js
function $(selector, el) {
if (!el) {
el = document;
}
return el.querySelector(selector);
}
```
- 获取多个dom元素
```js
function $$(selector, el) {
if (!el) {
el = document;
}
return el.querySelectorAll(selector);
// Note: the returned object is a NodeList.
// If you'd like to convert it to a Array for convenience, use this instead:
// return Array.prototype.slice.call(el.querySelectorAll(selector));
}
```
- 将nodeList集合转换为数组
```js
function convertToArray(nodeList) {
var array = null
try {
// IE8-NodeList是COM对象
array = Array.prototype.slice.call(nodeList, 0)
} catch (err) {
array = []
for (var i = 0, len = nodeList.length; i < len; i++) {
array.push(nodeList[i])
}
}
return array
}
```
- ajax函数
```js
function ajax(setting) {
//设置参数的初始值
var opts = {
method: (setting.method || "GET").toUpperCase(), //请求方式
url: setting.url || "", // 请求地址
async: setting.async || true, // 是否异步
dataType: setting.dataType || "json", // 解析方式
data: setting.data || "", // 参数
success: setting.success || function () { }, // 请求成功回调
error: setting.error || function () { } // 请求失败回调
};
// 参数格式化
function params_format(obj) {
var str = "";
for (var i in obj) {
str += i + "=" + obj[i] + "&";
}
return str
.split("")
.slice(0, -1)
.join("");
}
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 连接服务器open(方法GET/POST，请求地址， 异步传输)
if (opts.method == "GET") {
xhr.open(
opts.method,
opts.url + "?" + params_format(opts.data),
opts.async
);
xhr.send();
} else {
xhr.open(opts.method, opts.url, opts.async);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(opts.data);
}
/*
** 每当readyState改变时，就会触发onreadystatechange事件
** readyState属性存储有XMLHttpRequest的状态信息
** 0 ：请求未初始化
** 1 ：服务器连接已建立
** 2 ：请求已接受
** 3 : 请求处理中
** 4 ：请求已完成，且相应就绪
*/
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
switch (opts.dataType) {
case "json":
var json = JSON.parse(xhr.responseText);
opts.success(json);
break;
case "xml":
opts.success(xhr.responseXML);
break;
default:
opts.success(xhr.responseText);
break;
}
}
};
xhr.onerror = function (err) {
opts.error(err);
};
}
```
- JS接口安全域名不填写，分享onMenuShareAppMessage直接会取默认值。
```javascript
// 分享onMenuShareAppMessage直接会取默认值
```
- 关闭当前页面
```javascript
WeixinJSBridge.call('closeWindow');
```
- [支付接口方法调用必须在addevent里边调用](http://www.cnblogs.com/true_to_me/p/3565039.html)
```javascript
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady(){
that.initOrder();
}, false);
```
- 支付接口方法调用必须在
```javascript
WeixinJSBridge.invoke('getBrandWCPayRequest', d, function(res){
if(res.err_msg == "get_brand_wcpay_request:ok"){
// alert("支付成功");
// union.release(d.orderId);
resetUrl();
paySuccess('home', d.orderId);
} else {
cancelOrder(d.orderId);
// alert(res.err_msg);
}
loading.hide();
});
```
- 瀑布流无限加载实例
```javascript
// be dependent on jquery & jquery.infinitescroll.min.js
// insert this '' to your page.html
(function($){
$(function(){
var $container = $('.list-wrap-gd');
function layOutCallBack() {
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item-bar',
gutter: 10
});
});
$container.imagesLoaded().progress( function() {
$container.masonry('layout');
});
}
layOutCallBack();
$container.infinitescroll({
navSelector : "#more",
nextSelector : "#more a",
itemSelector : ".item-bar",
pixelsFromNavToBottom: 300,
loading:{
img: "/images/masonry_loading.gif",
msgText: ' ',
finishedMsg: "已经到最后一页",
finished: function(){
$("#more").remove();
$("#infscr-loading").hide();
}
},
errorCallback:function(){
$(window).unbind('.infscr');
},
pathParse: function (path, nextPage) {
var query = "";
var keyword=$("#search_keyword").val();
var cat_id=$("#cat_id").val();
var brand_id=$("#brand_id").val();
var country_id = $("#country_id").val();
query = query + "&namekeyword="+keyword;
query = query +"&cat_id="+cat_id
query = query + "&brand_id=" + brand_id;
query = query + "&country_id=" + country_id;
path = [path,query];
return path;
}
},
function(newElements) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
layOutCallBack();
});
});
});
})(jQuery);
```
- [iOS，Safari浏览器，input等表单focus后fixed元素错位问题](https://www.snip2code.com/Snippet/176582/--iOS-Safari----input---focus-fixed-----)
```javascript
if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ) {
$(document).on('focus', 'input, textarea', function()
{
$('header').css("position", 'absolute');
$('footer').css("position", 'absolute');
});
$(document).on('blur', 'input, textarea', function()
{
$('header').css("position", 'fixed');
$('footer').css("position", 'fixed');
});
}
```
- 得到地理位置
```javascript
function getLocation(callback){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function(p){
callback(p.coords.latitude, p.coords.longitude);
},
function(e){
var msg = e.code + "\n" + e.message;
}
);
}
}
```
- [rem计算适配](http://isux.tencent.com/web-app-rem.html)
```javascript
(function(doc, win){
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function(){
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
```
- [另外一种rem方案](http://www.html-js.com/article/3041)
```javascript
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * 2 / 10;
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
v = parseFloat(v);
return v * rem;
};
window.px2rem = function(v) {
v = parseFloat(v);
return v / rem;
};
window.dpr = dpr;
window.rem = rem;
```
- 获取js所在路径
```js
function getJsDir (src) {
var script = null;
if (src) {
script = [].filter.call(document.scripts, function (v) {
return v.src.indexOf(src) !== -1;
})[0];
} else {
script = document.scripts[document.scripts.length - 1];
}
return script ? script.src.substr(0, script.src.lastIndexOf('/')) : script;
}
```
- 页面加载自执行函数
```js
function addload(func) {
var old = window.onload;
if (typeof window.onload != "function") {
window.onload = func;
} else {
window.onload = function () {
old();
func();
}
}
}
```
- 从全局捕获错误
```js
window.onerror = function (errMsg, scriptURI, lineNumber, columnNumber, errorObj) {
setTimeout(function () {
var rst = {
"错误信息：": errMsg,
"出错文件：": scriptURI,
"出错行号：": lineNumber,
"出错列号：": columnNumber,
"错误详情：": errorObj
};
alert(JSON.stringify(rst, null, 10));
});
};
```
- [如何通过 js 修改微信浏览器的title?](https://www.zhihu.com/question/26228251/answer/32405529)
```javascript
var $body = $('body');
document.title = 'title'; // hack在微信等webview中无法修改document.title的情况
var $iframe = $('').on('load', function(){
setTimeout(function(){
$iframe.off('load').remove()
}, 0)
}).appendTo($body)
```
#### 1. 常用方法 - js
- 字符串长度截取
```js
function cutstr(str, len) {
var temp,
icount = 0,
patrn = /[^\x00-\xff]/，
strre = "";
for (var i = 0; i < str.length; i++) {
if (icount < len - 1) {
temp = str.substr(i, 1);
if (patrn.exec(temp) == null) {
icount = icount + 1
} else {
icount = icount + 2
}
strre += temp
} else {
break;
}
}
return strre + "..."
}
```
- 替换全部
```js
String.prototype.replaceAll = function(s1, s2) {
return this.replace(new RegExp(s1, "gm"), s2)
}
````
- 清除空格
```js
String.prototype.trim = function() {
var reExtraSpace = /^\s*(.*?)\s+$/;
return this.replace(reExtraSpace, "$1")
}
```
- 清除左空格/右空格
```js
function ltrim(s){ return s.replace( /^(\s*| *)/, ""); }
function rtrim(s){ return s.replace( /(\s*| *)$/, ""); }
```
- 判断是否以某个字符串开头
```js
String.prototype.startWith = function (s) {
return this.indexOf(s) == 0
}
```
- 判断是否以某个字符串结束
```js
String.prototype.endWith = function (s) {
var d = this.length - s.length;
return (d >= 0 && this.lastIndexOf(s) == d)
}
```
- 转义html标签
```js
function HtmlEncode(text) {
return text.replace(/&/g, '&').replace(/\"/g, '"').replace(//g, '>')
}
```
- 时间日期格式转换
```js
Date.prototype.Format = function(formatStr) {
var str = formatStr;
var Week = ['日', '一', '二', '三', '四', '五', '六'];
str = str.replace(/yyyy|YYYY/, this.getFullYear());
str = str.replace(/yy|YY/, this.getFullYear().toString().substr(2));
str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1));
str = str.replace(/M/g, (this.getMonth() + 1));
str = str.replace(/w|W/g, Week[this.getDay()]);
str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate());
str = str.replace(/d|D/g, this.getDate());
str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours());
str = str.replace(/h|H/g, this.getHours());
str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes());
str = str.replace(/m/g, this.getMinutes());
str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds());
str = str.replace(/s|S/g, this.getSeconds());
return str
}
```
- 判断日期是否有效
```javascript
function isValidDate(value, userFormat='mm/dd/yyyy') {
const delimiter = /[^mdy]/.exec(userFormat)[0];
const theFormat = userFormat.split(delimiter);
const theDate = value.split(delimiter);
function isDate(date, format) {
let m, d, y, i = 0, len = format.length, f;
for (i; i < len; i++) {
f = format[i];
if (/m/.test(f)) m = date[i];
if (/d/.test(f)) d = date[i];
if (/y/.test(f)) y = date[i];
}
return (
m > 0 && m < 13 &&
y && y.length === 4 &&
d > 0 &&
d <= (new Date(y, m, 0)).getDate()
);
}
return isDate(theDate, theFormat);
}
```
- 判断是否为数字类型
```js
function isDigit(value) {
var patrn = /^[0-9]*$/;
if (patrn.exec(value) == null || value == "") {
return false
} else {
return true
}
}
```
- 判断具体类型
```js
function getType(a) {
var typeArray = Object.prototype.toString.call(a).split(" ");
return typeArray[1].slice(0, -1);
}
```
- 设置cookie值
```js
function setCookie(name, value, Hours) {
var d = new Date();
var offset = 8;
var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
var nd = utc + (3600000 * offset);
var exp = new Date(nd);
exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString()
}
```
- 获取cookie值
```js
function getCookie(name) {
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) return unescape(arr[2]);
return null
}
```
- 加载样式文件表
```js
function LoadStyle(url) {
try {
document.createStyleSheet(url)
} catch(e) {
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
cssLink.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(cssLink)
}
}
```
- 返回脚本内容
```js
function evalscript(s) {
if(s.indexOf(']*?>([^\x00]*?)<\/script>/ig;
var arr = [];
while(arr = p.exec(s)) {
var p1 = /]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
var arr1 = [];
arr1 = p1.exec(arr[0]);
if(arr1) {
appendscript(arr1[1], '', arr1[2], arr1[3]);
} else {
p1 = /([^\x00]+?)<\/script>/i;
arr1 = p1.exec(arr[0]);
appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);
}
}
return s;
}
```
- 清除脚本内容
```js
function stripscript(s) {
return s.replace(/.*?<\/script>/ig, '');
}
```
- 动态加载脚本文件
```js
function appendscript(src, text, reload, charset) {
var id = hash(src + text);
if(!reload && in_array(id, evalscripts)) return;
if(reload && $(id)) {
$(id).parentNode.removeChild($(id));
}
evalscripts.push(id);
var scriptNode = document.createElement("script");
scriptNode.type = "text/javascript";
scriptNode.id = id;
scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset);
try {
if(src) {
scriptNode.src = src;
scriptNode.onloadDone = false;
scriptNode.onload = function () {
scriptNode.onloadDone = true;
JSLOADED[src] = 1;
};
scriptNode.onreadystatechange = function () {
if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) {
scriptNode.onloadDone = true;
JSLOADED[src] = 1;
}
};
} else if(text){
scriptNode.text = text;
}
document.getElementsByTagName('head')[0].appendChild(scriptNode);
} catch(e) {}
}
```
- 动态加载js或css文件
```js
function delay_js(url) {
var type = url.split(".")
, file = type[type.length - 1];
if (file == "css") {
var obj = document.createElement("link")
, lnk = "href"
, tp = "text/css";
obj.setAttribute("rel", "stylesheet");
} else
var obj = document.createElement("script")
, lnk = "src"
, tp = "text/javascript";
obj.setAttribute(lnk, url);
obj.setAttribute("type", tp);
file == "css" ? document.getElementsByTagName("head")[0].appendChild(obj) : document.body.appendChild(obj);
return obj;
}
```
- 返回按ID检索的元素对象
```js
function $(id) {
return !id ? null : document.getElementById(id);
}
```
- 检验URL链接是否有效
```js
function getUrlState(URL){
var xmlhttp = new ActiveXObject("microsoft.xmlhttp");
xmlhttp.Open("GET",URL, false);
try{
xmlhttp.Send();
}catch(e){
}finally{
var result = xmlhttp.responseText;
if(result){
if(xmlhttp.Status==200){
return(true);
}else{
return(false);
}
}else{
return(false);
}
}
}
```
- 获取当前路径
```js
var currentPageUrl = "";
if (typeof this.href === "undefined") {
currentPageUrl = document.location.toString().toLowerCase();
}else {
currentPageUrl = this.href.toString().toLowerCase();
}
```
- 获取页面高度
```js
function getPageHeight(){
var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat"
? a
: g.documentElement;
return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight);
}
```
- 获取页面可视宽度
```js
function getPageViewWidth(){
var d = document, a = d.compatMode == "BackCompat" ?
d.body: d.documentElement;
return a.clientWidth;
}
```
- 获取页面宽度
```js
function getPageWidth(){
var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat"?
a: g.documentElement;
return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);
}
```
- 随机数时间戳
```js
function uniqueId(){
var a=Math.random,b=parseInt;
return Number(new Date()).toString()+b(10*a())+b(10*a())+b(10*a());
}
```
- 日期格式化函数
```js
Date.prototype.format = function(format){
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
};
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o){
if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] :("00"+ o[k]).substr((""+ o[k]).length));
}
return format;
}
//调用
//new Date().format("yyyy-MM-dd hh:mm:ss");
```
- 返回顶部的通用方法
```js
function backTop(btnId) {
var btn = document.getElementById(btnId);
var d = document.documentElement;
var b = document.body;
window.onscroll = set;
btn.style.display = "none";
btn.onclick = function() {
btn.style.display = "none";
window.onscroll = null;
this.timer = setInterval(function() {
d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);
}, 10);
};
function set() {
btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"
}
};
backTop('goTop');
```
- 获得URL中GET参数值
```js
// 用法：如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得：GET["t1"], GET["t2"], GET["t3"]
function get_get(){
querystr = window.location.href.split("?")
if(querystr[1]){
GETs = querystr[1].split("&");
GET = [];
for(i=0;i -1) {
this.splice(index, 1);
}
};
```
- 判断数组里是否有某个元素
```js
Array.prototype.isContains = function (e) {
for (i = 0; i < this.length && this[i] != e; i++);
return !(i == this.length);
}
```
- 按字典顺序，对每行进行数组排序
```js
function SetSort(){
var text=K1.value.split(/[\r\n]/).sort().join("\r\n");//顺序
var test=K1.value.split(/[\r\n]/).sort().reverse().join("\r\n");//反序
K1.value=K1.value!=text?text:test;
}
```
- 字符串反序输出
```js
function IsReverse(text){
return text.split('').reverse().join('');
}
```
- 金额大写转换函数
```js
//格式转换
function transform(tranvalue) {
try {
var i = 1;
var dw2 = new Array("", "万", "亿"); //大单位
var dw1 = new Array("拾", "佰", "仟"); //小单位
var dw = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //整数部分用
//以下是小写转换成大写显示在合计大写的文本框中
//分离整数与小数
var source = tranvalue.split(".");
var num = source[0];
var dig = source[1];
//转换整数部分
var k1 = 0; //计小单位
var k2 = 0; //计大单位
var sum = 0;
var str = "";
var len = source[0].length; //整数的长度
for (i = 1; i <= len; i++) {
var n = source[0].charAt(len - i); //取得某个位数上的数字
var bn = 0;
if (len - i - 1 >= 0) {
bn = source[0].charAt(len - i - 1); //取得某个位数前一位上的数字
}
sum = sum + Number(n);
if (sum != 0) {
str = dw[Number(n)].concat(str); //取得该数字对应的大写数字，并插入到str字符串的前面
if (n == '0') sum = 0;
}
if (len - i - 1 >= 0) { //在数字范围内
if (k1 != 3) { //加小单位
if (bn != 0) {
str = dw1[k1].concat(str);
}
k1++;
} else { //不加小单位，加大单位
k1 = 0;
var temp = str.charAt(0);
if (temp == "万" || temp == "亿") //若大单位前没有数字则舍去大单位
str = str.substr(1, str.length - 1);
str = dw2[k2].concat(str);
sum = 0;
}
}
if (k1 == 3){ //小单位到千则大单位进一
k2++;
}
}
//转换小数部分
var strdig = "";
if (dig != "") {
var n = dig.charAt(0);
if (n != 0) {
strdig += dw[Number(n)] + "角"; //加数字
}
var n = dig.charAt(1);
if (n != 0) {
strdig += dw[Number(n)] + "分"; //加数字
}
}
str += "元" + strdig;
} catch(e) {
return "0元";
}
return str;
}
```
- 格式化数字
```js
function fmoney(s, n) {
//s:传入的float数字 ，n:希望返回小数点几位
n = n > 0 && n <= 20 ? n : 2;
s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
var l = s
.split(".")[0]
.split("")
.reverse(),
r = s.split(".")[1];
t = "";
for (i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
}
return;
t
.split("")
.reverse()
.join("") +
"." +
r;
}
```
================================================
FILE: qq.md
================================================
# QQ联盟群交流(492107297)群规
[GITHUB在线地址](http://t.cn/RL2NtqX) `http://t.cn/RL2NtqX`
[看云在线地址](http://t.cn/RUdaGHn) `http://t.cn/RUdaGHn`
这是我们联盟群的组织结构，加入等级参考[JS高级前端开发群加群说明](http://www.cnblogs.com/jikey/p/4426105.html)。
这本来是我QQ群内部的一份公共约定的日常交流规则，后来得到大伙的一致认可，并用实际行动来捍卫它，使我倍受感动。
后来想：传播使爱更有力量，阅读使内心更为坚强，沉淀使生活更为醇香，分享使人更为谦卑或快乐。因为快乐，所以分享。
知识资源来源于互联网，应该返回给互联网，使看到的每一个人受益，也可以供其它各个行业的群主参考。
规则会不断的修改调整，你不在是一个受益者，更是一个项目参与者内容规则的创造者，再造福别人，欢迎fork之后push。
以下个人网址有的未经征得本人同意，如有不便之处请联系我，或fork之后删除再push，我们的心愿是在技术层面进行交流或学习，同时释放自己的激情或梦想。
---
### 如何优雅地使用群规
1. 先完整的浏览一遍此群规，了解大纲目录，知道群规有什么内容，以后方便回来查找。
2. 发出一个问题之后，不要暂时的离开电脑，如果没有把握先不要提问。
3. 珍惜每一次提问，感恩每一次反馈，每个人工作还是业余之外抽出的时间有限，充分准备好应有的资源之后再发问，有利于问题能够高效质量地得到解决。尤其是具备解决问题能力的人，通常时间都很宝贵。
4. 先搜索，再思考，最后再提问，很多人把这个顺序搞反了。
以上部分观点出自此文 [如何优雅地使用 Stack Overflow](http://www.zhihu.com/question/20824615)
### 前言
1. 宗旨：高效，高质量的交流，禁止无意义的闲扯，话题内容尽量保持在前端技术与职业相关范围内。原则上：白天上班时间禁止闲聊，业余时间话题可以稍为宽松。
2. 随着群人数越来越多，为了使群的价值能够保持技术的高质量输送或新鲜度，也为了使新人能够快速地融入这个团队，特编写此约定，希望大伙能够积极遵守或推进，谢谢各位的支持或厚爱。
3. 我们的目的侧重于引导，T人不是最终目的，我们最大的愿望是自此群规出台之后不要有任何一个人因为违反群规而被T出去。
4. 此群规也是引导大于惩罚，我们是前端类相关从业人士，注重用户心理，行为感知或契约精神，阅读完之后继续留在此群着，默认遵守此约定，如果不太习惯，建议退出，以免后期管理引导中出现不必要的冲突或对别人造成伤害，互联网因为开放或自由才有今天的成就，不同意可以退出，但不要进行伤害。另外主要还是引导为辅，自觉为主，氛围还是需要大伙共同参与维护，我们鄙视每一个不尊重时间或浪费青春的人，我们希望在激情岁月里边能够留下成长的痕迹，我们希望这份共同的回忆能够N年后还能念念不忘或值得回忆。今天因为你在此群与各高手交流而感到自豪，明天此群因为曾经有你的存在而感到欣慰，后天因为我们回忆中有你的身影而感到怀念。
5. 人的存在是为了创造价值，群的存在是为了解决问题，你的存在是为了问题快速解决。
### 一. 如何提问:
1. 请提供能重现问题的url或资源demo文件包。(url：是以www开头的一级域名或二级域名，demo文件是未上线的html静态页面，带图片的请上传至群共享。提供的资源文件，必须是换个环境之后完整的能重现所说的bug，而不是只有html没有关键css,图片等一个单独文件，如果你所属团队对前端代码有特殊的保密要求，请自行找其它解决办法)。
2. 文字描述不清的bug，在提供第1条所述资源的前提下用截图示意并圈中bug所处位置，且要说明两种状态：现状或期望的状态。
3. 没有图片的代码建议发：
- [http://www.jsbin.com](http://www.jsbin.com)
[一款优秀的在线编辑器：JsBin [使用教程]](http://www.cnblogs.com/rammstein/p/4039690.html)
优点：不需要登录，即发即预览
缺点：速度不靠谱
- [http://runjs.cn/](http://runjs.cn/)
优点：国内访问速度快，可以上传图片(左下角)
缺点：需要登录，用户名
- [http://www.jsfiddle.net](http://www.jsfiddle.net)
优点：功能强大，历史记录给力，缺点：访问速度慢
4. 有图片的代码发群共享或申请免费的测试空间
- [Sina云](http://sae.sina.com.cn/)
优点：不需要手工发布，只需三级域名就可以访问，支持语言：php,python,java，
缺点：需要身份证验证获取免费云豆
版本控制工具：svn
- [京东云](http://jae.jd.com/)
优点：支持：java,php,nodejs,python,ruby
缺点：需要实名认证200元/人，需要在控制台手动发布才能在线上预览
版本控制工具：git
- [github](http://github.com)
优点：注册即有，方便
缺点：只支持静态
版本控制工具：git
- [coding](http://coding.net)
优点：免费，可以为每个项目开启预览，类似于Github Pages功能，但是支持Node.js,PHP,Phthon,Ruby,Scala,Play,Go这些语言。最近刚出的WebIDE可以直接在浏览器中写代码了，强烈推荐！
缺点：提交新版本后，预览demo需要去后台手动部署（不过也就是点一个按钮的事情）
版本控制工具：git
参考：
- [X-Y 问题](http://coolshell.cn/articles/10804.html)
- [提问的智慧](https://lug.ustc.edu.cn/wiki/doc/smart-questions)
- [向别人求助时有哪些「潜」规则？](http://www.zhihu.com/question/21218381)
- [如何在知乎提一个好问题？](http://www.zhihu.com/question/19555761)
- [如何优雅地向前辈或者高手请教技术问题？](http://www.zhihu.com/question/25464141)
- [提问的艺术-ZZ](http://www.awflasher.com/blog/archives/200)
### 二. 禁问:
日常生活废话禁问，主观性的问题禁问，概念性的问题禁问。
- 早上问早，晚上道晚安。聊天起于问早，止于呵呵。
- 有没有人在？
- 谁能帮我解决一个问题？
- 有没有jQuery高手在等？
- 群里有人做过XX的东西吗？等等类似的问题。
- 编辑器哪个工具好用？webstorm还是sublime还是vim？
- 什么是Javascript？什么是Ajax?
建议的问法是：
- 1. 有问题直接问。比如：前端的岗位特点是什么？
- 2. 直接说场景：我在做xx端东西的时候，在window 7平台的IE7版本下遇到了左右不对齐问题，具体如图所示img，代码地址：http://www.jsbin.com/xxxx，在百度中找到的答案，试了之后还是有同样的问题。请有空的同学帮我看看是什么问题？
如果你的问题暂时没人理，那表示有空的同学都未涉猎，赶紧找其它办法。
### 三. 禁发:
- 禁发广告，招聘，找工作，找实习，找私活者，接私活，推广(如极客邀请加入)，明星八卦，政治社会话题，禁群内签到，假红包，禁交流VPN等相关话题，禁串群一个号加几个群(入门，初级，跳板，中级，高级，非管理只能加一个群)，禁群内语音，禁群内打开视频，分享视频等与前端技术或职业探讨主题无关的内容或行为，禁发超过一屏的长代码，不太习惯自己退，违者踢。
- 禁发无意义的大图片，建议发qq提供的默认的等于行距表情，约束这个目的在于：
1. 人脑对图片的接受速度明显快于文字，过多的无意义图片会分散讨论的主题。
2. 不方便回查，或聊天记录中寻找有价值的消息。
3. 另外这是一个信息爆炸时代，人脑的接收是有上限的，过多的垃圾信息会占用有限的带宽。
- 禁止在群邮件中无意义回复，每次一个人回复是一次消息的广播，每个人都会收到，会产生信息垃圾。
- 禁止在群邮件中回复招聘或其它通知邮件。因为你的每一次回复将会有2000多人同时收到，而这条回复对其它人是没有任何意义的。
- 本群不欢迎纯hr的交流，公司技术人员内推招聘发群邮件，如有违反，直接踢，不另行引导或通知。
- 禁发超过文本行距的大gif。
- 禁止找人做作业要代码，拒绝伸手党。
### 四. 警告:
- 字体：微软雅黑，10，禁加粗，禁加斜，禁加下划线，字体颜色不建议特别刺眼的颜色。
- 禁止闲聊，或无意义回复。
- 提问之前最好百度，google过，着重培养的是一种能力或方法，不是一个结果。
- 不建议直接索要代码，可以追问技术实现的思路或方法。
### 五. 资源教程:
1. 综合类
- [前端知识体系](http://www.cnblogs.com/sb19871023/p/3894452.html)
- [前端知识结构](https://github.com/JacksonTian/fks)
- [Web前端开发大系概览](https://github.com/unruledboy/WebFrontEndStack)
- [Web前端开发大系概览-中文版](http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html)
- [Web Front-end Stack v2.2](https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/master/Web%20Front%20End%20Stack.png)
- [En类资源汇总](https://github.com/sindresorhus/awesome)
- [免费的编程中文书籍索引](https://github.com/justjavac/free-programming-books-zh_CN)
- [前端书籍](https://github.com/dypsilon/frontend-dev-bookmarks)
- [前端免费书籍大全](https://github.com/vhf/free-programming-books)
- [免费的编程中文书籍索引](https://github.com/justjavac/free-programming-books-zh_CN)
- [智能社 - 精通JavaScript开发](http://study.163.com/course/introduction/224014.htm)
- [重新介绍 JavaScript（JS 教程）](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
- [麻省理工学院公开课：计算机科学及编程导论](http://v.163.com/special/opencourse/bianchengdaolun.html)
- [JavaScript中的this陷阱的最全收集--没有之一](http://segmentfault.com/a/1190000002640298)
- [JS函数式编程指南](http://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html)
- [JavaScript Promise迷你书（中文版）](http://liubin.github.io/promises-book/)
- [腾讯移动Web前端知识库](https://github.com/AlloyTeam/Mars)
- [Front-End-Develop-Guide 前端开发指南](https://github.com/w3crange/Front-End-Develop-Guide)
- [前端开发笔记本](https://li-xinyang.gitbooks.io/frontend-notebook/content/)
- [大前端工具集 - 聂微东](https://github.com/nieweidong/fetool)
- [前端开发者手册](https://dwqs.gitbooks.io/frontenddevhandbook/content/)
- [前端开发者手册](http://www.kancloud.cn/kancloud/front-end-dev-handbook/75919)
- [JavaScript 资源大全中文版](https://www.awesomes.cn/)
- [伯乐在线 - 资源大全](https://github.com/jobbole)
- [伯乐在线 - 前端资源库](https://github.com/jobbole/awesome-javascript-cn)
2. 入门类
- [前端入门教程](http://www.cnblogs.com/jikey/p/3613082.html)
- [瘳雪峰的Javascript教程](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000)
- [前端工程师必备的PS技能——切图篇](http://www.imooc.com/view/506)
- [结合个人经历总结的前端入门方法](https://github.com/qiu-deqing/FE-learning)
3. 效果类
- [弹出层](http://www.imooc.com/learn/58)
- [焦点图轮播特效](http://www.imooc.com/learn/18)
4. 工具类
- [css sprite 雪碧图制作](http://www.imooc.com/learn/93)
- [版本控制入门 – 搬进 Github](http://www.imooc.com/learn/390)
- [Grunt-beginner前端自动化工具](http://www.imooc.com/learn/30)
5. 慕课专题
- [张鑫旭 - 慕课系列](http://www.imooc.com/u/197450/courses?sort=publish)
- [lyn - 慕课系列](http://www.imooc.com/u/104593/courses?sort=publish)
- [艾伦 - 慕课系列](http://www.imooc.com/u/290139/courses?sort=publish)
- [碧仔 - Hello，移动WEB](http://www.imooc.com/view/494)
- [haorooms - js/jquery宽高介绍](http://www.imooc.com/learn/608)
6. 周刊类
- [百度FEX技术周刊](http://fex.baidu.com/weekly/)
- [平安科技移动开发二队技术周报](https://github.com/PaicHyperionDev/MobileDevWeekly)
- [360奇舞周刊](http://www.75team.com/weekly/)
### 六. API:
#### 1. 总目录
1. 开发中心
- [mozilla js参考](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)
- [chrome开发中心（chrome的内核已转向blink）](http://developer.chrome.com/extensions/api_index.html)
- [safari开发中心](https://developer.apple.com/library/safari/navigation)
- [microsoft js参考](http://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94).aspx)
- [js秘密花园](http://bonsaiden.github.io/JavaScript-Garden/zh/)
- [w3help](http://www.w3help.org/) 综合Bug集合网站
2. 综合搜索
- [javascripting](http://www.javascripting.com/)
- [各种流行库搜索](http://microjs.com/)
3. 综合API
- [runoob.com-包含各种API集合](http://www.runoob.com/)
- [开源中国在线API文档合集](http://tool.oschina.net/apidocs)
- [devdocs](http://devdocs.io/) 英文综合API网站
- [devdocs](http://www.devdocs.me/) 中文综合API网站
- [overapi](http://overapi.com/) 英文综合API网站
#### 2. jQuery
* [jQuery API 中文文档](http://jquery.bootcss.com/)
* [hemin 在线版](http://hemin.cn/jq/)
* [css88 jq api](http://www.css88.com/jqapi-1.9/on/)
* [css88 jqui api](http://www.css88.com/jquery-ui-api/)
* [学习jquery](http://learn.jquery.com/)
* [jquery 源码查找](http://james.padolsey.com/jquery/)
#### . Ecmascript
- [Understanding ECMAScript 6 - Nicholas C. Zakas](https://leanpub.com/understandinges6/read)
- [exploring-es6](https://leanpub.com/exploring-es6/read)
- [exploring-es6翻译](https://github.com/es6-org/exploring-es6)
- [exploring-es6翻译后预览](http://es6-org.github.io/exploring-es6/)
- [阮一峰 es6](http://es6.ruanyifeng.com/)
- [阮一峰 Javascript](http://javascript.ruanyifeng.com/)
- [ECMA-262，第 5 版](http://yanhaijing.com/es5/)
- [es5](http://es5.github.io/)
#### 4. Js template
- [template-chooser](http://garann.github.io/template-chooser/)
- [artTemplate](https://github.com/aui/artTemplate)
- [tomdjs](https://github.com/aui/tmodjs/blob/master/README.md)
- [淘宝模板juicer模板](http://juicer.name/docs/docs_zh_cn.html)
- [Fxtpl v1.0 繁星前端模板引擎](http://koen301.github.io/fxtpl/)
- [laytpl](http://sentsin.com/layui/laytpl/)
- [mozilla - nunjucks](https://github.com/mozilla/nunjucks)
- [Juicer](https://github.com/PaulGuo/Juicer)
- [dustjs](http://akdubya.github.io/dustjs/)
- [etpl](http://ecomfe.github.io/etpl/)
- [twitter-tpl](http://twitter.github.io/hogan.js/)
#### 5. 弹出层
- [artDialog 最新版](https://github.com/aui/artDialog)
- [artDialog 文档](http://aui.github.io/artDialog/doc/index.html)
- [google code 下载地址](https://code.google.com/p/artdialog/downloads/list)
- [贤心弹出层](http://sentsin.com/jquery/layer/)
- [响应式用户交互组件库](https://github.com/bh-lay/UI)
- [sweetalert-有css3动画弹出层](http://t4t5.github.io/sweetalert/)
#### 6. CSS
- [CSS 语法参考](http://tympanus.net/codrops/css_reference/)
- [CSS3动画手册](http://isux.tencent.com/css3/index.html)
- [alloyteam - CSS3 UI 库](http://css3lib.alloyteam.com/)
- [腾讯css3动画制作工具](http://isux.tencent.com/css3/tools.html)
- [志爷css小工具集合](http://linxz.github.io/tianyizone/)
- [css3 js 移动大杂烩](http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb)
- [bouncejs 触摸库](http://bouncejs.com/)
- [css3 按钮动画](http://fian.my.id/Waves/)
- [animate.css](http://daneden.github.io/animate.css/)
- [全局CSS的终结(狗带) [译]](http://www.alloyteam.com/2015/10/8536/)
- [ANIMATION - 大漠](http://www.w3cplus.com/blog/tags/29.html)
- [css选择器](http://www.haorooms.com/tools/css_selecter/)
#### 7. Angularjs
- [Angular.js 的一些学习资源](https://github.com/dolymood/AngularLearning)
- [angularjs中文社区](http://angularjs.cn/)
- [Angular Style Guide](https://github.com/johnpapa/angular-styleguide)
- [Angularjs源码学习](http://www.cnblogs.com/xuwenmin888/p/3739096.html)
- [Angularjs源码学习](http://www.ifeenan.com/?c=AngularJS)
- [angular对bootstrap的封装](http://angular-ui.github.io/bootstrap/)
- [angularjs + nodejs](http://cnodejs.org/topic/51404e0f069911196d2e3923)
- [吕大豹 Angularjs](http://www.cnblogs.com/lvdabao/tag/AngularJs/)
- [AngularJS 最佳实践](http://www.infoq.com/cn/news/2013/02/angular-web-app)
- [Angular的一些扩展指令](http://www.lovelucy.info/angularjs-best-practices.html)
- [Angular数据绑定原理](https://github.com/Pasvaz/bindonce)
- [一些扩展Angular UI组件](https://github.com/angular-ui/)
- [Ember和AngularJS的性能测试](http://voidcanvas.com/emberjs-vs-angularjs-performance-testing/)
- [带你走近AngularJS - 基本功能介绍](http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html)
- [Angularjs开发指南](http://angular.duapp.com/docs/guide)
- [Angularjs学习](http://www.cnblogs.com/amosli/p/3710648.html)
- [不要带着jQuery的思维去学习AngularJS](http://www.rainweb.cn/article/angularjs-jquery.html)
- [angularjs 学习笔记](http://wangjiatao.diandian.com/?tag=angularjs)
- [angularjs 开发指南](http://www.angularjs.cn/T008)
- [angularjs 英文资料](https://github.com/jmcunningham/AngularJS-Learning)
- [angular bootstrap](http://angular-ui.github.io/bootstrap/)
- [angular jq mobile](https://github.com/opitzconsulting/jquery-mobile-angular-adapter)
- [angular ui](http://mgcrea.github.io/angular-strap/)
- [整合jQuery Mobile+AngularJS经验谈](http://www.tuicool.com/articles/7ZZVr2)
- [有jQuery背景，该如何用AngularJS编程思想](http://blog.jobbole.com/46589/ )
- [AngularJS在线教程](http://each.sinaapp.com/angular/)
- [angular学习笔记](http://www.zouyesheng.com/angular.html)
- [UI Bootstrap - AngularJS directives specific to Bootstrap](https://github.com/angular-ui/bootstrap)
- [NG Bootstrap - Angular 2 directives specific to Bootstrap 4](https://github.com/ng-bootstrap/core)
#### 8. React
- [react海量资源](https://github.com/enaqx/awesome-react)
- [react.js 中文论坛](http://www.react-china.org/)
- [react.js 官方网址](https://facebook.github.io/react/index.html)
- [react.js 官方文档](https://facebook.github.io/react/docs/getting-started.html)
- [react.js material UI](http://material-ui.com/#/)
- [react.js TouchstoneJS UI](http://touchstonejs.io/)
- [react.js amazeui UI](http://amazeui.org/react/)
- [React 入门实例教程 - 阮一峰](http://www.ruanyifeng.com/blog/2015/03/react.html)
- [React Native 中文版](http://wiki.jikexueyuan.com/project/react-native/)
- [Webpack 和 React 小书 - 前端乱炖](http://www.html-js.com/article/Fakefish%203053)
- [Webpack 和 React 小书 - gitbook](https://fakefish.github.io/react-webpack-cookbook/)
- [React原创实战视频教程](http://www.piliyu.com/)
- [React 入门教程](https://hulufei.gitbooks.io/react-tutorial/content/index.html)
- [react-webpack-starter](https://github.com/zjzhome/react-webpack-starter)
- [基于react组件化开发](https://github.com/ant-design/ant-design)
- [React 编程规范(by Airbnb)](https://github.com/dwqs/react-style-guide)
- [React Webpack小说](https://fakefish.github.io/react-webpack-cookbook/index.html)
- [ant.design](http://ant.design/)
#### 9. 移动端API
1. API
- [99移动端知识集合](https://github.com/jtyjty99999/mobileTech)
- [移动端前端开发知识库](https://github.com/AlloyTeam/Mars)
- [移动前端的一些坑和解决方法（外观表现）](http://caibaojian.com/mobile-web-bug.html)
- [【原】移动web资源整理](http://www.cnblogs.com/PeunZhang/p/3407453.html)
- [zepto 1.0 中文手册](http://mweb.baidu.com/zeptoapi/)
- [zepto 1.0 中文手册](http://www.html-5.cn/Manual/Zepto/)
- [zepto 1.1.2](http://www.css88.com/doc/zeptojs_api/)
- [zepto 中文注释](http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html)
- [jqmobile 手册](http://app-framework-software.intel.com/api.php)
- [移动浏览器开发集合](https://github.com/maxzhang/maxzhang.github.com/issues)
- [移动开发大杂烩](https://github.com/hoosin/mobile-web-favorites)
- [微信webview中的一些问题](http://lin-chao.github.io/2014/11/14/%E5%BE%AE%E4%BF%A1webview%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/)
2. 框架
- [特色的HTML框架可以创建精美的iOS应用](http://framework7.taobao.org/)
- [淘宝SUI](http://m.sui.taobao.org/)
#### 10. avalon
- [avalonjs](http://avalonjs.github.io/)
- [Avalon新一代UI库： OniUI](http://ued.qunar.com/oniui/index.html)
- [avalon.oniui-基于avalon的组件库](https://github.com/RubyLouvre/avalon.oniui)
#### 11. Requriejs
- [Javascript模块化编程（一）：模块的写法 ](http://www.ruanyifeng.com/blog/2012/10/javascript_module.html)
- [Javascript模块化编程（二）：AMD规范](http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html)
- [Javascript模块化编程（三）：require.js的用法](http://www.ruanyifeng.com/blog/2012/11/require_js.html)
- [RequireJS入门（一）](http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html)
- [RequireJS入门（二）](http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html)
- [RequireJS进阶（三）](http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html)
- [requrie源码学习](http://www.cnblogs.com/yexiaochai/p/3632580.html )
- [requrie 入门指南](http://www.oschina.net/translate/getting-started-with-the-requirejs-library )
- [requrieJS 学习笔记](http://www.cnblogs.com/yexiaochai/p/3214926.html )
- [requriejs 其一 ](http://cyj.me/why-seajs/requirejs/ )
- [require backbone结合](http://www.cnblogs.com/yexiaochai/p/3221081.html )
#### 12. Seajs
- [seajs](http://seajs.org/)
- [seajs 中文手册](http://cyj.me/why-seajs/zh/)
- [JavaScript模块化开发库之SeaJS](http://www.cnblogs.com/snandy/archive/2012/03/30/2423612.html)
#### 13. Less,sass
- [sass](http://www.w3cplus.com/sassguide/)
- [sass教程-sass中国](http://www.sass.hk/)
- [Sass 中文文档](http://sass.bootcss.com/)
- [less](http://less.bootcss.com/)
#### 14. Markdown
- [Markdown 语法说明 (简体中文版)](http://wowubuntu.com/markdown/)
- [markdown入门参考](https://github.com/LearnShare/Learning-Markdown/blob/master/README.md)
- [gitbook](https://www.gitbook.com/) 国外的在线markdown可编辑成书
- [mdeditor](https://www.zybuluo.com/mdeditor) 一款国内的在线markdown编辑器
- [stackedit](https://stackedit.io) 国外的在线markdown编辑器，功能强大，同步云盘
- [mditor](http://bh-lay.github.io/mditor/) 一款轻量级的markdown编辑器
- [lepture-editor](https://github.com/lepture/editor)
- [markdown-editor](https://github.com/jbt/markdown-editor)
- [Markdown 在线编辑器](https://github.com/pandao/editor.md)
#### 15. D3
- [d3 Tutorials](https://github.com/mbostock/d3/wiki/Tutorials)
- [Gallery](https://github.com/mbostock/d3/wiki/Gallery)
- [lofter](http://datavisual.lofter.com/post/40cf3a_188e535)
- [iteye](http://alanland.iteye.com/blog/1878595)
- [ruanyifeng](http://javascript.ruanyifeng.com/library/d3.html)
#### 16. 兼容性
- [esma 兼容列表](http://kangax.github.io/compat-table/es6/)
- [W3C CSS验证服务](http://jigsaw.w3.org/css-validator/validator.html.zh-cn)
- [caniuse](http://caniuse.com/#index )
- [csscreator](http://csscreator.com/properties)
- [microsoft](http://msdn.microsoft.com/zh-cn/library/cc351024(v=vs.85).aspx)
- [在线测兼容-移动端](http://www.responsinator.com/)
- [emulators](https://www.manymo.com/emulators)
#### 17. UI相关
- [bootcss](http://v3.bootcss.com/)
- [MetroUICSS](http://www.w3cplus.com/MetroUICSS/)
- [semantic](http://semantic-ui.com/)
- [Buttons](http://alexwolfe.github.io/Buttons/)
- [kitecss](http://hiloki.github.io/kitecss/)
- [pintuer](http://www.pintuer.com/)
- [amazeui](http://amazeui.org/)
- [worldhello](http://www.worldhello.net/gotgithub/index.html)
- [linuxtoy](http://igit.linuxtoy.org/contents.html)
- [gitmagic](http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/zh_cn/)
- [rogerdudler](http://rogerdudler.github.io/git-guide/index.zh.html)
- [gitref](http://gitref.justjavac.com/)
- [book](http://git-scm.com/book/zh)
- [gogojimmy](http://gogojimmy.net/2012/01/17/how-to-use-git-1-git-basic/)
#### 18. HTTP
- [HTTP API 设计指南](http://segmentfault.com/bookmark/1230000002521721)
#### 19. 其它API
- [javascript流行库汇总](javascriptoo)
- [验证api](http://niceue.com/validator/demo/index.php)
- [underscore 中文手册](http://www.css88.com/doc/underscore/)
- [underscore源码分析](http://www.html-js.com/article/Underscorejs-source-code-analysis-of-underscorejs-source-code-analysis%203031)
- [underscore源码分析-亚里士朱德的博客](http://yalishizhude.github.io/tags/underscore/)
- [underscrejs en api](http://underscorejs.org/)
- [lodash - underscore的代替品](https://lodash.com/)
- [ext4api](http://extjs-doc-cn.github.io/ext4api/)
- [backbone 中文手册](http://www.csser.com/tools/backbone/backbone.js.html)
- [qwrap手册](http://dev.qwrap.com/resource/js/_docs/_youa/#/qw/base/loadJs_.htm)
- [缓动函数](http://easings.net/zh-cn)
- [svg 中文参考](http://www.w3school.com.cn/svg/svg_reference.asp)
- [svg mdn参考](https://developer.mozilla.org/en-US/docs/Web/SVG)
- [svg 导出 canvas](https://github.com/gabelerner/canvg)
- [svg 导出 png](https://github.com/exupero/saveSvgAsPng)
- [ai-to-svg](http://www.zamzar.com/convert/ai-to-svg/)
- [localStorage 库](https://github.com/machao/localStorage)
#### 20. 图表类
- [Highcharts 中文API](http://www.hcharts.cn/api/index.php)
- [Highcharts 英文API](http://api.highcharts.com/highcharts)
- [ECharts 百度的图表软件](http://echarts.baidu.com/ )
- [高德地图](http://lbs.amap.com/api/)
- [开源的矢量图脚本框架](http://paperjs.org/)
- [svg 地图](http://jvectormap.com/)
- [jQuery Vector Map Library](http://jqvmap.com/)
#### 21. vue
- [Vue](http://cn.vuejs.org/)
- [Vue 论坛](http://forum.vuejs.org/)
- [Vue 入门指南](http://www.cnblogs.com/aaronjs/p/3660102.html)
- [Vue 的一些资源索引](http://segmentfault.com/a/1190000000411057)
#### 21. 正则
- [JS正则表达式元字符](http://segmentfault.com/a/1190000002471140)
- [正则表达式30分钟入门教程](http://deerchao.net/tutorials/regex/regex.htm)
- [MDN-正则表达式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions)
- [ruanyifeng - RegExp对象](http://javascript.ruanyifeng.com/stdlib/regexp.html)
- [小胡子哥 - 进阶正则表达式](http://div.io/topic/764?page=1)
- [is.js](https://github.com/Cedriking/is.js/blob/master/is.js)
- [正则在线测试](http://regexper.com/)
- [haorooms正则文章](http://www.haorooms.com/search?keyword=%E6%AD%A3%E5%88%99)
#### 22. ionic
- [ionic](https://github.com/ychow/ionic-guide)
#### 23. 其它
- [Mock.js 是一款模拟数据生成器](http://mockjs.com/)
- [jsdoc 注释生成 - apidocjs](http://apidocjs.com/)
### 七. 开发规范
1. 前端
- [通过分析github代码库总结出来的工程师代码书写习惯](http://alloyteam.github.io/CodeGuide)
- [HTML&CSS编码规范 by @mdo](http://codeguide.bootcss.com/)
- [前端编码规范之js - by yuwenhui](http://yuwenhui.github.io/)
- [前端编码规范之js - by 李靖](http://www.cnblogs.com/hustskyking/p/javascript-spec.html)
- [前端开发规范手册](http://zhibimo.com/read/Ashu/front-end-style-guide/)
- [Airbnb JavaScript 编码规范（简体中文版）](https://github.com/yuche/javascript#table-of-contents)
- [AMD与CMD规范的区别](http://www.zhihu.com/question/20351507)
- [AMD与CMD规范的区别](http://www.cnblogs.com/tugenhua0707/p/3507957.html)
- [KISSY 源码规范](http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/kissy-source-style.html)
- [bt编码规范](http://codeguide.bootcss.com/)
- [规范加强版](https://github.com/Suxiaogang/Code_Guide)
- [前端代码规范 及 最佳实践](http://blog.jobbole.com/79075/)
- [百度前端规范](http://coderlmn.github.io/code-standards/)
- [百度前端规范](http://isobar-idev.github.io/code-standards/)
- [百度前端规范](http://zhuanlan.zhihu.com/fuyun/19884834)
- [ECMAScript6 编码规范--广发证券前端团队](https://github.com/gf-web/es6-coding-style/)
- [JavaScript 风格指南/编码规范（Airbnb公司版）](http://blog.jobbole.com/79484/)
- [网易前端开发规范](http://nec.netease.com/standard)
- [css模块](http://www.75team.com/archives/1049)
- [前端规范资源列表](https://github.com/ecomfe/spec)
- [前端JavaScript规范](http://greengerong.com/blog/2015/05/09/qian-duan-javascriptgui-fan/)
2. Nodejs
- [Node.js 风格指南](https://github.com/wwsun/node-style-guide)
3. PHP
- [最流行的PHP 代码规范](http://segmentfault.com/a/1190000000443795)
- [最流行的PHP 代码规范](https://github.com/hfcorriez/fig-standards/blob/zh_CN/%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md)
4. Android
- [【敏捷开发】Android团队开发规范](http://www.cnblogs.com/lcw/p/3619181.html)
- [Android 开发规范与应用](http://www.jianshu.com/p/4390f4fe19b3)
5. IOS
- [Swift Style Guide](https://github.com/linkedin/swift-style-guide)
### 八. 其它收集
#### 1. 各大公司开源项目
- Facebook
- [Facebook Projects](https://code.facebook.com/projects/web/)
- 百度 Baidu
- [百度web前端研发部](http://fex.baidu.com/)
- [百度EFE](http://efe.baidu.com/)
- [百度github](https://github.com/fex-team/)
- 腾讯 qq
- [alloyteam](http://www.alloyteam.com/)
- [alloyteam-github](http://alloyteam.github.io/)
- [alloyteam-AlloyGameEngine](https://github.com/AlloyTeam/AlloyGameEngine)
- [AlloyDesigner](http://alloyteam.github.io/AlloyDesigner/) 即时修改，即时保存，设计稿较正，其它开发辅助工具
- [H5交互页编辑器AEditor介绍](http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/) H5动画交互页开发的工具介绍
- [AEditor](http://aeditor.alloyteam.com/) H5动画交互页开发的工具
- [腾讯html5](http://cube.qq.com/)
- [腾讯开源项目](http://tencentopen.github.io)
- 奇舞团
- [奇舞团开源项目](http://75team.github.io/)
- 去哪儿
- [Qunar UED](http://ued.qunar.com/)
- 其它
- [maka](http://forum.maka.im/wordpress/)
- [值得订阅的weekly](https://github.com/fenbility/weekly-feed)
#### 2. Javascript
1. 常用
- [ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性](http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome/)
- [模拟键盘](http://mottie.github.io/Keyboard/)
- [拼音](https://github.com/hotoo/pinyin)
- [中国个人身份证号验证](https://github.com/mc-zone/IDValidator)
2. 算法
- [数据结构与算法 JavaScript 描述. 章节练习](https://github.com/Ralph-Wang/algorithm.in.js)
- [常见排序算法（JS版）](https://github.com/twobin/twobinSort)
- [经典排序](https://github.com/luofei2011/jsAgm/blob/master/js/sort.js)
- [常见排序算法-js版本](https://github.com/hechangmin/jssort)
- [JavaScript 算法与数据结构 精华集](https://github.com/lightningtgc/JavaScript-Algorithms)
- [面试常考算法题精讲](http://www.nowcoder.com/live/courses)
3. 移动端
- [fastclick](https://github.com/ftlabs/fastclick)
- [no-click-delay](https://github.com/mmastrac/jquery-noclickdelay)
4. JSON
- [模拟生成JSON数据](http://beta.json-generator.com/)
- [返回跨域JSONAPI](http://jsonp.afeld.me/)
#### 3. Html5
- [HTML5 有哪些让你惊艳的 demo？](http://www.zhihu.com/question/24398907)
- [html5 Canvas画图系列教程目录](http://jo2.org/html5-canvas-tutorial-list/)
#### 4. CSS
- [browserhacks](http://browserhacks.com/)
#### 5. jQuery
1. 焦点图
- [myfocus](https://github.com/koen301/myfocus)
- [myfocus-官方演示站](http://www.chhua.com/myfocus/)
- [SuperSlidev2.1 -- 大话主席](http://www.superslide2.com/)
- [soChange](http://www.bujichong.com/sojs/soChange/index.html)
#### 6. Ext, EasyUI, J-UI 及其它各种UI方案
1. Ext
- [extjs](https://www.sencha.com/products/extjs/)
- [ext4英文api](http://docs.sencha.com/extjs/4.0.7/)
- [ext4中文api](http://extjs-doc-cn.github.io/ext4api/)
2. EasyUI
- [jquery easyui 未压缩源代码](http://jquery-easyui.googlecode.com/svn/trunk/src/)
3. J-UI
- [J-UI](http://www.j-ui.com)
4. Other
- [MUI-最接近原生APP体验的高性能前端框架](http://dcloudio.github.io/mui/)
- [Amaze UI | 中国首个开源 HTML5 跨屏前端框架](http://amazeui.org/)
- [淘宝 HTML5 前端框架](http://m.sui.taobao.org/)
- [KISSY - 阿里前端JavaScript库](http://docs.kissyui.com/)
- [网易Nej - Nice Easy Javascript](http://nej.netease.com/)
- [Kendo UI MVVM Demo](http://demos.telerik.com/kendo-ui/mvvm/index)
- [Bootstrap](http://www.bootcss.com/)
- [Smart UI](http://smartui.chinamzz.com/)
- [雅虎UI - CSS UI](http://developer.yahoo.com/yui/grids/)
#### 7. 页面 社会化 分享功能
- [百度分享](http://share.baidu.com/) pc端
- [JiaThis](http://jiathis.com/) pc端
- [社会化分享组件](http://developer.baidu.com/soc/share) 移动端
- [ShareSDK 轻松实现社会化功能](http://www.mob.com/#/index) 移动端
- [友盟分享](http://www.umeng.com/social) 移动端
- [addthis](http://www.addthis.com/) 国外社交分享
- [一键分享到各种SNS](http://overtrue.me/share.js/)
#### 8. 富文本编辑器
- [百度 ueditor](http://ueditor.baidu.com/website/)
- [经典的ckeditor](http://ckeditor.com/)
- [经典的kindeditor](http://kindeditor.net/)
- [wysiwyg](http://www.bootcss.com/p/bootstrap-wysiwyg/)
- [一个有情怀的编辑器。Bach's Editor](http://integ.github.io/BachEditor/)
- [tower用的编辑器](https://github.com/mycolorway/simditor)
- [summernote 编辑器](https://github.com/summernote/summernote)
- [html5编辑器](http://neilj.github.io/Squire/)
- [XEditor](http://lab.hustlzp.com/XEditor/)
- [wangEditor](https://github.com/wangfupeng1988/wangEditor)
- [wangEditor-mobile--移动端编辑器](https://github.com/wangfupeng1988/wangEditor-mobile)
- [Trumbowyg - 轻量编辑器](http://alex-d.github.io/Trumbowyg/)
- [国外的一款编辑器 - tinymce](https://www.tinymce.com)
#### 9. 日历
1. PC
- [经典my97](http://www.my97.net/dp/demo/index.htm)
- [强大的独立日期选择器](http://www.cnblogs.com/gbin1/archive/2012/04/16/2452105.html)
- [fullcalendar](http://arshaw.com/fullcalendar/)
- [fullcalendar日历控件知识点集合 ](http://blog.csdn.net/francislaw/article/details/7740630)
- [中文api](http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html)
- [农历日历](https://github.com/zzyss86/LunarCalendar)
- [超酷的仿百度带节日日历老黄历控件](http://www.sucaisj.com/jiaoben/date/201509/16856.html)
- [日期格式化](http://momentjs.com/)
- [大牛日历控件](https://github.com/Johnqing/QPAYCalendar/)
- [我群某管理作品](https://github.com/Iamlars/dateMarker)
- [input按位替换-官网](http://digitalbush.com/projects/masked-input-plugin/)
- [input按位替换-github](https://github.com/digitalBush/jquery.maskedinput/tree/1.2.2)
- [bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker)
- [国外30个插件集合](http://www.vandelaydesign.com/30-best-free-jquery-plugins/)
- [JavaScript datepicker](http://dbushell.com/2012/10/09/pikaday-javascript-datepicker/)
- [Datepair.js](http://jonthornton.github.io/Datepair.js/)
- [一个风格多样的日历](https://github.com/glad/glDatePicker)
- [弹出层式的全日历](http://amsul.ca/pickadate.js/date/)
- [jquery双日历](http://www.daterangepicker.com/)
- [bootstrap-datetimepicker/](http://www.bootcss.com/p/bootstrap-datetimepicker/)
- [贤心-laydate](http://laydate.layui.com/)
- [Pikaday-微型日历](http://dbushell.github.io/Pikaday/)
- [AngularJS datepicker directives](https://github.com/g00fy-/angular-datepicker)
- [周选择日历插件](https://github.com/confidence68/Kalendae)
2. 移动
- [大气实用jQuery手机移动端日历日期选择插件](http://www.frankdemo.cn/index.php?c=content&a=show&id=115)
- [jQuery Mobile 移动开发中的日期插件Mobiscroll ](https://mobiscroll.com/)
3. Date library
- [Datejs](https://github.com/datejs/Datejs)
- [sugarjs](http://sugarjs.com/api/Date)
#### 10. 综合效果搜索平台
- [效果网](http://www.jq22.com)
- [17素材](http://www.17sucai.com/)
- [常用的JavaScript代码片段](http://microjs.com/)
#### 11. 前端工程化
1. 概述
- [前端工具大全](http://www.awesomes.cn/)
- [什么是前端工程化](https://github.com/fouber/blog/issues/10?from=timeline&isappinstalled=0#)
2. Gulp
- [Gulp官网](http://gulpjs.com/)
- [Gulp中文网](http://www.gulpjs.com.cn/)
- [gulp资料收集](https://github.com/Platform-CUF/use-gulp)
- [Gulp：任务自动管理工具 - ruanyifeng](http://javascript.ruanyifeng.com/tool/gulp.html)
- [Gulp插件](http://gulpjs.com/plugins/)
- [Gulp不完全入门教程](http://www.ido321.com/1622.html)
- [为什么使用gulp?](https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/33)
- [Gulp安装及配合组件构建前端开发一体化](http://www.dbpoo.com/getting-started-with-gulp/)
- [Gulp 入门指南](https://github.com/nimojs/gulp-book)
- [Gulp 入门指南 - nimojs](https://github.com/nimojs/blog/issues/19)
- [Gulp入门教程](http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/)
- [Gulp in Action](http://www.imooc.com/video/5692)
- [Gulp开发教程（翻译）](http://www.w3ctech.com/topic/134)
- [前端构建工具gulpjs的使用介绍及技巧](http://www.cnblogs.com/2050/p/4198792.html)
3. Grunt
- [gruntjs](http://gruntjs.com/)
- [Grunt中文网](http://www.gruntjs.net/)
- [Grunt入门教程](http://www.haorooms.com/search?keyword=grunt)
4. Fis
- [fis 官网](http://fex-team.github.io/fis-site/index.html)
- [fis](http://fis.baidu.com/)
5. webpack
- [webpack](https://github.com/webpack/webpack)
- [Webpack 中文指南](https://zhaoda.gitbooks.io/webpack/content/index.html)
- [Webpack，101入门体验](http://html-js.com/article/3009)
- [webpack入门教程](http://html-js.com/article/3113)
- [基于webpack搭建前端工程解决方案探索](http://segmentfault.com/a/1190000003499526)
- [Webpack傻瓜式指南（一）](http://zhuanlan.zhihu.com/FrontendMagazine/20367175)
- [Webpack指南](https://github.com/TJZC/Banyan/wiki/Webpack%E6%8C%87%E5%8D%97)
- [webpack指南](http://webpack.toobug.net/zh-cn/index.html)
- [webpack 教程资源收集](https://segmentfault.com/a/1190000005995267)
#### 12. 轮播图
1. pc图轮
- [单屏轮播sochange](http://www.jsfoot.com/jquery/demo/2011-09-20/192.html)
- [左右按钮多图切换](http://bxslider.com/examples/carousel-demystified)
- [fullpage全屏轮播](https://github.com/alvarotrigo/fullPage.js/)
- [haorooms资源库轮播大全](http://resource.haorooms.com/soft-6-1.html)
2. 移动端
- [无缝切换](http://www.swipejs.com/)
- [滑屏效果](http://www.idangero.us/swiper)
- [全屏fullpage](https://github.com/peunzhang/fullpage)
- [单个图片切换](https://github.com/qiqiboy/touchslider)
- [单个全屏切换](https://github.com/peunzhang/slip.js)
- [百度的切换库](http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group)
- [单个全屏切换](https://github.com/peunzhang/iSlider)
- [滑屏效果](https://github.com/saw/touch-interfaces)
- [旋转拖动设置](http://baijs.com/tinycircleslider/)
- [类似于swipe切换](http://touchslider.com/)
- [支持多种形式的触摸滑动](http://www.swiper.com.cn/demo/index.html)
- [滑屏效果](https://github.com/joker-ye/main/blob/master/wap/index.html)
- [大话主席pc移动图片轮换](http://www.superslide2.com/)
- [滑屏效果](https://github.com/hahnzhu/parallax.js)
- [基于zepto的fullpage](https://github.com/yanhaijing/zepto.fullpage)
- [[WebApp]定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应](http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html)
- [判断微信客户端的那些坑](http://loo2k.com/blog/detecting-wechat-client/)
- [可以通过javascript直接调用原生分享的工具](https://github.com/JefferyWang/nativeShare.js)
- [JiaThis 分享到微信代码](http://www.jiathis.com/help/html/weixin-share-code)
- [聊聊移动端跨平台开发的各种技术](http://fex.baidu.com/blog/2015/05/cross-mobile/)
- [前端自动化测试](http://www.zhihu.com/question/29922082)
- [多种轮换图片](http://ajccom.github.io/niceslider/)
- [滑动侧边栏](https://mango.github.io/slideout/)
#### 13. 文件上传
- [百度上传组件](http://fex-team.github.io/webuploader/)
- [上传](https://blueimp.github.io/jQuery-File-Upload/)
- [flash 头像上传](http://www.hdfu.net/)
- [图片上传预览](http://www.dropzonejs.com/)
- [图片裁剪](http://elemefe.github.io/image-cropper/)
- [图片裁剪-shearphoto](http://www.shearphoto.com/)
- [jQuery图片处理](http://www.oschina.net/project/tag/284/jquery-image-tools?lang=0&os=0&sort=view&p=2)
- [文件上传](http://fineuploader.com/)
#### 14. 模拟select
- [糖饼 select](http://aui.github.io/popupjs/doc/selectbox.html)
- [flexselect](https://github.com/rmm5t/jquery-flexselect)
- [双select](http://loudev.com/)
- [select2](http://select2.github.io/)
#### 15. 取色插件
- [类似 Photoshop 的界面取色插件](http://www.jq22.com/plugin/367)
- [jquery color](https://github.com/jquery/jquery-color/)
- [取色插件集合](http://www.oschina.net/project/tag/287/color-picker)
- [farbtastic 圆环＋正方形](https://github.com/mattfarina/farbtastic)
#### 16. 城市联动
- [jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果](http://www.ijquery.cn/?p=360)
- [移动端省市三级联动demo](http://resource.haorooms.com/softshow-33-127-1.html)
#### 17. 剪贴板
- [剪贴板](https://github.com/zeroclipboard/zeroclipboard)
- [clipboard 最新的剪切方案](http://zenorocha.github.io/clipboard.js/)
#### 18. 简繁转换
- [简繁转换](https://github.com/BYVoid/OpenCC)
#### 19. 表格 Grid
- [facebook表格](http://facebook.github.io/fixed-data-table/)
- [类似于Excel编辑表格-handsontable](http://handsontable.com/)
- [bootstrap-table插件](http://bootstrap-table.wenzhixin.net.cn/)
- [datatables](https://www.datatables.net/)
- [不错的Grid](http://w2ui.com/web/demo/grid)
#### 20. 在线演示
- [js 在线编辑 - runjs](http://runjs.cn/)
- [js 在线编辑 - jsbin](http://jsbin.com/)
- [js 在线编辑 - codepen](http://codepen.io/)
- [js 在线编辑 - jsfiddle](http://jsfiddle.net/)
- [phpfiddle](http://phpfiddle.org/)
- [java 在线编辑 - ideone](http://ideone.com/)
- [js 在线编辑 - hcharts](http://code.hcharts.cn/)
- [js 在线编辑 - jsdm](http://jsdm.com/)
- [sql 在线编辑 - sqlfiddle](http://sqlfiddle.com/)
- [mozilla 在线编辑器](https://thimble.mozilla.org)
#### 21. 播放器
- [Html5 VideoPlayer](https://github.com/zmmbreeze/DeadSimpleVideoPlayer)
#### 22. 粒子动画
- [Proton 烟花](http://a-jie.github.io/Proton/#example)
#### 23. 表单验证
- [Validform](https://github.com/haiercdboy/Validform/blob/master/README.md)
- [formvalidator](http://formvalidator.net/)
- [jQuery formValidator](http://www.cnblogs.com/wzmaodong/archive/2012/10/15/2724005.html)
- [表单验证完美解决方案](http://validform.rjboy.cn/)
#### 24. 表单美化
- [美化checkbox](http://icheck.fronteed.com/)
### 九. Nodejs
- [Node.js 包教不包会](https://github.com/alsotang/node-lessons)
- [篇幅比较少](http://rainweb.cn/article/category/Nodejs)
- [node express 入门教程](http://www.w3cfuns.com/article-5598538-1-1.html)
- [nodejs定时任务](http://my.oschina.net/u/568264/blog/193773)
- [一个nodejs博客](http://60sky.com/)
- [【NodeJS 学习笔记04】新闻发布系统](http://www.cnblogs.com/yexiaochai/p/3536547.html)
- [过年7天乐，学nodejs 也快乐](http://www.cnblogs.com/qqloving/p/3541099.html)
- [七天学会NodeJS](https://github.com/nqdeng/7-days-nodejs)
- [Nodejs学习笔记（二）--- 事件模块](http://www.cnblogs.com/zhongweiv/p/nodejs_events.html)
- [nodejs入门](http://www.cnblogs.com/liusuqi/p/3735491.html)
- [angularjs nodejs](https://github.com/zensh/jsgen)
- [从零开始nodejs系列文章](http://blog.fens.me/series-nodejs/)
- [理解nodejs](http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb)
- [nodejs事件轮询](http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/)
- [node入门](http://www.nodebeginner.org/index-zh-cn.html)
- [nodejs cms](http://ourjs.com/detail/53e1f281c5910a9806000001)
- [Node初学者入门，一本全面的NodeJS教程](http://ourjs.com/detail/529ca5950cb6498814000005)
- [NodeJS的代码调试和性能调优](http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line/)
- [runs Node.js programs through Chromium DevTools](https://github.com/Jam3/devtool)
### 十. 性能优化
1. 常规优化
- [Javascript高性能动画与页面渲染](http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering)
- [移动H5前端性能优化指南](http://isux.tencent.com/h5-performance.html)
- [5173首页前端性能优化实践](http://ued.5173.com/?p=1731)
- [给网页设计师和前端开发者看的前端性能优化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers)
- [复杂应用的 CSS 性能分析和优化建议](http://www.orzpoint.com/profiling-css-and-optimization-notes/)
- [张鑫旭——前端性能](http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/)
- [前端性能监控总结](http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html)
- [网站性能优化之CSS无图片技术](http://udc.weibo.com/2013/05/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF/)
- [web前端性能优化进阶路](http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html)
- [前端技术：网站性能优化之CSS无图片技术](http://my.eoe.cn/tuwandou/archive/4544.html)
- [浏览器的加载与页面性能优化](http://www.baiduux.com/blog/2011/02/15/browser-loading/)
- [页面加载中的图片性能优化](http://www.w3ctech.com/p/1503)
- [Hey——前端性能](http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD)
- [html优化](http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/)
- [99css——性能](http://www.99css.com/archives/tag/%E6%80%A7%E8%83%BD)
- [Yslow——性能优化](http://www.yslow.net/category.php?cid=20)
- [YSLOW中文介绍](http://www.cnblogs.com/yslow/)
- [转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化](http://www.360ito.com/article/40.html)
- [Yahoo!团队实践分享：网站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml)
- [网站性能优化指南：什么使我们的网站变慢？](http://blog.jiasule.com/i/153)
- [网站性能优化实践，减少加载时间，提高用户体验](http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html)
- [浅谈网站性能优化 前端篇](http://jaskey.github.io/blog/2014/10/17/performance/)
- [前端重构实践之如何对网站性能优化？](http://www.adinnet.cn/blog/designview/2012-7-12/678.html)
- [前端性能优化：使用媒体查询加载指定大小的背景图片](http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/)
- [网站性能系列博文](http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html)
- [加载，不只是少一点点](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml)
- [前端性能的测试与优化](http://mzhou.me/article/95310/)
- [分享网页加载速度优化的一些技巧？](http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/)
- [页面加载中的图片性能优化](http://www.f2es.com/images-bytes-opt/)
- [web前端优化(基于Yslow)](http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html)
- [网站性能优化工具大全](http://www.qianduan.net/website-performance-optimization-tool.html)
- [【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html/)
- [【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css/)
- [由12306谈谈网站前端性能和后端性能优化](http://coolshell.cn/articles/6470.html)
- [AlloyTeam——前端优化](http://www.alloyteam.com/category/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/)
- [毫秒必争，前端网页性能最佳实践](http://www.cnblogs.com/developersupport/p/3248695.html)
- [网站性能工具Yslow的使用方法](http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html)
- [前端工程与性能优化（上）：静态资源版本更新与缓存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1)
- [前端工程与性能优化（下）：静态资源管理与模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2)
- [HTTPS连接的前几毫秒发生了什么](http://blog.jobbole.com/48369/)
- [Yslow](http://uicss.cn/yslow/#more-12319)
- [Essential Web Performance Metrics — A Primer, Part 1](http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/)
- [Essential Web Performance Metrics — Part 2](http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/)
- [YUISlide,针对移动设备的动画性能优化](http://jayli.github.io/blog/data/2011/12/23/yuislide.html)
- [Improving Site Performance](http://joelglovier.com/improving-site-performance/)
- [让网站提速的最佳前端实践](http://blog.segmentfault.com/laopopo/1190000000367899)
- [Why Website Speed is Important](http://sixrevisions.com/web-development/why-website-speed-is-important/)
- [Need for Speed – How to Improve your Website Performance](http://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/)
- [阿里无线前端性能优化指南 (Pt.1 加载期优化) ](https://github.com/amfe/article/issues/1)
- [前端性能优化补充篇](http://www.haorooms.com/post/qianduan_xnyhbc)
2. 优化工具
- [JavaScript 性能分析新工具 OneProfile](http://www.html-js.com/article/3083)
- [JavaScript 堆内存分析新工具 OneHeap](http://www.html-js.com/article/3091)
3. 在线工具
- [google在线工具](https://developers.google.com/speed/pagespeed/insights/)
- [阿里测](http://www.alibench.com/)
- [阿里-免费测试服务](http://itest.aliyun.com/)
- [阿里-F2etest多浏览器兼容性测试解决方案](https://github.com/alibaba/f2etest)
- [js性能测试](http://jsperf.com/)
- [轻松玩转PDF](http://smallpdf.com/cn)
### 十一. 前端架构
- [技术架构](http://www.zhihu.com/topic/19612641)
- [前端架构](http://saito.im/note/The-Architecture-of-F2E/)
- [如何成为前端架构师](http://www.zhihu.com/question/24092572)
- [关于前端架构-张克军](http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html)
- [百度腾讯offer比较（腾讯游戏VS百度基础架构）](http://www.zhihu.com/question/25583350)
### 十二. 个人作品
#### 1. 推荐作品
- [winter代码片段需要翻墙](https://gist.github.com/wintercn)
- [fgm](http://www.fgm.cc/learn/)
- [岑安作品集](https://github.com/hongru/hongru.github.com)
- [当耐特demo集合](http://kmdjs.github.io/)
- [米空格 js作品](http://www.laoshu133.com/Lab/)
- [myFocus](http://koen301.github.io/)
- [SeaJS组件库](http://panxuepeng.github.io/seajslib/)
- [颜海镜作品](http://yanhaijing.com/myProject/)
- [脚儿网作品](http://jo2.org/category/myworks/)
- [javascript个人作品](http://www.cnitblog.com/yemoo/category/3107.html)
- [妙味的雷东升游戏作品](http://bbs.miaov.com/forum.php?mod=viewthread&tid=7790)
- [javascript作品集](http://bbs.csdn.net/topics/380227212)
- [云五笔，灰度产生生成工具](https://github.com/TooBug/works)
- [项目主页](http://koen301.github.io/)
- [个性的作品主页](http://zaole.net/)
- [ucren js demos 集](http://ucren.com/blog/demos)
- [智能社](http://www.zhinengshe.com/works_list.html)
- [实例陈列架](http://demos.shizuwu.cn/)
- [zoye demo](http://zoye.sinaapp.com/demo)
- [王员外](http://lab.wangyuanwai.com/)
- [平凡](http://pingfan1990.sinaapp.com)
- [jyg 游戏案例](http://www.lovewebgames.com/)
- [很多jquery插件](http://www.helloweba.com/list.html)
- [不羁虫 - soJs 作品系列](http://www.bujichong.com/sojs/api/index.html)
- [frozenui](http://frozenui.github.io/case.html)
- [黑白棋](http://js-game.github.io/othello/)
- [fromone](http://yansm.github.io/fromone/index.html)
- [前端路上作品集](https://refined-x.com/projects/)
#### 2. 群员作品
- [MDialog - [合肥-M.J]](http://demo.webjyh.com/)
- [轮播图 - [上海－冷静]](http://sandbox.runjs.cn/show/do6zlrrk )
- [[广州—坚壳]](http://www.replace5.com/)
- [[成都 - 无痕] 感恩节专题](http://www.seejs.com/demos/)
- [[球霸天]](http://hacke2.github.io/works)
- [[北京-小数]](http://www.cnblogs.com/mcat/)
- [[ptf] Magix 工具](http://thx.github.io/magix/)
- [[杭州-Pft] Magix 基于 MVC 结构和 Hash 驱动的 OPOA（One Page One Application）应用](http://thx.github.io/magix/)
- [[上海-剧中人]-实验室](http://bh-lay.com/labs/)
- [[上海-豪情 ] 作品集合](http://jikeytang.github.io)
- [[成都-feeling]](http://guoshan.sinaapp.com/)
- [[上海-angela]](http://www.cnblogs.com/liyunhua/)
- [[海南-hank]作品](http://hcjp.github.io/work/demo/)
- [[上海-张力]博客](https://github.com/yibuyisheng/blogs/issues)
- [[上海-zenki]作品](http://zkske121.github.io/)
- [移动端图案解锁](http://01google.sinaapp.com/locker.html)
- [[合肥-M.J] - MPreview 移动端图片预览组](https://github.com/webjyh/MPreview.mobile)
- [[合肥-M.J] - Mexam 移动端在线做题组](https://github.com/webjyh/Mexam)
- [[北京-苏瑞] - dancer小人](http://letyougo.github.io/dancer/)
- [[上海-玄沐]- 个人网站](http://k.swao.cn/js/)
- [[厦门-二哲]- 个人博客](http://www.meckodo.com/)
#### 3. 国外大牛精品
- [pazguille](http://pazguille.me/)
### 十三. 简历
1. 生成
- [MarkDown在线简历工具](https://github.com/geekcompany/DeerResume)
- [MarkDown在线简历工具](http://www.deercv.com/)
2. 模板
- [简历](http://hcy2367.github.io/resume/)
- [张伦](http://ncuey.sinaapp.com/CrispElite/ )
- [简历](https://github.com/hacke2/ResumeSample)
- [翁天信](http://blog.dandyweng.com/2013/07/how-my-website-was-created/)
- [动画方式的简历](http://www.webhek.com/misc/interactive-resume/)
- [组件丰富简历](http://www.linqing07.com/resume.html)
- [简历池](http://www.mojianli.com/resume/view)
- [haorooms博客](http://www.haorooms.com/about)
- [Justin Young](http://cv.youngdze.com/)
- [各个程序员简历模板](https://github.com/geekcompany/ResumeSample)
### 十四. 面试题
- 前端
1. [那几个月在找工作（百度，网易游戏）](http://www.nowcoder.com/discuss/3196)
2. [名企笔试大全](http://group.jobbole.com/category/tech/interview-test/)
3. [2016校招内推 -- 阿里巴巴前端 -- 三面面试经历 ](http://www.cnblogs.com/imwtr/p/4685546.html)
4. [年后跳槽那点事：乐视+金山+360面试之行](http://www.cnblogs.com/lvdabao/p/3660707.html)
5. [拉勾网js面试题](http://www.cnblogs.com/52cik/p/js-question-lg.html)
6. [前端面试](http://www.cnblogs.com/allenxing/p/3724382.html)
7. [前端开发面试题](http://segmentfault.com/a/1190000000465431)
8. [百度面试](https://github.com/fex-team/interview-questions)
9. [前端工作面试问题](https://github.com/h5bp/Front-end-Developer-Interview-Questions)
10. [前端开发面试题](http://segmentfault.com/a/1190000000465431)
11. [5个经典的前端面试问题](http://ourjs.com/detail/5%E4%B8%AA%E7%BB%8F%E5%85%B8%E7%9A%84%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98)
12. [如何面试一名前端开发工程师？](http://www.html-js.com/article/Large-search-front-team-column%202961)
13. [前端实习生面试总结 ](http://www.cnblogs.com/xiaoruo/p/4665163.html)
14. [史上最全 前端开发面试问题及答案整理](https://github.com/hawx1993/Front-end-Interview-questions)
15. [BAT及各大互联网公司2014前端笔试面试题：JavaScript篇](http://blog.jobbole.com/78738/)
16. [前端开发面试题大收集](https://github.com/paddingme/Front-end-Web-Development-Interview-Question)
17. [收集的前端面试题和答案](https://github.com/qiu-deqing/FE-interview)
18. [如何面试前端工程师](http://www.zhihu.com/question/19568008)
19. [前端开发面试题](https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md)
20. [牛客网-笔试面经](http://www.nowcoder.com/discuss?type=2)
21. [Front End Developer Questions](http://markyun.github.io/2015/Front-end-Developer-Questions/)
22. [40 个重要的 HTML5 面试问题及答案](http://www.codeceo.com/article/40-important-html5-interviews.html)
- java
- [Java工程师笔试题整理[校招篇]](https://zhuanlan.zhihu.com/p/21513402)
### 十五. iconfont
- [中文字体](http://www.zhihu.com/question/21253343)
- [淘宝字库](http://iconfont.cn)
- [字体](http://ux.etao.com/fonts)
- [制作教程](http://iconfont.cn/help/platform.html)
- [zhangxinxu-icommon](http://www.zhangxinxu.com/wordpress/?s=icomoon)
- [icommon](http://icomoon.io/app/)
- [用字体在网页中画ICON图标(推荐教程)](http://imooc.com/learn/243)
- [字体压缩工具](http://font-spider.org/) 感谢初级群 [深圳-小鱼] 的推荐
### 十六. 开发工具类
1. 前端开发工具
- [IntelliJ IDEA 简体中文专题教程](https://github.com/judasn/IntelliJ-IDEA-Tutorial)
- [Webstorm,InterllIdea,Phpstorm](http://t.cn/8kZZ1Uy)
- [SublimeText](https://github.com/jikeytang/sublime-text)
- [Atom](https://atom.io/)
- [Atom飞行手册（中文版）](https://www.gitbook.com/book/wizardforcel/atom-flight-manual-zh-cn/details)
- [Atom-vue代码高亮](https://github.com/CYBAI/language-vue-component)
- [visual studio code](https://code.visualstudio.com/)
- [visual studio code 使用指南](http://i5ting.github.io/vsc/)
2. Chrome, Firebug, Filddle 调试
1. Fiddler
- [Fiddler调式使用知多少(一)深入研究](http://www.cnblogs.com/tugenhua0707/p/4623317.html)
- [微信fiddle](http://www.cnblogs.com/strick/p/4570006.html)
- [微信fiddle](http://gaoboy.com/article/26.html)
2. Chrome
- [Google Chrome 官方](https://developer.chrome.com/devtools)
- [Chrome - 基础](http://www.cnblogs.com/constantince/p/4565261.html)
- [Chrome - 进阶](http://www.cnblogs.com/constantince/p/4579121.html)
- [Chrome - 性能](http://www.cnblogs.com/constantince/p/4585983.html)
- [Chrome - 性能进阶](http://www.cnblogs.com/constantince/p/4607497.html)
- [Chrome - 移动](http://www.cnblogs.com/constantince/p/4624241.html)
- [Chrome - 使用技巧](http://www.cnblogs.com/liyunhua/p/4544738.html)
- [Chrome - Console控制台不完全指南](http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html)
- [Chrome - Workspace使浏览器变成IDE](http://c7sky.com/chrome-devtools-workspace.html)
- [network面板](http://www.html-js.com/article/Nothing-blind%202975)
- [chrome开发工具快捷键](http://anti-code.com/devtools-cheatsheet/)
- [chrome调试工具常用功能整理](http://www.html-js.com/article/2327)
- [Chrome 开发工具 Workspace 使用](http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/)
- [Chrome神器Vimium快捷键学习记录 ](http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html)
- [sass调试-w3cplus](http://www.w3cplus.com/sassguide/debug.html)
- [如何更专业的使用Chrome开发者工具-w3cplus](http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html)
- [chrome调试canvas](http://sentsin.com/web/253.html)
- [chrome profiles1](https://developer.chrome.com/devtools/index)
- [chrome profiles2](http://h5dev.uc.cn/article-25-1.html)
- [chrome profiles3](http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles)
- [chrome移动版调试](https://developers.google.com/chrome-developer-tools/docs/mobile-emulation)
- [chrome调试](http://ued.taobao.org/blog/?p=5534)
- [chrome的调试](http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html)
- [chrome console 命令详解](https://developers.google.com/chrome-developer-tools/docs/commandline-api)
- [查看事件绑定1](http://www.cnblogs.com/leonkao/p/3809655.html)
- [查看事件绑定2](http://www.cnblogs.com/xiaoyao2011/p/3447421.html)
- [神器——Chrome开发者工具(一)](http://segmentfault.com/blog/xuelang/1190000000683599)
- [奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍)](https://xinranliu.me/2015-05-22-qiqu-performance/)
- [chrome 开发者工具的 15 个小技巧](http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html)
- [Chrome开发者工具不完全指南](http://1ke.co/course/361)
- [Chrome 开发者工具使用技巧](http://segmentfault.com/a/1190000003882567)
- [Chrome渲染分析之Rendering工具使用(1)](http://www.ghugo.com/chrome-rendering-tools-1/)
- [Chrome渲染分析之Rendering工具使用(2)](http://www.ghugo.com/chrome-rendering-tools-2/)
- [Chrome渲染分析之Rendering工具使用(3)](http://www.ghugo.com/chrome-rendering-tools-3/)
- [像 Sublime Text 一样使用 Chrome DevTools](http://chinagdg.org/2015/12/%E5%83%8F-sublime-text-%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8-chrome-devtools/)
- [Chorme 35个开发者工具的小技巧](http://www.w3cplus.com/tools/dev-tips.html)
- [Chrome 实用调试技巧](http://blog.lxjwlt.com/2016/07/23/chrome.html)
3. Firebug
- [firebug视频教程](http://www.imooc.com/learn/137)
- [firefox 模拟器](https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE)
- [console.log 命令详解](http://www.cnblogs.com/ctriphire/p/4116207.html)
- [Firebug入门指南](http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html)
- [Firebug控制台详解](http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html)
- []()
4. 移动,微信调试
- [微信调试的那些事](http://liyaodong.com/2015/07/06/%E5%BE%AE%E4%BF%A1%E8%B0%83%E8%AF%95%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B/)
- [微信调试官网](http://blog.qqbrowser.cc/)
- [微信公众号本地调试](http://blog.qqbrowser.cc/wei-xin-gong-zhong-hao-ben-di-diao-shi/)
- [微信、手Q、Qzone之x5内核inspect调试解决方案](http://bbs.mb.qq.com/thread-243399-1-1.html)
- [浏览器端调试安卓](https://openstf.github.io/)
- [移动端前端开发调试](http://yujiangshui.com/multidevice-frontend-debug/)
- [使用 Chrome 远程调试 Android 设备](https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md)
- [mac移动端调试](http://plus.uc.cn/document/webapp/doc5.html)
- [mac移动端调试](http://www.mihtool.com/)
- [无线调试攻略](http://thx.github.io/mobile/debugging-in-mobile/)
- [无线调试攻略](http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile/)
- [屌爆了,完美调试 微信webview(x5)](http://www.jianshu.com/p/ccf124f1f74b)
- [远程console](http://jsconsole.com/)
- [微信调试工具](http://blog.qqbrowser.cc/)
- [各种真机远程调试方法汇总](https://github.com/jieyou/remote_inspect_web_on_real_device)
- [手机测试自己写的web页面](http://www.zhihu.com/question/37361845)
5. iOS Simulator
- [Simulator](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html)
- [Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得](http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary/)
3. img
- [loading img](http://preloaders.net/en/circular)
- [智图-图片优化平台](http://zhitu.isux.us/)
- [在线png优化](https://tinypng.com/)
4. 生成二维码
- [生成二维码](http://cli.im/)
5. 浏览器同步
- [puer](https://github.com/leeluolee/puer)
- [liveReload](http://livereload.com/)
- [f5](http://getf5.com/)
- [File Watchers](http://geek100.com/2608/)
6. 在线PPT制作
- [nodePPT](http://js8.in/2013/11/16/%E6%8E%A8%E8%8D%90nodeppt%EF%BC%9A%E4%BD%BF%E7%94%A8markdown%E8%AF%AD%E6%B3%95%E6%9D%A5%E5%86%99%E7%BD%91%E9%A1%B5ppt/)
- [PPT](https://github.com/ksky521/nodePPT)
- [reveal](https://github.com/hakimel/reveal.js/)
- [slippy](https://github.com/Seldaek/slippy)
### 十七. 前端导航网站
- [前端导航](http://whycss.com/)
- [前端网址导航](http://www.daqianduan.com/nav)
- [前端名录](http://sentsin.com/daohang/)
- [前端导航](http://123.jser.us/)
- [前端开发资源](http://www.css88.com/nav/)
- [前端开发仓库 - 众多效果的收集地](http://code.ciaoca.com/)
- [前端资源导航](https://github.com/jnoodle/f2e-collect)
- [F2E 前端导航](http://f2e.im/static/pages/nav/index.html)
- [前端收藏夹](http://w3ctrain.github.io)
- [前端导航](http://fenav.com/)
- [前端工具箱](http://www.awesomes.cn/)
- [前端人俱乐部-灵感_Idea](http://f2er.club/)
- [haorooms前端导航](http://www.haorooms.com/nav)
### 十八. 常用CDN
- [新浪CDN](http://lib.sinaapp.com/)
- [百度静态资源公共库](http://cdn.code.baidu.com/)
- [360网站卫士常用前端公共库CDN服务](http://libs.useso.com/)
- [Bootstrap中文网开源项目免费 CDN 服务](http://www.bootcdn.cn/)
- [开放静态文件 CDN - 七牛](http://staticfile.org/)
- [CDN加速 - jq22](http://www.jq22.com/cdn)
- [jQuery CDN](http://code.jquery.com/)
- [Google jQuery CDN](http://www.google-jquery-cdn.com/)
- [微软CDN](http://www.asp.net/ajax/cdn)
### 十九. Git,SVN,Github
1. Git
- [git-scm](http://git-scm.com/)
- [廖雪峰-Git教程](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000)
- [git-for-windows](https://git-for-windows.github.io/)
- [GitHub 添加 SSH keys](http://daemon369.github.io/git/2015/03/10/add-ssh-keys-for-github/)
- [gogithub](http://www.worldhello.net/gotgithub/index.html)
- [git常规命令练习](http://pcottle.github.io/learnGitBranching/)
- [git的资料整理](https://github.com/xirong/my-git)
- [我所记录的git命令（非常实用）](http://www.cnblogs.com/fanfan259/p/4810517.html)
- [企业开发git工作流模式探索部分休整](https://github.com/xirong/my-git/blob/master/git-workflow-tutorial.md)
- [GitHub 漫游指南](https://github.com/phodal/github-roam)
- [GitHub秘籍](https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md)
- [使用git和github进行协同开发流程](http://livoras.com/post/28)
- [动画方式练习git](http://onlywei.github.io/explain-git-with-d3/)
- [版本管理工具介绍—Git篇](http://www.imooc.com/learn/208)
- [版本控制入门 – 搬进 Github](http://www.imooc.com/learn/390)
- [Git动画演示](http://pcottle.github.io/learnGitBranching/?demo)
2. SVN
- [版本管理工具介绍---SVN篇](http://www.imooc.com/learn/109)
================================================
FILE: react.md
================================================
# React-QQ群(530415177)
阅读此群规之前先学习总群群规：[联盟群群规](http://www.kancloud.cn/jikeytang/qq/87646)，没有加入的可以私聊群主[豪情](http://jikey.cnblogs.com)加入。
加入等级参考[JS高级前端开发群加群说明](http://www.cnblogs.com/jikey/p/4426105.html)。
跟React群的区别：
- 异：工作时间综合性技术话题为主，包括框架，非框架的，业余时间产品，市场，运营创业话题为副。
- 同：都是高质量技术交流群，业余时间可以交流产品，市场，运营创业等话题。
核心点：任何时间禁止闲聊，禁止技术无关的讨论，禁止技术无关的大表情
----
### 如何优雅地使用此文档
1. 入门先从官网文档入手，粗略过一遍有个印象，力求回查时能找到对应的关键字或位置。
- [React-china中文](http://react-china.org/)
- [React英文官网](https://facebook.github.io/react/)
- [Facebook组织](https://github.com/facebook)
2. 发出一个问题之后，不要暂时的离开电脑，如果没有把握先不要提问。
3. 珍惜每一次提问，感恩每一次反馈，每个人工作还是业余之外抽出的时间有限，充分准备好应有的资源之后再发问，有利于问题能够高效质量地得到解决。尤其是具备解决问题能力的人，通常时间都很宝贵。
4. 先搜索，再思考，最后再提问，很多人把这个顺序搞反了。
5. - [如何优雅地向前辈或者高手请教技术问题？](https://www.zhihu.com/question/25464141)
以上部分观点出自此文 [如何优雅地使用 Stack Overflow](http://www.zhihu.com/question/20824615)
### 一. 资源教程
1. 综合类
- [react-redux-links](https://github.com/markerikson/react-redux-links)
- [react-faq](https://github.com/timarney/react-faq)
2. 入门类
3. 英文教程
4. 社区
5. 视频教程
### 二. 文档
- API
- router
### 三. 组件
#### 1. 官方组件
#### 2. 其它组件
- UI类
- 表格
- 分页
- 移动
- 微信
- 日历
### 四. 示例
- 综合示例
- Ajax
- Webpack
### 五. 开发工具相关
1. Atom
2. Sublime-text
3. Webstorm
### 六. 答疑
### 七. 源码学习
### 八. 框架相关
================================================
FILE: reg.md
================================================
### 以下是常用的代码收集，没有任何技术含量，只是填坑的积累。转载请注明出处，谢谢。
### 常用的js正则表达式
```js
//正整数
/^[0-9]*[1-9][0-9]*$/;
//负整数
/^-[0-9]*[1-9][0-9]*$/;
//正浮点数
/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
//负浮点数
/^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
//浮点数
/^(-?\d+)(\.\d+)?$/;
//email地址
/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
//url地址
/^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$/;
或：^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$
//年/月/日（年-月-日、年.月.日）
/^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;
//匹配中文字符
/[\u4e00-\u9fa5]/;
//匹配帐号是否合法(字母开头，允许5-10字节，允许字母数字下划线)
/^[a-zA-Z][a-zA-Z0-9_]{4,9}$/;
//匹配空白行的正则表达式
/\n\s*\r/;
//匹配中国邮政编码
/[1-9]\d{5}(?!\d)/;
//匹配身份证
/\d{15}|\d{18}/;
//匹配国内电话号码
/(\d{3}-|\d{4}-)?(\d{8}|\d{7})?/;
//匹配IP地址
/((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/;
//匹配首尾空白字符的正则表达式
/^\s*|\s*$/;
//匹配HTML标记的正则表达式
< (\S*?)[^>]*>.*?|< .*? />;
//sql 语句
^(select|drop|delete|create|update|insert).*$
//提取信息中的网络链接
(h|H)(r|R)(e|E)(f|F) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)?
//提取信息中的邮件地址
\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
//提取信息中的图片链接
(s|S)(r|R)(c|C) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)?
//提取信息中的 IP 地址
(\d+)\.(\d+)\.(\d+)\.(\d+)
//取信息中的中国手机号码
(86)*0*13\d{9}
//提取信息中的中国邮政编码
[1-9]{1}(\d+){5}
//提取信息中的浮点数（即小数）
(-?\d*)\.?\d+
//提取信息中的任何数字
(-?\d*)(\.\d+)?
//电话区号
^0\d{2,3}$
//腾讯 QQ 号
^[1-9]*[1-9][0-9]*$
//帐号（字母开头，允许 5-16 字节，允许字母数字下划线）
^[a-zA-Z][a-zA-Z0-9_]{4,15}$
//中文、英文、数字及下划线
^[\u4e00-\u9fa5_a-zA-Z0-9]+$
```
================================================
FILE: ui.md
================================================
# UI交流群规
[在线地址](http://t.cn/RL2NtqX) `http://t.cn/RL2NtqX`
UI设计交流◑﹏◐1群 92588284
群介绍：
此群藏龙卧虎，国内一线资深设计师都藏匿于此。
此群高手甚多，全球顶尖理念传道大道尽汇于此。
群背景：此群是有丰富移动UI-APP设计经验的群主[静]建立的供大家学习交流的一个平台，我们的目的是资源能够共享，使思维能够碰撞，使传播能够长远，使分享更加的容易。
由于我群是以UI为交集使大伙聚在一起，所以要让我们共同的价值观更加的融会爆发，不建议探讨非UI之外的话题，尤其是代码或后台开发相关的。
---
### 一. 如何提问:
1. 请组织好相关文字，用专业的语言描述错误发生的场景。比如：在此操作中，用了选择工具不能移动图层。等等。
2. 文字描述不清的bug，用截图示意，且要说明两种状态：现状或期望的状态。
参考：
- [X-Y 问题](http://coolshell.cn/articles/10804.html)
- [向别人求助时有哪些「潜」规则？](http://www.zhihu.com/question/21218381)
- [如何在知乎提一个好问题？](http://www.zhihu.com/question/19555761)
- [如何优雅地向前辈或者高手请教技术问题？](http://www.zhihu.com/question/25464141)
- [提问的艺术-ZZ](http://www.awflasher.com/blog/archives/200)
### 二. 禁问:
日常生活废话禁问，主观性的问题禁问，概念性的问题禁问。
- 早上问早，晚上道晚安。聊天起于问早，止于呵呵。
- 有没有人在？
- 谁能帮我解决一个问题？
- 有没有jQuery高手在等？
- 群里有人做过XX的东西吗？等等类似的问题。
- 编辑器哪个工具好用？webstorm还是sublime还是vim？
- 什么是Javascript？什么是Ajax?
建议的问法是：
- 1. 有问题直接问。比如：前端的岗位特点是什么？
- 2. 直接说场景：我在做xx端东西的时候，在window 7平台的IE7版本下遇到了左右不对齐问题，具体如图所示img，代码地址：http://www.jsbin.com/xxxx，在百度中找到的答案，试了之后还是有同样的问题。请有空的同学帮我看看是什么问题？
如果你的问题暂时没人理，那表示有空的同学都未涉猎，赶紧找其它办法。
### 三. 禁发:
- 广告，招聘，找工作，找实习，找私活者，接私活，推广(如极客邀请加入)，明星八卦，禁群内签到，假红包，禁语音，禁打开视频，等与前端技术或职业探讨主题无关的内容或行为，禁发超过一屏的长代码，不太习惯自己退，违者踢。
- 禁发无意义的大图片，建议发qq提供的默认的等于行距表情，约束这个目的在于：
1. 人脑对图片的接受速度明显快于文字，过多的无意义图片会分散讨论的主题。
2. 不方便回查，或聊天记录中寻找有价值的消息。
3. 另外这是一个信息爆炸时代，人脑的接收是有上限的，过多的垃圾信息会占用有限的带宽。
- 禁止在群邮件中无意义回复，每次一个人回复是一次消息的广播，每个人都会收到，会产生信息垃圾。
- 禁止在群邮件中回复招聘或其它通知邮件。因为你的每一次回复将会有2000多人同时收到，而这条回复对其它人是没有任何意义的。
- 本群不欢迎纯hr的交流，公司技术人员内推招聘发群邮件，如有违反，直接踢，不另行引导或通知。
- 禁发超过文本行距的大gif。
### 四. 警告:
- 字体：微软雅黑，10，禁加粗，禁加斜，禁加下划线，字体颜色不建议特别刺眼的颜色。
- 禁止闲聊，或无意义回复。
- 提问之前最好百度，google过，着重培养的是一种能力或方法，不是一个结果。
- 不建议直接索要代码，可以追问技术实现的思路或方法。
### 五. 资源教程:
1. 综合类
- [前端知识体系](http://www.cnblogs.com/sb19871023/p/3894452.html)
2. 入门类
- [前端入门教程](http://www.cnblogs.com/jikey/p/3613082.html)
3. 效果类
- [弹出层](http://www.imooc.com/learn/58)
- [焦点图轮播特效](http://www.imooc.com/learn/18)
4. 工具类
- [css sprite 雪碧图制作](http://www.imooc.com/learn/93)
- [版本控制入门 – 搬进 Github](http://www.imooc.com/learn/390)
- [Grunt-beginner前端自动化工具](http://www.imooc.com/learn/30)
5. 慕课专题
- [张鑫旭 - 慕课系列](http://www.imooc.com/space/teacher/id/197450)
- [lyn - 慕课系列](http://www.imooc.com/space/teacher/id/104593)
- [艾伦 - 慕课系列](http://www.imooc.com/space/teacher/id/290139)
- [碧仔 - Hello，移动WEB](http://www.imooc.com/view/494)
### 六. 作品展示:
### 七. 设计门户网站
1. 集合网站
- [设计师导航网站](http://hao.uisdc.com/)
- [uehtml网络收藏](http://so.uehtml.com/)
2. 门户网站
- [最流行的PHP 代码规范](http://www.zcool.com.cn/)
- [最流行的PHP 代码规范](http://www.ui.cn/)
3. 英文设计网站
- [【敏捷开发】Android团队开发规范](http://www.cnblogs.com/lcw/p/3619181.html)
- [Android 开发规范与应用](http://www.jianshu.com/p/4390f4fe19b3)
4. 其它网站
- [涂鸦网站](http://www.poocg.com/)
### 八. 素材网站
#### 1. ICON搜索
- [Facebook Projects](https://code.facebook.com/projects/web/)
- [百度web前端研发部](http://fex.baidu.com/)
- [百度EFE](http://efe.baidu.com/)
- [百度github](https://github.com/fex-team/)
- [alloyteam](http://www.alloyteam.com/)
- [alloyteam-github](http://alloyteam.github.io/)
- [alloyteam-AlloyGameEngine](https://github.com/AlloyTeam/AlloyGameEngine)
- [AlloyDesigner](http://alloyteam.github.io/AlloyDesigner/) 即时修改，即时保存，设计稿较正，其它开发辅助工具
- [H5交互页编辑器AEditor介绍](http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/) H5动画交互页开发的工具介绍
- [AEditor](http://aeditor.alloyteam.com/) H5动画交互页开发的工具
- [maka](http://forum.maka.im/wordpress/)
- [值得订阅的weekly](https://github.com/fenbility/weekly-feed)
- [腾讯html5](http://cube.qq.com/)
- [奇舞团开源项目](http://75team.github.io/)
- [Qunar UED](http://ued.qunar.com/)
#### 2. PSD其它搜索
1. 常用
- [ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性](http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome/)
- [模拟键盘](http://mottie.github.io/Keyboard/)
- [拼音](https://github.com/hotoo/pinyin)
- [中国个人身份证号验证](https://github.com/mc-zone/IDValidator)
2. 算法
- [数据结构与算法 JavaScript 描述. 章节练习](https://github.com/Ralph-Wang/algorithm.in.js)
- [常见排序算法（JS版）](https://github.com/twobin/twobinSort)
- [经典排序](https://github.com/luofei2011/jsAgm/blob/master/js/sort.js)
- [常见排序算法-js版本](https://github.com/hechangmin/jssort)
- [JavaScript 算法与数据结构 精华集](https://github.com/lightningtgc/JavaScript-Algorithms)
- [面试常考算法题精讲](http://www.nowcoder.com/live/courses)
- []()
3. 移动端
- [fastclick](https://github.com/ftlabs/fastclick)
- [no-click-delay](https://github.com/mmastrac/jquery-noclickdelay)
4. JSON
- [模拟生成JSON数据](http://beta.json-generator.com/)
- [返回跨域JSONAPI](http://jsonp.afeld.me/)
#### 3. Html5
- [HTML5 有哪些让你惊艳的 demo？](http://www.zhihu.com/question/24398907)
#### 4. CSS
- [browserhacks](http://browserhacks.com/)
#### 5. jQuery
1. 焦点图
- [myfocus](https://github.com/koen301/myfocus)
- [myfocus-官方演示站](http://www.chhua.com/myfocus/)
- [SuperSlidev2.1 -- 大话主席](http://www.superslide2.com/)
- [soChange](http://www.bujichong.com/sojs/soChange/index.html)
#### 6. Ext, EasyUI, J-UI 及其它各种UI方案
1. Ext
- [extjs](https://www.sencha.com/products/extjs/)
- [ext4英文api](http://docs.sencha.com/extjs/4.0.7/)
- [ext4中文api](http://extjs-doc-cn.github.io/ext4api/)
- []()
2. EasyUI
- [jquery easyui 未压缩源代码](http://jquery-easyui.googlecode.com/svn/trunk/src/)
3. J-UI
- [J-UI](http://www.j-ui.com)
4. Other
- [MUI-最接近原生APP体验的高性能前端框架](http://dcloudio.github.io/mui/)
- [Amaze UI | 中国首个开源 HTML5 跨屏前端框架](http://amazeui.org/)
- [淘宝 HTML5 前端框架](http://m.sui.taobao.org/)
- [KISSY - 阿里前端JavaScript库](http://docs.kissyui.com/)
- [网易Nej - Nice Easy Javascript](http://nej.netease.com/)
- [Kendo UI MVVM Demo](http://demos.telerik.com/kendo-ui/mvvm/index)
- [Bootstrap](http://www.bootcss.com/)
- [Smart UI](http://smartui.chinamzz.com/)
- [雅虎UI - CSS UI](http://developer.yahoo.com/yui/grids/)
#### 7. 页面 社会化 分享功能
- [百度分享](http://share.baidu.com/) pc端
- [JiaThis](http://jiathis.com/) pc端
- [社会化分享组件](http://developer.baidu.com/soc/share) 移动端
- [ShareSDK 轻松实现社会化功能](http://www.mob.com/#/index) 移动端
- [友盟分享](http://dev.umeng.com/social/android/quick-integration) 移动端
#### 8. 富文本编辑器
- [百度 ueditor](http://ueditor.baidu.com/website/)
- [经典的ckeditor](http://ckeditor.com/)
- [经典的kindeditor](http://kindeditor.net/)
- [wysiwyg](http://www.bootcss.com/p/bootstrap-wysiwyg/)
- [一个有情怀的编辑器。Bach's Editor](http://integ.github.io/BachEditor/)
- [tower用的编辑器](https://github.com/mycolorway/simditor)
- [summernote 编辑器](https://github.com/summernote/summernote)
- [html5编辑器](http://neilj.github.io/Squire/)
- [XEditor](http://lab.hustlzp.com/XEditor/)
- [wangEditor](https://github.com/wangfupeng1988/wangEditor )
#### 9. 日历
1. PC
- [经典my97](http://www.my97.net/dp/demo/index.htm)
- [强大的独立日期选择器](http://www.cnblogs.com/gbin1/archive/2012/04/16/2452105.html)
- [fullcalendar](http://arshaw.com/fullcalendar/)
- [fullcalendar日历控件知识点集合 ](http://blog.csdn.net/francislaw/article/details/7740630)
- [中文api](http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html)
- [农历日历](https://github.com/zzyss86/LunarCalendar)
- [超酷的仿百度带节日日历老黄历控件](http://www.sucaisj.com/jiaoben/date/201509/16856.html)
- [日期格式化](http://momentjs.com/)
- [大牛日历控件](https://github.com/Johnqing/QPAYCalendar/)
- [我群某管理作品](https://github.com/Iamlars/dateMarker)
- [input按位替换-官网](http://digitalbush.com/projects/masked-input-plugin/)
- [input按位替换-github](https://github.com/digitalBush/jquery.maskedinput/tree/1.2.2)
- [bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker)
- [国外30个插件集合](http://www.vandelaydesign.com/30-best-free-jquery-plugins/)
- [JavaScript datepicker](http://dbushell.com/2012/10/09/pikaday-javascript-datepicker/)
- [Datepair.js](http://jonthornton.github.io/Datepair.js/)
- [一个风格多样的日历](https://github.com/glad/glDatePicker)
- [弹出层式的全日历](http://amsul.ca/pickadate.js/date/)
- [jquery双日历](http://www.daterangepicker.com/)
2. 移动
- [大气实用jQuery手机移动端日历日期选择插件](http://www.frankdemo.cn/index.php?c=content&a=show&id=115)
- [jQuery Mobile 移动开发中的日期插件Mobiscroll ](https://mobiscroll.com/)
3. Date library
- [Datejs](https://github.com/datejs/Datejs)
- [sugarjs](http://sugarjs.com/api/Date)
#### 10. 综合效果搜索平台
- [效果网](http://www.jq22.com)
- [17素材](http://www.17sucai.com/)
- [常用的JavaScript代码片段](http://microjs.com/)
#### 11. 前端工程化
1. 概述
- [前端工具大全](http://www.awesomes.cn/)
- [什么是前端工程化](https://github.com/fouber/blog/issues/10?from=timeline&isappinstalled=0#)
2. Gulp
- [Gulp官网](http://gulpjs.com/)
- [Gulp中文网](http://www.gulpjs.com.cn/)
- [gulp资料收集](https://github.com/Platform-CUF/use-gulp)
- [Gulp：任务自动管理工具 - ruanyifeng](http://javascript.ruanyifeng.com/tool/gulp.html)
- [Gulp插件](http://gulpjs.com/plugins/)
- [Gulp不完全入门教程](http://www.ido321.com/1622.html)
- [为什么使用gulp?](https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/33)
- [Gulp安装及配合组件构建前端开发一体化](http://www.dbpoo.com/getting-started-with-gulp/)
- [Gulp 入门指南](https://github.com/nimojs/gulp-book)
- [Gulp 入门指南 - nimojs](https://github.com/nimojs/blog/issues/19)
- [Gulp入门教程](http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/)
- [Gulp in Action](http://www.imooc.com/video/5692)
- [Gulp开发教程（翻译）](http://www.w3ctech.com/topic/134)
- [前端构建工具gulpjs的使用介绍及技巧](http://www.cnblogs.com/2050/p/4198792.html)
3. Grunt
- [gruntjs](http://gruntjs.com/)
- [Grunt中文网](http://www.gruntjs.net/)
4. Fis
- [fis 官网](http://fex-team.github.io/fis-site/index.html)
- [fis](http://fis.baidu.com/)
#### 12. 轮播图
1. pc图轮
- [单屏轮播sochange](http://www.jsfoot.com/jquery/demo/2011-09-20/192.html)
- [左右按钮多图切换](http://bxslider.com/examples/carousel-demystified)
- [fullpage全屏轮播](https://github.com/alvarotrigo/fullPage.js/)
2. 移动端
- [无缝切换](http://www.swipejs.com/)
- [滑屏效果](http://www.idangero.us/swiper)
- [全屏fullpage](https://github.com/peunzhang/fullpage)
- [单个图片切换](https://github.com/qiqiboy/touchslider)
- [单个全屏切换](https://github.com/peunzhang/slip.js)
- [百度的切换库](http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group)
- [单个全屏切换](https://github.com/peunzhang/iSlider)
- [滑屏效果](https://github.com/saw/touch-interfaces)
- [旋转拖动设置](http://baijs.com/tinycircleslider/)
- [类似于swipe切换](http://touchslider.com/)
- [支持多种形式的触摸滑动](http://www.swiper.com.cn/demo/index.html)
- [滑屏效果](https://github.com/joker-ye/main/blob/master/wap/index.html)
- [大话主席pc移动图片轮换](http://www.superslide2.com/)
- [滑屏效果](https://github.com/hahnzhu/parallax.js)
- [基于zepto的fullpage](https://github.com/yanhaijing/zepto.fullpage)
- [[WebApp]定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应](http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html)
- [判断微信客户端的那些坑](http://loo2k.com/blog/detecting-wechat-client/)
- [可以通过javascript直接调用原生分享的工具](https://github.com/JefferyWang/nativeShare.js)
- [JiaThis 分享到微信代码](http://www.jiathis.com/help/html/weixin-share-code)
- [聊聊移动端跨平台开发的各种技术](http://fex.baidu.com/blog/2015/05/cross-mobile/)
- [前端自动化测试](http://www.zhihu.com/question/29922082)
- [多种轮换图片](http://ajccom.github.io/niceslider/)
- [滑动侧边栏](https://mango.github.io/slideout/)
#### 13. 文件上传
- [百度上传组件](http://fex.baidu.com/webuploader/)
- [上传](https://blueimp.github.io/jQuery-File-Upload/)
- [flash 头像上传](http://www.hdfu.net/)
- [图片上传预览](http://www.dropzonejs.com/)
- [图片裁剪](http://elemefe.github.io/image-cropper/)
- [图片裁剪-shearphoto](http://www.shearphoto.com/)
- [jQuery图片处理](http://www.oschina.net/project/tag/284/jquery-image-tools?lang=0&os=0&sort=view&p=2)
- []()
#### 14. 模拟select
- [糖饼 select](http://aui.github.io/popupjs/doc/selectbox.html)
- [flexselect](https://github.com/rmm5t/jquery-flexselect)
- [双select](http://loudev.com/)
- [select2](http://select2.github.io/)
- []()
#### 15. 取色插件
- [类似 Photoshop 的界面取色插件](http://www.jq22.com/plugin/367)
- [jquery color](https://github.com/jquery/jquery-color/)
- [取色插件集合](http://www.oschina.net/project/tag/287/color-picker)
- [farbtastic 圆环＋正方形](https://github.com/mattfarina/farbtastic)
- []()
#### 16. 城市联动
- [jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果](http://www.ijquery.cn/?p=360)
- []()
#### 17. 剪贴板
- [剪贴板](https://github.com/zeroclipboard/zeroclipboard)
- [clipboard 最新的剪切方案](http://zenorocha.github.io/clipboard.js/)
- [不是Flash的剪贴板](https://github.com/zenorocha/clipboard.js)
#### 18. 简繁转换
- [简繁转换](https://github.com/BYVoid/OpenCC)
#### 19. 表格 Grid
- [facebook表格](http://facebook.github.io/fixed-data-table/)
- [类似于Excel编辑表格-handsontable](http://handsontable.com/)
- [bootstrap-table插件](http://bootstrap-table.wenzhixin.net.cn/)
- [datatables](https://www.datatables.net/)
#### 20. 在线演示
- [js 在线编辑 - runjs](http://runjs.cn/)
- [js 在线编辑 - jsbin](http://jsbin.com/)
- [js 在线编辑 - codepen](http://codepen.io/)
- [js 在线编辑 - jsfiddle](http://jsfiddle.net/)
- [java 在线编辑 - runjs](http://ideone.com/)
- [js 在线编辑 - hcharts](http://code.hcharts.cn/)
- [js 在线编辑 - jsdm](http://jsdm.com/)
- [sql 在线编辑 - sqlfiddle](http://sqlfiddle.com/)
- [mozilla 在线编辑器](https://thimble.mozilla.org)
#### 21. 播放器
- [Html5 VideoPlayer](https://github.com/zmmbreeze/DeadSimpleVideoPlayer)
#### 22. 粒子动画
- [Proton 烟花](http://a-jie.github.io/Proton/#example)
### 九. Nodejs
- [nodejs 篇幅比较巨大](http://liuqing.pw/)
- [Node.js 包教不包会](https://github.com/alsotang/node-lessons)
- [篇幅比较少](http://rainweb.cn/article/category/Nodejs)
- [node express 入门教程](http://www.w3cfuns.com/article-5598538-1-1.html)
- [nodejs定时任务](http://my.oschina.net/u/568264/blog/193773)
- [一个nodejs博客](http://60sky.com/)
- [【NodeJS 学习笔记04】新闻发布系统](http://www.cnblogs.com/yexiaochai/p/3536547.html)
- [过年7天乐，学nodejs 也快乐](http://www.cnblogs.com/qqloving/p/3541099.html)
- [七天学会NodeJS](https://github.com/nqdeng/7-days-nodejs)
- [Nodejs学习笔记（二）--- 事件模块](http://www.cnblogs.com/zhongweiv/p/nodejs_events.html)
- [nodejs入门](http://www.cnblogs.com/liusuqi/p/3735491.html)
- [angularjs nodejs](https://github.com/zensh/jsgen)
- [从零开始nodejs系列文章](http://blog.fens.me/series-nodejs/)
- [理解nodejs](http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb)
- [nodejs事件轮询](http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/)
- [node入门](http://www.nodebeginner.org/index-zh-cn.html)
- [nodejs cms](http://ourjs.com/detail/53e1f281c5910a9806000001)
- [Node初学者入门，一本全面的NodeJS教程](http://ourjs.com/detail/529ca5950cb6498814000005)
- [NodeJS的代码调试和性能调优](http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line/)
### 十. 工具网站
1. 常规优化
- [Javascript高性能动画与页面渲染](http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering)
- [移动H5前端性能优化指南](http://isux.tencent.com/h5-performance.html)
- [5173首页前端性能优化实践](http://ued.5173.com/?p=1731)
- [给网页设计师和前端开发者看的前端性能优化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers)
- [复杂应用的 CSS 性能分析和优化建议](http://www.orzpoint.com/profiling-css-and-optimization-notes/)
- [张鑫旭——前端性能](http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/)
- [前端性能监控总结](http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html)
- [网站性能优化之CSS无图片技术](http://udc.weibo.com/2013/05/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF/)
- [web前端性能优化进阶路](http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html)
- [前端技术：网站性能优化之CSS无图片技术](http://my.eoe.cn/tuwandou/archive/4544.html)
- [浏览器的加载与页面性能优化](http://www.baiduux.com/blog/2011/02/15/browser-loading/)
- [页面加载中的图片性能优化](http://www.w3ctech.com/p/1503)
- [Hey——前端性能](http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD)
- [html优化](http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/)
- [99css——性能](http://www.99css.com/archives/tag/%E6%80%A7%E8%83%BD)
- [Yslow——性能优化](http://www.yslow.net/category.php?cid=20)
- [YSLOW中文介绍](http://www.cnblogs.com/yslow/)
- [转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化](http://www.360ito.com/article/40.html)
- [Yahoo!团队实践分享：网站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml)
- [网站性能优化指南：什么使我们的网站变慢？](http://blog.jiasule.com/i/153)
- [网站性能优化实践，减少加载时间，提高用户体验](http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html)
- [浅谈网站性能优化 前端篇](http://www.umtry.com/archives/747.html)
- [前端重构实践之如何对网站性能优化？](http://www.adinnet.cn/blog/designview/2012-7-12/678.html)
- [前端性能优化：使用媒体查询加载指定大小的背景图片](http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/)
- [网站性能系列博文](http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html)
- [加载，不只是少一点点](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml)
- [前端性能的测试与优化](http://mzhou.me/article/95310/)
- [分享网页加载速度优化的一些技巧？](http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/)
- [页面加载中的图片性能优化](http://www.f2es.com/images-bytes-opt/)
- [web前端优化(基于Yslow)](http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html)
- [网站性能优化工具大全](http://www.qianduan.net/website-performance-optimization-tool.html)
- [【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html/)
- [【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css/)
- [由12306谈谈网站前端性能和后端性能优化](http://coolshell.cn/articles/6470.html)
- [AlloyTeam——前端优化](http://www.alloyteam.com/category/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/)
- [毫秒必争，前端网页性能最佳实践](http://www.cnblogs.com/developersupport/p/3248695.html)
- [网站性能工具Yslow的使用方法](http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html)
- [前端工程与性能优化（上）：静态资源版本更新与缓存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1)
- [前端工程与性能优化（下）：静态资源管理与模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2)
- [HTTPS连接的前几毫秒发生了什么](http://blog.jobbole.com/48369/)
- [Yslow](http://uicss.cn/yslow/#more-12319)
- [Essential Web Performance Metrics — A Primer, Part 1](http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/)
- [Essential Web Performance Metrics — Part 2](http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/)
- [YUISlide,针对移动设备的动画性能优化](http://jayli.github.io/blog/data/2011/12/23/yuislide.html)
- [Improving Site Performance](http://joelglovier.com/improving-site-performance/)
- [让网站提速的最佳前端实践](http://blog.segmentfault.com/laopopo/1190000000367899)
- [Why Website Speed is Important](http://sixrevisions.com/web-development/why-website-speed-is-important/)
- [Need for Speed – How to Improve your Website Performance](http://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/)
- [阿里无线前端性能优化指南 (Pt.1 加载期优化) ](https://github.com/amfe/article/issues/1)
- []()
2. 优化工具
- [JavaScript 性能分析新工具 OneProfile](http://www.html-js.com/article/3083)
- [JavaScript 堆内存分析新工具 OneHeap](http://www.html-js.com/article/3091)
3. 在线工具
- [google在线工具](https://developers.google.com/speed/pagespeed/insights/)
- [阿里测](http://www.alibench.com/)
- [阿里-免费测试服务](http://itest.aliyun.com/)
- [阿里-F2etest多浏览器兼容性测试解决方案](https://github.com/alibaba/f2etest)
- [js性能测试](http://jsperf.com/)
- []()
### 十一. 个人优秀设计网站
- [技术架构](http://www.zhihu.com/topic/19612641)
- [前端架构](http://saito.im/note/The-Architecture-of-F2E/)
- [如何成为前端架构师](http://www.zhihu.com/question/24092572)
- [关于前端架构-张克军](http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html)
- [百度腾讯offer比较（腾讯游戏VS百度基础架构）](http://www.zhihu.com/question/25583350)
- []()
### 十二. 代码分享
#### 1. 推荐作品
- [winter代码片段需要翻墙](https://gist.github.com/wintercn)
- [fgm](http://www.fgm.cc/learn/)
- [岑安作品集](https://github.com/hongru/hongru.github.com)
- [当耐特demo集合](http://kmdjs.github.io/)
- [米空格 js作品](http://www.laoshu133.com/Lab/)
- [myFocus](http://koen301.github.io/)
- [jssdk flash开发组件 抽奖转盘](http://jssdk.sinaapp.com/)
- [SeaJS组件库](http://panxuepeng.github.io/seajslib/)
- [颜海镜作品](http://yanhaijing.com/myProject/)
- [脚儿网作品](http://jo2.org/category/myworks/)
- [javascript个人作品](http://www.cnitblog.com/yemoo/category/3107.html)
- [妙味的雷东升游戏作品](http://bbs.miaov.com/forum.php?mod=viewthread&tid=7790)
- [javascript作品集](http://bbs.csdn.net/topics/380227212)
- [云五笔，灰度产生生成工具](https://github.com/TooBug/works)
- [项目主页](http://koen301.github.io/)
- [个性的作品主页](http://zaole.net/)
- [播放器](http://static.tingall.com/v2/player/)
- [ucren js demos 集](http://ucren.com/blog/demos)
- [智能社](http://www.zhinengshe.com/works_list.html)
- [实例陈列架](http://demos.shizuwu.cn/)
- [zoye demo](http://zoye.sinaapp.com/demo)
- [王员外](http://lab.wangyuanwai.com/)
- [平凡](http://pingfan1990.sinaapp.com)
- [jyg 游戏案例](http://www.lovewebgames.com/)
- [很多jquery插件](http://www.helloweba.com/list.html)
- [不羁虫 - soJs 作品系列](http://www.bujichong.com/sojs/api/index.html)
- [frozenui](http://frozenui.github.io/case.html)
- [黑白棋](http://js-game.github.io/othello/)
- [fromone](http://yansm.github.io/fromone/index.html)
#### 2. 群员作品
- [MDialog - [合肥-M.J]](http://demo.webjyh.com/)
- [轮播图 - [上海－冷静]](http://sandbox.runjs.cn/show/do6zlrrk )
- [[广州—坚壳]](http://www.replace5.com/)
- [[成都 - 无痕] 感恩节专题](http://www.seejs.com/demos/)
- [[球霸天]](http://hacke2.github.io/works)
- [[北京-小数]](http://www.cnblogs.com/mcat/)
- [[ptf] Magix 工具](http://thx.github.io/magix/)
- [[杭州-Pft] Magix 基于 MVC 结构和 Hash 驱动的 OPOA（One Page One Application）应用](http://thx.github.io/magix/)
- [[上海-剧中人]-实验室](http://bh-lay.com/labs/)
- [[上海-豪情 ] 作品集合](http://jikeytang.github.io)
- [[成都-feeling]](http://guoshan.sinaapp.com/)
- [[上海-angela]](http://www.cnblogs.com/liyunhua/)
- [[海南-hank]作品](http://hcjp.github.io/work/demo/)
- [[上海-张力]博客](https://github.com/yibuyisheng/blogs/issues)
- [[上海-zenki]作品](http://zkske121.github.io/)
- [移动端图案解锁](http://01google.sinaapp.com/locker.html)
- [[合肥-M.J] - MPreview 移动端图片预览组](https://github.com/webjyh/MPreview.mobile)
- [[合肥-M.J] - Mexam 移动端在线做题组](https://github.com/webjyh/Mexam)
- [[北京-苏瑞] - dancer小人](http://letyougo.github.io/dancer/)
- [[上海-玄沐]- 个人网站](http://k.swao.cn/js/)
- [[厦门-二哲]- 个人博客](http://www.meckodo.com/)
#### 3. 国外大牛精品
- [pazguille](http://pazguille.me/)
### 十三. 简历模板
- [不错的个人简历](http://learnshare.github.io/about/index.html)
- [简历](http://hcy2367.github.io/resume/)
- [张伦](http://ncuey.sinaapp.com/CrispElite/ )
- [简历](https://github.com/hacke2/ResumeSample)
- [翁天信](http://blog.dandyweng.com/2013/07/how-my-website-was-created/)
- [动画方式的简历](http://www.webhek.com/misc/interactive-resume/)
- [组件丰富简历](http://www.linqing07.com/resume.html)
- [简历池](http://www.mojianli.com/resume/view)
- [haorooms博客](http://www.haorooms.com/about)
- [Justin Young](http://cv.youngdze.com/)
- []()
### 十四. 面试题
- [那几个月在找工作（百度，网易游戏）](http://www.nowcoder.com/discuss/3196)
- [2014最新面试题](http://www.html-js.com/article/1743)
- [阿里前端面试题](http://www.w3cfuns.com/thread-5598563-2-1.html)
- [2016校招内推 -- 阿里巴巴前端 -- 三面面试经历 ](http://www.cnblogs.com/imwtr/p/4685546.html)
- [腾讯面试题](http://www.w3cfuns.com/article-5599657-1-1.html)
- [年后跳槽那点事：乐视+金山+360面试之行](http://www.cnblogs.com/lvdabao/p/3660707.html)
- [阿里前端面试题上线](http://fatesinger.com/2722.html)
- [拉勾网js面试题](http://www.cnblogs.com/52cik/p/js-question-lg.html)
- [前端面试](http://www.cnblogs.com/allenxing/p/3724382.html)
- [Web开发笔试面试题 大全](http://mianshiti.diandian.com/)
- [前端开发面试题](http://segmentfault.com/a/1190000000465431)
- [2014最新前端面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions)
- [百度面试](https://github.com/fex-team/interview-questions)
- [面试题](http://www.w3cfuns.com/forum.php?mod=forumdisplay&fid=51&filter=typeid&typeid=177)
- [前端工作面试问题](https://github.com/darcyclarke/Front-end-Developer-Interview-Questions/tree/master/Chinese)
- [前端开发面试题](http://segmentfault.com/a/1190000000465431)
- [5个经典的前端面试问题](http://ourjs.com/detail/5%E4%B8%AA%E7%BB%8F%E5%85%B8%E7%9A%84%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98)
- [最全前端面试问题及答案总结 ](http://segmentfault.com/a/1190000002562454)
- [如何面试一名前端开发工程师？](http://www.html-js.com/article/Large-search-front-team-column%202961)
- [史上最全 前端开发面试问题及答案整理](https://github.com/hawx1993/Front-end-Interview-questions)
- [前端实习生面试总结 ](http://www.cnblogs.com/xiaoruo/p/4665163.html)
- [史上最全 前端开发面试问题及答案整理](https://github.com/hawx1993/Front-end-Interview-questions)
- [BAT及各大互联网公司2014前端笔试面试题：JavaScript篇](http://blog.jobbole.com/78738/)
- [前端开发面试题大收集](https://github.com/paddingme/Front-end-Web-Development-Interview-Question)
- [收集的前端面试题和答案](https://github.com/qiu-deqing/FE-interview)
- [如何面试前端工程师](http://www.zhihu.com/question/19568008)
- [前端开发面试题](https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md)
- [牛客网-笔试面经](http://www.nowcoder.com/discuss?type=2)
### 十五. iconfont
### 十六. 开发工具类
1. 前端开发工具
- [IntelliJ IDEA 简体中文专题教程](https://github.com/judasn/IntelliJ-IDEA-Tutorial)
- [Webstorm,InterllIdea,Phpstorm](http://t.cn/8kZZ1Uy)
- [SublimeText](https://github.com/jikeytang/sublime-text)
- [Atom](https://atom.io/)
- [visual studio code](https://code.visualstudio.com/)
2. Chrome, Firebug, Filddle 调试
1. Fiddler
- [Fiddler调式使用知多少(一)深入研究](http://www.cnblogs.com/tugenhua0707/p/4623317.html)
- [微信fiddle](http://www.cnblogs.com/strick/p/4570006.html)
- [微信fiddle](http://gaoboy.com/article/26.html)
- []()
2. Chrome
- [Google Chrome 官方](https://developer.chrome.com/devtools)
- [Chrome - 基础](http://www.cnblogs.com/constantince/p/4565261.html)
- [Chrome - 进阶](http://www.cnblogs.com/constantince/p/4579121.html)
- [Chrome - 性能](http://www.cnblogs.com/constantince/p/4585983.html)
- [Chrome - 性能进阶](http://www.cnblogs.com/constantince/p/4607497.html)
- [Chrome - 移动](http://www.cnblogs.com/constantince/p/4624241.html)
- [Chrome - 使用技巧](http://www.cnblogs.com/liyunhua/p/4544738.html)
- [Chrome - Console控制台不完全指南](http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html)
- [Chrome - Workspace使浏览器变成IDE](http://c7sky.com/chrome-devtools-workspace.html)
- [network面板](http://www.html-js.com/article/Nothing-blind%202975)
- [chrome开发工具快捷键](http://anti-code.com/devtools-cheatsheet/)
- [chrome调试工具常用功能整理](http://www.html-js.com/article/2327)
- [Chrome 开发工具 Workspace 使用](http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/)
- [Chrome神器Vimium快捷键学习记录 ](http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html)
- [sass调试-w3cplus](http://www.w3cplus.com/sassguide/debug.html)
- [如何更专业的使用Chrome开发者工具-w3cplus](http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html)
- [chrome调试canvas](http://sentsin.com/web/253.html)
- [chrome profiles1](https://developer.chrome.com/devtools/index)
- [chrome profiles2](http://h5dev.uc.cn/article-25-1.html)
- [chrome profiles3](http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles)
- [chrome移动版调试](https://developers.google.com/chrome-developer-tools/docs/mobile-emulation)
- [chrome调试](http://ued.taobao.org/blog/?p=5534)
- [chrome的调试](http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html)
- [chrome console 命令详解](https://developers.google.com/chrome-developer-tools/docs/commandline-api)
- [查看事件绑定1](http://www.cnblogs.com/leonkao/p/3809655.html)
- [查看事件绑定2](http://www.cnblogs.com/xiaoyao2011/p/3447421.html)
- [神器——Chrome开发者工具(一)](http://segmentfault.com/blog/xuelang/1190000000683599)
- [奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍)](https://xinranliu.me/2015-05-22-qiqu-performance/)
- [chrome 开发者工具的 15 个小技巧](http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html)
- [Chrome开发者工具不完全指南](http://1ke.co/course/361)
- [Chrome 开发者工具使用技巧](http://segmentfault.com/a/1190000003882567)
3. Firebug
- [firebug视频教程](http://www.imooc.com/learn/137)
- [firefox 模拟器](https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE)
- [console.log 命令详解](http://www.cnblogs.com/ctriphire/p/4116207.html)
- [Firebug入门指南](http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html)
- [Firebug控制台详解](http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html)
- []()
4. 移动,微信调试
- [浏览器端调试安卓](https://openstf.github.io/)
- [移动端前端开发调试](http://yujiangshui.com/multidevice-frontend-debug/)
- [使用 Chrome 远程调试 Android 设备](https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md)
- [mac移动端调试](http://plus.uc.cn/document/webapp/doc5.html)
- [mac移动端调试](http://www.mihtool.com/)
- [无线调试攻略](http://thx.github.io/mobile/debugging-in-mobile/)
- [无线调试攻略](http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile/)
- [屌爆了,完美调试 微信webview(x5)](http://www.jianshu.com/p/ccf124f1f74b)
- [微信调试的那些事](http://liyaodong.com/2015/07/06/%E5%BE%AE%E4%BF%A1%E8%B0%83%E8%AF%95%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B/)
- [远程console](http://jsconsole.com/)
- [微信调试工具](http://blog.qqbrowser.cc/)
- [各种真机远程调试方法汇总](https://github.com/jieyou/remote_inspect_web_on_real_device)
5. iOS Simulator
- [Simulator](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html)
- [Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得](http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary/)
3. img
- [loading img](http://preloaders.net/en/circular)
- [智图-图片优化平台](http://zhitu.isux.us/)
- [在线png优化](https://tinypng.com/)
4. 生成二维码
- [生成二维码](http://cli.im/)
5. 浏览器同步
- [puer](https://github.com/leeluolee/puer)
- [liveReload](http://livereload.com/)
- [f5](http://getf5.com/)
- [File Watchers](http://geek100.com/2608/)
6. 在线PPT制作
- [PPT](https://github.com/ksky521/nodePPT)
- [reveal](https://github.com/hakimel/reveal.js/)
- [slippy](https://github.com/Seldaek/slippy)
### 十七. 前端导航网站
### 十八. 常用CDN
### 十九. Git,SVN,Github
================================================
FILE: vuejs.md
================================================
# Vuejs-QQ群(364912432)
阅读此群规之前先学习总群群规：[联盟群群规](http://www.kancloud.cn/jikeytang/qq/87646)，没有加入的可以私聊群主[豪情](http://jikey.cnblogs.com)加入。
加入等级参考[JS高级前端开发群加群说明](http://www.cnblogs.com/jikey/p/4426105.html)。
跟Vuejs群的区别：
- 异：工作时间综合性技术话题为主，包括框架，非框架的，业余时间产品，市场，运营创业话题为副。
- 同：都是高质量技术交流群，业余时间可以交流产品，市场，运营创业等话题。
核心点：任何时间禁止闲聊，禁止技术无关的讨论，禁止技术无关的大表情
----
### 如何优雅地使用此文档
1. 入门先从官网文档入手，粗略过一遍有个印象，力求回查时能找到对应的关键字或位置。
- [vuejs中文官网](http://cn.vuejs.org/)
- [vuejs英文官网](http://vuejs.org/)
- [vuejs组织](https://github.com/vuejs)
2. 发出一个问题之后，不要暂时的离开电脑，如果没有把握先不要提问。
3. 珍惜每一次提问，感恩每一次反馈，每个人工作还是业余之外抽出的时间有限，充分准备好应有的资源之后再发问，有利于问题能够高效质量地得到解决。尤其是具备解决问题能力的人，通常时间都很宝贵。
4. 先搜索，再思考，最后再提问，很多人把这个顺序搞反了。
5. - [如何优雅地向前辈或者高手请教技术问题？](https://www.zhihu.com/question/25464141)
以上部分观点出自此文 [如何优雅地使用 Stack Overflow](http://www.zhihu.com/question/20824615)
### 一. 资源教程
1. 综合类
- [vuejs 英文资料](https://github.com/vuejs/awesome-vue)
- [Vue中文资料总汇](https://shimo.im/s/ab53739d-ca98-bd1e-aea0-fcc7378c6bb3)
- [Vue.js 的一些资源索引](http://segmentfault.com/a/1190000000411057)
- [vue资料](http://www.jianshu.com/p/afd8e1db7d9b)
- [Vue.js——vue-resource全攻略](http://www.cnblogs.com/keepfool/p/5657065.html)
2. 入门类
- [vue 快速入门](http://segmentfault.com/a/1190000003968020)
- [vuex - 入门教程实例1](https://segmentfault.com/a/1190000005018970)
- [vuex - 入门教程实例2](https://segmentfault.com/a/1190000005148935)
- [vuex - 入门教程实例3](https://segmentfault.com/a/1190000006988584)
3. 英文教程
- [Learning Vue 1.0: Step By Step](https://laracasts.com/series/learning-vue-step-by-step/)
- [vue Learning Tutorials](https://coligo.io/)
4. 社区
- [sf - vue标签](http://segmentfault.com/t/vue.js)
- [知乎 - vue标签](https://www.zhihu.com/topic/20022242/questions)
- [Vue.js专业中文社区](http://vue-js.com/)
- [vue - issues](https://github.com/vuejs/vue/issues)
5. 视频教程
- [小凡哥录制视频教程](https://github.com/bhnddowinf/vuejs-learn)
### 二. 文档
- API
- [Vue.js - API](http://cn.vuejs.org/api/)
- router
- [vue-router文档](http://router.vuejs.org/zh-cn/index.html)
### 三. 组件
#### 1. 官方组件
- Loader
- [html loader module for webpack](https://github.com/vuejs/vue-html-loader)
- Router
- [vue-spa-demo](https://github.com/lazyhero/vue-spa-demo)
- Vuex：专门为 Vue.js 应用设计的状态管理架构
- [vuex](http://vuex.vuejs.org/zh-cn/intro.html)
- Ajax
- [vue + ajax](https://github.com/vuejs/vue-hackernews/blob/gh-pages/src/components/NewsView.vue#L61)
- [vue + ajax](https://github.com/vuejs/vue-resource)
- [vue-async-data](https://github.com/vuejs/vue-async-data)
- Vue-cli
- [Simple CLI for scaffolding Vue.js projects](https://github.com/vuejs/vue-cli)
#### 2. 其它组件
- UI类
- [VueStrap：使用 Vue.js 和纯 JavaScript 构建的 Bootstrap 组件](https://github.com/yuche/vue-strap)
- [针对 Vue 框架移植的 We UI 框架的适配，让 mobile开发过程成为一种享受](https://github.com/aidenzou/vue-weui)
- [vue bootstrap](http://yuche.github.io/vue-strap/)
- [基于Vue、Bootstrap的一套MVVM组件，简单、易用、功能强大](https://github.com/bravf/VueUI)
- [用VUE 和 SUI-Mobile 写了一个移动端demo - vue-sui-demo](https://github.com/eteplus/vue-sui-demo)
- [Mobile web UI based on Vue and Weui](https://github.com/airyland/vux)
- [Mint UI 基于 Vue.js 的移动端组件库](http://mint-ui.github.io/)
- [Vue Admin Panel Framework [WIP] ](https://github.com/fundon/vue-admin)
- [Vue 的图片轮播组件](https://github.com/qusiba/vue-slider)
- [基于vue开发的material design ui库](https://github.com/myronliu347/vue-carbon)
- [iView：一套基于Vue的高质量UI组件库](http://gold.xitu.io/post/57b535405bbb50006300ffc9)
- [iView - 一套基于 Vue.js 的高质量 UI 组件库](https://www.iviewui.com/overview)
- [Muse-UI 基于 Vue 2.0 和 Material Desigin 的 UI 组件库](https://museui.github.io/)
- [Vue,Node管理系统界面](https://github.com/ericjjj/vms)
- [vue2 admin / a management system template](https://github.com/PanJiaChen/vue-element-admin)
- [全新的 WDUI，助力移动开发](https://wdfe.github.io/wdui/#/)
- [手摸手，带你用 vue 撸后台 系列一](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
- [一只基于Vue2.x的移动端&微信UI - YDUI Touch](http://vue.ydui.org/)
- 表格
- [ZEE大神作品 - vue-editable](https://github.com/jinzhe/vue-editable)
- 分页
- [vue入门－实现一个分页组件(1.0.3版本)](http://segmentfault.com/a/1190000003931500)
- [vue(1.0.3) 分页组件](https://github.com/cycgit/vue-pagination)
- [分页组件 -- 命令方式，支持多个，主要靠配置](https://www.npmjs.com/package/vue-pagination)
- 移动
- [Hammer.js wrapper for Vue.js](https://github.com/vuejs/vue-touch)
- [vue的tap手势插件](https://github.com/MeCKodo/vue-tap)
- 微信
- [为微信Web服务量身设计](http://aidenzou.github.io/vue-weui/)
- 日历
- [ZEE大神作品 - vue-calendar](https://github.com/jinzhe/vue-calendar)
- [Awe - 日历组件](https://github.com/hilongjw/vue-datepicker)
- [jas0ncn - 日历组件](https://github.com/jas0ncn/vue-timepicker)
- [基于Vue.2x 的日期选择组件](https://github.com/watson-yan/vue-datepicker)
- 进度条
- [vue 进度条](https://github.com/greyby/vue-spinner)
- 验证
- [Validator component for VueJS](https://github.com/vuejs/vue-validator)
- [form validator for vue 0.11](https://github.com/xrado/vue-validator)
- Lazyload
- [图片的lazyload](https://github.com/hilongjw/vue-lazyload)
- [下拉加载](https://github.com/ElemeFE/vue-loadmore)
- Loader
- [【vue】vue组件化开发初体验-示例vue-loader-example学习记录](http://segmentfault.com/a/1190000004060034)
- Uploader
- [vue-file-upload](https://www.npmjs.com/package/vue-file-upload)
- [vue-file-upload-component](https://www.npmjs.com/package/vue-file-upload-component)
- Slide
- [vue-onlySlider-x](https://github.com/guan6/vue-onlySlider-x)
- Drag
- [vue-drag-and-drop](https://github.com/james2doyle/vue-drag-and-drop)
- 二维码
- [vue-qrcode](https://github.com/xiaokaike/vue-qrcode)
- 省市联动
- [Vue 省市区三级联动组件](https://github.com/QingWei-Li/vue-region-picker)
- TimeLine
- [Vue企业级时间轴选择器](https://github.com/yelingfeng/vue-timelinepick)
- Template
- [vue2.0模板](https://github.com/yelingfeng/vue-ylf-template)
- [vue2.0全家桶实例](https://github.com/yelingfeng/vue-2.0-FamilyBucket)
### 四. 示例
- 综合示例
- [官方例子 - 包括Markdown编辑器，表格组件等](http://cn-stage.vuejs.org/examples/)
- [Vue, vue-router, Webpack 和 vue-loader](https://github.com/vingojw/vue-vueRouter-webpack)
- [简单的vuejs例子 - 群内高手X-Roy大作](https://github.com/KennyWho/vue-chestnut)
- [vue single page app example](https://github.com/toplan/vue-spa-example)
- [使用node+vue.js实现SPA应用](http://segmentfault.com/a/1190000004372736)
- Ajax
- [A Vue.js component for creating simple AJAX forms.](https://github.com/james2doyle/vue-ajax-form-component)
- Webpack
- [Vue + webpack 项目实践](http://jiongks.name/blog/just-vue/)
- [基于vue.js和webpack的Chat示例](http://segmentfault.com/a/1190000003630417)
- [Vue.js 和 Webpack（一）](http://djyde.github.io/2015/08/29/vuejs-and-webpack-1/)
- [Vue.js 和 Webpack（二）](http://djyde.github.io/2015/08/30/vuejs-and-webpack-2/)
- [Vue.js 和 Webpack（三）](http://djyde.github.io/2015/08/31/vuejs-and-webpack-3/)
- [二哲 - 结合具体项目的webpack配置](https://github.com/MeCKodo/webpack)
- Gulp
- [vue-gulp-webpack单页面组件开发](https://github.com/JsAaron/vue-gulp-webpack)
- Tab
- [vue tab](http://yuche.github.io/vue-strap/#tabs)
- Shopping
- [基于Vue模仿蘑菇街的单页应用](https://github.com/andylei18/vue-shopping)
- 权限管理
- [基于Vue的前端权限管理解决方案](https://github.com/tower1229/Vue-Access-Control)
- 其它
- [Ant Design 的 Vue 实现](http://okoala.github.io/vue-antd/#!/docs/introduce)
- [基于vue.js重写Cnodejs.org社区的webapp](https://github.com/shinygang/Vue-cnodejs)
- [北京-giscafer - vue+webpack+node.js 价格监测应用](https://github.com/giscafer/Ponitor)
### 五. 开发工具相关
1. Atom
- [atom vue 代码高亮](https://github.com/CYBAI/language-vue-component)
- [如何发布一个Atom的package](http://www.jianshu.com/p/98f99c20493c)
- [vue-format](https://atom.io/packages/vue-format)
2. Sublime-text
- [Vue Syntax Highlight](https://github.com/vuejs/vue-syntax-highlight)
3. Webstorm
- [webstorm添加*.vue文件支持](http://www.lred.me/2016/01/07/webstorm%E6%B7%BB%E5%8A%A0-vue%E6%96%87%E4%BB%B6%E6%94%AF%E6%8C%81/)
- [webstorm vue插件](https://plugins.jetbrains.com/plugin/8057?pr=webStorm)
### 六. 答疑
- [Vue.js为什么不支持templateUrl模式](http://www.jianshu.com/p/7f7f050c9edf)
- [实现了vuejs组件之间的通讯问题](https://github.com/jrainlau/vuejs-demo)
- [国内有哪些公司在用Vue.js，有什么心得](https://www.zhihu.com/question/38213423)
- [vue 支持服务器端渲染吗](https://www.zhihu.com/question/39149401)
- [Vue.js 和 Webpack](http://div.io/topic/1343)
### 七. 源码学习
- [Vue.js 源码学习笔记](http://jiongks.name/blog/vue-code-review)
- [VUE 源码分析](http://www.cnblogs.com/sskyy/p/3695003.html)
- [vue源码分析之如何实现observer和watcher](http://segmentfault.com/a/1190000004384515)
- [vue源码解析之一：transition](https://segmentfault.com/a/1190000004670036)
- [Vue源码学习 Vue.js v1.0.18](https://github.com/JsAaron/vue-analysis)
### 八. 框架相关
- [尤小右 - 4-1 Vue.js-数据驱动的组件化前端开...](http://www.imooc.com/video/6346)
- [Evan You - Diving Deep into Vue.js](https://simplecast.fm/s/5e60d9be)