不同平台命令有兼容性问题，可以通过一些第三方包解决

rimraf

删除文件、文件夹

mkdirp

创建文件夹

cross-env

不同平台（window linux unix）命令行传递参数有兼容性问题，通过cross-env可以解决各个平台的兼容性问题

安装

1
2
3
4
5

$ yarn add cross-env --dev

或者

$ npm install cross-env --save-dev

使用

1
2
3
4
5
6

// package.jsxon
...
"scripts": {
    "dev": "cross-env NODE_ENV=development node ./builder/dev-server.js",
  },
...

NODE_ENV=development 常用参数，构建工具以此区分不同的模式，开发模式（development 或 dev）还是生产环境（production 或 pro）；
具体需要什么 参数=值 以项目为准；

React

1. state props 的理解，什么数据适合放入state中？
2. setState函数有几种参数形式？this.state无法立即获取setState设置的数据原因？
3. 组件间通信方式
4. react有几个周期函数，各个周期函数的作用是什么（适合写什么样的逻辑）？
5. diff算法？
6. React性能优化

代码规范

1. esLint？
2. esLint如何结合IDE、GIT使用？

Redux

1. 为什么要使用Redux，什么数据适合放入Redux中？
2. Redux原理（如何实现的）？

CSS

1. css预处理器
2. css Module

ES6

1. let const 为什么不用var？
2. 箭头函数？
3. 解构赋值、函数的reset参数？
4. 函数式变成？
5. class
6. promise
7. 异步回调地狱解决方案

webpack

1. 配置、常用插件
2. 命令行兼容性
3. 各种常见loader
4. 各个版本了解程度

react-router

1. 配置文件过大，容易冲突，如何解决？
2. hash、H5方式，用哪种？区别是什么？

其他

1. 组件化、模块化
2. 前后端分离
3. GraphQL、restful
4. HTTP Code
5. 组件卸载，ajax打断
6. ajax、fetch封装，封装了什么？
7. 异常处理
8. yarn vs npm
9. 异常处理、错误上报
10. 测试：e2e unit
11. weex、RN、微信小程序

原型&文档标准

良好的原型&文档能有效的减小开发人员理解歧义，降低开发人员与产品之间的沟通。

是否考虑只出原型，将文档相关内容对应的标注在原型上？

原型标准

原型要满足一定的标准，方便其他人员查看；

• 原型的布局要尽量与产品一致；
• 左侧导航最好为系统菜单，如果不作为系统菜单，原型上要提供系统菜单；
• 页面与菜单对应，详情、修改等页面没有菜单，要标明页面的菜单状态；
• 原型上菜单可点击跳转到具体的页面；
• 当前页面的弹窗在当前页面画出，用连线指明是哪个按钮对应的弹窗；
• 页面元素对应使用相应组件，不要使用input做label展示，不要把radio做为checkbox使用；
• 能使用页面元素体现的状态，尽量不要使用文字说明，比如input为disabled，可以通过灰底input框表示；
• 无用的页面，元素要删除；
• 不同版本最好独立整理出一个原型，只包含此版本的功能，方便查阅；

文档标准

• 良好统一的排版布局；
• 与原型对应；
• 表单字段表明校验规则；
• 变更部分使用不同颜色字体，并标记是哪个版本变更；

需求评审

产品整理完需求后，一般会进行需求评审，开发及领导会评审需求的可行性；

前端需求评审需要确认的内容如下：

• 菜单与页面的对应关系；
• 各个页面的交互是否合理；
• 页面布局、交互技术实现是否可行；
• 表单元素校验规则是否明确；

nginx 操作

反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。

安装

1

sudo apt-get install nginx

启动

1
2

进入服务器nginx目录：cd /etc/nginx/
执行：sudo nginx

查看进程

1

ps -ef|grep nginx

停止

waiting for the worker processes to finish serving current requests

1

sudo nginx -s quit 或 sudo kill -s QUIT 1628（进程编号）

without waiting for the worker processes to finish serving current requests

1

sudo nginx -s stop

重启

更改配置文件之后需要重启

1

sudo nginx -s reload

Once the master process receives the signal to reload configuration, it checks the syntax validity of the new configuration file and tries to apply the configuration provided in it. If this is a success, the master process starts new worker processes and sends messages to old worker processes, requesting them to shut down. Otherwise, the master process rolls back the changes and continues to work with the old configuration. Old worker processes, receiving a command to shut down, stop accepting new connections and continue to service current requests until all such requests are serviced. After that, the old worker processes exit.

一旦主线程得到重启命令，它会先校验配置是否正确，如果正确，主线程会启动新的worker线程，关闭旧的worker线程。否则，主线程会回滚到原先的配置，旧的worker线程会得到一个shut down命令，停止接受新连接，但是会继续服务当前请求，当所有的请求处理完之后，会退出。

官网这段话什么意思？如果配置错误，master会roll back，但是worker还是会exit？

pid文件丢失问题解决方法

1

wangshubin@pc:/etc/nginx$ sudo nginx -c /etc/nginx/nginx.conf

nginx.config配置

这个文件中的配置基本上是没动,只是添加两个include

具体的配置在sites-enabled和sites-available中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

user wangshubin;

worker_processes 4;

pid /run/nginx.pid;

events {

     worker_connections 768;

     # multi_accept on;

}

http {

     ##

     # Basic Settings

     ##

     sendfile on;

     tcp_nopush on;

     tcp_nodelay on;

     keepalive_timeout 65;

     types_hash_max_size 2048;

        client_max_body_size 10m;

     # server_tokens off;

     # server_names_hash_bucket_size 64;

     # server_name_in_redirect off;

     include /etc/nginx/mime.types;

     default_type application/octet-stream;

     ##

     # Logging Settings

     ##

     access_log /var/log/nginx/access.log;

     error_log /var/log/nginx/error.log;

     ##

     # Gzip Settings

     ##

     gzip on;

     gzip_disable "msie6";

     # gzip_vary on;

     # gzip_proxied any;

     # gzip_comp_level 6;

     # gzip_buffers 16 8k;

     # gzip_http_version 1.1;

     # gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

     ##

     # nginx-naxsi config

     ##

     # Uncomment it if you installed nginx-naxsi

     ##

     #include /etc/nginx/naxsi_core.rules;

     ##

     # nginx-passenger config

     ##

     # Uncomment it if you installed nginx-passenger

     ##

     #passenger_root /usr;

     #passenger_ruby /usr/bin/ruby;

     ##

     # Virtual Host Configs

     ##

     include /etc/nginx/conf.d/*.conf;

     include /etc/nginx/sites-enabled/*;

}

#mail {

#     # See sample authentication script at:

#     # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript

#

#     # auth_http localhost/auth.php;

#     # pop3_capabilities "TOP" "USER";

#     # imap_capabilities "IMAP4rev1" "UIDPLUS";

#

#     server {

#          listen     localhost:110;

#          protocol   pop3;

#          proxy      on;

#     }

#

#     server {

#          listen     localhost:143;

#          protocol   imap;

#          proxy      on;

#     }

#}

sites-available文件夹中，inc.eking99.com文件中的内容
sites-enabled文件夹中保存的文件就是sites-available其中的文件
sites-enabled表明sites-available中哪个”网站”是激活状态
sites-enabled中的文件会删除,或者从sites-available中拷贝过来,是一个软链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

# Enumerate all the Tornado servers here

upstream inc_eking_tornadoes {

    server 127.0.0.1:8081;

    server 127.0.0.1:8082;

}

proxy_next_upstream error;

server {

    listen 80;

    server_name inc.eking99.com;

    # Allow file uploads

    client_max_body_size 100M;

    location ^~ /s/ {

        alias /home/admin/deploy/inc-eking-web/public/;

        if ($query_string) {

            expires max;

        }

    }

    #location = /favicon.ico {

    #    rewrite (.*) /s/favicon.ico;

    #}

    #location = /robots.txt {

    #    rewrite (.*) /s/robots.txt;

    #}

    location / {

        proxy_read_timeout 1800;

        proxy_pass_header Server;

        proxy_set_header Host $http_host;

        proxy_redirect false;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Scheme $scheme;

        proxy_pass http://inc_eking_tornadoes;

    }

}

nginxWebSocket配置

两种方式

1. 修改nginx.config:

   1 2 3 4

   map $http_upgrade $connection_upgrade{ default upgrade; "" close; }

   具体网站配置文件：

   1 2 3

   proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";

2. 将这两个配置都写到具体网站配置文件中。（将map…放到server配置上面）

平时处理nginx用到的一些东西：

一、具体用法

ln -s 源文件 目标文件

当我们需要在不同的目录，用到相同的文件时，我们不需要在每一个需要的目录下都放一个必须相同的文件，我们只要在某个固定的目录，放上该文件，然后在其它的目录下用ln命令链接（link）它就可以，不必重复的占用磁盘空间，只生成目标文件的一个镜像。

例如：ln -s /tmp/less /usr/local/bin/less

二、注意：

（1）ln命令会保持你每一处连接文件的同步性，不论更改源文件还是目标文件，另一处文件也会有相 同的改动。

（2）ln命令分为软连接和硬链接（无参数-s）。与软连接不同的是，硬链接会在你选定的位置上生成一个与原来文件大小相同的文件。无论是软连接还是硬链接都具有文件的同步性。

（3）当一个存储空间，具有几个硬链接时，删除其中的一个，并不会对存储空间进行操作，所以其它的硬链接不会受到影响。

（4）ln默认时间里硬链接（无参数-s）。

原先 www.eking99.com nginx配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /home/admin/deploy/www-eking99-web;
    index index.html index.htm;

    server_name www.eking99.com;

    location / {
    }
}

server {
    listen 80;
    server_name eking.mobi www.eking.mobi eking.umail.cn;
    rewrite ^/(.*) http://www.eking99.com/$1 permanent;
}

原www.eking.com nginx配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

#all the Tornado servers here
upstream www_eking99_tornadoes {
    server 127.0.0.1:9090;
}

proxy_next_upstream error;

server {
    listen 80;
    server_name www.eking99.com eking99.com
    # Allow file uploads
    client_max_body_size 15M;

    location ^~ /s/ {
        alias /home/admin/deploy/www-eking-web/public/;
        if ($query_string) {
            expires max;
        }
    }

    location = /favicon.ico {
        rewrite (.*) /s/favicon.ico;
    }
    location = /robots.txt {
        rewrite (.*) /s/robots.txt;
    }

    location / {
        proxy_pass_header Server;
        proxy_set_header Host $http_host;
        proxy_redirect off; #老版本是false
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://www_eking99_tornadoes;
    }
}

一般服务器nginx位置：

1
2
3

/etc/nginx
sites-available为可用配置，但是不是实际跑的配置
sites-enable 为当前启用的配置，是sites-available的软连接

nginx目录中文件及其作用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

conf.d

mime.types

nginx.conf

sites-enabled

fastcgi_params

naxsi_core.rules

proxy_params

uwsgi_params

koi-utf

naxsi.rules

scgi_params

win-utf

koi-win

naxsi-ui.conf.1.4.1

sites-available

前后端分离 ngnix配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 服务地址
upstream api_service {
  server localhost:8080;
  keepalive 2000;
}
#
server {
        listen       80;
        server_name  localhost;
        location / {
          root /home/app/nginx/html;
          index index.html;
          try_files $uri $uri/ /index.html; #react-router 防止页面刷新出现404
        }
        location ^~/api { // 代理ajax请求，前端的ajax请求配置了统一的baseUrl = ‘/api’
           proxy_pass http://api_service/;
           proxy_set_header Host  $http_host;
           proxy_set_header Connection close;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-Server $host;
        }
}

web打印

window.print()直接打印

打印分页

如果table 使用规范的结构,打印自动分页时,每一行都会有表头、表尾；

如果需要强制分页，通过添加空div.pageBreak，样式如下

1
2
3

<style type="text/css">
　　.pageBreak{ page-break-after:always;}
</style>

区分打印内容，不打印内容

不需要打印的内容，但是页面需要显示，添加no-printclass类；
需要打印的内容，但是页面不需要显示，添加just-printclass类

1
2
3
4
5
6
7
8
9
10
11
12
13

.just-print {
  display: none !important;
}

@media print {
  .no-print {
    display: none !important;
  }

  .just-print {
    display: block !important;
  }
}

组件开发原则

遵循一定的原则，可以设计出简单易用、易于扩展的组件；

文件组织

每个（业务）组件使用的资源：（css）less、js、jsx、图片、字体等都放入一个文件夹下。

单一权责 组件的功能界限

掌握好组件拆分粒度，每一个组件要处理一个核心问题。提高重用性、灵活度，不要为了拆分而拆分，重点是满足业务需求，而不是炫技。

1. 组件只关心自己的业务逻辑，一些交互，通过触发回调（props.onClick、props.onChange等）的方式，交给调用者来处理；

弹框操作封装

较少字段的表单，最好可以封装到modal中，让用户在一个页面中完成添加、修改操作

• 如果弹框中的内容通用性不大，直接封装到modal中，如果后期有通用性需求，再拆分，一般情况下，modal中的内容不会有通用性，基本上都是以modal形式存在；
• 如果弹框中内容有公用情况，可以分别定义两个组件，一个是基础组件，一个是基础组件+弹框，分多个个文件定义；
• antd 中的modal有正常的声明周期，也就是willMount,didMount会在页面加载时触发一次，以后每次modal被重新打开都不触发，多个操作公用一个modal就会出现数据互相干扰；import {Modal} from 'zk-tookit/antd'，zk-tookit中的modal，对antd 的 modal进行了扩展，添加了 beforeOpen方法，每次打开都会触发，可以做modal的初始化工作；也避免了modal没有被打开，modal的willMout,didMount也触发，造成的一些操作浪费；

组件常用数据命名

组件只负责显示数据，至于数据由哪儿来的，外部通过props传入，一般情况下，很少在组件内发请求获取数据，但是也要视情况而定.数据名称有统一约定，可以降低沟通成本。

1. 核心数据：
   1. 列表：dataSource；
   2. 对象：data；
   3. 基础数据：value；
2. 加载：loading；
3. 是否可见：visible；
4. 是否禁用：disabled；
5. 提交回调：onSubmit；
6. 确定回调：onOk；
7. 取消回调：onCancel；
8. 事件回调：onXxx（onChage，onClick等等）；

props类型和默认值

要申明props类型并注释属性的作用，通过props类型声明，即可知晓组件有哪些props；合理设置（不是全部设置）组件的默认props，可以有效的简化外部传入props的判断工作、以简化组件的调用传参；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class A extends Component{
    static propTypes{
        loading: PropTypes.bool,  // 页面加载状态
    };
    
    static defaultProps{
        loading: false,
    };
    
    state = {};
    
    render(){
        ...
    }
}

基础业务数据组件

基础业务数据，经常以radio、select、checkbox等形式被其他业务组件调用，提供一些组件：XxxSelect、XxxCheckbox、XxxRadio、XxxTransfer等，方便其他组件调用；

设计原则：

1. 组件内部发送ajax请求，获取数据，其他组件只管调用即可，不必关心数据；
2. 外部提供数据，通过dataSource属性传入，一般不会用到，如果有的组件用到再扩展即可；
3. onLoad(dataSource, res)回调，将ajax请求返回的数据、res暴露给其他组件，其他组件有可能会使用到数据；
4. dataFilter(dataSource, res) => dataSource回调，其他组件用来对ajax返回的数据进行过滤；
5. showDisabled属性，默认false：是否显示禁用项，有些基础业务数据，有禁用启用操作，通过此字段表明是否显示禁用项；禁用项不可选择，label上显示禁用图标；
6. 修改数据时，禁用项回显问题，如果修改的数据就是禁用的，不处理会显示value，而不是label；
7. showAll属性，默认false：显示所有数据，不分禁用与启用，都是正常显示；

第三方组件再次封装

有时候，第三方组件不能满足业务需求，需要进行一次包装，包装后只是功能的增强，不要修改第三方组件原有的功能；

1. 单独包装一个第三方组件，要将props也传递给第三方组件，比如zk-tookit/antd中的Modal组件，只是添加了beforeOpen回调，并将所有的props也传递给antd的modal，保持antd的modal原有功能；
2. 组合封装多个第三方组件，所有第三方组件相应的声明对应的props属性，比如ListPage封装，用到了Table，listPage组件提供tableProps属性，所有表格相关的属性，都通过tableProps传递；form的getFieldDecorator所需参数，都通过decorator传递等等；

基础数据组件

比如：星期、男女、是否等硬编码数据

可以定义一个文件夹，分别定义数据以及各个组件，比如：weeks.js、WeekCheckbox.jsx、WeekRadio.jsx、WeekSelect.jsx;具体有什么组件基于需求而定，可以用到一个扩展一个。

其他

1. 一些key-value相关的数据，一般定义为：[{value: '1', label: '星期一'}, ...]，以value、label为关键字。
2. 组件扩展，小版本内要注意向前兼容，参数要保证只增不减，同时用FIXME标记好哪些是不好的设计，等到大版本更新时，进行重构；
3. 合理区分展示组件、容器组件；

props处理

抽取部分封装时用到的props属性，其他的原封不动赋值给html标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

render(){
    const {
        type, shape, size, className, htmlType, ...others,
    } = this.props;
    // 使用type 等一些属性，干些事情
    ...
    return (
        <button
            {...others}
            type={htmlType || 'button'}
            ...
        >
            ...
        </button>
    );
}

componentWillReceiveProps周期函数

获取新旧props进行对比，将props转化成内部state等操作；

判断chilren是什么组件

A.jsx

1
2
3
4
5
6
7

export default class A extends React.Component{
    static __IS_A = true; // 添加一个静态变量，作为标记
    ...
    render(){
        ...
    }
}

B.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13

export default class B extends React.Component{
    render(){
        const {children} = this.props;
        let hasA = false;
        React.Children.map(children, item => {
            // 从type中获取静态变量，作为判断依据
            if(item && item.type && item.type.__IS_A) hasA = true;
        });
        return (
            <div>{children}</div>
        );
    }
}

C.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13

import A from 'path/to/A';
import B from 'path/to/B';
export default class C extends React.Component{
    render(){
        return (
            <B>
                <A/>
                <span>...</span>
                ...
            </B>
        );
    }
}

一些实用小工具

• classNames className处理工具
• omit 浅拷贝，删除指定属性

propTypes 的使用

通用组件要声明propTypes，复杂结构（对象，数组内部包含对象）要通过PropTypes.shape明确声明内部结构

• 通过propTypes可以清晰看出组件需要哪些属性，没个属性都是什么类型、结构；
• 有些IDE可以基于propTypes给出提示；
• 方便调用；

前端leader工作任务

项目搭建

1. 基于不同的项目进行技术选型；
2. 基于以往总结、了解到的最佳实践进行架构设计；

团队培养

1. 技术指导；
2. 疑难问题解答；
3. 分享最佳实践；
4. 提升团队技术水平；

项目开发

1. 理解需求，工作任务拆分，分配到组员；驳回其他部门不合理需求；
2. 项目核心难点功能开发；
3. 总结并记录最佳实践，新开项目时，重新完善架构；
4. 保证项目进度，代码质量；
5. 为其他成员兜底，完成其他成员无法完成的任务；
6. review 团队成员代码，给出指导建议；确保代码质量；
7. 组件化、模块化规划，将复杂的需求，拆分成模块、组件；安排或亲自进行代码编写；

   工作总结

8. 按时总结工作完成情况，上报领导；

前后端分离开发约定

遵守约定，可以避免一些不必要的歧义，降低沟通成本。

前后端配合开发流程

划分前后端工作界限，避免前后端工作节奏被相互影响；并行开发之前，一定要确定好接口！！！

• 前后端理解需求，前端进行部分页面开发，技术难点攻克；后端进行需求分析、数据库设计，确定绝大部分字段名称、类型、各式、描述等；
• 基于原型/文档，后端设计接口，基于restfull形成swagger接口文档，前端确认后端接口是否符合前端需求。需要确认内容如下：
  • 每一个页面都需要哪些请求，哪些是以前提供过，哪些没有提供过；
  • 请求方法类型，确认使用get还是post等；
  • 请求的url；
  • 请求参数结构、参数名、类型；
  • 返回数据结构、变量名、类型；
• 前端基于约定好的swagger文档进行页面开发；后端进行业务开发，提供真实数据接口。接口规范定义之后，后期如有变动及时沟通；
• 前后端进行联调：后端验证接口是否正确，前端提供技术支持；

前后端界限（任务分工）

前端负责展示，后端负责数据处理；不要让前端进行数据的拼接，筛选等操作。

• 前端
  • 展示后端传递数据，一般不需进行处理就可以直接展示；
  • 处理用户交互，收集数据发送ajax请求；
• 后端工作
  • code 转 name，同时保留原先的code，前端转换会发送过多的请求，影响展现性能；
  • 页面中多个零散请求，如果可行，合并成一个请求，减少页面请求数量，提高页面展现性能；

ajax约定

数据交互统一使用JSON。

请求约定

基于restfull设计请求url。

• 正确区分get post put del 等请求含义：
  • get: 获取服务端数据；
  • post: 保存数据到服务端；
  • put: 修改服务端数据；
  • del: 删除服务端数据；
• 列表页分页参数：
  • 页容量：pageSize；
  • 页码：pageNum;
• 同一个数据出现在任何位置，要统一参数名；比如：房间号roomNo，不要出现roomNum、roomCode等其他参数名；
• 如无特殊需求，传递时间数据，要统一时间格式；
• 后端需要的参数，要声明字段名、类型、各式（时间）、描述（中文说明字段含义）；

成功时返回数据结构（版本一）

适用于接口需要支撑多端情况，通过message可以统一多端提示，如果提示信息需要更改，只改接口，各个端不需要修改，不需要发布。

• code：业务逻辑结果编码，前端一般用不到，也可以通过code约定成功还是失败；
• message：后端提供的信息，一般用于展现给用户，错误提示或者成功提示；成功提示如果后端统一给出，那么可以统一各个端（pc、android、ios）的提示信息，要区分开发、生产模式，开发过程中给出完整的错误提示，便于定位错误，生产环境给出用户友好提示并隐藏错误细节；
• error：后端详细异常对象（或者字符串），用来体现具体的后端错误信息，方便定位问题，只非生产环境提供，生产环境不提供，以免暴露后端细节；
• data：数据，单个数据为json对象，多条数据为json数组，数据变量命名规则如下：
  • 数据变量驼峰式命名；
  • 数据不必加前缀，比如用户查询，直接返回id、name、account即可，直接数据对象的属性，不必添加user前缀，不要写成userId、userName、userAccount；
  • 如果是其他对象属性，需要加前缀区分，比如user对象中有角色id，角色id要命名成roleId；
  • 同一个数据，无论出现在哪个接口里面，要保证命名统一，减少歧义及沟通成本；比如：roomNum房号，不要出现roomNo、roomCode等多个命名；
  • 码表型数据，对应code要转成对应的中文，命名以Name结尾，同时保留原有code(多数业务需要用到原code)，比如：roomCode，同时提供roomCodeName用于显示；
  • 时间用于展示，直接格式化成要显示的格式，最好提供原时间的时间戳。如果不提供格式化后的数据，需要提供时间戳，前端可以自己格式化，不要提供其他格式日期，前端格式化时，容易出错；
  • 列表数据，每条件记录以id为唯一标识；一定要存在id属性；
  • 每一个字段要给出描述，不常见字段前端并不知道对应的是什么，沟通成本比较高；
• total：总条数，分页页面会用到；
• 其他约定字段等；

成功时返回数据结构（版本二）

适用于接口只对接一端，后端只需要给出错误信息，成功提示前端提供。

• 直接包含数据:
  • 单个数据为js对象；
  • 多条数据为js数组；
• 分页查询：
  • list存放数据；
  • total存放总条数；

失败时返回数据结构

接口调用失败、后端逻辑验证失败等，后端要返回错误信息；

• 所有非预期成功结果都视为失败，比如校验错误、越权操作等。
• 后端要基于不同的开发模式，返回不同的错误提示，生产环境返回友好的用户提示；其他环境返回用户提示+具体错误信息，方便调试。
• 合理使用http状态码，前端会根据不同的http状态码进行不同的操作，详见如下 http状态码约定；

http状态码约定：

基于不同的状态码，前端会有相应的封装

• 200：正常业务逻辑，不包含校验错误等业务逻辑，200一定是预期的成功；
• 400：业务逻辑错误，校验错误，后端主动抛出的错误等，也可以约定为其他cod，视情况而定；
• 401：需要登录，前端发现ajax返回401，会跳转到登录页面；
• 403：无权操作，前端一般会给出类似“无权操作”的提示；
• 404：资源不存在，前端一般会给出类似“您访问的资源不存在”的提示；
• 500：服务端异常，前端一般会给出“未知系统错误，请联系管理员”；

后端解决跨域

跨域问题由服务端配置或NG代理进行解决，更简单一些。只是开发过程中会遇到跨域问题，实际生产环境使用NG，解决了跨域问题；

• header一些设置，以nodejs为例：

  1 2 3 4 5 6 7 8 9

  app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", config().allow_origin); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); res.header("Access-Control-Allow-Credentials", "true"); res.header("X-Powered-By", ' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8"); next(); });

• cookie问题: ajax跨域请求中的cookie问题；

  • 后端Access-Control-Allow-Origin不能设置成*，要指定具体的域名；
  • 前端ajax请求，要设置withCredentials为true，允许跨域的cookie访问；

通过配置proxy解决跨域

前端开发会启动一个开发模式的服务，如果这个服务支持proxy配置，可以通过配置proxy解决跨域问题

1
2
3
4
5

"proxy": {
    "/api": {
      "target": "http://localhost:3000"
    }
  }

前端最佳实践

项目怎么都能写，但是如何写的优雅？如何省时省力？如何构建大型项目，而不乱？需要总结一些最佳实践~

核心问题

• 如何进行组件的划分
• 组件如何方便的获取（后端）数据
• 组件如何方便的修改（后端）数据

封装的目的是什么？

• 包装复杂逻辑
• 提供简单接口
• 方便调用
• 简化开发
• 少写代码
• 功能统一
• 样式统一
• 代码风格统一
• 代码生成
• 可维护性
• 扩展性
• 健壮性
• 可读性

前端目录结构组织

前提要划分好需求的各个模块，基于模块/功能点对应的建立models/services，否则大型项目，需求越来越多，最终会导致models/services混乱，models命名与其包含的内容不符等问题尽量避免；

如下为src中的目录

components

通用业务组件

models

数据层，与后端交互，为组件提供数据；

services

主要进行一些ajax请求，供models层调用，获取后端数据；
是否可以考虑与models层合并?

pages

页面，只有pages中的文件与redux连接？；
接受models层数据，组合components完成用户交互、数据展示等；

layouts

布局，提供整体的结构，头部底部等通用布局组件；

避免组件频繁渲染

如果一个复杂的页面，组件A嵌套的层次比较深，任何父级组件的重新渲染，都会导致A组件的重新渲染，通过shouldComponentUpdate周期函数，进行优化，避免没有必要的重复渲染；考虑是否使用immutable-js

基础数据放入redux

基础数据，其他业务页面会经常用到，简化获取基础数据方式，有利于各个业务页面获取/使用基础数据；特殊业务的请求是否可以考虑再业务组件中直接发起？不必经过redux？

比如客户数据，提供getCustomer action，用来获取客户数据，如果某个业务组件用到客户数据，直接从redux中获取；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

export function mapStateToProps(state){
    return {
        customers: state.customer.dataSource,
        customersLoading:: state.customer.loading,
    };
}
...
componentWillMount(){
    const {
        $actions: {customer},
    } = this.props;
    
    customer.getCustomer();
}

render(){
    const {
        customers,
        customersLoading,
        otherLoading,
    } = this.props;
    
    if(customerLoading || otherLoading) {
        // show loading...
    }
}
...

提供filter工具

提供filter工具，用来转换数据显示，比如id转换成对应的label，用于页面显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// filter.js

export function filterGender(gender) {
    const genders = {
        male: '男',
        female: '女',
        m: '男',
        f: '女',
        M: '男',
        F: '女',
    };
    
    return genders[gender] || '未知';
}

复杂页面拆分

部分页面会很复杂，如果所有内容都写到一个文件，将增加修改/维护难度；

可以基于页面结构/功能点，合理的将页面拆分成各个小组件，适当的使用redux进行数据管理；

通用业务组件抽离

通用的业务组件抽离到components目录中

构建自动化

前端构建过程要自动化，基本通过几个命令搞定，核心命令有如下几个：

1
2
3
4
5
6
7
8
9
10
11

// 安装所有依赖
$ yarn

// 启动开发模式
$ yarn start 或 yarn dev 

// 生产构建
$ yarn build 

// 测试
$ yarn test

ajax封装

只关心请求，成功提示、异常提示要自动化，简单配置就OK；

1

ajax.put('/user/123', params, {successTip: '保存成功！', errorTip: '保存失败！'});

函数/组件编写原则

• 可用

  编写一个函数/组件最核心也是最低的要求,要达到可用；

• 健壮

  最基本的兼容性处理、边界处理、异常处理、用户输入校验；

• 可靠

  尽可能在任何情况下，都返回一个可靠的结果，哪怕是异常情况下；

• 宽容

  对需求宽容、对用户宽容、对调用者宽容、对维护者宽容；如果函数需要的是数字，调用者传入的是字符串数字是否允许等；

• 精益求精

  可读性、扩展性是否良好？性能怎么样?

大型项目

做大型项目时，一定要组织好基础业务组件，很多模块都会用到的组件，维护好了，可以省很多事儿；

认证

单页面应用，一般会涉及跨域问题，cookie有时候不是很适合，最好使用tooken方式，适用面更广，但是浏览器与App不同，要做好安全性方面的工作。团队中有多个项目，最好统一认证方式，可以减少工作量，降低沟通成本；

GraphQL

中文官网

英文官网

React Apollo

1. 对API中的数据提供了一套易于理解的完整描述；
2. 客户端可以准确的获取所需数据，所需结构，前端可定制性较强，所需数据基本可以自己组织；
3. 获取的数据没有冗余，后端也会有相应得性能优化（不获取的字段，不会执行后端相应得解析函数）；
4. API容易演进，提供不同版本的数据；
5. 一个请求获取多个资源，降低HTTP请求数量；
6. 容易提供强大的开发工具；
7. 以模块为单位进行数据组织；（如何划分是个难点）

restful api

目前我们项目存在的问题：

1. 字段没有中文描述，不常见字段不知道对应的是什么；
2. 不同人开发的、不同接口中，同一内容，命名不同，比如 【房号】有的人（接口）中为roomNum,有的为roomNo；
3. 有的接口返回的数据并不利于前端展示，前端需要做转换；
4. 接口是哪位后端开发的并不知道、是否开发完成也不知道；
5. 日期相关参数，格式不统一；
6. swagger 文档中接口越来越多，查找有些困难；
7. 很多数据存在无意义前缀，比如roomType : {roomTypeId, roomTypeName, …}，这里直接写成：roomType:{id, name, …}，使用时，一般形式为：roomType.id, roomType.name，没个字段就不必添加前缀，显得冗余；

主要操作：

创建附注标签

1

$ git tag -a v0.1.2 -m “0.1.2版本”

删除标签

误打或需要修改标签时，需要先将标签删除，再打新标签。

1

$ git tag -d v0.1.2 # 删除标签

将v0.1.2标签提交到git服务器

1

$ git push origin v0.1.2

将本地所有标签一次性提交到git服务器

1

$ git push origin --tags

列出标签

1
2

$ git tag # 在控制台打印出当前仓库的所有标签
$ git tag -l ‘v0.1.*’ # 搜索符合模式的标签

打标签

git标签分为两种类型：轻量标签和附注标签。轻量标签是指向提交对象的引用，附注标签则是仓库中的一个独立对象。建议使用附注标签。

创建轻量标签

1

$ git tag v0.1.2-light

创建附注标签

1

$ git tag -a v0.1.2 -m “0.1.2版本”

创建轻量标签不需要传递参数，直接指定标签名称即可。
创建附注标签时，参数a即annotated的缩写，指定标签类型，后附标签名。参数m指定标签说明，说明信息会保存在标签对象中。

切换到标签

与切换分支命令相同

1

$ git checkout [tagname]

查看标签信息

用git show命令可以查看标签的版本信息：

1

$ git show v0.1.2

删除标签

误打或需要修改标签时，需要先将标签删除，再打新标签。

1

$ git tag -d v0.1.2 # 删除标签

参数d即delete的缩写，意为删除其后指定的标签。

给指定的commit打标签

打标签不必要在head之上，也可在之前的版本上打，这需要你知道某个提交对象的校验和（通过git log获取）。

补打标签

1

$ git tag -a v0.1.1 9fbc3d0

标签发布
通常的git push不会将标签对象提交到git服务器，我们需要进行显式的操作：

1
2

$ git push origin v0.1.2 # 将v0.1.2标签提交到git服务器
$ git push origin --tags # 将本地所有标签一次性提到git服务器

注意：如果想看之前某个标签状态下的文件，可以这样操作

1. git tag 查看当前分支下的标签

2. git checkout v0.21 此时会指向打v0.21标签时的代码状态，（但现在处于一个空的分支上）

3. cat test.txt 查看某个文件

refer to：http://www.csser.com/dev/580.html

转自：从数组中选出和等于固定值的n个数(JavaScript实现)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

/**
调用说明：
  array: 数据源数组。必选。
  sum: 相加的和。必选。
  tolerance: 容差。如果不指定此参数，则相加的和必须等于sum参数，指定此参数可以使结果在容差范围内浮动。可选。
  targetCount: 操作数数量。如果不指定此参数，则结果包含所有可能的情况，指定此参数可以筛选出固定数量的数相加，假如指定为3，那么结果只包含三个数相加的情况。可选。
  返回值：返回的是数组套数组结构，内层数组中的元素是操作数，外层数组中的元素是所有可能的结果。
*/
function getCombBySum(array,sum,tolerance,targetCount){
  var util = {
    /*
      get combination from array
      arr: target array
      num: combination item length
      return: one array that contain combination arrays
    */
    getCombination: function(arr, num) {
      var r=[];
      (function f(t,a,n)
      {
          if (n==0)
          {
              return r.push(t);
          }
          for (var i=0,l=a.length; i<=l-n; i++)
          {
              f(t.concat(a[i]), a.slice(i+1), n-1);
          }
      })([],arr,num);
      return r;
    },
    //take array index to a array
    getArrayIndex: function(array) {
      var i = 0,
        r = [];
      for(i = 0;i<array.length;i++){
        r.push(i);
      }

      return r;
    }
  },logic = {
    //sort the array,then get what's we need
    init: function(array,sum) {
      //clone array
      var _array = array.concat(),
      r = [],
      i = 0;
      //sort by asc
      _array.sort(function(a,b){
        return a - b;
      });
      //get all number when it's less than or equal sum
      for(i = 0;i<_array.length;i++){
        if(_array[i]<=sum){
          r.push(_array[i]);
        }else{
          break;
        }
      }

      return r;
    },
    //important function
    core: function(array,sum,arrayIndex,count,r){
      var i = 0,
        k = 0,
        combArray = [],
        _sum = 0,
        _cca = [],
        _cache = [];

      if(count == _returnMark){
        return;
      }
      //get current count combination
      combArray = util.getCombination(arrayIndex,count);
      for(i = 0;i<combArray.length;i++){
        _cca = combArray[i];
        _sum = 0;
        _cache = [];
        //calculate the sum from combination
        for(k = 0;k<_cca.length;k++){
          _sum += array[_cca[k]];
          _cache.push(array[_cca[k]]);
        }
        if(Math.abs(_sum-sum) <= _tolerance){
          r.push(_cache);
        }      
      }

      logic.core(array,sum,arrayIndex,count-1,r);
    }

  },
    r = [],
    _array = [],
    _targetCount = 0,
    _tolerance = 0,
    _returnMark = 0;

  //check data
  _targetCount = targetCount || _targetCount;
  _tolerance = tolerance || _tolerance;

  _array = logic.init(array,sum);
  if(_targetCount){
    _returnMark = _targetCount-1;
  }

  logic.core(_array,sum,util.getArrayIndex(_array),(_targetCount || _array.length),r);

  return r;
}

两个数相加等于固定的值，参考http://taop.marchtea.com/02.02.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 声明两个变量做为数组的指针，一个从0开始，一个从length-1开始。。。。
var arr=[1, 2, 4, 5, 6, 4];
var t = 5;
function twoSun(data, sum) {
  var length = data.length;
  var begin = 0;
  var end = length - 1;
  while(begin < end) {
    var currSum = data[begin] + data[end];
    if(currSum === sum) {
      console.log(data[begin], data[end]);

      begin++;
      end--;
//       break;
    }else{
      if(currSum < sum){
        begin++;
      }else{
        end--;
      }
    }
  }
}

twoSun(arr, t);

老版本浏览器可能不支持bind函数，这里做一个polyfill。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

if(!Function.prototype.bind){
    Function.prototype.bind = function(obj){
        var slice = [].slice,
            //bind 函数是可以传参数的。比如：this.click.bind(this,1,2,3)
            args = slice.call(arguments, 1),
            self = this,
            nop = function(){},
            bound = function(){
                return self.apply(this instanceof nop ? this:(obj||{}),
                    args.concat(slice.call(arguments)));
            };
        nop.prototype = self.prototype;
        bound.prototype = new nop();
        return bound;
    };
}

一个数组，是个数字：var arr = [0, 1, 2,…8, 9]，设计一个函数，要求三秒内调用次函数，返回的数字都是一个，如果两次调用间隔超过三秒，则返回不同的数字，不允许使用全局计数变量。

实现思路，通过时间戳分段来实现，3000毫秒一个段，arr.length为一个区间，比如：[0, 3000] (3000, 6000] (6000, 9000]…，获取当前时间戳，计算当前时间戳属于哪个区段，即可得出索引值，具体算法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

function getId(arr){
  var t = new Date().getTime();
  var index = parseInt(t/3000) % arr.length;
  return arr[index];
}

// 合并成一行代码为：

function getId(arr){
  return arr[parseInt(new Date().getTime()/3000)%arr.length];
}

组件化经常会涉及到跨组件通信，可以通过发布订阅实现，Vue中可以使用一个空的vue实例座位数据总线，实现组件间通信，不需要使用第三方的发布订阅库。

1
2
3
4
5
6
7

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

实际项目中可以这样封装一下，搞个mixins：

1
2
3
4
5
6
7
8
9
10
11
12
13

const eventBus = new Vue();
const mixins = {
    data (){
        return {
            eventBus,
        };
    },
}
Vue.mixin(mixins);

// 各个组件中就可以通过如下方式来使用
this.eventBus.$emit(...);
this.eventBus.$on(...);

如果项目中使用jQuery，请使用jQuery相关方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/**
 * 获取指定window中滚动条的偏移量，如未指定则获取当前window
 * 滚动条偏移量
 *
 * @param {window} w 需要获取滚动条偏移量的窗口
 * @return {Object} obj.x为水平滚动条偏移量,obj.y为竖直滚动条偏移量
 */
function getScrollOffset(w) {
    w =  w || window;
    // 如果是标准浏览器
    if (w.pageXOffset != null) {
        return {
            x: w.pageXOffset,
            y: w.pageYOffset
        };
    }

    // 老版本IE，根据兼容性不同访问不同元素
    var d = w.document;
    if (d.compatMode === 'CSS1Compat') {
        return {
            x: d.documentElement.scrollLeft,
            y: d.documentElement.scrollTop
        }
    }

    return {
        x: d.body.scrollLeft,
        y: d.body.scrollTop
    };
}
console.log(getScrollOffset());

项目中如果使用了jQuery，可以使用jQuery相关方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/**
* 查询指定窗口的视口尺寸，如果不指定窗口，查询当前窗口尺寸
**/
function getViewportSize(w) {
    w = w || window;

    // IE9及标准浏览器中可使用此标准方法
    if ('innerHeight' in w) {
        return {
            width: w.innerWidth,
            height: w.innerHeight
        };
    }

    var d = w.document;
    // IE 8及以下浏览器在标准模式下
    if (document.compatMode === 'CSS1Compat') {
        return {
            width: d.documentElement.clientWidth,
            height: d.documentElement.clientHeight
        };
    }

    // IE8及以下浏览器在怪癖模式下
    return {
        width: d.body.clientWidth,
        height: d.body.clientHeight
    };
}
console.log(getViewportSize());

可以使用的一个第三方开源库query-string

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

/**
 * 解析query string转换为对象，一个key有多个值时生成数组
 *
 * @param {String} query 需要解析的query字符串，开头可以是?，
 * 按照application/x-www-form-urlencoded编码
 * @return {Object} 参数解析后的对象
 */
function parseQuery(query) {
    var result = {};

    // 如果不是字符串返回空对象
    if (typeof query !== 'string') {
        return result;
    }

    // 去掉字符串开头可能带的?
    if (query.charAt(0) === '?') {
        query = query.substring(1);
    }

    var pairs = query.split('&');
    var pair;
    var key, value;
    var i, len;

    for (i = 0, len = pairs.length; i < len; ++i) {
        pair = pairs[i].split('=');
        // application/x-www-form-urlencoded编码会将' '转换为+
        key = decodeURIComponent(pair[0]).replace(/\+/g, ' ');
        value = decodeURIComponent(pair[1]).replace(/\+/g, ' ');

        // 如果是新key，直接添加
        if (!(key in result)) {
            result[key] = value;
        }
        // 如果key已经出现一次以上，直接向数组添加value
        else if (isArray(result[key])) {
            result[key].push(value);
        }
        // key第二次出现，将结果改为数组
        else {
            var arr = [result[key]];
            arr.push(value);
            result[key] = arr;
        } // end if-else
    } // end for

    return result;
}

function isArray(arg) {
  if(Array.isArray){
  	return Array.isArray(arg);
  }
  if (typeof arg === 'object') {
    return Object.prototype.toString.call(arg) === '[object Array]';
  }
  return false;
}

console.log(parseQuery('sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8'));

设计项目中可以使用如下封装或者使用第三方库的实现，比如loadsh,jQuery等isFunction方法

1
2
3
4
5
6
7
8
9
10
11

function isFunction(arg) {
    if (arg) {
        if (typeof (/./) !== 'function') {
            return typeof arg === 'function';
        } else {
            return Object.prototype.toString.call(arg) === '[object Function]';
        }
    }
    return false;
}
console.log(isFunction(function(){}));

一般都使用jQuery 少数情况会 用到原生，可以考虑使用如下封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function addListener(el, type, listener, useCapture){
  if (window.addEventListener) {
    el.addEventListener(type, listener, useCapture);
    return listener;
  }
  if (window.attachEvent){
    // 标准化this，event，target
    var wrapper = function () {
      var event = window.event;
      event.target = event.srcElement;
      listener.call(el, event);
    };

    el.attachEvent('on' + type, wrapper);
    return wrapper;
  }
}

addListener(document.getElementById('test'), 'click', function(e){
  console.log(e);
});

设计项目中可以使用如下封装或者使用第三方库的实现，比如loadsh,jQuery等isArray方法

1
2
3
4
5
6
7
8
9

function isArray(arg) {
  if(Array.isArray){
  	return Array.isArray(arg);
  }
  if (typeof arg === 'object') {
    return Object.prototype.toString.call(arg) === '[object Array]';
  }
  return false;
}

设计项目中可以使用如下封装或者使用第三方库的实现，比如loadsh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

/**
* javascript 深度克隆函数
*/
function deepClone(obj) {
    var _toString = Object.prototype.toString;

    // null, undefined, non-object, function
    if (!obj || typeof obj !== 'object') {
        return obj;
    }

    // DOM Node
    if (obj.nodeType && 'cloneNode' in obj) {
        return obj.cloneNode(true);
    }

    // Date
    if (_toString.call(obj) === '[object Date]') {
        return new Date(obj.getTime());
    }

    // RegExp
    if (_toString.call(obj) === '[object RegExp]') {
        var flags = [];
        if (obj.global) { flags.push('g'); }
        if (obj.multiline) { flags.push('m'); }
        if (obj.ignoreCase) { flags.push('i'); }

        return new RegExp(obj.source, flags.join(''));
    }

    var result = Array.isArray(obj) ? [] :
        obj.constructor ? new obj.constructor() : {};

    for (var key in obj ) {
        result[key] = deepClone(obj[key]);
    }

    return result;
}

function A() {
    this.a = a;
}

var a = {
    name: 'qiu',
    birth: new Date(),
    pattern: /qiu/gim,
    container: document.body,
    hobbys: ['book', new Date(), /aaa/gim, 111]
};

var c = new A();
var b = deepClone(c);
console.log(c.a === b.a);
console.log(c, b);

一个开源库：https://github.com/fex-team/alogs

使用图片发送get请求，上报信息，由于浏览器对图片有缓存，同样的请求，图片只会发送一次，避免重复上报。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

var entry = {};
function report(url, data) {
    if (!url || !data) {
        return;
    }

    // @see http://jsperf.com/new-image-vs-createelement-img
    var image = document.createElement('img');

    var items = [];
    for (var key in data) {
        if (data[key]) {
            items.push(key + '=' + encodeURIComponent(data[key]));
        }
    }

    var name = 'img_' + (+new Date());
    entry[name] = image;
    image.onload = image.onerror = function () {
      console.log(arguments);
        entry[name] =
            image =
            image.onload =
            image.onerror = null;
        delete entry[name];
    };

    image.src = url + (url.indexOf('?') < 0 ? '?' : '&') + items.join('&');
}

1. 用户输入的数据，不要不经过转义直接展示到页面上，防止其中有些js被执行，一般的用户输入的数据，页面渲染的时候都是被转义过得，即，用户输入什么就展示什么，不会被执行，但是特殊情况除外，比如富文本编辑器，对于富文本的内容一定要做好过滤。
2. 防止记录用户登录的cookie被劫持，这个cookie要设置HttpOnly

优秀的app设计，一般只有几种颜色，各个组件的颜色都是统一的，比如统一的字体颜色，统一的背景颜色，统一的border等，如果设计良好，可以基于所有的设计图，整理出android项目所需要color。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 主色调 -->
    <color name="colorPrimary">#f65037</color>
    <!-- 主色调深色 -->
    <color name="colorPrimaryDark">#d34202</color>
    <!-- 输入框获得焦点、单复选框选中、按钮激活颜色 -->
    <color name="colorAccent">#ff0000</color>
    
    <color name="white">#ffffff</color>
    <color name="textColorPrimary">#eeeeee</color>
    <color name="textColorPrimaryDark">#666666</color>
    <color name="windowBackground">#ffffff</color>
    <color name="navigationBarColor">#000000</color>
</resources>

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment

高保真还原设计图

1. 开发之前要对设计图进行开发角度的分析，有疑问及时跟设计沟通解决；多注意一些空白页，异常数据情况，是否有相应的设计图。
2. 开发过程中，要严格按照设计图进行编码，高保真还原设计图；
3. 开发完成之后，让设计确认实现结果，发现问题，及时解决。
4. 要根据自己的开发经验，确定设计是否合理，扁平化的图标，是否建议设计使用font-icon

高保真还原产品需求

1. 开发之前认真参加需求评审，站在前端的角度考虑需求的合理性，有问题及时提出；
2. 开发过程中发现需求的细节问题，及时跟产品沟通解决；
3. 开发完成之后，要对照产品原型，自测自己开发的功能是否百分百符合需求。

空白页

尤其是列表页，在没有内容时，要显示类似“暂无数据”这样的提示，开发过程中要注意这一细节，如果没有设计，要跟设计沟通，让设计提供相关页面；如果没有文案，要跟产品确认提示文案。

按钮交互样式

这个属于用户体验方面的细节，用户进行了任何操作，界面上要给予及时的反馈，让用户知道，他进行了什么样的操作。发送请求时，按钮置为disabled（或者loading），防止重复发请求。

pc端：

1. 鼠标移入移出按钮，要有交互反馈，可以通过:hover实现。
2. 鼠标点击返回，可以通过:active实现。

移动端：

1. 点击按钮：可以通过:active实现。

文字过长如何显示

设计有时会按照理想状况出设计图，但是如果文字过长如何显示，是直接截断？还是显示省略号？可以跟设计、产品沟通确认

图片

1. 图片在保证清晰度的情况下，尽量压缩，移动端不同屏幕考虑提供2x 3x等规格的图片
2. 图片裁剪，拼接@200_w（阿里的oss），要根据实际的场景，合理拼接参数
3. 图片是否需要懒加载
4. 图片加载loading站位图
5. 图片加载失败站位图

title和页面icon

<title>Title</title> <link rel="icon">之前都是写死的开发的时候需要注意下。跨平台的时候是统一还是显示平台或者商户的title和icon需要和产品沟通一下。

请求

1. 适当显示loading
2. 发起请求时，对应按钮disabled（或者loading），防止重复请求
3. 请求失败，错误提示

项目发布之前

1. 多余的调试（console.log、alert）代码是否已删除（尤其是alert）。检查方法：可以全局搜索一下，发现调试代码，及时删除
2. 安装第三方包是否同时修改了package.json（—save，—save-dev参数未加引起的）。检查方法：将本地的node_moduls文件夹删除，重新npm install 启动项目，查看是否缺包。
3. 生产环境的构建配置是否正确。检查方法：一般测试环境和线上环境使用的配置相同，测试环境没问题，一般问题不大；还可以本地模拟正式环境，进行一次构建。
4. 微信调试是否关闭。检查方法：wx.config中的debug是否为false
5. 第三方库的调试是否关闭。检查方法：以vue为例，在webpack配置中，设置new webpack.DefinePlugin({‘process.env’: ‘production’}),可以去掉调试信息，有的库是提供全局方法，具体情况具体分析。

iphone手机，设置border:1px solid #000,实际显示要比一像素要宽，具体原因请自己Google，
通过transform: scale(0.5)可以实现1像素border，具体封装如下：
注意：

• 要显示border的元素需要设置：position:relative或者position:absolute;
• 同时只能设置一个top或者bottom（一个left或者right）
  因为top和left是使用：after，left和right使用的是before；
• 这种方式无法设置border-radius;

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

  @borderDefaultWidth: 1px; @borderDefaultColor: #e8e8e8; .border-top(@width: @borderDefaultWidth, @color: @borderDefaultColor) { &:after { top: 0; .border-top-bottom-style(@width, @color); } .media() } .border-bottom(@width: @borderDefaultWidth, @color: @borderDefaultColor) { &:after { bottom: 0; .border-top-bottom-style(@width, @color); } .media() } .border-right(@width: @borderDefaultWidth, @color: @borderDefaultColor) { &:before { right: 0; .border-left-right-style(@width, @color); } .media() } .border-left(@width: @borderDefaultWidth, @color: @borderDefaultColor) { &:before { left: 0; .border-left-right-style(@width, @color); } .media() } .border-top-bottom-style(@width, @color) { content: "\20"; display: block; position: absolute; left: 0; right: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; height: @width; background-color: @color; } .border-left-right-style(@width, @color) { content: "\20"; display: block; position: absolute; top: 0; bottom: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; width: @width; background-color: @color; } .media() { @media only screen and (-webkit-min-device-pixel-ratio: 2) { &:after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } @media only screen and (-webkit-min-device-pixel-ratio: 3) { &:after { -webkit-transform: scaleY(0.33333); transform: scaleY(0.33333); } } @media only screen and (-webkit-min-device-pixel-ratio: 4) { &:after { -webkit-transform: scaleY(0.25); transform: scaleY(0.25); } } }

使用方法：

1
2
3
4
5
6

@import '../path-to/mixins.less';
div{
  display: relative;
  .border-top();
  .border-left();
}

js原生函数，滚动动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/**
 * 滚动动画函数
 * @param el 元素对象或者元素id
 * @param targetPosition 滚动条目标位置
 * @param duringTime 持续时间 默认300
 * @param onComplete 滚动完成触发
 */
export function scrollAnimate({el, targetPosition, duringTime = 300, onComplete}) {
    if (typeof el === 'string') {
        el = document.getElementById(el);
    }

    if (!targetPosition) return;

    const startTime = (new Date()).getTime();

    function animate() {
        const nowTime = (new Date()).getTime();
        const elapsed = nowTime - startTime;
        const fraction = elapsed / duringTime;
        const position = targetPosition - el.scrollTop;
        if (fraction < 1) {
            el.scrollTop += fraction * position * Math.sin(Math.PI / 2);
            setTimeout(animate, Math.min(25, duringTime - elapsed));
        } else {
            el.scrollTop = targetPosition;
            if (onComplete) {
                onComplete();
            }
        }
    }

    animate();
}

开发过程中经常能遇到对金钱格式化的需求，这里整理一个方法

es5 版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

/**
 * 将数值四舍五入后格式化成金额形式
 *
 * @param num 数值(Number或者String)
 * @param options.prefix 金钱前缀，默认为空，一般为 ￥ 或 $
 * @param options.decimalNum 保留小数点个数，默认为2 一般为 0 1 2
 * @param options.splitSymbol 格式化分割符，默认为英文逗号，分隔符必须是单字符
 * @return 金额格式的字符串,如'￥1,234,567.45'
 * @type String
 */
function formatCurrency(num, options) {
    if (options === undefined) options = {};
    var prefix = options.prefix || '';
    var decimalNum = options.decimalNum;
    var splitSymbol = options.splitSymbol;
    var centsPercent = 100;
    if (splitSymbol === undefined) splitSymbol = ',';
    if (decimalNum !== 0 && decimalNum !== 1 && decimalNum !== 2) decimalNum = 2;
    if (decimalNum === 0) {
        centsPercent = 1;
    }
    if (decimalNum === 1) {
        centsPercent = 10;
    }
    num = num.toString().replace(/\$|\,/g, '');
    if (isNaN(num)) num = "0";
    var sign = (num == (num = Math.abs(num))) ? '' : '-';
    num = Math.floor(num * centsPercent + 0.50000000001);
    var cents = num % centsPercent;
    num = Math.floor(num / centsPercent).toString();
    if (cents < 10 && decimalNum === 2) {
        cents = "0" + cents;
    }

    for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) {
        num = num.substring(0, num.length - (4 * i + 3)) + splitSymbol + num.substring(num.length - (4 * i + 3));
    }
    if (decimalNum === 0) {
        return prefix + sign + num;
    }
    return prefix + sign + num + '.' + cents;
}

console.log(formatCurrency(9090900.55533));
// output: 9,090,900.56

console.log(formatCurrency(9090900.55533, {
    prefix: '￥',
    decimalNum: 2,
    splitSymbol: ','
}));
// output: ￥9,090,900.56

es6 版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

/**
 * 将数值四舍五入后格式化成金额形式
 *
 * @param num 数值(Number或者String)
 * @param options 可选参数
 * @param options.prefix 金钱前缀，默认为空，一般为 ￥ 或 $
 * @param options.decimalNum 保留小数点个数，默认为2 一般为 0 1 2
 * @param options.splitSymbol 格式化分割符，默认为英文逗号，分隔符必须是单字符
 * @return 金额格式的字符串,如'￥1,234,567.45'
 * @type String
 */
function formatCurrency(num, options = {}) {
    let {decimalNum, splitSymbol} = options;
    const {prefix = ''} = options;
    let centsPercent = 100;

    if (splitSymbol === undefined) splitSymbol = ',';
    if (decimalNum !== 0 && decimalNum !== 1 && decimalNum !== 2) decimalNum = 2;
    if (decimalNum === 0) centsPercent = 1;
    if (decimalNum === 1) centsPercent = 10

    num = num.toString().replace(/\$|,/g, '');
    if (isNaN(num)) num = '0';
    const sign = (num === Math.abs(num).toString()) ? '' : '-';
    num = Math.abs(num);
    num = Math.floor((num * centsPercent) + 0.50000000001);
    let cents = num % centsPercent;
    num = Math.floor(num / centsPercent).toString();
    if (cents < 10 && decimalNum === 2) {
        cents = `0${cents}`;
    }
    for (let i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) {
        const endPosition = (4 * i) + 3;
        num = num.substring(0, num.length - endPosition)
            + splitSymbol + num.substring(num.length - endPosition);
    }
    if (decimalNum === 0) {
        return prefix + sign + num;
    }
    return `${prefix}${sign}${num}.${cents}`;
}

一个工具方法，判断对象是否没有任何属性，即：{}，代码摘取自jQuery.isEmptyObject()

function isEmptyObject( obj ) {
    var name;
    for ( name in obj ) {
        return false;
    }
    return true;
}

为什么使用Karma

• 真实浏览器
• 多浏览器
• 开发过程中本地运行
• 持续集成服务器中运行
• 每次保存自动运行
• 终端运行
• 生成测试报告
• 模块化，es6支持

安装

1
2
3
4

$ npm install karma --save-dev

// 可以全局使用karma命令
$ sudo npm install -g karma-cli

JavaScript 权威指南第6版摘录一些表格

字符串可以使用正则的四个方法

1
2
3
4

'abc'.search(/abc/);
'abc'.match(/abc/);
'abc'.split(/b/);
'abc'.replace(/abc/, 'def');

正则对象RegExp属性和方法

1
2
3
4
5
6
7
8
9
10
11
12

// 五个属性
// source global ignoreCase multiLine lastIndex

// 两个方法
// test
// exec
var pattern = /Java/g;
var text = 'JavaScript is more fun than Java!';
var result;
while((result = pattern.exec(text)) !== null){
  console.log("Matched '" + result[0] + "'" + " at Position " + result.index + "; next search begins at " + pattern.lastIndex);
}

良好的组件，要定义好propTypes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

static propTypes =  {
   // 可以声明 prop 为指定的 JS 基本类型。默认
   // 情况下，这些 prop 都是可传可不传的。
   optionalArray: React.PropTypes.array,
   optionalBool: React.PropTypes.bool,
   optionalFunc: React.PropTypes.func,
   optionalNumber: React.PropTypes.number,
   optionalObject: React.PropTypes.object,
   optionalString: React.PropTypes.string,

   // 所有可以被渲染的对象：数字，
   // 字符串，DOM 元素或包含这些类型的数组。
   optionalNode: React.PropTypes.node,

   // React 元素
   optionalElement: React.PropTypes.element,

   // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
   optionalMessage: React.PropTypes.instanceOf(Message),

   // 用 enum 来限制 prop 只接受指定的值。
   optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

   // 指定的多个对象类型中的一个
   optionalUnion: React.PropTypes.oneOfType([
     React.PropTypes.string,
     React.PropTypes.number,
     React.PropTypes.instanceOf(Message)
   ]),

   // 指定类型组成的数组
   optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

   // 指定类型的属性构成的对象
   optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

   // 特定形状参数的对象
   optionalObjectWithShape: React.PropTypes.shape({
     color: React.PropTypes.string,
     fontSize: React.PropTypes.number
   }),

   // 以后任意类型加上 `isRequired` 来使 prop 不可空。
   requiredFunc: React.PropTypes.func.isRequired,

   // 不可空的任意类型
   requiredAny: React.PropTypes.any.isRequired,

   // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
   // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
   customProp: function(props, propName, componentName) {
     if (!/matchme/.test(props[propName])) {
       return new Error('Validation failed!');
     }
   }
 }