├── README.md ├── react.md ├── reg.md ├── hr.md ├── book.md ├── vuejs.md ├── call.md ├── css.md ├── ui.md ├── js.md └── qq.md /README.md: -------------------------------------------------------------------------------- 1 | # src 2 | 这里边是一些常用的资源或代码片段，你不再是一个阅读者，更是一个项目参与者和内容创造者，欢迎fork之后pull。 3 | 4 | - [QQ 群规](//github.com/jsfront/src/blob/master/qq.md) 5 | - [CSS 常用代码](//github.com/jsfront/src/blob/master/css.md) 6 | - [JS 常用代码](//github.com/jsfront/src/blob/master/js.md) 7 | 8 | 9 | # 加群说明 10 | [JS高级前端开发群加群说明](http://www.cnblogs.com/jikey/p/4426105.html) 11 | -------------------------------------------------------------------------------- /react.md: -------------------------------------------------------------------------------- 1 | # React-QQ群(530415177) 2 | 3 | ![联盟群](http://box.kancloud.cn/2016-01-21_56a04aa7296c5.jpg) 4 | 5 | 阅读此群规之前先学习总群群规：[联盟群群规](http://www.kancloud.cn/jikeytang/qq/87646)，没有加入的可以私聊群主[豪情](http://jikey.cnblogs.com)加入。 6 | 7 | 加入等级参考[JS高级前端开发群加群说明](http://www.cnblogs.com/jikey/p/4426105.html)。 8 | 9 | 跟React群的区别： 10 | 11 | - 异：工作时间综合性技术话题为主，包括框架，非框架的，业余时间产品，市场，运营创业话题为副。 12 | - 同：都是高质量技术交流群，业余时间可以交流产品，市场，运营创业等话题。 13 | 14 | 核心点：任何时间禁止闲聊，禁止技术无关的讨论，禁止技术无关的大表情 15 | ---- 16 | 17 | ###如何优雅地使用此文档 18 | 1. 入门先从官网文档入手，粗略过一遍有个印象，力求回查时能找到对应的关键字或位置。 19 | - [React-china中文](http://react-china.org/) 20 | - [React英文官网](https://facebook.github.io/react/) 21 | - [Facebook组织](https://github.com/facebook) 22 | 2. 发出一个问题之后，不要暂时的离开电脑，如果没有把握先不要提问。 23 | 3. 珍惜每一次提问，感恩每一次反馈，每个人工作还是业余之外抽出的时间有限，充分准备好应有的资源之后再发问，有利于问题能够高效质量地得到解决。尤其是具备解决问题能力的人，通常时间都很宝贵。 24 | 4. 先搜索，再思考，最后再提问，很多人把这个顺序搞反了。 25 | 5. - [如何优雅地向前辈或者高手请教技术问题？](https://www.zhihu.com/question/25464141) 26 | 以上部分观点出自此文 [如何优雅地使用 Stack Overflow](http://www.zhihu.com/question/20824615) 27 | 28 | ###一. 资源教程 29 | 30 | 1. 综合类 31 | - [react-redux-links](https://github.com/markerikson/react-redux-links) 32 | - [react-faq](https://github.com/timarney/react-faq) 33 | 34 | 2. 入门类 35 | 36 | 3. 英文教程 37 | 38 | 4. 社区 39 | 40 | 5. 视频教程 41 | 42 | ###二. 文档 43 | 44 | - API 45 | - router 46 | 47 | ###三. 组件 48 | 49 | #### 1. 官方组件 50 | 51 | 52 | 53 | #### 2. 其它组件 54 | 55 | - UI类 56 | 57 | - 表格 58 | 59 | - 分页 60 | 61 | - 移动 62 | 63 | - 微信 64 | 65 | - 日历 66 | 67 | 68 | ###四. 示例 69 | 70 | - 综合示例 71 | 72 | - Ajax 73 | 74 | - Webpack 75 | 76 | ###五. 开发工具相关 77 | 78 | 1. Atom 79 | 2. Sublime-text 80 | 3. Webstorm 81 | 82 | ###六. 答疑 83 | 84 | 85 | ###七. 源码学习 86 | 87 | 88 | ###八. 框架相关 89 | 90 | -------------------------------------------------------------------------------- /reg.md: -------------------------------------------------------------------------------- 1 | ### 以下是常用的代码收集，没有任何技术含量，只是填坑的积累。转载请注明出处，谢谢。 2 | 3 | ###常用的js正则表达式 4 | 5 | ```js 6 | //正整数 7 | /^[0-9]*[1-9][0-9]*$/; 8 | //负整数 9 | /^-[0-9]*[1-9][0-9]*$/; 10 | //正浮点数 11 | /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/; 12 | //负浮点数 13 | /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; 14 | //浮点数 15 | /^(-?\d+)(\.\d+)?$/; 16 | //email地址 17 | /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; 18 | //url地址 19 | /^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$/; 20 | 或：^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$ 21 | //年/月/日（年-月-日、年.月.日） 22 | /^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/; 23 | //匹配中文字符 24 | /[\u4e00-\u9fa5]/; 25 | //匹配帐号是否合法(字母开头，允许5-10字节，允许字母数字下划线) 26 | /^[a-zA-Z][a-zA-Z0-9_]{4,9}$/; 27 | //匹配空白行的正则表达式 28 | /\n\s*\r/; 29 | //匹配中国邮政编码 30 | /[1-9]\d{5}(?!\d)/; 31 | //匹配身份证 32 | /\d{15}|\d{18}/; 33 | //匹配国内电话号码 34 | /(\d{3}-|\d{4}-)?(\d{8}|\d{7})?/; 35 | //匹配IP地址 36 | /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/; 37 | //匹配首尾空白字符的正则表达式 38 | /^\s*|\s*$/; 39 | //匹配HTML标记的正则表达式 40 | < (\S*?)[^>]*>.*?|< .*? />; 41 | //sql 语句 42 | ^(select|drop|delete|create|update|insert).*$ 43 | //提取信息中的网络链接 44 | (h|H)(r|R)(e|E)(f|F) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)? 45 | //提取信息中的邮件地址 46 | \w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 47 | //提取信息中的图片链接 48 | (s|S)(r|R)(c|C) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)? 49 | //提取信息中的 IP 地址 50 | (\d+)\.(\d+)\.(\d+)\.(\d+) 51 | //取信息中的中国手机号码 52 | (86)*0*13\d{9} 53 | //提取信息中的中国邮政编码 54 | [1-9]{1}(\d+){5} 55 | //提取信息中的浮点数（即小数） 56 | (-?\d*)\.?\d+ 57 | //提取信息中的任何数字 58 | (-?\d*)(\.\d+)? 59 | //电话区号 60 | ^0\d{2,3}$ 61 | //腾讯 QQ 号 62 | ^[1-9]*[1-9][0-9]*$ 63 | //帐号（字母开头，允许 5-16 字节，允许字母数字下划线） 64 | ^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 65 | //中文、英文、数字及下划线 66 | ^[\u4e00-\u9fa5_a-zA-Z0-9]+$ 67 | ``` -------------------------------------------------------------------------------- /hr.md: -------------------------------------------------------------------------------- 1 | # 前端联盟群求职内推资源汇总 2 | 3 | 标签（空格分隔）： group 4 | 5 | --- 6 | ## 群规 7 | 8 | [GITHUB在线地址](http://t.cn/RL2NtqX) `http://t.cn/RL2NtqX` 9 | 10 | [看云在线地址](http://t.cn/RUdaGHn) `http://t.cn/RUdaGHn` 11 | 12 | ![联盟群](http://box.kancloud.cn/2016-01-21_56a04aa7296c5.jpg) 13 | 14 | 这是我们联盟群的求职内推资源汇总页面，方便前端同学们在求职的道路上有一盏明灯参考和指引，有一些小伙伴能够并肩作战。为招聘方能够提供候选人选择，为求职方提供可投递的人脉和渠道。QQ群规如上文如示，如不能遵守请不要加入。QQ群、微信群禁止政治、色情、赌博等不良话题和内容。 15 | 16 | 以下为联盟群城市资源，供参考，排名不分先后。 17 | 18 | 入群第一件事规范名片: 19 | 名片规则： 20 | 21 | - 前端-昵称［也可以是半端、全端］ 22 | - HR-昵称 23 | - 猎头-昵称 24 | 25 | 请大家对号入座 26 | 发布招聘信息时的模板： 27 | ```html 28 | 【内推】xxx公司~财富技术部-3年前端 |【招聘】WEB前端开发工程师-浦东新区张江高科 29 | 规模：20人+ 30 | 是否双休：如：双休 / 单休 / 其他 31 | 岗位要求：如：前端工程师:熟悉xxxx等。。。。。 32 | 待遇福利：如：5险1金 底薪8000 + 项目提成 + 补贴等 / ***** 33 | 联系方式：******* 34 | 邮箱：xx@xx.com 35 | 工作地点：如：西安、高新区 36 | ``` 37 | --- 38 | 39 | ## 须知 40 | 41 | - 每个省市原则上都有配套的QQ群、微信群，有些因为历史原因可能是省会城市群，比如杭州，西安，即统领全浙江省，陕西省。北京、上海、深圳、成都、西安有求职QQ群，其它城市没有求职QQ群。 42 | - QQ群侧重于技术(求职QQ群除外)，微信群侧重于内推职业等话题。 43 | - 由于QQ群、微信群加人有上限，同一个人原则上加群最多不能超过两个，即家乡所在城市群、工作所在城市群。 44 | - 此群只提供交流的平台，内推求职过程中双方有争议的地方，建议直接报警，聊天记录可做为呈堂证供，请大家妥善保管。 45 | - 由于群中有知名互联网公司，也有非知名，所以通过以下网站进行有效识别，面试之前建议自己查询。 46 | 47 | - [国家企业信用信息公示系统](http://www.gsxt.gov.cn/index) 48 | - [天眼查](https://www.tianyancha.com/) 49 | 50 | ## 如何加入 51 | - 由于前端联盟群定位为：高效率、高质量的交流平台，所以只能被邀请加入。由于QQ群广告号泛滥不得不做出这样痛苦的决定，所以所有QQ群、微信群只能邀请加入，加入QQ群之后才能被邀请加入微信群。 52 | - 前端联盟技术群总入口群是：JS前端开发跳板1群 `492107297`，这个是正常开放入口加入的，只要回答对问题答案，自动审核加入。 53 | - 所有联盟城市群只能被群内成员邀请加入，你还没有加入吗？那速度认识一位联盟群的成员，就可以成为大家庭中的一员了。 54 | - 大部分城市微信群超100人，需要联系QQ群管理员邀请加入。 55 | - 大部分同学都在上班，所以处理速度比较慢，请耐心等待哦。 56 | 57 | ### 北京 58 | 59 | - QQ群： 60 | 61 | - 北京前端交流群 `578874693` 62 | - 北京前端求职内推群 `279374742` 63 | 64 | | 公司 | 岗位 | ID | 地区 | 65 | | --- | --- | --- | --- | 66 | |北京新东方|前端中高级开发|观望-快乐|北京| 67 | 68 | 69 | - 微信群 70 | 71 | | 公司 | 岗位 | ID | 地区 | 72 | | --- | --- | --- | --- | 73 | ||前端||| 74 | 75 | ### 上海 76 | 77 | - QQ群： 78 | 79 | - 上海前端交流群 `426462717` 80 | - 上海前端求职内推群 `467443327` 81 | 82 | | 公司 | 岗位 | ID | 地区 | 备注 | 83 | | --- | --- | --- | --- | --- | 84 | | 花旗金融 | 前端AVP| 董燕虹(微信群)|上海|猎头| 85 | | 花旗金融 |Java - C10及以上 | 董燕虹 | 上海| 猎头 | 86 | 87 | ### 深圳 88 | 89 | - QQ群： 90 | 91 | - 深圳前端交流群 `247687975` 92 | - 深圳前端求职内推群 `533701440` 93 | 94 | | 公司 | 岗位 | ID | 地区 | 95 | | --- | --- | --- | --- | 96 | ||前端| |深圳| 97 | 98 | ### 杭州 99 | 100 | - 杭州前端交流群 `199595055` 101 | - 杭州前端求职内推群 `` 102 | 103 | | 公司 | 岗位 | ID | 地区 | 104 | | --- | --- | --- | --- | 105 | |蚂蚁金服|[前端](https://www.yuque.com/thzt/recruiting/antfin)| 何幻 |杭州| 106 | |菜鸟网络|前端| |杭州| 107 | 108 | ### 南京 109 | 110 | - QQ群： 111 | 112 | - 南京前端交流群 `475057024` 113 | 114 | | 公司 | 岗位 | ID | 地区 | 115 | | --- | --- | --- | --- | 116 | |苏宁|前端| 菜鸟檬檬 |南京| 117 | 118 | ### 武汉 119 | 120 | - QQ群： 121 | 122 | - 武汉前端交流群 `210232515` 123 | 124 | ### 成都 125 | 126 | - QQ群： 127 | 128 | - 成都前端交流群 `199595055` 129 | - 成都前端求职内推群 `258468409` 130 | 131 | | 公司 | 岗位 | ID | 地区 | 132 | | --- | --- | --- | --- | 133 | |蚂蚁金服|前端p6起步| 张力 |成都| 134 | 135 | ### 西安 136 | 137 | - QQ群： 138 | 139 | - 西安前端交流群 `369727205` 140 | - WDShare西安前端内推 `37948639` 141 | 142 | 143 | | 公司 | 岗位 | ID | 地区 | 144 | | --- | --- | --- | --- | 145 | ||前端| |深圳| 146 | 147 | -------------------------------------------------------------------------------- /book.md: -------------------------------------------------------------------------------- 1 | ### 以下是群福利书单，仅供参考 2 | 3 | - [豆瓣 Javascript 搜索结果](https://www.douban.com/search?cat=1001&q=javascript) 4 | - [京东 Javascript 搜索结果](http://search.jd.com/Search?keyword=javascript&enc=utf-8&wq=javascript) 5 | - [知乎前端书籍搜索结果](https://www.zhihu.com/search?type=content&q=%E5%89%8D%E7%AB%AF%E4%B9%A6%E7%B1%8D) 6 | 7 | # 1. Javascript 8 | - [JavaScript高级程序设计（第3版）](http://product.china-pub.com/199113) 9 | - [JavaScript权威指南(第6版)](http://product.china-pub.com/199271) 10 | - [JavaScript语言精粹（修订版）](http://product.china-pub.com/3683795) 11 | - [锋利的jQuery（第2版）](http://item.jd.com/11019625.html) 12 | - [JavaScript设计模式 13 | 百度前端专家力作，阿里巴巴、百度前端高级工程师鼎力推荐的、极具趣味，容易理解，讲解又极为严谨和透彻的写作风格帮你打造出更为专业的Web产品的好书](http://item.jd.com/11747684.html) 14 | 15 | - [JavaScript面向对象精要](http://item.jd.com/11667775.html) 16 | - [JavaScript面向对象编程指南（第2版）](http://item.jd.com/11642532.html) 17 | - [编写高质量代码：改善JavaScript程序的188个建议](http://item.jd.com/11123174.html) 18 | - [JavaScript忍者秘籍](http://product.china-pub.com/4879620) 19 | - [SVG精髓（第2版）](http://item.jd.com/11783868.html) 20 | - [学习JavaScript数据结构与算法](http://product.china-pub.com/3804284) 21 | - [你不知道的JavaScript（上卷）](http://item.jd.com/11676671.html) 22 | - [你不知道的JavaScript（中卷）](http://item.jd.com/10570721907.html) 23 | - [精通Javascript 第二版](https://item.jd.com/10607212456.html) 24 | - [WebKit技术内幕](http://product.china-pub.com/4172218) 25 | - [实战ES2015：深入现代JavaScript 应用开发](http://product.china-pub.com/5006875) 26 | - [深入理解ES6](http://product.china-pub.com/6011498) 27 | - [你不知道的JavaScript(下卷)](http://product.china-pub.com/7159257) 28 | 29 | # 2. Nodejs 30 | - [Node.js项目实践：构建可扩展的Web应用](http://item.jd.com/11688177.html) 31 | - [了不起的Node.js 将JavaScript进行到底](http://item.jd.com/11358579.html) 32 | - [深入浅出Node.js](http://item.jd.com/11355978.html) 33 | - [MongoDB权威指南 第2版 [MongoDB： The Definitive Guide， Second Edition]](http://item.jd.com/11384782.html) 34 | - [NoSQL数据库技术实战](http://item.jd.com/11584538.html) 35 | 36 | # 3. HTML5 37 | - [HTML5移动Web开发实战](http://item.jd.com/11241807.html) 38 | - [HTML5程序设计（第2版）](http://item.jd.com/10982275.html) 39 | - [HTML5游戏开发](http://item.jd.com/1049266194.html) 40 | - [HTML5 Canvas核心技术：图形、动画与游戏开发](http://item.jd.com/11231175.html) 41 | - [HTML5+JavaScript动画基础](http://item.jd.com/11253207.html) 42 | - [HTML5+JavaScript动画基础最经典的Canvas图书之一](http://item.jd.com/1056089175.html) 43 | - [HTML5实验室 Canvas世界](http://item.jd.com/1027684138.html) 44 | - [现货 移动Web手册（双色）](http://item.jd.com/1526419766.html) 45 | - [HTML5 canvas开发详解(第2版)](http://item.jd.com/11513456.html) 46 | 47 | # 4. Angularjs 48 | - [精通AngularJS](http://item.jd.com/11568614.html) 49 | - [AngularJS深度剖析与最佳实践](http://item.jd.com/11845736.html) 50 | - [AngularJS权威教程](http://item.jd.com/11522200.html) 51 | - [Web Component实战：探索PolymerJS、Mozilla Brick、Bosoni](http://item.jd.com/11796312.html) 52 | - [迈向Angular 2：基于TypeScript的高性能SPA框架](http://product.china-pub.com/4974294) 53 | - [揭秘Angular 2](http://product.china-pub.com/5054651) 54 | 55 | # 5. PHP 56 | - [PHP与MySQL程序设计（第4版）](http://item.jd.com/10701892.html) 57 | - [Web开发技术丛书·深入理解PHP：高级技巧、面向对象与核心技术（原书第3版）](http://item.jd.com/11389753.html) 58 | - [细说PHP（第2版）（含DVD光盘1张）](http://item.jd.com/11113844.html) 59 | - [PHP和MySQL Web开发（原书第4版）](http://item.jd.com/10059047.html) 60 | - [自己动手设计数据库](http://item.jd.com/11769793.html) 61 | 62 | # 6. CSS 63 | - 《CSS揭秘》 [京东地址](http://item.jd.com/11911279.html) [china-pub地址](http://product.china-pub.com/4942111) 64 | - [图解CSS3：核心技术与案例实战](http://product.china-pub.com/63768) 65 | - [CSS世界 - 张鑫旭](https://item.jd.com/12262251.html) 66 | 67 | # 7. 其它 68 | - [私以为可以提高程序员技术档次的书和博客](https://zhuanlan.zhihu.com/p/22151280) 69 | - [软件设计重构](http://product.china-pub.com/4975707) 70 | - [重构：改善既有代码的设计(第2版)](http://product.china-pub.com/4720077) 71 | 72 | # 8. Vue 73 | - [正版包邮 Vue2实践揭秘 Vue js 2.0入门教程书籍 Vue2基础理论应用](https://item.jd.com/12031579940.html) 74 | 75 | # 9. http 协议 76 | - [httpS权威指南 在服务器和Web应用上部署SSL TLS和PKI](http://product.china-pub.com/4976155) 77 | - [http权威指南(国内首本(http及其相关核心Web技术权威著作)](http://product.china-pub.com/3683063) 78 | - [图解http](http://product.china-pub.com/3769819) 79 | - [图解TCP/IP(第5版)](http://product.china-pub.com/3768070) 80 | 81 | # 10. 算法 82 | - [算法:第4版(Sedgewick之巨著，与高德纳TAOCP一脉相承)](http://product.china-pub.com/3684367) 83 | - [算法导论(原书第3版)](http://product.china-pub.com/3021144) 84 | - [数据结构与算法JavaScript描述](http://product.china-pub.com/3804002) 85 | - [啊哈 算法](http://product.china-pub.com/3770208) 86 | - [学习JavaScript数据结构与算法](http://product.china-pub.com/3804284) 87 | 88 | # 11. 高性能 89 | - [高性能JavaScript](http://product.china-pub.com/4778083) 90 | - [JavaScript性能优化：度量、监控与可视化](http://product.china-pub.com/3769687) 91 | - [Web性能权威指南](http://product.china-pub.com/3769752) 92 | - [Nginx高性能Web服务器详解](http://product.china-pub.com/62894) 93 | 94 | # 12. React 95 | - [React：引领未来的用户界面开发框架](http://item.jd.com/11688174.html) 96 | - [React Native：用JavaScript开发移动应用](http://product.china-pub.com/4879807) 97 | - [React 精髓](http://item.jd.com/11948386.html) 98 | - [React Native开发指南](http://item.jd.com/11942017.html) 99 | - [React Native跨平台移动应用开发](http://item.jd.com/11944670.html) 100 | - [深入React技术栈](http://product.china-pub.com/5007398) 101 | 102 | # 13. Git, Github 103 | - [GitHub实践](http://product.china-pub.com/5012829) 104 | - [GitHub入门与实践](http://product.china-pub.com/4727673) 105 | 106 | # 14. 微信小程序 107 | - [小程序，巧应用：微信小程序开发实战](http://product.china-pub.com/5063953) 108 | 109 | # 15. 面试 110 | - [剑指Offer：名企面试官精讲典型编程题(纪念版)](http://product.china-pub.com/3770276) 111 | - [技术之瞳：阿里巴巴技术笔试心得](http://product.china-pub.com/4998571) 112 | 113 | # 16. Java 114 | - [Java核心技术　卷Ⅰ　基础知识（原书第10版） ](http://product.china-pub.com/4980491) 115 | - [Java核心技术 卷II 高级特性(原书第9版)](http://product.china-pub.com/3769475) 116 | - [Effective Java中文版(第2版)(第12届Jolt震撼大奖获奖图书)(Java领域四大名著之一)](http://product.china-pub.com/195040) 117 | - [Java编程思想(第4版)(第9届Jolt生产效率大奖、第13届Jolt震撼大奖获奖图书)(经典图书最新版本)](http://product.china-pub.com/34838) 118 | - [数据结构与算法分析：Java语言描述（原书第3版）](http://product.china-pub.com/4927783) 119 | -------------------------------------------------------------------------------- /vuejs.md: -------------------------------------------------------------------------------- 1 | # Vuejs-QQ群(364912432) 2 | 3 | ![联盟群](http://box.kancloud.cn/2016-01-21_56a04aa7296c5.jpg) 4 | 5 | 阅读此群规之前先学习总群群规：[联盟群群规](http://www.kancloud.cn/jikeytang/qq/87646)，没有加入的可以私聊群主[豪情](http://jikey.cnblogs.com)加入。 6 | 7 | 加入等级参考[JS高级前端开发群加群说明](http://www.cnblogs.com/jikey/p/4426105.html)。 8 | 9 | 跟Vuejs群的区别： 10 | 11 | - 异：工作时间综合性技术话题为主，包括框架，非框架的，业余时间产品，市场，运营创业话题为副。 12 | - 同：都是高质量技术交流群，业余时间可以交流产品，市场，运营创业等话题。 13 | 14 | 核心点：任何时间禁止闲聊，禁止技术无关的讨论，禁止技术无关的大表情 15 | ---- 16 | 17 | ### 如何优雅地使用此文档 18 | 1. 入门先从官网文档入手，粗略过一遍有个印象，力求回查时能找到对应的关键字或位置。 19 | - [vuejs中文官网](http://cn.vuejs.org/) 20 | - [vuejs英文官网](http://vuejs.org/) 21 | - [vuejs组织](https://github.com/vuejs) 22 | 2. 发出一个问题之后，不要暂时的离开电脑，如果没有把握先不要提问。 23 | 3. 珍惜每一次提问，感恩每一次反馈，每个人工作还是业余之外抽出的时间有限，充分准备好应有的资源之后再发问，有利于问题能够高效质量地得到解决。尤其是具备解决问题能力的人，通常时间都很宝贵。 24 | 4. 先搜索，再思考，最后再提问，很多人把这个顺序搞反了。 25 | 5. - [如何优雅地向前辈或者高手请教技术问题？](https://www.zhihu.com/question/25464141) 26 | 以上部分观点出自此文 [如何优雅地使用 Stack Overflow](http://www.zhihu.com/question/20824615) 27 | 28 | ### 一. 资源教程 29 | 30 | 1. 综合类 31 | - [vuejs 英文资料](https://github.com/vuejs/awesome-vue) 32 | - [Vue中文资料总汇](https://shimo.im/s/ab53739d-ca98-bd1e-aea0-fcc7378c6bb3) 33 | - [Vue.js 的一些资源索引](http://segmentfault.com/a/1190000000411057) 34 | - [vue资料](http://www.jianshu.com/p/afd8e1db7d9b) 35 | - [Vue.js——vue-resource全攻略](http://www.cnblogs.com/keepfool/p/5657065.html) 36 | 37 | 2. 入门类 38 | - [vue 快速入门](http://segmentfault.com/a/1190000003968020) 39 | - [vuex - 入门教程实例1](https://segmentfault.com/a/1190000005018970) 40 | - [vuex - 入门教程实例2](https://segmentfault.com/a/1190000005148935) 41 | - [vuex - 入门教程实例3](https://segmentfault.com/a/1190000006988584) 42 | 43 | 3. 英文教程 44 | - [Learning Vue 1.0: Step By Step](https://laracasts.com/series/learning-vue-step-by-step/) 45 | - [vue Learning Tutorials](https://coligo.io/) 46 | 47 | 4. 社区 48 | - [sf - vue标签](http://segmentfault.com/t/vue.js) 49 | - [知乎 - vue标签](https://www.zhihu.com/topic/20022242/questions) 50 | - [Vue.js专业中文社区](http://vue-js.com/) 51 | - [vue - issues](https://github.com/vuejs/vue/issues) 52 | 53 | 5. 视频教程 54 | - [小凡哥录制视频教程](https://github.com/bhnddowinf/vuejs-learn) 55 | 56 | ### 二. 文档 57 | 58 | - API 59 | - [Vue.js - API](http://cn.vuejs.org/api/) 60 | - router 61 | - [vue-router文档](http://router.vuejs.org/zh-cn/index.html) 62 | 63 | ### 三. 组件 64 | 65 | #### 1. 官方组件 66 | 67 | - Loader 68 | - [html loader module for webpack](https://github.com/vuejs/vue-html-loader) 69 | - Router 70 | - [vue-spa-demo](https://github.com/lazyhero/vue-spa-demo) 71 | - Vuex：专门为 Vue.js 应用设计的状态管理架构 72 | - [vuex](http://vuex.vuejs.org/zh-cn/intro.html) 73 | - Ajax 74 | - [vue + ajax](https://github.com/vuejs/vue-hackernews/blob/gh-pages/src/components/NewsView.vue#L61) 75 | - [vue + ajax](https://github.com/vuejs/vue-resource) 76 | - [vue-async-data](https://github.com/vuejs/vue-async-data) 77 | - Vue-cli 78 | - [Simple CLI for scaffolding Vue.js projects](https://github.com/vuejs/vue-cli) 79 | 80 | 81 | #### 2. 其它组件 82 | 83 | - UI类 84 | - [VueStrap：使用 Vue.js 和纯 JavaScript 构建的 Bootstrap 组件](https://github.com/yuche/vue-strap) 85 | - [针对 Vue 框架移植的 We UI 框架的适配，让 mobile开发过程成为一种享受](https://github.com/aidenzou/vue-weui) 86 | - [vue bootstrap](http://yuche.github.io/vue-strap/) 87 | - [基于Vue、Bootstrap的一套MVVM组件，简单、易用、功能强大](https://github.com/bravf/VueUI) 88 | - [用VUE 和 SUI-Mobile 写了一个移动端demo - vue-sui-demo](https://github.com/eteplus/vue-sui-demo) 89 | - [Mobile web UI based on Vue and Weui](https://github.com/airyland/vux) 90 | - [Mint UI 基于 Vue.js 的移动端组件库](http://mint-ui.github.io/) 91 | - [Vue Admin Panel Framework [WIP] ](https://github.com/fundon/vue-admin) 92 | - [Vue 的图片轮播组件](https://github.com/qusiba/vue-slider) 93 | - [基于vue开发的material design ui库](https://github.com/myronliu347/vue-carbon) 94 | - [iView：一套基于Vue的高质量UI组件库](http://gold.xitu.io/post/57b535405bbb50006300ffc9) 95 | - [iView - 一套基于 Vue.js 的高质量 UI 组件库](https://www.iviewui.com/overview) 96 | - [Muse-UI 基于 Vue 2.0 和 Material Desigin 的 UI 组件库](https://museui.github.io/) 97 | - [Vue,Node管理系统界面](https://github.com/ericjjj/vms) 98 | - [vue2 admin / a management system template](https://github.com/PanJiaChen/vue-element-admin) 99 | - [全新的 WDUI，助力移动开发](https://wdfe.github.io/wdui/#/) 100 | - [手摸手，带你用 vue 撸后台 系列一](https://juejin.im/post/59097cd7a22b9d0065fb61d2) 101 | - [一只基于Vue2.x的移动端&微信UI - YDUI Touch](http://vue.ydui.org/) 102 | 103 | - 表格 104 | - [ZEE大神作品 - vue-editable](https://github.com/jinzhe/vue-editable) 105 | - 分页 106 | - [vue入门－实现一个分页组件(1.0.3版本)](http://segmentfault.com/a/1190000003931500) 107 | - [vue(1.0.3) 分页组件](https://github.com/cycgit/vue-pagination) 108 | - [分页组件 -- 命令方式，支持多个，主要靠配置](https://www.npmjs.com/package/vue-pagination) 109 | - 移动 110 | - [Hammer.js wrapper for Vue.js](https://github.com/vuejs/vue-touch) 111 | - [vue的tap手势插件](https://github.com/MeCKodo/vue-tap) 112 | - 微信 113 | - [为微信Web服务量身设计](http://aidenzou.github.io/vue-weui/) 114 | - 日历 115 | - [ZEE大神作品 - vue-calendar](https://github.com/jinzhe/vue-calendar) 116 | - [Awe - 日历组件](https://github.com/hilongjw/vue-datepicker) 117 | - [jas0ncn - 日历组件](https://github.com/jas0ncn/vue-timepicker) 118 | - [基于Vue.2x 的日期选择组件](https://github.com/watson-yan/vue-datepicker) 119 | - 进度条 120 | - [vue 进度条](https://github.com/greyby/vue-spinner) 121 | - 验证 122 | - [Validator component for VueJS](https://github.com/vuejs/vue-validator) 123 | - [form validator for vue 0.11](https://github.com/xrado/vue-validator) 124 | - Lazyload 125 | - [图片的lazyload](https://github.com/hilongjw/vue-lazyload) 126 | - [下拉加载](https://github.com/ElemeFE/vue-loadmore) 127 | - Loader 128 | - [【vue】vue组件化开发初体验-示例vue-loader-example学习记录](http://segmentfault.com/a/1190000004060034) 129 | - Uploader 130 | - [vue-file-upload](https://www.npmjs.com/package/vue-file-upload) 131 | - [vue-file-upload-component](https://www.npmjs.com/package/vue-file-upload-component) 132 | - Slide 133 | - [vue-onlySlider-x](https://github.com/guan6/vue-onlySlider-x) 134 | - Drag 135 | - [vue-drag-and-drop](https://github.com/james2doyle/vue-drag-and-drop) 136 | - 二维码 137 | - [vue-qrcode](https://github.com/xiaokaike/vue-qrcode) 138 | - 省市联动 139 | - [Vue 省市区三级联动组件](https://github.com/QingWei-Li/vue-region-picker) 140 | - TimeLine 141 | - [Vue企业级时间轴选择器](https://github.com/yelingfeng/vue-timelinepick) 142 | - Template 143 | - [vue2.0模板](https://github.com/yelingfeng/vue-ylf-template) 144 | - [vue2.0全家桶实例](https://github.com/yelingfeng/vue-2.0-FamilyBucket) 145 | 146 | ### 四. 示例 147 | 148 | - 综合示例 149 | - [官方例子 - 包括Markdown编辑器，表格组件等](http://cn-stage.vuejs.org/examples/) 150 | - [Vue, vue-router, Webpack 和 vue-loader](https://github.com/vingojw/vue-vueRouter-webpack) 151 | - [简单的vuejs例子 - 群内高手X-Roy大作](https://github.com/KennyWho/vue-chestnut) 152 | - [vue single page app example](https://github.com/toplan/vue-spa-example) 153 | - [使用node+vue.js实现SPA应用](http://segmentfault.com/a/1190000004372736) 154 | - Ajax 155 | - [A Vue.js component for creating simple AJAX forms.](https://github.com/james2doyle/vue-ajax-form-component) 156 | - Webpack 157 | - [Vue + webpack 项目实践](http://jiongks.name/blog/just-vue/) 158 | - [基于vue.js和webpack的Chat示例](http://segmentfault.com/a/1190000003630417) 159 | - [Vue.js 和 Webpack（一）](http://djyde.github.io/2015/08/29/vuejs-and-webpack-1/) 160 | - [Vue.js 和 Webpack（二）](http://djyde.github.io/2015/08/30/vuejs-and-webpack-2/) 161 | - [Vue.js 和 Webpack（三）](http://djyde.github.io/2015/08/31/vuejs-and-webpack-3/) 162 | - [二哲 - 结合具体项目的webpack配置](https://github.com/MeCKodo/webpack) 163 | - Gulp 164 | - [vue-gulp-webpack单页面组件开发](https://github.com/JsAaron/vue-gulp-webpack) 165 | - Tab 166 | - [vue tab](http://yuche.github.io/vue-strap/#tabs) 167 | - Shopping 168 | - [基于Vue模仿蘑菇街的单页应用](https://github.com/andylei18/vue-shopping) 169 | - 权限管理 170 | - [基于Vue的前端权限管理解决方案](https://github.com/tower1229/Vue-Access-Control) 171 | - 其它 172 | - [Ant Design 的 Vue 实现](http://okoala.github.io/vue-antd/#!/docs/introduce) 173 | - [基于vue.js重写Cnodejs.org社区的webapp](https://github.com/shinygang/Vue-cnodejs) 174 | - [北京-giscafer - vue+webpack+node.js 价格监测应用](https://github.com/giscafer/Ponitor) 175 | 176 | ### 五. 开发工具相关 177 | 178 | 1. Atom 179 | - [atom vue 代码高亮](https://github.com/CYBAI/language-vue-component) 180 | - [如何发布一个Atom的package](http://www.jianshu.com/p/98f99c20493c) 181 | - [vue-format](https://atom.io/packages/vue-format) 182 | 2. Sublime-text 183 | - [Vue Syntax Highlight](https://github.com/vuejs/vue-syntax-highlight) 184 | 3. Webstorm 185 | - [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/) 186 | - [webstorm vue插件](https://plugins.jetbrains.com/plugin/8057?pr=webStorm) 187 | 188 | ### 六. 答疑 189 | 190 | - [Vue.js为什么不支持templateUrl模式](http://www.jianshu.com/p/7f7f050c9edf) 191 | - [实现了vuejs组件之间的通讯问题](https://github.com/jrainlau/vuejs-demo) 192 | - [国内有哪些公司在用Vue.js，有什么心得](https://www.zhihu.com/question/38213423) 193 | - [vue 支持服务器端渲染吗](https://www.zhihu.com/question/39149401) 194 | - [Vue.js 和 Webpack](http://div.io/topic/1343) 195 | 196 | ### 七. 源码学习 197 | 198 | - [Vue.js 源码学习笔记](http://jiongks.name/blog/vue-code-review) 199 | - [VUE 源码分析](http://www.cnblogs.com/sskyy/p/3695003.html) 200 | - [vue源码分析之如何实现observer和watcher](http://segmentfault.com/a/1190000004384515) 201 | - [vue源码解析之一：transition](https://segmentfault.com/a/1190000004670036) 202 | - [Vue源码学习 Vue.js v1.0.18](https://github.com/JsAaron/vue-analysis) 203 | 204 | ### 八. 框架相关 205 | 206 | - [尤小右 - 4-1 Vue.js-数据驱动的组件化前端开...](http://www.imooc.com/video/6346) 207 | - [Evan You - Diving Deep into Vue.js](https://simplecast.fm/s/5e60d9be) 208 | -------------------------------------------------------------------------------- /call.md: -------------------------------------------------------------------------------- 1 | # 前端联盟群Call资源汇总 2 | 3 | 标签（空格分隔）： group 4 | 5 | --- 6 | ## 群规 7 | 大部分为精确查询，排名不分先后顺序。 8 | 9 | - call:area 10 | 每个群理论上配套微信群，满100人加入QQ群之后邀请加入。 11 | 12 | - 北京前端交流群 578874693 13 | - 上海前端交流群 426462717 14 | - 深圳前端交流群 247687975 15 | - 成都前端交流群 206731784 16 | - 杭州前端交流群 199595055 17 | - 西安前端交流群 369727205 18 | - 南京前端交流群 475057024 19 | - 广州前端交流群 175869166 20 | - 武汉前端交流群 210232515 21 | - 福建前端交流群 164254764 22 | - 重庆前端交流群 581612664 23 | - 南昌前端交流群 21774659 24 | - 河北前端交流群 219696823 25 | - 安徽前端交流群 613860249 26 | - 山东前端交流群 613891006 27 | - 海南前端交流群 100392631 28 | - 河南前端交流群 240344448 29 | - 天津前端交流群 484250610 30 | - 吉林前端交流群 462114100 31 | - 内蒙古前端交流群 493071141 32 | - 湖南前端交流群 614589365 33 | - 山西前端交流群 597295627 34 | - 辽宁前端交流群 614536419 35 | - 黑龙江前端交流群 592940556 36 | - 广西前端交流群 596898474 37 | - 新疆前端交流群 423924014 38 | - 云南前端交流群 330628950 39 | - 甘肃前端交流群 543388242 40 | - 宁夏前端交流群 469624497 41 | - 贵州前端交流群 416604172 42 | - 苏州前端交流群 634410637 43 | 44 | 欢迎此地区的同学、即将前往此地区同学加入，氛围是一样的，都是禁止闲聊高质量。但同时又是地区群，可能有空会线下交流集会、以及工作机会、私单外包、等等有地方特色的一个交流群。欢迎加入。 45 | 地区群可能的定位是：以省会城市为中心，以周边城市为辅的地区性前端交流群。其它联盟群以线上交流技术为主，此群以开源项目为驱动，以线下交流为引导，推进地方前端行业的发展。远景：未来成为影响地区性的前端事务的交流平台，为以后回家乡发展的同学提供一个窗口和交流的平台，提前布局，安全回家。 46 | 47 | ---------- 48 | 49 | - call:job 50 | 51 | - 北京前端求职内推群：279374742 52 | - 上海前端求职内推群：467443327 53 | - 深圳前端求职内推群：533701440 54 | - 成都前端求职内推群：258468409 55 | - 西安前端求职内推群：37948639 56 | 57 | 位置有限，不要串群，只允许加一个群。 58 | 为了保证质量，本人精力有限，暂无其它城市内推群，为了让Hr能够参与，求职内推群禁止讨论交流技术。 59 | 60 | 微信群只有一个，比如：北京前端交流群，与求职内推群只有一个微信群：北京前端交流群，禁止低俗，违反和谐的话题，其他不限，即技术、求职为一体。 61 | 62 | ---------- 63 | 64 | - call:work 65 | 66 | 送给实习生或就近找工作的同学： 67 | - http://www.cnblogs.com/jikey/p/4047639.html 68 | - http://www.cnblogs.com/jikey/p/4086385.html 69 | - http://www.cnblogs.com/jikey/p/4118088.html 70 | - http://www.cnblogs.com/jikey/p/4102881.html 71 | - http://www.cnblogs.com/jikey/p/4104940.html 72 | - http://www.cnblogs.com/jikey/p/4280955.html 73 | - http://www.cnblogs.com/jikey/p/4042309.html 74 | 75 | ---------- 76 | 77 | - call:blog 78 | 79 | https://github.com/jikeytang/front-end-collect 80 | 81 | ---------- 82 | 83 | - call:newman 84 | 85 | - https://www.zhihu.com/question/19862294 86 | 如何帮助前端新人入门和提高？ 87 | - https://www.zhihu.com/question/37176452 88 | 对即将入职前端工作的新人有哪些建议？ 89 | - https://www.zhihu.com/question/20250506 90 | 职场新人，入职第一天，要做些什么？面对不认识的同事，该怎么交流？ 91 | - https://www.zhihu.com/question/21096526 92 | 职场新人，师傅不怎么会带新人，不给你分配任何任务，我该怎么办？ 93 | - https://www.zhihu.com/question/31295730 94 | 对职场新人有什么好书推荐？ 95 | - https://www.zhihu.com/question/21291852 96 | 职场新人如何避免被上司、同事随意使唤？ 97 | - https://www.zhihu.com/question/19859548 98 | 如何做一个好的职场新人？ 99 | 100 | ---------- 101 | 102 | - call:qa 103 | 104 | 群主在牛逼管理在厉害也代替不了你们学习，资料视频教程在多还需要坚持一点一点的看，我们只提供大家高质量交流的一个平台，真正的学习还是靠大家的努力，拼搏，坚持，以及对梦想执着的追求和不断对人生誓言的守护还有对目标强有力的执行力。平常我们几个管理或大神们都在上班，都是在为自己心中的一个梦想而努力或拼搏，大神们的抽出的时间或精力有限，所以在提问之前先学习如何提问，提问的智慧等等，没有人回答不要着急，等一等或到其它群试试。希望注意的是，我们群并没有专门以回答问题为已任的无私管理员或同学，都是友情帮忙。我们的原则和底线是在不担搁正常工作的前提下，有余力的前提下帮助到大家。 105 | 106 | - http://t.cn/RxmfEl8 107 | 如何提问 108 | - http://t.cn/RIu8Lol 109 | 如何有条理地提问 110 | - http://t.cn/R5qGYwV 111 | 提问的智慧 112 | 113 | ---------- 114 | 115 | - call:demo 116 | 117 | - 请提供能重现问题的url或资源demo文件包，必须是换个环境完整的能重现所说的bug 118 | - 文字描述不清的bug，在提供第1条所述资源的前提下用截图说明两种状态：现状或期望的状态。 119 | 120 | - 没有图片的代码建议发： 121 | 1. http://www.jsbin.com 122 | 2. http://runjs.cn/ 123 | 3. http://dojo.hstar.org/ 124 | 支持：Vue,Vue2,Angular模板 125 | 4. http://codepen.io/ 126 | 支持Babel,Typescript,Coffeescript,Sass,Postcss,Pug,Slim,md 127 | 128 | ---------- 129 | 130 | - call:editor 131 | 132 | - http://www.bootcss.com/p/bootstrap-wysiwyg/ 133 | 在线编辑器 bootstrap 134 | - http://integ.github.io/BachEditor/ 135 | 一个有情怀的编辑器。Bach's Editor 136 | - http://ueditor.baidu.com/website/ 137 | 百度 ueditor 138 | - http://kindeditor.net/ 139 | 经典的kindeditor 140 | - https://github.com/mycolorway/simditor 141 | tower用的编辑器 142 | - https://github.com/summernote/summernote 143 | summernote 编辑器 144 | - http://neilj.github.io/Squire/ 145 | html5编辑器 146 | - https://github.com/wangfupeng1988/wangEditor 147 | wangEditor 148 | - https://github.com/wangfupeng1988/wangEditor-mobile 149 | wangEditor-mobile--移动端编辑器 150 | - https://www.tinymce.com 151 | 国外的一款编辑器 - tinymce 152 | - http://alex-d.github.io/Trumbowyg/ 153 | Trumbowyg - 轻量编辑器 154 | 155 | ---------- 156 | 157 | - call:md 158 | 159 | - http://wowubuntu.com/markdown/ 160 | Markdown 语法说明 (简体中文版) 161 | - https://github.com/LearnShare/Learning-Markdown/blob/master/README.md 162 | markdown入门参考 163 | - https://www.gitbook.com/ 164 | gitbook 国外的在线markdown可编辑成书 165 | - https://www.zybuluo.com/mdeditor 166 | mdeditor 一款国内的在线markdown编辑器 167 | - https://stackedit.io 168 | stackedit 国外的在线markdown编辑器，功能强大，同步云盘 169 | - http://bh-lay.github.io/mditor/ 170 | mditor 一款轻量级的markdown编辑器 171 | - https://github.com/lepture/editor 172 | lepture-editor 173 | - https://github.com/jbt/markdown-editor 174 | markdown-editor 175 | - https://github.com/pandao/editor.md 176 | Markdown 在线编辑器 177 | 178 | ---------- 179 | 180 | - call:mdn 181 | 182 | - https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 183 | mozilla js参考 184 | - http://developer.chrome.com/extensions/api_index.html 185 | chrome开发中心 186 | - https://developer.apple.com/library/safari/navigation 187 | safari开发中心 188 | - http://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94).aspx 189 | microsoft js参考 190 | - http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html 191 | js秘密花园 192 | - http://bonsaiden.github.io/JavaScript-Garden/zh/ 193 | js秘密花园 194 | - http://www.w3help.org/ 195 | w3help 196 | 197 | ---------- 198 | 199 | - call:es6 200 | 201 | - http://www.cnblogs.com/ziyunfei/ 202 | 学习ES6新特性 203 | - https://leanpub.com/exploring-es6/read 204 | exploring-es6 205 | - https://github.com/es6-org/exploring-es6 206 | exploring-es6翻译 207 | - https://github.com/lenville/understandinges6 208 | - https://leanpub.com/understandinges6 209 | 读懂 es6 210 | - http://es6.ruanyifeng.com/ 211 | 阮一峰 es6入门 212 | - http://javascript.ruanyifeng.com/ 213 | 阮一峰 Javascript 214 | - http://efe.baidu.com/blog/es6-develop-overview/?qq-pf-to=pcqq.group 215 | 使用ES6进行开发的思考 216 | - http://www.cnblogs.com/Wayou/p/es6_new_features.html 217 | ES6新特性概览 218 | - http://www.infoq.com/cn/es6-in-depth/ 219 | 深入浅出ES6 220 | - http://www.csdn.net/article/2015-04-30/2824595-Modules-in-ES6 221 | 【ES6专栏】全面解析ECMAScript 6模块系统 222 | - http://www.infoq.com/cn/author/%E5%88%98%E6%8C%AF%E6%B6%9B 223 | 深入浅出ES6 224 | - http://segmentfault.com/a/1190000002920859 225 | http://segmentfault.com/a/1190000003021261 226 | http://segmentfault.com/a/1190000003097911 227 | http://segmentfault.com/a/1190000003781467 228 | http://segmentfault.com/a/1190000004100661 229 | ES6指南系列 230 | 231 | ---------- 232 | 233 | - call:template 234 | 235 | - http://garann.github.io/template-chooser/ 236 | template-chooser 237 | - https://github.com/aui/artTemplate 238 | artTemplate 239 | - https://github.com/aui/tmodjs/blob/master/README.md 240 | tomdjs 241 | - http://juicer.name/docs/docs_zh_cn.html 242 | 淘宝模板juicer模板 243 | - http://koen301.github.io/fxtpl/ 244 | Fxtpl v1.0 繁星前端模板引擎 245 | - http://sentsin.com/layui/laytpl 246 | laytpl 247 | - https://github.com/mozilla/nunjucks 248 | mozilla - nunjucks 249 | - http://akdubya.github.io/dustjs/ 250 | dustjs 251 | - http://ecomfe.github.io/etpl/ 252 | etpl 253 | - http://twitter.github.io/hogan.js/ 254 | twitter-tpl 255 | 256 | ---------- 257 | 258 | - call:dialog 259 | 260 | - https://github.com/aui/artDialog 261 | artDialog 最新版 262 | - http://aui.github.io/artDialog/doc/index.html 263 | artDialog 文档 264 | - https://code.google.com/p/artdialog/downloads/list 265 | google code 下载地址 266 | - http://sentsin.com/jquery/layer/ 267 | 贤心弹出层 268 | - https://github.com/bh-lay/UI 269 | 响应式用户交互组件库 270 | - http://t4t5.github.io/sweetalert/ 271 | sweetalert-有css3动画弹出层 272 | - http://bootboxjs.com/examples.html 273 | - https://nakupanda.github.io/bootstrap3-dialog/ 274 | 275 | ---------- 276 | 277 | - call:css 278 | css群：578901836 279 | 280 | - http://tympanus.net/codrops/css_reference/ 281 | CSS 语法参考 282 | - http://isux.tencent.com/css3/index.html 283 | CSS3动画手册 284 | - http://caniuse.com/ 285 | css兼容性查询 286 | - http://css3lib.alloyteam.com/ 287 | alloyteam - CSS3 UI 库 288 | - http://isux.tencent.com/css3/tools.html 289 | 腾讯css3动画制作工具 290 | - http://linxz.github.io/tianyizone/ 291 | 志爷css小工具集合 292 | - http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb 293 | css3 js 移动大杂烩 294 | - http://bouncejs.com/ 295 | bouncejs 触摸库 296 | - http://fian.my.id/Waves/ 297 | css3 按钮动画 298 | - http://daneden.github.io/animate.css/ 299 | animate.css 300 | - http://www.alloyteam.com/2015/10/8536/ 301 | 全局CSS的终结(狗带) [译] 302 | - http://www.w3cplus.com/blog/tags/29.html 303 | ANIMATION - 大漠 304 | - http://www.haorooms.com/tools/css_selecter/ 305 | css选择器 306 | 307 | ---------- 308 | 309 | - call:react 310 | react-1群：530415177 311 | - https://github.com/enaqx/awesome-react 312 | react海量资源 313 | - http://www.react-china.org/ 314 | react.js 中文论坛 315 | - https://facebook.github.io/react/index.html 316 | react.js 官方网址 317 | - https://facebook.github.io/react/docs/getting-started.html 318 | react.js 官方文档 319 | - http://material-ui.com/#/ 320 | react.js material UI 321 | - http://touchstonejs.io/ 322 | react.js TouchstoneJS UI 323 | - http://amazeui.org/react/ 324 | react.js amazeui UI 325 | - http://ant.design/ 326 | ant.design 327 | 328 | ---------- 329 | 330 | 331 | - call:react-admin 332 | react-1群：530415177 333 | 334 | - https://github.com/huzzbuzz/bear-admin 335 | 一个简洁的 antd-react-admin 应用 336 | - https://github.com/SuJunming/react-admin 337 | React+AntD 后台管理系统解决方案 338 | - https://github.com/MacKentoch/react-director-admin-template 339 | ReactJS version of Director Responsive Admin Template Free 340 | - https://github.com/creativetimofficial/light-bootstrap-dashboard-react 341 | React version of Light Bootstrap Dashboard 342 | - https://github.com/mrholek/CoreUI-React 343 | CoreUI React is free React admin template based on Bootstrap 4 344 | - https://github.com/yezihaohao/react-admin 345 | react 后台管理系统解决方案 346 | - https://github.com/nelsonkuang/ant-admin 347 | 基于 antd 的后台管理平台, 在react中玩转D3.js 348 | - https://github.com/lanux/react-admin 349 | 基于antd、redux-observable、redux-thunk、react-router响应式SPA脚手架 350 | 351 | ---------- 352 | 353 | - call:vue 354 | vue-1群：364912432 355 | 356 | - [群内禁发](http://www.kancloud.cn/jikeytang/qq/81132) 357 | - [Vuejs群资料](http://t.cn/Rb1aUQT) 358 | - [官网](http://cn.vuejs.org/guide/) 359 | - [论坛](http://forum.vuejs.org/) 360 | - [新版群规](http://t.cn/RUdaGHn) 361 | 362 | - http://i.youku.com/u/UMzQxOTE4MDE5Mg== 363 | 小凡哥Vuejs视频 364 | - https://github.com/bhnddowinf/vuejs-learn 365 | 讲解 vue.js 实例 366 | - http://t.cn/Ri90k28 367 | Vue开源项目库 368 | 369 | vue2.0相关文档 370 | - http://vuefe.cn/ 371 | 中文文档 372 | - http://vuejs.org/guide/ 373 | 官网原文文档 374 | - http://router.vuejs.org/zh-cn/index.html 375 | vue-router2.0中文文档 376 | - http://vuex.vuejs.org/en/index.html 377 | vuex2.0 英文文档 378 | - https://github.com/bhnddowinf/vuejs2-learn 379 | v2学习项目 380 | - https://github.com/opendigg/awesome-github-vue 381 | vue的组件以及demo全集 382 | - https://github.com/vuejs/awesome-vue 383 | vuejs 英文资料 384 | - https://github.com/Pines-Cheng/awesome-vue-cn 385 | vuejs 中文资料 386 | 387 | ---------- 388 | 389 | - call:vue-admin 390 | vue-1群：364912432 391 | 392 | - https://github.com/taylorchen709/vue-admin 393 | - https://github.com/lanux/Vue-Admin 394 | - https://github.com/zzmhot/vue-admin 395 | - https://github.com/lifetea/vue-admin 396 | - https://github.com/xufei/vue-admin 397 | - https://github.com/Moearly/Vue-admin 398 | - https://github.com/mgbq/nx-admin 399 | - https://github.com/herozhou/vue-framework-wz 400 | - https://github.com/PanJiaChen/vue-element-admin 401 | - https://github.com/d2-projects/d2-admin 402 | - https://github.com/topfullstack/adminify 403 | - https://github.com/iview/iview-admin 404 | - https://github.com/sendya/ant-design-pro-vue 405 | - https://github.com/iczer/vue-antd-admin 406 | 407 | ---------- 408 | -------------------------------------------------------------------------------- /css.md: -------------------------------------------------------------------------------- 1 | ### 以下是常用的代码收集，没有任何技术含量，只是填坑的积累。转载请注明出处，谢谢。 2 | 3 | #### 1. css 2.x 4 | - 文字换行 5 | ```css 6 | /*强制不换行*/ 7 | white-space:nowrap; 8 | /*自动换行*/ 9 | word-wrap: break-word; 10 | word-break: normal; 11 | /*强制英文单词断行*/ 12 | word-break:break-all; 13 | ``` 14 | 15 | - 两端对齐 16 | ```css 17 | text-align:justify;text-justify:inter-ideogra 18 | ``` 19 | 20 | - [去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框](http://www.cnblogs.com/niao/archive/2012/09/07/2674511.html) 21 | ```css 22 | input,button,select,textarea{ outline:none;} 23 | textarea{ resize:none;} 24 | ``` 25 | 26 | - [去掉chrome记住密码后自动填充表单的黄色背景](http://www.tuicool.com/articles/EZ777n ) 27 | 28 | - ie6: position:fixed 29 | ```css 30 | .fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0; } 31 | * html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));} 32 | *html{background-image:url(about:blank);background-attachment:fixed;} 33 | ``` 34 | 35 | - clearfix 36 | ```css 37 | 38 | .clearfix:before,.clearfix:after{display:table;content:"";} 39 | .clearfix:after{clear:both;} 40 | 41 | .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} 42 | .clearfix{display:inline-block;} 43 | html[xmlns] .clearfix{display:block;} 44 | * html .clearfix{height:1%;} 45 | 46 | .clearfix{*zoom: 1;} 47 | .clearfix:after{clear:both;display:table;content:"";} 48 | 49 | .clearfix{overflow:hidden;_zoom:1;} 50 | ``` 51 | [http://www.daqianduan.com/3606.html](http://www.daqianduan.com/3606.html) 52 | 53 | - seperate-table 54 | ```css 55 | .tab{border-collapse:separate;border:1px solid #e0e0e0;} 56 | .tab th,.tab td{padding:3px;font-size:12px;background:#f5f9fb;border:1px solid;border-color:#fff #deedf6 #deedf6 #fff;} 57 | .tab th{background:#edf4f0;} 58 | .tab tr.even td{background:#fff;} 59 | ``` 60 | ```html 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
111222
111222
71 | ``` 72 | 73 | - min-height: 最小高度兼容代码 74 | ```css 75 | .minheight500{min-height:500px;height:auto !important;height:500px;overflow:visible;} 76 | ``` 77 | - 鼠标不允许点击 78 | ```css 79 | cursor:not-allowed; 80 | ``` 81 | - mac font: osx平台字体优化 82 | ```css 83 | font-family:"Hiragino Sans GB","Hiragino Sans GB W3",'微软雅黑'; 84 | ``` 85 | 86 | - 文字过多后显示省略号 87 | ```css 88 | .ellipsis,.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} 89 | ``` 90 | 91 | #### 2. css 3 92 | 93 | - title 换行 94 | ```html 95 | 96 | ``` 97 | 98 | - 关闭 x 符号 99 | ```html 100 | × 101 | ``` 102 | 103 | - 投影 104 | ```css 105 | .b{box-shadow:inset 1px -1px 0 #f1f1f1;text-shadow:1px 1px 0px #630;} 106 | filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000',endColorstr='#99000000');background:rgba(0,0,0,.6); 107 | 108 | background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#50000000',endColorstr='#50000000')\9; 109 | ``` 110 | - [search占位](http://www.qianduan.net/search-box-style-custom-webkit.html) 111 | ```css 112 | ::-webkit-input-placeholder {} 113 | ::-moz-input-placeholder {} 114 | input:focus::-webkit-input-placeholder { color: transparent; } 115 | -webkit-appearance:none; google边框去除 116 | input[type="search"]{-webkit-appearance:textfield;} // 去除chrome默认样式 117 | http://i.wanz.im/2011/02/04/remove_border_from_input_type_search/ 118 | http://blog.csdn.net/do_it__/article/details/6789699 119 | line-height: normal; /* for non-ie */ 120 | line-height: 22px\9; /* for ie */ 121 | ``` 122 | 123 | - [全部浏览器的兼容代码生成](http://www.colorzilla.com/gradient-editor/ ) 124 | [CSS 实现 textArea 的 placeholder 换行](http://segmentfault.com/a/1190000000362621) 125 | 126 | - 阻止默认事件 127 | ```css 128 | pointer-events:none; 129 | ``` 130 | 131 | - [去掉输入框聚焦时候的白色背景](http://ntesmailfetc.blog.163.com/blog/static/20628706120139184457401/) 132 | ```css 133 | -webkit-user-modify: read-write-plaintext-only; 134 | ``` 135 | 136 | - [input:focus时input不随软键盘升起而抬高的情况](http://www.cnblogs.com/hongru/archive/2013/02/06/2902938.html) 137 | ```css 138 | :focus{-webkit-tap-highlight-color:rgba(255, 255, 255, 0); 139 | -webkit-user-modify:read-write-plaintext-only;} 140 | ``` 141 | 142 | - 变灰 gray 143 | ```css 144 | html{ 145 | filter: grayscale(100%); 146 | -webkit-filter: grayscale(100%); 147 | -moz-filter: grayscale(100%); 148 | -ms-filter: grayscale(100%); 149 | -o-filter: grayscale(100%); 150 | filter: url("data:image/svg+xml;utf8,#grayscale"); 151 | filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 152 | -webkit-filter: grayscale(1); 153 | } 154 | ``` 155 | - firefox 阻止选中 156 | ```css 157 | -moz-user-focus:ignore;-moz-user-input:disabled;-moz-user-select:none; 158 | ``` 159 | - 箭头 160 | ```css 161 | display:block;border:solid transparent;line-height: 0;width:0; height:0;border-top:solid #0288ce;border-width:8px 6px 0 6px; 162 | 163 | border-style:solid; border-width:7px; border-color:transparent transparent transparent #ff7020; 164 | position:absolute;top: 0;left: 0;border-width:20px;border-style:solid;border-color:#d1ddde transparent transparent #d1ddde; 165 | ``` 166 | ie6 bug测试，把border-style设为dashed. 167 | 168 | - 取消textarea右下角可拖动手柄 169 | ```css 170 | resize:none 171 | ``` 172 | - 取消chrome form表单的聚焦边框 173 | ```css 174 | input,button,select,textarea{outline:none} 175 | textarea{resize:none} 176 | ``` 177 | - 取消a链接的黄色边框 178 | ```css 179 | a{-webkit-tap-highlight-color:rgba(0,0,0,0);} 180 | ``` 181 | - 取消input,button焦点或点击时蓝色边框 182 | ```css 183 | input{outline:none;} 184 | ``` 185 | - webkit 水平居中 186 | ```css 187 | display:-webkit-box;-webkit-box-pack:center; -webkit-box-align: center; 188 | position:absolute; top:50%;left:50%;transform:translate(-50%,-50%); 189 | ``` 190 | - 取消chrome 搜索x提示 191 | ```css 192 | input[type=search]::-webkit-search-decoration, 193 | input[type=search]::-webkit-search-cancel-button, 194 | input[type=search]::-webkit-search-results-button, 195 | input[type=search]::-webkit-search-results-decoration { 196 | display: none; 197 | } 198 | ``` 199 | - [chrome取消默认黄色背景](http://stackoverflow.com/questions/2338102/override-browser-form-filling-and-input-highlighting-with-html-css) 200 | ```css 201 | input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;} 202 | input:-webkit-autofill, 203 | textarea:-webkit-autofill, 204 | select:-webkit-autofill { 205 | -webkit-box-shadow: 0 0 0 1000px white inset; 206 | } 207 | autocomplete="off" 208 | ``` 209 | - 手机版本网页a标记虚线框问题 210 | ```css 211 | a:focus {outline:none;-moz-outline:none;} 212 | ``` 213 | - 焦点去除背景 214 | ```css 215 | -webkit-tap-highlight-color:rgba(255, 255, 255, 0); 216 | -webkit-tap-highlight-color:transparent; // i.e. Nexus5/Chrome and Kindle Fire HD 7'' 217 | ``` 218 | - placeholder占位符颜色自定义 219 | ```css 220 | input:-moz-placeholder {color: #369;} 221 | ::-webkit-input-placeholder {color:#369;} 222 | ``` 223 | 224 | - [IOS 禁用高亮](http://hi.barretlee.com/2014/03/31/tap-highlight-in-webview/) 225 | ```css 226 | -webkit-tap-highlight-color:rgba(255,0,0,0.5);-webkit-tap-highlight-color:transparent; /* For some Androids */ 227 | ``` 228 | 229 | - IOS iframe 滚动 [滚动回弹特效](http://www.cnblogs.com/flash3d/archive/2013/09/28/3343877.html) 230 | ```css 231 | -webkit-overflow-scrolling:touch;overflow-y:scroll; 232 | ``` 233 | 234 | - [禁止选中文本](http://www.qianduan.net/introduce-user-select/) 235 | ```css 236 | -moz-user-select:none; 237 | -webkit-user-select:none; 238 | -ms-user-select:none; 239 | user-select:none; 240 | ``` 241 | - [模糊(毛玻璃)效果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/) 242 | - [模糊(毛玻璃)效果2](http://mao.li/css3-blur-filter-pratice/) 243 | - [模糊(毛玻璃)逼真效果](http://codepen.io/ariona/pen/geFIK) 244 | ```css 245 | .blur { 246 | -webkit-filter: blur(10px); /* Chrome, Opera */ 247 | -moz-filter: blur(10px); 248 | -ms-filter: blur(10px); 249 | filter: blur(10px); 250 | } 251 | ``` 252 | ```html 253 | 254 | 255 | ``` 256 | 257 | - 显示旋转加载图片，[下拉加载数据](https://github.com/chalecao/chale/blob/master/iscroll.js) 258 | ```css 259 | #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} 260 | #pullDown .pullDownIcon{-webkit-transform:rotate(0deg) translateZ(0)} 261 | #pullDown .pullDownLabel{display:inline-block;vertical-align:middle;margin-left:5px;} 262 | #pullDown.flip .pullDownIcon{-webkit-transform:rotate(-180deg) translateZ(0)} 263 | #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} 264 | @-webkit-keyframes loading{ 265 | from{-webkit-transform:rotate(0deg) translateZ(0)} 266 | to{-webkit-transform:rotate(360deg) translateZ(0)} 267 | } 268 | 269 | ``` 270 | 271 | ```html 272 |
273 | 正在载入中... 274 |
275 | ``` 276 | 277 | - 手机多终端适配 media query[web app iphone4 iphone5 iphone6 响应式布局 适配代码](http://club.zoomla.cn/PItem?id=12594) 278 | ```css 279 | @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */ 280 | .class{} 281 | } 282 | @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */ 283 | .class{} 284 | } 285 | @media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */ 286 | .class{} 287 | } 288 | @media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */ 289 | .class{} 290 | } 291 | ``` 292 | 293 | - 屏蔽苹果浏览器对数字的识别[Meta标签中的format-detection属性及含义](http://blog.sina.com.cn/s/blog_51048da70101cgea.html) 294 | ```html 295 | 296 | ``` 297 | 298 | - 移除HTML5 input在type="number"时的上下小箭头 299 | - 在chrome下： 300 | ```css 301 | input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ 302 | -webkit-appearance: none !important; 303 | margin: 0; 304 | } 305 | ``` 306 | - Firefox下： 307 | ```css 308 | input[type="number"]{-moz-appearance:textfield;} 309 | ``` 310 | 311 | - 第二种方案： 312 | - 将type="number"改为type="tel"，同样是数字键盘，但是没有箭头。 313 | 314 | - [HTML5手机浏览直接给一个号码打电话，发短信](http://java-er.com/blog/html5-mobile-call-sms/) 315 | 316 | ```html 317 | 移动WEB页面JS一键拨打号码咨询功能 318 | 移动WEB页面JS一键发送短信咨询功能 319 | 320 | 321 | 322 | ``` 323 | 324 | - [CSS判断横屏竖屏](http://www.w3cways.com/1772.html) 325 | ```css 326 | @media screen and (orientation: portrait) { 327 | /*竖屏 css*/ 328 | } 329 | @media screen and (orientation: landscape) { 330 | /*横屏 css*/ 331 | } 332 | ``` 333 | 334 | ```javascript 335 | //判断手机横竖屏状态： 336 | window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { 337 | if (window.orientation === 180 || window.orientation === 0) { 338 | alert('竖屏状态！'); 339 | } 340 | if (window.orientation === 90 || window.orientation === -90 ){ 341 | alert('横屏状态！'); 342 | } 343 | }, false); 344 | //移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。 345 | ``` 346 | 347 | - rem 适配，内容太多，只贴网址 348 | 349 | - [rem自适应方案](https://github.com/imweb/mobile/issues/3) 350 | - [html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式](http://www.cnblogs.com/willian/p/3573353.html) 351 | - [移动端高清、多屏适配方案](http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041) 352 | - [通过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/) 353 | - [web app变革之rem](http://isux.tencent.com/web-app-rem.html) 354 | - [手机淘宝的flexible设计与实现](http://www.html-js.com/article/2402) 355 | - [移动端自适应方案](https://github.com/amfe/lib-flexible) 356 | - [【原创】移动端高清、多屏适配方案](http://www.html-js.com/article/3041) 357 | - [6个html5页面适配iphone6的技巧](http://qietuwang.baijia.baidu.com/article/73861) 358 | - [关于移动端 rem 布局的一些总结](http://segmentfault.com/a/1190000003690140) 359 | - [从网易与淘宝的font-size思考前端设计稿与工作流](http://www.cnblogs.com/lyzg/p/4877277.html) 360 | - [移动端自适应方案](http://f2e.souche.com/blog/yi-dong-duan-zi-gua-ying-fang-an/) 361 | - [MobileWeb 适配总结](http://www.w3ctech.com/topic/979) 362 | - [移动端web app自适应布局探索与总结](http://www.html-js.com/article/JavaScript-learning-notes%203234) 363 | - 公式 364 | 365 | ```javascript 366 | var PAGE_MAX_WIDTH = 1280, 367 | BASE_FONT_SIZE = 50; 368 | (function() { 369 | function n() { 370 | e.fontSize = Math.min(window.innerWidth / PAGE_MAX_WIDTH * BASE_FONT_SIZE, BASE_FONT_SIZE) + "px" 371 | } 372 | var e = document.documentElement.style; 373 | window.addEventListener("load", n), 374 | window.addEventListener("resize", n), 375 | n(); 376 | }()); 377 | ``` 378 | 379 | - 页面的切换使用了page-enter 380 | ```html 381 | 382 | ``` 383 | - css相关总结网址 384 | 385 | - [css常用效果总结](http://www.haorooms.com/post/css_common) 386 | - [css的不常用效果总结](http://www.haorooms.com/post/css_notuse_common) 387 | - [css开发技巧](http://www.haorooms.com/post/css_skill) 388 | - [重温css的选择器](http://www.haorooms.com/post/css_selectelement) 389 | - [css的变量和继承](http://www.haorooms.com/post/css_inherit_bl) 390 | - [css3的混合模式](http://www.haorooms.com/post/css3_mixblendmode) 391 | - [css中伪元素before或after中content的特殊用法attr](http://www.haorooms.com/post/content_attr) 392 | -------------------------------------------------------------------------------- /ui.md: -------------------------------------------------------------------------------- 1 | # UI交流群规 2 | [在线地址](http://t.cn/RL2NtqX) `http://t.cn/RL2NtqX` 3 | 4 | UI设计交流◑﹏◐1群 92588284 5 | 群介绍： 6 | 此群藏龙卧虎，国内一线资深设计师都藏匿于此。 7 | 此群高手甚多，全球顶尖理念传道大道尽汇于此。 8 | 群背景：此群是有丰富移动UI-APP设计经验的群主[静]建立的供大家学习交流的一个平台，我们的目的是资源能够共享，使思维能够碰撞，使传播能够长远，使分享更加的容易。 9 | 由于我群是以UI为交集使大伙聚在一起，所以要让我们共同的价值观更加的融会爆发，不建议探讨非UI之外的话题，尤其是代码或后台开发相关的。 10 | 11 | --- 12 | 13 | ###一. 如何提问: 14 | 1. 请组织好相关文字，用专业的语言描述错误发生的场景。比如：在此操作中，用了选择工具不能移动图层。等等。 15 | 2. 文字描述不清的bug，用截图示意，且要说明两种状态：现状或期望的状态。 16 | 17 | 参考： 18 | 19 | - [X-Y 问题](http://coolshell.cn/articles/10804.html) 20 | - [向别人求助时有哪些「潜」规则？](http://www.zhihu.com/question/21218381) 21 | - [如何在知乎提一个好问题？](http://www.zhihu.com/question/19555761) 22 | - [如何优雅地向前辈或者高手请教技术问题？](http://www.zhihu.com/question/25464141) 23 | - [提问的艺术-ZZ](http://www.awflasher.com/blog/archives/200) 24 | 25 | ###二. 禁问: 26 | 日常生活废话禁问，主观性的问题禁问，概念性的问题禁问。 27 | 28 | - 早上问早，晚上道晚安。聊天起于问早，止于呵呵。 29 | - 有没有人在？ 30 | - 谁能帮我解决一个问题？ 31 | - 有没有jQuery高手在等？ 32 | - 群里有人做过XX的东西吗？等等类似的问题。 33 | - 编辑器哪个工具好用？webstorm还是sublime还是vim？ 34 | - 什么是Javascript？什么是Ajax? 35 | 36 | 建议的问法是： 37 | - 1. 有问题直接问。比如：前端的岗位特点是什么？ 38 | - 2. 直接说场景：我在做xx端东西的时候，在window 7平台的IE7版本下遇到了左右不对齐问题，具体如图所示img，代码地址：http://www.jsbin.com/xxxx，在百度中找到的答案，试了之后还是有同样的问题。请有空的同学帮我看看是什么问题？ 39 | 如果你的问题暂时没人理，那表示有空的同学都未涉猎，赶紧找其它办法。 40 | 41 | ###三. 禁发: 42 | 43 | - 广告，招聘，找工作，找实习，找私活者，接私活，推广(如极客邀请加入)，明星八卦，禁群内签到，假红包，禁语音，禁打开视频，等与前端技术或职业探讨主题无关的内容或行为，禁发超过一屏的长代码，不太习惯自己退，违者踢。 44 | - 禁发无意义的大图片，建议发qq提供的默认的等于行距表情，约束这个目的在于： 45 | 1. 人脑对图片的接受速度明显快于文字，过多的无意义图片会分散讨论的主题。 46 | 2. 不方便回查，或聊天记录中寻找有价值的消息。 47 | 3. 另外这是一个信息爆炸时代，人脑的接收是有上限的，过多的垃圾信息会占用有限的带宽。 48 | - 禁止在群邮件中无意义回复，每次一个人回复是一次消息的广播，每个人都会收到，会产生信息垃圾。 49 | - 禁止在群邮件中回复招聘或其它通知邮件。因为你的每一次回复将会有2000多人同时收到，而这条回复对其它人是没有任何意义的。 50 | - 本群不欢迎纯hr的交流，公司技术人员内推招聘发群邮件，如有违反，直接踢，不另行引导或通知。 51 | - 禁发超过文本行距的大gif。 52 | 53 | ###四. 警告: 54 | 55 | - 字体：微软雅黑，10，禁加粗，禁加斜，禁加下划线，字体颜色不建议特别刺眼的颜色。 56 | - 禁止闲聊，或无意义回复。 57 | - 提问之前最好百度，google过，着重培养的是一种能力或方法，不是一个结果。 58 | - 不建议直接索要代码，可以追问技术实现的思路或方法。 59 | 60 | ###五. 资源教程: 61 | 62 | 1. 综合类 63 | 64 | - [前端知识体系](http://www.cnblogs.com/sb19871023/p/3894452.html) 65 | 66 | 2. 入门类 67 | 68 | - [前端入门教程](http://www.cnblogs.com/jikey/p/3613082.html) 69 | 70 | 3. 效果类 71 | 72 | - [弹出层](http://www.imooc.com/learn/58) 73 | - [焦点图轮播特效](http://www.imooc.com/learn/18) 74 | 75 | 4. 工具类 76 | 77 | - [css sprite 雪碧图制作](http://www.imooc.com/learn/93) 78 | - [版本控制入门 – 搬进 Github](http://www.imooc.com/learn/390) 79 | - [Grunt-beginner前端自动化工具](http://www.imooc.com/learn/30) 80 | 81 | 5. 慕课专题 82 | 83 | - [张鑫旭 - 慕课系列](http://www.imooc.com/space/teacher/id/197450) 84 | - [lyn - 慕课系列](http://www.imooc.com/space/teacher/id/104593) 85 | - [艾伦 - 慕课系列](http://www.imooc.com/space/teacher/id/290139) 86 | - [碧仔 - Hello，移动WEB](http://www.imooc.com/view/494) 87 | 88 | ###六. 作品展示: 89 | 90 | ###七. 设计门户网站 91 | 92 | 1. 集合网站 93 | - [设计师导航网站](http://hao.uisdc.com/) 94 | - [uehtml网络收藏](http://so.uehtml.com/) 95 | 96 | 2. 门户网站 97 | 98 | - [最流行的PHP 代码规范](http://www.zcool.com.cn/) 99 | - [最流行的PHP 代码规范](http://www.ui.cn/) 100 | 101 | 3. 英文设计网站 102 | 103 | - [【敏捷开发】Android团队开发规范](http://www.cnblogs.com/lcw/p/3619181.html) 104 | - [Android 开发规范与应用](http://www.jianshu.com/p/4390f4fe19b3) 105 | 106 | 4. 其它网站 107 | 108 | - [涂鸦网站](http://www.poocg.com/) 109 | 110 | ###八. 素材网站 111 | 112 | ####1. ICON搜索 113 | 114 | - [Facebook Projects](https://code.facebook.com/projects/web/) 115 | - [百度web前端研发部](http://fex.baidu.com/) 116 | - [百度EFE](http://efe.baidu.com/) 117 | - [百度github](https://github.com/fex-team/) 118 | - [alloyteam](http://www.alloyteam.com/) 119 | - [alloyteam-github](http://alloyteam.github.io/) 120 | - [alloyteam-AlloyGameEngine](https://github.com/AlloyTeam/AlloyGameEngine) 121 | - [AlloyDesigner](http://alloyteam.github.io/AlloyDesigner/) 即时修改，即时保存，设计稿较正，其它开发辅助工具 122 | - [H5交互页编辑器AEditor介绍](http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/) H5动画交互页开发的工具介绍 123 | - [AEditor](http://aeditor.alloyteam.com/) H5动画交互页开发的工具 124 | - [maka](http://forum.maka.im/wordpress/) 125 | - [值得订阅的weekly](https://github.com/fenbility/weekly-feed) 126 | - [腾讯html5](http://cube.qq.com/) 127 | - [奇舞团开源项目](http://75team.github.io/) 128 | - [Qunar UED](http://ued.qunar.com/) 129 | 130 | ####2. PSD其它搜索 131 | 132 | 1. 常用 133 | 134 | - [ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性](http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome/) 135 | - [模拟键盘](http://mottie.github.io/Keyboard/) 136 | - [拼音](https://github.com/hotoo/pinyin) 137 | - [中国个人身份证号验证](https://github.com/mc-zone/IDValidator) 138 | 139 | 2. 算法 140 | 141 | - [数据结构与算法 JavaScript 描述. 章节练习](https://github.com/Ralph-Wang/algorithm.in.js) 142 | - [常见排序算法（JS版）](https://github.com/twobin/twobinSort) 143 | - [经典排序](https://github.com/luofei2011/jsAgm/blob/master/js/sort.js) 144 | - [常见排序算法-js版本](https://github.com/hechangmin/jssort) 145 | - [JavaScript 算法与数据结构 精华集](https://github.com/lightningtgc/JavaScript-Algorithms) 146 | - [面试常考算法题精讲](http://www.nowcoder.com/live/courses) 147 | - []() 148 | 149 | 3. 移动端 150 | 151 | - [fastclick](https://github.com/ftlabs/fastclick) 152 | - [no-click-delay](https://github.com/mmastrac/jquery-noclickdelay) 153 | 154 | 4. JSON 155 | 156 | - [模拟生成JSON数据](http://beta.json-generator.com/) 157 | - [返回跨域JSONAPI](http://jsonp.afeld.me/) 158 | 159 | ####3. Html5 160 | - [HTML5 有哪些让你惊艳的 demo？](http://www.zhihu.com/question/24398907) 161 | 162 | ####4. CSS 163 | - [browserhacks](http://browserhacks.com/) 164 | - []() 165 | 166 | ####5. jQuery 167 | 168 | 1. 焦点图 169 | 170 | - [myfocus](https://github.com/koen301/myfocus) 171 | - [myfocus-官方演示站](http://www.chhua.com/myfocus/) 172 | - [SuperSlidev2.1 -- 大话主席](http://www.superslide2.com/) 173 | - [soChange](http://www.bujichong.com/sojs/soChange/index.html) 174 | 175 | ####6. Ext, EasyUI, J-UI 及其它各种UI方案 176 | 177 | 1. Ext 178 | 179 | - [extjs](https://www.sencha.com/products/extjs/) 180 | - [ext4英文api](http://docs.sencha.com/extjs/4.0.7/) 181 | - [ext4中文api](http://extjs-doc-cn.github.io/ext4api/) 182 | - []() 183 | 184 | 2. EasyUI 185 | 186 | - [jquery easyui 未压缩源代码](http://jquery-easyui.googlecode.com/svn/trunk/src/) 187 | 188 | 3. J-UI 189 | 190 | - [J-UI](http://www.j-ui.com) 191 | 192 | 4. Other 193 | 194 | - [MUI-最接近原生APP体验的高性能前端框架](http://dcloudio.github.io/mui/) 195 | - [Amaze UI | 中国首个开源 HTML5 跨屏前端框架](http://amazeui.org/) 196 | - [淘宝 HTML5 前端框架](http://m.sui.taobao.org/) 197 | - [KISSY - 阿里前端JavaScript库](http://docs.kissyui.com/) 198 | - [网易Nej - Nice Easy Javascript](http://nej.netease.com/) 199 | - [Kendo UI MVVM Demo](http://demos.telerik.com/kendo-ui/mvvm/index) 200 | - [Bootstrap](http://www.bootcss.com/) 201 | - [Smart UI](http://smartui.chinamzz.com/) 202 | - [雅虎UI - CSS UI](http://developer.yahoo.com/yui/grids/) 203 | 204 | ####7. 页面 社会化 分享功能 205 | 206 | - [百度分享](http://share.baidu.com/) pc端 207 | - [JiaThis](http://jiathis.com/) pc端 208 | - [社会化分享组件](http://developer.baidu.com/soc/share) 移动端 209 | - [ShareSDK 轻松实现社会化功能](http://www.mob.com/#/index) 移动端 210 | - [友盟分享](http://dev.umeng.com/social/android/quick-integration) 移动端 211 | 212 | ####8. 富文本编辑器 213 | 214 | - [百度 ueditor](http://ueditor.baidu.com/website/) 215 | - [经典的ckeditor](http://ckeditor.com/) 216 | - [经典的kindeditor](http://kindeditor.net/) 217 | - [wysiwyg](http://www.bootcss.com/p/bootstrap-wysiwyg/) 218 | - [一个有情怀的编辑器。Bach's Editor](http://integ.github.io/BachEditor/) 219 | - [tower用的编辑器](https://github.com/mycolorway/simditor) 220 | - [summernote 编辑器](https://github.com/summernote/summernote) 221 | - [html5编辑器](http://neilj.github.io/Squire/) 222 | - [XEditor](http://lab.hustlzp.com/XEditor/) 223 | - [wangEditor](https://github.com/wangfupeng1988/wangEditor ) 224 | 225 | ####9. 日历 226 | 227 | 1. PC 228 | 229 | - [经典my97](http://www.my97.net/dp/demo/index.htm) 230 | - [强大的独立日期选择器](http://www.cnblogs.com/gbin1/archive/2012/04/16/2452105.html) 231 | - [fullcalendar](http://arshaw.com/fullcalendar/) 232 | - [fullcalendar日历控件知识点集合 ](http://blog.csdn.net/francislaw/article/details/7740630) 233 | - [中文api](http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html) 234 | - [农历日历](https://github.com/zzyss86/LunarCalendar) 235 | - [超酷的仿百度带节日日历老黄历控件](http://www.sucaisj.com/jiaoben/date/201509/16856.html) 236 | - [日期格式化](http://momentjs.com/) 237 | - [大牛日历控件](https://github.com/Johnqing/QPAYCalendar/) 238 | - [我群某管理作品](https://github.com/Iamlars/dateMarker) 239 | - [input按位替换-官网](http://digitalbush.com/projects/masked-input-plugin/) 240 | - [input按位替换-github](https://github.com/digitalBush/jquery.maskedinput/tree/1.2.2) 241 | - [bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker) 242 | - [国外30个插件集合](http://www.vandelaydesign.com/30-best-free-jquery-plugins/) 243 | - [JavaScript datepicker](http://dbushell.com/2012/10/09/pikaday-javascript-datepicker/) 244 | - [Datepair.js](http://jonthornton.github.io/Datepair.js/) 245 | - [一个风格多样的日历](https://github.com/glad/glDatePicker) 246 | - [弹出层式的全日历](http://amsul.ca/pickadate.js/date/) 247 | - [jquery双日历](http://www.daterangepicker.com/) 248 | 249 | 2. 移动 250 | 251 | - [大气实用jQuery手机移动端日历日期选择插件](http://www.frankdemo.cn/index.php?c=content&a=show&id=115) 252 | - [jQuery Mobile 移动开发中的日期插件Mobiscroll ](https://mobiscroll.com/) 253 | 254 | 255 | 3. Date library 256 | 257 | - [Datejs](https://github.com/datejs/Datejs) 258 | - [sugarjs](http://sugarjs.com/api/Date) 259 | 260 | ####10. 综合效果搜索平台 261 | 262 | - [效果网](http://www.jq22.com) 263 | - [17素材](http://www.17sucai.com/) 264 | - [常用的JavaScript代码片段](http://microjs.com/) 265 | 266 | ####11. 前端工程化 267 | 268 | 1. 概述 269 | 270 | - [前端工具大全](http://www.awesomes.cn/) 271 | - [什么是前端工程化](https://github.com/fouber/blog/issues/10?from=timeline&isappinstalled=0#) 272 | 273 | 2. Gulp 274 | 275 | - [Gulp官网](http://gulpjs.com/) 276 | - [Gulp中文网](http://www.gulpjs.com.cn/) 277 | - [gulp资料收集](https://github.com/Platform-CUF/use-gulp) 278 | - [Gulp：任务自动管理工具 - ruanyifeng](http://javascript.ruanyifeng.com/tool/gulp.html) 279 | - [Gulp插件](http://gulpjs.com/plugins/) 280 | - [Gulp不完全入门教程](http://www.ido321.com/1622.html) 281 | - [为什么使用gulp?](https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/33) 282 | - [Gulp安装及配合组件构建前端开发一体化](http://www.dbpoo.com/getting-started-with-gulp/) 283 | - [Gulp 入门指南](https://github.com/nimojs/gulp-book) 284 | - [Gulp 入门指南 - nimojs](https://github.com/nimojs/blog/issues/19) 285 | - [Gulp入门教程](http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/) 286 | - [Gulp in Action](http://www.imooc.com/video/5692) 287 | - [Gulp开发教程（翻译）](http://www.w3ctech.com/topic/134) 288 | - [前端构建工具gulpjs的使用介绍及技巧](http://www.cnblogs.com/2050/p/4198792.html) 289 | 290 | 3. Grunt 291 | 292 | - [gruntjs](http://gruntjs.com/) 293 | - [Grunt中文网](http://www.gruntjs.net/) 294 | 295 | 4. Fis 296 | 297 | - [fis 官网](http://fex-team.github.io/fis-site/index.html) 298 | - [fis](http://fis.baidu.com/) 299 | 300 | ####12. 轮播图 301 | 302 | 1. pc图轮 303 | 304 | - [单屏轮播sochange](http://www.jsfoot.com/jquery/demo/2011-09-20/192.html) 305 | - [左右按钮多图切换](http://bxslider.com/examples/carousel-demystified) 306 | - [fullpage全屏轮播](https://github.com/alvarotrigo/fullPage.js/) 307 | 308 | 2. 移动端 309 | 310 | - [无缝切换](http://www.swipejs.com/) 311 | - [滑屏效果](http://www.idangero.us/swiper) 312 | - [全屏fullpage](https://github.com/peunzhang/fullpage) 313 | - [单个图片切换](https://github.com/qiqiboy/touchslider) 314 | - [单个全屏切换](https://github.com/peunzhang/slip.js) 315 | - [百度的切换库](http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group) 316 | - [单个全屏切换](https://github.com/peunzhang/iSlider) 317 | - [滑屏效果](https://github.com/saw/touch-interfaces) 318 | - [旋转拖动设置](http://baijs.com/tinycircleslider/) 319 | - [类似于swipe切换](http://touchslider.com/) 320 | - [支持多种形式的触摸滑动](http://www.swiper.com.cn/demo/index.html) 321 | - [滑屏效果](https://github.com/joker-ye/main/blob/master/wap/index.html) 322 | - [大话主席pc移动图片轮换](http://www.superslide2.com/) 323 | - [滑屏效果](https://github.com/hahnzhu/parallax.js) 324 | - [基于zepto的fullpage](https://github.com/yanhaijing/zepto.fullpage) 325 | - [[WebApp]定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应](http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html) 326 | - [判断微信客户端的那些坑](http://loo2k.com/blog/detecting-wechat-client/) 327 | - [可以通过javascript直接调用原生分享的工具](https://github.com/JefferyWang/nativeShare.js) 328 | - [JiaThis 分享到微信代码](http://www.jiathis.com/help/html/weixin-share-code) 329 | - [聊聊移动端跨平台开发的各种技术](http://fex.baidu.com/blog/2015/05/cross-mobile/) 330 | - [前端自动化测试](http://www.zhihu.com/question/29922082) 331 | - [多种轮换图片](http://ajccom.github.io/niceslider/) 332 | - [滑动侧边栏](https://mango.github.io/slideout/) 333 | 334 | ####13. 文件上传 335 | 336 | - [百度上传组件](http://fex.baidu.com/webuploader/) 337 | - [上传](https://blueimp.github.io/jQuery-File-Upload/) 338 | - [flash 头像上传](http://www.hdfu.net/) 339 | - [图片上传预览](http://www.dropzonejs.com/) 340 | - [图片裁剪](http://elemefe.github.io/image-cropper/) 341 | - [图片裁剪-shearphoto](http://www.shearphoto.com/) 342 | - [jQuery图片处理](http://www.oschina.net/project/tag/284/jquery-image-tools?lang=0&os=0&sort=view&p=2) 343 | - []() 344 | 345 | ####14. 模拟select 346 | 347 | - [糖饼 select](http://aui.github.io/popupjs/doc/selectbox.html) 348 | - [flexselect](https://github.com/rmm5t/jquery-flexselect) 349 | - [双select](http://loudev.com/) 350 | - [select2](http://select2.github.io/) 351 | - []() 352 | 353 | ####15. 取色插件 354 | 355 | - [类似 Photoshop 的界面取色插件](http://www.jq22.com/plugin/367) 356 | - [jquery color](https://github.com/jquery/jquery-color/) 357 | - [取色插件集合](http://www.oschina.net/project/tag/287/color-picker) 358 | - [farbtastic 圆环＋正方形](https://github.com/mattfarina/farbtastic) 359 | - []() 360 | 361 | ####16. 城市联动 362 | 363 | - [jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果](http://www.ijquery.cn/?p=360) 364 | - []() 365 | 366 | ####17. 剪贴板 367 | 368 | - [剪贴板](https://github.com/zeroclipboard/zeroclipboard) 369 | - [clipboard 最新的剪切方案](http://zenorocha.github.io/clipboard.js/) 370 | - [不是Flash的剪贴板](https://github.com/zenorocha/clipboard.js) 371 | 372 | ####18. 简繁转换 373 | 374 | - [简繁转换](https://github.com/BYVoid/OpenCC) 375 | 376 | ####19. 表格 Grid 377 | 378 | - [facebook表格](http://facebook.github.io/fixed-data-table/) 379 | - [类似于Excel编辑表格-handsontable](http://handsontable.com/) 380 | - [bootstrap-table插件](http://bootstrap-table.wenzhixin.net.cn/) 381 | - [datatables](https://www.datatables.net/) 382 | 383 | ####20. 在线演示 384 | 385 | - [js 在线编辑 - runjs](http://runjs.cn/) 386 | - [js 在线编辑 - jsbin](http://jsbin.com/) 387 | - [js 在线编辑 - codepen](http://codepen.io/) 388 | - [js 在线编辑 - jsfiddle](http://jsfiddle.net/) 389 | - [java 在线编辑 - runjs](http://ideone.com/) 390 | - [js 在线编辑 - hcharts](http://code.hcharts.cn/) 391 | - [js 在线编辑 - jsdm](http://jsdm.com/) 392 | - [sql 在线编辑 - sqlfiddle](http://sqlfiddle.com/) 393 | - [mozilla 在线编辑器](https://thimble.mozilla.org) 394 | 395 | ####21. 播放器 396 | 397 | - [Html5 VideoPlayer](https://github.com/zmmbreeze/DeadSimpleVideoPlayer) 398 | 399 | ####22. 粒子动画 400 | 401 | - [Proton 烟花](http://a-jie.github.io/Proton/#example) 402 | 403 | ###九. Nodejs 404 | 405 | - [nodejs 篇幅比较巨大](http://liuqing.pw/) 406 | - [Node.js 包教不包会](https://github.com/alsotang/node-lessons) 407 | - [篇幅比较少](http://rainweb.cn/article/category/Nodejs) 408 | - [node express 入门教程](http://www.w3cfuns.com/article-5598538-1-1.html) 409 | - [nodejs定时任务](http://my.oschina.net/u/568264/blog/193773) 410 | - [一个nodejs博客](http://60sky.com/) 411 | - [【NodeJS 学习笔记04】新闻发布系统](http://www.cnblogs.com/yexiaochai/p/3536547.html) 412 | - [过年7天乐，学nodejs 也快乐](http://www.cnblogs.com/qqloving/p/3541099.html) 413 | - [七天学会NodeJS](https://github.com/nqdeng/7-days-nodejs) 414 | - [Nodejs学习笔记（二）--- 事件模块](http://www.cnblogs.com/zhongweiv/p/nodejs_events.html) 415 | - [nodejs入门](http://www.cnblogs.com/liusuqi/p/3735491.html) 416 | - [angularjs nodejs](https://github.com/zensh/jsgen) 417 | - [从零开始nodejs系列文章](http://blog.fens.me/series-nodejs/) 418 | - [理解nodejs](http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb) 419 | - [nodejs事件轮询](http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/) 420 | - [node入门](http://www.nodebeginner.org/index-zh-cn.html) 421 | - [nodejs cms](http://ourjs.com/detail/53e1f281c5910a9806000001) 422 | - [Node初学者入门，一本全面的NodeJS教程](http://ourjs.com/detail/529ca5950cb6498814000005) 423 | - [NodeJS的代码调试和性能调优](http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line/) 424 | 425 | ###十. 工具网站 426 | 427 | 1. 常规优化 428 | 429 | - [Javascript高性能动画与页面渲染](http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering) 430 | - [移动H5前端性能优化指南](http://isux.tencent.com/h5-performance.html) 431 | - [5173首页前端性能优化实践](http://ued.5173.com/?p=1731) 432 | - [给网页设计师和前端开发者看的前端性能优化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers) 433 | - [复杂应用的 CSS 性能分析和优化建议](http://www.orzpoint.com/profiling-css-and-optimization-notes/) 434 | - [张鑫旭——前端性能](http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/) 435 | - [前端性能监控总结](http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html) 436 | - [网站性能优化之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/) 437 | - [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) 438 | - [前端技术：网站性能优化之CSS无图片技术](http://my.eoe.cn/tuwandou/archive/4544.html) 439 | - [浏览器的加载与页面性能优化](http://www.baiduux.com/blog/2011/02/15/browser-loading/) 440 | - [页面加载中的图片性能优化](http://www.w3ctech.com/p/1503) 441 | - [Hey——前端性能](http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD) 442 | - [html优化](http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/) 443 | - [99css——性能](http://www.99css.com/archives/tag/%E6%80%A7%E8%83%BD) 444 | - [Yslow——性能优化](http://www.yslow.net/category.php?cid=20) 445 | - [YSLOW中文介绍](http://www.cnblogs.com/yslow/) 446 | - [转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化](http://www.360ito.com/article/40.html) 447 | - [Yahoo!团队实践分享：网站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml) 448 | - [网站性能优化指南：什么使我们的网站变慢？](http://blog.jiasule.com/i/153) 449 | - [网站性能优化实践，减少加载时间，提高用户体验](http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html) 450 | - [浅谈网站性能优化 前端篇](http://www.umtry.com/archives/747.html) 451 | - [前端重构实践之如何对网站性能优化？](http://www.adinnet.cn/blog/designview/2012-7-12/678.html) 452 | - [前端性能优化：使用媒体查询加载指定大小的背景图片](http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/) 453 | - [网站性能系列博文](http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html) 454 | - [加载，不只是少一点点](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml) 455 | - [前端性能的测试与优化](http://mzhou.me/article/95310/) 456 | - [分享网页加载速度优化的一些技巧？](http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/) 457 | - [页面加载中的图片性能优化](http://www.f2es.com/images-bytes-opt/) 458 | - [web前端优化(基于Yslow)](http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html) 459 | - [网站性能优化工具大全](http://www.qianduan.net/website-performance-optimization-tool.html) 460 | - [【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html/) 461 | - [【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css/) 462 | - [由12306谈谈网站前端性能和后端性能优化](http://coolshell.cn/articles/6470.html) 463 | - [AlloyTeam——前端优化](http://www.alloyteam.com/category/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/) 464 | - [毫秒必争，前端网页性能最佳实践](http://www.cnblogs.com/developersupport/p/3248695.html) 465 | - [网站性能工具Yslow的使用方法](http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html) 466 | - [前端工程与性能优化（上）：静态资源版本更新与缓存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1) 467 | - [前端工程与性能优化（下）：静态资源管理与模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2) 468 | - [HTTPS连接的前几毫秒发生了什么](http://blog.jobbole.com/48369/) 469 | - [Yslow](http://uicss.cn/yslow/#more-12319) 470 | - [Essential Web Performance Metrics — A Primer, Part 1](http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/) 471 | - [Essential Web Performance Metrics — Part 2](http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/) 472 | - [YUISlide,针对移动设备的动画性能优化](http://jayli.github.io/blog/data/2011/12/23/yuislide.html) 473 | - [Improving Site Performance](http://joelglovier.com/improving-site-performance/) 474 | - [让网站提速的最佳前端实践](http://blog.segmentfault.com/laopopo/1190000000367899) 475 | - [Why Website Speed is Important](http://sixrevisions.com/web-development/why-website-speed-is-important/) 476 | - [Need for Speed – How to Improve your Website Performance](http://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/) 477 | - [阿里无线前端性能优化指南 (Pt.1 加载期优化) ](https://github.com/amfe/article/issues/1) 478 | - []() 479 | 480 | 2. 优化工具 481 | 482 | - [JavaScript 性能分析新工具 OneProfile](http://www.html-js.com/article/3083) 483 | - [JavaScript 堆内存分析新工具 OneHeap](http://www.html-js.com/article/3091) 484 | 485 | 3. 在线工具 486 | 487 | - [google在线工具](https://developers.google.com/speed/pagespeed/insights/) 488 | - [阿里测](http://www.alibench.com/) 489 | - [阿里-免费测试服务](http://itest.aliyun.com/) 490 | - [阿里-F2etest多浏览器兼容性测试解决方案](https://github.com/alibaba/f2etest) 491 | - [js性能测试](http://jsperf.com/) 492 | - []() 493 | 494 | ###十一. 个人优秀设计网站 495 | 496 | - [技术架构](http://www.zhihu.com/topic/19612641) 497 | - [前端架构](http://saito.im/note/The-Architecture-of-F2E/) 498 | - [如何成为前端架构师](http://www.zhihu.com/question/24092572) 499 | - [关于前端架构-张克军](http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html) 500 | - [百度腾讯offer比较（腾讯游戏VS百度基础架构）](http://www.zhihu.com/question/25583350) 501 | - []() 502 | 503 | 504 | ###十二. 代码分享 505 | 506 | ####1. 推荐作品 507 | 508 | - [winter代码片段需要翻墙](https://gist.github.com/wintercn) 509 | - [fgm](http://www.fgm.cc/learn/) 510 | - [岑安作品集](https://github.com/hongru/hongru.github.com) 511 | - [当耐特demo集合](http://kmdjs.github.io/) 512 | - [米空格 js作品](http://www.laoshu133.com/Lab/) 513 | - [myFocus](http://koen301.github.io/) 514 | - [jssdk flash开发组件　抽奖转盘](http://jssdk.sinaapp.com/) 515 | - [SeaJS组件库](http://panxuepeng.github.io/seajslib/) 516 | - [颜海镜作品](http://yanhaijing.com/myProject/) 517 | - [脚儿网作品](http://jo2.org/category/myworks/) 518 | - [javascript个人作品](http://www.cnitblog.com/yemoo/category/3107.html) 519 | - [妙味的雷东升游戏作品](http://bbs.miaov.com/forum.php?mod=viewthread&tid=7790) 520 | - [javascript作品集](http://bbs.csdn.net/topics/380227212) 521 | - [云五笔，灰度产生生成工具](https://github.com/TooBug/works) 522 | - [项目主页](http://koen301.github.io/) 523 | - [个性的作品主页](http://zaole.net/) 524 | - [播放器](http://static.tingall.com/v2/player/) 525 | - [ucren js demos 集](http://ucren.com/blog/demos) 526 | - [智能社](http://www.zhinengshe.com/works_list.html) 527 | - [实例陈列架](http://demos.shizuwu.cn/) 528 | - [zoye demo](http://zoye.sinaapp.com/demo) 529 | - [王员外](http://lab.wangyuanwai.com/) 530 | - [平凡](http://pingfan1990.sinaapp.com) 531 | - [jyg 游戏案例](http://www.lovewebgames.com/) 532 | - [很多jquery插件](http://www.helloweba.com/list.html) 533 | - [不羁虫 - soJs 作品系列](http://www.bujichong.com/sojs/api/index.html) 534 | - [frozenui](http://frozenui.github.io/case.html) 535 | - [黑白棋](http://js-game.github.io/othello/) 536 | - [fromone](http://yansm.github.io/fromone/index.html) 537 | 538 | ####2. 群员作品 539 | 540 | - [MDialog - [合肥-M.J]](http://demo.webjyh.com/) 541 | - [轮播图 - [上海－冷静]](http://sandbox.runjs.cn/show/do6zlrrk ) 542 | - [[广州—坚壳]](http://www.replace5.com/) 543 | - [[成都 - 无痕]　感恩节专题](http://www.seejs.com/demos/) 544 | - [[球霸天]](http://hacke2.github.io/works) 545 | - [[北京-小数]](http://www.cnblogs.com/mcat/) 546 | - [[ptf] Magix 工具](http://thx.github.io/magix/) 547 | - [[杭州-Pft] Magix 基于 MVC 结构和 Hash 驱动的 OPOA（One Page One Application）应用](http://thx.github.io/magix/) 548 | - [[上海-剧中人]-实验室](http://bh-lay.com/labs/) 549 | - [[上海-豪情 ] 作品集合](http://jikeytang.github.io) 550 | - [[成都-feeling]](http://guoshan.sinaapp.com/) 551 | - [[上海-angela]](http://www.cnblogs.com/liyunhua/) 552 | - [[海南-hank]作品](http://hcjp.github.io/work/demo/) 553 | - [[上海-张力]博客](https://github.com/yibuyisheng/blogs/issues) 554 | - [[上海-zenki]作品](http://zkske121.github.io/) 555 | - [移动端图案解锁](http://01google.sinaapp.com/locker.html) 556 | - [[合肥-M.J] - MPreview 移动端图片预览组](https://github.com/webjyh/MPreview.mobile) 557 | - [[合肥-M.J] - Mexam 移动端在线做题组](https://github.com/webjyh/Mexam) 558 | - [[北京-苏瑞] - dancer小人](http://letyougo.github.io/dancer/) 559 | - [[上海-玄沐]- 个人网站](http://k.swao.cn/js/) 560 | - [[厦门-二哲]- 个人博客](http://www.meckodo.com/) 561 | 562 | ####3. 国外大牛精品 563 | 564 | - [pazguille](http://pazguille.me/) 565 | 566 | ###十三. 简历模板 567 | 568 | - [不错的个人简历](http://learnshare.github.io/about/index.html) 569 | - [简历](http://hcy2367.github.io/resume/) 570 | - [张伦](http://ncuey.sinaapp.com/CrispElite/ ) 571 | - [简历](https://github.com/hacke2/ResumeSample) 572 | - [翁天信](http://blog.dandyweng.com/2013/07/how-my-website-was-created/) 573 | - [动画方式的简历](http://www.webhek.com/misc/interactive-resume/) 574 | - [组件丰富简历](http://www.linqing07.com/resume.html) 575 | - [简历池](http://www.mojianli.com/resume/view) 576 | - [haorooms博客](http://www.haorooms.com/about) 577 | - [Justin Young](http://cv.youngdze.com/) 578 | - []() 579 | 580 | ###十四. 面试题 581 | 582 | - [那几个月在找工作（百度，网易游戏）](http://www.nowcoder.com/discuss/3196) 583 | - [2014最新面试题](http://www.html-js.com/article/1743) 584 | - [阿里前端面试题](http://www.w3cfuns.com/thread-5598563-2-1.html) 585 | - [2016校招内推 -- 阿里巴巴前端 -- 三面面试经历 ](http://www.cnblogs.com/imwtr/p/4685546.html) 586 | - [腾讯面试题](http://www.w3cfuns.com/article-5599657-1-1.html) 587 | - [年后跳槽那点事：乐视+金山+360面试之行](http://www.cnblogs.com/lvdabao/p/3660707.html) 588 | - [阿里前端面试题上线](http://fatesinger.com/2722.html) 589 | - [拉勾网js面试题](http://www.cnblogs.com/52cik/p/js-question-lg.html) 590 | - [前端面试](http://www.cnblogs.com/allenxing/p/3724382.html) 591 | - [Web开发笔试面试题 大全](http://mianshiti.diandian.com/) 592 | - [前端开发面试题](http://segmentfault.com/a/1190000000465431) 593 | - [2014最新前端面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions) 594 | - [百度面试](https://github.com/fex-team/interview-questions) 595 | - [面试题](http://www.w3cfuns.com/forum.php?mod=forumdisplay&fid=51&filter=typeid&typeid=177) 596 | - [前端工作面试问题](https://github.com/darcyclarke/Front-end-Developer-Interview-Questions/tree/master/Chinese) 597 | - [前端开发面试题](http://segmentfault.com/a/1190000000465431) 598 | - [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) 599 | - [最全前端面试问题及答案总结 ](http://segmentfault.com/a/1190000002562454) 600 | - [如何面试一名前端开发工程师？](http://www.html-js.com/article/Large-search-front-team-column%202961) 601 | - [史上最全 前端开发面试问题及答案整理](https://github.com/hawx1993/Front-end-Interview-questions) 602 | - [前端实习生面试总结 ](http://www.cnblogs.com/xiaoruo/p/4665163.html) 603 | - [史上最全 前端开发面试问题及答案整理](https://github.com/hawx1993/Front-end-Interview-questions) 604 | - [BAT及各大互联网公司2014前端笔试面试题：JavaScript篇](http://blog.jobbole.com/78738/) 605 | - [前端开发面试题大收集](https://github.com/paddingme/Front-end-Web-Development-Interview-Question) 606 | - [收集的前端面试题和答案](https://github.com/qiu-deqing/FE-interview) 607 | - [如何面试前端工程师](http://www.zhihu.com/question/19568008) 608 | - [前端开发面试题](https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md) 609 | - [牛客网-笔试面经](http://www.nowcoder.com/discuss?type=2) 610 | 611 | ###十五. iconfont 612 | 613 | 614 | ###十六. 开发工具类 615 | 616 | 1. 前端开发工具 617 | 618 | - [IntelliJ IDEA 简体中文专题教程](https://github.com/judasn/IntelliJ-IDEA-Tutorial) 619 | - [Webstorm,InterllIdea,Phpstorm](http://t.cn/8kZZ1Uy) 620 | - [SublimeText](https://github.com/jikeytang/sublime-text) 621 | - [Atom](https://atom.io/) 622 | - [visual studio code](https://code.visualstudio.com/) 623 | 624 | 2. Chrome, Firebug, Filddle 调试 625 | 626 | 1. Fiddler 627 | - [Fiddler调式使用知多少(一)深入研究](http://www.cnblogs.com/tugenhua0707/p/4623317.html) 628 | - [微信fiddle](http://www.cnblogs.com/strick/p/4570006.html) 629 | - [微信fiddle](http://gaoboy.com/article/26.html) 630 | - []() 631 | 632 | 2. Chrome 633 | - [Google Chrome 官方](https://developer.chrome.com/devtools) 634 | - [Chrome - 基础](http://www.cnblogs.com/constantince/p/4565261.html) 635 | - [Chrome - 进阶](http://www.cnblogs.com/constantince/p/4579121.html) 636 | - [Chrome - 性能](http://www.cnblogs.com/constantince/p/4585983.html) 637 | - [Chrome - 性能进阶](http://www.cnblogs.com/constantince/p/4607497.html) 638 | - [Chrome - 移动](http://www.cnblogs.com/constantince/p/4624241.html) 639 | - [Chrome - 使用技巧](http://www.cnblogs.com/liyunhua/p/4544738.html) 640 | - [Chrome - Console控制台不完全指南](http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html) 641 | - [Chrome - Workspace使浏览器变成IDE](http://c7sky.com/chrome-devtools-workspace.html) 642 | - [network面板](http://www.html-js.com/article/Nothing-blind%202975) 643 | - [chrome开发工具快捷键](http://anti-code.com/devtools-cheatsheet/) 644 | - [chrome调试工具常用功能整理](http://www.html-js.com/article/2327) 645 | - [Chrome 开发工具 Workspace 使用](http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/) 646 | - [Chrome神器Vimium快捷键学习记录 ](http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html) 647 | - [sass调试-w3cplus](http://www.w3cplus.com/sassguide/debug.html) 648 | - [如何更专业的使用Chrome开发者工具-w3cplus](http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html) 649 | - [chrome调试canvas](http://sentsin.com/web/253.html) 650 | - [chrome profiles1](https://developer.chrome.com/devtools/index) 651 | - [chrome profiles2](http://h5dev.uc.cn/article-25-1.html) 652 | - [chrome profiles3](http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles) 653 | - [chrome移动版调试](https://developers.google.com/chrome-developer-tools/docs/mobile-emulation) 654 | - [chrome调试](http://ued.taobao.org/blog/?p=5534) 655 | - [chrome的调试](http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html) 656 | - [chrome console 命令详解](https://developers.google.com/chrome-developer-tools/docs/commandline-api) 657 | - [查看事件绑定1](http://www.cnblogs.com/leonkao/p/3809655.html) 658 | - [查看事件绑定2](http://www.cnblogs.com/xiaoyao2011/p/3447421.html) 659 | - [神器——Chrome开发者工具(一)](http://segmentfault.com/blog/xuelang/1190000000683599) 660 | - [奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍)](https://xinranliu.me/2015-05-22-qiqu-performance/) 661 | - [chrome 开发者工具的 15 个小技巧](http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html) 662 | - [Chrome开发者工具不完全指南](http://1ke.co/course/361) 663 | - [Chrome 开发者工具使用技巧](http://segmentfault.com/a/1190000003882567) 664 | 665 | 3. Firebug 666 | - [firebug视频教程](http://www.imooc.com/learn/137) 667 | - [firefox 模拟器](https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE) 668 | - [console.log 命令详解](http://www.cnblogs.com/ctriphire/p/4116207.html) 669 | - [Firebug入门指南](http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html) 670 | - [Firebug控制台详解](http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html) 671 | - []() 672 | 673 | 4. 移动,微信调试 674 | - [浏览器端调试安卓](https://openstf.github.io/) 675 | - [移动端前端开发调试](http://yujiangshui.com/multidevice-frontend-debug/) 676 | - [使用 Chrome 远程调试 Android 设备](https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md) 677 | - [mac移动端调试](http://plus.uc.cn/document/webapp/doc5.html) 678 | - [mac移动端调试](http://www.mihtool.com/) 679 | - [无线调试攻略](http://thx.github.io/mobile/debugging-in-mobile/) 680 | - [无线调试攻略](http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile/) 681 | - [屌爆了,完美调试 微信webview(x5)](http://www.jianshu.com/p/ccf124f1f74b) 682 | - [微信调试的那些事](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/) 683 | - [远程console](http://jsconsole.com/) 684 | - [微信调试工具](http://blog.qqbrowser.cc/) 685 | - [各种真机远程调试方法汇总](https://github.com/jieyou/remote_inspect_web_on_real_device) 686 | 687 | 5. iOS Simulator 688 | - [Simulator](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html) 689 | - [Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得](http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary/) 690 | 691 | 3. img 692 | 693 | - [loading img](http://preloaders.net/en/circular) 694 | - [智图-图片优化平台](http://zhitu.isux.us/) 695 | - [在线png优化](https://tinypng.com/) 696 | 697 | 4. 生成二维码 698 | 699 | - [生成二维码](http://cli.im/) 700 | 701 | 5. 浏览器同步 702 | - [puer](https://github.com/leeluolee/puer) 703 | - [liveReload](http://livereload.com/) 704 | - [f5](http://getf5.com/) 705 | - [File Watchers](http://geek100.com/2608/) 706 | 707 | 6. 在线PPT制作 708 | - [PPT](https://github.com/ksky521/nodePPT) 709 | - [reveal](https://github.com/hakimel/reveal.js/) 710 | - [slippy](https://github.com/Seldaek/slippy) 711 | 712 | ###十七. 前端导航网站 713 | 714 | 715 | ###十八. 常用CDN 716 | 717 | 718 | ###十九. Git,SVN,Github 719 | 720 | 721 | -------------------------------------------------------------------------------- /js.md: -------------------------------------------------------------------------------- 1 | ### 以下是常用的代码收集，没有任何技术含量，只是填坑的积累。转载请注明出处，谢谢。 2 | 3 | #### 1. PC - js 4 | - 返回指定范围的随机数(m-n之间)的公式 5 | ```javascript 6 | Math.random()*(n-m)+m 7 | ``` 8 | 9 | - [return false](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false) 10 | - [return false](http://www.75team.com/archives/201) 11 | ```javascript 12 | // event.preventDefault()会阻挡预设要发生的事件. 13 | // event.stopPropagation()会阻挡发生冒泡事件. 14 | // 而return false则是前面两者的事情他都会做： 15 | // 他会做event.preventDefault(); 16 | // 他会做event.stopPropagation(); 17 | // 停止callback function的执行并且立即return回来 18 | ``` 19 | 20 | - 复制文本到剪切板 21 | ```javascript 22 | function copyToClipboard(data) { 23 | const _tempInput = document.createElement('input') 24 | _tempInput.value = data.value 25 | document.body.appendChild(_tempInput) 26 | _tempInput.select() 27 | document.execCommand('Copy') 28 | document.body.removeChild(_tempInput) 29 | } 30 | ``` 31 | 32 | - 前端生成文件并下载 33 | ```javascript 34 | function createAndDownloadFile(fileName, content) { 35 | const aTag = document.createElement('a'); 36 | const blob = new Blob([content]); 37 | aTag.download = `${fileName}.json`; 38 | aTag.href = URL.createObjectURL(blob); 39 | aTag.click(); 40 | URL.revokeObjectURL(blob); 41 | } 42 | ``` 43 | 44 | - 高亮文本 45 | ```javascript 46 | function highlight(text, words, tag='span') { 47 | let i, len = words.length, re; 48 | for (i = 0; i < len; i++) { 49 | re = new RegExp(words[i], 'g'); 50 | if (re.test(text)) { 51 | text = text.replace(re, '<'+ tag +' class="highlight">$&'); 52 | } 53 | } 54 | return text; 55 | } 56 | 57 | ``` 58 | 59 | - 限制文本字数 60 | ```javascript 61 | function excerpt(str, nwords) { 62 | let words = str.split(' '); 63 | words.splice(nwords, words.length-1); 64 | return words.join(' ') + 65 | (words.length !== str.split(' ').length ? '…' : ''); 66 | } 67 | ``` 68 | 69 | - 简单创建动态菜单下拉列表 70 | ```javascript 71 | function createMenu(items, tags=['ul', 'li']) { 72 | const parent = tags[0]; 73 | const child = tags[1]; 74 | let item, value = ''; 75 | for (let i = 0, l = items.length; i < l; i++) { 76 | item = items[i]; 77 | if (/:/.test(item)) { 78 | item = items[i].split(':')[0]; 79 | value = items[i].split(':')[1]; 80 | } 81 | items[i] = '<'+ child +' '+ 82 | (value && 'value="'+value+'"') +'>'+ 83 | item +''; 84 | } 85 | return '<'+ parent +'>'+ items.join('') +''; 86 | } 87 | ``` 88 | 89 | - 防止被Iframe嵌套 90 | ```javascript 91 | if(top != self){ 92 | location.href = ”about:blank”; 93 | } 94 | ``` 95 | 96 | - 两种图片lazy加载的方式 97 | 第一个By JS中级交流群 成都-猎巫 第二个By 上海-zenki 98 | ```javascript 99 | // @description 准备为图片预加载使用的插件 100 | // 使用的图片容器css类名为lazy-load-wrap 101 | // 图片真实地址为data-lazy-src 102 | // 当lazy-load-wrap容器进入视口，则开始替换容器内所有需要延迟加载的图片路径，并更改容器的加载状态 103 | //第一种方法 104 | $.fn.compassLazyLoad=function(){ 105 | var _HEIGHT=window.innerHeight, 106 | _lazyLoadWrap=$('.lazy-load-wrap'); 107 | 108 | var methods={ 109 | setOffsetTop:function(){ 110 | $.each(_lazyLoadWrap,function(i,n){ 111 | $(n).attr({ 112 | 'top':n.offsetTop-_HEIGHT, 113 | 'status':'wait' 114 | }); 115 | }) 116 | }, 117 | isShow:function(){ 118 | var _scrollTop=$(window).scrollTop; 119 | //利用image容器判断是否进入视口，而非image本身 120 | $.each(_lazyLoadWrap,function(){ 121 | var _that=$(this); 122 | if (_that.attr('status')==='done') { 123 | return; 124 | }; 125 | if (_that.attr('top')<=_scrollTop) { 126 | _that.find('img[data-lazy-src]').each(function(i,n){ 127 | n.src=$(n).data('lazy-src'); 128 | }); 129 | _that.attr('status','done'); 130 | }; 131 | }) 132 | }, 133 | scroll:function(){ 134 | $(window).on('scroll',function(){ 135 | methods.isShow(); 136 | }); 137 | }, 138 | init:function(){ 139 | methods.setOffsetTop(); 140 | methods.isShow(); 141 | methods.scroll(); 142 | } 143 | }; 144 | methods.init(); 145 | 146 | } 147 | 148 | 149 | //第二种方法 150 | 151 | var exist=(function($){ 152 | var timer=null, 153 | temp=[].slice.call($('.container')); 154 | ret={}; 155 | 156 | for(var i=0,len=temp.length-1;i<=len;i++){ 157 | ret[i]=temp[i]; 158 | } 159 | var isExist=function(winTop,winEnd){ 160 | for(var i in ret){ 161 | console.log(ret); 162 | var item=ret[i], 163 | eleTop=item.offsetTop, 164 | eleEnd=eleTop+item.offsetHeight; 165 | 166 | if((eleTop>winTop&&eleTop<=winEnd)||(eleEnd>winTop&&eleEnd<=winEnd)){ 167 | $(item).css('background','none'); 168 | new Tab($(item).attr('id'),data).init; 169 | delete ret[i]; 170 | } 171 | } 172 | } 173 | return { 174 | timer:timer; 175 | isExist:isExist; 176 | }; 177 | })($); 178 | 179 | 180 | 181 | //第三种方法 182 | Zepto(function ($) { 183 | var swiper = new Swiper('.swiper-container', { 184 | pagination: '.swiper-pagination', 185 | paginationClickable: true, 186 | autoplay: 3000, 187 | loop: true, 188 | autoplayDisableOnInteraction: false 189 | }); 190 | (function lazyLoad() { 191 | var imgs = $(".lazyLoad"); 192 | var src = ''; 193 | $.each(imgs, function (index, item) { 194 | src = $(item).attr('data-src'); 195 | $(item).attr('src', src); 196 | }); 197 | })(); 198 | }); 199 | $(function () { 200 | var lazyLoadTimerId = null; 201 | /// 智能加载事件 202 | $(window).bind("scroll", function () { 203 | clearTimeout(lazyLoadTimerId); 204 | lazyLoadTimerId = setTimeout(function () { 205 | // 延迟加载所有图片 206 | var isHttp = (location.protocol === "http:"); 207 | $("#ym_images img").each(function () { 208 | var self = $(this); 209 | if (self.filter(":above-the-fold").length > 0) { 210 | var originUrl = self.attr("data-original"); 211 | self.attr("src", originUrl); 212 | } 213 | }); 214 | }, 500); 215 | }); 216 | }); 217 | 218 | ``` 219 | 220 | - 某年某月的1号为星期几 221 | ```javascript 222 | var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; 223 | weekday[new Date(2015, 9, 1).getDay()]; //2015年10月1号 224 | ``` 225 | 226 | #### 2. Mobile - js 227 | 228 | - [js 判断IOS, 安卓](http://caibaojian.com/browser-ios-or-android.html) 229 | ```javascript 230 | var u = navigator.userAgent, app = navigator.appVersion; 231 | var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 232 | var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 233 | alert('是否是Android：'+isAndroid); 234 | alert('是否是iOS：'+isiOS); 235 | ``` 236 | 237 | #### 3. [微信 weixin](http://loo2k.com/blog/detecting-wechat-client/) 238 | 239 | - UserAgent 判断微信客户端 240 | ```javascript 241 | // 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 242 | function isWechat() { 243 | var ua = navigator.userAgent.toLowerCase(); 244 | return /micromessenger/i.test(ua) || /windows phone/i.test(ua); 245 | } 246 | ``` 247 | - 获取单个dom元素 248 | ```js 249 | function $(selector, el) { 250 | if (!el) { 251 | el = document; 252 | } 253 | return el.querySelector(selector); 254 | } 255 | ``` 256 | - 获取多个dom元素 257 | ```js 258 | function $$(selector, el) { 259 | if (!el) { 260 | el = document; 261 | } 262 | return el.querySelectorAll(selector); 263 | // Note: the returned object is a NodeList. 264 | // If you'd like to convert it to a Array for convenience, use this instead: 265 | // return Array.prototype.slice.call(el.querySelectorAll(selector)); 266 | } 267 | ``` 268 | - 将nodeList集合转换为数组 269 | ```js 270 | function convertToArray(nodeList) { 271 | var array = null 272 | try { 273 | // IE8-NodeList是COM对象 274 | array = Array.prototype.slice.call(nodeList, 0) 275 | } catch (err) { 276 | array = [] 277 | for (var i = 0, len = nodeList.length; i < len; i++) { 278 | array.push(nodeList[i]) 279 | } 280 | } 281 | return array 282 | } 283 | ``` 284 | - ajax函数 285 | ```js 286 | function ajax(setting) { 287 | //设置参数的初始值 288 | var opts = { 289 | method: (setting.method || "GET").toUpperCase(), //请求方式 290 | url: setting.url || "", // 请求地址 291 | async: setting.async || true, // 是否异步 292 | dataType: setting.dataType || "json", // 解析方式 293 | data: setting.data || "", // 参数 294 | success: setting.success || function () { }, // 请求成功回调 295 | error: setting.error || function () { } // 请求失败回调 296 | }; 297 | 298 | // 参数格式化 299 | function params_format(obj) { 300 | var str = ""; 301 | for (var i in obj) { 302 | str += i + "=" + obj[i] + "&"; 303 | } 304 | return str 305 | .split("") 306 | .slice(0, -1) 307 | .join(""); 308 | } 309 | 310 | // 创建ajax对象 311 | var xhr = new XMLHttpRequest(); 312 | 313 | // 连接服务器open(方法GET/POST，请求地址， 异步传输) 314 | if (opts.method == "GET") { 315 | xhr.open( 316 | opts.method, 317 | opts.url + "?" + params_format(opts.data), 318 | opts.async 319 | ); 320 | xhr.send(); 321 | } else { 322 | xhr.open(opts.method, opts.url, opts.async); 323 | xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 324 | xhr.send(opts.data); 325 | } 326 | 327 | /* 328 | ** 每当readyState改变时，就会触发onreadystatechange事件 329 | ** readyState属性存储有XMLHttpRequest的状态信息 330 | ** 0 ：请求未初始化 331 | ** 1 ：服务器连接已建立 332 | ** 2 ：请求已接受 333 | ** 3 : 请求处理中 334 | ** 4 ：请求已完成，且相应就绪 335 | */ 336 | xhr.onreadystatechange = function () { 337 | if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) { 338 | switch (opts.dataType) { 339 | case "json": 340 | var json = JSON.parse(xhr.responseText); 341 | opts.success(json); 342 | break; 343 | case "xml": 344 | opts.success(xhr.responseXML); 345 | break; 346 | default: 347 | opts.success(xhr.responseText); 348 | break; 349 | } 350 | } 351 | }; 352 | 353 | xhr.onerror = function (err) { 354 | opts.error(err); 355 | }; 356 | } 357 | ``` 358 | 359 | - JS接口安全域名不填写，分享onMenuShareAppMessage直接会取默认值。 360 | ```javascript 361 | // 分享onMenuShareAppMessage直接会取默认值 362 | ``` 363 | 364 | - 关闭当前页面 365 | ```javascript 366 | WeixinJSBridge.call('closeWindow'); 367 | ``` 368 | 369 | - [支付接口方法调用必须在addevent里边调用](http://www.cnblogs.com/true_to_me/p/3565039.html) 370 | ```javascript 371 | document.addEventListener('WeixinJSBridgeReady', function onBridgeReady(){ 372 | that.initOrder(); 373 | }, false); 374 | ``` 375 | 376 | - 支付接口方法调用必须在 377 | ```javascript 378 | WeixinJSBridge.invoke('getBrandWCPayRequest', d, function(res){ 379 | if(res.err_msg == "get_brand_wcpay_request:ok"){ 380 | // alert("支付成功"); 381 | // union.release(d.orderId); 382 | resetUrl(); 383 | paySuccess('home', d.orderId); 384 | } else { 385 | cancelOrder(d.orderId); 386 | // alert(res.err_msg); 387 | } 388 | loading.hide(); 389 | }); 390 | ``` 391 | 392 | - 瀑布流无限加载实例 393 | ```javascript 394 | // be dependent on jquery & jquery.infinitescroll.min.js 395 | // insert this '
' to your page.html 396 | (function($){ 397 | $(function(){ 398 | var $container = $('.list-wrap-gd'); 399 | function layOutCallBack() { 400 | $container.imagesLoaded(function(){ 401 | $container.masonry({ 402 | itemSelector: '.item-bar', 403 | gutter: 10 404 | }); 405 | }); 406 | $container.imagesLoaded().progress( function() { 407 | $container.masonry('layout'); 408 | }); 409 | } 410 | 411 | layOutCallBack(); 412 | 413 | $container.infinitescroll({ 414 | navSelector : "#more", 415 | nextSelector : "#more a", 416 | itemSelector : ".item-bar", 417 | pixelsFromNavToBottom: 300, 418 | loading:{ 419 | img: "/images/masonry_loading.gif", 420 | msgText: ' ', 421 | finishedMsg: "已经到最后一页", 422 | finished: function(){ 423 | $("#more").remove(); 424 | $("#infscr-loading").hide(); 425 | } 426 | }, 427 | errorCallback:function(){ 428 | $(window).unbind('.infscr'); 429 | }, 430 | pathParse: function (path, nextPage) { 431 | var query = ""; 432 | var keyword=$("#search_keyword").val(); 433 | var cat_id=$("#cat_id").val(); 434 | var brand_id=$("#brand_id").val(); 435 | var country_id = $("#country_id").val(); 436 | query = query + "&namekeyword="+keyword; 437 | query = query +"&cat_id="+cat_id 438 | query = query + "&brand_id=" + brand_id; 439 | query = query + "&country_id=" + country_id; 440 | path = [path,query]; 441 | return path; 442 | } 443 | }, 444 | 445 | function(newElements) { 446 | var $newElems = $( newElements ).css({ opacity: 0 }); 447 | $newElems.imagesLoaded(function(){ 448 | $newElems.animate({ opacity: 1 }); 449 | $container.masonry( 'appended', $newElems, true ); 450 | layOutCallBack(); 451 | }); 452 | }); 453 | }); 454 | })(jQuery); 455 | ``` 456 | 457 | - [iOS，Safari浏览器，input等表单focus后fixed元素错位问题](https://www.snip2code.com/Snippet/176582/--iOS-Safari----input---focus-fixed-----) 458 | ```javascript 459 | if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ) { 460 | $(document).on('focus', 'input, textarea', function() 461 | { 462 | $('header').css("position", 'absolute'); 463 | $('footer').css("position", 'absolute'); 464 | 465 | }); 466 | 467 | $(document).on('blur', 'input, textarea', function() 468 | { 469 | $('header').css("position", 'fixed'); 470 | $('footer').css("position", 'fixed'); 471 | 472 | }); 473 | } 474 | 475 | ``` 476 | 477 | - 得到地理位置 478 | ```javascript 479 | function getLocation(callback){ 480 | if(navigator.geolocation){ 481 | navigator.geolocation.getCurrentPosition( 482 | function(p){ 483 | callback(p.coords.latitude, p.coords.longitude); 484 | }, 485 | function(e){ 486 | var msg = e.code + "\n" + e.message; 487 | } 488 | ); 489 | } 490 | } 491 | ``` 492 | 493 | - [rem计算适配](http://isux.tencent.com/web-app-rem.html) 494 | ```javascript 495 | (function(doc, win){ 496 | var docEl = doc.documentElement, 497 | resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 498 | recalc = function(){ 499 | var clientWidth = docEl.clientWidth; 500 | if(!clientWidth) return; 501 | docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 502 | }; 503 | 504 | if(!doc.addEventListener) return; 505 | win.addEventListener(resizeEvt, recalc, false); 506 | doc.addEventListener('DOMContentLoaded', recalc, false); 507 | })(document, window); 508 | ``` 509 | 510 | - [另外一种rem方案](http://www.html-js.com/article/3041) 511 | ```javascript 512 | var dpr, rem, scale; 513 | var docEl = document.documentElement; 514 | var fontEl = document.createElement('style'); 515 | var metaEl = document.querySelector('meta[name="viewport"]'); 516 | 517 | dpr = window.devicePixelRatio || 1; 518 | rem = docEl.clientWidth * 2 / 10; 519 | scale = 1 / dpr; 520 | 521 | 522 | // 设置viewport，进行缩放，达到高清效果 523 | metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); 524 | 525 | // 设置data-dpr属性，留作的css hack之用 526 | docEl.setAttribute('data-dpr', dpr); 527 | 528 | // 动态写入样式 529 | docEl.firstElementChild.appendChild(fontEl); 530 | fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}'; 531 | 532 | // 给js调用的，某一dpr下rem和px之间的转换函数 533 | window.rem2px = function(v) { 534 | v = parseFloat(v); 535 | return v * rem; 536 | }; 537 | window.px2rem = function(v) { 538 | v = parseFloat(v); 539 | return v / rem; 540 | }; 541 | 542 | window.dpr = dpr; 543 | window.rem = rem; 544 | ``` 545 | 546 | - 获取js所在路径 547 | ```js 548 | function getJsDir (src) { 549 | var script = null; 550 | 551 | if (src) { 552 | script = [].filter.call(document.scripts, function (v) { 553 | return v.src.indexOf(src) !== -1; 554 | })[0]; 555 | } else { 556 | script = document.scripts[document.scripts.length - 1]; 557 | } 558 | 559 | return script ? script.src.substr(0, script.src.lastIndexOf('/')) : script; 560 | } 561 | ``` 562 | - 页面加载自执行函数 563 | ```js 564 | function addload(func) { 565 | var old = window.onload; 566 | if (typeof window.onload != "function") { 567 | window.onload = func; 568 | } else { 569 | window.onload = function () { 570 | old(); 571 | func(); 572 | } 573 | } 574 | } 575 | ``` 576 | 577 | - 从全局捕获错误 578 | ```js 579 | window.onerror = function (errMsg, scriptURI, lineNumber, columnNumber, errorObj) { 580 | setTimeout(function () { 581 | var rst = { 582 | "错误信息：": errMsg, 583 | "出错文件：": scriptURI, 584 | "出错行号：": lineNumber, 585 | "出错列号：": columnNumber, 586 | "错误详情：": errorObj 587 | }; 588 | 589 | alert(JSON.stringify(rst, null, 10)); 590 | }); 591 | }; 592 | ``` 593 | 594 | - [如何通过 js 修改微信浏览器的title?](https://www.zhihu.com/question/26228251/answer/32405529) 595 | ```javascript 596 | var $body = $('body'); 597 | document.title = 'title'; // hack在微信等webview中无法修改document.title的情况 598 | var $iframe = $('').on('load', function(){ 599 | setTimeout(function(){ 600 | $iframe.off('load').remove() 601 | }, 0) 602 | }).appendTo($body) 603 | ``` 604 | 605 | #### 1. 常用方法 - js 606 | - 字符串长度截取 607 | ```js 608 | function cutstr(str, len) { 609 | var temp, 610 | icount = 0, 611 | patrn = /[^\x00-\xff]/， 612 | strre = ""; 613 | for (var i = 0; i < str.length; i++) { 614 | if (icount < len - 1) { 615 | temp = str.substr(i, 1); 616 | if (patrn.exec(temp) == null) { 617 | icount = icount + 1 618 | } else { 619 | icount = icount + 2 620 | } 621 | strre += temp 622 | } else { 623 | break; 624 | } 625 | } 626 | return strre + "..." 627 | } 628 | ``` 629 | 630 | - 替换全部 631 | ```js 632 | String.prototype.replaceAll = function(s1, s2) { 633 | return this.replace(new RegExp(s1, "gm"), s2) 634 | } 635 | ```` 636 | 637 | - 清除空格 638 | ```js 639 | String.prototype.trim = function() { 640 | var reExtraSpace = /^\s*(.*?)\s+$/; 641 | return this.replace(reExtraSpace, "$1") 642 | } 643 | ``` 644 | 645 | - 清除左空格/右空格 646 | ```js 647 | function ltrim(s){ return s.replace( /^(\s*|　*)/, ""); } 648 | function rtrim(s){ return s.replace( /(\s*|　*)$/, ""); } 649 | ``` 650 | - 判断是否以某个字符串开头 651 | ```js 652 | String.prototype.startWith = function (s) { 653 | return this.indexOf(s) == 0 654 | } 655 | ``` 656 | - 判断是否以某个字符串结束 657 | ```js 658 | String.prototype.endWith = function (s) { 659 | var d = this.length - s.length; 660 | return (d >= 0 && this.lastIndexOf(s) == d) 661 | } 662 | ``` 663 | - 转义html标签 664 | ```js 665 | function HtmlEncode(text) { 666 | return text.replace(/&/g, '&').replace(/\"/g, '"').replace(//g, '>') 667 | } 668 | ``` 669 | - 时间日期格式转换 670 | ```js 671 | Date.prototype.Format = function(formatStr) { 672 | var str = formatStr; 673 | var Week = ['日', '一', '二', '三', '四', '五', '六']; 674 | str = str.replace(/yyyy|YYYY/, this.getFullYear()); 675 | str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100)); 676 | str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1)); 677 | str = str.replace(/M/g, (this.getMonth() + 1)); 678 | str = str.replace(/w|W/g, Week[this.getDay()]); 679 | str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate()); 680 | str = str.replace(/d|D/g, this.getDate()); 681 | str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours()); 682 | str = str.replace(/h|H/g, this.getHours()); 683 | str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes()); 684 | str = str.replace(/m/g, this.getMinutes()); 685 | str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds()); 686 | str = str.replace(/s|S/g, this.getSeconds()); 687 | return str 688 | } 689 | ``` 690 | 691 | - 判断日期是否有效 692 | ```javascript 693 | function isValidDate(value, userFormat='mm/dd/yyyy') { 694 | const delimiter = /[^mdy]/.exec(userFormat)[0]; 695 | const theFormat = userFormat.split(delimiter); 696 | const theDate = value.split(delimiter); 697 | function isDate(date, format) { 698 | let m, d, y, i = 0, len = format.length, f; 699 | for (i; i < len; i++) { 700 | f = format[i]; 701 | if (/m/.test(f)) m = date[i]; 702 | if (/d/.test(f)) d = date[i]; 703 | if (/y/.test(f)) y = date[i]; 704 | } 705 | return ( 706 | m > 0 && m < 13 && 707 | y && y.length === 4 && 708 | d > 0 && 709 | d <= (new Date(y, m, 0)).getDate() 710 | ); 711 | } 712 | 713 | return isDate(theDate, theFormat); 714 | } 715 | ``` 716 | 717 | - 判断是否为数字类型 718 | ```js 719 | function isDigit(value) { 720 | var patrn = /^[0-9]*$/; 721 | if (patrn.exec(value) == null || value == "") { 722 | return false 723 | } else { 724 | return true 725 | } 726 | } 727 | ``` 728 | - 判断具体类型 729 | ```js 730 | function getType(a) { 731 | var typeArray = Object.prototype.toString.call(a).split(" "); 732 | return typeArray[1].slice(0, -1); 733 | } 734 | ``` 735 | - 设置cookie值 736 | ```js 737 | function setCookie(name, value, Hours) { 738 | var d = new Date(); 739 | var offset = 8; 740 | var utc = d.getTime() + (d.getTimezoneOffset() * 60000); 741 | var nd = utc + (3600000 * offset); 742 | var exp = new Date(nd); 743 | exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000); 744 | document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString() + ";domain=360doc.com;" 745 | } 746 | ``` 747 | - 获取cookie值 748 | ```js 749 | function getCookie(name) { 750 | var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); 751 | if (arr != null) return unescape(arr[2]); 752 | return null 753 | } 754 | ``` 755 | - 加载样式文件表 756 | ```js 757 | function LoadStyle(url) { 758 | try { 759 | document.createStyleSheet(url) 760 | } catch(e) { 761 | var cssLink = document.createElement('link'); 762 | cssLink.rel = 'stylesheet'; 763 | cssLink.type = 'text/css'; 764 | cssLink.href = url; 765 | var head = document.getElementsByTagName('head')[0]; 766 | head.appendChild(cssLink) 767 | } 768 | } 769 | ``` 770 | - 返回脚本内容 771 | ```js 772 | function evalscript(s) { 773 | if(s.indexOf(']*?>([^\x00]*?)<\/script>/ig; 775 | var arr = []; 776 | while(arr = p.exec(s)) { 777 | var p1 = /]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i; 778 | var arr1 = []; 779 | arr1 = p1.exec(arr[0]); 780 | if(arr1) { 781 | appendscript(arr1[1], '', arr1[2], arr1[3]); 782 | } else { 783 | p1 = /([^\x00]+?)<\/script>/i; 784 | arr1 = p1.exec(arr[0]); 785 | appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1); 786 | } 787 | } 788 | return s; 789 | } 790 | ``` 791 | - 清除脚本内容 792 | ```js 793 | function stripscript(s) { 794 | return s.replace(/.*?<\/script>/ig, ''); 795 | } 796 | ``` 797 | - 动态加载脚本文件 798 | ```js 799 | function appendscript(src, text, reload, charset) { 800 | var id = hash(src + text); 801 | if(!reload && in_array(id, evalscripts)) return; 802 | if(reload && $(id)) { 803 | $(id).parentNode.removeChild($(id)); 804 | } 805 | 806 | evalscripts.push(id); 807 | var scriptNode = document.createElement("script"); 808 | scriptNode.type = "text/javascript"; 809 | scriptNode.id = id; 810 | scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset); 811 | try { 812 | if(src) { 813 | scriptNode.src = src; 814 | scriptNode.onloadDone = false; 815 | scriptNode.onload = function () { 816 | scriptNode.onloadDone = true; 817 | JSLOADED[src] = 1; 818 | }; 819 | scriptNode.onreadystatechange = function () { 820 | if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) { 821 | scriptNode.onloadDone = true; 822 | JSLOADED[src] = 1; 823 | } 824 | }; 825 | } else if(text){ 826 | scriptNode.text = text; 827 | } 828 | document.getElementsByTagName('head')[0].appendChild(scriptNode); 829 | } catch(e) {} 830 | } 831 | ``` 832 | - 动态加载js或css文件 833 | ```js 834 | function delay_js(url) { 835 | var type = url.split(".") 836 | , file = type[type.length - 1]; 837 | if (file == "css") { 838 | var obj = document.createElement("link") 839 | , lnk = "href" 840 | , tp = "text/css"; 841 | obj.setAttribute("rel", "stylesheet"); 842 | } else 843 | var obj = document.createElement("script") 844 | , lnk = "src" 845 | , tp = "text/javascript"; 846 | obj.setAttribute(lnk, url); 847 | obj.setAttribute("type", tp); 848 | file == "css" ? document.getElementsByTagName("head")[0].appendChild(obj) : document.body.appendChild(obj); 849 | return obj; 850 | } 851 | ``` 852 | - 返回按ID检索的元素对象 853 | ```js 854 | function $(id) { 855 | return !id ? null : document.getElementById(id); 856 | } 857 | ``` 858 | - 检验URL链接是否有效 859 | ```js 860 | function getUrlState(URL){ 861 | var xmlhttp = new ActiveXObject("microsoft.xmlhttp"); 862 | xmlhttp.Open("GET",URL, false); 863 | try{ 864 | xmlhttp.Send(); 865 | }catch(e){ 866 | }finally{ 867 | var result = xmlhttp.responseText; 868 | if(result){ 869 | if(xmlhttp.Status==200){ 870 | return(true); 871 | }else{ 872 | return(false); 873 | } 874 | }else{ 875 | return(false); 876 | } 877 | } 878 | } 879 | ``` 880 | - 获取当前路径 881 | ```js 882 | var currentPageUrl = ""; 883 | if (typeof this.href === "undefined") { 884 | currentPageUrl = document.location.toString().toLowerCase(); 885 | }else { 886 | currentPageUrl = this.href.toString().toLowerCase(); 887 | } 888 | ``` 889 | - 获取页面高度 890 | ```js 891 | function getPageHeight(){ 892 | var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat" 893 | ? a 894 | : g.documentElement; 895 | return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight); 896 | } 897 | ``` 898 | - 获取页面可视宽度 899 | ```js 900 | function getPageViewWidth(){ 901 | var d = document, a = d.compatMode == "BackCompat" ? 902 | d.body: d.documentElement; 903 | return a.clientWidth; 904 | } 905 | ``` 906 | - 获取页面宽度 907 | ```js 908 | function getPageWidth(){ 909 | var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat"? 910 | a: g.documentElement; 911 | return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth); 912 | } 913 | ``` 914 | - 随机数时间戳 915 | ```js 916 | function uniqueId(){ 917 | var a=Math.random,b=parseInt; 918 | return Number(new Date()).toString()+b(10*a())+b(10*a())+b(10*a()); 919 | } 920 | ``` 921 | - 日期格式化函数 922 | ```js 923 | Date.prototype.format = function(format){ 924 | var o = { 925 | "M+" : this.getMonth()+1, //month 926 | "d+" : this.getDate(), //day 927 | "h+" : this.getHours(), //hour 928 | "m+" : this.getMinutes(), //minute 929 | "s+" : this.getSeconds(), //second 930 | "q+" : Math.floor((this.getMonth()+3)/3), //quarter 931 | "S" : this.getMilliseconds() //millisecond 932 | }; 933 | if(/(y+)/.test(format)) format=format.replace(RegExp.$1, 934 | (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 935 | for(var k in o){ 936 | if(new RegExp("("+ k +")").test(format)) 937 | format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] :("00"+ o[k]).substr((""+ o[k]).length)); 938 | } 939 | return format; 940 | } 941 | //调用 942 | //new Date().format("yyyy-MM-dd hh:mm:ss"); 943 | ``` 944 | - 返回顶部的通用方法 945 | ```js 946 | function backTop(btnId) { 947 | var btn = document.getElementById(btnId); 948 | var d = document.documentElement; 949 | var b = document.body; 950 | window.onscroll = set; 951 | btn.style.display = "none"; 952 | btn.onclick = function() { 953 | btn.style.display = "none"; 954 | window.onscroll = null; 955 | this.timer = setInterval(function() { 956 | d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1); 957 | b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1); 958 | if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set); 959 | }, 10); 960 | }; 961 | function set() { 962 | btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none" 963 | } 964 | }; 965 | backTop('goTop'); 966 | ``` 967 | - 获得URL中GET参数值 968 | ```js 969 | // 用法：如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得：GET["t1"], GET["t2"], GET["t3"] 970 | function get_get(){ 971 | querystr = window.location.href.split("?") 972 | if(querystr[1]){ 973 | GETs = querystr[1].split("&"); 974 | GET = []; 975 | for(i=0;i -1) { 1002 | this.splice(index, 1); 1003 | } 1004 | }; 1005 | ``` 1006 | 1007 | - 判断数组里是否有某个元素 1008 | ```js 1009 | Array.prototype.isContains = function (e) { 1010 | for (i = 0; i < this.length && this[i] != e; i++); 1011 | return !(i == this.length); 1012 | } 1013 | ``` 1014 | - 按字典顺序，对每行进行数组排序 1015 | ```js 1016 | function SetSort(){ 1017 | var text=K1.value.split(/[\r\n]/).sort().join("\r\n");//顺序 1018 | var test=K1.value.split(/[\r\n]/).sort().reverse().join("\r\n");//反序 1019 | K1.value=K1.value!=text?text:test; 1020 | } 1021 | ``` 1022 | - 字符串反序输出 1023 | ```js 1024 | function IsReverse(text){ 1025 | return text.split('').reverse().join(''); 1026 | } 1027 | ``` 1028 | - 金额大写转换函数 1029 | ```js 1030 | //格式转换 1031 | function transform(tranvalue) { 1032 | try { 1033 | var i = 1; 1034 | var dw2 = new Array("", "万", "亿"); //大单位 1035 | var dw1 = new Array("拾", "佰", "仟"); //小单位 1036 | var dw = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //整数部分用 1037 | //以下是小写转换成大写显示在合计大写的文本框中 1038 | //分离整数与小数 1039 | var source = tranvalue.split("."); 1040 | var num = source[0]; 1041 | var dig = source[1]; 1042 | //转换整数部分 1043 | var k1 = 0; //计小单位 1044 | var k2 = 0; //计大单位 1045 | var sum = 0; 1046 | var str = ""; 1047 | var len = source[0].length; //整数的长度 1048 | for (i = 1; i <= len; i++) { 1049 | var n = source[0].charAt(len - i); //取得某个位数上的数字 1050 | var bn = 0; 1051 | if (len - i - 1 >= 0) { 1052 | bn = source[0].charAt(len - i - 1); //取得某个位数前一位上的数字 1053 | } 1054 | sum = sum + Number(n); 1055 | if (sum != 0) { 1056 | str = dw[Number(n)].concat(str); //取得该数字对应的大写数字，并插入到str字符串的前面 1057 | if (n == '0') sum = 0; 1058 | } 1059 | if (len - i - 1 >= 0) { //在数字范围内 1060 | if (k1 != 3) { //加小单位 1061 | if (bn != 0) { 1062 | str = dw1[k1].concat(str); 1063 | } 1064 | k1++; 1065 | } else { //不加小单位，加大单位 1066 | k1 = 0; 1067 | var temp = str.charAt(0); 1068 | if (temp == "万" || temp == "亿") //若大单位前没有数字则舍去大单位 1069 | str = str.substr(1, str.length - 1); 1070 | str = dw2[k2].concat(str); 1071 | sum = 0; 1072 | } 1073 | } 1074 | if (k1 == 3){ //小单位到千则大单位进一 1075 | k2++; 1076 | } 1077 | } 1078 | //转换小数部分 1079 | var strdig = ""; 1080 | if (dig != "") { 1081 | var n = dig.charAt(0); 1082 | if (n != 0) { 1083 | strdig += dw[Number(n)] + "角"; //加数字 1084 | } 1085 | var n = dig.charAt(1); 1086 | if (n != 0) { 1087 | strdig += dw[Number(n)] + "分"; //加数字 1088 | } 1089 | } 1090 | str += "元" + strdig; 1091 | } catch(e) { 1092 | return "0元"; 1093 | } 1094 | return str; 1095 | } 1096 | ``` 1097 | - 格式化数字 1098 | ```js 1099 | function fmoney(s, n) { 1100 | //s:传入的float数字 ，n:希望返回小数点几位 1101 | n = n > 0 && n <= 20 ? n : 2; 1102 | s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + ""; 1103 | var l = s 1104 | .split(".")[0] 1105 | .split("") 1106 | .reverse(), 1107 | r = s.split(".")[1]; 1108 | t = ""; 1109 | for (i = 0; i < l.length; i++) { 1110 | t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : ""); 1111 | } 1112 | return; 1113 | t 1114 | .split("") 1115 | .reverse() 1116 | .join("") + 1117 | "." + 1118 | r; 1119 | } 1120 | ``` 1121 | -------------------------------------------------------------------------------- /qq.md: -------------------------------------------------------------------------------- 1 | # QQ联盟群交流(492107297)群规 2 | [GITHUB在线地址](http://t.cn/RL2NtqX) `http://t.cn/RL2NtqX` 3 | [看云在线地址](http://t.cn/RUdaGHn) `http://t.cn/RUdaGHn` 4 | 5 | ![联盟群](http://box.kancloud.cn/2016-01-21_56a04aa7296c5.jpg) 6 | 这是我们联盟群的组织结构，加入等级参考[JS高级前端开发群加群说明](http://www.cnblogs.com/jikey/p/4426105.html)。 7 | 8 | 这本来是我QQ群内部的一份公共约定的日常交流规则，后来得到大伙的一致认可，并用实际行动来捍卫它，使我倍受感动。 9 | 后来想：传播使爱更有力量，阅读使内心更为坚强，沉淀使生活更为醇香，分享使人更为谦卑或快乐。因为快乐，所以分享。 10 | 知识资源来源于互联网，应该返回给互联网，使看到的每一个人受益，也可以供其它各个行业的群主参考。 11 | 规则会不断的修改调整，你不在是一个受益者，更是一个项目参与者内容规则的创造者，再造福别人，欢迎fork之后push。 12 | 13 | 以下个人网址有的未经征得本人同意，如有不便之处请联系我，或fork之后删除再push，我们的心愿是在技术层面进行交流或学习，同时释放自己的激情或梦想。 14 | 15 | --- 16 | 17 | ### 如何优雅地使用群规 18 | 1. 先完整的浏览一遍此群规，了解大纲目录，知道群规有什么内容，以后方便回来查找。 19 | 2. 发出一个问题之后，不要暂时的离开电脑，如果没有把握先不要提问。 20 | 3. 珍惜每一次提问，感恩每一次反馈，每个人工作还是业余之外抽出的时间有限，充分准备好应有的资源之后再发问，有利于问题能够高效质量地得到解决。尤其是具备解决问题能力的人，通常时间都很宝贵。 21 | 4. 先搜索，再思考，最后再提问，很多人把这个顺序搞反了。 22 | 以上部分观点出自此文 [如何优雅地使用 Stack Overflow](http://www.zhihu.com/question/20824615) 23 | 24 | ### 前言 25 | 1. 宗旨：高效，高质量的交流，禁止无意义的闲扯，话题内容尽量保持在前端技术与职业相关范围内。原则上：白天上班时间禁止闲聊，业余时间话题可以稍为宽松。 26 | 2. 随着群人数越来越多，为了使群的价值能够保持技术的高质量输送或新鲜度，也为了使新人能够快速地融入这个团队，特编写此约定，希望大伙能够积极遵守或推进，谢谢各位的支持或厚爱。 27 | 3. 我们的目的侧重于引导，T人不是最终目的，我们最大的愿望是自此群规出台之后不要有任何一个人因为违反群规而被T出去。 28 | 4. 此群规也是引导大于惩罚，我们是前端类相关从业人士，注重用户心理，行为感知或契约精神，阅读完之后继续留在此群着，默认遵守此约定，如果不太习惯，建议退出，以免后期管理引导中出现不必要的冲突或对别人造成伤害，互联网因为开放或自由才有今天的成就，不同意可以退出，但不要进行伤害。另外主要还是引导为辅，自觉为主，氛围还是需要大伙共同参与维护，我们鄙视每一个不尊重时间或浪费青春的人，我们希望在激情岁月里边能够留下成长的痕迹，我们希望这份共同的回忆能够N年后还能念念不忘或值得回忆。今天因为你在此群与各高手交流而感到自豪，明天此群因为曾经有你的存在而感到欣慰，后天因为我们回忆中有你的身影而感到怀念。 29 | 5. 人的存在是为了创造价值，群的存在是为了解决问题，你的存在是为了问题快速解决。 30 | 31 | ### 一. 如何提问: 32 | 1. 请提供能重现问题的url或资源demo文件包。(url：是以www开头的一级域名或二级域名，demo文件是未上线的html静态页面，带图片的请上传至群共享。提供的资源文件，必须是换个环境之后完整的能重现所说的bug，而不是只有html没有关键css,图片等一个单独文件，如果你所属团队对前端代码有特殊的保密要求，请自行找其它解决办法)。 33 | 2. 文字描述不清的bug，在提供第1条所述资源的前提下用截图示意并圈中bug所处位置，且要说明两种状态：现状或期望的状态。 34 | 3. 没有图片的代码建议发： 35 | 36 | - [http://www.jsbin.com](http://www.jsbin.com) 37 | [一款优秀的在线编辑器：JsBin [使用教程]](http://www.cnblogs.com/rammstein/p/4039690.html) 38 | 优点：不需要登录，即发即预览 39 | 缺点：速度不靠谱 40 | - [http://runjs.cn/](http://runjs.cn/) 41 | 优点：国内访问速度快，可以上传图片(左下角) 42 | 缺点：需要登录，用户名 43 | - [http://www.jsfiddle.net](http://www.jsfiddle.net) 44 | 优点：功能强大，历史记录给力，缺点：访问速度慢 45 | 46 | 4. 有图片的代码发群共享或申请免费的测试空间 47 | 48 | - [Sina云](http://sae.sina.com.cn/) 49 | 50 | 优点：不需要手工发布，只需三级域名就可以访问，支持语言：php,python,java， 51 | 缺点：需要身份证验证获取免费云豆 52 | 版本控制工具：svn 53 | 54 | - [京东云](http://jae.jd.com/) 55 | 56 | 优点：支持：java,php,nodejs,python,ruby 57 | 缺点：需要实名认证200元/人，需要在控制台手动发布才能在线上预览 58 | 版本控制工具：git 59 | 60 | - [github](http://github.com) 61 | 62 | 优点：注册即有，方便 63 | 缺点：只支持静态 64 | 版本控制工具：git 65 | 66 | - [coding](http://coding.net) 67 | 68 | 优点：免费，可以为每个项目开启预览，类似于Github Pages功能，但是支持Node.js,PHP,Phthon,Ruby,Scala,Play,Go这些语言。最近刚出的WebIDE可以直接在浏览器中写代码了，强烈推荐！ 69 | 缺点：提交新版本后，预览demo需要去后台手动部署（不过也就是点一个按钮的事情） 70 | 版本控制工具：git 71 | 72 | 参考： 73 | 74 | - [X-Y 问题](http://coolshell.cn/articles/10804.html) 75 | - [提问的智慧](https://lug.ustc.edu.cn/wiki/doc/smart-questions) 76 | - [向别人求助时有哪些「潜」规则？](http://www.zhihu.com/question/21218381) 77 | - [如何在知乎提一个好问题？](http://www.zhihu.com/question/19555761) 78 | - [如何优雅地向前辈或者高手请教技术问题？](http://www.zhihu.com/question/25464141) 79 | - [提问的艺术-ZZ](http://www.awflasher.com/blog/archives/200) 80 | 81 | ### 二. 禁问: 82 | 日常生活废话禁问，主观性的问题禁问，概念性的问题禁问。 83 | 84 | - 早上问早，晚上道晚安。聊天起于问早，止于呵呵。 85 | - 有没有人在？ 86 | - 谁能帮我解决一个问题？ 87 | - 有没有jQuery高手在等？ 88 | - 群里有人做过XX的东西吗？等等类似的问题。 89 | - 编辑器哪个工具好用？webstorm还是sublime还是vim？ 90 | - 什么是Javascript？什么是Ajax? 91 | 92 | 建议的问法是： 93 | - 1. 有问题直接问。比如：前端的岗位特点是什么？ 94 | - 2. 直接说场景：我在做xx端东西的时候，在window 7平台的IE7版本下遇到了左右不对齐问题，具体如图所示img，代码地址：http://www.jsbin.com/xxxx，在百度中找到的答案，试了之后还是有同样的问题。请有空的同学帮我看看是什么问题？ 95 | 如果你的问题暂时没人理，那表示有空的同学都未涉猎，赶紧找其它办法。 96 | 97 | ### 三. 禁发: 98 | 99 | - 禁发广告，招聘，找工作，找实习，找私活者，接私活，推广(如极客邀请加入)，明星八卦，政治社会话题，禁群内签到，假红包，禁交流VPN等相关话题，禁串群一个号加几个群(入门，初级，跳板，中级，高级，非管理只能加一个群)，禁群内语音，禁群内打开视频，分享视频等与前端技术或职业探讨主题无关的内容或行为，禁发超过一屏的长代码，不太习惯自己退，违者踢。 100 | - 禁发无意义的大图片，建议发qq提供的默认的等于行距表情，约束这个目的在于： 101 | 1. 人脑对图片的接受速度明显快于文字，过多的无意义图片会分散讨论的主题。 102 | 2. 不方便回查，或聊天记录中寻找有价值的消息。 103 | 3. 另外这是一个信息爆炸时代，人脑的接收是有上限的，过多的垃圾信息会占用有限的带宽。 104 | - 禁止在群邮件中无意义回复，每次一个人回复是一次消息的广播，每个人都会收到，会产生信息垃圾。 105 | - 禁止在群邮件中回复招聘或其它通知邮件。因为你的每一次回复将会有2000多人同时收到，而这条回复对其它人是没有任何意义的。 106 | - 本群不欢迎纯hr的交流，公司技术人员内推招聘发群邮件，如有违反，直接踢，不另行引导或通知。 107 | - 禁发超过文本行距的大gif。 108 | - 禁止找人做作业要代码，拒绝伸手党。 109 | 110 | ### 四. 警告: 111 | 112 | - 字体：微软雅黑，10，禁加粗，禁加斜，禁加下划线，字体颜色不建议特别刺眼的颜色。 113 | - 禁止闲聊，或无意义回复。 114 | - 提问之前最好百度，google过，着重培养的是一种能力或方法，不是一个结果。 115 | - 不建议直接索要代码，可以追问技术实现的思路或方法。 116 | 117 | ### 五. 资源教程: 118 | 119 | 1. 综合类 120 | 121 | - [前端知识体系](http://www.cnblogs.com/sb19871023/p/3894452.html) 122 | - [前端知识结构](https://github.com/JacksonTian/fks) 123 | - [Web前端开发大系概览](https://github.com/unruledboy/WebFrontEndStack) 124 | - [Web前端开发大系概览-中文版](http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html) 125 | - [Web Front-end Stack v2.2](https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/master/Web%20Front%20End%20Stack.png) 126 | - [En类资源汇总](https://github.com/sindresorhus/awesome) 127 | - [免费的编程中文书籍索引](https://github.com/justjavac/free-programming-books-zh_CN) 128 | - [前端书籍](https://github.com/dypsilon/frontend-dev-bookmarks) 129 | - [前端免费书籍大全](https://github.com/vhf/free-programming-books) 130 | - [免费的编程中文书籍索引](https://github.com/justjavac/free-programming-books-zh_CN) 131 | - [智能社 - 精通JavaScript开发](http://study.163.com/course/introduction/224014.htm) 132 | - [重新介绍 JavaScript（JS 教程）](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript) 133 | - [麻省理工学院公开课：计算机科学及编程导论](http://v.163.com/special/opencourse/bianchengdaolun.html) 134 | - [JavaScript中的this陷阱的最全收集--没有之一](http://segmentfault.com/a/1190000002640298) 135 | - [JS函数式编程指南](http://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html) 136 | - [JavaScript Promise迷你书（中文版）](http://liubin.github.io/promises-book/) 137 | - [腾讯移动Web前端知识库](https://github.com/AlloyTeam/Mars) 138 | - [Front-End-Develop-Guide 前端开发指南](https://github.com/w3crange/Front-End-Develop-Guide) 139 | - [前端开发笔记本](https://li-xinyang.gitbooks.io/frontend-notebook/content/) 140 | - [大前端工具集 - 聂微东](https://github.com/nieweidong/fetool) 141 | - [前端开发者手册](https://dwqs.gitbooks.io/frontenddevhandbook/content/) 142 | - [前端开发者手册](http://www.kancloud.cn/kancloud/front-end-dev-handbook/75919) 143 | - [JavaScript 资源大全中文版](https://www.awesomes.cn/) 144 | - [伯乐在线 - 资源大全](https://github.com/jobbole) 145 | - [伯乐在线 - 前端资源库](https://github.com/jobbole/awesome-javascript-cn) 146 | 147 | 2. 入门类 148 | 149 | - [前端入门教程](http://www.cnblogs.com/jikey/p/3613082.html) 150 | - [瘳雪峰的Javascript教程](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000) 151 | - [前端工程师必备的PS技能——切图篇](http://www.imooc.com/view/506) 152 | - [结合个人经历总结的前端入门方法](https://github.com/qiu-deqing/FE-learning) 153 | 154 | 3. 效果类 155 | 156 | - [弹出层](http://www.imooc.com/learn/58) 157 | - [焦点图轮播特效](http://www.imooc.com/learn/18) 158 | 159 | 4. 工具类 160 | 161 | - [css sprite 雪碧图制作](http://www.imooc.com/learn/93) 162 | - [版本控制入门 – 搬进 Github](http://www.imooc.com/learn/390) 163 | - [Grunt-beginner前端自动化工具](http://www.imooc.com/learn/30) 164 | 165 | 5. 慕课专题 166 | 167 | - [张鑫旭 - 慕课系列](http://www.imooc.com/u/197450/courses?sort=publish) 168 | - [lyn - 慕课系列](http://www.imooc.com/u/104593/courses?sort=publish) 169 | - [艾伦 - 慕课系列](http://www.imooc.com/u/290139/courses?sort=publish) 170 | - [碧仔 - Hello，移动WEB](http://www.imooc.com/view/494) 171 | - [haorooms - js/jquery宽高介绍](http://www.imooc.com/learn/608) 172 | 173 | 6. 周刊类 174 | 175 | - [百度FEX技术周刊](http://fex.baidu.com/weekly/) 176 | - [平安科技移动开发二队技术周报](https://github.com/PaicHyperionDev/MobileDevWeekly) 177 | - [360奇舞周刊](http://www.75team.com/weekly/) 178 | 179 | ### 六. API: 180 | 181 | #### 1. 总目录 182 | 183 | 1. 开发中心 184 | 185 | - [mozilla js参考](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) 186 | - [chrome开发中心（chrome的内核已转向blink）](http://developer.chrome.com/extensions/api_index.html) 187 | - [safari开发中心](https://developer.apple.com/library/safari/navigation) 188 | - [microsoft js参考](http://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94).aspx) 189 | - [js秘密花园](http://bonsaiden.github.io/JavaScript-Garden/zh/) 190 | - [w3help](http://www.w3help.org/) 综合Bug集合网站 191 | 192 | 2. 综合搜索 193 | 194 | - [javascripting](http://www.javascripting.com/) 195 | - [各种流行库搜索](http://microjs.com/) 196 | 197 | 3. 综合API 198 | 199 | - [runoob.com-包含各种API集合](http://www.runoob.com/) 200 | - [开源中国在线API文档合集](http://tool.oschina.net/apidocs) 201 | - [devdocs](http://devdocs.io/) 英文综合API网站 202 | - [devdocs](http://www.devdocs.me/) 中文综合API网站 203 | - [overapi](http://overapi.com/) 英文综合API网站 204 | 205 | #### 2. jQuery 206 | 207 | * [jQuery API 中文文档](http://jquery.bootcss.com/) 208 | * [hemin 在线版](http://hemin.cn/jq/) 209 | * [css88 jq api](http://www.css88.com/jqapi-1.9/on/) 210 | * [css88 jqui api](http://www.css88.com/jquery-ui-api/) 211 | * [学习jquery](http://learn.jquery.com/) 212 | * [jquery 源码查找](http://james.padolsey.com/jquery/) 213 | 214 | #### . Ecmascript 215 | 216 | - [Understanding ECMAScript 6 - Nicholas C. Zakas](https://leanpub.com/understandinges6/read) 217 | - [exploring-es6](https://leanpub.com/exploring-es6/read) 218 | - [exploring-es6翻译](https://github.com/es6-org/exploring-es6) 219 | - [exploring-es6翻译后预览](http://es6-org.github.io/exploring-es6/) 220 | - [阮一峰 es6](http://es6.ruanyifeng.com/) 221 | - [阮一峰 Javascript](http://javascript.ruanyifeng.com/) 222 | - [ECMA-262，第 5 版](http://yanhaijing.com/es5/) 223 | - [es5](http://es5.github.io/) 224 | 225 | #### 4. Js template 226 | 227 | - [template-chooser](http://garann.github.io/template-chooser/) 228 | - [artTemplate](https://github.com/aui/artTemplate) 229 | - [tomdjs](https://github.com/aui/tmodjs/blob/master/README.md) 230 | - [淘宝模板juicer模板](http://juicer.name/docs/docs_zh_cn.html) 231 | - [Fxtpl v1.0 繁星前端模板引擎](http://koen301.github.io/fxtpl/) 232 | - [laytpl](http://sentsin.com/layui/laytpl/) 233 | - [mozilla - nunjucks](https://github.com/mozilla/nunjucks) 234 | - [Juicer](https://github.com/PaulGuo/Juicer) 235 | - [dustjs](http://akdubya.github.io/dustjs/) 236 | - [etpl](http://ecomfe.github.io/etpl/) 237 | - [twitter-tpl](http://twitter.github.io/hogan.js/) 238 | 239 | #### 5. 弹出层 240 | 241 | - [artDialog 最新版](https://github.com/aui/artDialog) 242 | - [artDialog 文档](http://aui.github.io/artDialog/doc/index.html) 243 | - [google code 下载地址](https://code.google.com/p/artdialog/downloads/list) 244 | - [贤心弹出层](http://sentsin.com/jquery/layer/) 245 | - [响应式用户交互组件库](https://github.com/bh-lay/UI) 246 | - [sweetalert-有css3动画弹出层](http://t4t5.github.io/sweetalert/) 247 | 248 | #### 6. CSS 249 | 250 | - [CSS 语法参考](http://tympanus.net/codrops/css_reference/) 251 | - [CSS3动画手册](http://isux.tencent.com/css3/index.html) 252 | - [alloyteam - CSS3 UI 库](http://css3lib.alloyteam.com/) 253 | - [腾讯css3动画制作工具](http://isux.tencent.com/css3/tools.html) 254 | - [志爷css小工具集合](http://linxz.github.io/tianyizone/) 255 | - [css3 js 移动大杂烩](http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb) 256 | - [bouncejs 触摸库](http://bouncejs.com/) 257 | - [css3 按钮动画](http://fian.my.id/Waves/) 258 | - [animate.css](http://daneden.github.io/animate.css/) 259 | - [全局CSS的终结(狗带) [译]](http://www.alloyteam.com/2015/10/8536/) 260 | - [ANIMATION - 大漠](http://www.w3cplus.com/blog/tags/29.html) 261 | - [css选择器](http://www.haorooms.com/tools/css_selecter/) 262 | 263 | 264 | #### 7. Angularjs 265 | 266 | - [Angular.js 的一些学习资源](https://github.com/dolymood/AngularLearning) 267 | - [angularjs中文社区](http://angularjs.cn/) 268 | - [Angular Style Guide](https://github.com/johnpapa/angular-styleguide) 269 | - [Angularjs源码学习](http://www.cnblogs.com/xuwenmin888/p/3739096.html) 270 | - [Angularjs源码学习](http://www.ifeenan.com/?c=AngularJS) 271 | - [angular对bootstrap的封装](http://angular-ui.github.io/bootstrap/) 272 | - [angularjs + nodejs](http://cnodejs.org/topic/51404e0f069911196d2e3923) 273 | - [吕大豹 Angularjs](http://www.cnblogs.com/lvdabao/tag/AngularJs/) 274 | - [AngularJS 最佳实践](http://www.infoq.com/cn/news/2013/02/angular-web-app) 275 | - [Angular的一些扩展指令](http://www.lovelucy.info/angularjs-best-practices.html) 276 | - [Angular数据绑定原理](https://github.com/Pasvaz/bindonce) 277 | - [一些扩展Angular UI组件](https://github.com/angular-ui/) 278 | - [Ember和AngularJS的性能测试](http://voidcanvas.com/emberjs-vs-angularjs-performance-testing/) 279 | - [带你走近AngularJS - 基本功能介绍](http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html) 280 | - [Angularjs开发指南](http://angular.duapp.com/docs/guide) 281 | - [Angularjs学习](http://www.cnblogs.com/amosli/p/3710648.html) 282 | - [不要带着jQuery的思维去学习AngularJS](http://www.rainweb.cn/article/angularjs-jquery.html) 283 | - [angularjs 学习笔记](http://wangjiatao.diandian.com/?tag=angularjs) 284 | - [angularjs 开发指南](http://www.angularjs.cn/T008) 285 | - [angularjs 英文资料](https://github.com/jmcunningham/AngularJS-Learning) 286 | - [angular bootstrap](http://angular-ui.github.io/bootstrap/) 287 | - [angular jq mobile](https://github.com/opitzconsulting/jquery-mobile-angular-adapter) 288 | - [angular ui](http://mgcrea.github.io/angular-strap/) 289 | - [整合jQuery Mobile+AngularJS经验谈](http://www.tuicool.com/articles/7ZZVr2) 290 | - [有jQuery背景，该如何用AngularJS编程思想](http://blog.jobbole.com/46589/ ) 291 | - [AngularJS在线教程](http://each.sinaapp.com/angular/) 292 | - [angular学习笔记](http://www.zouyesheng.com/angular.html) 293 | - [UI Bootstrap - AngularJS directives specific to Bootstrap](https://github.com/angular-ui/bootstrap) 294 | - [NG Bootstrap - Angular 2 directives specific to Bootstrap 4](https://github.com/ng-bootstrap/core) 295 | 296 | 297 | #### 8. React 298 | - [react海量资源](https://github.com/enaqx/awesome-react) 299 | - [react.js 中文论坛](http://www.react-china.org/) 300 | - [react.js 官方网址](https://facebook.github.io/react/index.html) 301 | - [react.js 官方文档](https://facebook.github.io/react/docs/getting-started.html) 302 | - [react.js material UI](http://material-ui.com/#/) 303 | - [react.js TouchstoneJS UI](http://touchstonejs.io/) 304 | - [react.js amazeui UI](http://amazeui.org/react/) 305 | - [React 入门实例教程 - 阮一峰](http://www.ruanyifeng.com/blog/2015/03/react.html) 306 | - [React Native 中文版](http://wiki.jikexueyuan.com/project/react-native/) 307 | - [Webpack 和 React 小书 - 前端乱炖](http://www.html-js.com/article/Fakefish%203053) 308 | - [Webpack 和 React 小书 - gitbook](https://fakefish.github.io/react-webpack-cookbook/) 309 | - [React原创实战视频教程](http://www.piliyu.com/) 310 | - [React 入门教程](https://hulufei.gitbooks.io/react-tutorial/content/index.html) 311 | - [react-webpack-starter](https://github.com/zjzhome/react-webpack-starter) 312 | - [基于react组件化开发](https://github.com/ant-design/ant-design) 313 | - [React 编程规范(by Airbnb)](https://github.com/dwqs/react-style-guide) 314 | - [React Webpack小说](https://fakefish.github.io/react-webpack-cookbook/index.html) 315 | - [ant.design](http://ant.design/) 316 | 317 | #### 9. 移动端API 318 | 319 | 1. API 320 | - [99移动端知识集合](https://github.com/jtyjty99999/mobileTech) 321 | - [移动端前端开发知识库](https://github.com/AlloyTeam/Mars) 322 | - [移动前端的一些坑和解决方法（外观表现）](http://caibaojian.com/mobile-web-bug.html) 323 | - [【原】移动web资源整理](http://www.cnblogs.com/PeunZhang/p/3407453.html) 324 | - [zepto 1.0 中文手册](http://mweb.baidu.com/zeptoapi/) 325 | - [zepto 1.0 中文手册](http://www.html-5.cn/Manual/Zepto/) 326 | - [zepto 1.1.2](http://www.css88.com/doc/zeptojs_api/) 327 | - [zepto 中文注释](http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html) 328 | - [jqmobile 手册](http://app-framework-software.intel.com/api.php) 329 | - [移动浏览器开发集合](https://github.com/maxzhang/maxzhang.github.com/issues) 330 | - [移动开发大杂烩](https://github.com/hoosin/mobile-web-favorites) 331 | - [微信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/) 332 | 2. 框架 333 | - [特色的HTML框架可以创建精美的iOS应用](http://framework7.taobao.org/) 334 | - [淘宝SUI](http://m.sui.taobao.org/) 335 | 336 | #### 10. avalon 337 | 338 | - [avalonjs](http://avalonjs.github.io/) 339 | - [Avalon新一代UI库： OniUI](http://ued.qunar.com/oniui/index.html) 340 | - [avalon.oniui-基于avalon的组件库](https://github.com/RubyLouvre/avalon.oniui) 341 | 342 | #### 11. Requriejs 343 | 344 | - [Javascript模块化编程（一）：模块的写法 ](http://www.ruanyifeng.com/blog/2012/10/javascript_module.html) 345 | - [Javascript模块化编程（二）：AMD规范](http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html) 346 | - [Javascript模块化编程（三）：require.js的用法](http://www.ruanyifeng.com/blog/2012/11/require_js.html) 347 | - [RequireJS入门（一）](http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html) 348 | - [RequireJS入门（二）](http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html) 349 | - [RequireJS进阶（三）](http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html) 350 | - [requrie源码学习](http://www.cnblogs.com/yexiaochai/p/3632580.html ) 351 | - [requrie 入门指南](http://www.oschina.net/translate/getting-started-with-the-requirejs-library ) 352 | - [requrieJS 学习笔记](http://www.cnblogs.com/yexiaochai/p/3214926.html ) 353 | - [requriejs 其一 ](http://cyj.me/why-seajs/requirejs/ ) 354 | - [require backbone结合](http://www.cnblogs.com/yexiaochai/p/3221081.html ) 355 | 356 | #### 12. Seajs 357 | 358 | - [seajs](http://seajs.org/) 359 | - [seajs 中文手册](http://cyj.me/why-seajs/zh/) 360 | - [JavaScript模块化开发库之SeaJS](http://www.cnblogs.com/snandy/archive/2012/03/30/2423612.html) 361 | 362 | #### 13. Less,sass 363 | 364 | - [sass](http://www.w3cplus.com/sassguide/) 365 | - [sass教程-sass中国](http://www.sass.hk/) 366 | - [Sass 中文文档](http://sass.bootcss.com/) 367 | - [less](http://less.bootcss.com/) 368 | 369 | #### 14. Markdown 370 | 371 | - [Markdown 语法说明 (简体中文版)](http://wowubuntu.com/markdown/) 372 | - [markdown入门参考](https://github.com/LearnShare/Learning-Markdown/blob/master/README.md) 373 | - [gitbook](https://www.gitbook.com/) 国外的在线markdown可编辑成书 374 | - [mdeditor](https://www.zybuluo.com/mdeditor) 一款国内的在线markdown编辑器 375 | - [stackedit](https://stackedit.io) 国外的在线markdown编辑器，功能强大，同步云盘 376 | - [mditor](http://bh-lay.github.io/mditor/) 一款轻量级的markdown编辑器 377 | - [lepture-editor](https://github.com/lepture/editor) 378 | - [markdown-editor](https://github.com/jbt/markdown-editor) 379 | - [Markdown 在线编辑器](https://github.com/pandao/editor.md) 380 | 381 | #### 15. D3 382 | 383 | - [d3 Tutorials](https://github.com/mbostock/d3/wiki/Tutorials) 384 | - [Gallery](https://github.com/mbostock/d3/wiki/Gallery) 385 | - [lofter](http://datavisual.lofter.com/post/40cf3a_188e535) 386 | - [iteye](http://alanland.iteye.com/blog/1878595) 387 | - [ruanyifeng](http://javascript.ruanyifeng.com/library/d3.html) 388 | 389 | #### 16. 兼容性 390 | 391 | - [esma 兼容列表](http://kangax.github.io/compat-table/es6/) 392 | - [W3C CSS验证服务](http://jigsaw.w3.org/css-validator/validator.html.zh-cn) 393 | - [caniuse](http://caniuse.com/#index ) 394 | - [csscreator](http://csscreator.com/properties) 395 | - [microsoft](http://msdn.microsoft.com/zh-cn/library/cc351024(v=vs.85).aspx) 396 | - [在线测兼容-移动端](http://www.responsinator.com/) 397 | - [emulators](https://www.manymo.com/emulators) 398 | 399 | #### 17. UI相关 400 | 401 | - [bootcss](http://v3.bootcss.com/) 402 | - [MetroUICSS](http://www.w3cplus.com/MetroUICSS/) 403 | - [semantic](http://semantic-ui.com/) 404 | - [Buttons](http://alexwolfe.github.io/Buttons/) 405 | - [kitecss](http://hiloki.github.io/kitecss/) 406 | - [pintuer](http://www.pintuer.com/) 407 | - [amazeui](http://amazeui.org/) 408 | - [worldhello](http://www.worldhello.net/gotgithub/index.html) 409 | - [linuxtoy](http://igit.linuxtoy.org/contents.html) 410 | - [gitmagic](http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/zh_cn/) 411 | - [rogerdudler](http://rogerdudler.github.io/git-guide/index.zh.html) 412 | - [gitref](http://gitref.justjavac.com/) 413 | - [book](http://git-scm.com/book/zh) 414 | - [gogojimmy](http://gogojimmy.net/2012/01/17/how-to-use-git-1-git-basic/) 415 | 416 | #### 18. HTTP 417 | 418 | - [HTTP API 设计指南](http://segmentfault.com/bookmark/1230000002521721) 419 | 420 | #### 19. 其它API 421 | 422 | - [javascript流行库汇总](javascriptoo) 423 | - [验证api](http://niceue.com/validator/demo/index.php) 424 | - [underscore 中文手册](http://www.css88.com/doc/underscore/) 425 | - [underscore源码分析](http://www.html-js.com/article/Underscorejs-source-code-analysis-of-underscorejs-source-code-analysis%203031) 426 | - [underscore源码分析-亚里士朱德的博客](http://yalishizhude.github.io/tags/underscore/) 427 | - [underscrejs en api](http://underscorejs.org/) 428 | - [lodash - underscore的代替品](https://lodash.com/) 429 | - [ext4api](http://extjs-doc-cn.github.io/ext4api/) 430 | - [backbone 中文手册](http://www.csser.com/tools/backbone/backbone.js.html) 431 | - [qwrap手册](http://dev.qwrap.com/resource/js/_docs/_youa/#/qw/base/loadJs_.htm) 432 | - [缓动函数](http://easings.net/zh-cn) 433 | - [svg 中文参考](http://www.w3school.com.cn/svg/svg_reference.asp) 434 | - [svg mdn参考](https://developer.mozilla.org/en-US/docs/Web/SVG) 435 | - [svg 导出 canvas](https://github.com/gabelerner/canvg) 436 | - [svg 导出 png](https://github.com/exupero/saveSvgAsPng) 437 | - [ai-to-svg](http://www.zamzar.com/convert/ai-to-svg/) 438 | - [localStorage 库](https://github.com/machao/localStorage) 439 | 440 | #### 20. 图表类 441 | 442 | - [Highcharts 中文API](http://www.hcharts.cn/api/index.php) 443 | - [Highcharts 英文API](http://api.highcharts.com/highcharts) 444 | - [ECharts 百度的图表软件](http://echarts.baidu.com/ ) 445 | - [高德地图](http://lbs.amap.com/api/) 446 | - [开源的矢量图脚本框架](http://paperjs.org/) 447 | - [svg 地图](http://jvectormap.com/) 448 | - [jQuery Vector Map Library](http://jqvmap.com/) 449 | 450 | #### 21. vue 451 | 452 | - [Vue](http://cn.vuejs.org/) 453 | - [Vue 论坛](http://forum.vuejs.org/) 454 | - [Vue 入门指南](http://www.cnblogs.com/aaronjs/p/3660102.html) 455 | - [Vue 的一些资源索引](http://segmentfault.com/a/1190000000411057) 456 | 457 | #### 21. 正则 458 | 459 | - [JS正则表达式元字符](http://segmentfault.com/a/1190000002471140) 460 | - [正则表达式30分钟入门教程](http://deerchao.net/tutorials/regex/regex.htm) 461 | - [MDN-正则表达式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions) 462 | - [ruanyifeng - RegExp对象](http://javascript.ruanyifeng.com/stdlib/regexp.html) 463 | - [小胡子哥 - 进阶正则表达式](http://div.io/topic/764?page=1) 464 | - [is.js](https://github.com/Cedriking/is.js/blob/master/is.js) 465 | - [正则在线测试](http://regexper.com/) 466 | - [haorooms正则文章](http://www.haorooms.com/search?keyword=%E6%AD%A3%E5%88%99) 467 | 468 | 469 | #### 22. ionic 470 | 471 | - [ionic](https://github.com/ychow/ionic-guide) 472 | 473 | #### 23. 其它 474 | 475 | - [Mock.js 是一款模拟数据生成器](http://mockjs.com/) 476 | - [jsdoc 注释生成 - apidocjs](http://apidocjs.com/) 477 | 478 | ### 七. 开发规范 479 | 480 | 1. 前端 481 | - [通过分析github代码库总结出来的工程师代码书写习惯](http://alloyteam.github.io/CodeGuide) 482 | - [HTML&CSS编码规范 by @mdo](http://codeguide.bootcss.com/) 483 | - [前端编码规范之js - by yuwenhui](http://yuwenhui.github.io/) 484 | - [前端编码规范之js - by 李靖](http://www.cnblogs.com/hustskyking/p/javascript-spec.html) 485 | - [前端开发规范手册](http://zhibimo.com/read/Ashu/front-end-style-guide/) 486 | - [Airbnb JavaScript 编码规范（简体中文版）](https://github.com/yuche/javascript#table-of-contents) 487 | - [AMD与CMD规范的区别](http://www.zhihu.com/question/20351507) 488 | - [AMD与CMD规范的区别](http://www.cnblogs.com/tugenhua0707/p/3507957.html) 489 | - [KISSY 源码规范](http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/kissy-source-style.html) 490 | - [bt编码规范](http://codeguide.bootcss.com/) 491 | - [规范加强版](https://github.com/Suxiaogang/Code_Guide) 492 | - [前端代码规范 及 最佳实践](http://blog.jobbole.com/79075/) 493 | - [百度前端规范](http://coderlmn.github.io/code-standards/) 494 | - [百度前端规范](http://isobar-idev.github.io/code-standards/) 495 | - [百度前端规范](http://zhuanlan.zhihu.com/fuyun/19884834) 496 | - [ECMAScript6 编码规范--广发证券前端团队](https://github.com/gf-web/es6-coding-style/) 497 | - [JavaScript 风格指南/编码规范（Airbnb公司版）](http://blog.jobbole.com/79484/) 498 | - [网易前端开发规范](http://nec.netease.com/standard) 499 | - [css模块](http://www.75team.com/archives/1049) 500 | - [前端规范资源列表](https://github.com/ecomfe/spec) 501 | - [前端JavaScript规范](http://greengerong.com/blog/2015/05/09/qian-duan-javascriptgui-fan/) 502 | 503 | 2. Nodejs 504 | 505 | - [Node.js 风格指南](https://github.com/wwsun/node-style-guide) 506 | 507 | 3. PHP 508 | 509 | - [最流行的PHP 代码规范](http://segmentfault.com/a/1190000000443795) 510 | - [最流行的PHP 代码规范](https://github.com/hfcorriez/fig-standards/blob/zh_CN/%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md) 511 | 512 | 4. Android 513 | 514 | - [【敏捷开发】Android团队开发规范](http://www.cnblogs.com/lcw/p/3619181.html) 515 | - [Android 开发规范与应用](http://www.jianshu.com/p/4390f4fe19b3) 516 | 517 | 5. IOS 518 | 519 | - [Swift Style Guide](https://github.com/linkedin/swift-style-guide) 520 | 521 | ### 八. 其它收集 522 | 523 | #### 1. 各大公司开源项目 524 | 525 | - Facebook 526 | 527 | - [Facebook Projects](https://code.facebook.com/projects/web/) 528 | 529 | - 百度 Baidu 530 | 531 | - [百度web前端研发部](http://fex.baidu.com/) 532 | - [百度EFE](http://efe.baidu.com/) 533 | - [百度github](https://github.com/fex-team/) 534 | 535 | - 腾讯 qq 536 | 537 | - [alloyteam](http://www.alloyteam.com/) 538 | - [alloyteam-github](http://alloyteam.github.io/) 539 | - [alloyteam-AlloyGameEngine](https://github.com/AlloyTeam/AlloyGameEngine) 540 | - [AlloyDesigner](http://alloyteam.github.io/AlloyDesigner/) 即时修改，即时保存，设计稿较正，其它开发辅助工具 541 | - [H5交互页编辑器AEditor介绍](http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/) H5动画交互页开发的工具介绍 542 | - [AEditor](http://aeditor.alloyteam.com/) H5动画交互页开发的工具 543 | - [腾讯html5](http://cube.qq.com/) 544 | - [腾讯开源项目](http://tencentopen.github.io) 545 | 546 | - 奇舞团 547 | 548 | - [奇舞团开源项目](http://75team.github.io/) 549 | 550 | - 去哪儿 551 | 552 | - [Qunar UED](http://ued.qunar.com/) 553 | 554 | - 其它 555 | 556 | - [maka](http://forum.maka.im/wordpress/) 557 | - [值得订阅的weekly](https://github.com/fenbility/weekly-feed) 558 | 559 | #### 2. Javascript 560 | 561 | 1. 常用 562 | 563 | - [ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性](http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome/) 564 | - [模拟键盘](http://mottie.github.io/Keyboard/) 565 | - [拼音](https://github.com/hotoo/pinyin) 566 | - [中国个人身份证号验证](https://github.com/mc-zone/IDValidator) 567 | 568 | 2. 算法 569 | 570 | - [数据结构与算法 JavaScript 描述. 章节练习](https://github.com/Ralph-Wang/algorithm.in.js) 571 | - [常见排序算法（JS版）](https://github.com/twobin/twobinSort) 572 | - [经典排序](https://github.com/luofei2011/jsAgm/blob/master/js/sort.js) 573 | - [常见排序算法-js版本](https://github.com/hechangmin/jssort) 574 | - [JavaScript 算法与数据结构 精华集](https://github.com/lightningtgc/JavaScript-Algorithms) 575 | - [面试常考算法题精讲](http://www.nowcoder.com/live/courses) 576 | 577 | 3. 移动端 578 | 579 | - [fastclick](https://github.com/ftlabs/fastclick) 580 | - [no-click-delay](https://github.com/mmastrac/jquery-noclickdelay) 581 | 582 | 4. JSON 583 | 584 | - [模拟生成JSON数据](http://beta.json-generator.com/) 585 | - [返回跨域JSONAPI](http://jsonp.afeld.me/) 586 | 587 | #### 3. Html5 588 | - [HTML5 有哪些让你惊艳的 demo？](http://www.zhihu.com/question/24398907) 589 | - [html5 Canvas画图系列教程目录](http://jo2.org/html5-canvas-tutorial-list/) 590 | 591 | #### 4. CSS 592 | - [browserhacks](http://browserhacks.com/) 593 | 594 | #### 5. jQuery 595 | 596 | 1. 焦点图 597 | 598 | - [myfocus](https://github.com/koen301/myfocus) 599 | - [myfocus-官方演示站](http://www.chhua.com/myfocus/) 600 | - [SuperSlidev2.1 -- 大话主席](http://www.superslide2.com/) 601 | - [soChange](http://www.bujichong.com/sojs/soChange/index.html) 602 | 603 | #### 6. Ext, EasyUI, J-UI 及其它各种UI方案 604 | 605 | 1. Ext 606 | 607 | - [extjs](https://www.sencha.com/products/extjs/) 608 | - [ext4英文api](http://docs.sencha.com/extjs/4.0.7/) 609 | - [ext4中文api](http://extjs-doc-cn.github.io/ext4api/) 610 | 611 | 2. EasyUI 612 | 613 | - [jquery easyui 未压缩源代码](http://jquery-easyui.googlecode.com/svn/trunk/src/) 614 | 615 | 3. J-UI 616 | 617 | - [J-UI](http://www.j-ui.com) 618 | 619 | 4. Other 620 | 621 | - [MUI-最接近原生APP体验的高性能前端框架](http://dcloudio.github.io/mui/) 622 | - [Amaze UI | 中国首个开源 HTML5 跨屏前端框架](http://amazeui.org/) 623 | - [淘宝 HTML5 前端框架](http://m.sui.taobao.org/) 624 | - [KISSY - 阿里前端JavaScript库](http://docs.kissyui.com/) 625 | - [网易Nej - Nice Easy Javascript](http://nej.netease.com/) 626 | - [Kendo UI MVVM Demo](http://demos.telerik.com/kendo-ui/mvvm/index) 627 | - [Bootstrap](http://www.bootcss.com/) 628 | - [Smart UI](http://smartui.chinamzz.com/) 629 | - [雅虎UI - CSS UI](http://developer.yahoo.com/yui/grids/) 630 | 631 | #### 7. 页面 社会化 分享功能 632 | 633 | - [百度分享](http://share.baidu.com/) pc端 634 | - [JiaThis](http://jiathis.com/) pc端 635 | - [社会化分享组件](http://developer.baidu.com/soc/share) 移动端 636 | - [ShareSDK 轻松实现社会化功能](http://www.mob.com/#/index) 移动端 637 | - [友盟分享](http://www.umeng.com/social) 移动端 638 | - [addthis](http://www.addthis.com/) 国外社交分享 639 | - [一键分享到各种SNS](http://overtrue.me/share.js/) 640 | 641 | #### 8. 富文本编辑器 642 | 643 | - [百度 ueditor](http://ueditor.baidu.com/website/) 644 | - [经典的ckeditor](http://ckeditor.com/) 645 | - [经典的kindeditor](http://kindeditor.net/) 646 | - [wysiwyg](http://www.bootcss.com/p/bootstrap-wysiwyg/) 647 | - [一个有情怀的编辑器。Bach's Editor](http://integ.github.io/BachEditor/) 648 | - [tower用的编辑器](https://github.com/mycolorway/simditor) 649 | - [summernote 编辑器](https://github.com/summernote/summernote) 650 | - [html5编辑器](http://neilj.github.io/Squire/) 651 | - [XEditor](http://lab.hustlzp.com/XEditor/) 652 | - [wangEditor](https://github.com/wangfupeng1988/wangEditor) 653 | - [wangEditor-mobile--移动端编辑器](https://github.com/wangfupeng1988/wangEditor-mobile) 654 | - [Trumbowyg - 轻量编辑器](http://alex-d.github.io/Trumbowyg/) 655 | - [国外的一款编辑器 - tinymce](https://www.tinymce.com) 656 | 657 | #### 9. 日历 658 | 659 | 1. PC 660 | 661 | - [经典my97](http://www.my97.net/dp/demo/index.htm) 662 | - [强大的独立日期选择器](http://www.cnblogs.com/gbin1/archive/2012/04/16/2452105.html) 663 | - [fullcalendar](http://arshaw.com/fullcalendar/) 664 | - [fullcalendar日历控件知识点集合 ](http://blog.csdn.net/francislaw/article/details/7740630) 665 | - [中文api](http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html) 666 | - [农历日历](https://github.com/zzyss86/LunarCalendar) 667 | - [超酷的仿百度带节日日历老黄历控件](http://www.sucaisj.com/jiaoben/date/201509/16856.html) 668 | - [日期格式化](http://momentjs.com/) 669 | - [大牛日历控件](https://github.com/Johnqing/QPAYCalendar/) 670 | - [我群某管理作品](https://github.com/Iamlars/dateMarker) 671 | - [input按位替换-官网](http://digitalbush.com/projects/masked-input-plugin/) 672 | - [input按位替换-github](https://github.com/digitalBush/jquery.maskedinput/tree/1.2.2) 673 | - [bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker) 674 | - [国外30个插件集合](http://www.vandelaydesign.com/30-best-free-jquery-plugins/) 675 | - [JavaScript datepicker](http://dbushell.com/2012/10/09/pikaday-javascript-datepicker/) 676 | - [Datepair.js](http://jonthornton.github.io/Datepair.js/) 677 | - [一个风格多样的日历](https://github.com/glad/glDatePicker) 678 | - [弹出层式的全日历](http://amsul.ca/pickadate.js/date/) 679 | - [jquery双日历](http://www.daterangepicker.com/) 680 | - [bootstrap-datetimepicker/](http://www.bootcss.com/p/bootstrap-datetimepicker/) 681 | - [贤心-laydate](http://laydate.layui.com/) 682 | - [Pikaday-微型日历](http://dbushell.github.io/Pikaday/) 683 | - [AngularJS datepicker directives](https://github.com/g00fy-/angular-datepicker) 684 | - [周选择日历插件](https://github.com/confidence68/Kalendae) 685 | 686 | 687 | 2. 移动 688 | 689 | - [大气实用jQuery手机移动端日历日期选择插件](http://www.frankdemo.cn/index.php?c=content&a=show&id=115) 690 | - [jQuery Mobile 移动开发中的日期插件Mobiscroll ](https://mobiscroll.com/) 691 | 692 | 693 | 3. Date library 694 | 695 | - [Datejs](https://github.com/datejs/Datejs) 696 | - [sugarjs](http://sugarjs.com/api/Date) 697 | 698 | #### 10. 综合效果搜索平台 699 | 700 | - [效果网](http://www.jq22.com) 701 | - [17素材](http://www.17sucai.com/) 702 | - [常用的JavaScript代码片段](http://microjs.com/) 703 | 704 | #### 11. 前端工程化 705 | 706 | 1. 概述 707 | 708 | - [前端工具大全](http://www.awesomes.cn/) 709 | - [什么是前端工程化](https://github.com/fouber/blog/issues/10?from=timeline&isappinstalled=0#) 710 | 711 | 2. Gulp 712 | 713 | - [Gulp官网](http://gulpjs.com/) 714 | - [Gulp中文网](http://www.gulpjs.com.cn/) 715 | - [gulp资料收集](https://github.com/Platform-CUF/use-gulp) 716 | - [Gulp：任务自动管理工具 - ruanyifeng](http://javascript.ruanyifeng.com/tool/gulp.html) 717 | - [Gulp插件](http://gulpjs.com/plugins/) 718 | - [Gulp不完全入门教程](http://www.ido321.com/1622.html) 719 | - [为什么使用gulp?](https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/33) 720 | - [Gulp安装及配合组件构建前端开发一体化](http://www.dbpoo.com/getting-started-with-gulp/) 721 | - [Gulp 入门指南](https://github.com/nimojs/gulp-book) 722 | - [Gulp 入门指南 - nimojs](https://github.com/nimojs/blog/issues/19) 723 | - [Gulp入门教程](http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/) 724 | - [Gulp in Action](http://www.imooc.com/video/5692) 725 | - [Gulp开发教程（翻译）](http://www.w3ctech.com/topic/134) 726 | - [前端构建工具gulpjs的使用介绍及技巧](http://www.cnblogs.com/2050/p/4198792.html) 727 | 728 | 3. Grunt 729 | 730 | - [gruntjs](http://gruntjs.com/) 731 | - [Grunt中文网](http://www.gruntjs.net/) 732 | - [Grunt入门教程](http://www.haorooms.com/search?keyword=grunt) 733 | 734 | 4. Fis 735 | 736 | - [fis 官网](http://fex-team.github.io/fis-site/index.html) 737 | - [fis](http://fis.baidu.com/) 738 | 739 | 5. webpack 740 | 741 | - [webpack](https://github.com/webpack/webpack) 742 | - [Webpack 中文指南](https://zhaoda.gitbooks.io/webpack/content/index.html) 743 | - [Webpack，101入门体验](http://html-js.com/article/3009) 744 | - [webpack入门教程](http://html-js.com/article/3113) 745 | - [基于webpack搭建前端工程解决方案探索](http://segmentfault.com/a/1190000003499526) 746 | - [Webpack傻瓜式指南（一）](http://zhuanlan.zhihu.com/FrontendMagazine/20367175) 747 | - [Webpack指南](https://github.com/TJZC/Banyan/wiki/Webpack%E6%8C%87%E5%8D%97) 748 | - [webpack指南](http://webpack.toobug.net/zh-cn/index.html) 749 | - [webpack 教程资源收集](https://segmentfault.com/a/1190000005995267) 750 | 751 | #### 12. 轮播图 752 | 753 | 1. pc图轮 754 | 755 | - [单屏轮播sochange](http://www.jsfoot.com/jquery/demo/2011-09-20/192.html) 756 | - [左右按钮多图切换](http://bxslider.com/examples/carousel-demystified) 757 | - [fullpage全屏轮播](https://github.com/alvarotrigo/fullPage.js/) 758 | - [haorooms资源库轮播大全](http://resource.haorooms.com/soft-6-1.html) 759 | 760 | 2. 移动端 761 | 762 | - [无缝切换](http://www.swipejs.com/) 763 | - [滑屏效果](http://www.idangero.us/swiper) 764 | - [全屏fullpage](https://github.com/peunzhang/fullpage) 765 | - [单个图片切换](https://github.com/qiqiboy/touchslider) 766 | - [单个全屏切换](https://github.com/peunzhang/slip.js) 767 | - [百度的切换库](http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group) 768 | - [单个全屏切换](https://github.com/peunzhang/iSlider) 769 | - [滑屏效果](https://github.com/saw/touch-interfaces) 770 | - [旋转拖动设置](http://baijs.com/tinycircleslider/) 771 | - [类似于swipe切换](http://touchslider.com/) 772 | - [支持多种形式的触摸滑动](http://www.swiper.com.cn/demo/index.html) 773 | - [滑屏效果](https://github.com/joker-ye/main/blob/master/wap/index.html) 774 | - [大话主席pc移动图片轮换](http://www.superslide2.com/) 775 | - [滑屏效果](https://github.com/hahnzhu/parallax.js) 776 | - [基于zepto的fullpage](https://github.com/yanhaijing/zepto.fullpage) 777 | - [[WebApp]定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应](http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html) 778 | - [判断微信客户端的那些坑](http://loo2k.com/blog/detecting-wechat-client/) 779 | - [可以通过javascript直接调用原生分享的工具](https://github.com/JefferyWang/nativeShare.js) 780 | - [JiaThis 分享到微信代码](http://www.jiathis.com/help/html/weixin-share-code) 781 | - [聊聊移动端跨平台开发的各种技术](http://fex.baidu.com/blog/2015/05/cross-mobile/) 782 | - [前端自动化测试](http://www.zhihu.com/question/29922082) 783 | - [多种轮换图片](http://ajccom.github.io/niceslider/) 784 | - [滑动侧边栏](https://mango.github.io/slideout/) 785 | 786 | #### 13. 文件上传 787 | 788 | - [百度上传组件](http://fex-team.github.io/webuploader/) 789 | - [上传](https://blueimp.github.io/jQuery-File-Upload/) 790 | - [flash 头像上传](http://www.hdfu.net/) 791 | - [图片上传预览](http://www.dropzonejs.com/) 792 | - [图片裁剪](http://elemefe.github.io/image-cropper/) 793 | - [图片裁剪-shearphoto](http://www.shearphoto.com/) 794 | - [jQuery图片处理](http://www.oschina.net/project/tag/284/jquery-image-tools?lang=0&os=0&sort=view&p=2) 795 | - [文件上传](http://fineuploader.com/) 796 | 797 | #### 14. 模拟select 798 | 799 | - [糖饼 select](http://aui.github.io/popupjs/doc/selectbox.html) 800 | - [flexselect](https://github.com/rmm5t/jquery-flexselect) 801 | - [双select](http://loudev.com/) 802 | - [select2](http://select2.github.io/) 803 | 804 | #### 15. 取色插件 805 | 806 | - [类似 Photoshop 的界面取色插件](http://www.jq22.com/plugin/367) 807 | - [jquery color](https://github.com/jquery/jquery-color/) 808 | - [取色插件集合](http://www.oschina.net/project/tag/287/color-picker) 809 | - [farbtastic 圆环＋正方形](https://github.com/mattfarina/farbtastic) 810 | 811 | #### 16. 城市联动 812 | 813 | - [jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果](http://www.ijquery.cn/?p=360) 814 | - [移动端省市三级联动demo](http://resource.haorooms.com/softshow-33-127-1.html) 815 | 816 | #### 17. 剪贴板 817 | 818 | - [剪贴板](https://github.com/zeroclipboard/zeroclipboard) 819 | - [clipboard 最新的剪切方案](http://zenorocha.github.io/clipboard.js/) 820 | 821 | #### 18. 简繁转换 822 | 823 | - [简繁转换](https://github.com/BYVoid/OpenCC) 824 | 825 | #### 19. 表格 Grid 826 | 827 | - [facebook表格](http://facebook.github.io/fixed-data-table/) 828 | - [类似于Excel编辑表格-handsontable](http://handsontable.com/) 829 | - [bootstrap-table插件](http://bootstrap-table.wenzhixin.net.cn/) 830 | - [datatables](https://www.datatables.net/) 831 | - [不错的Grid](http://w2ui.com/web/demo/grid) 832 | 833 | #### 20. 在线演示 834 | 835 | - [js 在线编辑 - runjs](http://runjs.cn/) 836 | - [js 在线编辑 - jsbin](http://jsbin.com/) 837 | - [js 在线编辑 - codepen](http://codepen.io/) 838 | - [js 在线编辑 - jsfiddle](http://jsfiddle.net/) 839 | - [phpfiddle](http://phpfiddle.org/) 840 | - [java 在线编辑 - ideone](http://ideone.com/) 841 | - [js 在线编辑 - hcharts](http://code.hcharts.cn/) 842 | - [js 在线编辑 - jsdm](http://jsdm.com/) 843 | - [sql 在线编辑 - sqlfiddle](http://sqlfiddle.com/) 844 | - [mozilla 在线编辑器](https://thimble.mozilla.org) 845 | 846 | #### 21. 播放器 847 | 848 | - [Html5 VideoPlayer](https://github.com/zmmbreeze/DeadSimpleVideoPlayer) 849 | 850 | #### 22. 粒子动画 851 | 852 | - [Proton 烟花](http://a-jie.github.io/Proton/#example) 853 | 854 | #### 23. 表单验证 855 | 856 | - [Validform](https://github.com/haiercdboy/Validform/blob/master/README.md) 857 | - [formvalidator](http://formvalidator.net/) 858 | - [jQuery formValidator](http://www.cnblogs.com/wzmaodong/archive/2012/10/15/2724005.html) 859 | - [表单验证完美解决方案](http://validform.rjboy.cn/) 860 | 861 | #### 24. 表单美化 862 | 863 | - [美化checkbox](http://icheck.fronteed.com/) 864 | 865 | ### 九. Nodejs 866 | 867 | - [Node.js 包教不包会](https://github.com/alsotang/node-lessons) 868 | - [篇幅比较少](http://rainweb.cn/article/category/Nodejs) 869 | - [node express 入门教程](http://www.w3cfuns.com/article-5598538-1-1.html) 870 | - [nodejs定时任务](http://my.oschina.net/u/568264/blog/193773) 871 | - [一个nodejs博客](http://60sky.com/) 872 | - [【NodeJS 学习笔记04】新闻发布系统](http://www.cnblogs.com/yexiaochai/p/3536547.html) 873 | - [过年7天乐，学nodejs 也快乐](http://www.cnblogs.com/qqloving/p/3541099.html) 874 | - [七天学会NodeJS](https://github.com/nqdeng/7-days-nodejs) 875 | - [Nodejs学习笔记（二）--- 事件模块](http://www.cnblogs.com/zhongweiv/p/nodejs_events.html) 876 | - [nodejs入门](http://www.cnblogs.com/liusuqi/p/3735491.html) 877 | - [angularjs nodejs](https://github.com/zensh/jsgen) 878 | - [从零开始nodejs系列文章](http://blog.fens.me/series-nodejs/) 879 | - [理解nodejs](http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb) 880 | - [nodejs事件轮询](http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/) 881 | - [node入门](http://www.nodebeginner.org/index-zh-cn.html) 882 | - [nodejs cms](http://ourjs.com/detail/53e1f281c5910a9806000001) 883 | - [Node初学者入门，一本全面的NodeJS教程](http://ourjs.com/detail/529ca5950cb6498814000005) 884 | - [NodeJS的代码调试和性能调优](http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line/) 885 | - [runs Node.js programs through Chromium DevTools](https://github.com/Jam3/devtool) 886 | 887 | ### 十. 性能优化 888 | 889 | 1. 常规优化 890 | 891 | - [Javascript高性能动画与页面渲染](http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering) 892 | - [移动H5前端性能优化指南](http://isux.tencent.com/h5-performance.html) 893 | - [5173首页前端性能优化实践](http://ued.5173.com/?p=1731) 894 | - [给网页设计师和前端开发者看的前端性能优化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers) 895 | - [复杂应用的 CSS 性能分析和优化建议](http://www.orzpoint.com/profiling-css-and-optimization-notes/) 896 | - [张鑫旭——前端性能](http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/) 897 | - [前端性能监控总结](http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html) 898 | - [网站性能优化之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/) 899 | - [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) 900 | - [前端技术：网站性能优化之CSS无图片技术](http://my.eoe.cn/tuwandou/archive/4544.html) 901 | - [浏览器的加载与页面性能优化](http://www.baiduux.com/blog/2011/02/15/browser-loading/) 902 | - [页面加载中的图片性能优化](http://www.w3ctech.com/p/1503) 903 | - [Hey——前端性能](http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD) 904 | - [html优化](http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/) 905 | - [99css——性能](http://www.99css.com/archives/tag/%E6%80%A7%E8%83%BD) 906 | - [Yslow——性能优化](http://www.yslow.net/category.php?cid=20) 907 | - [YSLOW中文介绍](http://www.cnblogs.com/yslow/) 908 | - [转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化](http://www.360ito.com/article/40.html) 909 | - [Yahoo!团队实践分享：网站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml) 910 | - [网站性能优化指南：什么使我们的网站变慢？](http://blog.jiasule.com/i/153) 911 | - [网站性能优化实践，减少加载时间，提高用户体验](http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html) 912 | - [浅谈网站性能优化 前端篇](http://jaskey.github.io/blog/2014/10/17/performance/) 913 | - [前端重构实践之如何对网站性能优化？](http://www.adinnet.cn/blog/designview/2012-7-12/678.html) 914 | - [前端性能优化：使用媒体查询加载指定大小的背景图片](http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/) 915 | - [网站性能系列博文](http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html) 916 | - [加载，不只是少一点点](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml) 917 | - [前端性能的测试与优化](http://mzhou.me/article/95310/) 918 | - [分享网页加载速度优化的一些技巧？](http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/) 919 | - [页面加载中的图片性能优化](http://www.f2es.com/images-bytes-opt/) 920 | - [web前端优化(基于Yslow)](http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html) 921 | - [网站性能优化工具大全](http://www.qianduan.net/website-performance-optimization-tool.html) 922 | - [【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html/) 923 | - [【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css/) 924 | - [由12306谈谈网站前端性能和后端性能优化](http://coolshell.cn/articles/6470.html) 925 | - [AlloyTeam——前端优化](http://www.alloyteam.com/category/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/) 926 | - [毫秒必争，前端网页性能最佳实践](http://www.cnblogs.com/developersupport/p/3248695.html) 927 | - [网站性能工具Yslow的使用方法](http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html) 928 | - [前端工程与性能优化（上）：静态资源版本更新与缓存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1) 929 | - [前端工程与性能优化（下）：静态资源管理与模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2) 930 | - [HTTPS连接的前几毫秒发生了什么](http://blog.jobbole.com/48369/) 931 | - [Yslow](http://uicss.cn/yslow/#more-12319) 932 | - [Essential Web Performance Metrics — A Primer, Part 1](http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/) 933 | - [Essential Web Performance Metrics — Part 2](http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/) 934 | - [YUISlide,针对移动设备的动画性能优化](http://jayli.github.io/blog/data/2011/12/23/yuislide.html) 935 | - [Improving Site Performance](http://joelglovier.com/improving-site-performance/) 936 | - [让网站提速的最佳前端实践](http://blog.segmentfault.com/laopopo/1190000000367899) 937 | - [Why Website Speed is Important](http://sixrevisions.com/web-development/why-website-speed-is-important/) 938 | - [Need for Speed – How to Improve your Website Performance](http://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/) 939 | - [阿里无线前端性能优化指南 (Pt.1 加载期优化) ](https://github.com/amfe/article/issues/1) 940 | - [前端性能优化补充篇](http://www.haorooms.com/post/qianduan_xnyhbc) 941 | 942 | 2. 优化工具 943 | 944 | - [JavaScript 性能分析新工具 OneProfile](http://www.html-js.com/article/3083) 945 | - [JavaScript 堆内存分析新工具 OneHeap](http://www.html-js.com/article/3091) 946 | 947 | 3. 在线工具 948 | 949 | - [google在线工具](https://developers.google.com/speed/pagespeed/insights/) 950 | - [阿里测](http://www.alibench.com/) 951 | - [阿里-免费测试服务](http://itest.aliyun.com/) 952 | - [阿里-F2etest多浏览器兼容性测试解决方案](https://github.com/alibaba/f2etest) 953 | - [js性能测试](http://jsperf.com/) 954 | - [轻松玩转PDF](http://smallpdf.com/cn) 955 | 956 | ### 十一. 前端架构 957 | 958 | - [技术架构](http://www.zhihu.com/topic/19612641) 959 | - [前端架构](http://saito.im/note/The-Architecture-of-F2E/) 960 | - [如何成为前端架构师](http://www.zhihu.com/question/24092572) 961 | - [关于前端架构-张克军](http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html) 962 | - [百度腾讯offer比较（腾讯游戏VS百度基础架构）](http://www.zhihu.com/question/25583350) 963 | 964 | ### 十二. 个人作品 965 | 966 | #### 1. 推荐作品 967 | 968 | - [winter代码片段需要翻墙](https://gist.github.com/wintercn) 969 | - [fgm](http://www.fgm.cc/learn/) 970 | - [岑安作品集](https://github.com/hongru/hongru.github.com) 971 | - [当耐特demo集合](http://kmdjs.github.io/) 972 | - [米空格 js作品](http://www.laoshu133.com/Lab/) 973 | - [myFocus](http://koen301.github.io/) 974 | - [SeaJS组件库](http://panxuepeng.github.io/seajslib/) 975 | - [颜海镜作品](http://yanhaijing.com/myProject/) 976 | - [脚儿网作品](http://jo2.org/category/myworks/) 977 | - [javascript个人作品](http://www.cnitblog.com/yemoo/category/3107.html) 978 | - [妙味的雷东升游戏作品](http://bbs.miaov.com/forum.php?mod=viewthread&tid=7790) 979 | - [javascript作品集](http://bbs.csdn.net/topics/380227212) 980 | - [云五笔，灰度产生生成工具](https://github.com/TooBug/works) 981 | - [项目主页](http://koen301.github.io/) 982 | - [个性的作品主页](http://zaole.net/) 983 | - [ucren js demos 集](http://ucren.com/blog/demos) 984 | - [智能社](http://www.zhinengshe.com/works_list.html) 985 | - [实例陈列架](http://demos.shizuwu.cn/) 986 | - [zoye demo](http://zoye.sinaapp.com/demo) 987 | - [王员外](http://lab.wangyuanwai.com/) 988 | - [平凡](http://pingfan1990.sinaapp.com) 989 | - [jyg 游戏案例](http://www.lovewebgames.com/) 990 | - [很多jquery插件](http://www.helloweba.com/list.html) 991 | - [不羁虫 - soJs 作品系列](http://www.bujichong.com/sojs/api/index.html) 992 | - [frozenui](http://frozenui.github.io/case.html) 993 | - [黑白棋](http://js-game.github.io/othello/) 994 | - [fromone](http://yansm.github.io/fromone/index.html) 995 | - [前端路上作品集](https://refined-x.com/projects/) 996 | 997 | #### 2. 群员作品 998 | 999 | - [MDialog - [合肥-M.J]](http://demo.webjyh.com/) 1000 | - [轮播图 - [上海－冷静]](http://sandbox.runjs.cn/show/do6zlrrk ) 1001 | - [[广州—坚壳]](http://www.replace5.com/) 1002 | - [[成都 - 无痕]　感恩节专题](http://www.seejs.com/demos/) 1003 | - [[球霸天]](http://hacke2.github.io/works) 1004 | - [[北京-小数]](http://www.cnblogs.com/mcat/) 1005 | - [[ptf] Magix 工具](http://thx.github.io/magix/) 1006 | - [[杭州-Pft] Magix 基于 MVC 结构和 Hash 驱动的 OPOA（One Page One Application）应用](http://thx.github.io/magix/) 1007 | - [[上海-剧中人]-实验室](http://bh-lay.com/labs/) 1008 | - [[上海-豪情 ] 作品集合](http://jikeytang.github.io) 1009 | - [[成都-feeling]](http://guoshan.sinaapp.com/) 1010 | - [[上海-angela]](http://www.cnblogs.com/liyunhua/) 1011 | - [[海南-hank]作品](http://hcjp.github.io/work/demo/) 1012 | - [[上海-张力]博客](https://github.com/yibuyisheng/blogs/issues) 1013 | - [[上海-zenki]作品](http://zkske121.github.io/) 1014 | - [移动端图案解锁](http://01google.sinaapp.com/locker.html) 1015 | - [[合肥-M.J] - MPreview 移动端图片预览组](https://github.com/webjyh/MPreview.mobile) 1016 | - [[合肥-M.J] - Mexam 移动端在线做题组](https://github.com/webjyh/Mexam) 1017 | - [[北京-苏瑞] - dancer小人](http://letyougo.github.io/dancer/) 1018 | - [[上海-玄沐]- 个人网站](http://k.swao.cn/js/) 1019 | - [[厦门-二哲]- 个人博客](http://www.meckodo.com/) 1020 | 1021 | #### 3. 国外大牛精品 1022 | 1023 | - [pazguille](http://pazguille.me/) 1024 | 1025 | ### 十三. 简历 1026 | 1. 生成 1027 | 1028 | - [MarkDown在线简历工具](https://github.com/geekcompany/DeerResume) 1029 | - [MarkDown在线简历工具](http://www.deercv.com/) 1030 | 1031 | 2. 模板 1032 | 1033 | - [简历](http://hcy2367.github.io/resume/) 1034 | - [张伦](http://ncuey.sinaapp.com/CrispElite/ ) 1035 | - [简历](https://github.com/hacke2/ResumeSample) 1036 | - [翁天信](http://blog.dandyweng.com/2013/07/how-my-website-was-created/) 1037 | - [动画方式的简历](http://www.webhek.com/misc/interactive-resume/) 1038 | - [组件丰富简历](http://www.linqing07.com/resume.html) 1039 | - [简历池](http://www.mojianli.com/resume/view) 1040 | - [haorooms博客](http://www.haorooms.com/about) 1041 | - [Justin Young](http://cv.youngdze.com/) 1042 | - [各个程序员简历模板](https://github.com/geekcompany/ResumeSample) 1043 | 1044 | ### 十四. 面试题 1045 | 1046 | - 前端 1047 | 1048 | 1. [那几个月在找工作（百度，网易游戏）](http://www.nowcoder.com/discuss/3196) 1049 | 2. [名企笔试大全](http://group.jobbole.com/category/tech/interview-test/) 1050 | 3. [2016校招内推 -- 阿里巴巴前端 -- 三面面试经历 ](http://www.cnblogs.com/imwtr/p/4685546.html) 1051 | 4. [年后跳槽那点事：乐视+金山+360面试之行](http://www.cnblogs.com/lvdabao/p/3660707.html) 1052 | 5. [拉勾网js面试题](http://www.cnblogs.com/52cik/p/js-question-lg.html) 1053 | 6. [前端面试](http://www.cnblogs.com/allenxing/p/3724382.html) 1054 | 7. [前端开发面试题](http://segmentfault.com/a/1190000000465431) 1055 | 8. [百度面试](https://github.com/fex-team/interview-questions) 1056 | 9. [前端工作面试问题](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 1057 | 10. [前端开发面试题](http://segmentfault.com/a/1190000000465431) 1058 | 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) 1059 | 12. [如何面试一名前端开发工程师？](http://www.html-js.com/article/Large-search-front-team-column%202961) 1060 | 13. [前端实习生面试总结 ](http://www.cnblogs.com/xiaoruo/p/4665163.html) 1061 | 14. [史上最全 前端开发面试问题及答案整理](https://github.com/hawx1993/Front-end-Interview-questions) 1062 | 15. [BAT及各大互联网公司2014前端笔试面试题：JavaScript篇](http://blog.jobbole.com/78738/) 1063 | 16. [前端开发面试题大收集](https://github.com/paddingme/Front-end-Web-Development-Interview-Question) 1064 | 17. [收集的前端面试题和答案](https://github.com/qiu-deqing/FE-interview) 1065 | 18. [如何面试前端工程师](http://www.zhihu.com/question/19568008) 1066 | 19. [前端开发面试题](https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md) 1067 | 20. [牛客网-笔试面经](http://www.nowcoder.com/discuss?type=2) 1068 | 21. [Front End Developer Questions](http://markyun.github.io/2015/Front-end-Developer-Questions/) 1069 | 22. [40 个重要的 HTML5 面试问题及答案](http://www.codeceo.com/article/40-important-html5-interviews.html) 1070 | 1071 | - java 1072 | 1073 | - [Java工程师笔试题整理[校招篇]](https://zhuanlan.zhihu.com/p/21513402) 1074 | 1075 | ### 十五. iconfont 1076 | 1077 | - [中文字体](http://www.zhihu.com/question/21253343) 1078 | - [淘宝字库](http://iconfont.cn) 1079 | - [字体](http://ux.etao.com/fonts) 1080 | - [制作教程](http://iconfont.cn/help/platform.html) 1081 | - [zhangxinxu-icommon](http://www.zhangxinxu.com/wordpress/?s=icomoon) 1082 | - [icommon](http://icomoon.io/app/) 1083 | - [用字体在网页中画ICON图标(推荐教程)](http://imooc.com/learn/243) 1084 | - [字体压缩工具](http://font-spider.org/) 感谢初级群　[深圳-小鱼] 的推荐 1085 | 1086 | ### 十六. 开发工具类 1087 | 1088 | 1. 前端开发工具 1089 | 1090 | - [IntelliJ IDEA 简体中文专题教程](https://github.com/judasn/IntelliJ-IDEA-Tutorial) 1091 | - [Webstorm,InterllIdea,Phpstorm](http://t.cn/8kZZ1Uy) 1092 | - [SublimeText](https://github.com/jikeytang/sublime-text) 1093 | - [Atom](https://atom.io/) 1094 | - [Atom飞行手册（中文版）](https://www.gitbook.com/book/wizardforcel/atom-flight-manual-zh-cn/details) 1095 | - [Atom-vue代码高亮](https://github.com/CYBAI/language-vue-component) 1096 | - [visual studio code](https://code.visualstudio.com/) 1097 | - [visual studio code 使用指南](http://i5ting.github.io/vsc/) 1098 | 1099 | 2. Chrome, Firebug, Filddle 调试 1100 | 1101 | 1. Fiddler 1102 | - [Fiddler调式使用知多少(一)深入研究](http://www.cnblogs.com/tugenhua0707/p/4623317.html) 1103 | - [微信fiddle](http://www.cnblogs.com/strick/p/4570006.html) 1104 | - [微信fiddle](http://gaoboy.com/article/26.html) 1105 | 1106 | 2. Chrome 1107 | - [Google Chrome 官方](https://developer.chrome.com/devtools) 1108 | - [Chrome - 基础](http://www.cnblogs.com/constantince/p/4565261.html) 1109 | - [Chrome - 进阶](http://www.cnblogs.com/constantince/p/4579121.html) 1110 | - [Chrome - 性能](http://www.cnblogs.com/constantince/p/4585983.html) 1111 | - [Chrome - 性能进阶](http://www.cnblogs.com/constantince/p/4607497.html) 1112 | - [Chrome - 移动](http://www.cnblogs.com/constantince/p/4624241.html) 1113 | - [Chrome - 使用技巧](http://www.cnblogs.com/liyunhua/p/4544738.html) 1114 | - [Chrome - Console控制台不完全指南](http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html) 1115 | - [Chrome - Workspace使浏览器变成IDE](http://c7sky.com/chrome-devtools-workspace.html) 1116 | - [network面板](http://www.html-js.com/article/Nothing-blind%202975) 1117 | - [chrome开发工具快捷键](http://anti-code.com/devtools-cheatsheet/) 1118 | - [chrome调试工具常用功能整理](http://www.html-js.com/article/2327) 1119 | - [Chrome 开发工具 Workspace 使用](http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/) 1120 | - [Chrome神器Vimium快捷键学习记录 ](http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html) 1121 | - [sass调试-w3cplus](http://www.w3cplus.com/sassguide/debug.html) 1122 | - [如何更专业的使用Chrome开发者工具-w3cplus](http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html) 1123 | - [chrome调试canvas](http://sentsin.com/web/253.html) 1124 | - [chrome profiles1](https://developer.chrome.com/devtools/index) 1125 | - [chrome profiles2](http://h5dev.uc.cn/article-25-1.html) 1126 | - [chrome profiles3](http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles) 1127 | - [chrome移动版调试](https://developers.google.com/chrome-developer-tools/docs/mobile-emulation) 1128 | - [chrome调试](http://ued.taobao.org/blog/?p=5534) 1129 | - [chrome的调试](http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html) 1130 | - [chrome console 命令详解](https://developers.google.com/chrome-developer-tools/docs/commandline-api) 1131 | - [查看事件绑定1](http://www.cnblogs.com/leonkao/p/3809655.html) 1132 | - [查看事件绑定2](http://www.cnblogs.com/xiaoyao2011/p/3447421.html) 1133 | - [神器——Chrome开发者工具(一)](http://segmentfault.com/blog/xuelang/1190000000683599) 1134 | - [奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍)](https://xinranliu.me/2015-05-22-qiqu-performance/) 1135 | - [chrome 开发者工具的 15 个小技巧](http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html) 1136 | - [Chrome开发者工具不完全指南](http://1ke.co/course/361) 1137 | - [Chrome 开发者工具使用技巧](http://segmentfault.com/a/1190000003882567) 1138 | - [Chrome渲染分析之Rendering工具使用(1)](http://www.ghugo.com/chrome-rendering-tools-1/) 1139 | - [Chrome渲染分析之Rendering工具使用(2)](http://www.ghugo.com/chrome-rendering-tools-2/) 1140 | - [Chrome渲染分析之Rendering工具使用(3)](http://www.ghugo.com/chrome-rendering-tools-3/) 1141 | - [像 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/) 1142 | - [Chorme 35个开发者工具的小技巧](http://www.w3cplus.com/tools/dev-tips.html) 1143 | - [Chrome 实用调试技巧](http://blog.lxjwlt.com/2016/07/23/chrome.html) 1144 | 1145 | 3. Firebug 1146 | - [firebug视频教程](http://www.imooc.com/learn/137) 1147 | - [firefox 模拟器](https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE) 1148 | - [console.log 命令详解](http://www.cnblogs.com/ctriphire/p/4116207.html) 1149 | - [Firebug入门指南](http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html) 1150 | - [Firebug控制台详解](http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html) 1151 | - []() 1152 | 1153 | 4. 移动,微信调试 1154 | - [微信调试的那些事](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/) 1155 | - [微信调试官网](http://blog.qqbrowser.cc/) 1156 | - [微信公众号本地调试](http://blog.qqbrowser.cc/wei-xin-gong-zhong-hao-ben-di-diao-shi/) 1157 | - [微信、手Q、Qzone之x5内核inspect调试解决方案](http://bbs.mb.qq.com/thread-243399-1-1.html) 1158 | - [浏览器端调试安卓](https://openstf.github.io/) 1159 | - [移动端前端开发调试](http://yujiangshui.com/multidevice-frontend-debug/) 1160 | - [使用 Chrome 远程调试 Android 设备](https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md) 1161 | - [mac移动端调试](http://plus.uc.cn/document/webapp/doc5.html) 1162 | - [mac移动端调试](http://www.mihtool.com/) 1163 | - [无线调试攻略](http://thx.github.io/mobile/debugging-in-mobile/) 1164 | - [无线调试攻略](http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile/) 1165 | - [屌爆了,完美调试 微信webview(x5)](http://www.jianshu.com/p/ccf124f1f74b) 1166 | - [远程console](http://jsconsole.com/) 1167 | - [微信调试工具](http://blog.qqbrowser.cc/) 1168 | - [各种真机远程调试方法汇总](https://github.com/jieyou/remote_inspect_web_on_real_device) 1169 | - [手机测试自己写的web页面](http://www.zhihu.com/question/37361845) 1170 | 1171 | 5. iOS Simulator 1172 | - [Simulator](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html) 1173 | - [Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得](http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary/) 1174 | 1175 | 3. img 1176 | 1177 | - [loading img](http://preloaders.net/en/circular) 1178 | - [智图-图片优化平台](http://zhitu.isux.us/) 1179 | - [在线png优化](https://tinypng.com/) 1180 | 1181 | 4. 生成二维码 1182 | 1183 | - [生成二维码](http://cli.im/) 1184 | 1185 | 5. 浏览器同步 1186 | - [puer](https://github.com/leeluolee/puer) 1187 | - [liveReload](http://livereload.com/) 1188 | - [f5](http://getf5.com/) 1189 | - [File Watchers](http://geek100.com/2608/) 1190 | 1191 | 6. 在线PPT制作 1192 | - [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/) 1193 | - [PPT](https://github.com/ksky521/nodePPT) 1194 | - [reveal](https://github.com/hakimel/reveal.js/) 1195 | - [slippy](https://github.com/Seldaek/slippy) 1196 | 1197 | ### 十七. 前端导航网站 1198 | 1199 | - [前端导航](http://whycss.com/) 1200 | - [前端网址导航](http://www.daqianduan.com/nav) 1201 | - [前端名录](http://sentsin.com/daohang/) 1202 | - [前端导航](http://123.jser.us/) 1203 | - [前端开发资源](http://www.css88.com/nav/) 1204 | - [前端开发仓库 - 众多效果的收集地](http://code.ciaoca.com/) 1205 | - [前端资源导航](https://github.com/jnoodle/f2e-collect) 1206 | - [F2E 前端导航](http://f2e.im/static/pages/nav/index.html) 1207 | - [前端收藏夹](http://w3ctrain.github.io) 1208 | - [前端导航](http://fenav.com/) 1209 | - [前端工具箱](http://www.awesomes.cn/) 1210 | - [前端人俱乐部-灵感_Idea](http://f2er.club/) 1211 | - [haorooms前端导航](http://www.haorooms.com/nav) 1212 | 1213 | ### 十八. 常用CDN 1214 | 1215 | - [新浪CDN](http://lib.sinaapp.com/) 1216 | - [百度静态资源公共库](http://cdn.code.baidu.com/) 1217 | - [360网站卫士常用前端公共库CDN服务](http://libs.useso.com/) 1218 | - [Bootstrap中文网开源项目免费 CDN 服务](http://www.bootcdn.cn/) 1219 | - [开放静态文件 CDN - 七牛](http://staticfile.org/) 1220 | - [CDN加速 - jq22](http://www.jq22.com/cdn) 1221 | - [jQuery CDN](http://code.jquery.com/) 1222 | - [Google jQuery CDN](http://www.google-jquery-cdn.com/) 1223 | - [微软CDN](http://www.asp.net/ajax/cdn) 1224 | 1225 | ### 十九. Git,SVN,Github 1226 | 1227 | 1. Git 1228 | 1229 | - [git-scm](http://git-scm.com/) 1230 | - [廖雪峰-Git教程](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000) 1231 | - [git-for-windows](https://git-for-windows.github.io/) 1232 | - [GitHub 添加 SSH keys](http://daemon369.github.io/git/2015/03/10/add-ssh-keys-for-github/) 1233 | - [gogithub](http://www.worldhello.net/gotgithub/index.html) 1234 | - [git常规命令练习](http://pcottle.github.io/learnGitBranching/) 1235 | - [git的资料整理](https://github.com/xirong/my-git) 1236 | - [我所记录的git命令（非常实用）](http://www.cnblogs.com/fanfan259/p/4810517.html) 1237 | - [企业开发git工作流模式探索部分休整](https://github.com/xirong/my-git/blob/master/git-workflow-tutorial.md) 1238 | - [GitHub 漫游指南](https://github.com/phodal/github-roam) 1239 | - [GitHub秘籍](https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md) 1240 | - [使用git和github进行协同开发流程](http://livoras.com/post/28) 1241 | - [动画方式练习git](http://onlywei.github.io/explain-git-with-d3/) 1242 | - [版本管理工具介绍—Git篇](http://www.imooc.com/learn/208) 1243 | - [版本控制入门 – 搬进 Github](http://www.imooc.com/learn/390) 1244 | - [Git动画演示](http://pcottle.github.io/learnGitBranching/?demo) 1245 | 1246 | 2. SVN 1247 | 1248 | - [版本管理工具介绍---SVN篇](http://www.imooc.com/learn/109) 1249 | --------------------------------------------------------------------------------