前言

今年的故事有点特别，那就从春夏秋冬简单说一下吧。

Cookie

为什么会有 Cookie

HTTP 协议是无状态的，HTTP 协议自身不对请求和响应之间的通信状态进行保存

什么是 Cookie

Cookie 指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密，如 token )。

通过给每个不同的客户端一些带有特定信息的 Cookie，就可以在每次请求的时候，服务器获取到一些期望获取的信息，比如知道这次访问的用户是谁( token )。

• 其实 Cookie 就是一种浏览器管理状态的一个文件。

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

name:一个唯一确定的 cookie 名称。通常来讲 cookie 的名称是不区分大小写的。
value:存储在 cookie 中的字符串值。最好为 cookie 的 name 和 value 进行 url 编码
domain:cookie 对于哪个域是有效的。所有向该域发送的请求中都会包含这个 cookie 信息。同一个域名下的二级域名是不可以交换使用cookie的，比如，你设置www.baidu.com和image.baidu.com, 是不能公用的
path: 表示这个 cookie 影响到的路径，浏览器跟会根据这项配置，像指定域中匹配的路径发送 cookie。
expires:失效时间，表示 cookie 何时应该被删除的时间戳(也就是，何时应该停止向服务器发送这个 cookie)。如果不设置这个时间戳，浏览器会在页面关闭时即将删除所有 cookie；不过也可以自己设置删除时间。这个值是 GMT 时间格式，如果客户端和服务器端时间不一致，使用 expires 就会存在偏差。
max-age: 与 expires 作用相同，用来告诉浏览器此 cookie 多久过期（单位是秒），而不是一个固定的时间点。正常情况下，max-age 的优先级高于 expires。
HttpOnly: 告知浏览器不允许通过脚本 document.cookie 去更改这个值，同样这个值在 document.cookie 中也不可见。但在 http 请求张仍然会携带这个 cookie。注意这个值虽然在脚本中不可获取，但仍然在浏览器安装目录中以文件形式存在。这项设置通常在服务器端设置。
secure: 安全标志，指定后，只有在使用 SSL 链接时候才能发送到服务器，如果是 http 链接则不会传递该信息。就算设置了 secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以不要把重要信息放 cookie 就对了

前言

2018 年，很累的一年。所幸已是最后一天。

曾经梦想仗剑走天涯 现实柴米油盐酱醋茶

大半个月前，去重温了一下 冴羽 的博客。就想着把执行上下文的东西写写，但是因为考试，一直没有写出来，现在有空，刚好就把它给写完，作为 2018 年最后一篇技术文。

执行上下文栈

当 JavaScript 顺序执行下来的时候，会遇到三种可执行代码，全局代码，函数代码，eval代码

当 JavaScript 遇到执行到这些代码的时候，会创建一个环境，执行上下文，与此同时，会将这个环境压入一个名为执行上下文栈的环境去管理不同的执行上下文。

执行上下文(Execution context);

执行上下文栈(Execution context stack, ECS);

形象点可以模拟成一个数组 ECStack = [];

在 Javascript 开始解释代码的时候，最先遇到的是全局代码，所以全局代码的执行上下文最先入栈，globalContext.

1
2
3
4
5

const ECStack = [];
ECStack.push(globalContext);
ECStack = [globalContext];

开头总是不知道写些什么东西……

为什么要有事件循环

JavaScript 被设计的初愿是执行在浏览器上可以动态加载的脚本，以便进行 DOM 节点的操作，所以，如果它是像 Java 一样的多线程语言，那么对 DOM 的操作就是未知且不可预测的了。

所以：

JavaScript 是一门单线程语言。

单线程就意味着有丶事情做起来没那么理想化，比如读取一个文件的事件，你以为它读完了文件内容而进行下一步的操作，然而运行的时候却发现，并没有这个结果存在，最后才发现，oh！！原来这个操作是异步的。。对，没错，单线程由此引出了 同步 和 异步 的问题。只有将某些操作(如读取文件)，作为异步执行，才能避免 阻塞 ，使脚本执行时间更迅速，用户体验更好。

所谓的事件循环，就是 JavaScript 执行异步操作的过程

前言

2018-08-31 09:58:41 拖了一个月的总结，在八月的最后一天，还上了。

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。

说实话，我起始真的不知道怎么去介绍缓存，所以引用了上面相对官方的定义。我想几乎每个开发者都碰到过缓存的问题吧，甚至有很多情况下我们会说这个问题已经修复了,你清理下缓存就好了。这篇文章我们就细细的来挖掘下缓存的种种轶事。

🦋缓存的种类

很多开发者习惯把cookie、webStorage以及IndexedDB存储的数据也称之为缓存，理由是都是保存在客户端的数据，没有什么区别。其实这是不严谨的，cookie的存在更多的是为了让服务端区别用户，webStorage和IndexedDB则更多用在保存具体的数据和在客户端存储大量结构化数据(文件/blobs)上面。

实际上所谓的缓存只有一种——它是请求资源的副本。试想一下，如果每一个资源我们客户端都会保存一份副本，这会怎么样？客户端会炸掉，开发者会疯掉！所以我们需要一份协议来处理缓存，可以让开发者控制缓存的建立和删除。谁呢？还能有谁，HTTP呗。HTTP协议里定义了很多关于缓存的请求和响应字段，这也是接下来我们重点要逼逼叨的对象，研究下究竟是哪些字段怎么影响缓存的。

jQuery 操作 DOM

捕获

text( ) 返回文本内容

html( ) 返回元素内容（包括html标记）

val( ) 返回字段的值

attr( ) 获取属性值

1

$(selector).attr("href")

同时以上方法均可以为元素赋新值

1
2
3
4
5
6
7
8
9

$(selector).text("This is new Value")
$(selector).html("<b>This is new Value</b>")
$(selector).val("This is new Value")
$(selector).attr("href", "https://glorylin0704.github.io")
// attr 可以设置多个属性
$(selector).attr({
    "href": "https://glorylin0704.github.io/",
    "title": "博客"
})

同时以上方法均有回调函数，两个参数，第一个是当前元素的下标，第二个是原始的值，函数返回值作为新值

1
2
3
4
5
6
7

$(selector).xxx(function(i, oldText){
    return newValue    
})
$(selector).attr("href", function(i, oldText){
    return newValue
})

开始

1
2
3
4
5
6
7
8
9

//两种开始方式
$(function(){
	//jQuery 代码
})
$(document).ready(function(){
	// jQuery 代码
})

事件

jQuery 是为事件处理特别设计的

鼠标事件：

click dblclick：点击事件，单击和双击

mouseenter mouseleave mousedown mouseup：鼠标移上去、移开、点下去、点击松开

hover(function, function) 第一个函数是 `mouseenter` 第二个函数是 `mouseleave` 

focus blur：焦点，获取焦点和失去焦点

键盘事件：

keypress keydown keyup

前几天，跟着教程写了一个 Vue 的仿新闻端的小项目。

项目结构

用 vue init webpack-simple xxx 构建项目，内部的主要结构

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

————根目录
    —— src                  //主要的代码
        —— assets           //静态文件，css,js,img
        —— components       //组件
        —— filters          //过滤器
        —— store            //Vuex
        —— App.vue          //页面级的Vue
        —— main.js          //实例化Vue及全局引入一些东西
        —— router.config.js //路由配置
    —— webpack.config.js    //webpack配置 
    —— index.html           //输出
    —— ……                   //webpack的一些东西