JavaScript设计模式(二) 23种设计模式介绍
创建型
工厂模式（工厂方法模式，抽象工厂模式，建造者模式）
单例模式
原型模式
结构型
适配器模式
装饰器模式
代理模式
外观模式
桥接模式
组合模式
享元模式
行为型
策略模式
模板方法模式
观察者模式
迭代器模式
职责链模式
命令模式
备忘录模式
状态模式
访问者模式
中介者模式
解释器模式
JavaScript设计模式(一)何为设计与5大设计原则
何为设计
大准则
小即是美
让每个程序只做好一件事
快速建立原型
舍弃高效率而取可移植性
采用纯文本来纯属数据
软件复用
使用shell脚本来提高杠杆效应和可移植性
避免强制性的用户界面
让每个程序都成为过滤器
小准则
允许用户定制环境
尽量使操作系统内核小和轻量化
分离 解耦
使用小写字母并尽量简短
沉默是金
异常情况输出
各部分之和大于整体
寻求90%的解决方案
二八定律
12345//过滤器lsls | grep *.jsonls | grep *.json |grep 'pack'//未找到不输出 沉默是金
五大设计原则
S-单一职责原则
一个程序只做好一件事，做好拆分
O-开放封闭原则
对扩展开放 对修改封闭
增加需求时，扩展新代码，而非修改已有代码
修改带来的问题：测试；多人开发
L-李氏置换原则
子类能覆盖父类
父类能出现的地方子类就能出现
js使用较少
I-接口独立原则
保持接口独立，避免出现胖接口
js中没有接口，使用较少
类似于单一接口原则
D-依赖倒置原则
面向接口编 ...
前言：
使用HTML5，通过创建cache manifest文件，可轻松创建web应用的离线版本。
HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有网络时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览–用户可在离线时使用它们。
速度–已经缓存的资源加载得更快。
减少服务器负载–浏览器将只从服务器下载更改过的资源。
原理和环境
如上面提到的HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
就像cookie一样，html5的离线存储也需要服务器环境。
解析清单
在开始之前要先了解下manifest（即.appcache文件），上面的解析清单要怎么写。
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - ...
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
更新 --------------------------
受楼下答案的一些特殊情况影响，导致很多人都认为key不能"提高"diff速度。在此继续重新梳理一下答案。
在楼下的答案中，部分讨论都是基于没有key的情况diff速度会更快。确实，这种观点并没有错。没有绑定key的情况下，并且在遍历模板简单的情况下，会导致虚拟新旧节点对比更快，节点也会复用。而这种复用是就地复用，一种鸭子辩型的复用。以下为简单的例子:
123456789<div id="app"> <div v-for="i in dataList">{& ...
手机浏览器会把页面放入到一个虚拟的“视口”（viewpoint）中，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。通常这个虚拟的“视口”（viewport）比屏幕宽，会把网页挤到一个很小的窗口。
如果不显示地设置viewport，那么浏览器就会把width默认设置为980。但后果是浏览器出现横向滚动条，因为浏览器可视区域的宽度比默认的viewport的宽度小。
然后浏览器引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放。
1234567891011121314151617181920212223242526272829303132<!DOCTYPE html> <!--H5标准声明，使用 HTML5 doctype，不区分大小写--><head lang=”en”> <!--标准的 lang 属性写法--><meta charset=’utf-8′> <!--声明文档使用的字符编码-->< ...
回源原理
什么是回源？
网上查了下资料，回源大致是指浏览器在发送请求报文时，响应该请求报文的是源站点的服务器，而不是各节点上的缓存服务器，那么这个过程相对于通过各节点上的缓存服务器来响应的话就称作为回源。回源的请求或流量太多的话，有可能会让源站点的服务器承载着过大的访问压力，进而影响服务的正常访问。
如何计算回源比？
其实回源比和缓存的命中率正好相反，回源比高，说明缓存系统的缓存命中率低。回源比分为回源请求数比例和回源流量比例两种。
回源请求数比例：收集所有边缘节点上的请求记录，没有缓存或缓存过期的请求以及不可缓存的请求均被作为回源请求，发往源站点服务器响应。其他的请求则由缓存系统直接使用缓存响应。其计算公式为：回源请求数/（回源请求数+用户发送的请求数）。
回源流量比：即用户所产生的流量当中，有多少流量是直接有源站点服务器响应的，其计算公式为：回源流量/（回源流量+用户请求访问的流量）
CDN缓存
CDN，即Content Delivery Network，内容分发网络，其搭建的思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，尽量使内容传输的更快更稳定。CDN ...
什么是跨域？
世界上本没有跨域
浏览器有一个叫做同源策略的东西。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
同源策略规定了如果两个页面的协议、域名、端口中任意一个不相等，就认为两个页面具有不相同的源
两个不同源的页面资源交互会受到浏览器的同源策略限制，也就出现了我们说的跨域问题
配置proxyTable解决跨域问题
我们使用vue-cli生成的项目目录里，config下面的index.js有个proxyTable属性
然后我们做如下设置
123456789proxyTable: { // 这里可以理解为使用"/api" 代替 "target" 里的地址， // 比如说我们要调用的地址是 http://www.example.com/api/list, 则写成 /api/list 就可以了 '/api': { target: 'http://www.example.com&# ...
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
开发工具
regexr.com
正则表达式验证匹配
www.gitignore.io
根据选择生成.gitignore文件
unbug.github.io/codelf
变量命名推荐（支持中文）
www.html.cn/tool/css3Pr…
css box-shadow阴影预览及代码生成
www.internetke.com/jsEffects/2…
css渐变预览及代码生成
xuanfengge.com/easeing/cea…
css动画缓动函数预览及生成
www.toptal.com/developers/…
多张图片合成雪碧图，并生成对应css
tool.lu
众多工具集合，包括时间戳转换，进制转换等
www.bootcdn.cn 或 cdn.baomitu.com
国内的CDN库，速度快
www.jsdelivr.com
国外的cdn库，支持github，npm，WordPress
在线编辑
jsrun.net
国内网站，有代码提示，支持cdn库导入，不支持创建项目，有代码示例市场。
jsbin.com
国外网站，功能少，支持本地搭建
codepen.io
国外网站，支 ...
Web
未读content方面
减少HTTP请求：合并文件、CSS精灵、inline Image
减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
减少DOM元素数量
Server方面
使用CDN
配置ETag
对组件使用Gzip压缩
Cookie方面
减小cookie大小
css方面
将样式表放到页面顶部
不使用CSS表达式
使用<link>不使用@import
##Javascript方面
将脚本放到页面底部
将javascript和css从外部引入
压缩javascript和css
删除不需要的脚本
减少DOM访问
图片方面
优化图片：根据实际颜色需要选择色深、压缩
优化css精灵
不要在HTML中拉伸图片
