B2B前端与视觉规范.docx
《B2B前端与视觉规范.docx》由会员分享,可在线阅读,更多相关《B2B前端与视觉规范.docx(42页珍藏版)》请在冰豆网上搜索。
![B2B前端与视觉规范.docx](https://file1.bdocx.com/fileroot1/2022-11/23/cf582a52-ef22-4753-8777-4db63a813e10/cf582a52-ef22-4753-8777-4db63a813e101.gif)
B2B前端与视觉规范
。
。
。
。
。
。
有限公司
文件
版本号:
V1.0
B2B前端与视觉规范
发布日期:
2016/07/19
目录
1前端规范编写目的5
2前端规范定义5
2.1前端规范——基本准则5
2.2前端规范——一般规范5
2.2.1框架约定5
2.2.2文件/资源命名5
2.2.3资源协议6
2.2.4文本缩进6
2.2.5注释6
2.3前端规范——HTML规范7
2.3.1文档模式(doctype)7
2.3.2关注点分离7
2.3.3HTML内容至上8
2.3.4Type属性9
2.3.5可用性扩展10
2.3.6格式化规则10
2.3.7HTML引号10
2.4前端规范——AngularJS规范10
2.4.1作用域(scope),视图和控制器的集合区10
2.4.2控制器(controller),应用的行为10
2.4.3模型(model),应用的数据10
2.4.4视图(view),用户能看到的10
2.4.1路由(router)–视图的切换11
2.4.2指令(directives),扩展HTML语法11
2.4.3过滤器(filters),数据本地化11
2.4.4$,AngularJS的命名空间(namespace)11
2.5前端规范——CSS和Sass(SCSS)规范11
2.5.1ID和class类名11
2.5.2合理的避免使用ID12
2.5.3CSS选择器中避免标签名12
2.5.4尽可能的精确12
2.5.5尽可能的可重用13
2.5.6缩写属性14
2.5.70和单位14
2.5.8ID和Class(类)名的分隔符14
2.5.9声明顺序14
2.5.10声明结束15
2.5.11属性名结束15
2.5.12选择器和声明分离15
2.5.13规则分隔15
2.5.14CSS引号16
2.5.15选择器嵌套(SCSS)16
3前端重构V2.016
3.1前端现状16
3.2产品化16
3.2.1PC与APP模块化16
3.2.2PC管理后台增加APP设置模块,APP风格设定,皮肤标准化:
17
3.2.3临时数据存储、更新方案19
3.2.4APP动态广告方案19
3.2.5APP数据统计20
3.2.6短信接口20
3.2.7错误代码库标准化、本地化21
3.2.8APPUI&前端重构21
3.2.9其它说明22
4前端框架版本:
22
4.1APP前端开发框架:
22
4.2PC后台管理框架:
22
4.3第三方插件(cordova_plugin):
22
5UI视觉规范23
5.1视觉规范说明23
5.2色值23
5.3文字24
5.3.1标准字号24
5.3.2标准字体&weight粗细设定25
5.3.3使用样例26
5.4UI控件26
5.4.1UI控件分类26
5.4.2UI控件维度和层级27
5.4.1度量与边框28
5.5页面视图规范(Layout)29
5.6页内控件规范29
5.7图标(icons)29
5.7.1应用图标29
5.7.2功能图标29
5.8UE动效29
5.9UX用户体验29
5.9.1手势29
5.9.2提醒和对话29
5.9.3术语和措辞风格30
5.10品牌元素30
6前端APP框架样例——Ionic30
6.1IonicCSS常用组件API30
6.2Ionicjavascript常用组件API30
Ionic内建基于AngularJsdirective的javascriptUI库。
许多组件通过javascript来产生DOM的动态效果。
30
6.2.1$ionicActionSheet上拉菜单30
6.2.2$ionicPopup弹出框32
6.2.3$ionicPopover浮动框32
6.2.4$ionicModal模态对话框34
6.2.5$ionicLoading载入指示器34
6.2.6$ionicBackdrop背景幕34
6.2.7…34
6.2.8Ionic指令(AngulardirectiveinIonic)35
6.3使用ChromeInspect调试IonicApp36
Android真机调试IonicApp:
地址栏输入36
7前端PC框架样例——smartadmin&bootstrap36
7.1Smartadmin组件36
7.2bootstrapCSS组件36
7.3bootstrapjavascriptAPI36
8参考文档36
1前端规范编写目的
✧改善可读性、保持一致性规范前端代码,设计师标准化输出UI视觉,便于团队协同开发,统一编码风格和前端样式。
✧提高团队协作效率,前端后期优化维护,保持前端架构纯净。
✧B2B产品化,增强产品配置灵活度。
2前端规范定义
2.1前端规范——基本准则
✧符合web标准,语义化html。
✧结构、表现、行为代码分离。
✧遵循框架优先、可重用原则。
✧代码简洁明了有序。
✧页面注释明确,后期可维护性强。
2.2前端规范——一般规范
2.2.1框架约定
严格按照Ionic、smartAdmin、bootStrap、angularJs框架文档约定,正确使用和嵌套框架提供的结构组件、表现组件、行为组件。
2.2.2文件/资源命名
所有的文件名遵循同一命名约定。
减号‘-’分隔文件名、资源名。
确保文件命名总是以字母开头而不是数字。
资源的字母名称全为小写。
需要对文件增加前后缀或特定的扩展名(比如.min.js,.min.css),或一串前缀(abc.main.min.css)。
使用点分隔符来区分这些在文件名中带有清晰意义的元数据。
引入javascript库文件,文件名须包含库名称及版本号及是否为压缩版。
不推荐
MyScript.js
myCamelCaseName.css
i_love_underscores.html
1001-scripts.js
my-file-min.css
推荐
my-script.js
my-camel-case-name.css
i-love-underscores.html
thousand-and-one-scripts.js
my-file.min.css
文件夹及文件名英文语义化命名:
admin后台管理目录
appapp应用目录
…
product-***.html产品相关
search-***.html搜索相关
……
2.2.3资源协议
当引入图片或其他媒体文件、样式、脚本时,URLs所指向的具体路径,不要指定协议部分(http:
https:
),除非这两者协议都不可用。
不指定协议使得URL从绝对的获取路径转变为相对的,在请求资源协议无法确定时非常好用。
不推荐
.example{
background:
url(
}
推荐
.example{
background:
url(//
}
2.2.4文本缩进
一次缩进两个空格。
2.2.5注释
注释协同开发时了解代码写法和目的的唯一途径。
没有任何代码是可以完全自解释的。
代码注释,永远也不嫌多。
写注释应注意:
不要写你的代码都干了些什么,而要写你的代码为什么要这么写,背后的考量是什么。
当然也可以加入所思考问题或是解决方案的链接地址。
不推荐
varoffset=0;
if(includeLabels){
//Addoffsetof20
offset=20;
}
推荐
varoffset=0;
if(includeLabels){
/**
*Ifthelabelsareincludedweneedtohaveaminimumoffsetof20pixels
*Weneedtosetitexplicitlybecauseofthefollowingbug*
*/
offset=20;
}
如果希望注释被提取,使用“/**”开头,否侧用“/*”或“/***”等。
2.3前端规范——HTML规范
2.3.1文档模式(doctype)
页面所遵循的文档模式为
DOCTYPEhtml>html5规范。
2.3.2申明文档的编码charset,与文件本身编码保持一致
默认使用UTF-8编码
2.3.3关注点分离
区分不同的关注点,信息(HTML结构)、外观(CSS)和行为(JavaScript)。
为了使它们成为可维护的干净整洁的代码,尽可能分离开。
严格地保证结构、表现、行为三者分离。
文档和模板中只包含结构性的HTML;表现代码,移入样式表;动作行为,移入JS脚本。
不使用页内样式();不在元素上使用style属性(5pxsolidblack">);不使用页内脚本();不使用表象元素(,,,,);不使用表象class名(red,left,center);
HTML5语义化标签,HTML原来以DIV布局的方式也慢慢的在改变;常用的语义化标签有articlenavasidesectionheaderfooterhgroup等;
不推荐
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
3rem">
I'masubtitleandI'mbold!
Dareyoucenterme!
alert('Justdont...');
推荐
DOCTYPEhtml>
I'masubtitleandI'mbold!
不推荐在HTML标签中添加样式属性,标签中的align属性,body标签上的background属性,td和tr标签上的height、width、nowrap、bgcolor、valign等属性,iframe标签中的frameborder、marginheight、scrolling等属性。