├── README.md ├── base.md ├── css.md ├── html.md ├── js-base.md ├── js.md ├── json-api.md └── 文件命名规范.md /README.md: -------------------------------------------------------------------------------- 1 | # front-end-Doc 2 | 前端文档汇总（含代码规范、开发流程、知识分享,持续更新） 3 | 4 | 综合类 | 地址 5 | --- | --- 6 | 前端文档基本例子|https://github.com/mgbq/front-end-Doc/blob/master/base.md 7 | 前端知识体系|http://www.cnblogs.com/sb19871023/p/3894452.html 8 | 前端知识结构|https://github.com/JacksonTian/fks 9 | Web前端开发大系概览|https://github.com/unruledboy/WebFrontEndStack 10 | Web前端开发大系概览-中文版|http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html 11 | Web Front-end Stack v2.2|https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/master/Web%20Front%20End%20Stack.png 12 | 免费的编程中文书籍索引|https://github.com/justjavac/free-programming-books-zh_CN 13 | 前端书籍|https://github.com/dypsilon/frontend-dev-bookmarks 14 | 前端免费书籍大全|https://github.com/vhf/free-programming-books 15 | 前端知识体系|http://www.cnblogs.com/sb19871023/p/3894452.html 16 | 免费的编程中文书籍索引|https://github.com/justjavac/free-programming-books-zh_CN 17 | 智能社 - 精通JavaScript开发|http://study.163.com/course/introduction/224014.htm 18 | 重新介绍 JavaScript（JS 教程）|https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript 19 | 麻省理工学院公开课：计算机科学及编程导论|http://v.163.com/special/opencourse/bianchengdaolun.html 20 | JavaScript中的this陷阱的最全收集--没有之一|http://segmentfault.com/a/1190000002640298 21 | JS函数式编程指南|https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html 22 | JavaScript Promise迷你书（中文版）|http://liubin.github.io/promises-book 23 | 腾讯移动Web前端知识库|https://github.com/AlloyTeam/Mars 24 | Front-End-Develop-Guide 前端开发指南|https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide 25 | 前端开发笔记本|https://li-xinyang.gitbooks.io/frontend-notebook/content 26 | 大前端工具集 - 聂微东|https://github.com/nieweidong/fetool 27 | 前端开发者手册|https://dwqs.gitbooks.io/frontenddevhandbook/content 28 | 29 | 30 | 入门类 | 地址 31 | --- | --- 32 | 前端入门教程|http://www.cnblogs.com/jikey/p/3613082.html 33 | 瘳雪峰的Javascript教程|http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000 34 | jQuery基础教程|http://www.imooc.com/view/11 35 | 前端工程师必备的PS技能——切图篇|http://www.imooc.com/view/506 36 | 结合个人经历总结的前端入门方法|https://github.com/qiu-deqing/FE-learning 37 | 38 | 39 | 效果类 | 地址 40 | --- | --- 41 | 弹出层|http://www.imooc.com/learn/58 42 | 焦点图轮播特效|http://www.imooc.com/learn/18 43 | 44 | 45 | 工具类| 地址 46 | --- | --- 47 | css sprite 雪碧图制作|http://www.imooc.com/learn/93 48 | 版本控制入门 – 搬进 Github|http://www.imooc.com/learn/390 49 | Grunt-beginner前端自动化工具|http://www.imooc.com/learn/30 50 | 51 | 52 | 慕课专题| 地址 53 | --- | --- 54 | 张鑫旭 - 慕课系列|http://www.imooc.com/t/197450 55 | lyn - 慕课系列|http://www.imooc.com/t/104593 56 | 艾伦 - 慕课系列|http://www.imooc.com/u/290139/courses?sort=publish 57 | 碧仔 - Hello，移动WEB|http://www.imooc.com/view/494 58 | 59 | 60 | 周报类| 地址 61 | --- | --- 62 | 平安科技移动开发二队技术周报|https://github.com/PaicHyperionDev/MobileDevWeekly 63 | 64 | 65 | 开发中心| 地址 66 | --- | --- 67 | mozilla js参考|https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 68 | chrome开发中心（chrome的内核已转向blink）|https://developer.chrome.com/extensions/api_index.html 69 | safari开发中心|https://developer.apple.com/library/safari/navigation 70 | microsoft js参考|https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94.aspx 71 | js秘密花园|http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html 72 | js秘密花园|http://bonsaiden.github.io/JavaScript-Garden/zh 73 | w3help|http://www.w3help.org 综合Bug集合网站 74 | 75 | 76 | 综合搜索| 地址 77 | --- | --- 78 | javascripting|http://www.javascripting.com 79 | 各种流行库搜索|http://microjs.com 80 | 81 | 82 | 综合API| 地址 83 | --- | --- 84 | runoob.com-包含各种API集合|http://www.runoob.com 85 | 开源中国在线API文档合集|http://tool.oschina.net/apidocs 86 | devdocs|http://devdocs.io 英文综合API网站 87 | 88 | 89 | jQuery| 地址 90 | --- | --- 91 | jQuery API 中文文档|http://www.jquery123.com 92 | hemin 在线版|http://hemin.cn/jq 93 | css88 jq api|http://www.css88.com/jqapi-1.9/on 94 | css88 jqui api|http://www.css88.com/jquery-ui-api 95 | 学习jquery|http://learn.jquery.com 96 | jquery 源码查找|http://james.padolsey.com/jquery 97 | 98 | 99 | Ecmascript| 地址 100 | --- | --- 101 | Understanding ECMAScript 6 - Nicholas C. Zakas|https://leanpub.com/understandinges6/read 102 | exploring-es6|https://leanpub.com/exploring-es6/read 103 | exploring-es6翻译|https://github.com/es6-org/exploring-es6 104 | exploring-es6翻译后预览|http://es6-org.github.io/exploring-es6 105 | 阮一峰 es6|http://es6.ruanyifeng.com 106 | 阮一峰 Javascript|http://javascript.ruanyifeng.com 107 | ECMA-262，第 5 版|http://yanhaijing.com/es5 108 | es5|http://es5.github.io 109 | 110 | 111 | Js template| 地址 112 | --- | --- 113 | template-chooser|http://garann.github.io/template-chooser 114 | artTemplate|https://github.com/aui/artTemplate 115 | tomdjs|https://github.com/aui/tmodjs/blob/master/README.md 116 | 淘宝模板juicer模板|http://juicer.name/docs/docs_zh_cn.html 117 | Fxtpl v1.0 繁星前端模板引擎|http://koen301.github.io/fxtpl 118 | laytpl|http://laytpl.layui.com 119 | mozilla - nunjucks|https://github.com/mozilla/nunjucks 120 | Juicer|https://github.com/PaulGuo/Juicer 121 | dustjs|http://akdubya.github.io/dustjs 122 | etpl|http://ecomfe.github.io/etpl 123 | 124 | 125 | 弹出层| 地址 126 | --- | --- 127 | artDialog 最新版|https://github.com/aui/artDialog 128 | artDialog 文档|http://aui.github.io/artDialog/doc/index.html 129 | google code 下载地址|https://code.google.com/p/artdialog/downloads/list 130 | 贤心弹出层|http://layer.layui.com 131 | 响应式用户交互组件库|https://github.com/bh-lay/UI 132 | sweetalert-有css3动画弹出层|http://t4t5.github.io/sweetalert 133 | 134 | 135 | CSS| 地址 136 | --- | --- 137 | CSS 语法参考|http://tympanus.net/codrops/css_reference 138 | CSS3动画手册|http://isux.tencent.com/css3/index.html 139 | 腾讯css3动画制作工具|http://isux.tencent.com/css3/tools.html 140 | 志爷css小工具集合|http://linxz.github.io/tianyizone 141 | css3 js 移动大杂烩|http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb 142 | bouncejs 触摸库|http://bouncejs.com 143 | css3 按钮动画|http://fian.my.id/Waves 144 | animate.css|http://daneden.github.io/animate.css 145 | 全局CSS的终结(狗带 [译]|http://www.alloyteam.com/2015/10/8536 146 | 147 | 148 | Angularjs| 地址 149 | --- | --- 150 | Angular.js 的一些学习资源|https://github.com/dolymood/AngularLearning 151 | angularjs中文社区|http://angularjs.cn 152 | Angularjs源码学习|http://www.cnblogs.com/xuwenmin888/p/3739096.html 153 | Angularjs源码学习|http://www.ifeenan.com/?c=AngularJS 154 | angular对bootstrap的封装|http://angular-ui.github.io/bootstrap 155 | angularjs + nodejs|https://cnodejs.org/topic/51404e0f069911196d2e3923 156 | 吕大豹 Angularjs|http://www.cnblogs.com/lvdabao/tag/AngularJs 157 | AngularJS 最佳实践|http://www.infoq.com/cn/news/2013/02/angular-web-app 158 | Angular的一些扩展指令|http://www.lovelucy.info/angularjs-best-practices.html 159 | Angular数据绑定原理|https://github.com/Pasvaz/bindonce 160 | 一些扩展Angular UI组件|https://github.com/angular-ui 161 | Ember和AngularJS的性能测试|http://voidcanvas.com/emberjs-vs-angularjs-performance-testing 162 | 带你走近AngularJS - 基本功能介绍|http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html 163 | Angularjs开发指南|http://angular.duapp.com/docs/guide 164 | Angularjs学习|http://www.cnblogs.com/amosli/p/3710648.html 165 | 不要带着jQuery的思维去学习AngularJS|http://www.rainweb.cn/article/angularjs-jquery.html 166 | angularjs 学习笔记|http://wangjiatao.diandian.com/?tag=angularjs 167 | angularjs 开发指南|http://www.angularjs.cn/T008 168 | angularjs 英文资料|https://github.com/jmcunningham/AngularJS-Learning 169 | angular bootstrap|http://angular-ui.github.io/bootstrap 170 | angular jq mobile|https://github.com/opitzconsulting/jquery-mobile-angular-adapter 171 | angular ui|http://mgcrea.github.io/angular-strap 172 | 整合jQuery Mobile+AngularJS经验谈|http://www.tuicool.com/articles/7ZZVr2 173 | 有jQuery背景，该如何用AngularJS编程思想|http://blog.jobbole.com/46589/ 174 | AngularJS在线教程|http://each.sinaapp.com/angular 175 | angular学习笔记|http://www.zouyesheng.com/angular.html 176 | 177 | 178 | React| 地址 179 | --- | --- 180 | react.js 中文论坛|http://www.react-china.org 181 | react.js 官方网址|https://facebook.github.io/react/index.html 182 | react.js 官方文档|https://facebook.github.io/react/docs/getting-started.html 183 | react.js material UI|http://material-ui.com/# 184 | react.js TouchstoneJS UI|http://touchstonejs.io 185 | react.js amazeui UI|http://amazeui.org/react 186 | React 入门实例教程 - 阮一峰|http://www.ruanyifeng.com/blog/2015/03/react.html 187 | React Native 中文版|http://wiki.jikexueyuan.com/project/react-native 188 | Webpack 和 React 小书 - 前端乱炖|http://www.html-js.com/article/Fakefish%203053 189 | Webpack 和 React 小书 - gitbook|https://fakefish.github.io/react-webpack-cookbook 190 | webpack|https://github.com/webpack/webpack 191 | Webpack，101入门体验|http://html-js.com/article/3009 192 | webpack入门教程|http://html-js.com/article/3113 193 | 基于webpack搭建前端工程解决方案探索|http://segmentfault.com/a/1190000003499526 194 | React原创实战视频教程|http://www.piliyu.com 195 | 196 | 197 | 移动端API| 地址 198 | --- | --- 199 | 99移动端知识集合|https://github.com/jtyjty99999/mobileTech 200 | 移动端前端开发知识库|https://github.com/AlloyTeam/Mars 201 | 移动前端的一些坑和解决方法（外观表现）|http://caibaojian.com/mobile-web-bug.html 202 | 【原】移动web资源整理|http://www.cnblogs.com/PeunZhang/p/3407453.html 203 | zepto 1.0 中文手册|http://mweb.baidu.com/zeptoapi 204 | zepto 1.0 中文手册|http://www.html-5.cn/Manual/Zepto 205 | zepto 1.1.2|http://www.css88.com/doc/zeptojs_api 206 | zepto 中文注释|http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html 207 | jqmobile 手册|http://app-framework-software.intel.com/api.php 208 | 移动浏览器开发集合|https://github.com/maxzhang/maxzhang.github.com/issues 209 | 移动开发大杂烩|https://github.com/hoosin/mobile-web-favorites 210 | 微信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 211 | 212 | 213 | 框架| 地址 214 | --- | --- 215 | 特色的HTML框架可以创建精美的iOS应用|http://framework7.taobao.org 216 | 淘宝SUI|http://m.sui.taobao.org 217 | 218 | 219 | avalon| 地址 220 | --- | --- 221 | avalonjs|http://avalonjs.github.io 222 | Avalon新一代UI库： OniUI|http://ued.qunar.com/oniui/index.html 223 | avalon.oniui-基于avalon的组件库|https://github.com/RubyLouvre/avalon.oniui 224 | 225 | 226 | Requriejs| 地址 227 | --- | --- 228 | Javascript模块化编程（一）：模块的写法 |http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 229 | Javascript模块化编程（二）：AMD规范|http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html 230 | Javascript模块化编程（三）：require.js的用法|http://www.ruanyifeng.com/blog/2012/11/require_js.html 231 | RequireJS入门（一）|http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html 232 | RequireJS入门（二）|http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html 233 | RequireJS进阶（三）|http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html 234 | requrie源码学习|http://www.cnblogs.com/yexiaochai/p/3632580.html 235 | requrie 入门指南|http://www.oschina.net/translate/getting-started-with-the-requirejs-library 236 | requrieJS 学习笔记|http://www.cnblogs.com/yexiaochai/p/3214926.html 237 | requriejs 其一 |http://cyj.me/why-seajs/requirejs/ 238 | require backbone结合|http://www.cnblogs.com/yexiaochai/p/3221081.html 239 | 240 | 241 | Seajs| 地址 242 | --- | --- 243 | seajs|http://seajs.org 244 | seajs 中文手册|http://cyj.me/why-seajs/zh 245 | 246 | 247 | Less,sass| 地址 248 | --- | --- 249 | sass|http://www.w3cplus.com/sassguide 250 | sass教程-sass中国|http://www.sass.hk 251 | Sass 中文文档|http://sass.bootcss.com 252 | less|http://less.bootcss.com 253 | 254 | 255 | Markdown| 地址 256 | --- | --- 257 | Markdown 语法说明 (简体中文版|http://wowubuntu.com/markdown 258 | markdown入门参考|https://github.com/LearnShare/Learning-Markdown/blob/master/README.md 259 | gitbook|https://www.gitbook.com 国外的在线markdown可编辑成书 260 | mdeditor|https://www.zybuluo.com/mdeditor 一款国内的在线markdown编辑器 261 | stackedit|https://stackedit.io 国外的在线markdown编辑器，功能强大，同步云盘 262 | mditor|http://bh-lay.github.io/mditor 一款轻量级的markdown编辑器 263 | lepture-editor|https://github.com/lepture/editor 264 | markdown-editor|https://github.com/jbt/markdown-editor 265 | 266 | 267 | D3| 地址 268 | --- | --- 269 | d3 Tutorials|https://github.com/mbostock/d3/wiki/Tutorials 270 | Gallery|https://github.com/mbostock/d3/wiki/Gallery 271 | lofter|http://datavisual.lofter.com/post/40cf3a_188e535 272 | iteye|http://alanland.iteye.com/blog/1878595 273 | ruanyifeng|http://javascript.ruanyifeng.com/library/d3.html 274 | 275 | 276 | 兼容性| 地址 277 | --- | --- 278 | esma 兼容列表|http://kangax.github.io/compat-table/es6 279 | W3C CSS验证服务|http://jigsaw.w3.org/css-validator/validator.html.zh-cn 280 | caniuse|http://caniuse.com/#index 281 | csscreator|http://csscreator.com/properties 282 | microsoft|https://msdn.microsoft.com/zh-cn/library/cc351024(v=vs.85.aspx 283 | 在线测兼容-移动端|http://www.responsinator.com 284 | emulators|https://www.manymo.com/emulators 285 | 286 | 287 | UI相关| 地址 288 | --- | --- 289 | bootcss|http://v3.bootcss.com 290 | MetroUICSS|http://www.w3cplus.com/MetroUICSS 291 | semantic|http://semantic-ui.com 292 | Buttons|http://alexwolfe.github.io/Buttons 293 | kitecss|http://hiloki.github.io/kitecss 294 | pintuer|http://www.pintuer.com 295 | amazeui|http://amazeui.org 296 | worldhello|http://www.worldhello.net/gotgithub/index.html 297 | linuxtoy|http://igit.linuxtoy.org/contents.html 298 | gitmagic|http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/zh_cn 299 | rogerdudler|http://rogerdudler.github.io/git-guide/index.zh.html 300 | gitref|http://gitref.justjavac.com 301 | book|http://git-scm.com/book/zh 302 | gogojimmy|http://gogojimmy.net/2012/01/17/how-to-use-git-1-git-basic 303 | 304 | 305 | HTTP| 地址 306 | --- | --- 307 | HTTP API 设计指南|http://segmentfault.com/bookmark/1230000002521721 308 | 309 | 310 | 其它API| 地址 311 | --- | --- 312 | javascript流行库汇总|javascriptoo 313 | 验证api|http://niceue.com/validator/demo/index.php 314 | underscore 中文手册|http://www.css88.com/doc/underscore 315 | underscore源码分析|http://www.html-js.com/article/Underscorejs-source-code-analysis-of-underscorejs-source-code-analysis%203031 316 | underscore源码分析-亚里士朱德的博客|http://yalishizhude.github.io/tags/underscore 317 | underscrejs en api|http://underscorejs.org 318 | lodash - underscore的代替品|https://lodash.com 319 | ext4api|http://extjs-doc-cn.github.io/ext4api 320 | backbone 中文手册|http://www.csser.com/tools/backbone/backbone.js.html 321 | qwrap手册|http://dev.qwrap.com/resource/js/_docs/_youa/#/qw/base/loadJs_.htm 322 | 缓动函数|http://easings.net/zh-cn 323 | svg 中文参考|http://www.w3school.com.cn/svg/svg_reference.asp 324 | svg mdn参考|https://developer.mozilla.org/en-US/docs/Web/SVG 325 | svg 导出 canvas|https://github.com/gabelerner/canvg 326 | svg 导出 png|https://github.com/exupero/saveSvgAsPng 327 | ai-to-svg|http://www.zamzar.com/convert/ai-to-svg 328 | localStorage 库|https://github.com/machao/localStorage 329 | 330 | 331 | 图表类| 地址 332 | --- | --- 333 | Highcharts 中文API|http://www.hcharts.cn/api/index.php 334 | Highcharts 英文API|http://api.highcharts.com/highcharts 335 | ECharts 百度的图表软件|http://echarts.baidu.com/ 336 | 高德地图|http://lbs.amap.com/api 337 | 开源的矢量图脚本框架|http://paperjs.org 338 | svg 地图|http://jvectormap.com 339 | 340 | 341 | vue| 地址 342 | --- | --- 343 | Vue|http://cn.vuejs.org 344 | Vue 论坛|http://forum.vuejs.org 345 | Vue 入门指南|http://www.cnblogs.com/aaronjs/p/3660102.html 346 | Vue 的一些资源索引|http://segmentfault.com/a/1190000000411057 347 | awesome-vue|https://github.com/vuejs/awesome-vue 348 | 349 | 350 | 正则| 地址 351 | --- | --- 352 | JS正则表达式元字符|http://segmentfault.com/a/1190000002471140 353 | 正则表达式30分钟入门教程|http://deerchao.net/tutorials/regex/regex.htm 354 | MDN-正则表达式|https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions 355 | ruanyifeng - RegExp对象|http://javascript.ruanyifeng.com/stdlib/regexp.html 356 | 小胡子哥 - 进阶正则表达式|http://div.io/topic/764?page=1 357 | is.js|https://github.com/Cedriking/is.js/blob/master/is.js 358 | 正则在线测试|http://regexper.com 359 | 360 | 361 | ionic| 地址 362 | --- | --- 363 | ionic|https://github.com/ychow/ionic-guide 364 | 365 | 366 | 其它| 地址 367 | --- | --- 368 | Mock.js 是一款模拟数据生成器|http://mockjs.com 369 | 370 | 371 | 前端| 地址 372 | --- | --- 373 | 通过分析github代码库总结出来的工程师代码书写习惯|http://alloyteam.github.io/CodeGuide 374 | HTML&CSS编码规范 by @mdo|http://codeguide.bootcss.com 375 | 团队合作的css命名规范-腾讯AlloyTeam前端团队|http://www.alloyteam.com/2011/10/107 376 | 前端编码规范之js - by yuwenhui|http://yuwenhui.github.io 377 | 前端编码规范之js - by 李靖|http://www.cnblogs.com/hustskyking/p/javascript-spec.html 378 | 前端开发规范手册|http://zhibimo.com/read/Ashu/front-end-style-guide 379 | Airbnb JavaScript 编码规范（简体中文版）|https://github.com/yuche/javascript#table-of-contents 380 | AMD与CMD规范的区别|http://www.zhihu.com/question/20351507 381 | AMD与CMD规范的区别|http://www.cnblogs.com/tugenhua0707/p/3507957.html 382 | KISSY 源码规范|http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/kissy-source-style.html 383 | bt编码规范|http://codeguide.bootcss.com 384 | 规范加强版|https://github.com/Suxiaogang/Code_Guide 385 | 前端代码规范 及 最佳实践|http://blog.jobbole.com/79075 386 | 百度前端规范|http://coderlmn.github.io/code-standards 387 | 百度前端规范|http://isobar-idev.github.io/code-standards 388 | 百度前端规范|http://zhuanlan.zhihu.com/fuyun/19884834 389 | ECMAScript6 编码规范--广发证券前端团队|https://github.com/gf-rd/es6-coding-style 390 | JavaScript 风格指南/编码规范（Airbnb公司版）|http://blog.jobbole.com/79484 391 | 网易前端开发规范|http://nec.netease.com/standard 392 | css模块|http://www.75team.com/archives/1049 393 | 前端规范资源列表|https://github.com/ecomfe/spec 394 | 395 | 396 | PHP| 地址 397 | --- | --- 398 | 最流行的PHP 代码规范|http://segmentfault.com/a/1190000000443795 399 | 最流行的PHP 代码规范|https://github.com/hfcorriez/fig-standards/blob/zh_CN/%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md 400 | 401 | 402 | Android| 地址 403 | --- | --- 404 | 【敏捷开发】Android团队开发规范|http://www.cnblogs.com/lcw/p/3619181.html 405 | Android 开发规范与应用|http://www.jianshu.com/p/4390f4fe19b3 406 | 407 | 408 | 各大公司开源项目| 地址 409 | --- | --- 410 | Facebook Projects|https://code.facebook.com/projects/web 411 | 百度web前端研发部|http://fex.baidu.com 412 | 百度EFE|http://efe.baidu.com 413 | 百度github|https://github.com/fex-team 414 | alloyteam|http://www.alloyteam.com 415 | alloyteam-github|http://alloyteam.github.io 416 | alloyteam-AlloyGameEngine|https://github.com/AlloyTeam/AlloyGameEngine 417 | AlloyDesigner|http://alloyteam.github.io/AlloyDesigner 即时修改，即时保存，设计稿较正，其它开发辅助工具 418 | H5交互页编辑器AEditor介绍|http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao H5动画交互页开发的工具介绍 419 | AEditor|http://aeditor.alloyteam.com H5动画交互页开发的工具 420 | maka|http://forum.maka.im/wordpress 421 | 值得订阅的weekly|https://github.com/fenbility/weekly-feed 422 | 腾讯html5|http://cube.qq.com 423 | 奇舞团开源项目|http://75team.github.io 424 | Qunar UED|http://ued.qunar.com 425 | Scrat|http://scrat.io 426 | 427 | 428 | 常用 |地址 429 | --- | --- 430 | ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性|http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome 431 | 模拟键盘|http://mottie.github.io/Keyboard 432 | 拼音|https://github.com/hotoo/pinyin 433 | 中国个人身份证号验证|https://github.com/mc-zone/IDValidator 434 | 435 | 436 | 算法 | 地址 437 | --- | --- 438 | 数据结构与算法 JavaScript 描述. 章节练习|https://github.com/Ralph-Wang/algorithm.in.js 439 | 常见排序算法（JS版）|https://github.com/twobin/twobinSort 440 | 经典排序|https://github.com/luofei2011/jsAgm/blob/master/js/sort.js 441 | 常见排序算法-js版本|https://github.com/hechangmin/jssort 442 | JavaScript 算法与数据结构 精华集|https://github.com/lightningtgc/JavaScript-Algorithms 443 | 面试常考算法题精讲|http://www.nowcoder.com/live/courses 444 | 445 | 446 | 移动端 | 地址 447 | --- | --- 448 | fastclick|https://github.com/ftlabs/fastclick 449 | no-click-delay|https://github.com/mmastrac/jquery-noclickdelay 450 | 451 | 452 | JSON | 地址 453 | --- | --- 454 | 模拟生成JSON数据|http://beta.json-generator.com 455 | 返回跨域JSONAPI|http://jsonp.afeld.me 456 | 457 | 458 | Html5 | 地址 459 | --- | --- 460 | HTML5 有哪些让你惊艳的 demo？|http://www.zhihu.com/question/24398907 461 | 462 | 463 | CSS | 地址 464 | --- | --- 465 | browserhacks|http://browserhacks.com 466 | 467 | 468 | 焦点图 | 地址 469 | --- | --- 470 | myfocus|https://github.com/koen301/myfocus 471 | myfocus-官方演示站|http://www.chhua.com/myfocus 472 | SuperSlidev2.1 -- 大话主席|http://www.superslide2.com 473 | soChange|http://www.bujichong.com/sojs/soChange/index.html 474 | 475 | 476 | Ext, EasyUI, J-UI 及其它各种UI方案 | 地址 477 | --- | --- 478 | extjs|https://www.sencha.com/products/extjs 479 | ext4英文api|http://docs.sencha.com/extjs/4.0.7 480 | ext4中文api|http://extjs-doc-cn.github.io/ext4api 481 | 482 | 483 | EasyUI | 地址 484 | --- | --- 485 | jquery easyui 未压缩源代码|http://jquery-easyui.googlecode.com/svn/trunk/src 486 | 487 | 488 | J-UI | 地址 489 | --- | --- 490 | J-UI|http://jui.org 491 | 492 | 493 | Other | 地址 494 | --- | --- 495 | MUI-最接近原生APP体验的高性能前端框架|http://dcloudio.github.io/mui 496 | Amaze UI | 中国首个开源 HTML5 跨屏前端框架|http://amazeui.org 497 | 淘宝 HTML5 前端框架|http://m.sui.taobao.org 498 | KISSY - 阿里前端JavaScript库|http://docs.kissyui.com 499 | 网易Nej - Nice Easy Javascript|http://nej.netease.com 500 | Kendo UI MVVM Demo|http://demos.telerik.com/kendo-ui/mvvm/index 501 | Bootstrap|http://www.bootcss.com 502 | Smart UI|http://smartui.chinamzz.com 503 | 雅虎UI - CSS UI|http://developer.yahoo.com/yui/grids 504 | 505 | 506 | 页面 社会化 分享功能 | 地址 507 | --- | --- 508 | 百度分享|http://share.baidu.com pc端 509 | JiaThis|http://jiathis.com pc端 510 | 社会化分享组件|http://developer.baidu.com/soc/share 移动端 511 | ShareSDK 轻松实现社会化功能|http://www.mob.com/#/index 移动端 512 | 友盟分享|http://dev.umeng.com/social/android/quick-integration 移动端 513 | 514 | 515 | 富文本编辑器 | 地址 516 | --- | --- 517 | 功能齐全 tinymce|https://www.tinymce.com 518 | 百度 ueditor|http://ueditor.baidu.com/website 519 | 经典的ckeditor|http://ckeditor.com 520 | 经典的kindeditor|http://kindeditor.net 521 | wysiwyg|http://www.bootcss.com/p/bootstrap-wysiwyg 522 | 一个有情怀的编辑器。Bach's Editor|http://integ.github.io/BachEditor 523 | tower用的编辑器|https://github.com/mycolorway/simditor 524 | summernote 编辑器|https://github.com/summernote/summernote 525 | html5编辑器|http://neilj.github.io/Squire 526 | XEditor|http://lab.hustlzp.com/XEditor 527 | wangEditor|https://github.com/wangfupeng1988/wangEditor 528 | 529 | 530 | PC | 地址 531 | --- | --- 532 | 经典my97|http://www.my97.net/dp/demo/index.htm 533 | 强大的独立日期选择器|http://www.cnblogs.com/gbin1/archive/2012/04/16/2452105.html 534 | fullcalendar|http://fullcalendar.io 535 | fullcalendar日历控件知识点集合 |http://blog.csdn.net/francislaw/article/details/7740630 536 | 中文api|http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html 537 | 农历日历|https://github.com/zzyss86/LunarCalendar 538 | 超酷的仿百度带节日日历老黄历控件|http://www.sucaisj.com/jiaoben/date/201509/16856.html 539 | 日期格式化|http://momentjs.com 540 | 大牛日历控件|https://github.com/Johnqing/QPAYCalendar 541 | 我群某管理作品|https://github.com/Iamlars/dateMarker 542 | input按位替换-官网|http://digitalbush.com/projects/masked-input-plugin 543 | input按位替换-github|https://github.com/digitalBush/jquery.maskedinput/tree/1.2.2 544 | bootstrap-daterangepicker|https://github.com/dangrossman/bootstrap-daterangepicker 545 | 国外30个插件集合|http://www.vandelaydesign.com/30-best-free-jquery-plugins 546 | JavaScript datepicker|http://dbushell.com/2012/10/09/pikaday-javascript-datepicker 547 | Datepair.js|http://jonthornton.github.io/Datepair.js 548 | 一个风格多样的日历|https://github.com/glad/glDatePicker 549 | 弹出层式的全日历|http://amsul.ca/pickadate.js/date 550 | jquery双日历|http://www.daterangepicker.com 551 | 552 | 553 | 移动 | 地址 554 | --- | --- 555 | 大气实用jQuery手机移动端日历日期选择插件|http://www.frankdemo.cn/index.php?c=content&a=show&id=115 556 | jQuery Mobile 移动开发中的日期插件Mobiscroll |https://mobiscroll.com 557 | 558 | 559 | Date library | 地址 560 | --- | --- 561 | Datejs|https://github.com/datejs/Datejs 562 | sugarjs|http://sugarjs.com/api/Date 563 | 564 | 565 | 综合效果搜索平台 | 地址 566 | --- | --- 567 | 效果网|http://www.jq22.com 568 | 17素材|http://www.17sucai.com 569 | 常用的JavaScript代码片段|http://microjs.com 570 | 571 | 572 | 概述 | 地址 573 | --- | --- 574 | 前端工具大全|http://www.awesomes.cn 575 | 什么是前端工程化|https://github.com/fouber/blog/issues/10?from=timeline&isappinstalled=0# 576 | 577 | 578 | Gulp | 地址 579 | --- | --- 580 | Gulp官网|http://gulpjs.com 581 | Gulp中文网|http://www.gulpjs.com.cn 582 | gulp资料收集|https://github.com/Platform-CUF/use-gulp 583 | Gulp：任务自动管理工具 - ruanyifeng|http://javascript.ruanyifeng.com/tool/gulp.html 584 | Gulp插件|http://gulpjs.com/plugins 585 | Gulp不完全入门教程|http://www.ido321.com/1622.html 586 | 为什么使用gulp?|https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/33 587 | Gulp安装及配合组件构建前端开发一体化|http://www.dbpoo.com/getting-started-with-gulp 588 | Gulp 入门指南|https://github.com/nimojs/gulp-book 589 | Gulp 入门指南 - nimojs|https://github.com/nimojs/blog/issues/19 590 | Gulp入门教程|http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B 591 | Gulp in Action|http://www.imooc.com/video/5692 592 | Gulp开发教程（翻译）|http://www.w3ctech.com/topic/134 593 | 前端构建工具gulpjs的使用介绍及技巧|http://www.cnblogs.com/2050/p/4198792.html 594 | 595 | 596 | Grunt | 地址 597 | --- | --- 598 | gruntjs|http://gruntjs.com 599 | Grunt中文网|http://www.gruntjs.net 600 | 601 | 602 | Fis | 地址 603 | --- | --- 604 | fis 官网|http://fex-team.github.io/fis-site/index.html 605 | fis|http://fis.baidu.com 606 | 607 | 608 | pc图轮 | 地址 609 | --- | --- 610 | 单屏轮播sochange|http://www.jsfoot.com/jquery/demo/2011-09-20/192.html 611 | 左右按钮多图切换|http://bxslider.com/examples/carousel-demystified 612 | fullpage全屏轮播|https://github.com/alvarotrigo/fullPage.js 613 | 614 | 615 | 移动端 | 地址 616 | --- | --- 617 | 无缝切换|http://www.swipejs.com 618 | 滑屏效果|http://www.idangero.us/swiper 619 | 全屏fullpage|https://github.com/peunzhang/fullpage 620 | 单个图片切换|https://github.com/qiqiboy/touchslider 621 | 单个全屏切换|https://github.com/peunzhang/slip.js 622 | 百度的切换库|http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group 623 | 单个全屏切换|https://github.com/peunzhang/iSlider 624 | 滑屏效果|https://github.com/saw/touch-interfaces 625 | 旋转拖动设置|http://baijs.com/tinycircleslider 626 | 类似于swipe切换|http://touchslider.com 627 | 支持多种形式的触摸滑动|http://www.swiper.com.cn/demo/index.html 628 | 滑屏效果|https://github.com/joker-ye/main/blob/master/wap/index.html 629 | 大话主席pc移动图片轮换|http://www.superslide2.com 630 | 滑屏效果|https://github.com/hahnzhu/parallax.js 631 | 基于zepto的fullpage|https://github.com/yanhaijing/zepto.fullpage 632 | [WebApp]定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应|http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html 633 | 判断微信客户端的那些坑|http://loo2k.com/blog/detecting-wechat-client 634 | 可以通过javascript直接调用原生分享的工具|https://github.com/JefferyWang/nativeShare.js 635 | JiaThis 分享到微信代码|http://www.jiathis.com/help/html/weixin-share-code 636 | 聊聊移动端跨平台开发的各种技术|http://fex.baidu.com/blog/2015/05/cross-mobile 637 | 前端自动化测试|http://www.zhihu.com/question/29922082 638 | 多种轮换图片|http://ajccom.github.io/niceslider 639 | 滑动侧边栏|https://mango.github.io/slideout 640 | 641 | 642 | 文件上传 | 地址 643 | --- | --- 644 | 百度上传组件|http://fex.baidu.com/webuploader 645 | 上传|https://blueimp.github.io/jQuery-File-Upload 646 | flash 头像上传|http://www.hdfu.net 647 | 图片上传预览|http://www.dropzonejs.com 648 | 图片裁剪|http://elemefe.github.io/image-cropper 649 | 图片裁剪-shearphoto|http://www.shearphoto.com 650 | jQuery图片处理|http://www.oschina.net/project/tag/284/jquery-image-tools?lang=0&os=0&sort=view&p=2 651 | 652 | 653 | 模拟select | 地址 654 | --- | --- 655 | 糖饼 select|http://aui.github.io/popupjs/doc/selectbox.html 656 | flexselect|https://github.com/rmm5t/jquery-flexselect 657 | 双select|http://loudev.com 658 | select2|http://select2.github.io 659 | 660 | 661 | 取色插件 | 地址 662 | --- | --- 663 | 类似 Photoshop 的界面取色插件|http://www.jq22.com/plugin/367 664 | jquery color|https://github.com/jquery/jquery-color 665 | 取色插件集合|http://www.oschina.net/project/tag/287/color-picker 666 | farbtastic 圆环＋正方形|https://github.com/mattfarina/farbtastic 667 | 668 | 669 | 城市联动 | 地址 670 | --- | --- 671 | jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果|http://www.ijquery.cn/?p=360 672 | 673 | 674 | 剪贴板 | 地址 675 | --- | --- 676 | 剪贴板|https://github.com/zeroclipboard/zeroclipboard 677 | clipboard 最新的剪切方案|http://zenorocha.github.io/clipboard.js 678 | 不是Flash的剪贴板|https://github.com/zenorocha/clipboard.js 679 | 680 | 681 | 简繁转换 | 地址 682 | --- | --- 683 | 简繁转换|https://github.com/BYVoid/OpenCC 684 | 685 | 686 | 表格 Grid | 地址 687 | --- | --- 688 | facebook表格|http://facebook.github.io/fixed-data-table 689 | 类似于Excel编辑表格-handsontable|http://handsontable.com 690 | bootstrap-table插件|http://bootstrap-table.wenzhixin.net.cn 691 | datatables|https://www.datatables.net 692 | 693 | 694 | 在线演示 | 地址 695 | --- | --- 696 | js 在线编辑 - runjs|http://runjs.cn 697 | js 在线编辑 - jsbin|http://jsbin.com 698 | js 在线编辑 - codepen|http://codepen.io 699 | js 在线编辑 - jsfiddle|http://jsfiddle.net 700 | java 在线编辑 - runjs|http://ideone.com 701 | js 在线编辑 - hcharts|http://code.hcharts.cn 702 | js 在线编辑 - jsdm|http://jsdm.com 703 | sql 在线编辑 - sqlfiddle|http://sqlfiddle.com 704 | mozilla 在线编辑器|https://thimble.mozilla.org 705 | 706 | 707 | 播放器 | 地址 708 | --- | --- 709 | Html5 VideoPlayer|https://github.com/zmmbreeze/DeadSimpleVideoPlayer 710 | 711 | 712 | 粒子动画 | 地址 713 | --- | --- 714 | Proton 烟花|http://a-jie.github.io/Proton/#example 715 | 716 | 717 | Nodejs | 地址 718 | --- | --- 719 | nodejs 篇幅比较巨大|http://liuqing.pw 720 | Node.js 包教不包会|https://github.com/alsotang/node-lessons 721 | 篇幅比较少|http://www.rainweb.cn/article/category/Nodejs 722 | node express 入门教程|http://www.w3cfuns.com/article-5598538-1-1.html 723 | nodejs定时任务|http://my.oschina.net/u/568264/blog/193773 724 | 一个nodejs博客|http://60sky.com 725 | 【NodeJS 学习笔记04】新闻发布系统|http://www.cnblogs.com/yexiaochai/p/3536547.html 726 | 过年7天乐，学nodejs 也快乐|http://www.cnblogs.com/qqloving/p/3541099.html 727 | 七天学会NodeJS|https://github.com/nqdeng/7-days-nodejs 728 | Nodejs学习笔记（二）--- 事件模块|http://www.cnblogs.com/zhongweiv/p/nodejs_events.html 729 | nodejs入门|http://www.cnblogs.com/liusuqi/p/3735491.html 730 | angularjs nodejs|https://github.com/zensh/jsgen 731 | 从零开始nodejs系列文章|http://blog.fens.me/series-nodejs 732 | 理解nodejs|http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb 733 | nodejs事件轮询|http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop 734 | node入门|http://www.nodebeginner.org/index-zh-cn.html 735 | nodejs cms|http://ourjs.com/detail/53e1f281c5910a9806000001 736 | Node初学者入门，一本全面的NodeJS教程|http://ourjs.com/detail/529ca5950cb6498814000005 737 | NodeJS的代码调试和性能调优|http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line 738 | 739 | 740 | 常规优化|地址 741 | --- | --- 742 | Javascript高性能动画与页面渲染|http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering 743 | 移动H5前端性能优化指南|http://isux.tencent.com/h5-performance.html 744 | 5173首页前端性能优化实践|http://ued.5173.com/?p=1731 745 | 给网页设计师和前端开发者看的前端性能优化|http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers 746 | 复杂应用的 CSS 性能分析和优化建议|http://www.orzpoint.com/profiling-css-and-optimization-notes 747 | 张鑫旭——前端性能|http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD 748 | 前端性能监控总结|http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html 749 | 网站性能优化之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 750 | 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 751 | 前端技术：网站性能优化之CSS无图片技术|http://my.eoe.cn/tuwandou/archive/4544.html 752 | 浏览器的加载与页面性能优化|http://www.baiduux.com/blog/2011/02/15/browser-loading 753 | 页面加载中的图片性能优化|http://www.w3ctech.com/p/1503 754 | Hey——前端性能|http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD 755 | html优化|http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2 756 | 99css——性能|http://www.99css.com/tag/%e6%80%a7%e8%83%bd 757 | Yslow——性能优化|http://www.yslow.net/category.php?cid=20 758 | YSLOW中文介绍|http://www.cnblogs.com/yslow 759 | 转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化|http://www.360ito.com/article/40.html 760 | Yahoo!团队实践分享：网站性能|http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml 761 | 网站性能优化指南：什么使我们的网站变慢？|http://blog.jiasule.com/i/153 762 | 网站性能优化实践，减少加载时间，提高用户体验|http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html 763 | 浅谈网站性能优化 前端篇|http://www.umtry.com/archives/747.html 764 | 前端重构实践之如何对网站性能优化？|http://www.adinnet.cn/blog/designview/2012-7-12/678.html 765 | 前端性能优化：使用媒体查询加载指定大小的背景图片|http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9 766 | 网站性能系列博文|http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html 767 | 加载，不只是少一点点|http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml 768 | 前端性能的测试与优化|http://mzhou.me/article/95310 769 | 分享网页加载速度优化的一些技巧？|http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading 770 | 页面加载中的图片性能优化|http://www.f2es.com/images-bytes-opt 771 | web前端优化(基于Yslow|http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html 772 | 网站性能优化工具大全|https://www.qianduan.net/website-performance-optimization-tool.html 773 | 【高性能前端1】高性能HTML|http://www.alloyteam.com/2012/10/high-performance-html 774 | 【高性能前端2】高性能CSS|http://www.alloyteam.com/2012/10/high-performance-css 775 | 由12306谈谈网站前端性能和后端性能优化|http://coolshell.cn/articles/6470.html 776 | AlloyTeam——前端优化|http://www.alloyteam.com/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96 777 | 毫秒必争，前端网页性能最佳实践|http://www.cnblogs.com/developersupport/p/3248695.html 778 | 网站性能工具Yslow的使用方法|http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html 779 | 前端工程与性能优化（上）：静态资源版本更新与缓存|http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1 780 | 前端工程与性能优化（下）：静态资源管理与模板框架|http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2 781 | HTTPS连接的前几毫秒发生了什么|http://blog.jobbole.com/48369 782 | Yslow|http://uicss.cn/yslow/#more-12319 783 | Essential Web Performance Metrics — A Primer, Part 1|http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1 784 | Essential Web Performance Metrics — Part 2|http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2 785 | YUISlide,针对移动设备的动画性能优化|http://jayli.github.io/blog/data/2011/12/23/yuislide.html 786 | Improving Site Performance|http://joelglovier.com/improving-site-performance 787 | 让网站提速的最佳前端实践|http://segmentfault.com/a/1190000000367899 788 | Why Website Speed is Important|http://sixrevisions.com/web-development/why-website-speed-is-important 789 | Need for Speed – How to Improve your Website Performance|https://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance 790 | 阿里无线前端性能优化指南 (Pt.1 加载期优化 |https://github.com/amfe/article/issues/1 791 | 792 | 793 | 优化工具|地址 794 | --- | --- 795 | JavaScript 性能分析新工具 OneProfile|http://www.html-js.com/article/3083 796 | JavaScript 堆内存分析新工具 OneHeap|http://www.html-js.com/article/3091 797 | 798 | 799 | 在线工具|地址 800 | --- | --- 801 | google在线工具|https://developers.google.com/speed/pagespeed/insights 802 | 阿里测|http://www.alibench.com 803 | 阿里-免费测试服务|http://itest.aliyun.com 804 | 阿里-F2etest多浏览器兼容性测试解决方案|https://github.com/alibaba/f2etest 805 | js性能测试|http://jsperf.com 806 | 807 | 808 | 前端架构|地址 809 | --- | --- 810 | 技术架构|http://www.zhihu.com/topic/19612641 811 | 前端架构|http://saito.im/note/The-Architecture-of-F2E 812 | 如何成为前端架构师|http://www.zhihu.com/question/24092572 813 | 关于前端架构-张克军|http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html 814 | 百度腾讯offer比较（腾讯游戏VS百度基础架构）|http://www.zhihu.com/question/25583350 815 | 816 | 817 | 推荐作品|地址 818 | --- | --- 819 | winter代码片段需要FQ|https://gist.github.com/wintercn 820 | fgm|http://www.fgm.cc/learn 821 | 岑安作品集|https://github.com/hongru/hongru.github.com 822 | 当耐特demo集合|http://kmdjs.github.io 823 | 米空格 js作品|http://www.laoshu133.com/Lab 824 | myFocus|http://koen301.github.io 825 | SeaJS组件库|http://panxuepeng.github.io/seajslib 826 | 颜海镜作品|http://yanhaijing.com/myProject 827 | 脚儿网作品|http://jo2.org/category/myworks 828 | javascript个人作品|http://www.cnitblog.com/yemoo/category/3107.html 829 | 妙味的雷东升游戏作品|http://bbs.miaov.com/forum.php?mod=viewthread&tid=7790 830 | javascript作品集|http://bbs.csdn.net/topics/380227212 831 | 云五笔，灰度产生生成工具|https://github.com/TooBug/works 832 | 项目主页|http://koen301.github.io 833 | 个性的作品主页|http://zaole.net 834 | 播放器|http://static.tingall.com/v2/player 835 | ucren js demos 集|http://ucren.com/blog/demos 836 | 智能社|http://www.zhinengshe.com/works_list.html 837 | 实例陈列架|http://demos.shizuwu.cn 838 | zoye demo|http://zoye.sinaapp.com/demo 839 | 王员外|http://lab.yuanwai.wang 840 | 平凡|http://pingfan1990.sinaapp.com 841 | jyg 游戏案例|http://www.lovewebgames.com 842 | 很多jquery插件|http://www.helloweba.com/list.html 843 | 不羁虫 - soJs 作品系列|http://www.bujichong.com/sojs/api/index.html 844 | frozenui|http://frozenui.github.io/case.html 845 | 黑白棋|http://js-game.github.io/othello 846 | fromone|http://yansm.github.io/fromone/index.html 847 | 848 | 849 | 国外大牛精品|地址 850 | --- | --- 851 | pazguille|http://pazguille.me 852 | 853 | 854 | 简历模板|地址 855 | --- | --- 856 | 不错的个人简历|http://learnshare.github.io/about/index.html 857 | 简历|http://hcy2367.github.io/resume 858 | 张伦|http://ncuey.sinaapp.com/CrispElite/ 859 | 简历|https://github.com/hacke2/ResumeSample 860 | 翁天信|http://blog.dandyweng.com/2013/07/how-my-website-was-created 861 | 动画方式的简历|http://www.webhek.com/misc/interactive-resume 862 | 组件丰富简历|http://www.linqing07.com/resume.html 863 | 简历池|http://www.mojianli.com/resume/view 864 | haorooms博客|http://www.haorooms.com/about 865 | Justin Young|http://cv.youngdze.com 866 | 867 | 868 | 面试题|地址 869 | --- | --- 870 | 那几个月在找工作（百度，网易游戏）|http://www.nowcoder.com/discuss/3196 871 | 2014最新面试题|http://www.html-js.com/article/1743 872 | 2016校招内推 -- 阿里巴巴前端 -- 三面面试经历 |http://www.cnblogs.com/imwtr/p/4685546.html 873 | 年后跳槽那点事：乐视+金山+360面试之行|http://www.cnblogs.com/lvdabao/p/3660707.html 874 | 阿里前端面试题上线|http://fatesinger.com/2722.html 875 | 拉勾网js面试题|http://www.cnblogs.com/52cik/p/js-question-lg.html 876 | 前端面试|http://www.cnblogs.com/allenxing/p/3724382.html 877 | Web开发笔试面试题 大全|http://mianshiti.diandian.com 878 | 2014最新前端面试题|https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions 879 | 百度面试|https://github.com/fex-team/interview-questions 880 | 面试题|http://www.w3cfuns.com/forum.php?mod=forumdisplay&fid=51&filter=typeid&typeid=177 881 | 前端工作面试问题|https://github.com/h5bp/Front-end-Developer-Interview-Questions 882 | 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 883 | 如何面试一名前端开发工程师？|http://www.html-js.com/article/Large-search-front-team-column%202961 884 | 前端实习生面试总结 |http://www.cnblogs.com/xiaoruo/p/4665163.html 885 | BAT及各大互联网公司2014前端笔试面试题：JavaScript篇|http://blog.jobbole.com/78738 886 | 前端开发面试题大收集|https://github.com/paddingme/Front-end-Web-Development-Interview-Question 887 | 收集的前端面试题和答案|https://github.com/qiu-deqing/FE-interview 888 | 如何面试前端工程师|http://www.zhihu.com/question/19568008 889 | 前端开发面试题|https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md 890 | 牛客网-笔试面经|http://www.nowcoder.com/discuss?type=2 891 | 892 | 893 | iconfont|地址 894 | --- | --- 895 | 中文字体|http://www.zhihu.com/question/21253343 896 | 淘宝字库|http://iconfont.cn 897 | 字体|http://mux.alimama.com/fonts 898 | 制作教程|http://iconfont.cn/help/platform.html 899 | zhangxinxu-icommon|http://www.zhangxinxu.com/wordpress/?s=icomoon 900 | icommon|https://icomoon.io/app 901 | 用字体在网页中画ICON图标(推荐教程|http://imooc.com/learn/243 902 | 字体压缩工具|http://font-spider.org 903 | 904 | 905 | 前端开发工具|地址 906 | --- | --- 907 | IntelliJ IDEA 简体中文专题教程|https://github.com/judasn/IntelliJ-IDEA-Tutorial 908 | Webstorm,InterllIdea,Phpstorm|http://t.cn/8kZZ1Uy 909 | SublimeText|https://github.com/jikeytang/sublime-text 910 | Atom|https://atom.io 911 | visual studio code|https://code.visualstudio.com 912 | 913 | 914 | Fiddler|地址 915 | --- | --- 916 | Fiddler调式使用知多少(一深入研究|http://www.cnblogs.com/tugenhua0707/p/4623317.html 917 | 微信fiddle|http://www.cnblogs.com/strick/p/4570006.html 918 | 微信fiddle|http://gaoboy.com/article/26.html 919 | 920 | 921 | Chrome|地址 922 | --- | --- 923 | Google Chrome 官方|https://developer.chrome.com/devtools 924 | Chrome - 基础|http://www.cnblogs.com/constantince/p/4565261.html 925 | Chrome - 进阶|http://www.cnblogs.com/constantince/p/4579121.html 926 | Chrome - 性能|http://www.cnblogs.com/constantince/p/4585983.html 927 | Chrome - 性能进阶|http://www.cnblogs.com/constantince/p/4607497.html 928 | Chrome - 移动|http://www.cnblogs.com/constantince/p/4624241.html 929 | Chrome - 使用技巧|http://www.cnblogs.com/liyunhua/p/4544738.html 930 | Chrome - Console控制台不完全指南|http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html 931 | Chrome - Workspace使浏览器变成IDE|http://c7sky.com/chrome-devtools-workspace.html 932 | network面板|http://www.html-js.com/article/Nothing-blind%202975 933 | chrome开发工具快捷键|http://anti-code.com/devtools-cheatsheet 934 | chrome调试工具常用功能整理|http://www.html-js.com/article/2327 935 | Chrome 开发工具 Workspace 使用|http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace 936 | Chrome神器Vimium快捷键学习记录 |http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html 937 | sass调试-w3cplus|http://www.w3cplus.com/sassguide/debug.html 938 | 如何更专业的使用Chrome开发者工具-w3cplus|http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html 939 | chrome调试canvas|http://sentsin.com/web/253.html 940 | chrome profiles1|https://developer.chrome.com/devtools/index 941 | chrome profiles2|http://h5dev.uc.cn/article-25-1.html 942 | chrome profiles3|http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles 943 | chrome移动版调试|https://developer.chrome.com/devtools/docs/mobile-emulation 944 | chrome调试|http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool 945 | chrome的调试|http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html 946 | chrome console 命令详解|https://developer.chrome.com/devtools/docs/commandline-api 947 | 查看事件绑定1|http://www.cnblogs.com/leonkao/p/3809655.html 948 | 查看事件绑定2|http://www.cnblogs.com/xiaoyao2011/p/3447421.html 949 | 神器——Chrome开发者工具(一|http://segmentfault.com/a/1190000000683599 950 | 奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍|https://xinranliu.me/2015-05-22-qiqu-performance 951 | chrome 开发者工具的 15 个小技巧|http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html 952 | Chrome开发者工具不完全指南|http://1ke.co/course/361 953 | Chrome 开发者工具使用技巧|http://segmentfault.com/a/1190000003882567 954 | 955 | 956 | Firebug|地址 957 | --- | --- 958 | firebug视频教程|http://www.imooc.com/learn/137 959 | firefox 模拟器|https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE 960 | console.log 命令详解|http://www.cnblogs.com/ctriphire/p/4116207.html 961 | Firebug入门指南|http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html 962 | Firebug控制台详解|http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html 963 | 964 | 965 | 移动,微信调试|地址 966 | --- | --- 967 | 浏览器端调试安卓|https://openstf.github.io 968 | 移动端前端开发调试|http://yujiangshui.com/multidevice-frontend-debug 969 | 使用 Chrome 远程调试 Android 设备|https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md 970 | mac移动端调试|http://plus.uc.cn/document/webapp/doc5.html 971 | mac移动端调试|http://www.mihtool.com 972 | 无线调试攻略|http://thx.github.io/mobile/debugging-in-mobile 973 | 无线调试攻略|http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile 974 | 屌爆了,完美调试 微信webview(x5|http://www.jianshu.com/p/ccf124f1f74b 975 | 微信调试的那些事|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 976 | 远程console|http://jsconsole.com 977 | 微信调试工具|http://blog.qqbrowser.cc 978 | 各种真机远程调试方法汇总|https://github.com/jieyou/remote_inspect_web_on_real_device 979 | 980 | 981 | iOS Simulator|地址 982 | --- | --- 983 | Simulator|https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html 984 | Xcode中的iOS模拟器(iOS Simulator的介绍和使用心得|http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary 985 | 986 | 987 | img|地址 988 | --- | --- 989 | loading img|http://preloaders.net/en/circular 990 | 智图-图片优化平台|http://zhitu.isux.us 991 | 在线png优化|https://tinypng.com 992 | 993 | 994 | 生成二维码|地址 995 | --- | --- 996 | 生成二维码|http://cli.im 997 | 998 | 999 | 浏览器同步|地址 1000 | --- | --- 1001 | puer|https://github.com/leeluolee/puer 1002 | liveReload|http://livereload.com 1003 | f5|http://getf5.com 1004 | File Watchers|http://geek100.com/2608 1005 | 1006 | 1007 | 在线PPT制作|地址 1008 | --- | --- 1009 | 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 1010 | PPT|https://github.com/ksky521/nodePPT 1011 | reveal|https://github.com/hakimel/reveal.js 1012 | slippy|https://github.com/Seldaek/slippy 1013 | 1014 | 1015 | 前端导航网站|地址 1016 | --- | --- 1017 | 界面清爽的前端导航|http://uxbees.com/index.html 1018 | 前端导航|http://whycss.com 1019 | 前端网址导航|http://www.daqianduan.com/nav 1020 | 前端名录|http://sentsin.com/daohang 1021 | 前端导航|http://123.jser.us 1022 | 前端开发资源|http://www.css88.com/nav 1023 | 网址导航|http://www.haourl.cn 1024 | 前端开发仓库 - 众多效果的收集地|http://code.ciaoca.com 1025 | 前端资源导航|https://github.com/jnoodle/f2e-collect 1026 | F2E 前端导航|http://f2e.im/static/pages/nav/index.html 1027 | 1028 | 1029 | 常用CDN|地址 1030 | --- | --- 1031 | 新浪CDN|http://lib.sinaapp.com 1032 | 百度静态资源公共库|http://cdn.code.baidu.com 1033 | 360网站卫士常用前端公共库CDN服务|http://libs.useso.com 1034 | Bootstrap中文网开源项目免费 CDN 服务|http://www.bootcdn.cn 1035 | 开放静态文件 CDN - 七牛|http://staticfile.org 1036 | CDN加速 - jq22|http://www.jq22.com/cdn 1037 | jQuery CDN|http://code.jquery.com 1038 | Google jQuery CDN|http://www.google-jquery-cdn.com 1039 | 微软CDN|http://www.asp.net/ajax/cdn 1040 | 1041 | 1042 | Git|地址 1043 | --- | --- 1044 | git-scm|http://git-scm.com 1045 | 廖雪峰-Git教程|http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 1046 | git-for-windows|https://git-for-windows.github.io 1047 | GitHub 添加 SSH keys|http://daemon369.github.io/git/2015/03/10/add-ssh-keys-for-github 1048 | gogithub|http://www.worldhello.net/gotgithub/index.html 1049 | git常规命令练习|http://pcottle.github.io/learnGitBranching 1050 | git的资料整理|https://github.com/xirong/my-git 1051 | 我所记录的git命令（非常实用）|http://www.cnblogs.com/fanfan259/p/4810517.html 1052 | 企业开发git工作流模式探索部分休整|https://github.com/xirong/my-git/blob/master/git-workflow-tutorial.md 1053 | GitHub 漫游指南|https://github.com/phodal/github-roam 1054 | GitHub秘籍|https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md 1055 | 使用git和github进行协同开发流程|http://livoras.com/post/28 1056 | 动画方式练习git|http://onlywei.github.io/explain-git-with-d3 1057 | 1058 | 优秀JavaScript项目 | 地址 1059 | --- | --- 1060 | Angular和Webpack种子文件|https://github.com/AngularClass/angular2-webpack-starter 1061 | Fis3面向前端的工程构建系统|https://github.com/fex-team/fis3 1062 | Fis3 DEMO|https://github.com/fex-team/fis3-demo 1063 | 前端JQuery系列:源码剖析|https://github.com/JsAaron/jQuery 1064 | avalon框架|https://github.com/RubyLouvre/avalon 1065 | Microsoft ChakraCore 微软的Chakra引擎|https://github.com/Microsoft/ChakraCore 1066 | Quintus HTML游戏引擎|https://github.com/cykod/Quintus 1067 | 一个用node.js搭建的有趣博客|https://github.com/STRML/strml.net 1068 | Web前端助手--FeHelper（Chrome扩展）|https://github.com/zxlie/FeHelper 1069 | 百度前端技术学院|https://github.com/baidu-ife/ife 1070 | Cheerio（node.js中的jQuery）|https://github.com/cheeriojs/cheerio 1071 | nodejs的一个聊天软件 类似微信|https://github.com/BryanYang/freechat 1072 | 使用html5和node.js构建的网易云音乐|https://github.com/stkevintan/Cube 1073 | babel ES6转换为ES5|https://github.com/babel/babel 1074 | 一个JS富文本编辑器|https://github.com/fex-team/ueditor 1075 | 一个JS脑图可视化工具|https://github.com/fex-team/kityminder-core 1076 | 一个JS写的Flappy Bird Game|https://github.com/ellisonleao/clumsy-bird 1077 | 一个JS写的GBA模拟器|https://github.com/taisel/IodineGBA 1078 | SegmentFault写的Markdown解析器|https://github.com/SegmentFault/HyperDown.js 1079 | 基于node.js的Ghost博客|https://github.com/TryGhost/Ghost 1080 | 学习react的demos|https://github.com/ruanyf/react-demos 1081 | 1082 | -------------------------------------------------------------------------------- /base.md: -------------------------------------------------------------------------------- 1 | ``` 2 | 这里的文档很重要， 3 | 你可以在这里看到前端相关代码规范、开发规范、开发流程等， 4 | 如果你是新人，务必看完， 5 | 如果你是老员工，务必按这里的约定执行。 6 | ``` 7 | ## 技术选型 8 | 9 | + 核心框架：[Vue](https://cn.vuejs.org/v2/guide/) 10 | + 状态管理：[Vuex](https://vuex.vuejs.org/zh-cn/intro.html) 11 | + 路由映射：[vue-router](https://router.vuejs.org/zh-cn/) 12 | + 模拟数据：[mock.js](http://mockjs.com/) 13 | + UI组件库：[Muse-UI](https://museui.github.io/#/index),[Element](http://element.eleme.io/#/zh-CN/component/quickstart) 14 | + HTTP请求库：[axios](https://github.com/mzabriskie/axios) 15 | + CSS的预处理框架: [Stylus](http://stylus-lang.com/),[中文文档](http://www.zhangxinxu.com/jq/stylus/),[sass](http://sass.bootcss.com/) 16 | + 资源加载打包工具：[Webpack](https://webpack.github.io/) 17 | + 代码规范工具：[eslint](http://eslint.org/) 18 | + 单元测试 [vue-test-utils](https://vue-test-utils.vuejs.org/zh-cn/) 19 | + 其他：[ES6](https://wohugb.gitbooks.io/ecmascript-6/content/index.html),[node.js](https://nodejs.org/en/),[npm](https://www.npmjs.com/),[alias](https://webpack.js.org/configuration/resolve/) 20 | 21 | 22 | ## 代码规范 23 | 24 | + [HTML规范](./html.md) 25 | + [CSS规范](./css.md) 26 | + [JS规范一（语法&格式篇）](./js.md) 27 | + [JS规范二（base）](./js-base.md) 28 | 29 | ## 前后端接口规范 30 | + [JSON-API](./json-api.md) 31 | 32 | ## 文件命名规范 33 | + [文件命名规范](./文件命名规范.md) 34 | -------------------------------------------------------------------------------- /css.md: -------------------------------------------------------------------------------- 1 | # CSS代码规范 2 | 3 | ## 语言规范 4 | 5 | 1. 样式文件中不要出现大写的标签定义, 不要对 JS 钩子进行样式定义。 6 | 7 | 2. 避免出现`.a.b`之类的定义, 如果做`hack`使用请注明。 ( ie6 不支持此定义 ) 8 | 9 | 3. 稀奇古怪的`hack`请加注释。 10 | 11 | 4. 避免使用`!important`, 如果必须请加注释。 12 | 13 | 5. 缩进以4个空格为基本单位[[参考]](http://www.cnblogs.com/kungfupanda/archive/2012/09/05/2671597.html)。 14 | 15 | 6. 样式使用竖排, 不要使用横排以及 n 级缩进等。 16 | 17 | 7. 对于所有`hack`请放到每个样式定义的最后边。 18 | 19 | 8. class selector 层级尽量控制在 5 层以内。 20 | 21 | 9. 严格控制 `important` 关健字的使用场景，尽量少用。 22 | 23 | ## CSS 命名规则 24 | 25 | 1. 样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写 26 | 字母`（a-z）`、数字`（0-9）`、中划线 `（-）`组成。 27 | 28 | 2. 可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义 29 | 化。避免使用 `123456…,red,blue,left,right`之类的（如颜色、字号大小等）矢量命名 30 | ，如`class="left-news"、class="2"` ，以避免当状态改变时名称失去意义。尽量用单个 31 | 单词简单描述`class`名称。 32 | 33 | 3. 双单词或多单词组合方式：形容词-名词、命名空间-名次、命名空间-形容词-名词。例如： 34 | `news-list、mod-feeds、mod-my-feeds、cell-title` 35 | 36 | ## 通用命名 37 | 38 | 1. 页面框架命名，一般具有唯一性，推荐用ID命名 39 | 40 | ID名称|命名|ID名称 |命名 41 | :---------------|:---------------|:---------------|:--------------- 42 | 头部|header|主体| main 43 | 脚部|footer|容器|wrapper 44 | 侧栏|sidebar|栏目|column 45 | 布局|layout|| 46 | 47 | 2. 模块结构命名 48 | 49 | Class名称|命名|Class名称|命名 50 | :---------------|:---------------|:---------------|:--------------- 51 | 模块(如：新闻模块) |mod (mod-news) |标题栏 |title 52 | 内容 |content |次级内容 |sub-content 53 | 54 | 3. 导航结构命名 55 | 56 | Class名称|命名|Class名称|命名 57 | :---------------|:---------------|:---------------|:--------------- 58 | 导航 |nav |主导航 |main-nav 59 | 子导航| sub-nav |顶部导航 |top-nav 60 | 菜单 |menu |子菜单 |sub-menu 61 | 62 | 4. 一般元素命名 63 | 64 | Class名称|命名|Class名称|命名 65 | :---------------|:---------------|:---------------|:--------------- 66 | 二级| sub |面包屑| breadcrumb 67 | 标志 |logo |广告 |bner(禁用banner或ad) 68 | 登陆 |login |注册 |register/reg 69 | 搜索 |search |加入 |join 70 | 状态 |status |按钮 |btn 71 | 滚动 |scroll |标签页 |tab 72 | 文章列表 |list| 短消息| msg/message 73 | 当前的 |current |提示小技巧 |tips 74 | 图标 |icon| 注释| note 75 | 指南 |guide |服务 |service 76 | 热点 |hot |新闻 |news 77 | 下载 |download |投票 |vote 78 | 合作伙伴 |partner |友情链接 |link 79 | 版权| copyright| 演示| demo 80 | 下拉框 |select |摘要 |summary 81 | 翻页 |pages| 主题风格| themes 82 | 设置 |set |成功| suc 83 | 按钮 |btn| 文本| txt 84 | 颜色 |color/c| 背景 |bg 85 | 边框 |border/bor| 居中| center 86 | 上 |top/t |下| bottom/b 87 | 左 |left/l |右 |right/r 88 | 添加 |add |删除 |del 89 | 间隔 |sp| 段落 |p 90 | 弹出层 |pop |公共 |global/gb 91 | 操作| op |密码 |pwd 92 | 透明 |tran| 信息 |info 93 | 重点 |hit |预览 |pvw 94 | 单行输入框| input| 首页 |index 95 | 日志 |blog |相册| photo 96 | 留言板 |guestbook| 用户| user 97 | 确认 |confirm |取消 |cancel 98 | 报错 |error|| 99 | 100 | 5. 全局皮肤样式 101 | 102 | 文字颜色(命名空间text-xxx) 103 | 104 | ``` 105 | text-c1, text-c2,text-c3…… 106 | ``` 107 | 108 | 背景颜色(命名空间bg -xxx) 109 | 110 | ``` 111 | bg-c1,bg-c2,bg-c3…… 112 | ``` 113 | 114 | 边框颜色(命名空间border-xxx) 115 | 116 | ``` 117 | border-c1,border-c2,border-c3…… 118 | ``` 119 | 120 | ## 属性使用 121 | 122 | 1. z-index 123 | 124 | ``` 125 | //右侧导航: 100-109 126 | //弹窗: 110-119 127 | //顶部: 90-99 128 | //搜索: 80-89 129 | //导航: 70-79 130 | //主内容: 50-59 131 | //底部: 40-49 132 | ``` 133 | 134 | 2. css属性使用缩写。 135 | 136 | **(╳)** 137 | ```css 138 | padding-top: 1px; 139 | padding-right: 2px; 140 | padding-bottom: 3px; 141 | padding-left: 4px; 142 | ``` 143 | **(√)** 144 | ```css 145 | padding: 1px 2px 3px 4px; 146 | ``` 147 | 148 | 3. 0不带单位 (动画0%除外)。 149 | 150 | **(√)** 151 | ```css 152 | margin: 0; 153 | font-size: 0; 154 | ``` 155 | 156 | **(╳)** 157 | ```css 158 | margin: 0px; 159 | font-size: 0px; 160 | ``` 161 | 162 | 4. 使用简写的十六进制值。 163 | 164 | **(√)** 165 | 166 | ```css 167 | color: #edf; 168 | ``` 169 | 170 | **(╳)** 171 | 172 | ```css 173 | color: #eeddff; 174 | ``` 175 | 176 | 5. `border`以 `width, style, color` 的顺序书写, `width`单位使用 `px/rem`, 例如: 177 | 178 | ```css 179 | border: 1px solid #000; 180 | border-top: 1px solide #000; 181 | border-top-color: red; 182 | border: 0; 183 | ``` 184 | 185 | 6. `background:`以`color, image, repeat, position`的顺序来书写, `url`省略引号, 例如: 186 | 187 | ```css 188 | background:#003 url(http://www.taobao.com/loading.png) no-repeat 0 0; 189 | background-color:red; 190 | ``` 191 | 192 | 7. 尽量不使用 CSS expression, 大量使用时性能较差, 应尽量避免使用。 193 | 194 | 8. CSS属性书写顺序参考: 195 | 196 | ``` 197 | 位置属性(position, top, right, z-index, display, float等) 198 | 大小(width, height, padding, margin) 199 | 文字系列(font, line-height, letter-spacing, color- text-align等) 200 | 背景(background, border等) 201 | 其他(animation, transition等) 202 | display 203 | float 204 | position 205 | z-index 206 | width 207 | height 208 | overflow 209 | left(right) 210 | top(bottom) 211 | text-xxx 212 | font-xxx 213 | color 214 | border 215 | background 216 | cursor 217 | ``` 218 | 219 | 9. 为了节省图片的开销，有时候小三角形可以用css border来生成, 看看本规范里面小三角按钮[[参考]](http://ued.taobao.com/blog/2010/08/css-border%E4%BD%BF%E7%94%A8%E5%B0%8F%E5%88%86%E4%BA%AB/): 220 | 221 | ## 注释规范 222 | 223 | 1. 文件头注释: 224 | 225 | ```css 226 | /** 227 | * Style for module header. 228 | * @author djune 229 | * @version 1.0.0 build 2010-12-8 230 | * @modified xxx 2011-2-18 231 | */ 232 | ``` 233 | 234 | 2. 对于html模块需要加注释。 235 | 236 | 3. 奇葩点的 hack 要加注释。 237 | 238 | ```css 239 | background-color: transparent; /* flexible background gradient */ 240 | font-family: serif; /* text floating bug in ie6 */ 241 | ``` 242 | 243 | 4. 修改别人的 CSS 请添加注释 244 | 245 | ```css 246 | /* 主要修改IE8浏览器兼容性问题 djune 2013-09-26 13:21 */ 247 | ``` 248 | 249 | ## CSS Module (模块定义) 250 | 251 | 通常我们的页面模块html结构可以写成这样(.hd, .bd, .ft): 252 | 253 | 通过语义化含义判断我们的结构具体怎么分配到这三个基本结构。 254 | 255 | html: 256 | 257 | ```html 258 |
259 |
Module Title
260 |
261 | Module body inner html constructs 262 |
263 |
just a footer
264 |
265 | ``` 266 | 267 | scss 268 | 269 | ```css 270 | .mod-xxx { 271 | border: 1px solid #ccc; 272 | .hd { font-weight: bold; } 273 | .bd { paddinig: 3px; } 274 | .ft { margin-botto: 3px; } 275 | } 276 | ``` 277 | 278 | css: 279 | 280 | ```css 281 | .mod-xxx { border: 1px solid #ccc; } 282 | .mod-xxx .hd { font-weight: bold; } 283 | .mod-xxx .bd { paddinig: 3px; } 284 | .mod-xxx .ft { margin-botto: 3px; } 285 | ``` 286 | 287 | ## 其他 288 | 289 | 1. [sass](http://sass-lang.com/guide) 预编译, [compass 用法](http://compass-style.org/help/tutorials/) 290 | 2. 合理运用sprites技术，注意png8和png24图片格式化的使用。[[参考]](http://www.w3cfuns.com/thread-5597974-1-1.html)。 291 | 292 | -------------------------------------------------------------------------------- /html.md: -------------------------------------------------------------------------------- 1 | # HTML代码规范 2 | 3 | ## 语言规范 4 | 5 | 1. `doctype`声明使用`html5`。 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | 2. 统一页面编码格式为`utf-8` , `meta`标签`charset`设置为`utf-8`; 12 | 13 | ```html 14 | 15 | ``` 16 | 17 | 3. 标签、标签属性全部小写。 18 | 19 | **(√)** 20 | 21 | ```html 22 | Home 23 | 24 | ``` 25 | 26 | **(╳)** 27 | 28 | ```html 29 | Home 30 | ``` 31 | 32 | 4. 所有html标签必须有结束符，``, ``, ``, ``, ``, `` 除外。 33 | 34 | 5. 标签自定义属性使用`data-name="value"`的形式来写, 如果自定义属性特别多, 可以考虑使用标准 json 的方式去写: `data-json='{"a":"a", "b":"b"}'`。 35 | 36 | **(√)** 37 | 38 | ```html 39 |
40 | ``` 41 | 42 | **(╳)** 43 | 44 | ```html 45 |
46 | 47 | ``` 48 | 49 | 6. 对于 JS 钩子, 以 `jCamelCase` 的驼峰形式来命名。 50 | 51 | 7. 对于普通`class`或者`id`命名（此处id仅做样式，不做js钩子）, 统一使用小写字母, 第一个字符必须为字母, 连接符用中划线 `-`。 52 | 53 | **(√)** 54 | 55 | ```html 56 |
57 |
58 | ``` 59 | 60 | **(╳)** 61 | 62 | ```html 63 |
64 |
65 |
66 | ``` 67 | 68 | 8. css 引用置于头部``标签内。 69 | 70 | 9. js 引用置于底部``标签前。 71 | 72 | ## 标签使用 73 | 74 | 1. ``标签必须放在``内。 75 | 76 | 2. ``标签用于强调重要性, ``标签用于表示内容的着重点。[参考](http://www.css88.com/archives/644) 77 | 78 | 3. 当`link`元素用于引用CSS文档时, 默认`media`是`screen`, 如为特殊终端提供样式, 请指定`media`属性, 如`media=“print”`; 79 | 80 | 4. `img`标签必须加`alt`，尤其是logo、商品图片等关键图片信息，对SEO友好。 81 | 82 | ## 注释规范 83 | 84 | 1. 主要的`html`模块需加注释 85 | 86 | 2. 修改别人代码时, 加入修改信息。至少加入修改者大名和修改时间。 87 | 88 | ```html 89 | 90 | ``` 91 | 92 | ## 其他注意 93 | 94 | 1. 开发时页面原则上不内嵌`style`、`script`代码，如特殊情况请标明并注释。 95 | 96 | 2. 缩进以4个空格为基本单位，为每个块级元素或表格元素标签新起一行，并且对每个子元素进行缩进。[参考](http://www.cnblogs.com/kungfupanda/archive/2012/09/05/2671597.html) 97 | -------------------------------------------------------------------------------- /js-base.md: -------------------------------------------------------------------------------- 1 | #js代码规范二（base） 2 | 3 | 前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性, 同时良好的代码习惯也能充分体现个人的职业素养。 4 | 5 | ##基本格式 6 | 7 | 1. 代码统一采用Tab缩进（4个空格，可以在编辑器设置），如：Eclipse 用户可以ctrl+shif+f功能键盘，为了统一缩进风格，大家可以用eclipse自定义团队缩进风格，然后然后导入，按住ctrl+shif+f格式化即。[参考](http://www.cnblogs.com/kungfupanda/archive/2012/09/05/2671597.html) 8 | 9 | 2. 语句的结尾处必须用分号，这是一个好习惯，特别是在代码会被压缩的情况下。 10 | 11 | 3. 模块代码AMD方式组织。define(), 模块依赖用 commonjs require() 12 | 13 | ```javascript 14 | define(function(require, exports, module) { 15 | 'use strict'; 16 | 17 | var _ = require('underscore'); 18 | 19 | var queue = []; 20 | 21 | var initModule = function() { 22 | _.each(queue, function(v, i) { 23 | // do something 24 | }); 25 | }; 26 | 27 | module.exports = { 28 | init: initModule 29 | }; 30 | }); 31 | ``` 32 | 33 | 4. 字符串变量值统一用单引号(') 34 | 35 | ```javascript 36 | var s = 'hello world'; 37 | var html = '
'; 38 | console.log(s + ', my name is cat'); 39 | ``` 40 | 41 | 5. 注意使用空格/空行 42 | 43 | 完整示例 44 | 45 | ```javascript 46 | function walk(holder, key) { 47 | 48 | // The walk method is used to recursively walk the resulting structure so 49 | // that modifications can be made. 50 | 51 | var k, v, value = holder[key]; 52 | if (value && typeof value === 'object') { 53 | for (k in value) { 54 | if (Object.prototype.hasOwnProperty.call(value, k)) { 55 | v = walk(value, k); 56 | if (v !== undefined) { 57 | value[k] = v; 58 | } else { 59 | delete value[k]; 60 | } 61 | } 62 | } 63 | } 64 | 65 | return reviver.call(holder, key, value); 66 | } 67 | ``` 68 | 69 | 需要前后加空格的运算符包括: 70 | 71 | ``` 72 | =, ==, ===, !=, !==, >, <, <=, >= , ? :, -, +, +=, -=, /, *, %, &&, &, ||, |, {} 73 | ``` 74 | 75 | 不需要出现空格的包括: ` ;, ., (), []` 76 | 77 | 后边带空格的包括: 78 | 79 | ``` 80 | ,, if, for, while, do, catch, with, new, 81 | ``` 82 | 83 | 非三元表达式中的: 84 | 85 | ```javascript 86 | a += 2; 87 | b = true ? a : 1; 88 | ``` 89 | 90 | 括号中的参数之间加空格: 91 | 92 | ```javascript 93 | get(x, b, c); 94 | function get(a, b, c) { 95 | // work with a,b,c 96 | } 97 | ``` 98 | 99 | 注释符前后要有空格 100 | 101 | 代码段前后保留空行, 类，方法，函数前后保留空行 102 | 103 | 6. 避免使用全局变量, 如果不能避免则尽量减少数量; 104 | 105 | 7. 三元操作符不要涉及大段的复杂的代码, 如果可以请改为 if else; 106 | 107 | 8. 奇淫技巧必须注释, 注释应该更多地体现为什么要这样，而不是会怎么样; 108 | 109 | 9. 将每条语句放置在一个单独的代码行中保持可读性, 不要出现 aNum++; anOtherNum++;在同一行, var 也一样; 110 | 111 | **(√)** 112 | 113 | ```javascript 114 | aNum++; 115 | anOtherNum++; 116 | ``` 117 | 118 | **(╳)** 119 | 120 | ```javascript 121 | aNum++; anOtherNum++; 122 | ``` 123 | 124 | ### 命名规范 125 | 126 | 通常,使用 `functionNamesLikeThis`, `variableNamesLikeThis`, `ClassNamesLikeThis`, `EnumNamesLikeThis`, `methodNamesLikeThis`, 和 `SYMBOLICCONSTANTSLIKE_THIS`. 127 | 128 | 1. 常规的命名方式 129 | 130 | ```javascript 131 | var variableNamesLikeThis = '...', // 变量 132 | CONSTANTS_LIKE_THIS = '...'; // 常量 133 | 134 | // 函数 135 | function functionNamesLikeThis() { 136 | ... 137 | }; 138 | 139 | // 构造类 140 | function ClassNamesLikeThis() { 141 | ... 142 | }; 143 | 144 | // 方法&属性等 145 | ClassNamesLikeThis.methodNamesLikeThis = function(){ 146 | ... 147 | }; 148 | ``` 149 | 150 | 2. 属性和方法 151 | 152 | 文件或类中的`私有`属性, 变量和方法名应该以下划线 "_" 开头. 153 | 154 | 保护属性, 变量和方法名不需要下划线开头, 和公共变量名一样. 155 | 156 | 方法名按描述过程或描述项的方式, 动名词结合. 来命名, 以小写字母开头, 连接词使用混合大小写的驼峰形式, 例如: `getAncestorByTagName`. 157 | 158 | 3. 方法和函数参数 159 | 160 | 函数的参数个数不固定时, 应该添加最后一个参数 args 为参数的个数. 你也可以不设置 args 而取代使用 arguments. 161 | 162 | 可选和可变参数应该在 @param (Optional) 标记中说明清楚. 163 | 164 | 4. Getters 和 Setters 165 | 166 | 不强制要求使用Getters和Setters，但当你使用时，Getters应该命名成`getFoo()`形式，同理Setters应该名称成`setFoo(v)`形式 167 | 168 | 对于返回值是布尔类型（Boolean）的Getters方法也可以写成`isFoo()`的形式 169 | 170 | ```javascript 171 | // 定义一个叫学生的构造类 172 | function Student() { 173 | ... 174 | }; 175 | 176 | Student.prototype.getName = function() { 177 | ... 178 | }; 179 | 180 | Student.prototype.setName = function(name) { 181 | ... 182 | }; 183 | 184 | // 返回值为布尔类型的Getters方法 185 | Student.prototype.isGirl= function() { 186 | if (...) { 187 | return true; 188 | } else { 189 | return false; 190 | } 191 | }; 192 | ``` 193 | 194 | 5. 私有 195 | 196 | 如果你要把构造类的方法，变量或属性设置为私有的话，请用下划线开头来命名，如：“_privite” 197 | 198 | 6. 文件名应该使用小写字符, 以避免在有些系统平台上不识别大小写的命名方式. 文件名以.js结尾, 不要包含除 "-"外的标点符号，jquery插件看情况定. 199 | 200 | 7. 构造函数. 201 | 202 | 使用首字母大写的形式, 通常为名词, 例如: `Class`; 203 | 204 | 但是, 对于内部基类, 也就是不直接调用生成实例的基类, 使用 _ 和首字母大写的形式命名, 例如: `_Base`; 205 | 206 | 8. 布尔值以 is 开头的驼峰形式, 例如 `var isGirl = true`; 207 | 208 | 9. this命名, 尽量以能表达当前实例意义的名称, 通用命名为self; 209 | 210 | ```javascript 211 | Pager.protoype.goto = function() { 212 | var pager = this, index = page.currentIndex + 1; 213 | setTimeout(function() { 214 | page.doRequest(index); 215 | }); 216 | }; 217 | function foo1(){ 218 | var self = this; 219 | setTimeout(function() { 220 | console.log(self.name); 221 | }, 1); 222 | } 223 | function foo2(name){ 224 | var self = this; 225 | self.name = name; 226 | foo1.call(self); 227 | } 228 | ``` 229 | 230 | 10. 在循环中, 尽量使用单字符变量名称, 例如: i, j, k, m, n; 231 | 232 | 11. 避免使用保留字或语言构造命名; 233 | 234 | ``` 235 | abstract boolean break byte case catch char class const 236 | continue default do double else extends false final finally 237 | float for function goto if implements import in instanceof 238 | int interface long native new null package private protected 239 | public return short assets super switch synchronized this 240 | throw throws transient true try var void while with 241 | ``` 242 | 243 | 12. 尽量保持所有名称最短, 但是一定要保证名称具有描述性; 244 | 245 | 13. js钩子命名必须以j开头的驼峰命名，并且不能此钩子不能有应用样式 246 | 247 | **(√)** 248 | 249 | ```html 250 | 251 | 252 | ``` 253 | 254 | **(╳)** 255 | 256 | ```html 257 | 258 | 259 | ``` 260 | 261 | ### 基本格式 262 | 263 | 1. 变量声明 264 | 265 | 变量使用var语句声明 266 | 267 | 变量使用前必须先声明 268 | 269 | 尽量减少使用全局变量，全局变量使用“g”开头 270 | 271 | 同一作用域块内的变量尽量使用一个“var”语句来声明 272 | 273 | **(√)** 274 | 275 | ```javascript 276 | var gName = ''; 277 | function foo() { 278 | var name = '...', 279 | sex = '...', 280 | age = ''; 281 | .... 282 | }; 283 | ``` 284 | 285 | **(╳)** 286 | 287 | ```javascript 288 | var name = ''; 289 | function foo() { 290 | var name = '...'; 291 | var sex = '...'; 292 | var age = ''; 293 | .... 294 | }; 295 | ``` 296 | 297 | 2. 字符串 298 | 299 | 用单引号包裹：创建字符串对象时，优先使用单引号，当你的字符串中包含html代码片段时将格外方便 300 | 301 | ```javascript 302 | var myString = '待我长发及腰时那还是人吗？ 不是，绝对是神！'; 303 | ``` 304 | 305 | 长字符串: 306 | 307 | 字符串太长需要换行时，不要使用转义符“\”来处理行尾的换行，请用字符串相加来替换 308 | 309 | 在编译时, 不能忽略行起始位置的空白字符; "\" 后的空白字符会产生奇怪的错误; 虽然大多数脚本引擎支持这种写法, 但它不是 ECMAScript 310 | 的标准规范. 311 | 312 | **(√)** 313 | 314 | ```javascript 315 | var myString = '带我长发及腰时'+ 316 | '那还是人吗？ '+ 317 | '不是，绝对是神！'; 318 | ``` 319 | 320 | **(╳)** 321 | 322 | ```javascript 323 | var myString = '带我长发及腰时 \ 324 | 那还是人吗？ \ 325 | 不是，绝对是神！ \'; 326 | ``` 327 | 328 | 3. 常量 329 | 330 | 常量的形式如: NAMES_LIKE_THIS, 即使用大写字符, 并用下划线分隔. 331 | 332 | ```javascript 333 | var SECONDS_IN_A_MINUTE = 60; 334 | ``` 335 | 336 | 4. 总是使用分号. 337 | 338 | 如果仅依靠语句间的隐式分隔, 有时会很麻烦. 你自己更能清楚哪里是语句的起止.而且有些情况下, 漏掉分号会很危险: 339 | 340 | 5. 函数声明 341 | 342 | 尽量不要使用全局函数 343 | 344 | 内部函数应该跟在 var 语句后面 345 | 346 | 不要在语句块内声明函数，如果确实需要，请使用函数表达式： 347 | 348 | 同一作用域块内的变量尽量使用一个“var”语句来声明 349 | 350 | **(√)** 351 | 352 | ```javascript 353 | // 但仍旧不建议在语句块内声明函数，即使是表达式的方式 354 | if (...) { 355 | var fooName = function() { 356 | ...; 357 | }; 358 | } 359 | ``` 360 | 361 | **(╳)** 362 | 363 | ```javascript 364 | if (...) { 365 | function fooName() { 366 | ...; 367 | } 368 | } 369 | ``` 370 | 371 | 6. 块内函数声明: 不要在块内声明一个函数. 372 | 373 | 不要写成. 374 | 375 | **(╳)** 376 | 377 | ```javascript 378 | if (x) { 379 | function foo() {} 380 | } 381 | ``` 382 | 383 | 虽然很多 JS 引擎都支持块内声明函数, 但它不属于 ECMAScript 规范 (见 ECMA-262, 第13和14条). 384 | 各个浏览器糟糕的实现相互不兼容, 有些也与未来 ECMAScript 草案相违背. ECMAScript 只允许在脚本的根语句或函数中声明函数. 385 | 如果确实需要在块中定义函数, 建议使用函数表达式来初始化变量: 386 | 387 | ```javascript 388 | if (x) { 389 | var foo = function() {} 390 | } 391 | ``` 392 | 393 | 7. 闭包，用起来要小心，因为如果处理不当很容易导致内存泄漏. 及时释放闭包变量引用, destory() 方法的设计. 394 | 395 | 8. eval(): 只用于解析序列化串 396 | 397 | eval() 会让程序执行的比较混乱, 当`eval()`里面包含用户输入的话就更加危险. 可以用其他更佳的, 更清晰, 更安全的方式写你的代码, 398 | 所以一般情况下请不要使用`eval()`. 当碰到一些需要解析序列化串的情况下, 使用`eval`很容易实现. 399 | 400 | 这是一个常用的`input`标签里面的属性 401 | 402 | ```html 403 | 404 | ``` 405 | 406 | 我们通常如此调用(基于jquery实现) 407 | 408 | ```javascript 409 | var user = $("#jUser").attr("data-user"); 410 | var user = eval('('+user+')'); 411 | console.log(user.name); 412 | ``` 413 | 414 | 9. with() {}: 不要使用 415 | 416 | 10. this: 仅在对象构造器, 方法, 闭包中使用. 417 | 418 | `this`的语义很特别. 有时它引用一个全局对象(大多数情况下), 调用者的作用域(使用 eval时), DOM 树中的节点(添加事件处理函数时), 419 | 新创建的对象(使用一个构造器), 或者其他对象(如果函数被`call()` 或`apply()`). 420 | 421 | 使用时很容易出错, 所以只有在下面两个情况时才能使用: 422 | 423 | 在构造器中 对象的方法(包括创建的闭包)中 424 | 425 | 11. for-in 循环: 只用于 object/map/hash 的遍历,对 Array 用 for-in 循环有时会出错. 因为它并不是从 0 到 length - 1 进行遍历, 而是所有出现在对象及其原型链的键值. 下面就是一些失败的使用案例: 426 | 427 | ```javascript 428 | // 本来只要输出0，1；结果输出了0,1,djune; 429 | var a = [0, 1]; 430 | a.buhu = 'djune'; 431 | for (var i in a) { 432 | console.log(a[i]); 433 | } 434 | ``` 435 | 436 | 12. 尽量不修改内置对象的原型 437 | 438 | 千万不要修改内置对象, 如`Object.prototype`和`Array.prototype` 的原型. 而修改内置对象, 如 439 | `Function.prototype`的原型, 虽然少危险些, 但仍会导致调试时的诡异现象. 所以也要避免修改其原型. 440 | 441 | 13. Object{}和 Array[] 442 | 443 | 使用“{}”替代“new Object()”来创建对象 444 | 445 | 使用“[]”替代“new Array()”来创建数组,使用 Array 构造器很容易因为传参不恰当导致错误 446 | 447 | ```javascript 448 | var obj = { 449 | a: 1, 450 | b: 2, 451 | 'say hello': 'hello' 452 | }; 453 | 454 | var arr = [1, 2, 'hello']; 455 | ``` 456 | 457 | 14. 进行对比操作时，尽量使用“===”和“!==” 458 | 459 | ### 注释 460 | 461 | 1. 类注释 462 | 463 | 每个类的定义都要附带一份注释, 描述类的功能和用法. 也需要说明构造器参数. 464 | 465 | 如果该类继承自其它类, 应该使用 @extends 标记. 466 | 467 | 如果该类是对接口的实现, 应该使用 @implements 标记. 468 | 469 | ```javascript 470 | /** 471 | * Class making something fun and easy. 472 | * @param {string} arg1 An argument that makes this more interesting. 473 | * @param {Array.} arg2 List of numbers to be processed. 474 | * @constructor 475 | * @extends {goog.Disposable} 476 | */ 477 | project.MyClass = function(arg1, arg2) { 478 | // ... 479 | }; 480 | goog.inherits(project.MyClass, goog.Disposable); 481 | ``` 482 | 483 | 2. 方法与函数的注释 484 | 485 | 提供参数的说明. 使用完整的句子, 并用第三人称来书写方法说明. 486 | 487 | ```javascript 488 | /** 489 | * Converts text to some completely different text. 490 | * @param {string} arg1 An argument that makes this more interesting. 491 | * @return {string} Some return value. 492 | */ 493 | MyClass.prototype.someMethod = function(arg1) { 494 | // ... 495 | }; 496 | 497 | /** 498 | * Operates on an instance of MyClass and returns something. 499 | * @param {project.MyClass} obj Instance of MyClass which leads to a long 500 | * comment that needs to be wrapped to two lines. 501 | * @return {boolean} Whether something occured. 502 | */ 503 | function PR_someMethod(obj) { 504 | // ... 505 | } 506 | ``` 507 | 508 | 对于一些简单的, 不带参数的 getters, 说明可以忽略. 509 | 510 | ```javascript 511 | /** 512 | * @return {Element} The element for the component. 513 | */ 514 | Component.prototype.getElement = function() { 515 | return this._element; 516 | }; 517 | ``` 518 | 519 | 3. 属性注释 520 | 521 | ```javascript 522 | /** 523 | * Maximum number of things per pane. 524 | * @type {number} 525 | */ 526 | project.MyClass.prototype.someProperty = 4; 527 | ``` 528 | 529 | 4. 类型转换的注释 530 | 531 | 有时, 类型检查不能很准确地推断出表达式的类型, 所以应该给它添加类型标记注释来明确之, 并且必须在表达式和类型标签外面包裹括号. 532 | 533 | ```javascript 534 | function setFoo(x) (/* @type {Number} */ x) { ... } 535 | ``` 536 | 537 | 5. 枚举 538 | 539 | ```javascript 540 | /** 541 | * Enum for tri-state values. 542 | * @enum {number} 543 | */ 544 | project.TriState = { 545 | TRUE: 1, 546 | FALSE: -1, 547 | MAYBE: 0 548 | }; 549 | ``` 550 | 551 | 注意一下, 枚举也具有有效类型, 所以可以当成参数类型来用. 552 | 553 | ```javascript 554 | /** 555 | * Sets project state. 556 | * @param {project.TriState} state New project state. 557 | */ 558 | project.setState = function(state) { 559 | // ... 560 | }; 561 | ``` 562 | 563 | 6. JSDoc 缩进 564 | 565 | 如果你在 @param, @return, @supported, @this 或 @deprecated 中断行, 需要像在代码中一样, 566 | 使用4个空格作为一个缩进层次. 567 | 568 | ```javascript 569 | /** 570 | * Illustrates line wrapping for long param/return descriptions. 571 | * @param {string} foo This is a param with a description too long to fit in 572 | * one line. 573 | * @return {number} This returns something that has a description too long to 574 | * fit in one line. 575 | */ 576 | project.MyClass.prototype.method = function(foo) { 577 | return 5; 578 | }; 579 | ``` 580 | 581 | 不要在 @fileoverview 标记中进行缩进. 582 | 583 | 虽然不建议, 但也可对说明文字进行适当的排版对齐. 不过, 这样带来一些负面影响, 就是当你每次修改变量名时, 都得重新排版说明文字以保持和变量名对齐. 584 | 585 | ```javascript 586 | /** 587 | * This is NOT the preferred indentation method. 588 | * @param {string} foo This is a param with a description too long to fit in 589 | * one line. 590 | * @return {number} This returns something that has a description too long to 591 | * fit in one line. 592 | */ 593 | project.MyClass.prototype.method = function(foo) { 594 | return 5; 595 | }; 596 | ``` 597 | 598 | 7. 例子注释: 599 | 600 | ```javascript 601 | /** 602 | * @example 603 | * var bleeper = makeBleep(3); 604 | * bleeper.flop(); 605 | */ 606 | ``` 607 | 608 | 8. Typedefs: 609 | 610 | 有时类型会很复杂. 比如下面的函数, 接收 Element 参数 611 | 612 | ```javascript 613 | /** 614 | * @param {string} tagName 615 | * @param {(string|Element|Text|Array)} contents 616 | * @return {Element} 617 | */ 618 | goog.createElement = function(tagName, contents) { 619 | ... 620 | }; 621 | ``` 622 | 623 | 你可以使用 @typedef 标记来定义个常用的类型表达式 624 | 625 | ```javascript 626 | /** @typedef {(string|Element|Text|Array)} */ 627 | goog.ElementContent; 628 | 629 | /** 630 | * @param {string} tagName 631 | * @param {goog.ElementContent} contents 632 | * @return {Element} 633 | */ 634 | goog.createElement = function(tagName, contents) { 635 | ... 636 | }; 637 | ``` 638 | 639 | ### 接口 640 | 641 | 1. 单一职能原则: 一个函数或者一个类只应该负责一件事, 这可以为我们后期的维护以及测试节省很多的成本. 642 | 643 | 2. 接口分离原则. 644 | 645 | 跟单一职能原则联系比较紧密, 遵循单一职能原则, 将功能进行拆分. 646 | 647 | 比如: dojo.style 方法, 它本身包含了 get 和 set 两个接口, 应该将其拆分, 如 YUI.DOM.setStyle, 648 | YUI.DOM.getStyle. 649 | 650 | 3. 不要过多的干预使用者: 651 | 652 | 我们不应该想当然的认为使用者应该怎样使用, 而应与实践相结合提供接口. 653 | 654 | 比如: 异步请求的回调函数, 我们应该为使用者提供什么样的参数? 添加什么样的作用域? 这个应该由用户来决定, 而不是由我们来决定. 655 | 656 | ### 数据 657 | 658 | 1. 返回的数据以标准的 JSON 格式来书写. 659 | 660 | ```javascript 661 | { 662 | "data": { 663 | "name": "djune", 664 | "age": 30, 665 | "other": [1, 2] 666 | }, 667 | "result": 405, 668 | "message": "系统错误, 请稍候再试" 669 | } 670 | ``` 671 | 672 | ### 参考文档 673 | 674 | 1. [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) 675 | 676 | -------------------------------------------------------------------------------- /js.md: -------------------------------------------------------------------------------- 1 | JS代码规范一（语法&格式篇） 2 | ======================= 3 | 4 | ## 基本原则 5 | 6 | 1. 所有的代码都要符合可维护性原则 —— 简单、便于阅读。 7 | 8 | 2. 部分编码原则是与性能原则相悖的, 如果遇到这种情况, 请优先遵守语法规范。 (注: 如果确实有不确定的 9 | 情况或者性能影响很大, 请联系你的主管或者我, 我们共同来商量最佳的解决方案) 10 | 11 | ## 文件属性 12 | 13 | 1. 所有 js 文件均以 UTF-8 作为默认编码, 不能含有 BOM(Byte Order Mark, 是 UTF 编码方案里用于标识编 14 | 码的标准标记)头。 15 | 16 | 2. 文件命名, 必须是有意义的文件名; 建议使用英文或数字组合; 文件名中严禁出现中文; 多个英文单词请用驼峰 17 | 命名法，如：historyManager.js 18 | 19 | 3. 请不要在文件名后加数字, 来实现相同功能的多个版本, 如:drag1.js、drag2.js、drag3.js是禁止的。 20 | 21 | 4. 上线到公网的文件名及文件路径, 避免一些特殊字符, 如:ad、64, 免被某些浏览器或者防火墙屏蔽。 22 | 23 | 5. 所有上线代码及源代码必须纳入到 git 管理, 避免离职或者变动岗位, 造成代码丢失后期不可维护。 24 | 25 | 6. (建议) 不使用(汉语拼音/拼音英文数字组合/不规范的英文缩写)作为文件名。例如: jubao.js, MseEvtHdlr.js, mendian-address.js。 26 | 27 | 7. (建议) 尽量使用英文小写作为文件名, 免某些系统不区分文件名大小写。 28 | 29 | 8. (建议) 文件的目录规划及归属, 遵守各项目的具体规定。如果是新项目, 请参照主站的目录结构管理办法。 30 | 31 | 32 | ## 代码格式化 33 | 34 | ### 换行原则 35 | 36 | 1. (建议)每行代码不要超过 80 字符。当一条语句一行写不下时, 折行。 37 | 38 | 2. 折行位置:在运算符号后面换行。在运算符后换行可以减少因为复制粘贴产生的错误被分号掩盖的几率。 39 | 40 | 3. 每行代码只允许一个有效语句, 止为了减少代码行数, 多个语句放在一行代码中。 41 | 42 | 4. 多行字符串使用 + 拼接形式换行(打包工具会优化它, 用担心性能问题), 不要使用 \ 拼接(它不是 ECMA 的 43 | 标准规范)。 例如, 下面的代码是错误的(在编译时, 不能忽略行起始位置的空白字符): 44 | 45 | ```javascript 46 | var wrongString = 'The string is so long, \ 47 | we need split \ 48 | in multi-line.'; 49 | ``` 50 | 51 | 正解处理长串: 52 | 53 | ```javascript 54 | var wrongString = '
' + 55 | '
title text
' + 56 | '

some description text

' + 57 | '
'; 58 | ``` 59 | 60 | 5. "{}" (大括号)前面不需要换行, 例如函数定义、if 语句、while 语句、switch 等。 61 | 62 | ### 缩进原则 63 | 64 | 1. 代码需要保持适当的缩进。 65 | 66 | 2. 缩进请使用Tab缩进（1 tab = 4 spaces，可以在编辑器设置）空格缩进显示以兼容不同IDE, 不同操作平台的差异。 67 | 68 | 3. 复合语句(被包含在 “{}”(大括号)的语句序列, 包括函数定义)需要保持缩进。 69 | 70 | 4. 初始化数组和 JSON 对象时, 如果初始值较长, 需要换行并保持缩进。 71 | 72 | 5. 函数调用时, 如果传递的是匿名函数, 匿名函数的内容需要换行并保持缩进, 让匿名函数更加易读。 73 | 74 | ### 空格 75 | 76 | 需要保留空格的情况: 77 | 78 | 1. 各种运算符, 包括数值操作符(例如:+、-、*、/、%等)、位运算符、比较运算符、三元运算符、复合赋值运算 79 | 符、赋值运算符前后, 保留一个空格。 “.”(点) 和“(”(左括号)和 “[”(左方括号)例外。 80 | 81 | 2. for 循环条件中, 分号后保留一个空格。 82 | 83 | 3. 所有的逗号后保留一个空格, 例如: 变量声明语句、数组值、JSON 对象值、函数参数值等等。 84 | 85 | 4. 冒号前后都加空格。 86 | 87 | 不需要保留空格的情况: 88 | 89 | 1. 一元操作符与其操作数之间不应有空格, 如: i++。除非操作符是个单词, 例如: typeof window。 90 | 91 | 2. 点号前后不要出现空格。 92 | 93 | 3. 空行不要有空格, 尾不要有空格。 94 | 95 | 4. 空对象和数组不需要填入空格。[], {} 96 | 97 | 5. 函数调用的括号“(”前, 要出现空格。 98 | 99 | 6. 注释符前后要有空格。 100 | 101 | ### 空行 102 | 103 | 1. 逻辑上独立的代码块, 对象方法，函数前后使用空行分隔。尽量使用空行将逻辑相关的代码块分割开, 以提高程序的可读性。 104 | 105 | 2. 连续空行数控制在 1 ~ 3 行（根据代码块层次来控制空行数）。 106 | 107 | 3. (建议) 文件末尾留 1 ~ 2 个空行。 108 | 109 | ### 语句行 110 | 111 | 1. 语句必须以分号作为结束符, 不能忽略分号。除了 for, function, if, switch, try, while 结束的花括号后无需分号。 112 | 113 | > js 的语句以分号作为结束符, 除非可以非常准确推断某结束位置才会省略分号。上面的几个例子产出错误, 114 | > 均是在语句中声明了函数/对象/数组直接量, 但闭括号 ( '}' 或 ']' ) 并不足以表示该语句的结束。 115 | > **在js 中, 只有当语句后的下一个符号是后缀或括号运算符时, 才会认为该语句的结束** 116 | 117 | 有的情况下, 漏掉分号会有大麻烦, 例如： 118 | 119 | \# 情况一: 语句会解释成, 一个函数带一匿名函数作为参数而被调用, 返回 42 后, 又一次被调用, 这就导致了错误 120 | 121 | ```javascript 122 | MyClass.prototype.myMethod = function() { 123 | return 42; 124 | } // 缺分号 125 | 126 | (function() { 127 | // Some initialization code wrapped in a function to create a scope for locals. 128 | })(); 129 | ``` 130 | 131 | \# 情况二: 在运行时遇到 'no such property in undefined' 错误, 原因是代码试图这样 `x[ffVersion][isIE]()` 执行 132 | 133 | ```javascript 134 | var x = { 135 | 'i': 1, 136 | 'j': 2 137 | } // 缺分号 138 | [ffVersion][isIE](); 139 | ``` 140 | 141 | \# 情况三: 当 resultOfOperation() 返回非 0 时, 就会调用 die, 其结果也会赋给 arrResult 142 | 143 | ```javascript 144 | var arrResult = ['1', '2', '3'] // 缺分号 145 | 146 | // conditional execution a la bash 147 | -1 === resultOfOperation() || die(); 148 | ``` 149 | 150 | 2. 对于复合语句, if, for, while, do, switch, try ... catch 等代码体, 数定义的函数体, 对象的定义等 151 | 都需要放在花括号 “{}” 里面。 152 | 153 | - “{” 应在行末, 标志代码块的开始。 154 | - “}” 应在一行开头, 标志代码块的结束, 同时需和“{”所在行的开始对齐, 以表明是一个完整的复合语句。这 155 | 样可极大地提高代码的可阅读性, 控制逻辑能清晰地表现出来。 156 | - 被包含的代码段应该保持缩进。 157 | - 即使被包含的代码段只有一句, 也应该用“{}”包含。尽管不用花括号代码也不会错, 但如若需要增加语句的 158 | 话, 则较容易因花括号遗漏而引起的编译错误或逻辑错误。 159 | 160 | 3. return 语句在使用时也需慎重, 如果用表达式的执行作为返回值, 请把表达式和 return 放在同一行中, 以 161 | 免换行符被误解析为语句的结束而引起返回错误。 例如: 162 | 163 | ```javascript 164 | function unexpectedReturn() { 165 | var valueA = 1, valueB = 2; 166 | return 167 | valueA + valueB; 168 | } 169 | console.log(unexpectedReturn()); // ouput: undefined 170 | ``` 171 | 172 | ### 代码格式示例 173 | 174 | ```javascript 175 | function walk(holder, key) { 176 | 177 | // The walk method is used to recursively walk the resulting structure so 178 | // that modifications can be made. 179 | 180 | var k, v, value = holder[key]; 181 | if (value && typeof value === 'object') { 182 | for (k in value) { 183 | if (Object.prototype.hasOwnProperty.call(value, k)) { 184 | v = walk(value, k); 185 | if (v !== undefined) { 186 | value[k] = v; 187 | } else { 188 | delete value[k]; 189 | } 190 | } 191 | } 192 | } 193 | 194 | return reviver.call(holder, key, value); 195 | } 196 | ``` 197 | 198 | ## 代码注释 199 | 200 | > 注释，给以后需要理解你的代码的人(或许就是你自己)留下信息是非常有用的。注释应该和它们所注释的代 201 | > 码一样是书写良好且清晰明了。 避免冗长或者情绪化的注释。 202 | > 203 | 204 | ### 文件头部注释 205 | 206 | 1. 所有 js, css 文件头部, 必须有文件注释, 用于简要说明: 207 | 文件的主要功能(含模块信息)、作者(含作者邮箱)、版权等信息。 文件头注释格式如下: 208 | 209 | ```javascript 210 | /** 211 | * Basic lang utilities functions ... 212 | * 213 | * @author Allex Wang 214 | * @module clib/lang 215 | */ 216 | define('lang', function(require, exports, module) { 217 | ... 218 | }); 219 | ``` 220 | 221 | 2. 注释需要简洁明了, 从已解决的方案到未开发的功能, 注释必须与代码相关。 222 | 223 | 3. **及时地更新注释, 错误的注释会让程序更加难以阅读和理解。** 224 | 225 | 4. (建议) 公用模块文件，请添加范例代码。 226 | 227 | 5. (建议) 所有的注释请尽量使用英文(跨平台编辑)。 228 | 229 | 6. (建议) // 用作代码行注释, /* ... */ 形式用作对整个代码段的注销,或较正式的声明中, 230 | 如函数参数、功能、文件功能等的描述中。 231 | 232 | 7. (建议) 如果可能, 文件头部的注释, 还要包含文件依赖关系、版本号、第三方代码来源url信息等。 233 | 234 | ### 代码内部注释 235 | 236 | 1. 大量的变量声明后面须添加注释, 说明变量用途。 237 | 238 | 2. 每个对外暴露的 API 方法, 需要加注释说明其用途。注释需要包括: 函数的用途、参数、返回值等, 此三项为强制要求。 239 | 240 | 3. 生涩的代码就没有必要添加注释了, 首先您需要重写它们。 241 | 242 | 4. 注释没有必要每行都添加, 只在重要的逻辑、或者较复杂的逻辑处, 增加必要的注释。 243 | 244 | 5. 通俗易懂的语句压根儿不需要添加注释，合理的变量命名其实是最直接的注释。 245 | 246 | 6. 删除注释掉的代码块, 只要提交了 git, 代码可以随时找回, 无需保留被注释的废弃代码。 247 | 248 | ### 模块注释规范 249 | 250 | 1. 类注释 251 | 252 | 每个类的定义都要附带一份注释, 描述类的功能和用法. 也需要说明构造器参数. 如果该类继承自其它类, 253 | 应该使用 @extends 标记. 如果该类是对接口的实现, 应该使用 @implements 标记. 254 | 255 | ```javascript 256 | /** 257 | * Class making something fun and easy. 258 | * @param {String} arg1 An argument that makes this more interesting. 259 | * @param {Array} arg2 List of numbers to be processed. 260 | * @constructor 261 | * @extends {goog.Disposable} 262 | */ 263 | project.MyClass = function(arg1, arg2) { 264 | // ... 265 | }; 266 | goog.inherits(project.MyClass, goog.Disposable); 267 | ``` 268 | 269 | 2. 方法与函数的注释 270 | 271 | 提供参数的说明. 使用完整的句子, 并用第三人称来书写方法说明. 272 | 273 | ```javascript 274 | /** 275 | * Converts text to some completely different text. 276 | * @param {String} arg1 An argument that makes this more interesting. 277 | * @return {String} Some return value. 278 | */ 279 | MyClass.prototype.someMethod = function(arg1) { 280 | // ... 281 | }; 282 | 283 | /** 284 | * Operates on an instance of MyClass and returns something. 285 | * @param {project.MyClass} obj Instance of MyClass which leads to a long 286 | * comment that needs to be wrapped to two lines. 287 | * @return {boolean} Whether something occured. 288 | */ 289 | function PR_someMethod(obj) { 290 | // ... 291 | } 292 | ``` 293 | 294 | 对于一些简单的, 不带参数的 getters, 说明可以忽略. 295 | 296 | ```javascript 297 | /** 298 | * @return {Element} The element for the component. 299 | */ 300 | Component.prototype.getElement = function() { 301 | return this._element; 302 | }; 303 | ``` 304 | 305 | 3. 属性注释 306 | 307 | ```javascript 308 | /** 309 | * Maximum number of things per pane. 310 | * @type {Number} 311 | */ 312 | project.MyClass.prototype.someProperty = 4; 313 | ``` 314 | 315 | 4. 类型转换的注释 316 | 317 | 有时, 类型检查不能很准确地推断出表达式的类型, 318 | 所以应该给它添加类型标记注释来明确之, 并且必须在表达式和类型标签外面包裹括号. 319 | 320 | ```javascript 321 | function setFoo(x) (/* @type {Number} */ x) { ... } 322 | ``` 323 | 324 | 5. 枚举 325 | 326 | ```javascript 327 | /** 328 | * Enum for tri-state values. 329 | * @enum {Number} 330 | */ 331 | project.TriState = { 332 | TRUE: 1, 333 | FALSE: -1, 334 | MAYBE: 0 335 | }; 336 | ``` 337 | 338 | 注意一下, 枚举也具有有效类型, 所以可以当成参数类型来用. 339 | 340 | ```javascript 341 | /** 342 | * Sets project state. 343 | * @param {project.TriState} state New project state. 344 | */ 345 | project.setState = function(state) { 346 | // ... 347 | }; 348 | ``` 349 | 350 | 6. JSDoc 缩进 351 | 352 | 如果你在 @param, @return, @supported, @this 或 @deprecated 中断行, 需要像在代码中一样, 353 | 使用4个空格作为一个缩进层次. 354 | 355 | ```javascript 356 | /** 357 | * Illustrates line wrapping for long param/return descriptions. 358 | * @param {String} foo This is a param with a description too long to fit in 359 | * one line. 360 | * @return {Number} This returns something that has a description too long to 361 | * fit in one line. 362 | */ 363 | project.MyClass.prototype.method = function(foo) { 364 | return 5; 365 | }; 366 | ``` 367 | 368 | 7. 模块使用范例注释: 369 | 370 | ```javascript 371 | /** 372 | * @example 373 | * var bleeper = makeBleep(3); 374 | * bleeper.flop(); 375 | */ 376 | ``` 377 | 378 | 8. Typedefs: 379 | 380 | 有时类型会很复杂. 比如下面的函数, 接收 Element 参数 381 | 382 | ```javascript 383 | /** 384 | * @param {String} tagName 385 | * @param {String|Element|Text|Array} contents 386 | * @return {Element} 387 | */ 388 | goog.createElement = function(tagName, contents) { 389 | ... 390 | }; 391 | ``` 392 | 393 | 你可以使用 @typedef 标记来定义个常用的类型表达式 394 | 395 | ```javascript 396 | /** @typedef {String|Element|Text|Array} */ 397 | goog.ElementContent; 398 | 399 | /** 400 | * @param {String} tagName 401 | * @param {goog.ElementContent} contents 402 | * @return {Element} 403 | */ 404 | goog.createElement = function(tagName, contents) { 405 | ... 406 | }; 407 | ``` 408 | 409 | 410 | ## 命名规范 411 | 412 | ### 变量命名 413 | 414 | 1. 声明变量必须加上关键字 var, 避免使用未声明的变量。 415 | 416 | 当你没有写 var, 变量就会暴露在全局上下文中, 这样很可能会和现有变量冲突。另外, 如果没有加上, 417 | 很难明确该变量的作用域是什么, 变量也很可能看起来像在局部作用域中, 但实际上, 418 | 已经泄漏到 window 中, 所以务必用var 去声明变量 (批量定义变量一定要注意结束符逗号 "," 不能漏掉)。 419 | 420 | 2. 精简短小, 见名知意。变量名使用英文大小写和数字命名, 使用**驼峰命名**规则, 例如: getStyle、addEvent。 421 | 422 | 3. 变量的命名, 不得使用 js 保留字。 js 保留字列表: 423 | ``` 424 | abstract boolean break byte case catch char class const continue default do 425 | double else extends false final finally float for function goto if implements 426 | import in instanceof int interface long native new null package private 427 | protected public return short static super switch synchronized this throw throws 428 | transient true try var void while with 429 | ``` 430 | 431 | 4. 不能使用没有任何意义的变量名 (循环的指针变量除外, 见下文 15), 例如: var a = 1; var xx = true; 432 | 避免无意义的简写, 例如: MouseEventHandler 写作 MseEvtHdlr。 433 | 434 | 5. 常量、枚举量使用全大写作为变量名, 多个单词之间用下划线(_)分隔。例如: NAME_LIKE_THIS。 435 | 436 | 6. 除非必要, 请不要使用全局变量, 避免出现全局变量污染。(特殊情况需要经项目前端技术负责人审批) 437 | 438 | 7. 函数内部的变量, 请在函数定义的头部声明。出于避免造成不必要消耗的考虑, 439 | 复杂类型的变量可以只声明不赋值。唯一特殊的情况, 是 for 循环的下标变量, 440 | 可以使用的时候实时声明。 441 | 442 | 8. 函数内保存 DOM 引用和定时器的变量, 使用完后必须显式销毁, 443 | 从而可以及时的执行内存回收。例如设置该变量为 null; 定时器变量销毁, 请执行 clearInterval 或者 clearTimeout。 444 | 445 | 9. 函数内两次以上使用到的同一全局变量或者外部对象, 定义为一个局部变量, 446 | 以保证程序性能最优, 例如: var doc = document, win = window; 447 | 448 | 10. 私有化变量和方法名应该以下划线 `_` 开头 (仅限有跨作用域的变量或方法等). 449 | 450 | 11. (建议) 不在变量名前加下划线 `_` 表示私有变量。 451 | 452 | 12. (建议) `this` 命名, 尽量以能表达当前实例意义的名称, 通用命名为 `self`; 453 | 454 | ```javascript 455 | Pager.protoype.goto = function() { 456 | var pager = this, index = page.currentIndex + 1; 457 | setTimeout(function() { page.doRequest(index); }); 458 | }; 459 | function foo1(){ 460 | var self = this; 461 | setTimeout(function() { console.log(self.name); }, 1); 462 | } 463 | function foo2(name){ 464 | var self = this; 465 | self.name = name; 466 | foo1.call(self); 467 | } 468 | ``` 469 | 470 | 13. (建议) 布尔变量、返回值为 boolean 的函数/方法前可以添加前缀 is/has/can/should。 471 | 472 | 14. (建议) 避免产生歧义的命名, 例如: isNotError, isNotFound。 473 | 474 | 15. (建议) 表示错误的变量, 建 for 循环中的临时重复变量建议以 i, j, k, m, n ... 命名。 475 | 476 | 16. (建议) 多个变量声明时, 适当换行表示, 参照 var 关键字位置保持缩进。 477 | 478 | ### 自定义对象(类)命名 479 | 480 | 1. 自定义对象(类) 481 | 482 | 命名, 每个单词首字母均需要大写, 例如: ModuleDialog。 483 | 内部对象  (不会导出的构造器或静态对象), 使用 _ 开头来定义, 例如: _BaseTab; 484 | 485 | 2. 对象的方法 486 | 487 | 驼峰命名方式, 必须是动词或者动词短语, 例如: obj.getSomeValue()。 488 | 函数的参数个数不固定时, 应该添加最后一个取名为 `args` 的参数. 489 | 可选和可变参数应该在 @param (Optional) 标记中说明清楚. 490 | 491 | 492 | ## 变量赋值及定义 493 | 494 | 1. 下面类型的对象不建议用 new 构造,而是使用直接量赋值: 495 | new Number, new String, new Boolean, new Object (用{}代替), new Array(用[]代替)。 496 | 497 | 2. 禁止数组或者 JSON 中出现冗余的逗号, IE 下会抛出语法错误。 498 | 例如: var testArray = [1,2,3,]; 或者 var jsonExample = { 'key1': value1, 'key2': value2,}; 499 | 500 | 3. 禁止污染内置对象的原型, 例如 Object.prototye、Array.prototype、Function.prototype。 501 | 502 | 4. 不要使用连等进行赋值。例如: 503 | 504 | ```javascript 505 | (function () { 506 | var numberA = numberB = 3; // 这里产生的 numberB 是全局变量 507 | })(); 508 | alert(numberB); // return 3 509 | ``` 510 | 511 | 5. 如果一个赋值语句是用函数和对象来赋值, 可能需要跨多行, 一定切记要在赋值语句末加上分号。 512 | 513 | 6. (建议) 数组和对象初始化时, 如果初始值不是很长, 尽量保持写在单行上; JSON 514 | 对象中, 比较长的 key/value, 不必为了美观以冒号对齐。 515 | 516 | 7. (建议) 没必要在每次声明变量时就将其初始化, 但使用变量之前一定要确保变量已经初始化。 517 | 518 | 8. (建议) 字符串变量赋值的时候, 优先使用单引号, 而不是双引号, 尤其是你创建的是 HTML 字符串。 519 | 520 | ```javascript 521 | var s = 'hello world'; 522 | var html = '
'; 523 | console.log(s + ', my name is cat'); 524 | console.log(html); 525 | ``` 526 | 527 | ## 条件语句/循环 528 | 529 | ### 条件语句 530 | 531 | 1. if 语句, 即使只有单行, 也要用花括号括起来, 例如: 532 | 533 | ```javascript 534 | // (错误) 535 | if (condition) statement; 536 | 537 | // (正确) 538 | if (condition) { 539 | statement; 540 | } 541 | ``` 542 | 543 | 2. 使用三元运算符, 替代单一的 if else 语句。例如: 544 | 545 | ```javascript 546 | if (val != 0) { 547 | return foo(); 548 | } else { 549 | return bar(); 550 | } 551 | 552 | // 可以写作: 553 | return val ? foo() : bar(); 554 | ``` 555 | 556 | 3. if/else/while/for 条件表达式必须有小括号, 且自占一行。 557 | 558 | 4. (建议) 利用 && 和 || 短路来简化代码: 559 | 560 | ```javascript 561 | function foo(opt_win) { 562 | var win; 563 | if (opt_win) { 564 | win = opt_win; 565 | } else { 566 | win = window; 567 | } 568 | // ... 569 | } 570 | 571 | // 可以写作: 572 | function foo(opt_win) { 573 | var win = opt_win || window; 574 | // ... 575 | } 576 | ``` 577 | 578 | && 短路: 579 | 580 | ```javascript 581 | if (node) { 582 | if (node.kids) { 583 | if (node.kids[index]) { 584 | foo(node.kids[index]); 585 | } 586 | } 587 | } 588 | 589 | // 可以写作: 590 | if (node && node.kids && node.kids[index]) { 591 | foo(node.kids[index]); 592 | } 593 | 594 | // 或者 595 | var kid = node && node.kids && node.kids[index]; 596 | if (kid) { 597 | foo(kid); 598 | } 599 | ``` 600 | 601 | 5. (建议) 使用严格的条件判断符。用 === 代替 ==, 用!== 代替 !=。 602 | 603 | ### 循环 604 | 605 | 1. 尽量避免 for-in 循环, 只用于 object/hash 的遍历, 数组的遍历使用 for 循环。 606 | 607 | 2. for-in 循环体中必须用 hasOwnProperty 方法检查成员是否为自身成员, 避免来自原型链上的污染。 608 | 609 | 3. 避免在 if 和 while 语句的条件部分进行赋值。例如: 610 | 611 | ```javascript 612 | // (错误) 613 | var i = 10; 614 | while (i = i - 2) { 615 | statement; 616 | } 617 | // 应该写作: (正确) 618 | var i = 10; 619 | while (i > 0) { 620 | statement; 621 | i = i - 2; 622 | } 623 | ``` 624 | 625 | ## 函数/闭包 626 | 627 | ### 函数 628 | 629 | 1. 一个函数的内容不宜太长, 较复杂的逻辑, 需拆分成多个函数来实现, 使代码逻辑清晰。 630 | 631 | 2. 对外暴露的 API 型函数, 尽量保持输入输出的稳定, 减小调用者修改代码的成本和风险。 632 | 633 | 3. 可以嵌套函数, 用于减少重复代码, 隐藏一些局部函数等, 但不要在块内声明一个函数。因为 JS 634 | 并不支持块级作用域, 虽然很多 js 引擎都支持块内声明函数, 但它不属于 ECMAScript 规范 (见 ECMA-262, 第 635 | 13 和 14 条)。各个浏览器糟糕的实现相互不兼容, 有些也与未来 ECMAScript 草案相违背。ECMAScript 只允 636 | 许在脚本的根语句或函数中声明函数. 如果确实需要在块中定义函数, 建议使用函数表达式来初始化变量。例如: 637 | 638 | ```javascript 639 | // (错误) 640 | if (x){ 641 | function foo () {} 642 | } 643 | // 应该写作: (正确) 644 | if (x) { 645 | var foo = function () {}; 646 | } 647 | ``` 648 | 649 | 4. 有很多方法可以给构造器添加方法或成员, 我们更倾向于使用如下的形式: 650 | 651 | ```javascript 652 | Foo.prototype.bar = function() { 653 | /* ... */ 654 | }; 655 | ``` 656 | 657 | 5. 仅在对象构造器、方法、闭包中使用 `this` 对象, 避免 this 乱用出现的指代不明。 `this` 658 | 的语义很特别。有时它引用一个全局对象(大多数情况下), 调用者的作用域(使用 eval 时), DOM 659 | 树中的节点(添加事件处理函数时), 新创建的对象(使用一个构造器), 或者其他对象(如果函数被 call() 或 660 | apply())。 661 | 662 | 6. 引用对象成员用 obj.propName 代替 obj['propName'], 除非属性名是变量或是接口数据的引用。 663 | 664 | ### 函数参数 665 | 666 | 1. 函数的必选参数, 必须检查是否传递了合法的参数, 避免参数类型不对带来的异常。 667 | 668 | 2. 函数参数写在同一行上。如果一行超过 80 字符, 请按照缩进原则进行换行, 并保持适当缩进。 669 | 670 | ### 闭包 671 | 672 | 1. 由于闭包保留了一个指向它封闭作用于的指针, 所以在给 DOM 元素附加闭包时候, 要避免产生循环引用, 从而导致内存泄露。例如: 673 | 674 | ```javascript 675 | // (错误) 676 | function foo(element, a, b) { 677 | element.onclick = function () { /* 使用变量 a 和 b */ } 678 | } 679 | ``` 680 | 681 | 这里, 即使没有使用 element, 闭包也保留了 element, a 和 b 的引用, 由于 element 682 | 也保留了对闭包的引用, 这就产生了循环引用, 这就不能被 GC 回收. 这种情况下, 可将代码重构为: 683 | 684 | ```javascript 685 | function foo(element, a, b) { 686 | element.onclick = handle(a, b); 687 | } 688 | function handle(a, b) { 689 | return function() { /* 使用变量 a 和 b */ }; 690 | } 691 | ``` 692 | 693 | 2. 通常我们需要给模块提供 destroy 接口方法，在这个方法做好模块的善后工作，防止内存开销过大, 如。 694 | 695 | ```javascript 696 | /** 697 | * var loader = ImageLoader(...); 698 | * loader.load(); 699 | * loader.destroy(); 700 | */ 701 | var ImageLoader = functiono(images) { 702 | // binding onload event etc,. 703 | ... 704 | 705 | return { 706 | load: function() { 707 | ... 708 | }, 709 | destory: function() { 710 | images.forEach(functiono() { 711 | img.onload = null; 712 | img = null; 713 | }); 714 | images = null; 715 | } 716 | }; 717 | }; 718 | ``` 719 | 720 | ## 其他 721 | 722 | 1. 禁止使用 void、eval, with, 只在将 ajax 响应的文本解析为 json 时使用 eval()。 723 | 724 | 2. 不要使用 function 构造器。 725 | 726 | 3. 不要滥用括号, 在必要的时候使用它。 727 | 728 | 对于一元操作符(如 delete, typeof 和 void ), 或是在某些关键词(如 return, throw, case, new )之后, 不要使用括号。 729 | 730 | 4. 代码中调试用的 alert、console.log、console.dir、debugger 等代码, 在提交到 git 之前, 必须完全清理掉。 731 | 732 | 5. 尽量使用严格模式 733 | 734 | ```javascript 735 | 'use strict'; 736 | ``` 737 | 738 | 6. 模块代码AMD方式组织。define(), 模块依赖用 commonjs require() 739 | 740 | ```javascript 741 | define(function(require, exports, module) { 742 | 'use strict'; 743 | 744 | var _ = require('underscore'); 745 | 746 | var queue = []; 747 | 748 | var initModule = function() { 749 | _.each(queue, function(v, i) { 750 | // do something 751 | }); 752 | }; 753 | 754 | module.exports = { 755 | init: initModule 756 | }; 757 | }); 758 | ``` 759 | 760 | ## 参考 761 | 762 | 1. [js代码规范(base)](./js-base.md) 763 | 2. [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) 764 | 765 | -------------------------------------------------------------------------------- /json-api.md: -------------------------------------------------------------------------------- 1 | Front-End JSON(P) API Specification 2 | =================================== 3 | 4 | ## HTTP 接口返回格式 (Scheme) 5 | 6 | 接口状态码 (HTTP Code): => 200 7 | 8 | 接口输出 (Response): JSON => {error, msg, data, ver} 9 | 10 | ```javascript 11 | { 12 | "error": ${error_code}, // {String} api status code, defaults to '0', 13 | "msg": ${api_status_message}, // {String} api status message 14 | "data": ${api_data}, // {Mixed} Generic type for api data response, can be null, empty "", 0, {}, [] etc,. 15 | "ver": ${api_version} // {String} version identify, defaults to '1.0' 16 | } 17 | ``` 18 | 19 | **`error` 字段状态码定义** 20 | 21 | * 状态码为字符串类型 (String). eg. "0" (注意有双引号) 22 | * 0 ~ 100 为系统保留状态 23 | * "-100" - session timeout (登陆验证) 24 | * "0" - api success (default value) 25 | * "1" - internal error (后端接口未知错误) 26 | * "2" - redirect url (页面跳转响应) 27 | * **业务状态码建议使用 100以后的数值 (>100)**. eg: 0x101F, 0x1013 28 | 29 | 示例: 30 | 31 | ```javascripton 32 | {"error": "2", "msg": "user session timeout", "data": "http://login.yunhou.com/login.php?t", "ver": "1.0"} 33 | ``` 34 | 35 | ## 其他 36 | 37 | * 本规范适用所有前后端数据接口规范，json, jsonp 38 | * 接口输出**必须是规范的 JSON 字符串**, 拒绝手动拼接 json 字符串返回，请参考 39 | -------------------------------------------------------------------------------- /文件命名规范.md: -------------------------------------------------------------------------------- 1 | # 文件及文件夹命名规范 2 | 3 | ### **1. 基本规则** 4 | 5 | **1) 文件夹需要有清晰的目录结构, 相同类型文件使用文件夹分层次** 6 | 7 | - view 8 | - index.html 9 | - product.html 10 | - factory.html 11 | - css 12 | - index.css 13 | - base.css 14 | - product.css 15 | - factory.css 16 | - js 17 | - index.js 18 | - product.js 19 | - factory.js 20 | 21 | 22 | **2) 文件和文件夹名称需要使用统一的英文翻译** 23 | 24 | - 例: 工具类文件, `tools`, `utils`选用其一(推荐使用`utils.`) 25 | 26 | 27 | 28 | 29 | 30 | 31 | ### **2. 文件名称命名规则** 32 | 33 | **1) 使用统一小写的英文字母(统一翻译的英文名字)， 数字和中划线的组合， 不得包含汉字，空格和特殊字符** 34 | 35 | - `index.html` 36 | - `jquery-ui.js` 37 | - `product-list.css` 38 | - `funnel-analyze.vue` 39 | 40 | **2) 使用英文句号表示文件依赖关系, 范围大的在前面** 41 | 42 | - `jquery.js`的表格扩展插件: `jquery.form.js` 43 | 44 | **3) 经过压缩的文件添加`min`** 45 | 46 | - `jquery.js`压缩后: `jquery.min.js` 47 | 48 | **4) 使用数字代表版本号** 49 | 50 | - `dw-min-1.2.js` 51 | 52 | 53 | 54 | ### **3. 文件夹的命名规范** 55 | **1) 使用统一小写英文字母(统一翻译的英文名字), 数字和中划线的组合，不得包含汉字, 空格和特殊字符** 56 | **2) 常用命名文件夹** 57 | 58 | - 视图文件夹: *views* 59 | - js文件夹: *js* 60 | - 样式文件夹: *css* 61 | - 工具类文件夹: *utils* 62 | - 图片文件夹: *image* 63 | - 测试文件夹: *test* 64 | - 第三方库和插件文件夹: *libs* 65 | - 字体文件文件夹: *font* 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | --------------------------------------------------------------------------------