前端编码规范.pdfVIP

目 录 前言 文件结构 命名规则 编辑器配置和构建检查 html css javascript 前端知识库 本文档使用 看云 构建 - 2 - 前言 前言 概述 本文档包含了江西立购网络科技开发web应用的规范。编写本文档的主要驱动力是两方面 ： 1. 代码一致性 2. 最佳实践。 通过保持代码风格的一致性 ，我们可以减少遗留系统维护的负担 ，并降低未来系统崩溃的风险。而通过遵 照最佳实践 ，我们能确保优化的页面加载、性能以及可维护的代码。 指导原则 1. 表现、内容和行为的分离。 2. 标记应该是结构良好、语义正确 以及 普遍合法 。 3. Javascript应该起到渐进式增强用户体验的作用 。 参考 本规范参考自腾讯-百度-阿里-网易等公司前端团队 HTML部分 css部分 javascript 本文档使用 看云 构建 - 3 - 文件结构 文件结构 文件结构 yourProjectFolderName(你的项目文件夹名称) css(css文件 ) js(javascript文件 ) images(图片文件 ) fonts(字体文件 ) tpl(模板文件 ) index.html(首页文件 ) 注意 1. 图片文件目录下如无特殊要求请不要再建子文件夹。 2. html文件的命名请务必遵循语义化的规则。 3. 首页的文件名一定是index.html,请勿随意更名。 4. 请将公共的header和footer保存在tpl文件夹内 ，其余页面无需再编写此部分代码。 5. 在提取header和footer之前 ，请确保二者的css不会影响到content部分。 本文档使用 看云 构建 - 4 - 命名规则 命名规则 项目命名 全部采用小写方式 ， 以下划线分隔。 例 ：my_project_name 目录命名 参照项目命名规则 ； 有复数结构时 ，要采用复数命名法。 例 ：scripts, styles, images, data_models JS文件命名 参照项目命名规则。 例 ：account_model.js CSS, SCSS文件命名 参照项目命名规则。 例 ：retina_sprites.scss HTML文件命名 参照项目命名规则。 例 ：error_report.html 本文档使用 看云 构建 - 5 - 编辑器配置和构建检查 编辑器配置和构建检查 sublime3插件 安装node包 jscs npm install jscs -g jshint npm install jshint -g csscomb npm install csscomb -g csslint npm install csslint -g 安装gem包 scss-lint gem install scss_lint 安装sublime3 Package Control 按下 ctrl+ **复制粘贴以下代码** import urllib.request,os,hashlib; h eb2297e1a458f27d836c04bb0cbaf282 + d0e7a309 ` 安装sublime3插件 按下 ctrl+shift+p ，输入ip （Install Package ） 输入以下插件的名字 ，按顺序逐个进行安装 ： 1. EditorConfig 2. Sass 3. SublimeLinter 4. SublimeLinter-jscs 5. SublimeLi