前端架构（模块/开源许可证/Agile/DevOps/安全/性能/问题定位/测试/可访问性/校验/统计）

前端架构组成

一、页面：布局、视觉和交互设计
二、鲁棒性：安全与性能（脚本性能，DOM性能，加载性能），国际化，浏览器兼容性，可访问下（Accessibility）

三、前端框架：目录结构，协同开发与代码复用（模块化，插件化），MVC，跳转与包含（单页，iframe，路由），加载控制，整合UI组件

四、开发流程：

设计工具：Axure、xmind
编码规范：排版、注释、命名规范，安全规范，性能规范
开发工具：WebStorm，NotePad++，Sublime Text
调试工具：chrome，Fiddle
版本控制：SVN，GIT

对比工具：beyond compare、compare it!
制图工具：AI（矢量图SVG）、PS（位图IMG）、Iconfont（字体图Font）
打桩工具（解耦，演示）：mock.js

网页审查工具： Lighthouse

模块规范 CommonJS、CMD、AMD、ESM

CommonJS

nodejs所采用的模块规范

导出模块：exports.myModule = function  或者 module.exports = {}

导入模块：var myModule = require("路径")

CMD(Common Module Definition，通用模块定义)

引入模块加载器：<script src="base/lib/sea.js" type="text/javascript"></script>

模块加载器配置：seajs.config();

依赖并定义模块：

// 一个文件里可以定义多个模块，需要有不同的ID

define('模块ID', ['依赖模块路径 或 ID'], function (require, exports, module) {

    var otherModule = require(module.dependencies[0]);  // 导入模块

    exports.a = 1;  // 导出模块
    module.exports = {}; // 导出模块

});

使用模块：

seajs.use('模块路径', function(模块实例){

});

AMD(Asynchronous Module Definition ，异步模块定义)

引入模块加载器：<script src="js/require.js" data-main="js/main"></script>

require配置：require.config();

依赖并定义模块：

define(["依赖模块路径"], function (依赖模块实例){

　　　　return {};

});

依赖模块：

require(["模块路径"], function(模块实例){

});

ESM(ECMA Script Module，ES标准模块)

导出模块:
   export m1;                // 模块成员
   export default m1;   //  模块默认成员
   export {                    //  给模块批量添加成员
       m1 as m3,            // 相当于 m3 = m1, export m3
       m2
   }
导入模块:
import {m1, m3 as m4, default as m} from '模块路径';   // 获取模块指定成员
import * as circle from './circle'; // 将所有模块成员放到对象 circle中
import m form './profile'; // 获取模块的默认成员

import("./**.js").then(module => {});

let module = await import("./**.js");

UMD(Universal Module Definition，万能模块定义)

一个兼容各种模块规范的模块定义写法

模块规范对比

包装或打包：AMD和CMD需要模块加载器，模块需要define函数包装，浏览器直接支持，不需要打包。CommonJS和ESM则相反。

通用性：ES标准模块最具通用性，方便兼容第三方模块和打包工具

开源许可证

 开源许可证又称开源授权条款、开源协议、开源证书。

由开源组织 OSI （Open Source Initiative）批准。

开源许可证列表：Licenses by Name | Open Source Initiative 

GPL：只要你用了任何该协议的库、甚至是一段代码，那么你的整个程序，不管以何种方式链接，都必须全部使用GPL协议、并遵循该协议开源。商业软件公司一般禁用GPL代码，但可以使用GPL的可执行文件和应用程序。

AGPL：即Affero GPL，是GPL的更严格版本。只要你用了任何该协议的库、甚至是一段代码，那么运行时和它相关的所有软件、包括通过网络联系的所有软件，必须全部遵循该协议开源。据律师说，它的要求范围连硬件都包括。所以，一般公司通常禁用任何AGPL代码。

LGPL：就是GPL针对动态链接库放松要求了的版本，即允许非LGPL的代码动态链接到LGPL的模块。注意：不可以静态链接，否则你的代码也必须用LGPL协议开源。

Apache：修改版本必须保持其原始版权声明；修改过的文件要标明改动。

BSD2：修改版本必须保持其原始版权声明。

BSD3：修改版本必须保持其原始版权声明。未经许可不得使用原作者或公司的名字做宣传。

MIT：修改版本必须保持其原始版权声明。

MPL：修改版本必须保持其原始版权声明。如果发布了编译后的可执行文件，那么必须让对方可以取得MPL协议下程序的源码。

MsPL：修改版本必须保持其原始版权声明。注意：不含商标授权。

许可证选择：http://www.ruanyifeng.com/blog/2011/05/how_to_choose_free_software_licenses.html

Agile 与 DevOps

项目工具

需求与缺陷管理：https://www.tapd.cn

原型管理：https://app.zeplin.io、Axure、Tower

接口管理：http://rap.taobao.org

需求管理：简书 or 作业部落

沟通与管理

沟通：分析优劣，要给出建设性意见

任务要素：任务内容、责任人、时间点

协作：对跨级领导与其他部门人员，承接任务以及通报信息，要等直接领导决策

开发流程

Agile

目标：适应变化，渐进完善

方法：紧密沟通，迭代开发，持续集成（Continuous integration，简称CI），增量交付

角色：Scrum master、PO（product owner），BA(business analysis)、development team（developer，QA）

sprint流程：Planning Meetting -> Daily Stand-up Meeting -> Review Meeting(评审会，演示验收) -> Restrospective Meeting（回顾总结）

DevOps

目标：持续集成、快速部署、自动化运维

方法：组织调整、创造工具链

工具链：仓库工具、构建工具、部署工具、运维工具

WEB安全

开放Web应用安全项目：OWASP（Open Web Application Security Project）是一个非营利组织，协助解决Web应用安全的标准、工具与技术文件。定期发布十大安全隐患列表。

第一位: 注入式风险

SQL注入原理：将恶意的SQL命令注入到后台数据库引擎执行。例如，在表单中填入可被数据库执行的语句。

防范SQL注入：前后台校验，参数化查询。

第二位: 跨站点脚本 (XSS 或 CSS)
原理：恶意攻击者往Web页面里嵌入恶意html代码。例如，在表单中填入JS脚本，后台直接保存，用户访问该数据时，该数据（JS脚本）被直接嵌入到html中，并执行。
防范：前后台校验；前台把嵌入内容当成为本节点，使用$.text()方法，而不是$.html()；使用jQuery插件encoder.js，对嵌入内容进行编码。

第三位：无效的认证和会话管理
认证管理（账号密码）漏洞：修改密码，找回密码，密码加密，密码强度，密码有效期，锁定账号，验证码，登陆错误提示。

会话管理（session ID）漏洞：注销退出，超时退出，加密传输。

SSO：单点登录，Single Sign-On 三种角色：用户，应用，认证中心 CAS(Central Authentication Service)：集中认证服务，一款SSO框架。 CAS的两部分：CAS Server和CAS Client。CAS Server负责完成对用户的认证工作, 需要独立部署。CAS Client 与受保护的客户端应用部署在一起，以 Filter 方式

第四位：直接引用不安全对象
原理：一个已经授权的用户，通过更改访问时的一个参数，从而访问到了原本其并没有得到授权的对象。例如：修改URL里面的一个参数，访问到另一个对象。
防范：权限控制

第五位：跨站请求伪造（CSRF 或 XSRF）
原理：用户登录A网站，同时访问B网站，B网站自动向A网站发出恶意请求，浏览器会给这个请求带上A网站的cookie，因此A网站认为是用户的请求。
防范：验证Reffer，在请求中添加token并验证。
token防御思路：跨站请求只会带原站点的cookie信息，因此在cookie以外增加会话验证信息，使得请求不能通过会话验证。
token可以在放在URL中，请求体中，请求头的自定义属性中（最佳，与业务分离，并且不被看到）

第六位：安全配置错误
对访问权限，日志文件，重定向等的配置

第七位：敏感数据暴露
加密保存，加密传输，cookie开启secure属性。
cookie的secure属性为true时，表示Cookie只能在 HTTPS 连接中被浏览器传递到服务器端。

后台可以设置cookie中session ID的httpOnly属性为true，预防恶意脚本读取。

第八位：缺失业务层访问控制
原理：访问控制只在视图层进行，攻击者绕过视图层访问控制。例如：在页面中，修改灰化的按钮的样式，使其可操作，而业务层没有访问控制，使得用户可以进行没有权限的操作。
防范：对没有权限的按钮进行隐藏而非禁用，在后端进行权限检查。

第九位：使用已知易受攻击组件
对于第三方的组件，要选择知名的提供商。

第十名：未验证重定向和转发
原理：当系统接受重定向参数（login界面居多，如：http://www.a.com/login.jsp?returnUrl=default.aspx），由于这个url会显示在浏览器地址栏中，只要修改returnUrl为假冒站点的地址，用户登陆后被重定向到假冒站点，钓鱼或下载木马。

防御：returnUrl进行校验，使用相对路径来跳转

补充：

多余内容：注释代码，隐私信息，console.log
https://developer.mozilla.org/zh-CN/docs/Web/API/Window
编码 btoa()
防范XSS：前后台解耦的系统，尖括号只要在前台输出前进行转义；前后台耦合的系统，数据会被嵌入到文档，得在后台嵌入之前做转义。
保证被嗅探的情况下，账号和会话的安全：
1、登录请求的密码在前端加密

2、每次登录请求，更新会话ID，防止攻击者获取到别人的请求后，发起登录请求。

DDoS（Distributed Denial of Service，分布式拒绝服务） 
1、保证自己的高可用 2、防火墙 3、去掉不必要的服务和端口 4、分辨访问报文，拒绝掉可疑访问 5、CDN

前端性能

参考yahoo军规

等待体验 2-5-8 原则：很快-2s-比较快-5秒-比较慢-8s-很慢

一、加载性能（减少减小请求，合理请求时机）

1、压缩与合并：合并压缩脚本样式图片，使用CSS Sprites、字体图标。
2、缓存：html5 应用缓存，静态资源缓存（设置文件头过期时间Expires的值为“Never expire”永不过期），动态资源缓存（使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求）

3、减小cookie体积

4、预加载：浏览器的空余时间加载此后很可能用到的资源

5、加载次序：CSS在顶部引入，JS在尾部引入

6、避免跳转

7、应用缓存

8、预加载
资源预加载
<link rel="prefetch" href="http://www.webhek.com/2.png" /> 
提前加载指定页面的所有资源
<linkrel="prerender" href="/thenextpage.html"/>

二、渲染性能
1、减少DOM数量
2、避免缩放图片

三、脚本性能
1、减少DOM访问：缓存已经访问过的DOM元素
2、减少事件

3、事件委托

性能检测API，全局的performance 对象
导航
performance.navigation{
    type: 访问方式（链接跳转，刷新，退后）
}
时间，针对当前文档
performance.timing{
    navigationStart：卸载完前一个文档的时间
redirectStart：如果发生了重定向，则返回重定向开始的时间
domainLookupStart：查询DNS开始的时间
connectStart：连接开始时间
requestStart：从服务器或换成请求文档开始时间
responseStart：接受到数据开始的时间
domContentLoadedEventStart：文档加载完时间
domLoading：dom开始构建的时间
domComplete：dom构建完成的时间
}
高精度计时
performance.now()
标记
performance.mark("mark1");
performance.mark("mark2");
performance.measure("measure", "mark1", "mark2"); // 计算两个标记之间的时差，生成一条计量 measure
var marks = performance.getEntriesByType("mark"); // 获取标记实体
var measures = performance.getEntriesByType("measure"); //获取计量实体
performance.getEntriesByType("resource");  //获取浏览器自动生成的资源加载实体，记录每个资源加载的时间
另有 getEntriesByName 、getEntries、clearMarks、clearMeasures等接口
页面可见事件
document.addEventListener('visibilitychange', function(event){
    if(document.hidden){
  // 或者判断 document.visibilityState == 'hidden'
}
else{}
})

疑难问题定位

1、http请求头、响应头

2、浏览器安全设置

3、事件传播 导致触发多个事件处理函数

4、页面跳转后，隐藏页面仍然有动作

前端测试

单元测试(测试function，输入为参数): Mocha.js（浏览器/nodejs）、Jasmine(浏览器)

浏览器环境自动化测试（测试页面，输入为事件）：(Selenium 2.0)WebDriver(JAVA/Python/C#) 、PhantomJS(nodeJS)


PhontomJS
var page = require('webpage').create();
page.open('http://some.org', function (status) {  // 打开目标网页
  console.log(status); // 用console 或 其他日志工具 记录测试报告
  phantom.exit();
});

可访问性 Accessibility

1、语义化

选择合适的结构和标签，便于其他开发者、搜索引擎爬虫、屏幕阅读器 阅读。

2、键盘操作

给非输入框标签添加 tabindex="0"，使得他能被键盘tab键聚焦。监听按钮 press 事件，使得能被键盘 Enter 键点击。

3、屏幕阅读器

校验

一个表单，嵌套了多层组件，每一个组件写一个validate()方法，由上层组件来调用

统计

免费流量分析工具：Google Analytics