千万建筑资料下载 →
。。。。。。有限公司 文件
版本号：V1.0
B2B前端与视觉规范
发布日期：2016/07/19
～1 / 36～
目 录
1
2 前端规范编写目的 ........................................................5 前端规范定义 ...............................................................5
2.1
2.2 前端规范——基本准则 .........................................5 前端规范—— 一般规范........................................5
框架约定 ........................................................5
文件/资源命名 ...............................................5
资源协议 ........................................................6
文本缩进 ........................................................6
注释 ...............................................................6
文档模式（doctype） ....................................7
关注点分离 ....................................................7
HTML 内容至上 ...............................................8
Type 属性 .................................................... 10
可用性扩展 .................................................. 10
格式化规则 .................................................. 10
HTML 引号 .................................................... 10
作用域(scope) ，视图和控制器的集合区 ................................错误！未定义书签。
控制器(controller) ，应用的行为 ................. 10
模型(model) ，应用的数据 .....................................................错误！未定义书签。
视图(view) ，用户能看到的 ........................ 11
路由 (router) – 视图的切换 ......................... 11
指令(directives) ，扩展HTML语法 .............. 11
过滤器(filters) ，数据本地化 ....................... 11
$ ， AngularJS的命名空间(namespace) .............................................................. 11
ID和class类名 ............................................. 11
合理的避免使用ID ....................................... 12
CSS选择器中避免标签名 ............................. 12
尽可能的精确 ............................................... 12
尽可能的可重用 ........................................... 13
缩写属性 ...................................................... 14
0 和单位 ...................................................... 14
ID 和 Class（类） 名的分隔符 ................. 14
声明顺序 ...................................................... 14
声明结束 .................................................. 15
属性名结束 ............................................... 15
选择器和声明分离 .................................... 15
～2 / 36～ 2.2.1 2.2.2 2.2.3 2.2.4 2.2.5 2.3 2.3.1 2.3.2 2.3.3 2.3.4 2.3.5 2.3.6 2.3.7 2.4 2.4.1 2.4.2 2.4.3 2.4.4 2.4.1 2.4.2 2.4.3 2.4.4 2.5 2.5.1 2.5.2 2.5.3 2.5.4 2.5.5 2.5.6 2.5.7 2.5.8 2.5.9 2.5.10 2.5.11 2.5.12 前端规范——HTML规范 ........................................7 前端规范—— AngularJS 规范 .......................... 10 前端规范—— CSS 和 Sass (SCSS) 规范 .................................................................. 11
2.5.13
2.5.14
2.5.15
3
3.1
3.2 规则分隔 ................................................ 15 CSS引号 ................................................. 16 选择器嵌套 (SCSS) ................................ 16 前端重构V2.0 .......................................................... 16 前端现状 ........................................................... 16 产品化 ............................................................... 17
PC 与APP 模块化 ...................................... 17
PC管理后台增加APP设置模块， APP风格设定，皮肤标准化： ........................ 17
临时数据存储、更新方案 .......................... 19
APP动态广告方案 ...................................... 20
APP数据统计 .............................................. 20
短信接口 .................................................... 20
错误代码库标准化、本地化 ....................... 21
APP UI&前端重构 ....................................... 21 其它说明 .................................................... 22 3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 3.2.6 3.2.7 3.2.8 3.2.9
4
4.1
4.2
4.3
5
5.1
5.2
5.3 前端框架版本： ........................................................ 22 APP前端开发框架： .......................................... 22 PC后台管理框架： ............................................ 22 第三方插件（cordova_plugin）： ..................... 22 视觉规范说明 .................................................... 23 色值 ................................................................... 23 文字 ................................................................... 24
标准字号 .................................................... 24
标准字体&weight粗细设定 ........................ 25
使用样例 .................................................... 26
UI控件分类 ............................................... 26
UI控件维度和层级 .................................... 27 度量与边框 ................................................ 27 UI视觉规范 .............................................................. 23 5.3.1 5.3.2 5.3.3 5.4 5.4.1 5.4.2 5.4.1
5.5
5.6
5.7 UI控件 .............................................................. 26 页面视图规范（Layout） .................................. 29 页内控件规范 .................................................... 29 图标（icons） .................................................. 29
应用图标 .................................................... 29 功能图标 .................................................... 29 5.7.1 5.7.2
5.8
5.9 UE动效 .............................................................. 29 UX 用户体验 ...................................................... 29
手势 ........................................................... 29
提醒和对话 ................................................ 29
术语和措辞风格 ......................................... 29
～3 / 36～ 5.9.1 5.9.2 5.9.3
5.10
6
6.1
6.2 品牌元素 .................................................................................................................. 30 Ionic CSS常用组件API ............................................................................................ 30 Ionic javascript 常用组件API ................................................................................ 30 前端APP框架样例——Ionic ............................................................................................. 30 Ionic 内建基于AngularJs directive 的javascript UI库。许多组件通过javascript
来产生DOM的动态效果。 ................................................................................................... 30
6.2.1
6.2.2
6.2.3
6.2.4
6.2.5
6.2.6
6.2.7
6.2.8
6.3
7 $ionicActionSheet 上拉菜单 ............................................................................. 30 $ionicPopup弹出框............................................................................................. 32 $ionicPopover 浮动框 ...................................................................................... 32 $ionicModal模态对话框 ..................................................................................... 34 $ionicLoading 载入指示器 ................................................................................. 34 $ionicBackdrop背景幕 ....................................................................................... 34 <ion-tabs>?</ion-tabs> .................................................................................. 34 Ionic 指令（Angular directive in Ionic） ......................错误！未定义书签。 使用Chrome Inspect调试Ionic App ........................................................................ 35 Android真机调试 Ionic App：地址栏输入 .......................................................................... 35 前端PC框架样例——smartadmin & bootstrap ................................................................ 35
7.1
7.2
7.3
8 Smartadmin 组件 ........................................................................................................ 35 bootstrap CSS组件 .................................................................................................. 35 bootstrap javascript API ...................................................................................... 35 参考文档 ............................................................................................................................. 35 ～4 / 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
～5 / 36～
B2B前端与视觉规范.doc下载
文件夹及文件名英文语义化命名： admin 后台管理目录
app app应用目录
?
product-***.html 产品相关
search-***.html搜索相关
??
2.2.3 资源协议
当引入图片或其他媒体文件、样式、脚本时，URLs 所指向的具体路径，不要指定协议部分（http:, https:），除非这两者协议都不可用。不指定协议使得 URL 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用。
不推荐
.example {
background: url(http://static.example.com/images/bg.jpg);
}
推荐
.example {
background: url(//static.example.com/images/bg.jpg);
}
2.2.4 文本缩进
一次缩进两个空格。 <ul>
<li>
<a href="#">Test</a>
</li>
</ul>
2.2.5 注释
注释协同开发时了解代码写法和目的的唯一途径。没有任何代码是可以完全自解释的。代码注释，永远也不嫌多。写注释应注意：不要写你的代码都干了些什么，而要写你的代码为什么要这么写，背后的考量是什么。当然也可以加入所思考问题或是解决方案的链接地址。
不推荐
var offset = 0;
if(includeLabels) {
// Add offset of 20
～6 / 36～
offset = 20;
} B2B前端与视觉规范
推荐
var offset = 0;
if(includeLabels) {
/**
* If the labels are included we need to have a minimum offset of 20 pixels
* We need to set it explicitly because of the following bug
*http://somebrowservendor.com/issue-tracker/ISSUE-1
*/
offset = 20;
}
如果希望注释被提取，使用“/**”开头，否侧用“/*”或“/***”等。
2.3 前端规范——HTML规范
2.3.1 文档模式（doctype）
页面所遵循的文档模式为<!DOCTYPE html>html5规范。
2.3.2 申明文档的编码charset,与文件本身编码保持一致
默认使用UTF-8编码<meta charset="utf-8">
2.3.3 关注点分离
区分不同的关注点，信息（HTML 结构）、外观（CSS）和行为（JavaScript）。为了使它们成为可维护的干净整洁的代码，尽可能分离开。严格地保证结构、表现、行为三者分离。
文档和模板中只包含结构性的 HTML；表现代码，移入样式表；动作行为，移入JS脚本。
不使用页内样式（<style>.no-good {}</style>）；不在元素上使用 style 属性（<hr style="border-top: 5px solid black">）；不使用页内脚本（<script>alert('no good')</script>）；不使用表象元素（<b>, <u>, <center>, <font>, <b>）；不使用表象 class 名（red, left, center）；
HTML5语义化标签，HTML原来以DIV布局的方式也慢慢的在改变；常用的语义化标签有article nav aside section header footer hgroup等；
不推荐
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<link rel="stylesheet" href="base.css">
～7 / 36～
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="type.css">
</head>
<body>
<h1 style="font-size: 3rem"></h1>
<b>I'm a subtitle and I'm bold!</b>
<center>Dare you center me!</center>
<script>
alert('Just dont...');
</script>
</body>
</html> B2B前端与视觉规范
推荐
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="title"></h1>
<div class="sub-title">I'm a subtitle and I'm bold!</div>
<script async src="main.js"></script>
</body>
</html>
2.3.4 HTML 内容至上
不要让非内容信息污染HTML。不要通过 HTML 来解决设计问题， HTML只关注内容。HTML 标签的目的，是为了不断地展示内容信息。
不要引入一些特定的 HTML 结构来解决一些视觉设计问题，譬如用图片展示图标（将 img 元素当做用来做视觉设计的元素，img是内容标签）。
不推荐在HTML标签中添加样式属性，标签中的align属性，body标签上的background属性，td和tr标签上的height、width、nowrap、bgcolor、valign等属性，iframe标签中的frameborder、marginheight、scrolling等属性。此类属性应该废弃，并通过添加CSS样式来实现相同的效果。
以下例子展示了误将 HTML 用来解决设计问题的情况：
不推荐
<span class="text-box">
<span class="square"></span>
See the square next to me?
</span>
～8 / 36～
.text-box > .square {
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
} B2B前端与视觉规范
推荐
<!-- That's clean markup! -->
<span class="text-box">
See the square next to me?
</span>
.text-box:before {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
图片和 SVG 图形能被引入到 HTML 中的唯一理由是它们需呈现与内容相关的信息，如果做为装饰，请用样式表写进来：
不推荐
<!-- Content images should never be used for design elements! -->
<span class="text-box">
<img src="square.svg" See the square next to me?
</span>
推荐
<!-- That's clean markup! -->
<span class="text-box">
See the square next to me?
</span>
/* We use a :before pseudo element with a background image to solve the problem */
.text-box:before {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background: url(square.svg) no-repeat;
～9 / 36～
background-size: 100%;
} B2B前端与视觉规范
2.3.5 Type 属性
省略样式表与脚本上的 type 属性。HTML5 中两者默认的 type 值就是 text/css 和 text/javascript， type 属性可以忽略掉。在老旧版本的浏览器中也基本安全可靠。
2.3.6 可用性扩展
HTML5 语义化标签如果使用得当，许多可用性问题引刃而解。ARIA 规则在一些语义化的元素上可为其添上默认的可用性角色属性，使用得当的话已使网站的可用性大部分成立。假如你使用 nav, aside, main, footer 等元素，ARIA 规则会在其上应用一些关联的默认值。更多细节可参考 Using WAI-ARIA in HTML。另外一些角色属性则能够用来呈现更多可用性情景（role="tab"）。
2.3.7 格式化规则
在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格另起一行。
2.3.8 HTML 引号 使用双引号(“”) 而不是单引号(‘’)。
不推荐
<div class='news-article'></div>
推荐
<div class="news-article"></div>
2.4 前端规范—— AngularJS 规范
本段只对AngularJS在B2B项目中为了维护标准化做统一规范，具体公共规约请参考javascript和AngularJS官方文档。
2.4.1 控制器(controller) ，应用的行为
仅为应用的行为负责。注意控制器和视图view分离、控制器和指令directive分离、控制器和过滤器filter分离、控制器和Service分离。
? 不要将视图污染到控制器，控制器不应该包含任何关于渲染代码（DOM引用或者
片段）。任何小段视图代码确保写到视图模板中（交由模板view控制）；
? 不要在控制器中格式化数据（交由过滤器filter控制）；
? 不要在控制器中操作DOM（交由指令directive控制）。
? 不要在控制器中使用http远程数据调用（交由服务Service控制）。
～10 / 36～
2.4.2 视图(view) ，用户能看到的
视图不应该包含任何行为。
控制器和视图没有直接的调用关系，视图与控制器多对多关系。
2.4.1 路由 (router) – 视图的切换
? 使用路由更新视图切换。
? 不允许任何跳过路由的视图切换。
2.4.2 指令(directives) ，扩展HTML语法 ? 使用指令更新、修改DOM的元素（E）、样式类（C）、属性（A）、注释（M），
不要在控制器中编写控制代码（控制器、服务、也不是应用程序的其他地方）。 ? 指令扩展HTML 语法, 将行为与DOM 转换的自定义元素和属性关联起来, 创建
复用的UI 组件，扩展HTML表示能力。
2.4.3 服务(service)，数据调用；
远程API调用、数据集。
2.4.4 过滤器(filters) ，数据本地化
使用过滤器格式化本地数据。
2.4.5 $ ， AngularJS的命名空间(namespace)
为了防止意外的命名冲突，AngularJS为可能冲突的对象名加以前缀"$"。请不要在自己的代码里用"$"做前缀，以免和AngularJS代码发生冲突。
2.5 前端规范—— CSS 和 Sass (SCSS) 规范
2.5.1 ID和class类名
使用可以反应元素位置、元素目的用途的名称。不要用没有语义指向、晦涩难懂的名称。
不推荐
.fw-800 {
font-weight: 800;
}
.red {
color: red;
}
推荐
.art-list-heavy {
font-weight: 800;
}
～11 / 36～
第11 / 36页
.home-important {
color: red;
} B2B前端与视觉规范
2.5.2 合理的避免使用ID
ID不应该被应用于样式。ID的样式不能被复用并且每个页面中你只能使用一次ID。 使用ID唯一有效的是确定网页或整个站点中的位置。始终考虑使用class，而不是id，除非需要定位且只使用一次。
不推荐
#content .title {
font-size: 2em;
}
推荐
.content .title {
font-size: 2em;
}
含有ID选择器权重很高。一个只包含一个ID选择器权重高于包含1000个class(类)名的选择器。浏览器优先使用ID。
2.5.3 CSS选择器中避免标签名
当构建选择器时应该使用清晰，准确和有语义的class(类)名。不要使用标签(Element)选择器。只关心class(类)名，而不是标签代码名称，这样更容易维护。
功能分离的要求下,在表现层中不允许分配html标记/语义。只使用具有实际意义的class(类)名，不使用元素选择器。 不推荐
div.content > header.content-header > h2.title {
font-size: 2em;
}
推荐
.content > .content-header > .my-title {
font-size: 2em;
}
2.5.4 尽可能的精确
直接子选择器：需要匹配到一个DOM末端的选择器，具体场景下使用用，可有效避免影响其它样式。
后代选择器：通用样式下使用。
～12 / 36～
<article class="content news-content">
<span class="title">News event</span>
<div class="content-body"> <div class="title content-title">
Check this out
</div>
<p>This is a news article content</p>
<div class="teaser">
<div class="title">Buy this</div>
<div class="teaser-content">Yey!</div>
</div>
</div>
</article> B2B前端与视觉规范
下面的CSS将应用于有title类的全部三个元素，要解决content类下的title类 和 teaser类下的title类下不同的样式，为避免冲突，需要更精确的选择器再次重写他们的样式BEM。
不推荐
.content .title {
font-size: 2rem;
}
推荐
.content > .title {
font-size: 2rem;
}
.content > .content-body > .title {
font-size: 1.5rem;
}
.content > .content-body > .teaser > .title {
font-size: 1.2rem;
}
2.5.5 尽可能的可重用
样式按职能划分：全局样式定义，布局样式定义，模块样式定义，BEM方式单个页面样式定义(“Block”区块,“Element”元素,“Modifier”修饰符)。
样式定义举例：
layout：.l-960 .l-left .l-right；
global：.g-red .g-title .g-price；
mod：.m-login .m-breadcrumb .m-slide；
BEM：.homeimgslide-item-img{}
～13 / 36～
没有前缀字母的样式定义为全局样式。模块或页面样式必须语义化命名。模块属性或状态样式区分使用“--”分隔，block的不同状态或不同版本： .block--modifier{};
.block--error{};
.block--default{};
2.5.6 缩写属性
CSS对一个样式提供了各种缩写属性，尽可能使用。 border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
2.5.7 0 和单位
省略“0”值后面的单位。不要在0值后面使用单位，除非有值。
不推荐
padding-bottom: 0px;
margin: 0em;
推荐
padding-bottom: 0;
margin: 0;
2.5.8 ID 和 Class（类） 名的分隔符
使用连字符（中划线）分隔ID和Class（类）名中的单词。
在选择器中不要使用除了连字符（中划线）以外的任何字符来连接单词和缩写。 不推荐
.demoimage {}
.error_status {}
推荐
#video-id {}
.ads-sample {}
2.5.9 声明顺序
为了保证更好的可读性和扫描权重。遵循以下顺序：
? 结构性属性：
? display
? position, left, top, right etc.
? overflow, float, clear etc.
～14 / 36～
? margin, padding
? 表现性属性：
? background, border etc.
? font, text
2.5.10 声明结束 为了保证一致性和可扩展性，每个声明应该用“;”结束，每个声明换行。
2.5.11 属性名结束
属性名的冒号后使用一个空格。出于一致性的原因，属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。 不推荐
h3 {
font-weight:bold;
} 推荐
h3 {
font-weight: bold;
}
2.5.12 选择器和声明分离
每个选择器和属性声明总是使用新的一行。 不推荐
a:focus, a:active {
position: relative; top: 1px;
} 推荐
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
2.5.13 规则分隔
规则之间始终有一个空行（换行符）分隔。
推荐
html {
background: #fff;
}
～15 / 36～
第15 / 36页
body {
margin: auto;
width: 50%;
} B2B前端与视觉规范
2.5.14 CSS引号
属性选择器或属性值用双引号（””），而不是单引号（’’）括起来。
URI值（url()）不要使用引号。
2.5.15 CSS属性样式书写顺序
属性书写顺序：
? 位置属性(position, top, right, z-index, display, float等)
? 大小属性(width, height, padding, margin)
? 文字属性(font, line-height, letter-spacing, color- text-align等)
? 背景属性(background, border等)
? 其他属性(animation, transition等)
2.5.16 选择器嵌套 (SCSS)
目前开发框架中没有使用SCSS选择器，暂不规约。
3 前端重构V2.0
3.1 前端现状
? B2B的移动端、PC端均使用框架开发，已约定了Web组件样式、嵌套格式，
除了遵循前端基础规约开发，同时严禁修改原框架文件。
? 大多场景下只需只定义Web组件的色彩、大小和H5动效即可；需重写其样式请单
独新建文档用同名样式重写。
? App端已约束在框架规约内开发，重构工作重点在代码标准化和精减化。
? Pc端的框架文件已受污染，页面源码结构、书写位置、书写方式混乱，建议重新
下载框架源码，只保留angularJS功能层代码，view层重写。
～16 / 36～
3.2 产品化
3.2.1
PC 与APP 模块化
参考：ionic模块化.zip var lazyConfig = {
modules: ['ionic', 'ngCordova'],
required : [],
resources: {}
};
lazyModules.forEach(function (module) { APPUtil.getFileData("modules/" + module + "/config.json",function(config){
config = JSON.parse(config);
for(var name in config){
lazyConfig.modules.push(name);
lazyConfig.required.push(name);
lazyConfig.resources[name] = "modules/" + module + "/" + config[name];
}
});
});
3.2.2 PC管理后台增加APP设置模块， APP风格设定，皮肤标准化：
? 方法一：后台管理UI样式数据库,根据行业设计多个UI样式包，放入APP单独文
件夹，和入口文件（index.html）引用的CSS地址对应，在后台即时切换； <link href="css/{{themeDir}}/style.css" rel="stylesheet">
～17 / 36～
? 方法二：后台管理UI样式数据库,APP主色调，搭配色UI自定义、CSS基础库与
自定义CSS文件分离, 自定义CSS写在入口文件中（index.html）； <style>
.assertive, a.assertive {
color: {{myColor}} !important;?
}
</style>
此方法类似腾讯MT增量更新技术方案。
经调查，增量更新方案在 appStore 受限制，但不限制在localstorge保存临时变量数据，localhost最大可保存5M临时数据。
? 后台自定义参数示例
APP打开后连网API，更新自定义数据。
display=false，渲染APP默认样式。display=true，加载服务器传来的数据； APP自定义参数API列表（全局变量）：
～
18 / 36～
? APP样式库独立，更改入口index.html的CSS文件名即可更新全站样式：
/resources/mystyle
./img/?
./css/mystyle.css
./ fonts/?
CSS文件名可以是写死的，也可以是后台配置变量引入的。
3.2.3 临时数据存储、更新方案
localstorage里面存储的上次下载版本的CSS内容和版本号，启动APP与服务器比对版本号。
当APP系统内存不足时，localStorage可能会被清除，所以每次打开APP时判断数据是否为空，需要时联网下载数据。
～19 / 36～
3.2.4 APP动态广告方案
3.2.5 APP数据统计
友盟统计，指数全面、免费API：//m.kkreddy.com/
3.2.6 短信接口
阿里大鱼，云通信服务平台：//m.kkreddy.com/
～20 / 36～
3.2.7 错误代码库标准化、本地化
｛404:’你的页面去火星还没回来’,500:’?’,?｝；
3.2.8 APP UI&前端重构
结构、表现、行为三者分离。文档和模板中只包含结构性的 HTML； ? App UI重设计
? CSS样式分离，表现代码，移入样式表：不使用页内样式（<style>.no-good
{}</style>）；不在元素上使用 style 属性；不使用表象元素（<b>, <u>, <center>, <font>, <b>）；不使用表象 class 名（red, left, center）
? 表象元素以class重写；
? 表象class 语义化；
? Class类组件化分组：
全局元素 body、html……
全局组global: g-***, color-***,……;
布局组layout: l-***;
控件组 input-***，select-***;
图标组 icons-***;
模块组module: mod-product***，包含以下子分类：
--页面组list、content、view、cart: mod-***-list, mod-***-content; --页面元素 mod-***-content-title, mod-***-content-title;
～
21 / 36～
? 动作行为，移入JS脚本。不使用页内脚本（<script>alert('no good')</script>）； ? APP样式皮肤化,皮肤样式表和皮肤图标、图片移到单独文件包: resources/themes/
-common/ -default/ --style/ --image/ --font/
3.2.9 其它说明
? PC 端 最小化运行环境。目前PC端首次加载无用资源过多，区分系统级、模块级、
页面级资源。
? 预加载、按需加载。
? 文字、图片实施标准化文档：文字长度、图片大小与类型（jpg、png、gif）。 ? 非特殊情况下CSS样式文件外链至HEAD之间，JAVASCRIPT文件外链至页面底部。 ? 页面中图标制作成文字图标。
? 正式输出，使用压缩工具压缩JS、CSS、jpg、gif。
? HTML Gzip压缩。
4 前端框架版本：
4.1 APP前端开发框架：
? Ionic -v1.2.4;
? AngularJS -v1.4.3;
? ngCordova -v0.1.26-alpha.
? Android APP 打包环境 Android Studio或同等环境，兼容Android4.1 以上； ? IOS APP打包环境 Xcode，兼容IOS 7.0 以上；
? Ionic V2：IOS 8+ , Android 4.4+ , Windows 10
4.2 PC后台管理框架：
基于五星订制系统的JAVA开发环境与SmartAdmin响应式布局框架：
? JAVA API;
? SmartAdmin - v1.4.1;
? AngularJS -v1.2.16;
? jquery -v1.8.2;
? Bootstrap -v3.2.
4.3 第三方插件（cordova_plugin）：
～22 / 36～
久久建筑网m.kkreddy.com提供大量：建筑图纸、施工方案、工程书籍、建筑论文、合同表格、标准规范、CAD图纸等内容。