Blog

作为常用的跨域解决方案，怎么能不用原生实现一下呢！

jsonp跨域其实也是JavaScript设计模式中的一种代理模式。 在html页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的，所以我们可以通过这个“犯罪漏洞”来进行跨域。 一般，我们可以动态的创建script标签，再去请求一个带参网址来实现跨域通信。补充一点，JSONP不使用XMLHttpRequest对象加载资源，不属于真正意义上的AJAX。

1
2
3
4
5
6
7
8
9

// 实现目标
JSONP(url, {
  data: {
    key1: value1
  },
  callback: function (data) {
    // data 是服务端返回的数据
  }
})

作为一个开发人员，或多或少都听说过对称加密、非对称加密、摘要、数字签名、数字证书这几个概念，它们是用来保证在互联网通信过程中数据传输安全的。有人可能会有疑惑，我给传输数 据加个密不就安全了，为什么还要搞这么多花样出来？本文主要通过一个案例来讲解这几个概念的实际作用。

在此之前，我先简单介绍一下这几个概念。

对称加密

对称加密是指用来加密和解密的是同一个秘钥。其特点是加密速度快，但是秘钥容易被黑客截获，所以安全性不高。密钥不可能一开始在发送方和接收方都全部生成好了 需要在一方生成之后传递给另一方 如果在传递过程密钥被劫持 整个加密就不安全了。常见的有AES、DES算法。

非对称加密

非对称加密是指用来加密和解密的是不同的秘钥，它们是成对出现的，称为公钥和私钥，知道其中一个秘钥是无法推导出另外一个秘钥的。用公钥加密的内容需要用私钥才能解密，用私钥加密 的内容需要用公钥才能解密。非对称加密的特点是安全性高，缺点是加密速度慢。公钥对外公开 如果密文是私钥加密 那么任何人都能用公钥解密。常见的有RSA、ECC算法。

混合加密

在传递过程把我们的对称加密中的密钥用非对称加密的方式去传递就好了。

摘要

所谓的摘要就是一段信息或者一个文件通过某个哈希算法(也叫摘要算法)而得到的一串字符。摘要算法的特点就是不同的文件计算出的摘要是不同的(也有可能相同，但是可能性非常非常低)， 比如一个1G的视频文件，哪怕只是改动其中一个字节，最后计算得到的摘要也是完全不同的，所以摘要算法通常是用来判断文件是否被篡改过。其还有一个特点就是通过摘要是无法推导出源文 件的信息的。常用的摘要(散列)算法有MD5、SHA等。

数字签名

数字签名就是一个文件的摘要加密后的信息。数字签名是和源文件一起发送给接收方的，接收方收到后对文件用摘要算法算出一个摘要，然后和数字签名中的摘要进行比对，两者不一致的话说 明文件被篡改了。

数字证书

数字证书是一个经证书授权中心生成的文件，数字证书里一般会包含公钥、公钥拥有者名称、CA的数字签名、有效期、授权中心名称、证书序列号等信息。其中CA的数字签名是验证证书是否被 篡改的关键，它其实就是对证书里面除了CA的数字签名以外的内容进行摘要算法得到一个摘要，然后CA机构用他自己的私钥对这个摘要进行加密就生成了CA的数字签名，CA机构会公开它的公 钥，验证证书时就是用这个公钥解密CA的数字签名，然后用来验证证书是否被篡改。

https其实是有两部分组成：http + SSL / TLS加密数据包，也就是在HTTP上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过TLS进行加密，所以传输的数据都是加密后的数据。

https比http要占用更多的资源，http使用TCP 三次握手建立连接，客户端和服务器需要交换3个包，https除了 TCP 的三个包，还要加上 ssl握手需要的9个包，所以一共是12个包。

SSL的全称是Secure Sockets Layer，即安全套接层协议，是为网络通信提供安全及数据完整性的一种安全协议。SSL最新的版本是3.0。TLS的全称是Transport Layer Security，即安全传输层协议，是建立在SSL 3.0协议规范之上，是SSL 3.0的后续版本。

SSL/TLS = 非对称加密（如RSA、ECC） + 对称加密（如AES、DES） + 散列算法（如MD5）

1.对数据加密 2.验证网站服务器身份

原型对象的用途是为每个实例对象存储共享的方法和属性，它仅仅是一个普通对象而已，仅有一份。

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时， 如果这个对象内部不存在这个属性，那么它就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念

• “prototype” 是什么？ prototype 是所有公共方法和属性的宿主，从祖先派生的“子”对象可以从使用祖先的方法和属性。

原型是一个用于实现对象属性继承的对象。

构造函数创建对象

我们先使用构造函数创建一个对象：

1
2
3
4

function Person() {}
var person = new Person();
person.name = "cosyer";
console.log(person.name); // cosyer

在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。

1. 正则(xxx?typeId=2)

   1 2 3 4 5 6 7 8 9 10

   function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var r = window.location.search.substr(1).match(reg); if (r != null) { // return unescape(r[2]); // 中文会乱码 return decodeURI(r[2]); } return null; } getQueryString("typeId") // "2"

今天10月31日，万圣节前夜。希望ff的病早点好，身体健康。

创建对象(字面量、构造函数、create方法、调用函数返回对象)

1
2
3
4
5
6
7
8
9

var obj = {} // 字面量 
var obj = new Object() // 很少见，性能低 没有形参时可省略()
var obj = Object.create(null) // 以xx为原型创建对象
var obj = Object.assign({})   // 复制到目标对象
// Object.assign()还可以去除多余的参数覆盖
Object.assign({ a: 1, b: 2 }, { b: 3, c: 3 })
const newObj = { ...{ a: 1, b: 2 }, ...{ b: 3, c: 3 } }
// {a: 1, b: 3, c: 3}
// Object() ==> {}

this 的指向

this 是 js 中定义的关键字， 它的指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了 this 指向。在实际应用中，this的指向大致可以分为以下四种情况。

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁(取决于函数的调用位置)，实际上this的最终指向的是那个调用它的对象(函数的直接调用者);

Async/Await是一种允许我们像构建没有回调函数的普通函数一样构建Promise的新语法。以往的异步方法无外乎回调函数和Promise。但是Async/Await建立于Promise之上。

生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字，有意思的是函数会在每个yield后暂停。

这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号，机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了，直到下一个人再次唤起才会继续吐票。

从图中可以看出：

• 观察者与目标（被观察者）是直接进行交互的，包括订阅和触发。
• 发布订阅模式是透过一个中间者当调度中心，相关的订阅与发布都由调度中心来进行协调。（适合更复杂的场景）

两者的优缺点：

• 观察者模式：优点就是一一对应，比较直观明了，占用内存资源容易进行回收。缺点就是两者耦合。
• 发布订阅模式：优点就是一方面实现了发布者与订阅者之间的解耦，中间者可在两者操作之间进行更细粒度的控制。如：条件过滤发布，权限控制等等。缺点就是整一个中间调度会越来越庞大，需要手动清除里面的发布回调。

举个栗子：

• 观察者模式：彩票中心里，管理员充当目标对象（被观察者），彩民充当观察者，当管理员说公布一等奖号码时，即给各个观察者发布了消息，然后彩民（观察者）就收到发布消息，进行自己的后续操作（兑奖）。

• 发布订阅模式：每家每户向牛奶订购中心订购了牛奶，但是各家的牛奶品牌不一样，有燕塘、蒙牛等等。当燕塘牛奶来货了，订阅中心就给订购燕塘的各家各户派发燕塘牛奶。同理，当蒙牛到货时，订阅中心发布蒙牛的牛奶。