前端规范

Começar. É Gratuito
ou inscrever-se com seu endereço de e-mail
Rocket clouds
前端规范 por Mind Map: 前端规范

1. JS规范

1.1. js结构

1.1.1. libs

1.1.1.1. jquery[jquery family库]

1.1.1.1.1. jquery

1.1.1.1.2. jqueryUI

1.1.1.1.3. jqueryMobile

1.1.1.2. bootstrap

1.1.1.2.1. v2

1.1.1.2.2. v3

1.1.2. tool

1.1.2.1. scroller

1.1.2.2. slider

1.1.2.3. table

1.1.2.4. validator

1.1.2.4.1. validator.1.3.1.js

1.1.3. page

1.1.3.1. 根据html页面结构,有相应的JS文件结构

1.1.3.1.1. element

1.1.3.1.2. activity

1.1.3.2. 每个页面有一个对应控制器pagename.ui.JS

1.1.3.3. 每个页面引入jquery、base.js或head.js或foot.js

1.2. 代码规范

1.2.1. 注释

1.2.1.1. 每个文件有个总的介绍注释

1.2.1.1.1. 作者

1.2.1.1.2. 版本

1.2.1.1.3. 全部功能列表

1.2.1.2. 每个功能函数有一个参数与功能介绍注释

1.2.1.2.1. 功能介绍

1.2.1.2.2. 参数的键-值列表

1.2.1.2.3. 参数实例(可选)

1.2.2. 命名规范

1.2.2.1. 文件名称

1.2.2.1.1. 小写,用.号分隔版本号和功能

1.2.2.2. 变量

1.2.2.2.1. 驼峰式

1.2.2.3. 常量

1.2.2.3.1. 全大写

1.2.3. 模块

1.2.3.1. 每个文件是独立的模块

1.2.3.1.1. 封装为类

1.2.3.1.2. 用jquery封装为插件

1.2.3.1.3. 插件的一些html结构,最好动态生成

1.2.3.1.4. 功能文件中不能暴露全局变量

1.2.3.1.5. 功能文件不能有立即执行函数

1.2.3.1.6. 页面文件ui.js引用模块文件,再执行所需功能,页面的特殊需要,可以根据模块的接口,自定义需求函数

1.2.4. 文件

1.2.4.1. JS最好放在html的body最下面,加快页面加载速度

2. CSS文件规范

2.1. css类名称

2.1.1. 小写,以“-”号作为分隔符

2.1.2. 参考名称

2.1.2.1. 头:header 内容:content .container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围布局:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:copyright 滚动:scroll 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 加入:joinus 指南:guild 服务:service 注册:regsiter 状态:status 投票:vote 合作伙伴:partner

2.2. css目录结构

2.2.1. 主要 main.css

2.2.2. 公用 base.css

2.2.3. 模块 module.css

2.2.4. 布局 layout.css

2.2.5. 主题 themes.css

2.2.6. 专栏 columns.css

2.2.7. 文字 font.css

2.2.8. `图标 icon.css

2.2.9. 表单 forms.css

2.2.10. 补丁 mend.css

2.2.11. 打印 print.css

3. 文档规范

3.1. webroot文件结构

3.1.1. libs

3.1.1.1. bootstrap

3.1.1.1.1. 2.0.0

3.1.1.1.2. 3.0.0

3.1.1.2. jquery

3.1.1.2.1. jquery

3.1.1.2.2. jqueryui

3.1.1.3. somethingelse

3.1.2. dist

3.1.2.1. js

3.1.2.1.1. tool

3.1.2.1.2. page

3.1.2.2. css

3.1.2.2.1. ...

3.1.2.3. img

3.1.2.3.1. common

3.1.2.3.2. page

3.1.3. test

3.1.3.1. test.js[example]

3.1.4. package.json

3.1.4.1. 配置文件json,包括记录项目名称,版本号,文件路径等

3.1.5. Gruntfile.js

3.1.5.1. grunt工具配置文件,可执行合并、压缩、实时监测等功能

3.1.6. favicon.co

3.1.6.1. 网站图标

3.2. 版本

3.2.1. 对jqeury文件和组件JS进行版本管理

3.3. 发布的版本

3.3.1. dist中的文件为可发布的

4. 开发流程

4.1. grunt管理

4.1.1. Gruntfile.js里面写了配置的任务

4.1.1.1. concat

4.1.1.1.1. 合并文件

4.1.1.2. uglify

4.1.1.2.1. 压缩JS

4.1.1.3. cssmin

4.1.1.3.1. 压缩css

4.1.1.4. watch

4.1.1.4.1. 监控文件

4.1.1.5. connect+connect-livereload

4.1.1.5.1. 可选

4.1.1.6. JShint

4.1.1.6.1. 规范

4.1.2. grunt任务

4.1.2.1. 默认tasks认为是压缩文件

4.1.2.2. grunt watch执行sass编译和压缩

4.1.2.3. grunt bundle提取min文件,然后压成ZIP

4.2. html

4.2.1. 引用min的文件

4.2.2. 修改源文件,打开watch任务,会改变min文件,所以

4.3. JS

4.3.1. 引入requireJS做模块的管理

4.3.2. html引入requireJS,使用data-main做主模块的引入

4.3.3. 功能模块使用define做定义

4.3.4. 主模块进行定义config,和require主逻辑代码,引入其他的依赖模块

4.3.4.1. require.config({ baseUrl: 'lib', paths: { app: '../app' } });