Online Mind Mapping and Brainstorming

Create your own awesome maps

Online Mind Mapping and Brainstorming

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account? Log In

前端规范 by Mind Map: 前端规范
0.0 stars - reviews range from 0 to 5

前端规范

前端规范V0.2

JS规范

关于JS的代码规范和文件目录的放置

js结构

libs, jquery[jquery family库], jquery, 1.9, jquery.js, jquery.min.js, 1.6, jquery.js, jquery.min.js, jqueryUI, 1.9, jqueryui.1.9.1.js, jqueryMobile, 1.9, jquerymobile.1.9.1.js, bootstrap, v2, v3, css, js, others

tool, scroller, slider, table, validator, validator.1.3.1.js

page, 根据html页面结构,有相应的JS文件结构, element, head.js, foot.js, base.js, activity, fanfan, fanfan.ui.js, turntable, turntable.ui.js, 每个页面有一个对应控制器pagename.ui.JS, 每个页面引入jquery、base.js或head.js或foot.js

代码规范

注释, 每个文件有个总的介绍注释, 作者, 版本, 全部功能列表, 每个功能函数有一个参数与功能介绍注释, 功能介绍, 参数的键-值列表, 参数实例(可选)

命名规范, 文件名称, 小写,用.号分隔版本号和功能, 变量, 驼峰式, 常量, 全大写

模块, 每个文件是独立的模块, 封装为类, 用jquery封装为插件, 插件的一些html结构,最好动态生成, 功能文件中不能暴露全局变量, 功能文件不能有立即执行函数, 页面文件ui.js引用模块文件,再执行所需功能,页面的特殊需要,可以根据模块的接口,自定义需求函数

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

CSS文件规范

css类名称

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

参考名称, 头: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

css目录结构

主要 main.css

公用 base.css

模块 module.css

布局 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

`图标 icon.css

表单 forms.css

补丁 mend.css

打印 print.css

文档规范

webroot文件结构

libs, bootstrap, 2.0.0, 3.0.0, jquery, jquery, 1.9.1, jquery.js, jquery.min.js, 1.7.2, jquery.js, jquery.min.js, jqueryui, 1.9.2, js, jqueryui.js, css, jqueryui.css, somethingelse

dist, js, tool, imgUpload, imgupload.1.0.2.js, imgupload.1.0.2.min.js, ..., page, element, base.js, base.min.js, game, bbk, bbk.ui.js, bbk.ui.min.js, bbk.grid.js, bbk.grid.min.js, css, ..., img, common, page, game, bbk, activity

test, test.js[example]

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

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

favicon.co, 网站图标

版本

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

发布的版本

dist中的文件为可发布的

开发流程

grunt管理

Gruntfile.js里面写了配置的任务, concat, 合并文件, uglify, 压缩JS, cssmin, 压缩css, watch, 监控文件, livereload:true, files:[], tasks:[], css或JS文件修改的时候,执行编译并压缩, connect+connect-livereload, 可选, 配置文件路径很坑爹, JShint, 规范

grunt任务, 默认tasks认为是压缩文件, grunt watch执行sass编译和压缩, grunt bundle提取min文件,然后压成ZIP

html

引用min的文件

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

JS

引入requireJS做模块的管理

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

功能模块使用define做定义

主模块进行定义config,和require主逻辑代码,引入其他的依赖模块, require.config({ baseUrl: 'lib', paths: { app: '../app' } });