terminal

终端常用的快捷键：

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

Ctrl + d        删除一个字符，相当于通常的Delete键（命令行若无所有字符，则相当于exit；处理多行标准输入时也表示eof）
Ctrl + h        退格删除一个字符，相当于通常的Backspace键
Ctrl + u        删除光标之前到行首的字符
Ctrl + k        删除光标之前到行尾的字符
Ctrl + c        取消当前行输入的命令，相当于Ctrl + Break
Ctrl + a        光标移动到行首（Ahead of line），相当于通常的Home键
Ctrl + e        光标移动到行尾（End of line）
Ctrl + f        光标向前(Forward)移动一个字符位置
Ctrl + b        光标往回(Backward)移动一个字符位置
Ctrl + l        清屏，相当于执行clear命令
Ctrl + p        调出命令历史中的前一条（Previous）命令，相当于通常的上箭头
Ctrl + n        调出命令历史中的下一条（Next）命令，相当于通常的上箭头
Ctrl + r        显示：号提示，根据用户输入查找相关历史命令（reverse-i-search）

次常用快捷键：
Alt + f         光标向前（Forward）移动到下一个单词
Alt + b         光标往回（Backward）移动到前一个单词
Ctrl + w        删除从光标位置前到当前所处单词（Word）的开头
Alt + d         删除从光标位置到当前所处单词的末尾
Ctrl + y        粘贴最后一次被删除的单词

查找

1
2
3
4
5
6

find . -name "*蝙蝠侠*"

# 找出当前目录以及其所有子目录下所有名字中包含“蝙蝠侠”三字的文件

find . -name "*.rmvb" -maxdepth 1
# 找出当前目录（不包括子目录）下所有名字中后缀为".rmvb"的文件

mac下，有个locate命令，它自动建立和维护文件的索引，所以找起来非常快

例如：要找redis

1

locate redis

mac 显示隐藏文件
打开终端，输入：

1
2

defaults write com.apple.finder AppleShowAllFiles -bool true       此命令显示隐藏文件
defaults write com.apple.finder AppleShowAllFiles -bool false      此命令关闭显示隐藏文件

命令运行之后需要重新加载Finder：快捷键option+command+esc，选中Finder，重新启动即可

Mac 更新系统后无法使用git

解决方案：

在终端输入：

1

xcode-select --install

据说原因是因为每次更新系统之后xcode就被卸载了，因此需要重新安装一次。特此记录，以便查阅

如果需要禁止spotlight, 在终端中运行命令：

1

sudo mdutil  -a -i off

开启

1

sudo mdutil -a -i on

有的时候，它可能会造成问题，需要先关闭再开启，让他重新建立索引，可以运行命令：

1

sudo mdutil -E

为了查看它的状态，可以运行：

1

sudo mdutil -s

造成跨域的两种情况

造成跨域的两种策略浏览器的同源策略会导致跨域，这里同源策略又分为以下两种

1. DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
2. XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。

为什么要有跨域限制

了解完跨域之后，想必大家都会有这么一个思考，为什么要有跨域的限制，浏览器这么做是出于何种原因呢。其实仔细想一想就会明白，跨域限制主要是为了安全考虑。

AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略，相当危险，我们发起的每一次HTTP请求都会带上请求地址对应的cookie，那么可以做如下攻击：

1. 用户登录了自己的银行页面 http://mybank.com，http://mybank.com向用户的cookie中添加用户标识。
2. 用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。
3. http://evil.com向http://mybank.com发起AJAX HTTP请求，请求会默认把http://mybank.com对应cookie也同时发送过去。
4. 银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。
5. 而且由于Ajax在后台执行，用户无法感知这一过程。

DOM同源策略也一样，如果iframe之间可以跨域访问，可以这样攻击：

1. 做一个假网站，里面用iframe嵌套一个银行网站 http://mybank.com。
2. 把iframe宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
3. 这时如果用户输入账号密码，我们的主网站可以跨域访问到http://mybank.com的dom节点，就可以拿到用户的输入了，那么就完成了一次攻击。

所以说有了跨域跨域限制之后，我们才能更安全的上网了。

作者：黄家兴
链接：https://www.zhihu.com/question/26376773/answer/244453931
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

跨域的解决方式

跨域资源共享

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。

大体流程。

1. 对于客户端，我们还是正常使用xhr对象发送ajax请求。唯一需要注意的是，我们需要设置我们的xhr属性withCredentials为true，不然的话，cookie是带不过去的哦，设置： xhr.withCredentials = true;
2. 对于服务器端，需要在 response header中设置如下两个字段:Access-Control-Allow-Origin: http://www.yourhost.comAccess-Control-Allow-Credentials:true这样，我们就可以跨域请求接口了。

jsonp实现跨域

基本原理就是通过动态创建script标签,然后利用src属性进行跨域。

服务器代理

浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。

服务器代理是万能的。

####使用postMessage实现页面之间通信

信息传递除了客户端与服务器之前的传递，还存在以下几个问题：

1. 页面和新开的窗口的数据交互。
2. 多窗口之间的数据交互。
3. 页面与所嵌套的iframe之间的信息传递。

window.postMessage是一个HTML5的api，允许两个窗口之间进行跨域发送消息。这个应该就是以后解决dom跨域通用方法了，具体可以参照MDN。

回调-钩子 promise和async await

回调函数(callback)

回调函数的英文解释为：

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

翻译过来就是：回调函数是一个作为变量传递给另外一个函数的函数，它在主体函数执行完之后执行。

function A有一个参数function B，function B会在function A执行完成之后被调用执行。

钩子函数(hook)

钩子的概念源于Windows的消息处理机制，通过设置钩子，应用程序可以对所有的消息事件进行拦截，然后执行钩子函数，对消息进行想要的处理方式。

钩子函数在捕获消息的第一时间执行，回调函数不是

钩子函数和回调函数

• js派函数监听事件 => 监听函数就是所谓的钩子函数=>函数钩取事件：函数主动找事件=>钩子函数

• js预留函数给dom事件，dom事件调用js预留的函数 =>事件派发给函数：事件调用函数=>回调函数

钩子函数

let btn = document.getElementById("btn");
btn.onclick = () => {
    console.log("i'm a hook");
}

回调函数

btn.addEventListener("click",() =>{
    console.log(this.onclick);//undefined
});

JS由于自身的特殊性（单线程），上面的两段代码都是异步的。

Promise

JavaScript的代码都是单线程执行的。

导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。

异步执行可以用回调函数实现,但是不好看，而且不利于代码复用

所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。

Promise 对象的状态不受外界影响

三种状态:

• pending：进行中
• fulfilled :已经成功
• rejected 已经失败

状态改变：
Promise对象的状态改变，只有两种可能：

• 从pending变为fulfilled
• 从pending变为rejected。

这两种情况只要发生，状态就凝固了，不会再变了，这时就称为resolved（已定型）

基本用法
ES6规定，Promise对象是一个构造函数，用来生成Promise实例

const promist = new Promise(function(resolve,reject){
    if(/*异步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
})

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise 实例生成以后，可以用then 方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value){
//success
},function(error){
//failure
});

Async/Await

• async/await是写异步代码的新方式，以前的方法有回调函数和Promise。
• async/await是基于Promise实现的，它不能用于普通的回调函数。
• async/await与Promise一样，是非阻塞的。
• async/await使得异步代码看起来像同步代码，这正是它的魔力所在。

Async/Await语法

示例中，getJSON函数返回一个promise，这个promise成功resolve时会返回一个json对象。我们只是调用这个函数，打印返回的JSON对象，然后返回”done”。

使用Promise是这样的:

const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log(data)
      return "done"
    })

makeRequest()

使用Async/Await是这样的:

const makeRequest = async () => {
  console.log(await getJSON())
  return "done"
}

makeRequest()

区别:

• 函数前面多了一个aync关键字。await关键字只能用在aync定义的函数内。async函数会隐式地返回一个promise，该promise的reosolve值就是函数return的值。(示例中reosolve值就是字符串”done”)

• 不能在最外层代码中使用await，因为不在async函数内。

为什么Async/Await更好？

1.简洁

由示例可知，使用Async/Await明显节约了不少代码。

• 不需要写.then，
• 不需要写匿名函数处理Promise的resolve值，
• 不需要定义多余的data变量，还避免了嵌套代码。

这些小的优点会迅速累计起来，这在之后的代码示例中会更加明显。

2.错误处理

Async/Await让try/catch可以同时处理同步和异步错误。在下面的promise示例中，try/catch不能处理JSON.parse的错误，因为它在Promise中。我们需要使用.catch，这样错误处理代码非常冗余。并且，在我们的实际生产代码会更加复杂。

const makeRequest = () => {
  try {
    getJSON()
      .then(result => {
        // JSON.parse可能会出错
        const data = JSON.parse(result)
        console.log(data)
      })
      // 取消注释，处理异步代码的错误
      // .catch((err) => {
      //   console.log(err)
      // })
  } catch (err) {
    console.log(err)
  }
}

使用aync/await的话，catch能处理JSON.parse错误:

const makeRequest = async () => {
  try {
    // this parse may fail
    const data = JSON.parse(await getJSON())
    console.log(data)
  } catch (err) {
    console.log(err)
  }
}

• 3.条件语句
• 4.中间值
• 5.错误栈
• 6.调试