title: 前端規(guī)范手冊
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>姚明集團(tuán)信息技術(shù)部</h1>
<h2 style="border:0">前端學(xué)習(xí)路線與規(guī)范(附組件)</h2>
</div>
[TOC]
前端項(xiàng)目SVN地址：
https://192.168.1.188/svn/dev-team/project/YmWeb
一、學(xué)習(xí)路線
公司目前所用的前端框架主要是Angular2+,因此學(xué)習(xí)路線是基于整套Angular2+的體系二制定的(無須按順序寝受，建議學(xué)習(xí)之前,有牢固的html5+js+css3基礎(chǔ),然后先從Angular官網(wǎng)examples看起)罕偎。
1.Angular 學(xué)習(xí)參考地址
2.Typescript 學(xué)習(xí)參考地址
3.Npm 學(xué)習(xí)參考地址
4.Sass 學(xué)習(xí)參考地址
5.ng-zorro 學(xué)習(xí)參考地址
6.ionic3 學(xué)習(xí)參考地址
二颜及、規(guī)范
HTML規(guī)范
1.文檔類型聲明及編碼
統(tǒng)一為html5聲明類型; 編碼統(tǒng)一為UTF-8, 書寫時利用IDE實(shí)現(xiàn)層次分明的縮進(jìn),若有節(jié)點(diǎn)格式相似,應(yīng)添加相應(yīng)的注釋
<!--刷新窗口-->
<span class='span-h' (click)="simulationRefresh()"><i class="anticon anticon-sync i-fontSize"></i></span>
<!--關(guān)閉窗口-->
<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標(biāo)簽內(nèi),script標(biāo)簽則放在body下
<head>
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!--第三方j(luò)s請優(yōu)先加載-->
<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文件內(nèi),用class或者id定義樣式
4.盡可能減少div嵌套,若無必要,inline元素不要包含block元素
5.語義化(因公司業(yè)務(wù)不需要SEO,所以重要性不高,但是可以提高可讀性和規(guī)范)
CSS規(guī)范
1.公司默認(rèn)使用css的擴(kuò)展語言Sass
2.公用樣式文件為base.scss 和 common.scss
3.每個模塊需要有獨(dú)立的樣式表,比如task模塊,模塊頁面私有的樣式應(yīng)該放置在新建的task.scss中
4.書寫順序: 位置屬性肄扎、大小屬性反浓、字體屬性赞哗、背景屬性肪笋、其他屬性
5.連字符CSS選擇器命名規(guī)范: 盡量使用中橫線,區(qū)分開與js的命名
6.背景圖片過多考慮使用Css Sprite技術(shù)(由于集團(tuán)沒有專職PS切圖,這一塊的標(biāo)準(zhǔn)化暫未實(shí)現(xiàn))
7.樣式的書寫盡量少使用 " > " 和 " * " , 多使用class選擇器
JS(TS)規(guī)范
代碼風(fēng)格不強(qiáng)求,通俗易懂藤乙、簡約易讀即可
三、組件
具體代碼請根據(jù)路徑找到文件查看
移動端使用的框架為ionic3+angular4(微信頁面則只使用angular4)而姐，PC端則只使用angular4
1.時間格式轉(zhuǎn)換
路徑app\providers\Utils.ts
dateFormat
public dateFormat(date: Date, sFormat:string = 'yyyy-MM-dd'): string {
...
}
example
需要展示時間格式為xxxx年x月xx日xx時xx分 星期一
//這邊傳入的參數(shù)是中文字符,所以需要自定義該方法
.replace('年', String(time.Year)+'年')
.replace('月', String(time.Month)+'月')
.replace('日', String(time.TDay)+'日')
.replace('時', String(time.THour)+'時')
.replace('分', String(time.TMinute)+'分')
//dateFormat方法第二個參數(shù)也可是ABCDE,只需要修改replace的第一個參數(shù)即可
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端和移動端
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('溫馨提示', '是否確認(rèn)刪除?', () => {
console.log('click comfirm')
},()=>{
console.log('click cancel')
})
PC配置參數(shù)
移動端
Alert
public iosAlert(title,str,fun = ()=>{}){
...
}
Confirm
public iosConfirm(title,str,fun = ()=>{},fun2 = ()=>{}){
...
}
<p id="jump">移動端配置參數(shù)</p>
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.圖片上傳
市場部任務(wù)單項(xiàng)目 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方法,從而使得點(diǎn)擊圖片時觸發(fā)input,選擇完圖片或者拍照后,會觸發(fā)change方法
(因?yàn)槭莄hange事件,所以加入兩次上傳的圖片一致,則不會觸發(fā))
觸發(fā)后將圖片文件傳到后臺,后臺返回url地址即可.
// 將文件轉(zhuǎn)換為base64字節(jié)流
let reader = new FileReader();
reader.readAsDataURL(file); // file文件對象
reader.onload = function(result){
// result base64字節(jié)流
};
5.移動端查看圖片
市場部任務(wù)單項(xiàng)目 app\shared\image-viewer.directive.ts
//目前只展示一張圖片,但是已經(jīng)預(yù)留拓展,傳入指令的圖片為數(shù)組,值同節(jié)點(diǎn)下的所有圖片
example:
在圖片上添加c-image-viewer即可
<img class="img-wh" [src]="item.url" c-image-viewer >
6. http
app\providers\httpService
獲取數(shù)據(jù)
public getData(params){
return this.http.request(new Request(params))
.toPromise()
.then(this.extractData)
.catch(this.handleError)
}
params 參數(shù)
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('請求失敗')
}
)
保存數(shù)據(jù)(增 刪 改)
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參數(shù)
同上
新增body:請求頭數(shù)據(jù),相當(dāng)于ajax的data和formdata的數(shù)據(jù);
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.項(xiàng)目常量放置位置
項(xiàng)目中的常量,比如URL和projectName統(tǒng)一放在app\providers\Constants
Constants.ts
export const URL = 'http://192.168.1.117:8080'; //本地測試地址1
export const Project = '/signin'; //項(xiàng)目名
8.文件導(dǎo)出
app\providers\fileExport
//目前只做了導(dǎo)出csv文件
public tableExport(data,name,type){
}
data:導(dǎo)出的數(shù)據(jù)
name:文件名
type:導(dǎo)出文件類型
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.權(quán)限管理模塊樹形 ztree
app\rightsmanagement\user-list.component.ts;
ztree版本為3.5.24,目前API文檔可能有變化,可自行百度文檔查看.
ztreeInit(id,config,data){
}
id:渲染樹的dom
config:樹參數(shù)配置
data:數(shù)據(jù)
主要介紹config,其他則自行參照文檔查看代碼
config.view = {
addDiyDom:func() ; // 樹節(jié)點(diǎn)初始化方法
}
config.data = {
key: {
name: "text", // 樹節(jié)點(diǎn)的展示名,和數(shù)據(jù)顯示的值掛鉤
},
}
config.callback:{
beforeClick: (treeId, treeNode)=>{
... //點(diǎn)擊樹節(jié)點(diǎn)回調(diào)方法
}
}
11.表單驗(yàn)證
signin/app/shared/formvalidate.component.ts
目前只支持input的驗(yàn)證.依賴ng-zorro
example:
A.html
<formV-w [formObj]='validateAllData'></formV-w>
<button (click)="parentClick()">觸發(fā)驗(yàn)證</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': '請輸入數(shù)字' },
'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內(nèi)的key不可改動
formError:需要渲染的輸入框組
validationMessage:驗(yàn)證提示信息
groups:驗(yàn)證器,Validators.required為基礎(chǔ)的非空驗(yàn)證,angular還有一些其他的驗(yàn)證,如maxLength,minLength
還可以自定義驗(yàn)證,驗(yàn)證體可以為方法,例如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')
主要應(yīng)用了iframe框,需要自定義打印的樣式.
