本规范总结了前端开发中普遍涉及到的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、待办事项注释:<!-- TODO:待办内容 -->
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、变量及普通函数采用小写字母开头的驼峰命名;
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 |