您的位置：首页 > Web前端

Web前端规范

2016-03-29 18:52 344 查看

本规范总结了前端开发中普遍涉及到的html、css、js、及其他相关资源的命名及可提取公共规范。主要包含两方面：

1、命名规范；

命名规范避免开发人员命名过程天马行空；便于团队合作过程中代码风格统一；新手上手快；后期维护有清晰条理。

2、开发规范；

开发规范为编码过程中普遍更优、更规范、更标准的代码用法；易排错；提高代码质量。

一、代码存储结构：

images--存放图片资源文件，内部按功能模块及控件分类建子文件夹；考虑页面改版重新切图，也可以将图片psd源文件保存（imgSource）。

scripts--存放js脚本文件，主要存放控件库，插件资源，及公共js逻辑（common.js）。注意：各功能js文件可与功能放置在同一目录下。

styles--存放插件资源样式文件，及公共样式文件（base.css、reset.css）,功能自定义css，子文件夹路径与页面所在路径相同。理论下尽量减少页面自定义样式，页面风格统一前提下，尽量提取公共样式，后续页面复用。

如果还有其他多媒体等资源，并行建文件夹存储。

xxxSys--存放该系统功能模块页面（以系统命名），按功能模块（可与页面展示时的菜单划分统一）建子文件夹，功能自定义js文件可零件js文件夹存储。

index/login--首页，放置在外部，便于部署后，简化访问路径。

上述页面及文件资源命名中采用小写字母开头的驼峰式。

二、html：

1、遵守html5规范：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>REM</title>
<link rel="stylesheet" href="">

</link>
<style>
.own{

}
</style>
</head>
<body>

<script src=""></script>
</body>
</html>

2、充分利用无兼容性问题的，html自身标签，如span、em、strong、h、sub、sup、optgroup等；

3、尽量减少div嵌套，是页面标签量尽量少；

4、书写链接地址时，避免重定向（在url后面加上“/”）；

5、避免使用行内样式；

6、待办事项注释：

7、页面功能描述后缀，如：添删改查，xxxAdd/xxxEdit/xxxDel/xxxList/xxxDetail；弹出页面xxxPop；

三、css：

1、文字样式名“.no”+“字号”+“行距”+“颜色缩写”例：“ .no12 ” 、“ .no12_24 ”；

2、减少使用影响性能的属性, 比如position:absolute || float ;

3、样式类名称含义及结构，可使用短横线分隔，如：index-headline-bg；

4、尽量避免不兼容样式；

5、开发前先对页面布局进行分析抽离，避免样式重定义；

6、css属性书写顺序，建议遵循: 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起；

四、js：

1、常量、全局变量全部大写，以短下划线开头，如_USERNAME；

2、构造函数，首字母大写；

3、变量及普通函数采用小写字母开头的驼峰命名；

4、number to string的转换，建议使用 1 + ''或String(1)，不使用new String(1)或1.toString()的方式。
5、string to number的转换，建议使用parseInt，必须显式指定第二个参数的进制；

6、float to integer的转换，建议使用Math.floor/Math.round/Math.ceil方法，不使用parseInt;

7、字符串拼接，应使用数组保存字符串片段，使用时调用join方法。避免使用+或+=的方式拼接较长的字符串，每个字符串都会使用一个小的内存片段，过多的内存片段会影响性能。

五、图片：

1、命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

2、运用css sprite技术集中小的背景图或图标, 减小页面http请求

六、通用命名：

页面结构
容器: container/wrap	整体宽度：wrapper
页头：header	内容：content
页面主体：main	页尾：footer
侧栏：sidebar	栏目：column
中间内容：center
导航
导航：nav	主导航：mainbav/globalnav
子导航：subnav	顶导航：topnav
边导航：sidebar	左导航：leftsidebar
右导航：rightsidebar	边导航图标：sidebarIcon
菜单：menu	子菜单：submenu
标题: title
功能
标志：logo	登陆：login
登录条：loginbar	注册：regsiter
产品：products	产品价格：products_prices
产品评论：products_review	编辑评论：editor_review
最新产品：news_release	最新产品：news_release
广告/标语：banner	摘要:summary
生产商：publisher	缩略图：screenshot
常见问题：faqs	关键词：keyword
博客：blog	论坛：forum
搜索：search	搜索输入框：search_input
搜索输出：search_output	搜索结果：search_results
加入我们：joinus	状态：status
按钮：btn	滚动：scroll
标签页：tab	文章列表：list
提示信息：msg/message	当前的: current
小技巧：tips	皮肤：skin
充值：pay	活动：activities
推广：promotion	公告：announcement
排行：ranking	公司简介：company_profile
公司设备：equipment	公司荣誉：glories
企业文化：culture	企业规模：scale
营销网络：sales_network	组织机构：organization
技术力量：technology	分支机构：branches
企业资质：enterprise_qualification	公司实力：strength_strength
经营理念：operation_principle	经理致辞：manager_oration
发展历程：development_history	工程案例：engineering_projects
分类浏览：browse_by_category	应用领域：application_fields
人力资源：human_resource_hr	领导致辞： leader_oration
客户留言：customer_message	客户服务：customer_service
您的要求：your_requirements	销售信息：sales_information
招商：enterprise_establishing	教育培训：education_training
在线交流：online_communication	质量认证：quality_certification
合作加盟：joinIn_cooperation	产品描述：products_description
业务范围：business_scope	产品销售：sales_sales
联系我们：contact_us	信息发布：information
返回首页：homepage	产品定购：order
电子商务：e_business	版权所有：copy _right
友情连结：hot_link	行业新闻：trade_news
行业动态：trends	邮编：postal_code_zipcode
新闻动态：news_trends	公司名称：company_name
销售热线：sales_hotline	联系人：contact_person
建设中：in_construction	证书：certificate
地址：add	电话：tel
传真：fax	产品名称：product_name
产品说明：description	价格：price
品牌：brand	规格：specification
尺寸：size	生产厂家：manufacuturer
型号：model	产品标号：item_no
技术指标：technique_data	产品描述：description
产地：production_place	用途：application
论坛：forum	在线订购：on_line_order
招标：bidInviting	综述：general
业绩：achievements	大事：great_event
动态：trends	服务：service
投资：investment	行业：industry
规划：programming	环境：environment
发送：delivery	提交：submit
重写：reset	社区：community
业务：business	在线调查：online_inquiry
下载中心：download	意见反馈：feedback
常见问题：faq	中心概况：general_profile
游乐园：amusement_park	专题报道：special_report
图标: icon	注释：note
指南：guild	服务：service
热点：hot	新闻：news
下载：download	投票：vote
商标：label/branding	当前位置：breadcrumb/loc
购物车：shop	标签：tag
信誉：siteinfo_credits	网站信息：siteinfo
法律声明：siteinfo_legal	合作伙伴：partner
友情链接：friendlink	版权：copyright

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航