2018-05-07
title: 前端规范手册
tags: 前端,MARKDOWN,帮助
grammar_abbr: true
grammar_table: true
grammar_defList: true
grammar_emoji: true
grammar_footnote: true
grammar_ins: true
grammar_mark: true
grammar_sub: true
grammar_sup: true
grammar_checkbox: true
grammar_mathjax: true
grammar_flow: true
grammar_sequence: true
grammar_plot: true
grammar_code: true
grammar_highlight: true
grammar_html: true
grammar_linkify: true
grammar_typographer: true
grammar_video: true
grammar_audio: true
grammar_attachment: true
grammar_mermaid: true
grammar_classy: true
grammar_cjkEmphasis: true
grammar_cjkRuby: true
grammar_center: true
grammar_align: true
grammar_tableExtra: true
<div class="title-w">
<h1>姚明集团信息技术部</h1>
<h2 style="border:0">前端学习路线与规范(附组件)</h2>
</div>
[TOC]
前端项目SVN地址：
https://192.168.1.188/svn/dev-team/project/YmWeb
一、学习路线
公司目前所用的前端框架主要是Angular2+,因此学习路线是基于整套Angular2+的体系二制定的(无须按顺序，建议学习之前,有牢固的html5+js+css3基础,然后先从Angular官网examples看起)。
1.Angular 学习参考地址
2.Typescript 学习参考地址
3.Npm 学习参考地址
4.Sass 学习参考地址
5.ng-zorro 学习参考地址
6.ionic3 学习参考地址
二、规范
HTML规范
1.文档类型声明及编码
统一为html5声明类型; 编码统一为UTF-8, 书写时利用IDE实现层次分明的缩进,若有节点格式相似,应添加相应的注释
<!--刷新窗口-->
<span class='span-h' (click)="simulationRefresh()"><i class="anticon anticon-sync i-fontSize"></i></span>
<!--关闭窗口-->
<span class='span-h' (click)="closeWindow()"><i class="anticon anticon-close"></i></span>
<!--最大化-->
<span class='span-h' (click)="maxImize()">
<i *ngIf="!isMaxImize" style="font-size: 17px;" class="anticon anticon-arrows-alt i-fontSize"></i>
<i *ngIf="isMaxImize" style="font-size: 17px;" class="anticon anticon-shrink i-fontSize"></i>
</span>
<!--最小化-->
<span class='span-h' (click)="miniMize(1)"><i class="anticon anticon-minus"></i></span>
2.css、js文件的引用位置
css文件若无特殊情况,需放在head标签内,script标签则放在body下
<head>
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!--第三方js请优先加载-->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="https://im.yunzhijia.com/pub/js/qingjs.js"></script>
3.style尽量不直接写在html文件内,用class或者id定义样式
4.尽可能减少div嵌套,若无必要,inline元素不要包含block元素
5.语义化(因公司业务不需要SEO,所以重要性不高,但是可以提高可读性和规范)
CSS规范
1.公司默认使用css的扩展语言Sass
2.公用样式文件为base.scss 和 common.scss
3.每个模块需要有独立的样式表,比如task模块,模块页面私有的样式应该放置在新建的task.scss中
4.书写顺序: 位置属性、大小属性、字体属性、背景属性、其他属性
5.连字符CSS选择器命名规范: 尽量使用中横线,区分开与js的命名
6.背景图片过多考虑使用Css Sprite技术(由于集团没有专职PS切图,这一块的标准化暂未实现)
7.样式的书写尽量少使用 " > " 和 " * " , 多使用class选择器
JS(TS)规范
代码风格不强求,通俗易懂、简约易读即可
三、组件
具体代码请根据路径找到文件查看
移动端使用的框架为ionic3+angular4(微信页面则只使用angular4)，PC端则只使用angular4
1.时间格式转换
路径app\providers\Utils.ts
dateFormat
public dateFormat(date: Date, sFormat:string = 'yyyy-MM-dd'): string {
...
}
example
需要展示时间格式为xxxx年x月xx日xx时xx分 星期一
//这边传入的参数是中文字符,所以需要自定义该方法
.replace('年', String(time.Year)+'年')
.replace('月', String(time.Month)+'月')
.replace('日', String(time.TDay)+'日')
.replace('时', String(time.THour)+'时')
.replace('分', String(time.TMinute)+'分')
//dateFormat方法第二个参数也可是ABCDE,只需要修改replace的第一个参数即可
let date = this.utils.dateFormat(new Date(),'年月日时分'); // 2018年5月07日12时03分
let week ="星期"+"日一二三四五六".charAt(new Date().getDay()); // 星期一
2.alert框和confirm框
路径app\providers\Utils.ts
分PC端和移动端
alert.jpg
pc端:
Alert:
public pcAlert(title,str,fun = ()=>{}){
.....
}
example:
this.utils.pcAlert('温馨提示', '这是弹出框',()=>{
console.log('click func')
});
Confirm:
public pcConfirm(title,str,fun = ()=>{},fun2 = ()=>{}){
.....
}
example:
this.utils.pcConfirm('温馨提示', '是否确认删除?', () => {
console.log('click comfirm')
},()=>{
console.log('click cancel')
})
PC配置参数
config-alert.jpg
移动端
Alert
public iosAlert(title,str,fun = ()=>{}){
...
}
Confirm
public iosConfirm(title,str,fun = ()=>{},fun2 = ()=>{}){
...
}
<p id="jump">移动端配置参数</p>
alert-app-config.jpg
3.loading
路径app\providers\Utils.ts
分PC端和移动端
PC端:
public showSpin(){
let target = document.getElementById('load');
let spinner = new Spinner();
spinner.spin(target);
return spinner;
};
public hideSpin(spinner){
spinner.spin();
}
**/ 需要引用spin.js 路径在 assets/js下
修改样式需要在源码的
target.className更改类名即可
example:
let loading = this.utils.showSpin(); // show
this.utils.showSpin(loading ); // hidden
移动端
参考ionic3文档中的LoadingController API
public loadingCreate(){
...
}
example:
let loading = this.utils.loadingCreate(); // show
loading.dismiss(); // hidden
4.图片上传
市场部任务单项目 app\shared\upload-img.component.ts
example:
task-add页面上传图片
task-add.module.ts
import { SharedModule} from '../../shared/shared.module';
imports: [
SharedModule,
]
task-add.html
<uploadImg (returnImgData)="getReturnImgData($event)"></uploadImg>
task-add.component.ts
//获取图片上传返回值
getReturnImgData(event){
console.log(event) // event = 图片url
};
upload-img.component.ts
<input name="file" (change)="previewPic($event)" id="{{'upload'+i}}" class="upload-img" type="file" accept="image/*"/>
使用trigger方法,从而使得点击图片时触发input,选择完图片或者拍照后,会触发change方法
(因为是change事件,所以加入两次上传的图片一致,则不会触发)
触发后将图片文件传到后台,后台返回url地址即可.
// 将文件转换为base64字节流
let reader = new FileReader();
reader.readAsDataURL(file); // file文件对象
reader.onload = function(result){
// result base64字节流
};
5.移动端查看图片
市场部任务单项目 app\shared\image-viewer.directive.ts
//目前只展示一张图片,但是已经预留拓展,传入指令的图片为数组,值同节点下的所有图片
example:
在图片上添加c-image-viewer即可
<img class="img-wh" [src]="item.url" c-image-viewer >
6. http
app\providers\httpService
获取数据
public getData(params){
return this.http.request(new Request(params))
.toPromise()
.then(this.extractData)
.catch(this.handleError)
}
params 参数
url: 后端接口api地址
method: 浏览器请求方法
example:
let param = {
url: Project + '/alertrule/get?id=' + this.saveParams.id,
method: 'get'
}
//如用的是Promise, 方法的返回值需要用then去接收
this.httpCtrl.getData(param).then(result=>{
console.log('请求成功')
},error=>{
console.log('请求失败')
}
)
//如用的是Observable, 方法的返回值需要用subscribe去接收
this.httpCtrl.getData(param).subscribe(result=>{
console.log('请求成功')
},error=>{
console.log('请求失败')
}
)
保存数据(增 删 改)
public setData(params,fun = function(){}) {
params.headers = new Headers({ 'Content-Type': 'application/json' })
let option = new Request(params)
return this.http.request(option)
.toPromise()
.then(this.extractData)
.catch(this.handleError)
}
params参数
同上
新增body:请求头数据,相当于ajax的data和formdata的数据;
headers:添加请求上下文类型
example:
let params = {
url: Project + '/dictionary/edit',
method: 'post',
body: this.saveParams
}
}
this.httpCtrl.setData(params).then(
result => {
console.log('请求成功')
},
error => {
console.log('请求失败')
}
)
7.项目常量放置位置
项目中的常量,比如URL和projectName统一放在app\providers\Constants
Constants.ts
export const URL = 'http://192.168.1.117:8080'; //本地测试地址1
export const Project = '/signin'; //项目名
8.文件导出
app\providers\fileExport
//目前只做了导出csv文件
public tableExport(data,name,type){
}
data:导出的数据
name:文件名
type:导出文件类型
example:
this.dataSetExport.length = 0;
let tableHeader =
{
name:'姓名',title:'入会级别',mobilePhone:'电话',companyName:'公司',
position:'职位',address:'地址',wechatId:'微信',email:'邮箱',purpose:'需求'
};
this.dataSetExport.push(tableHeader);
this.downCtrl.tableExport(this.dataSetExport,'','csv');
9.本地存储
storage:
app\providers\sessionStorage.service;
app\providers\localStorage.service;
cookie:
app\providers\Utils
10.权限管理模块树形 ztree
app\rightsmanagement\user-list.component.ts;
ztree版本为3.5.24,目前API文档可能有变化,可自行百度文档查看.
ztreeInit(id,config,data){
}
id:渲染树的dom
config:树参数配置
data:数据
主要介绍config,其他则自行参照文档查看代码
config.view = {
addDiyDom:func() ; // 树节点初始化方法
}
config.data = {
key: {
name: "text", // 树节点的展示名,和数据显示的值挂钩
},
}
config.callback:{
beforeClick: (treeId, treeNode)=>{
... //点击树节点回调方法
}
}
11.表单验证
signin/app/shared/formvalidate.component.ts
目前只支持input的验证.依赖ng-zorro
example:
A.html
<formV-w [formObj]='validateAllData'></formV-w>
<button (click)="parentClick()">触发验证</button>
A.ts
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { FormVailDateComponent } from "../shared/formValidate.component";
import { Validators } from '@angular/forms';
@ViewChild(FormVailDateComponent) child: FormVailDateComponent;
public validateAllData = {
formError: {
category: '类别',
code: '编码',
name: '名称',
order: '排序'
},
validationMessage: {
'category': { 'required': '类别不能为空' },
'code': { 'required': '编码不能为空', 'ValidateNumber': '请输入数字' },
'name': { 'required': '名称不能为空','maxlength':'长度不能超过15个字' },
'order': { 'required': '排序不能为空' },
},
groups: {},
}
constructor() {
this.validateAllData.groups = {
category: ['', [Validators.required]],
code: [null, [Validators.required,this.checkNumber]],
name: [null, [Validators.required,Validators.maxLength(15)]],
order: [null, [Validators.required]]
}
}
parentClick() {
this.child.submitData();
console.log(this.child.saveParams) //返回的输入框值
}
validateAllData内的key不可改动
formError:需要渲染的输入框组
validationMessage:验证提示信息
groups:验证器,Validators.required为基础的非空验证,angular还有一些其他的验证,如maxLength,minLength
还可以自定义验证,验证体可以为方法,例如this.checkNumber
checkNumber(data) {
// let value = parseInt(data.value)
let NUMBER_REGEXP = /^[0-9]*$/
return NUMBER_REGEXP.test(data.value)? null : {
ValidateNumber: {
valid: false
}
}
}
formError,validationMessage,groups三个属性的输入属性名(key)值需要一致,否则无效
12.H5原生打印功能
pc-mxangel/app/providers/Utils
printDown();
html
<div class="print">
....
</div>
<iframe id="printf" width="0" height="0" frameborder="0"></iframe>
Utils.ts:
printDown(dom){
let bdhtml = document.querySelector(dom).innerHTML;
var f = document.getElementById('printf') as HTMLIFrameElement;
f.contentDocument.write(bdhtml);
f.contentDocument.write('<link rel="stylesheet" type="text/css" href="./assets/print/print.css">')
f.contentDocument.close();
setTimeout(()=>{
f.contentWindow.print();
},500)
}
use.ts:
this.utils.printDown('.print')
主要应用了iframe框,需要自定义打印的样式.
