什么是Cookie 因为HTTP协议是无状态的，导致两个执行成功的请求之间是没有关系的。这就带来了一个问题，用户没有办法在同一个网站中进行连续的交互，比如在一个电商网站里，用户把某个商品加入到购物车，切换一个页面后再次添加了商品，这两次添加商品的请求之间没有关联，浏览器无法知道用户最终选择了哪些商品。而Cookie就是用来解决这类问题的 Cookie，又称为‘小甜饼’，是服务器发送到浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发送请求时携带并发送到服务器上（服务器可以设置或读取Cookies中包含信息），借此维护用户跟服务器会话中的状态。 Cookie主要用于以下三个方面： 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息） 个性化设置（如用户自定义设置、主题等） 浏览器行为跟踪（如跟踪分析用户行为等） 分类 Cookie总是保存在客户端中，可以简单的分为会话期Cookie和持久性Cookie 会话期Cookie是最简单的Cookie：浏览器关闭之后它会被自动删除，也就是说它仅在会话期内有效。会话期Cookie不需要指定过期时间（Expires）或者有效期（Max-Age）。需要注意的是，有些浏览器提供了会话恢复功能，这种情况下即使关闭了浏览器，会话期Cookie也会被保留下来，就好像浏览器从来没有关闭一样。 持久性Cookie和关闭浏览器便失效的会话期Cookie不同，持久性Cookie设置了特定的过期时间（Expires）或有效期（Max-Age）。如: Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; 持久性Cookie保存在硬盘里，除非用户手工清理或到了过期时间，否则Cookie不会被删除，其存在时间是长期的。 若设置了过期时间，则是持久性Cookie（浏览器会把Cookie存成文件保存到硬盘上），未设置则是会话期Cookie （浏览器关闭时将会被删掉） 另外: 登录页面上的记住我或十天内免登录的功能就是通过设置cookie的过期时间来实现的，例如把过期时间设置成十天后，就实现了十天内免登录 过程 设置Cookie过程 以登录为例： 写代码实际操作下: 配置后端服务testServer，在终端执行以下命令: mkdir testServer && cd testServer && touch app.js && npm init -y && npm i -D express cookie-parser app.js添加如下内容: //app.js const express = require('express') const cookieParser = require('cookie-parser') const app = express(); const port = 3000 app.use(cookieParser()) app.get('/', (req, res) => { console....

Vue 教程二 上篇讲了通过script方式引入vue来开发项目，这篇会结合webpack进行vue的模块化开发，读完本篇你会知道如何进行vue的模块化开发。 首先需要了解下vue的单文件组件SFC及webpack的vue插件vue-loader: 单文件组件（SFC）和Vue Loader 当使用基于HTML模板的vue组件时，会带来些困难：要么使用 JavaScript 的模板字符串，要么将模板和组件定义写到不同文件里或使用内联模板 例1: Vue.component('blog-post', { props: ['post'], template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <div v-html="post.content"></div> </div> ` }) 模板写在组件定义里 使用 JavaScript 的模板字符串时，它们在 IE 下并没有被支持，所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE，要么使用折行转义字符取而代之 例2: <script type="text/x-template" id="hello-world-template"> <p>Hello hello hello</p> </script> Vue.component('hello-world', { template: '#hello-world-template' }) 如上是把模板定义在html里，然后js引用 在这些情况下导致代码不好维护，Vue提供了单文件组件（Single FIle Components）来解决这个问题，将模板、组件定义、CSS写在一个.vue文件里 //MyComponent.vue <template> <div id="my-component">...</div> </template> <script> export default { ... } </script> <style> #my-component { ....

Vue 概览 阅读完，你会知道Vue特性，懂得在项目中如何使用(小项目和复杂项目component) 什么是Vue Vue是构建用户界面的渐进式框架，自底向上设计。核心库只关注视图层，所以很容易与其他库或现有项目进行集成。 什么是渐进式？ pro‧gres‧sive /prə’ɡresiv / adjective 1. happening or developing gradually or in stages; proceeding step by step 逐步或分阶段发生或发展; 一步一步地进行 项目的不同阶段可以使用不同的部分，可增量地采用。非侵入式，你可以只用它的一部分，而不会因为用了它这一部分就必须用其它所有部分。有时可以把它当成库来用，也可以是框架，也可以用它的全家桶（SFC、Vuex、Router、SSR等）。 比如： 你可以把vue 当成一个js库来使用，就用来收集form表单，和表单验证。 可以把 整个页面的dom 用Vue 来管理，你会发现关注点由操作dom变成了关注数据的变化，用数据驱动DOM的变化。 可以用 webpack + vue-router控制路由。 可以用vuex 处理数据在组件之间的流动，做状态管理。 可以考虑用vue的SSR 做优化。 参考: vue渐进式概念讨论 Evan You分享的ppt 安装 直接<script>引入，直接下载开发或生产版本并用<stript>标签引入，也可以用CDN链接，这时Vue会被注册为一个全局变量。 NPM安装，在用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如webpack或Browserify模块打包器配合使用。同时Vue也提供配套工具(vue-loader)来开发单文件组件。 命令行工具（CLI），Vue提供了一个vue-cli工具，为单页面应用(SPA)快速搭建繁杂的脚手架(包含vue、webpack及相关插件)。 对不同构建版本的解释 在npm包的dist/目录里会找到很多不同的 Vue.js 构建版本详见 UMD CommonJS ES Module 完成版 vue.js vue.common.js vue.esm.js 只包含运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js 完整版（生产环境） vue.min.js - - 只包含运行时版（生产环境） vue.runtime.min.js - - 完整版：同时包含编译器和运行时的版本。 编译器：用来将模板字符串编译为JavaScript渲染函数的代码。 运行时：基本上是除去编译器的其它一切。 UMD：UMD版本可以通过<script>标签直接用在浏览器中。 CommonJS：构建工具browserify或webpack1会用到CommonJS版本。 ES Module：构建工具webpack2+或rollup，会使用ES Module版本（看后面的vue的引入机制分析）。 参考: 项目引入vue的方式 webpack 里resolve的mainfields Vue 选项对象中的 el 属性、template属性和 render 渲染函数的关系...

Webpack是什么 Webpack是模块打包器，它可以处理CommonJS、AMD以及ES6模块系统；Webpack有一些灵活、酷炫的功能特性, 如: 代码分离：可以把多个模块所引用到的代码打包到一个文件，即抽取公共代码并打包至单独的文件里 加载器(loader)：有了loader，你可以在js中加载各种类型文件 插件(plugin)：可让你定制打包操作 使用教程 先看本教程最终webpack配置，看不懂没关系，教程会一步步说明每个配置 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const variables = require('./variables.js'); const package = require('./package.json'); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const devMode = process.env.NODE_ENV != 'production'; module.exports = { mode: 'development', // watch: true, entry: { app: './src/index.js', vendor: Object.keys(package.dependencies), settings: './src/settings.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, resolve: { extensions: ['....

JavaScript模块化演进 什么是模块化 就是把原来聚合在一起的各类代码，按功能、职责（逻辑层、数据层、测试）等划分，分散到不同的模块文件中，分离关注点 使用模块的好处 模块化可以降低代码（功能）之间耦合，同时具有以下好处： 命名空间：可以避免命名（变量、函数、类名等重名）污染，减少不必要的全局变量 代码易维护和扩展：设计良好的模块，彼此间会尽量减少依赖，方便对其独立改造或扩展，比起一坨代码，维护独立的模块肯定轻松的多 代码复用：跟复制粘贴说拜拜，因为你有个可重复使用的模块 ...