2018-05-07

作者: pastFirst | 来源:发表于2018-05-07 16:55 被阅读25次

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框,需要自定义打印的样式.