[{"title":"前端工程化-CI之Github Actions","date":"2022-07-12T14:57:56.000Z","path":"2022/07/12/前端工程化-CI之Github Actions/","text":"前言：在 CI/CD 和 DevOps 领域中，持续交付和持续部署是一个老生常谈的话题，也属于前端工程化的范畴。持续集成这个术语最早是在 1994 年由 Grady Booch 提出。持续集成是借助工具对软件项目进行持续的自动化的编译打包构建测试发布，来检查软件交付质量的一种行为。而持续部署是基于持续交付的优势自动将经过测试的代码推入生产环境的过程。接下来我们主要来聊聊前端工程化中的持续集成服务（CI）。 目前社区已有一些出色的持续集成服务（CI）的选择： Jenkins Travis CI GitLab CI CircleCI GitHub Actions … 下面我们主要介绍一下 GitHub Actions： 它使用起来比较简单，只要在我们的仓库根目录建立.github/workflows文件夹，然后将我们的工作流配置(YAML 文件)放到这个目录下，就能启用GitHub Actions服务。 GitHub Actions 是什么Github Actions 是 Github 的持续集成服务（CI），在 2018 年 10 月推出。 我们知道，持续集成（CI）由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub 把这些操作都称为 actions。 很多操作在不同项目里面是类似的，脚本完全可以共享。因此 GitHub 允许开发者把每个操作写成独立的脚本文件，存放到代码仓库并发布到官方市场，使得其他开发者可以直接引用。 GitHub Actions 基本概念GitHub Actions 有一些自己的术语： workflow （工作流程）：持续集成一次运行的过程，就是一个 workflow。 job （任务）：一个 workflow 由一个或多个 jobs 构成，含义是一次持续集成的运行，可以完成多个任务。 step（步骤）：每个 job 由多个 step 构成，一步步完成。 action （动作）：每个 step 可以依次执行一个或多个命令（action）。 GitHub Actions 使用它使用起来比较简单，只要在我们的仓库根目录建立.github/workflows文件夹，然后将我们的工作流配置文件（YAML 格式文件）放到这个目录下。（GitHub Actions 的配置文件叫做 workflow 文件，文件名我们可以任意取，后缀名统一为.yml，比如 ci.yml。一个库可以有多个 workflow 文件，GitHub 只要发现.github/workflows目录里面有.yml文件，就会自动运行该文件） 如下是一个需要 CI 运行 yarn ci 的 workflow 文件示例： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758# name 字段是 workflow 的名称。如果省略该字段，默认为当前 workflow 的文件名name: ci# on 字段指定触发 workflow 的条件，通常是某些事件，如下是 push 事件和 pull_request 事件触发 workflowon: push: # 指定只有 main 分支发生 push 事件时，才会触发 workflow branches: [main] pull_request: branches: [main]# jobs 字段，表示要执行的一项或多项任务jobs: # 每一项任务的 job_id，这里是 build 作为 job_id build: # name 字段是任务的说明 name: build # runs-on字段指定运行所需要的虚拟机环境。它是必填字段。有如下三种 runs-on: ubuntu-latest # runs-on: windows-latest # runs-on: macOS-latest # steps 字段指定每一项任务的运行步骤，可以包含一个或多个步骤 steps: # 步骤名称 - name: Checkout # 使用的 action uses: actions/checkout@v3 - name: Setup Node.js environment uses: actions/setup-node@v3 # 定义的输入参数，每个输入参数都是一个键/值对 with: node-version: 16 - name: Cache node modules uses: actions/cache@v3 # 该步骤所需的环境变量 env: cache-name: cache-node-modules with: path: ./node_modules key: ${{ runner.os }}-build-cache-node-modules-${{ hashFiles('**/package.json') }} restore-keys: | cache-node-modules- - name: Run ci # 该步骤运行的命令或者 action run: | yarn yarn ci # 下面运行顺序依次为：job1、job2、job3 # job1: # job2: # needs 字段指定当前任务的依赖关系，即运行顺序 # needs: job1 # job3: # needs: [job1, job2] 更多语法参考：GitHub Actions 的工作流程语法 示例：npm 包自动发布因为我也会经常的在 Github 上开源一些工具类，同时需要同步发 布到 npm 上，因此也是希望代码提交后能自动的实现 npm 包的发布。接下来就主要记录一下使用 GitHub Actions 自动发布 npm 包。 eg：hzzlyxx/eslint-config-ts 1、生成 npm Access Tokencreating-and-viewing-access-tokens 登录 npm 官网，在头像下拉选项中选中 Access Tokens 进入界面 点击 Generate New Token 按钮，选择 Automation 或者 publish 选项，再点击 Generate Token 按钮 界面提示 Successfully generated a new token! ，复制生成的 token 2、注入 secret 点击仓库上 Settings 菜单进入设置界面 在左侧菜单栏选中 Secrets/actions 进入，然后点击 New repository secret 按钮，输入表单信息，Name 为 NPM_TOKEN，Value 为上一步生成的 npm Access Token，最后点击 Add Secret 按钮添加完成 3、添加 yml 文件在仓库根目录建立.github/workflows文件夹，并新建 npm.yml 文件，填写如下内容： 12345678910111213141516name: publishon: [push, pull_request]jobs: publish: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 16 - name: Npm Publish uses: JS-DevTools/npm-publish@v1 with: token: ${{ secrets.NPM_TOKEN }} 4、push 代码保存上面的文件后，将整个仓库推送到 GitHub。 GitHub 发现了 workflow 文件以后，就会自动运行。然后就可以在仓库的 Actions 菜单查看日志，日志默认保存 30 天。 Tips：package 的 version，是由代码库中的 package.json -> version 指定的， 如果要重新发布，需要手动修改 version 值。 5、npm 上查看回到 npm 上，查看账户下的 packages。如果有，说明自动发布成功了。 小结到这，我们的GitHub Actions持续集成服务（CI）就告一段落了，后续还将探索其他 CI 方案以及前端工程化。 参考 GitHub Actions 入门教程","tags":[{"name":"CICD","slug":"CICD","permalink":"http://yoursite.com/tags/CICD/"}]},{"title":"webpack5升级之旅","date":"2022-03-21T15:33:11.000Z","path":"2022/03/21/webpack5升级之旅/","text":"前言：2020 年 10 月 10 日，webpack5 正式发布，并带来了诸多重大的变更，使前端的构建效率与质量大为提升。最近也是趁着空闲时间把项目里的 webapck4 进行了升级，接下来就介绍一下我的踩坑升级之旅吧。 准备工作node 版本Webpack 5 对 Node.js 的版本要求至少是 10.13.0 (LTS)，如果还在使用旧版本的 Node.js，需要进行升级。 升级 webpack1yarn add webpack webpack-cli -D 检查依赖是否过期及升级相关包的版本1yarn outdated 将会列出package.json所有依赖的版本信息，包括当前安装版本，给予 semver 渴望的版本以及最新的版本。 接下来就说升级所有使用到的 plugin 和 loader 为最新的可用版本。 升级废弃的配置项如有使用以下的配置项，请升级至最新的版本： optimization.hashedModuleIds: true → optimization.moduleIds: 'hashed' optimization.namedChunks: true → optimization.chunkIds: 'named' optimization.namedModules: true → optimization.moduleIds: 'named' NamedModulesPlugin → optimization.moduleIds: 'named' NamedChunksPlugin → optimization.chunkIds: 'named' HashedModuleIdsPlugin → optimization.moduleIds: 'hashed' optimization.noEmitOnErrors: false → optimization.emitOnErrors: true optimization.occurrenceOrder: true → optimization: { chunkIds: 'total-size', moduleIds: 'size' } optimization.splitChunks.cacheGroups.vendors → optimization.splitChunks.cacheGroups.defaultVendors Compilation.entries → Compilation.entryDependencies serve → serve 已被移除，推荐使用 DevServer Rule.query (从 v3 开始被移除) → Rule.options/UseEntry.options 清理配置 将 optimization.moduleIds 和 optimization.chunkIds 从配置中移除，使用默认值会更合适，因为它们会在 production 模式 下支持长效缓存且可以在 development 模式` 下进行调试。 将配置中使用的 [hash] 占位符改为 [contenthash]。效果一致，但事实证明会更为有效 正则表达式参数的 IgnorePlugin，现已支持传入一个 options 对象：`new IgnorePlugin({ resourceRegExp: /regExp/ }) 踩坑记录点1、webpack-dev-server配置属性变更 contentBase -> static.directory 移除 stats 移除 disableHostCheck openPage -> open before -> onBeforeSetupMiddleware after -> onAfterSetupMiddleware … 以上列举了一些常用配置修改，具体 v3 升级到 v4 的迁移指南可以查看官方文档 https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md 2、多入口开启 hot: true 热更新无效123optimization: { runtimeChunk: 'single'}, 具体可以查看webpack-dev-server/issues/2792 3、JSON 模块需要使用具名导出12import pkg from './package.json';console.log(pkg.version); 4、webpack-merge 变更12345// webpack 4.xconst merge = require('webpack-merge');// webpack 5.xconst { merge } = require('webpack-merge'); 5、optimize-css-assets-webpack-plugin 变更（官方准备弃用了）使用官方推荐的新插件：css-minimizer-webpack-plugin 1yarn add css-minimizer-webpack-plugin -D 6、url-loader、file-loader、raw-loader（将来会被淘汰）官方推荐：资源模块 7、config.module.rules 里配置了 loaderswebpack5 不再支持 loaders 的属性，需要改成 use 1234{ test: /\\.(sc|sa|c)ss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],} 8、heap-eval-module-source-map 名称修改需要改成 eval-cheap-module-source-map 9、copy-webpack-plugin 报错 ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema. 12345678910111213module.exports = { plugins: [ // webpack 4.x new CopyWebpackPlugin(['public']) // webpack 5.x new CopyWebpackPlugin({ patterns: [ { from: 'public', to: 'public' } ] }) ]} 10、去除 dll在 webpack5 中已经不建议使用这种方式进行模块缓存，因为其已经内置了更好的 cache 方法 11、cache 持久化缓存通过配置 cache 缓存生成的 webpack 模块和 chunk，来改善构建速度。 webpack5 默认将构建的缓存结果放在 node_modules/.cache 目录下，可以通过配置更改目录。 1234567891011121314module.exports = { cache: { // 将缓存类型设置为文件系统 type: 'filesystem', buildDependencies: { /* 将你的 config 添加为 buildDependency，以便在改变 config 时获得缓存无效 */ config: [__filename], /* 如果有其他的东西被构建依赖，你可以在这里添加它们 */ /* 注意，webpack.config，加载器和所有从你的配置中引用的模块都会被自动添加 */ }, // 指定缓存的版本 version: '1.0', },}; Tips: cache 的属性 type 会在开发模式下被默认设置成 memory，而且在生产模式中被禁用，所以如果想要在生产打包时使用缓存需要显式的设置。 为了防止缓存过于固定，导致更改构建配置无感知，依然使用旧的缓存，默认情况下，每次修改构建配置文件都会导致重新开始缓存。当然也可以自己主动设置 version 来控制缓存的更新。 更多缓存配置可以参考官方文档 https://webpack.js.org/configuration/other-options/#cache 12、Node Polyfill 脚本被移除webpack4 版本中附带了大多数 Node.js 核心模块的 polyfill，一旦前端使用了任何核心模块，这些模块就会自动应用，但是其实有些是不必要的。 webpack5 将不会自动为 Node.js 模块添加 polyfill，而是更专注的投入到前端模块的兼容中。因此需要开发者手动添加合适的 polyfill。 13、Module FederationModule Federation 使得使 JavaScript 应用得以从另一个 JavaScript 应用中动态地加载代码 —— 同时共享依赖。相当于 webpack 提供了线上 runtime 的环境，多个应用利用 CDN 共享组件或应用，不需要本地安装 npm 包再构建了。 具体配置可以查看官方文档 https://webpack.js.org/concepts/module-federation/ 我的 webpack5 项目配置参考 https://github.com/hzzlyxx/webpack5 总结webpack5 正式发布已经有段时间了，总的来说： 在加构建性能大幅度提升，依赖核心代码层面的持久缓存 cache，可大大加快二次构建速度 在打包体积上能有效减少，依赖更优的 Tree Shaking 默认支持浏览器长期缓存，降低配置门槛 令人激动的新特性 Module Federation，蕴含极大的可能性 参考 https://webpack.js.org/ https://webpack.js.org/migrate/5/ https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md","tags":[{"name":"webpack","slug":"webpack","permalink":"http://yoursite.com/tags/webpack/"}]},{"title":"组件库文档v1.0","date":"2021-08-30T06:52:13.000Z","path":"2021/08/30/组件库文档v1.0/","text":"上篇我们具体介绍了一些组件库的搭建，这篇我们将介绍一下组件库文档 1.0 的构建生成过程。 需求首先来看一下组件库文档最基本的一些需求： 提供组件的介绍说明 提供组件的属性列表 Props 提供组件调用的示例源码 Usage 提供组件调用的演示 demo 方案我们前期规范好了 markdown 说明文件以及 demo 文件，我们就可以直接通过 node 的读写文件再配合 react 菜单路由的方式进行生成： node 读写文件 react 路由 规范在上篇我们讲到对于一个组件，需要在开发组件时编写好组件的说明文档 markdown 文件以及 demo，文档规范如下： 1234567891011121314151617181920212223242526272829## Input#### 输入框组件。## Input Props：| 参数 | 说明 | 类型 | 默认值 || ---------- | ------------------------ | -------------------------------------------- | ------- || disabled | 是否禁用 | boolean | - || icon | input 图标 | React.ReactElement | - || iconPlace | input 图标渲染位置 | 'left' \\| 'right' | 'right' || allowClear | 是否可清除，渲染清除图标 | boolean | false || showNumber | 是否渲染字数计算 | boolean | false || maxLength | 最大输入长度 | number | 70 || onChange | input 输入框改变的回调 | (e: ChangeEvent\\<HTMLInputElement\\>) => void | - |> Tip：Input 的 props 不止上面列举的项，可传入原生 input 的所有属性### Usage```jsimport { Input } from "@hzzly/components";const onChange = (e) => { console.log("Value: ", e.target.value);};ReactDOM.render(<Input icon={<Icon />} onChange={onChange} />, mountNode);``` 这也是我们目前定义的组件 markdown 规范，这样书写一个 markdown 文件就能满足前三点的需求，最后一点我们单独定义了一个 demo 文件来进行组件的演示和调试。 技术实现node 读写 markdown 和 demo123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960/** * 读取组件库 */function readComponents() { const markdowns = {}; const demos = {}; const components = []; const dir = path.join(__dirname, "../src"); const dirs = fs .readdirSync(dir) .filter( (f) => f.indexOf(".") < 0 && f.toLowerCase().indexOf("components") > -1 ); dirs.forEach((d) => { const absolutePath = path.join(dir, d); if (this.isDir(absolutePath)) { fs.readdirSync(absolutePath).forEach((f) => { components.push(f); const mdPath = path.join(dir, `./${d}/${f}/index.md`); const demoPath = path.join(dir, `./${d}/${f}/demo.tsx`); if (fs.existsSync(mdPath)) { markdowns[f] = fs.readFileSync(mdPath).toString(); } if (fs.existsSync(demoPath)) { demos[f] = `../src/${d}/${f}/demo`; } }); } }); return { components, markdowns, demos, };}/** * 写入markdown字符串 */function writeMd() { let { markdowns } = readComponents(); markdowns = { ...markdowns, Welcome: fs .readFileSync(path.join(__dirname, `../src/welcome.md`)) .toString(), }; const str = JSON.stringify(markdowns, "", "\\t"); fs.writeFile( path.join(__dirname, "../src/md.ts"), `export default ${str}`, (err) => { if (err) { console.error(err); } console.log("写入配置成功!"); } );} 自动生成组件及路由123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384/** * 创建组件 */function createComponents() { const { components, demos } = readComponents(); components.forEach((component) => this.createComponent(component, demos));}function createComponent(name, demos) { const to = path.resolve(__dirname, `../src/pages/${name}.tsx`); fs.ensureFileSync(to); // 确保文件存在(文件目录结构没有会新建) const template = `import React from 'react';import { markdown } from '@/utils';${demo[name] ? `import Demo from '${demo[name]}';` : ""}interface Props {}const index: React.FC<Props> = () => { return ( <> <div className="markdown" // eslint-disable-next-line react/no-danger dangerouslySetInnerHTML={{ __html: markdown('${name}') }} /> <div className="demo"> <h2 className="demo-title">演示</h2> ${demo[name] ? "<Demo />" : "<p>演示代码</p>"} </div> </> )}export default index;`; fs.outputFileSync(to, template);}/** * 写入路由 */function writeRouter() { const { components } = readComponents(); const template = `import React from 'react';import { RouteConfig } from "react-router-config";import Home from '@/pages/Home';import Welcome from '@/pages/Welcome';const MarkDown = React.lazy(() => import(/* webpackChunkName: "IMarkDown" */ '@/pages/MarkDown'));${components .map( (component) => `const ${component} = React.lazy(() => import(/* webpackChunkName: "I${component}" */ '@/pages/${component}'));` ) .join("\\n")}const routes: RouteConfig[] = [ { path: '/', component: Home, children: [ { path: "/welcome", component: Welcome, name: 'Welcome' }, { path: "/markdown", component: MarkDown, name: 'MarkDown测试' }, ${components .map((component) => { if (component.toLowerCase().indexOf("js") > -1) { return `{ path: "/${component.toLowerCase()}", component: ${component}, name: '${component}' },`; } else { return `{ path: "/${component .replace(/\\B([A-Z])/g, "-$1") .toLowerCase()}", component: ${component}, name: '${component}' },`; } }) .join("\\n ")} ], },];export default routes;`; fs.outputFileSync(path.join(__dirname, `../src/router/index.ts`), template);} markdown 解析12345678910111213141516171819202122232425262728// utils.tsimport marked from "marked";import hljs from "highlight.js/lib/core";import javascript from "highlight.js/lib/languages/javascript";import md from "@/md";function markdown(component: string, isComponent = true): string { marked.setOptions({ renderer: new marked.Renderer(), highlight: (code: string) => { return hljs.highlightAuto(code).value; }, pedantic: false, gfm: true, tables: true, breaks: false, sanitize: false, smartLists: true, smartypants: false, xhtml: false, }); if (md[component]) { return marked(md[component]); } else if (isComponent) { return marked(`## ${component}`); } return marked(component);} 小结在日常开发的过程中，我们除了组件的代码编写外，还有很多流程上、边角上的工作需要做，这些事情往往都比较琐碎又必须要做。我们多借助工具去解决我们的工作中那些零星简单的任务。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"组件库","slug":"组件库","permalink":"http://yoursite.com/tags/%E7%BB%84%E4%BB%B6%E5%BA%93/"}]},{"title":"组件库搭建实践","date":"2021-08-08T15:04:16.000Z","path":"2021/08/08/组件库搭建实践/","text":"前言：从去年年底开始规划项目的重构，也是这样一个机遇，我开始负责项目的一个基础架构以及一些公共基础服务，主要搭建了组件库以及工具类库来提升后续开发以及重构的效率，期间也是踩了不少坑，接下来就作为整个搭建过程的一个总结，本篇主要是组件库的搭建与实践。 一个项目或系统有着大量的业务场景和业务代码，相似的页面和代码层出不穷，那如何管理和抽象这些相似的代码和模块，这肯定是许多团队都会遇到的问题。不断的拷代码？还是抽象成 UI 组件或业务组件？显然后者更高效。 问题之前的开发流程从产品设计到研发的过程中，最常出现在需求沟通与研发过程中由于缺少统一的规范和标准化体系来指导实践，导致实施环节各方沟通成本高。 认知：产品、研发、设计师对于同一需求都有自己理解的解决方案，缺少统一规范的约束，难以达成共识。 效率：设计效率低，交互原型的维护成本及上下游团队的沟通成本高，易造成不专业的印象。 品质：认知和效率的局限性，最终导致实施落地的产品质量和用户体验难以得到保障。 价值组件库最大的价值在于提升整个团队的产研效率，使设计质量得以保障的同时提升产品整体的用户体验。 保证产品体验的一致性：对于一个含有多业务系统的大型复杂产品，每个独立的业务系统虽然在功能上有一定区别，但整体的用户体验需要满足基本的一致性。 提升设计师的效率：在需求量巨大且需求来自不同的业务线时，需要逐一绘制页面及组件，造成大量重复劳动，并且在评审及需求沟通环节还可能存在不断地细节调优，所以对于设计师而言，组件的高频复用能大大提升设计效率，使设计师更多的将精力聚焦于理解和解决用户的实际问题。 提升产研团队的效率：通用场景及普通需求直接按规范进行设计和研发，减少上下游对同一页面及组件使用方式的不同理解而产生的多余沟通成本。 利于技术的沉淀：从一个组件库可以扩展到其它的技术方案，比如懒加载、Tree Shaking、文档预览等等。 解决方案搭建统一的组件库 实践接下来将详细介绍搭建一个前端组件库需要涉及的流程和相关知识、工具，其中也是参考了一些主流开源组件库的做法。 基础架构组件库目录结构目前现在的组件目录结构大致如下： 123456789101112131415├── ...├── package.json├── README.md // 文档说明├── tsconfig.json // ts 配置文件├── tsconfig.build.json // ts 编译配置├── build // 配置文件├── esm // es modules目标文件├── lib // umd目标文件├── docs // 文档└── src ├── JsComponents // 原生js组件 ├── components // React 组件 ├── images ├── style // 公共样式文件 └── index.ts // 入口文件 组件目录结构组件的目录结构参考了 antd 的规范 12345678Input├── Input.tsx // 组件├── demo.tsx // 示例演示demo├── index.md // 组件文档说明├── index.tsx // 组件入口文件└── style // 样式文件 ├── index.scss └── index.ts 编译后的组件目录结构123456789├── Input.d.ts├── Input.js├── index.d.ts├── index.js└── style ├── index.css ├── index.d.ts ├── index.js └── index.scss 规范无规矩不成方圆，在组件库开始之初就定义好规范，保证代码的严谨性，配置了以下规则： eslint/@typescript-eslint stylelint git hooks git commit prettier 组件基础架构定义好之后就可以愉快的进行组件开发了，组件的基本开发流程： 组件初始化 代码 coding 组件 demo 组件文档说明 组件库入口文件导出组件 对于组件初始化，我们也是通过脚本自动化实现，减少这些繁琐重复的工作。 样式对于组件的样式，一开始我们有两套方案： 常规样式（css/scss） CSS-in-JS（styled-components） 我个人的话更喜欢 CSS-in-JS 的方案，不用去考虑样式的打包以及引用方式，但最终考虑到业务场景还需要输出原生的 css 代码提供旧项目引用，所以最后也是采用了常规样式，通过 gulp 打包输出 css 以及 scss 文件，后面打包的时候也会具体介绍一下。 文档这里介绍一下目前的文档说明以及文档生成方案，首先对于每一个组件，需要在开发组件时编写好组件的说明文档（规则格式看下面组件文档）以及 demo，当我们运行组件库文档预览项目时会通过 node 脚本读取组件的说明文档以及 demo 自动生成对应的路由文件，这样我们就能实时预览文档以及 demo 演示。 组件文档1234567891011121314151617181920212223242526272829## Input#### 输入框组件。## Input Props：| 参数 | 说明 | 类型 | 默认值 || ---------- | ------------------------ | -------------------------------------------- | ------- || disabled | 是否禁用 | boolean | - || icon | input 图标 | React.ReactElement | - || iconPlace | input 图标渲染位置 | 'left' \\| 'right' | 'right' || allowClear | 是否可清除，渲染清除图标 | boolean | false || showNumber | 是否渲染字数计算 | boolean | false || maxLength | 最大输入长度 | number | 70 || onChange | input 输入框改变的回调 | (e: ChangeEvent\\<HTMLInputElement\\>) => void | - |> Tip：Input 的 props 不止上面列举的项，可传入原生 input 的所有属性### Usage```jsimport { Input } from "@hzzly/components";const onChange = (e) => { console.log("Value: ", e.target.value);};ReactDOM.render(<Input icon={<Icon />} onChange={onChange} />, mountNode);``` 组件库文档组件库的文档一般都是对外可访问的，因此需要部署到服务器上，同时也需具备本地预览的功能。 可以自己搭一个文档站点，也可以使用目前主流的文档生成器（Docz、Storybook、VuePress）来生成文档站点。 这里我们采用的是自己搭建的一个单独的 React 项目，也就是上面的 docs 文件夹，其实自己搭也比较简单，首先是思路： readFile 读取 src 下组件的 md 文件和 demo 文件保存起来 writeFile 写入路由配置以及对应的路由文件 通过不同的路由渲染对应的组件文档和演示 主要借助的是 node 读写文件的便捷性，对于文档自动生成方案在后面文章会具体介绍一下，先明确一下思路就行。 打包对于打包后的文件，统一放在 ems 目录下，顾名思义我们需要打包成 ESModule 的规范。 1234567891011// packages.json{ ... "scripts": { "clean": "rimraf dist", "build": "npm run clean && tsc -p tsconfig.build.json && gulp -f ./build/gulpfile.js", // 组件库打包 "start": "cross-env webpack-dev-server --config ./build/webpack.dev.js", // 组件开发调试环境 "build:umd": "cross-env NODE_ENV='production' webpack --config ./build/webpack.umd.js", // umd打包 }, ...} 编译打包 ts[x]在入口文件我们需要以 ESModule 的规范导出组件： 1export { default as Input } from "./components/Input"; 打包工具的话我们就不能使用 webpack 来打包我们的组件库，可以使用 rollup 或 TS 来编译组件，这里我们采用的是 TS 编译的方案，配置 tsconfig.build.json : 123456789101112131415161718192021222324{ "compilerOptions": { "outDir": "ems", "target": "es6", "module": "esnext", "moduleResolution": "node", "declaration": true, // 生成声明文件 .d.ts "skipLibCheck": true, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, "jsx": "react" }, "include": ["src"], "exclude": [ // 排除编译文件 "node_modules", "src/**/demo.tsx", "**/*.md" ]} 编译打包样式文件上面我们已经成功编译了 ts 或 tsx 文件，但是对于我们的样式文件还没处理（TS 无法编译样式文件），样式文件根据我们上面的代码规范，需要打包编译到对应的组件文件夹下，这样就可以跟着组件路径来引入： 1import "@hzzly/components/esm/input/style"; 这里我们采用 gulp 来处理样式文件： 123456789101112131415161718// 生成css到对应组件function scss2css() { return gulp .src(paths.styles) .pipe(base64({ maxImageSize: 2000 })) .pipe(sass()) // 处理sass文件 .pipe(autoprefixer()) // 根据browserslistrc增加前缀 .pipe(cssmin({ compatibility: "ie9" })) // 压缩 .pipe(gulp.dest(paths.dest.esm));}// 拷贝scss到对应的组件function copyScss() { return gulp .src(paths.styles) .pipe(base64({ maxWeightResource: 10000 })) .pipe(gulp.dest(paths.dest.esm));} UMD这里还有一个业务场景是 JsComponents 需要打包成 umd 的格式提供旧框架通过链接的方式直接引用，所以我们还配置了 umd 的打包规范，分别单独打包 js 原生组件, 将组件单独打包需要在 Webpack 中配置多个entry，大致配置如下： 12345678910111213141516171819const entry = {};const names = fs .readdirSync(path.resolve(__dirname, `../src/JsComponents`)) .filter((f) => f.indexOf('.') < 0);names.forEach((name) => { entry[name.toLocaleLowerCase()] = path.resolve(__dirname, `../src/JsComponents/${name}/index.ts`);});module.exports = { ... entry, output: { path: path.resolve(__dirname, '../lib'), filename: '[name].min.js', publicPath: './', }, ...} 迭代维护CHANGELOG.md组件日常维护占整个组件库生命周期的很大一部分，组件库做起来了以后，组件功能后续会不断迭代，也许是 bug fix，也可能 feature，这些组件的迭代我们通过 PR 和 issue 来管理，同时，我们需要管理好组件的 changelog，为了规范我们也是将 changelog 维护到一个 Markdown 文件里，通过 conventional-changelog 工具自动根据 commit message 生成 CHANGELOG.md**。 总结到这里，也算是对最近在组件库的探索做了个总结，从零开始构建了一个比较完整的组件库，这段经历也是让我在架构思维以及业务层面有了新的认识，也学到了不少的知识。当然，还有很多不完善的地方，也是在慢慢优化完善，在组件化这条路上，我们还有很多事情要做，加油！！！ 参考 Ant Design","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"组件库","slug":"组件库","permalink":"http://yoursite.com/tags/%E7%BB%84%E4%BB%B6%E5%BA%93/"}]},{"title":"Input组件字数限制引发的问题","date":"2021-06-11T09:43:42.000Z","path":"2021/06/11/Input组件字数限制引发的问题/","text":"前言：最近在完善 Input 组件字数计算的时候引发了不少的问题：1、到限制字数时，继续输入中文会替换末尾的文字；2、不同浏览器截断的表现不一样等等问题。 先明确一下需求 需求 输入到最大长度时，超出截断 首尾非文字（空格、换行等）不计入字数统计中 超出截断时保持已输入的文字以及开头非文字部分 尝试总体思路1、不能直接使用 input 的 maxLength，因为计算数字的时候会把首尾非文字也计算其中 2、监听 input 的 onChange 事件，当输入的长度大于最大长度时截断 根据以上思路，既然不能直接使用 input 的 maxLength，那就在 onChange 事件里进行逻辑处理。 第一次尝试1234567const v = e.target.value.trim();if (v.length > maxLength && !("value" in props)) { setNum(maxLength); inputRef.current.value = v.slice(0, maxLength); return;}setNum(v.length); 存在的问题 输入到最大长度时开头空格或换行会被截掉 输入中文时会从尾部开始替换掉输入框的值 尾部空格较多时，截取的时候会出问题，计算数字的时候会把空格计算其中 第二次尝试123456789101112const { value } = e.target;const v = value.trim();if (value.length - v.length !== 0) { setLength(maxLength + (value.length - v.length)); // 动态计算maxLength保证首尾空格或换行还在}if (v.length > maxLength) { const newValue = v.slice(0, -(v.length - maxLength)).trim(); // 防止倒数第一个前面的值为空格 inputRef.current.value = value.slice(0, -(v.length - maxLength)); setNum(newValue.length);} else { setNum(v.length);} 通过上面两个逻辑判断和处理已经解决了第一次尝试的两个问题，那还有一个问题是不是没解决呢？其实在其他浏览器能解决输入中文时替换掉输入框的值，但是 Chrome 浏览器却不行，WTF！Chrome 竟然不行。其实原因是我上面提到的 Chrome 和其他浏览器输入中文时的表现不一样。 我们用两张图来看一下就明白了 第一张图是 Chrome 输入中文的表现，第二张图是其他浏览器输入中文的表现。是的，Chrome 输入中文时会实时把拼音显示在输入框内，这样就会导致在截取的时候判断不准确替换掉了尾部的值，那有没有什么解决方案呢？那肯定是有的，接下来就来优化一下这个问题。 优化判断是否中文输入当用户使用拼音输入法输入时，我们会发现 onChange/onInput 取得的值是拼音值，但是很明显，我们需要计算的是用户输入的中文值的长度，而不是拼音值的长度。所以这里需要解决使用拼音输入法时会取得拼音值的问题。 我们先来看两个比较陌生的事件： compositionstart：文本合成系统如 input method editor（即输入法编辑器）开始新的输入合成时会触发 compositionstart 事件。例如，当用户使用拼音输入法开始输入汉字或者使用语音输入时，这个事件就会被触发。 compositionend：当文本段落的组成完成或取消时， compositionend 事件将被触发 (具有特殊字符的触发，需要一系列键和其他输入，如语音识别或移动中的字词建议)。例如，当用户使用拼音输入法输入汉字或者使用语音输入完毕或者取消时，这个事件就会被触发。 因此我们可以声明一个标记lock，在compositionstart、compositionend两个事件过程之间的时候lock值为 true，在 input onChange事件中通过lock的值来判断当前输入的状态和截取。 123456789101112131415161718192021222324252627282930if (e.type === 'compositionstart') { lock.current = true;}if (e.type === "compositionend") { lock.current = false;}const { value } = e.target;const v = value.trim();if (value.length - v.length !== 0) { setLength(maxLength + (value.length - v.length))}if (v.length > maxLength) { const newValue = v.slice(0, -(v.length - maxLength)).trim(); if (!lock.current) { inputRef.current.value = value.slice(0, -(v.length - maxLength)); } setNum(newValue.length);} else { setNum(v.length);}// html<input ref={inputRef} className="yp-input__inner" onChange={handleChange} onCompositionStart={handleChange} onCompositionEnd={handleChange} .../> 总结那到这里一个 Input 组件字数计算的问题总算解决了，从中也是吸取了不少的经验和总结，继续加油！！！","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"}]},{"title":"Monorepo的实践落地","date":"2021-04-26T02:53:13.000Z","path":"2021/04/26/Monorepo的实践落地/","text":"前言：最近针对项目代码仓库进行了一次重构，之前代码管理缺少规范和模块化的思想，也是借着项目重构这次机会重新规划代码仓库，实践落地了一种新的项目管理方式——Monorepo，Monorepo的管理概念跟我们规划的项目代码管理非常贴合，再加上我们新增的组件库及工具库，打造了一套比较完整的工作流。 一些概念性的的东西这里就不多说了，不太了解 Monorepo 的可以自行 google 一下，这里就默认已经了解过了。 要想从零开始定制一套完善的 Monorepo 的工程化工具，还是一件比较有难度的事情。不过社区已经提供了一些比较成熟的方案，我们可以拿来进行定制。 在重构方案选择上，我们选择了业界比较成熟的 lerna 和 yarn workspaces，用 yarn 来处理依赖问题，用 lerna 来处理发布问题。 仓库地址 lernalerna 官方的定位：A tool for managing JavaScript projects with multiple packages（一个用来管理带有多个package的JavaScript项目）。 lerna不负责构建，测试等任务，它提出了一种集中管理package的目录模式，提供了一套自动化管理程序，让开发者不必再深耕到具体的组件里维护内容，在项目根目录就可以全局掌控，基于 npm scripts，使用者可以很好地完成组件构建，代码格式化等操作。 安装123npm install lerna –g//yarn add lerna global 基本命令123456789101112131415// lerna 项目初始化lerna init // 固定模式lerna init -i // 独立模式// 创建子项目lerna create [包名]// 清除所有子项目的依赖lerna clean// 安装所有依赖lerna bootstrap// 发布lerna publish 重构的价值之前的代码管理非常的混杂，还是比较传统的代码目录结构，一些公共基础服务无法扩展复用，如下： 1234567891011// 之前的代码目录├── package.json├── README.md├── tool // 项目打包编译配置├── release // 打包目标文件夹└── src // 源代码 ├── css ├── html ├── images ├── js └── sass 重构后的代码结构无论是模块化还是复用性都很清晰，同时在代码规范上也比之前更规范了，如下： 123456789// 重构后的代码目录：├── ... // 其它配置文件（代码规范）├── package.json├── README.md├── lerna.json // lerna 配置文件└── packages // 分割的小项目 ├── components ├── utils ├── ... // 多个业务模块 总结一下： 将之前混杂的代码库分割为独立版本控制的小项目（项目更清晰） 解决了包之间的依赖关系（新增了组件库以及工具库） 通过git仓库检查到改动并自动同步（公共基础库的发布） 根据提交的commit生成CHANGELOG版本日志文件（项目代码更规范） TypeScript支持 统一技术栈 完善的工作流 当然，lerna 还有更多的功能可以去发掘，还有很多可以结合 lerna 一起使用的工具。构建一套完善的仓库管理机制，可能它的收益不是一些量化的指标可以衡量出来的，也没有直接的价值输出，但它能在日常的工作中极大的提高工作效率，解放生产力，节省大量的人力成本。 下篇就来聊聊组件库的那些事。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"}]},{"title":"【记录】React TS中自定义DOM属性","date":"2021-04-16T09:35:22.000Z","path":"2021/04/16/【记录】React TS中自定义DOM属性/","text":"前言：最近在项目中进行渐进式重构升级，技术栈也是从之前的jQuery时代转换成React和TypeScript。当然重构过程中也冒出了不少的问题，本文将记录一下React TS中自定义DOM属性的一些解决方案。 先看一下需求 在原生DOM节点新增自定义属性 比如： 1<div mark="mark"></div> 在React中这样写是能正常渲染的，React官方对于自定义DOM属性也是有一篇文章特别说明，大致意思就是React 16之前对于未知的DOM属性。如果JSX具有React无法识别的属性，React只会跳过它，并不会渲染在DOM中，在React 16之后，进行了更改，所有未知属性都将最终出现在DOM中。 但是在TypeScript中这样写就会报错： 类型“DetailedHTMLProps<HTMLAttributes, HTMLDivElement>”上不存在属性“mark” Google了一圈，在 stackoverflow 看到一个差不多的问题，尝试按照useful最多的这样声明： 12345declare module 'react' { interface HTMLProps<T> { mark?:string; }} 然而还是报相同的错误，未解决。 最后在一个Answer中找到了解决方案，测试可行： 12345declare module 'react' { interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> { mark?: string; }} 添加这句声明后能顺利的解决ts的报错，但这也不是最好的解决方案，这是为什么呢？在添加了这句声明后，发现我们在上面声明的图片格式失效报错了： 找不到模块“xxxxxx.png”或其相应的类型声明 这里就直接列举出我尝试后的解决方案，可能不是最好的，但目前可以解决上面的两个报错问题： 把自定义DOM属性类型声明和图片类型声明分开到不一样的.d.ts文件里，防止冲突报错 如果有更好的解决方案，欢迎交流探讨。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"react","slug":"react","permalink":"http://yoursite.com/tags/react/"},{"name":"TypeScript","slug":"TypeScript","permalink":"http://yoursite.com/tags/TypeScript/"},{"name":"记录","slug":"记录","permalink":"http://yoursite.com/tags/%E8%AE%B0%E5%BD%95/"}]},{"title":"Tree Shaking知多少","date":"2021-04-06T09:16:31.000Z","path":"2021/04/06/Tree-Shaking知多少/","text":"前言：最近在团队中负责公共基础服务的建设，封装了公共类库及组件库，以为能带来比较大的便捷，真是理想很丰满，现实很骨感，开发时通过ES Module引入及使用都很方便，的确达到了开发效率的提升，但后续打包发布测试时却遇到了难题，目标项目中未使用的代码也一并打包进来了，导致最后的bundle过大。那问题就很明显了，需要去除掉未使用的代码。 下面跟分享下，我在Tree Shaking上的摸索历程。 什么是Tree Shaking用个简单的栗子描述一下：我们将应用程序想象成一棵树。绿色叶子表示实际用到的 source code(源码) 和 library(库)，是树上活的树叶。灰色叶子表示未引用代码，是树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。 具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树，入口文件有很多依赖的模块，相当于树叶。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 Tree Shaking，将没有使用的模块摇掉，这样来达到删除无用代码（dead-code）的目的。 Tree Shaking 较早由 rollup 提出并实现，后来，webpack 从 webpack2 开始也增加了 Tree Shaking 的功能。 Tree Shaking的原理Tree Shaking 本质是借助 ES module 的静态分析能力来消除无用的代码（dead-code）。 静态分析能力Tree Shaking 的目的是减少文件的体积，节约带宽，提高加载速度，所以文件必须在浏览器加载之前完成瘦身，也就是在打包的时候完成这个功能。ES6 使用 import 和 export 可以在编译期确定模块间的依赖关系，这是 Tree Shaking 的必需条件，这也意味着被 Babel 编译成 ES5 的代码是不能 Tree Shaking 的。 dead-code我们需要理解什么是无用的代码，满足以下特征，即是无用代码： 代码不会被执行，不可达到 代码执行的结果不会被用到 代码只会影响死变量（只写不读） Tree Shaking的原理总结下来就是以下两点： 1、ES6的模块引入是静态分析的，故而可以在编译时正确判断到底加载了什么代码2、分析程序流，判断哪些变量未被使用、引用，进而删除此代码 TS 编译的类库原理理解后，那对于开头那个问题就比较好解决了。 查看我的tsconfig.json后果然配置有误，配置的 "target": "ES5" 没有配置 module 导致 TS 编译成 CommonJS 模块了，也就无法满足 Tree Shaking 的条件。 123456789// 修改后的tsconfig.json{ ... "compilerOptions": { "target": "ES5", "module": "ESNext" ... }} 修改完 TS 编译配置后，让目标项目重新打包后就符合预期，去除了无用的代码，bundle的体积也明显的减少了。 到这里，感觉万事大吉了，然而比较坑的是用 class 写的类库还是没办法消除，还是会被打包进去。 还是我们上面配置的"target": "ES5" 的问题，因为我们项目还需要兼容IE（万恶的IE），所以需要配置编译为es5，导致我们的 class 被编译成了 IIFE （立即调用函数表达式），又有一个新的问题：Webpack Tree Shaking不会清除IIFE Webpack Tree Shaking当我们用 Webpack 配合 UglifyJS 打包文件时，我们class类的IIFE又被打包进去了。这跟我们想象的完全不一样啊？为什么呢？无用的类不能消除，这还能叫做 Tree Shaking 吗。 在你的Tree-Shaking并没什么卵用中有过分析，里面有一个例子比较好，见下文 原因很简单：uglify没有完善的程序流分析。它可以简单的判断变量后续是否被引用、修改，但是不能判断一个变量完整的修改过程，不知道它是否已经指向了外部变量，所以很多有可能会产生副作用的代码，都只能保守的不删除。 栗子： 123456789101112var V8Engine = (function () { function V8Engine () {} V8Engine.prototype.toString = function () { return 'V8' } return V8Engine}())var V6Engine = (function () { function V6Engine () {} V6Engine.prototype = V8Engine.prototype // <---- side effect V6Engine.prototype.toString = function () { return 'V6' } return V6Engine}())console.log(new V8Engine().toString()) // V6 V6Engine虽然没有被使用，但是它修改了V8Engine原型链上的属性，这就产生副作用了。如果 V6Engine 这个IIFE里面再搞一些全局变量的声明，那就当然不能删除了。那就没有解决方案吗？在你的Tree-Shaking并没什么卵用中最后有提供解决方案。 如果想利用好 Webpack 的 Tree Shaking，我们需要规范自己的代码： 使用 ES2015 模块语法（即 import 和 export） 确保没有编译器将您的 ES2015 模块语法转换为 CommonJS 的（顺带一提，这是现在常用的 @babel/preset-env 的默认行为，详细信息请参阅文档） 尽量不写带有副作用的代码。诸如编写了立即执行函数，在函数里又使用了外部变量等 如果JavaScript库开发中，难以避免的产生各种副作用代码，可以将功能函数或者组件，打包成单独的文件或目录，以便于用户可以通过目录去加载。如有条件，也可为自己的库开发单独的webpack-loader，便于用户按需加载 配置TypeScript编译器以"esnext"用作 module，使代码能以 ES module 导出 目前也是越来越多的 Npm 第三方模块考虑到了 Tree Shaking，并对其提供了支持。 相信 Tree Shaking 也会越来越成熟。 参考 Webpack 官方文档 你的Tree-Shaking并没什么卵用 Tree-Shaking性能优化实践 - 原理篇","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"}]},{"title":"既爱又恨的定时器","date":"2021-01-10T14:26:29.000Z","path":"2021/01/10/既爱又恨的定时器/","text":"前言：前两天开发了一个抽奖功能的需求，也是被定时器折磨了一番。 问题 React Hooks里的定时器 倒计时不准 应用退到手机后台后的定时器 接下来咱们一一解决它。 React Hooks里的定时器对于每个使用 React Hooks 的开发者来说，setInterval 是一个绕不过去的”坑“。由于React Hooks 特有的设计理念，如果用固有的思维模式去写 setInterval，很容易触发意想不到的 bug。 比如下面的错误写法： 1234567891011121314151617181920function Test() { const [count, setCount] = useState(0); const timer = useRef(); useEffect(() => { if (!timer.current) { timer.current = setInterval(() => { setCount(count + 1); }, 1000); } return () => { if (timer.current) { clearInterval(timer.current); timer.current = null; } } }, []); return <div>{count}</div>;} 这样写确实很简洁，也符合我们固有的思维模式，但是它的实现效果却与我们的目标背道而驰。 预期的效果是页面上的数字会每秒增加 1 ，但实际是数字增加到 1 后便静止不动了。由于 useEffect 的依赖为空数组，所以 setInterval 只会在组件完成初次渲染后被调用一次，从而使得回调函数在之后每次被定时调用时，取到的 count 都是初次渲染时的值 0（闭包的原因），页面上的数值也会永远停留在 1。 解决方案： 我们使用useRef来解决来解决这种闭包引起的问题。（useRef 在 React Hooks 中的作用，正如官网说的，它像一个变量，类似于 this ，它就像一个盒子，你可以存放任何东西， useRef 每次都会返回相同的引用） 1234567891011121314151617181920212223function Test() { const [count, setCount] = useState(0); const timer = useRef(); const time = useRef(0); useEffect(() => { if (!timer.current) { timer.current = setInterval(() => { time.current += 1; setCount(time.current); }, 1000); } return () => { if (timer.current) { clearInterval(timer.current); timer.current = null; time.current = null; } } }, []); return <div>{count}</div>;} 倒计时不准（定时器不准）我们知道定时器的执行时间并不是确定的。这是由于 JS 是门非阻塞单线程语言，因为在最初 JS 就是为了和浏览器交互而诞生的。如果 JS 是门多线程的语言话，我们在多个线程中处理 DOM 就可能会发生问题（一个线程中新加节点，另一个线程中删除节点）。那么为什么说定时器的执行时间不是确定的呢？那就得来细数一下轮询（Event loop）了。 Event Loop 的是计算机系统的一种运行机制。JS 语言就采用这种机制，来解决单线程运行带来的一些问题。 在 JavaScript 中，任务被分为两种，一种宏任务（MacroTask），一种叫微任务（MicroTask）。 常见的宏任务有：script全部代码、setTimeout、setInterval、setImmediate（浏览器暂时不支持，只有IE10支持，具体可见MDN）、I/O、UI Rendering。 常见的微任务有：Process.nextTick（Node独有）、Promise、Object.observe(已废弃)、MutationObserver 一次 Event loop 顺序是这样的： 执行同步代码，这属于宏任务 执行栈为空，查询是否有微任务需要执行 执行所有微任务 必要的话渲染 UI 然后开始下一轮 Event loop，执行宏任务中的异步代码 通过上述的 Event loop 顺序可知，我们实际写的定时器（倒计时）1秒是不确定的。当我们倒计时还在定时器里减1就不准确了。 解决方案： 既然定时器不准，那我们就不能做减1的操作，可以利用时间戳的差值来计算。 12345678910111213141516171819202122232425262728function Test() { const [count, setCount] = useState(3600); const timer = useRef(); const time = useRef(0); useEffect(() => { time.current = count; if (!timer.current) { let start = new Date().getTime(); let end = 0; timer.current = setInterval(() => { const s = (end - start) / 1000; time.current -= s; setCount(time.current); start = end; }, 1000); } return () => { if (timer.current) { clearInterval(timer.current); timer.current = null; time.current = null; } } }, []); return <div>{count}</div>;} 应用退到手机后台后的定时器在手机端，如果应用被切换到后台（不是关闭应用，是切到后台），那么这时候定时器就会有问题。PC上的Firefox，Chrome和Safari等浏览器，都会自动把未激活页面中的JavaScript定时器（setTimeout，setInterval）间隔最小值改为1秒以上。这是因为间隔很小的定时器一般用来做UI更新（例如用定时器实现的动画），让用户不可见的页面上的定时器跑慢一些，既节省资源又不会影响体验。对移动浏览器来说，内存，CPU，带宽等资源更加宝贵，设备移动的上浏览器往往会直接冻结所有未激活页面上的所有定时器。 解决方案： 通过监听 visibilitychange 方法，如果退到后台记录下当前时间，等切回来，再算一下当前时间，然后计算时间差，最后用当时定格的那个时间去减去这个时间差，再赋值给这个定时器，就ok了。 12345678910111213141516171819202122232425262728293031let start = 0;let end = 0;let startS = 0;const hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;if (hiddenProperty == null) { return false;}const visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');const onVisibilityChange = function () { if (!document[hiddenProperty]) { end = new Date().getTime(); // 页面切回来的时间戳 const s = Math.ceil((end - start) / 1000); // 时间差 const timeC = startS - s; // 当时定格的那个时间去减去这个时间差 = 最新的倒计时 if (timeC > 0) { setTime(timeC); } else { setTime(-1); } } else { startS = time; // 当前倒计时时间戳 start = new Date().getTime(); // 页面退到后台的时间戳 }};document.addEventListener(visibilityChangeEvent, onVisibilityChange); 总结到这里，基本就针对碰到的定时器的三个问题讲了一遍，不对之处，还请多多指正！","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"}]},{"title":"记一次dva升级后的bug","date":"2020-03-13T13:24:32.000Z","path":"2020/03/13/记一次dva升级后的bug/","text":"前言：去年的时候针对公司老项目（dva环境）进行了一次优化升级，升级后没出现啥问题，因为疫情的关系，导致一直在家办公，最近针对老项目又加了个需求，用自己的电脑从Gogs上down下来npm install之后运行就报错了。 安装完依赖npm start的时候，就开始报如下的错误： 123Failed to compile./node_modules/history/esm/history.jsModule not found: Can't resolve '@babel/runtime/helpers/esm/extends' in 'xxxx\\prong-console-tenant\\node_modules\\history\\esm' 一般删了node_modules重新安装依赖能解决80%的问题，但这次重新安装却不起作用了。于是就开始了折腾之旅了，去Google搜了一圈，找了几个解决方案尝试之后发现都不太行。 最后在Github issues里找到了解决思路：history 版本问题。 按以下步骤检查： 1、npm list history 查看history安装情况； 2、如果版本不是4.7.2，卸载history， npm un history； 3、npm list history 确保history已全部删除； 4、npm install --save history@4.7.2 安装指定版本； 按照如上步骤就把这个错误解决了，运行成功。完美！","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"异常","slug":"异常","permalink":"http://yoursite.com/tags/%E5%BC%82%E5%B8%B8/"}]},{"title":"js处理long型丢失精度问题","date":"2020-01-21T06:03:51.000Z","path":"2020/01/21/JavaScript处理Long型丢失精度/","text":"最近项目后端为 Prong 开发了一个基于 snowflake 算法的 Java 分布式 ID 组件，将实体主键从原来的 String 类型的 UUID 修改成了 Long 型的分布式 ID。修改后发现前端显示的 ID 和数据库中的 ID 不一致。例如数据库中存储的是：812782555915911412，显示出来却成了 812782555915911400，后面 2 位变成了 0，精度丢失了： 12console.log(812782555915911412);812782555915911400; 原因这是因为 JavaScript 中数字的精度是有限的，Java 的 Long 类型的数字超出了 JavaScript 的处理范围。JavaScript 内部只有一种数字类型 Number，所有数字都是采用 IEEE 754 标准定义的双精度 64 位格式存储，即使整数也是如此。这就是说，JavaScript 语言的底层根本没有整数，所有数字都是小数（64 位浮点数）。其结构如图： 各位的含义如下： 1 位（s） 用来表示符号位，0 表示正数，1 表示负数 11 位（e） 用来表示指数部分 52 位（f） 表示小数部分（即有效数字） 双精度浮点数(double)并不是能够精确表示范围内的所有数， 虽然双精度浮点型的范围看上去很大: 。 可以表示的最大整数可以很大，但能够精确表示，使用算数运算的并没有这么大。因为小数部分最大是 52 位，因此 JavaScript 中能精准表示的最大整数是 ，十进制即 9007199254740991。 123console.log(Math.pow(2, 53) - 1);console.log(1L<<53);9007199254740991 JavaScript 有所谓的最大和最小安全值： 123console.log(Number.MAX_SAFE_INTEGER);console.log(Number.MIN_SAFE_INTEGER);9007199254740991 - 9007199254740991; 安全 意思是说能够 one-by-one 表示的整数，也就是说在范围内，双精度数表示和整数是一对一的，在这个范围以内，所有的整数都有唯一的浮点数表示，这叫做安全整数。 而超过这个范围，会有两个或更多整数的双精度表示是相同的；即超过这个范围，有的整数是无法精确表示的，只能大约(round)到与它相近的浮点数（说到底就是科学计数法）表示，这种情况下叫做不安全整数，例如： 123456789console.log(Number.MAX_SAFE_INTEGER + 1); // 结果：9007199254740992，精度未丢失console.log(Number.MAX_SAFE_INTEGER + 2); // 结果：9007199254740992，精度丢失console.log(Number.MAX_SAFE_INTEGER + 3); // 结果：9007199254740994，精度未丢失console.log(Number.MAX_SAFE_INTEGER + 4); // 结果：9007199254740996，精度丢失console.log(Number.MAX_SAFE_INTEGER + 5); // 结果：9007199254740996，精度未丢失 而 Java 的 Long 类型的有效位数是 63 位（扣除一位符号位），其最大值为，十进制为 9223372036854775807。 1234567public static void main(String[] args) { System.out.println(Long.MAX_VALUE); System.out.println((1L<<63) -1);}92233720368547758079223372036854775807 所以只要 java 传给 JavaScript 的 Long 类型的值超过 9007199254740991，就有可能产生精度丢失，从而导致数据和逻辑出错。 和其他编程语言（如 C 和 Java）不同，JavaScript 不区分整数值和浮点数值，所有数字在 JavaScript 中均用浮点数值表示，所以在进行数字运算的时候要特别注意精度缺失问题。容易造成混淆的是，某些运算只有整数才能完成，此时 JavaScript 会自动把 64 位浮点数，转成 32 位整数，然后再进行运算，由于浮点数不是精确的值，所以涉及小数的比较和运算要特别小心。 进一步阅读：JavaScript 教程 - 数据类型 - 数值 解决方法解决办法就是让 Javascript 把数字当成字符串进行处理。对 Javascript 来说如果不进行运算，数字和字符串处理起来没有什么区别。当然如果需要进行运算，只能采用其他方法，例如 JavaScript 的一些开源库 bignum、bigint 等支持长整型的处理。Java 进行 JSON 处理的时候是能够正确处理 long 型的，只需要将数字转化成字符串就可以了。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"h5手机键盘弹出收起的处理","date":"2020-01-19T07:30:32.000Z","path":"2020/01/19/h5手机键盘弹出收起的处理/","text":"前言：前端时间也是应项目的需求开始了h5移动端的折腾之旅，在目前中台的基础上扩展了两个ToC移动端项目，下面就是在h5移动端表单页面键盘弹出收起兼容性的一些总结。 问题在 h5 项目中，我们会经常遇到一些表单页面，在输入框获取焦点时，会自动触发键盘弹起，而键盘弹出在 IOS 与 Android 的 webview 中表现并非一致，同时当我们主动触发键盘收起时也同样存在差异化。 键盘弹出 IOS：IOS系统 的键盘处在窗口的最上层，当键盘弹起时，webview 的高度 height 并没有改变，只是 scrollTop 发生变化，页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度，而只有键盘弹出时页面恰好也滚动到最底部时，scrollTop 的变化值为键盘的高度，其他情况下则无法获取。这就导致在 IOS 情况下难以获取键盘的真实高度。 Android: 在Android系统中，键盘也是处在窗口的最上层，键盘弹起时，如果输入框在靠近底部的话，就会被键盘挡住，只有你输入的时候输入框才会滚动到可视化区域。 键盘收起 IOS：触发键盘上的按钮收起键盘或者输入框以外的页面区域时，输入框会失去焦点，因此会触发输入框的 blur 事件；当键盘收起时，页面底部会出现一个空白区域，页面会被顶起。 Android: 触发键盘上的按钮收起键盘时，输入框并不会失去焦点，因此不会触发页面的 blur 事件；触发输入框以外的区域时，输入框会失去焦点，触发输入框的 blur 事件。 期望的结果针对不同系统触发键盘弹出收起时的差异化，我们希望功能流畅的同时，尽量保持用户体验的一致性。 对症下药上面我们理清了目前市面上两大主要系统的差异性，接下来就需对症下药了。 在 h5 中目前没有接口可以直接监听键盘事件，但我们可以通过分析键盘弹出、收起的触发过程及表现形式，来判断键盘是弹出还是收起的状态。 键盘弹出：输入框获取焦点时会自动触发键盘的弹起动作，因此，我们可以监听 focusin 事件，在里面实现键盘弹出后所需的页面逻辑。 键盘收起：当触发其他页面区域收起键盘时，我们可以监听 focusout 事件，在里面实现键盘收起后所需的页面逻辑。而在通过键盘按钮收起键盘时在 ios 与 android 端存在差异化表现，下面具体分析： IOS：触发了 focusout 事件，仍然通过该办法监听。 Android：没有触发 focusout 事件。在 android 中，键盘的状态切换（弹出、收起）不仅和输入框关联，同时还会影响到 webview 高度的变化，那我们就可以通过监听 webview height 的变化来判断键盘是否收起。 系统判断在实践中我们可以通过 userAgent 来判断目前的系统： 123const ua = window.navigator.userAgent.toLocaleLowerCase();const isIOS = /iphone|ipad|ipod/.test(ua);const isAndroid = /android/.test(ua); IOS 处理123456789101112131415161718let isReset = true; //是否归位this.focusinHandler = () => { isReset = false; //聚焦时键盘弹出，焦点在输入框之间切换时，会先触发上一个输入框的失焦事件，再触发下一个输入框的聚焦事件};this.focusoutHandler = () => { isReset = true; setTimeout(() => { //当焦点在弹出层的输入框之间切换时先不归位 if (isReset) { window.scroll(0, 0); //确定延时后没有聚焦下一元素，是由收起键盘引起的失焦，则强制让页面归位 } }, 30);};document.body.addEventListener('focusin', this.focusinHandler);document.body.addEventListener('focusout', this.focusoutHandler); Android 处理123456789101112131415161718const originHeight = document.documentElement.clientHeight || document.body.clientHeight;this.resizeHandler = () => { const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; const activeElement = document.activeElement; if (resizeHeight < originHeight) { // 键盘弹起后逻辑 if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) { setTimeout(()=>{ activeElement.scrollIntoView({ block: 'center' });//焦点元素滚到可视区域的问题 },0) } } else { // 键盘收起后逻辑 }};window.addEventListener('resize', this.resizeHandler); react 封装在 react 中我们可以写一个类装饰器来修饰表单组件。 类装饰器：类装饰器在类声明之前被声明（紧靠着类声明）。 类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。 123456789101112131415161718192021222324252627282930313233343536373839404142434445// keyboard.tsx/* * @Description: 键盘处理装饰器 * @Author: hzzly * @LastEditors: hzzly * @Date: 2020-01-09 09:36:40 * @LastEditTime: 2020-01-10 12:08:47 */import React, { Component } from 'react';const keyboard = () => (WrappedComponent: any) => class HOC extends Component { focusinHandler: (() => void) | undefined; focusoutHandler: (() => void) | undefined; resizeHandler: (() => void) | undefined; componentDidMount() { const ua = window.navigator.userAgent.toLocaleLowerCase(); const isIOS = /iphone|ipad|ipod/.test(ua); const isAndroid = /android/.test(ua); if (isIOS) { // 上面 IOS 处理 ... } if (isAndroid) { // 上面 Android 处理 ... } } componentWillUnmount() { if (this.focusinHandler && this.focusoutHandler) { document.body.removeEventListener('focusin', this.focusinHandler); document.body.removeEventListener('focusout', this.focusoutHandler); } if (this.resizeHandler) { document.body.removeEventListener('resize', this.resizeHandler); } } render() { return <WrappedComponent {...this.props} />; } };export default keyboard; 使用12345678// PersonForm.tsx@keyboard()class PersonForm extends PureComponent<{}, {}> { // 业务逻辑 ...}export default PersonForm;","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"TypeScript","slug":"TypeScript","permalink":"http://yoursite.com/tags/TypeScript/"},{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"},{"name":"h5","slug":"h5","permalink":"http://yoursite.com/tags/h5/"}]},{"title":"记npm login的一次异常解决","date":"2019-12-23T05:40:08.000Z","path":"2019/12/23/记npm login的一次异常解决/","text":"背景在工作中，我们常常会将一些通用性代码，比如一些工具类、公用业务逻辑代码以及团队定制化的UI库等，发布到私有npm仓库。需要的项目直接安装使用即可。 在一次组件开发完将要上传的私服的时候，通过 npm login 登录私服一直报错，出现了如下两种报错： 登录报错npm ERR! code E401npm登录时报错： 123456789$ npm loginUsername: 你的nexus用户名Password: 你的nexus用户密码Email: (this IS public) 你的邮箱npm ERR! code E401npm ERR! Unable to authenticate, need: BASIC realm="Sonatype Nexus Repository Manager"npm ERR! A complete log of this run can be found in:npm ERR! C:\\Users\\Administrator\\AppData\\Roaming\\npm-cache\\_logs\\XXX-debug.log 这时在我的mac上可以正常登录，说明是客户端的问题。 原因可能是本机使用过其他账号登录过，但是没有退出登录。果然在npm的配置文件 .npmrc 文件中找到了问题。 解决方案，检查 ~/.npmrc 文件，删除 xlab-npm-group 和 xlab-npm-private 相关的token记录： 123456registry=http://**********:20001/repository/xlab-npm-group///**********:20001/repository/xlab-npm-group/:_authToken=XXXX // 删除这行//**********:20001/repository/xlab-npm-group/:_authToken=XXXX // 删除这行always-auth=truehome=https://www.npmjs.org//**********:20001/repository/xlab-npm-private/:_authToken=XXXX // 删除这行 修改后如下： 123registry=http://**********:20001/repository/xlab-npm-group/always-auth=truehome=https://www.npmjs.org 保存后重新登录成功。 登录报错npm ERR! code E500npm登录时报错： 123456789$ npm login --registry=http://**********:20001/repository/xlab-npm-private/Username: 你的nexus用户名Password: 你的nexus用户密码Email: (this IS public) 你的邮箱npm ERR! code E500npm ERR! 500 Server Error -PUT =http://**********:20001/repository/xlab-npm-private/-/user/org.couchdb.user:XXXnpm ERR! A complete log of this run can be found in:npm ERR! /Users/XXX/.npm/_logs/XXX-debug.log 这时在另外的机器登录也是同样错误，说明是可能是服务器问题。 解决方案，通知管理员检查服务器是否正常。管理员检查后发现服务器OOM了： 重启服务器容器后，重新登录成功。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"异常","slug":"异常","permalink":"http://yoursite.com/tags/%E5%BC%82%E5%B8%B8/"}]},{"title":"flutter初探","date":"2019-12-19T01:59:31.000Z","path":"2019/12/19/flutter初探/","text":"前言忙完公司的工作之后，终于能腾出点时间来学习了，除了将基础和源码的学习补回来，还利用闲余的时间玩了一下flutter。刚开始我觉得Flutter的布局嵌套语法很恶心，内心是及其排斥的，但是在学了之后，我只想说：“真香！” 移动开发的现状随着移动互联网的高速发展，移动App的开发模式也在快速更迭中发展。最初，为了能够在不同系统环境上运行，通常要求开发团队进行多平台并行开发。通常，开发Android和iOS App一共需要两个开发团队，维护两套源代码，分别进行测试。 后来，开发者们逐渐意识到，这样的开发效率并不高，成本却不低。因此诞生了一个接一个的跨平台解决方案。比如react-native、weex、cordova、ionic等等。但无一例外地，它们都无法摆脱低性能的JavaScript或者原生代码依赖，或多或少地存在不足。所以急需一个真正能够打通多平台且高性能的框架来“救场”，Flutter则应运而生。 认识 FlutterFlutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。作为一种全新的响应式，跨平台，高性能的移动开发框架。从开源以来，已经得到越来越多开发者的喜爱。其中闲鱼、腾讯、美团、字节跳动等大厂都有自己成熟的团队并有深度实践。赶快学起来！ Flutter 特性那么，Flutter 究竟有哪些特性吸引着这么多开发者的喜爱呢呢？ 热重载（Hot Reload）：有热重载真的太舒服了，可以帮助开发者更高效地进行开发和测试，更利于修复Bug，就这一点比原生安卓制作简直不知道高到哪里去了。 统一的应用开发体验：Flutter拥有丰富的库，帮助开发者快速实现项目需求。同时，大部分的工具和库同时支持Android和iOS； 界面生动：Flutter支持跨平台开发，同样支持Material Design（原生Android设计语言）和Cupertino（原生iOS设计语言）风格的控件。开发者可根据设计需要实现不同风格的UI界面； 原生性能：无论在Android还是iOS环境中，Flutter可以提供与原生应用一样的性能，甚至支持120 HZ的高刷新率； 响应式框架：Flutter支持响应式框架，在某些场景下，开发者无需付出任何代价，即可完成不同屏幕的适配，使UI的构建更加轻松； 混合开发：Flutter可以与平台原生代码相结合，支持较新的Kotlin和Swift开发语言。借助该特性，可以轻松访问Android或iOS上的原生系统功能和系统API。 Flutter 核心思想一切都是控件（Widget）(Everything’s a Widget) 在Flutter的世界里，包括views,view controllers,layouts等在内的概念都建立在Widget之上。widget是flutter功能的抽象描述。 也就是说，在Flutter中，一个应用就是有许许多多的Widget组合而成的。 Flutter 分层架构 从flutter的架构图中不难看出widget是整个视图描述的基础。 Flutter Framework这是一个纯 Dart实现的 SDK，它实现了一套基础库，自底向上，我们来简单介绍一下： 底下两层（Foundation和Animation、Painting、Gestures）在Google的一些视频中被合并为一个dart UI层，对应的是Flutter中的dart:ui包，它是Flutter引擎暴露的底层UI库，提供动画、手势及绘制能力。 Rendering层，这一层是一个抽象的布局层，它依赖于dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上，这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心的部分，它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制(调用底层dart:ui)。 Widgets层是Flutter提供的的一套基础组件库，在基础组件库之上，Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。而我们Flutter开发的大多数场景，只是和这两层打交道。 Flutter Engine这是一个纯 C++实现的 SDK，其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在代码调用 dart:ui库时，调用最终会走到Engine层，然后实现真正的绘制逻辑。 聊完架构接下来我们聊一聊flutter的生命周期。 Flutter 生命周期Flutter的生命周期主要包括两大部分：state和App。 state 生命周期widget是immutable的，发生变化的时候需要重建，所以谈不上状态。StatefulWidget 中的状态保持其实是通过State类来实现的。State拥有一套自己的生命周期： 名称 状态 initState 插入渲染树时调用，只调用一次 didChangeDependencies state依赖的对象发生变化时调用 didUpdateWidget 组件状态改变时候调用，可能会调用多次 build 构建Widget时调用 deactivate 当移除渲染树的时候调用 dispose 组件即将销毁时调用 生命周期状态图如下： 注意： didChangeDependencies有两种情况会被调用。 创建时候在initState 之后被调用 在依赖的InheritedWidget发生变化的时候会被调用 正常的退出流程中会执行deactivate然后执行dispose。但是也会出现deactivate以后不执行dispose，直接加入树中的另一个节点的情况。 这里的状态改变包括两种可能：1.通过setState内容改变 2.父节点的state状态改变，导致孩子节点的同步变化。 App生命周期如果想要知道App的生命周期,那么需要通过WidgetsBindingObserver的didChangeAppLifecycleState 来获取。通过该接口可以获取是生命周期在AppLifecycleState类中。常用状态包含如下几个： 名称 状态 resumed 可见并能相应用户的输入 inactive 处在并不活动状态，无法处理用户相应 paused 不可见并不能相应用户的输入，但是在后台继续活动中 一个实际场景中的例子：在不考虑suspending的情况下：从后台切入前台生命周期变化如下: AppLifecycleState.inactive -> AppLifecycleState.resumed; 从前台压后台生命周期变化如下： AppLifecycleState.inactive -> AppLifecycleState.paused; Flutter 环境搭建工欲善其事必先利其器，环境搭建可以参考 Flutter实战 一步一步来搭建。 Flutter 实践经过一个多礼拜的折腾，自己也尝试写了几个小demo： 优秀学习资料 Flutter中文网 Flutter World Flutter免费视频-技术胖 《Flutter 实战》 闲鱼技术团队 拓展 Flutter和RN谁才是更好的跨端开发方案 参考 《Flutter 实战》 闲鱼技术团队","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"flutter","slug":"flutter","permalink":"http://yoursite.com/tags/flutter/"}]},{"title":"flex: 1 详解","date":"2019-12-11T09:17:34.000Z","path":"2019/12/11/flex-1详解/","text":"前言前段时间被头条hr从库里捞起来了(去年面到三面打入冷宫)，于是就接受了面试邀请，心想进不了也可以查缺补漏自己的不足。 其中就问了一道关于flex的问题： 123456789101112131415面试官：`flex: 1` 是哪些属性的缩写？ 我：对应三个属性(flex-grow|flex-shrink|flex-basis)。 面试官：`1` 对应哪个属性，另外两个属性的默认值是多少？ 我：当 flex 取值为一个非负数字时，则该数字为 flex-grow 值，flex-shrink 默认为 1，flex-basis 默认 0%。心想幸好当时学的时候看到过。 面试官：这三个属性分别表示的什么意思，剩余空间和溢出空间的概念有了解过吗？ 我：。。。不知道 面试官：没关系，我们下一个问题。 总结：果然很头条(一个问题问到你不知道为止)。 接下来我就来对flex对应的三个属性做个详解。 首先明确一点是，flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。 flex-grow传统的布局是子容器在父容器中从左到右进行布局，应用 flex 进行布局，那么父容器一定设置 display: flex，子容器要“占有”并且“瓜分”父容器的空间，如何占有、瓜分的策略就是弹性布局的策略。这里就要解释到“剩余空间”的概念： 子容器在父容器的“主轴”上还有多少空间可以“瓜分”，这个可以被“瓜分”的空间就叫做剩余空间。 flex-grow 属性定义弹性盒子项（flex-item）的放大比例(定义子容器的瓜分剩余空间的比例)，默认为0，即如果存在剩余空间，也不放大(不会去瓜分)。 flex-shrink如果子容器宽度超过父容器宽度，即使是设置了 flex-grow，但是由于没有剩余空间，就分配不到剩余空间了。这时候有两个办法：换行和压缩。由于 flex 默认不换行，那么压缩的话，怎么压缩呢，压缩多少？此时就需要用到 flex-shrink 属性了。 flex-shrink 属性定义了弹性盒子项（flex-item）的缩小比例，默认为1，即如果空间不足，该子容器将缩小。 如果所有子项的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个子项的 flex-shrink 属性为0，其他子项都为1，则空间不足时，前者不缩小。 此时，剩余空间的概念就转化成了“溢出空间”。 注意： 负值对该属性无效。 如果子容器没有超出父容器，设置 flex-shrink 无效 flex-basisflex-basis 属性定义了在分配多余空间之前，子项占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 它可以设为跟 width 或 height 属性一样的值（比如350px），则子项将占据固定空间。既然是跟宽度相关，那么 max-width，min-width，width 和 flex-basis 的大小优先级是怎么样的。 max-width/min-width > flex-basis > width 理解完了这三个属性接下来就看一些我们平时常写的一些简写表示的意义。 flex 简写flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。 flex 取三个值1234567.item { flex: 2 1 200px; }// 等同于.item { flex-grow: 2; flex-shrink: 1; flex-basis: 200px;} flex 取值为 none当 flex 取值为 none，则计算值为 0 0 auto。 1234567.item { flex: none; }// 等同于.item { flex-grow: 0; flex-shrink: 0; flex-basis: auto;} flex 取值为 auto当 flex 取值为 auto，则计算值为 1 1 auto。 1234567.item { flex: auto; }// 等同于.item { flex-grow: 1; flex-shrink: 1; flex-basis: auto;} flex 取值为 一个非负数当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%。 1234567.item { flex: 1; }// 等同于.item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%;} flex 取值为 长度或百分比当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1。 123456789101112131415.item { flex: 0%; }// 等同于.item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}.item { flex: 20px; }// 等同于.item { flex-grow: 1; flex-shrink: 1; flex-basis: 20px;} flex 取值为 两个非负数字当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%。 1234567.item { flex: 1 2; }// 等同于.item { flex-grow: 1; flex-shrink: 2; flex-basis: 0%;} flex 取值为 一个非负数字和一个长度或百分比当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1。 1234567.item { flex: 2 20px; }// 等同于.item { flex-grow: 2; flex-shrink: 1; flex-basis: 20px;} 最后我们来用一个例子来计算子项的宽度。 栗子🌰1234567891011121314151617181920212223242526272829<div class="parent"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div></div> <style type="text/css"> .parent { display: flex; width: 600px; } .parent > div { height: 100px; } .item1 { width: 140px; flex: 2 1 0%; background: blue; } .item2 { width: 100px; flex: 2 1 auto; background: darkblue; } .item3 { flex: 1 1 200px; background: lightblue; }</style> 当 item-1 的 flex-basis 取 0% 的时候，是把该项目视为零尺寸的，故即便声明其尺寸为 140px，也并没有什么用，形同虚设而 item-2 的 flex-basis 取 auto 的时候，根据规则基准值使用值是主尺寸值即 100px，故这 100px 不会纳入剩余空间 主轴上父容器总尺寸：600px 剩余空间：600px - 100px(item2的flex-basis值) - 200px(item3的flex-basis值) = 300px 伸缩放大系数之和(flex-grow值)：2(item1) + 2(item2) + 1(item3) = 5 每一份比例所占宽度：300 / 5 = 60px; 剩余空间分配如下： item1 和 item2 各分配 2/5，各得 120px item3 分配 1/5，得 60px 各子项最终宽度为： item1 = 0%(0px) + 120px = 120px item2 = auto(100px) + 120px = 220px item3 = 200px + 60px = 260px 参考 Flex 布局教程：语法篇","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"flex","slug":"flex","permalink":"http://yoursite.com/tags/flex/"}]},{"title":"React数据大屏的应用实践","date":"2019-09-23T17:29:17.000Z","path":"2019/09/24/React数据大屏的应用实践/","text":"数据大屏与数据可视化现如今大数据已无所不在，并且正被越来越广泛的被应用到历史、政治、科学、经济、商业甚至渗透到我们生活的方方面面中，获取的渠道也越来越便利。 今天我们就来聊一聊“大屏应用”，说到大屏就一定要聊到数据可视化，现如今，数据可视化由于数据分析的火热也变得火热起来，不过数据可视化并不是一个新技术，可视化数据就是用可视化的方式展现的数据。而数据大屏作为大数据展示媒介的一种，广泛运用于各种展示厅、会展、发布会及各种狂欢节中，其中不乏一些通用的处理方案：阿里的DataV、百度的Suger、腾讯RayData等等。 随着物联网、5G等各种跟连接有关的技术的出现与发展，每个人手中掌握的数据量都呈指数级增长，光看这些数是看不过来也看不懂的，“数据可视化”就是一种简化，让艰难的数据理解过程，变成——看颜色，辨长短，分高低。从而大大缩短理解数据所需的时间。 因公司的自研产品涉及到BI模块，因此数据大屏展示的需求孕育而生（数据大屏需求已经完成）。 下面是本人针对这个数据大屏需求前期做的一些探索实践，数据也是mock的。 技术选型 React 全家桶（React-Router、React-Redux、React Hooks） Webpack 编译打包 Echarts 图表组件 Socket.IO 即时通讯、通知与消息推送 Grid 网格布局 系统搭建图表选择六种基本图表涵盖了大部分图表使用场景，也是做数据可视化最常用的图表类型： 柱状图 用来反映分类项目之间的比较； 饼图 用来反映构成，即部分占总体的比例； 折线图 用来反映随时间变化的趋势； 条形图 用来反映分类项目之间的比较； 散点图 用来反映相关性或分布关系； 地图 用来反映区域之间的分类比较。 基本图表类型都有通用的样式，不过多的展开讲解。我们更多的考虑如何选择常用图表来呈现数据，达到数据可视化的目标。基本方法：明确目标 —> 选择图形 —> 梳理维度 —> 突出关键信息。 数据请求推送当信息一旦准备就绪，我们就需要从服务器获取它们。这里我们需要一种基于推送的方法，例如 WebSocket 协议、轮询、服务器推送事件（SSE）以及最近的 HTTP2 服务器推送。这里我们简单比较一下 WebSocket 与轮询。 轮询需要客户端定时向服务器发送ajax请求，服务器接到请求后返回响应信息。这就需要大量的占据服务器资源。同时在HTTP1.x协议中也存在一些比如线头阻塞、头部冗余等问题。所以这种方案直接pass了。 再来说说 WebSocket，建立在 TCP 协议之上，数据格式比较轻量，性能开销小，通信高效，可以发送文本，也可以发送二进制数据。同时它还没有同源限制，客户端可以与任意服务器通信。还有一点 WebSocket 通常不使用 XMLHttpRequest，因此，当我们每次需要从服务器获取更多的信息时，无需发送头部数据。反过来说，这又减少了数据发送到服务器时需要付出的高昂的数据负载代价。对于数据大屏需要实时获取数据，这无疑是最高效的。 布局数据大屏的核心就是数据的拼接，具体到展示层可以归纳成数据块的拼接。这里我们采用通用的尺寸1920*108(16:9)。尺寸确立后，接下来要对展示层进行布局和页面的划分。这里的划分，主要根据我们之前定好的业务指标进行，核心业务指标安排在中间位置、占较大面积；其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。 对于这种块状(网格)布局，我们就可以使用我们强大的 CSS 布局方案 – Grid。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 安利一个grid 布局可视化设计工具 – CSS Grid Generator。可以使用它生成对应的代码，帮助咱们快速布局。 项目结构聊完这些通用知识我们就可以上手开发了。 我这里使用了我自己开发的脚手架（hzzly-cli）来生成react项目环境。 有兴趣了解脚手架开发的可以看我这篇文章动手开发一个自己的项目脚手架 项目结构如下： 12345678910111213141516171819202122232425262728├── src│ ├── assets // 资源目录│ ├── components // 公共组件目录│ │ ├── Card // Card组件│ │ ├── Charts // 图表组件目录│ │ │ ├── Bar // 柱状图│ │ │ ├── ChinaMap // 中国地图│ │ │ ├── Funnel // 漏斗图│ │ │ ├── Line // 折线图│ │ │ ├── Pie // 饼图│ │ │ └── lib // 基础图表组件│ │ ├── ScrollNumber // 滚动数字组件│ │ └── SvgIcon // Icon组件│ ├── global.scss│ ├── index.js│ ├── pages // 分块结构目录│ ├── router // 路由│ ├── store│ │ ├── actions│ │ ├── index.js│ │ ├── reducers│ │ ├── sagas│ │ └── types.js│ └── utils│ ├── genChartData.js│ ├── genMapData.js│ ├── socket.js│ └── util.js 知识点Chart基础组件封装这里对echarts-for-react进一步封装，其它图表组件可以直接继承使用。 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253// Charts/lib/BaseChart.jsimport React, { PureComponent } from 'react';import PropTypes from 'prop-types';import Echarts from 'echarts-for-react';export default class BaseChart extends PureComponent { static propTypes = { option: PropTypes.object.isRequired, data: PropTypes.object.isRequired, getOption: PropTypes.func.isRequired, style: PropTypes.object, }; static defaultProps = { style: {}, }; componentDidMount() { const { runAction } = this.props; if (this.chartRef && runAction) { const chartIns = this.chartRef.getEchartsInstance(); window.setTimeout(() => { runAction(chartIns); }, 300); } } render() { const { option, data, getOption, style } = this.props; const finalOption = getOption(option, data); const finalStyle = getStyle(style); return ( <Echarts ref={ref => { this.chartRef = ref; }} style={finalStyle} option={finalOption} notMerge lazyUpdate /> ); }}function getStyle(style) { return Object.assign({ position: 'relative' }, style );} 使用： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354// line.jsimport BaseChart from '../lib/BaseChart';import option from './option';import getOption from './getOption';export default class Line extends BaseChart { static defaultProps = { option, getOption, };}// option.js 基础配置export default { // ...};// getOption.js 计算配置文件function seriesCreator(series) { return series.map(e => ({ type: 'line', symbol: 'circle', smooth: true, lineStyle: { normal: { width: 3, }, }, ...e, }));}export default function(option, data) { const { tooltip, xAxis, yAxis, yCategory, series = [], ...rest } = data; return { ...option, xAxis: { ...option.xAxis, ...xAxis, }, tooltip: { ...option.tooltip, ...tooltip, }, yAxis: { ...option.yAxis, ...yAxis, data: yCategory || [], }, series: seriesCreator(series), ...rest, };} Socket封装SDK这里对socket.io-client封装成SDK，方便使用。 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283import io from 'socket.io-client';const socket = { wsConn: null, config: { wsHost: '/', // wesocket host onConn() {}, onDisconn() {}, onError() {}, onReceiveMsg() {}, }, init(opt) { socket.config = { ...socket.config, ...opt }; }, getWs() { if (socket.wsConn) { return socket.wsConn; } else { socket.initWs(); } }, getWsStatus() { return socket.wsConn ? socket.wsConn.connected : false; }, initWs() { if (socket.getWsStatus()) { return socket.wsConn; } const wsUrl = socket.config.wsHost; socket.wsConn = io.connect(wsUrl); socket.wsConn.on('connect', () => { socket.config.onConn(socket.wsConn); }); socket.wsConn.on('message', (...param) => { socket.config.onReceiveMsg(...param); }); socket.wsConn.on('disconnect', () => { socket.config.onDisconn(); }); return socket.wsConn; }, reconnect() { if (socket.wsConn) { if (socket.wsConn.disconnected) { // reconnect ws } else { // do nothing } } else { socket.initWs(); } }, disconnect() { if (socket.wsConn) { if (socket.wsConn.connected) { socket.wsConn.disconnect(); } } }, wsEmit(params) { if (socket.wsConn) { socket.wsConn.emit(params.name, params.data); } },};(function(global) { global.socket = socket;})(window);export { socket }; 动态数字展示该数据通过socket推送实时更新。 数字过渡的动态效果为对应数位的新数字从下至上替换旧数字，如果该位数的数字没有发生变化，则没有过渡效果。 1、对数据进行完善并格式化 针对数字少于9位数进行前位补零并进行千分位格式化 1234567891011121314151617const MAX_LEN = 9;function toThousands(val) { let num = (val || 0).toString(); while (num.length < MAX_LEN) { num = `0${num}`; } let result = ''; while (num.length > 3) { result = `,${num.slice(-3)}${result}`; num = num.slice(0, num.length - 3); } if (num) { result = num + result; } return result.toString().split('');} 2、过渡动画 利用样式控制过渡动画，在第一步中我们对数字进行了格式化，然后我们针对每一位数字进行比较，当数字不相等的时候添加active类，最后对active类添加动画。 12345// 循环渲染每一位数字<li className={`${oldNumber[i] !== newNumber[i] ? 'active' : ''}`}> <span className="num">{oldNumber[i]}</span> <span className="num">{newNumber[i]}</span></li> 123456789101112131415.active { .num { animation: move 1.5s; animation-fill-mode: forwards; // 让动画结束后保持最后一帧 }}@keyframes move { from { transform: translateY(0); } to { transform: translateY(-100%); }} 背景线性粒子这里我使用了我自己封装的组件，可以对应框架来安装引用： vue-particle-line react-particle-line 说明1、项目框架目录结构采用笔者自己搭建的webpack环境：webpack-template 2、关于适配和兼容性暂时还未完善，如果后期有时间会慢慢去完善 3、此项目为笔者调研时的实践，因为时间有限，一些功能还不善，设计和布局都是自己的一些想象与参考 4、此项目作为开源学习使用，谢绝用于商业应用 源码代码已上传至我的GitHub，欢迎 Star、Fork 参考 超全面设计指南：如何做大屏数据可视化设计？ 五个方面，聊聊大数据可视化的初体验 一个炫酷大屏展示页的打造过程","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"react","slug":"react","permalink":"http://yoursite.com/tags/react/"},{"name":"大屏","slug":"大屏","permalink":"http://yoursite.com/tags/%E5%A4%A7%E5%B1%8F/"}]},{"title":"AST的实践","date":"2019-09-19T02:04:36.000Z","path":"2019/09/19/AST的实践/","text":"什么是AST（抽象语法树）? It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code. AST是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。 AST是一个非常基础但是同时非常重要的知识点，我们熟知的 TypeScript、babel、webpack、vue-cli 都是依赖 AST 进行开发的。 这里我们就以 babel 为例来实践一下 AST。 Babel运行原理Babel 作为当今最为常用的 JavaScript 编译器，在前端开发中扮演着极为重要的角色。大多数情况下，Babel 被用来转译 ECMAScript 2015+ 至可兼容浏览器的版本。 Babel 的三个主要处理步骤分别是： 解析（parse） 转换（transform） 生成（generate） 整个过程中，parsing和generation是固定不变的，最关键的是transforming步骤，通过babel插件来支持，这是其扩展性的关键。 这三个阶段分别由 @babel/parser、@babel/core、@babel/generator 执行。Babel 本质上只是一个代码的搬运工，如果不给 Babel 装上插件，它将会把输入的代码原封不动地输出。正是因为有插件的存在， Babel 才能将输入的代码进行转变，从而生成新的代码。 解析输入JS源码，输出AST parsing（解析），对应于编译器的词法分析，及语法分析阶段。输入的源码字符序列经过词法分析，生成具有词法意义的token序列（能够区分出关键字、数值、标点符号等），接着经过语法分析，生成具有语法意义的AST（能够区分出语句块、注释、变量声明、函数参数等）。 利用 @babel/parser 对源代码进行解析 得到 AST。 栗如： 1console.log(info) 经过parsing后，生成的AST如下： 1234567891011121314151617181920212223242526272829{ "type": "CallExpression", "callee": { "type": "MemberExpression", "object": { "type": "Identifier", "loc": { "identifierName": "console", }, "name": "console", }, "property": { "type": "Identifier", "loc": { "identifierName": "log", }, "name": "log", } }, "arguments": [ "Identifier": { "type": "Identifier", "loc": { "identifierName": "log", }, "name": "info", } ]} 🔥Tip: JS代码对应的AST结构可以通过AST Explorer工具查看 仔细的小伙伴可能就会发现从我们的源代码到AST的过程其实就是一个分词的过程，将我们的 console.log(info) 分成 console、log、info。 有了这个 AST 树结构，我们就能进行语义层面转换了。 转换输入AST，输出修改过的AST 利用 @babel/traverse 对 AST 进行遍历，并解析出整个树的 path，通过挂载的 metadataVisitor 读取对应的元信息，这一步叫 set AST 过程。 @babel/traverse 是一款用来自动遍历抽象语法树的工具，它会访问树中的所有节点，在进入每个节点时触发 enter 钩子函数，退出每个节点时触发 exit 钩子函数。开发者可在钩子函数中对 AST 进行修改。 12345678910import traverse from "@babel/traverse";traverse(ast, { enter(path) { // 进入 path 后触发 }, exit(path) { // 退出 path 前触发 },}); transforming（转换），对应于编译器的机器无关代码优化阶段（稍微有点牵强，但二者工作内容都是修改AST），对 AST 做一些修改，比如针对上面的 log 增加一些信息方便我们调试： 1console.log(info) => console.log('[info]', info) 修改过后的 AST 结构： 12345678910111213141516171819{ "type": "CallExpression", "callee": { // .... }, "arguments": [ "StringLiteral": { "type": "StringLiteral", "value": "'[info]'", }, "Identifier": { "type": "Identifier", "loc": { "identifierName": "log", }, "name": "info", } ]} 语义层面的转换具体而言就是对AST进行增、删、改操作，修改后的AST可能具有不同的语义，映射回代码字符串也不同 生成输入AST，输出JS源码 generation（生成），对应于编译器的代码生成阶段，把AST映射回代码字符串。 利用 @babel/generator 将 AST 树输出为转码后的代码字符串。 实践说了这么多接下来我们就用代码实践一下上面的例子 相关npm包 @babel/parser 解析输入源码，创建AST @babel/traverse 遍历操作AST @babel/generator 把AST转回JS代码 @babel/types AST操作工具库 代码123456789101112131415161718192021222324252627282930313233343536const parser = require('@babel/parser');const traverse = require('@babel/traverse');const generate = require('@babel/generator');const t = require('@babel/types');function compile(code) { // 1. parse const ast = parser.parse(code); // 2. traverse const visitor = { CallExpression(path) { const { callee, arguments } = path.node; if ( t.isMemberExpression(callee) && callee.object.name === 'console' && callee.property.name === 'log' && arguments.length > 0 ) { const variableName = arguments[0].name; path.node.arguments.unshift( t.StringLiteral(`[${variableName}]`) ) } }, }; traverse.default(ast, visitor); // 3. generate return generate.default(ast, {}, code);}const code = `console.log(info)`;const result = compile(code);console.log(result.code); 总结看到这，我们的 AST 实践也告一段落了。当然，文章所讲的只是一个简单的例子，但基本的原理思路八九不离十，更多的类型还得自己去探究。总之，掌握好 AST，你真的可以做很多事情。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"AST","slug":"AST","permalink":"http://yoursite.com/tags/AST/"}]},{"title":"JWT--JSON WEB TOKEN","date":"2019-09-04T07:43:52.000Z","path":"2019/09/04/JWT--JSON WEB TOKEN/","text":"什么是JWTJSON Web Token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（RFC 7519)，该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。 JWT是目前最流行的跨域认证解决方案之一。 为什么使用JWT在看为什么使用之前，我们必须要先了解之前我们是如何进行验证请求的。 Session认证在 Session 认证方式中，用户登录后发给服务器，服务器在接收并验证发送过来的账号密码请求之后，就会把这个用户信息放入 Session 中，然后把 Session 存在服务器上，这样服务器就知道了这个用户的存在，当下一次用户访问的时候，就能认证了。 但因为我们知道http协议是一种无状态的协议，也就是说当下一次用户发送请求的时候，请求中没有任何信息能表明用户身份！也就是说不知道请求是谁发出来了，这样也就不能认证了。 所以就需要利用 Cookie 来管理 Session，即把 SessionID 放入 HTTP 响应中发给客户端，并保存在客户端，当客户端发送下一次请求的时候，就把这个 SessionID 一起发送回来，这样就能这次的请求是谁发出来的了。 扩展：Cookie 是由客户端（通常是浏览器）保存的小型文本信息，其内容是一系列的键值对，是由 HTTP 服务器设置并保存在浏览器上的信息。 Session认证的问题 内存开销大: 我们知道 Session 是存在服务器上的，实际上为了加快认证的速度，我们一般都会放在内存中，这样当用户基数大的时候，内存的开销就会很大。当然也可以将 Session 存入到 Session 表或者是缓存（redis等）中，但是依旧会有这样的问题。 安全性（CSRF）: 因为是基于 Cookie 进行用户识别，如果 Cookie 被截获，用户就会很容易收到跨站请求伪造的攻击。 分布式负载均衡: 因为 Session 信息是被单个服务器所保存的，所以在分布式系统中就不能适用了。比如 Session 一开始是保存在 A 服务器上，但是下一次请求的时候，这个请求被服务器负载均衡转发到了 B 服务器，而 B 服务器则没有这个 Session 信息，所以就不能用过认证了。 JWT的优点因为 JWT 是由服务端生成的，通过请求传给客户端（客户端可以以任意方式存放）。所以服务器不需要存储任何 JWT 信息。这样就能避免了上述 Session 的几个问题了。当然 JWT 还有其自身的一些优点。 轻量级：JWT是非常轻量级的，传输的方式多样化，可以通过URL/POST参数/HTTP头部等方式传输。 无状态/跨域认证：token包含所有用于标识用户的信息，这消除了对会话状态的需要。如果我们使用负载均衡，我们依然可以将token传递给任何服务器，而不是存储在我们登录的同一台服务器上。 安全性：无需担心跨站请求伪造（CSRF）攻击。 JWT 组成由三个部分组成：header.payload.signature headerheader：包含了两个部分 typ 和 alg，分别是声明类型和JWT的加密算法。 1234{ "alg": "HS256", "typ": "JWT"} 经过 base64URL 加密之后得到 JWT 的第一部分信息： 1eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 payloadpayload：负载，存放有效信息的地方。这些有效信息包含三个部分：标准中注册的声明、公共的声明 和 私有的声明。 iss：JWT 的签发者 sub：JWT 所面向的用户 aud：接收 JWT 的一方 exp：JWT 的过期时间这个过期时间必须大于签发时间 nbf：JWT 起作用的开始时间，即定义在什么时间之前，该JWT都是不可用的 iat：JWT 的签发时间 jti：JWT 的唯一身份标识，主要用来作为一次性 token，从而回避重放攻击。 除了官方字段，你还可以在这个部分定义私有字段： 123456{ "sub": "1234567890", "nickname": "hzzly", "username": "hzzly", "scopes": [ "admin", "user" ] } 经过 base64URL 加密之后得到 JWT 的第二部分信息： 1eyJzdWIiOiIxMjM0NTY3ODkwIiwibmlja25hbWUiOiJoenpseSIsInVzZXJuYW1lIjoiaHp6bHkiLCJzY29wZXMiOlsiYWRtaW4iLCJ1c2VyIl19 signaturesignature：是对前两部分的签名，防止数据篡改。由三个部分组成：header、payload 和 secret。其中 header 和 payload 都是加密后的字符串，secret就是一个字符串（密钥）。 1const signature = HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret); 算出签名以后，把 header、payload、signature 三个部分拼成一个字符串，每个部分之间用”点”（.）分隔，就可以返回给客户端。 最终的jwt： 1eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmlja25hbWUiOiJoenpseSIsInVzZXJuYW1lIjoiaHp6bHkiLCJzY29wZXMiOlsiYWRtaW4iLCJ1c2VyIl19.sXaHGg9SWyRpl-rhiSBFuD01G4yE3Gmi5m-JD7u6YyI base64URL面提到，header 和 payload 串型化的算法是 base64URL。这个算法跟 base64 算法基本类似，但有一些小的不同。 JWT 作为一个令牌（token），有些场合可能会放到 URL（比如 api.example.com/?token=xxx）。base64 有三个字符+、/和=，在 URL 里面有特殊含义，所以要被替换掉：=被省略、+替换成-，/替换成_ 。这就是 Base64URL 算法。 JWT的使用方式客户端收到服务器返回的 JWT，可以储存在 sessionStorage 或 localStorage 里面。 此后，客户端每次与服务器通信，都要带上这个 JWT。需要把它放在 HTTP 请求的头信息 Authorization 字段里面。 1Authorization: Bearer <token> 另一种做法是，跨域的时候，JWT 就放在 POST 请求的数据体里面。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"jwt","slug":"jwt","permalink":"http://yoursite.com/tags/jwt/"}]},{"title":"一本正经的来了解一下HTTP2","date":"2019-09-01T15:44:30.000Z","path":"2019/09/01/一本正经的来了解一下HTTP2/","text":"HTTP/2介绍维基百科：HTTP/2（超文本传输协议第2版，最初命名为HTTP 2.0），简称为h2（基于TLS/1.2或以上版本的加密连接）或h2c（非加密连接），是HTTP协议的的第二个主要版本，使用于万维网。 HTTP/2是HTTP协议自1999年HTTP 1.1发布后的首个更新，主要基于SPDY协议。它由互联网工程任务组（IETF）的Hypertext Transfer Protocol Bis（httpbis）工作小组进行开发。该组织于2014年12月将HTTP/2标准提议递交至IESG进行讨论，于2015年2月17日被批准。HTTP/2标准于2015年5月以RFC 7540正式发表。 HTTP/1.x存在的问题在看为什么要使用HTTP/2之前，我们先来了解之前的HTTP/1.x存在的问题。 线头阻塞：TCP连接上只能发送一个请求，前面的请求未完成前，后续的请求都在排队等待。 多个TCP连接：虽然HTTP/1.1管线化可以支持请求并发，但是浏览器很难实现，chrome、firefox等都禁用了管线化。所以1.1版本请求并发依赖于多个TCP连接，建立TCP连接成本很高，还会存在慢启动的问题。 头部冗余，采用文本格式：HTTP/1.X版本是采用文本格式，首部未压缩，而且每一个请求都会带上cookie、user-agent等完全相同的首部。 客户端需要主动请求 HTTP/2的具体变化二进制分帧层先来理解几个概念： 帧（Frame）：HTTP/2数据通信的最小单位消息：指 HTTP/2 中逻辑上的 HTTP 消息。例如请求和响应等，消息由一个或多个帧组成。 流（Stream）：存在于连接中的一个虚拟通道。流可以承载双向消息，每个流都有一个唯一的整数ID。 消息（Message）：一个完整的HTTP请求或响应，由一个或多个帧组成。特定消息的帧在同一个流上发送，这意味着一个HTTP请求或响应只能在一个流上发送。 HTTP/2 性能提升的核心就在于二进制分帧层。HTTP2是二进制协议，他采用二进制格式传输数据而不是1.x的文本格式，二进制协议解析起来更高效。 HTTP / 1 的请求和响应报文，都是由起始行，首部和实体正文（可选）组成，各部分之间以文本换行符分隔。HTTP/2 将请求和响应数据分割为更小的帧，并且它们采用二进制编码。 HTTP/2 中，同域名下所有通信都在单个连接上完成，该连接可以承载任意数量的双向数据流。每个数据流都以消息的形式发送，而消息又由一个或多个帧组成。多个帧之间可以乱序发送，根据帧首部的流标识可以重新组装。 多路复用上面提到HTTP/1.x的线头阻塞和多个TCP连接的问题，HTTP2的多路复用完美解决。HTTP/2让所有的通信都在一个TCP连接上完成，真正实现了请求的并发。 在一个 TCP 连接上，HTTP/2可以向服务器不断发送帧，每帧的 stream identifier 的标明这一帧属于哪个流，然后在接收时，根据 stream identifier 拼接每个流的所有帧组成一整块数据。把 HTTP/1.x 每个请求都当作一个流，那么多个请求变成多个流，请求响应数据分成多个帧，不同流中的帧交错地发送给对方，这就是 HTTP/2 中的多路复用。 流的概念实现了单连接上多请求 - 响应并行，解决了线头阻塞的问题，减少了 TCP 连接数量和 TCP 连接慢启动造成的问题 所以 HTTP/2 对于同一域名只需要创建一个连接，而不是像 HTTP/1.x 那样创建 6~8 个连接。 头部压缩在HTTP/1.x版本中，首部用文本格式传输，通常会给每个传输增加500-800字节的开销。当一个网站请求非常多时，而每个请求带的一些首部字段都是相同的，例如cookie、user-agent等，浪费了很多带宽资源。HTTP/2为此对消息头采用HPACK（专为HTTP/2头部设计的压缩格式）进行压缩传输，能够节省消息头占用的网络的流量。头部压缩需要在浏览器和服务器端之间： 维护一份相同的静态字典，包含常见的头部名称，以及常见的头部名称和值的组合 维护一份相同的动态字典，可以动态的添加内容 通过静态Huffman编码对传输的首部字段进行编码 HTTP/2的静态字典可以查看这里 所以我们在传输首部字段的时候，例如要传输method:GET,那我们只需要传输静态字典里面method:GET对应的索引值就可以了，一个字节搞定。像user-agent、cookie这种静态字典里面只有首部名称而没有值的首部，第一次传输需要user-agent在静态字典中的索引以及他的值，值会采用静态Huffman编码来减小体积。 第一次传输过user-agent 之后呢，浏览器和服务器端就会把它添加到自己的动态字典中。后续传输就可以传输索引了，一个字节搞定。 服务器推送浏览器发送一个请求，服务器主动向浏览器推送与这个请求相关的资源，这样浏览器就不用发起后续请求。Server-Push 主要是针对资源内联做出的优化，相较于 HTTP/1.x 资源内联的优势: 客户端可以缓存推送的资源 客户端可以拒收推送过来的资源 推送资源可以由不同页面共享 服务器可以按照优先级推送资源 重置HTTP/1.1的有一个缺点是：当一个含有确切值的Content-Length的HTTP消息被送出之后，你就很难中断它了。当然，通常你可以断开整个TCP链接（但也不总是可以这样），但这样导致的代价就是需要通过三次握手来重新建立一个新的TCP连接。 一个更好的方案是只终止当前传输的消息并重新发送一个新的。在HTTP/2里面，我们可以通过发送RST_STREAM帧来实现这种需求，从而避免浪费带宽和中断已有的连接。 扩展HTTP/2升级并不完全是没有副作用的，先说结论，HTTP/1.x全升HTTP/2性能不一定能提升，还是需要做一些特殊的优化。 需要把针对HTTP/1.x的优化点摘出来改成对h2友好的，不然会影响性能，比如雪碧图，css，js行内引入，域名打散这些都是针对h1的优化，如果不针对h2做修改，收益可能是负的。 保证你的页面没有那种古老的合并资源请求的优化，比如通过xhr请求多个图片js，html片段再在客户端解析的骚操作。 h2特性在h1上不支持，所以你需要在不支持的h1浏览器里访问站点，来做性能测试，需要成本。 h2对单请求的优化有限，如果做流服务器，可能收益也不大，视频，大图片下载，多路复用也体现不出什么优势。 开启h2之后对ssl的配置可能会更复杂一些，如果不是nginx层代理开启，而是在前端机上比如nodejs服务上开启h2，服务端的改造也比较麻烦，不像静态资源那么开关方便。 参考 维基百科：HTTP/2 《http2讲解》 把所有 HTTPS 项目无脑升级成 HTTP/2 会有什么坑吗?[知乎]","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"http","slug":"http","permalink":"http://yoursite.com/tags/http/"}]},{"title":"深究HTTPS","date":"2019-08-13T07:44:42.000Z","path":"2019/08/13/深究HTTPS/","text":"前言：还没有用上https的可以看一下我之前写的Nginx下升级https，把你的http升级到https。 HTTP和HTTPS基本概念HTTP：超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。HTTPS：超文本传输安全协议（英语：Hypertext Transfer Protocol Secure，缩写：HTTPS，常称为HTTP over TLS，HTTP over SSL或HTTP Secure）是一种通过计算机网络进行安全通信的传输协议。HTTPS经由HTTP进行通信，但利用SSL/TLS来加密数据包。HTTPS开发的主要目的，是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。 HTTP和HTTPS的差异 从上面概念也可以看出来HTTP是不安全的，且攻击者通过监听和中间人攻击等手段，可以获取网站帐户和敏感信息等。HTTPS被设计为可防止前述攻击，并在正确配置时被认为是安全的。 HTTP的URL由”http://“起始且默认使用端口80，而HTTPS的URL由”https://“起始且默认使用端口443。 HTTP协议运行在TCP之上，所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。HTTPS是运行在SSL/TLS之上的HTTP协议，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。 1）对称加密：密钥只有一个，加密解密为同一个密码，且加解密速度快，典型的对称加密算法有DES、AES等； 2）非对称加密：密钥成对出现（且根据公钥无法推知私钥，根据私钥也无法推知公钥），加密解密使用不同密钥（公钥加密需要私钥解密，私钥加密需要公钥解密），相对对称加密速度较慢，典型的非对称加密算法有RSA、DSA等。 简述HTTPS访问过程HTTPS在进行数据传输之前会与服务器和浏览器进行一次握手，在握手时确定双方的加密密码信息。 具体过程如下： 浏览器将支持的加密信息发送给网站服务器； 服务器会选择出一套加密算法和哈希算法，将验证身份的信息以证书（证书发布CA机构、证书有效期、公钥、证书所有者、签名等）的形式发送给浏览器； 当浏览器收到证书之后首先需要验证证书的合法性，如果证书受到浏览器信任则在浏览器地址栏会有标志显示，否则就会显示不受信的标识。当证书受信之后，浏览器会随机生成一串密码，并使用证书中的公钥加密。之后就是使用约定好的哈希算法握手消息，并生成随机数对消息进行加密，再将生成的信息发送给服务器； 当服务器接收到浏览器发送过来的数据后，会使用服务器本身的私钥将信息解密确定密码，然后通过密码解密浏览器发送过来的握手信息，并验证哈希是否与浏览器一致。然后服务器会使用密码加密新的握手信息，发送给浏览器； 最后浏览器解密并计算经过哈希算法加密的握手消息，如果与服务发送过来的哈希一致，则此握手过程结束后，服务器与浏览器会使用之前浏览器生成的随机密码和对称加密算法进行加密交换数据。 HTTPS的加密原理HTTPS在加密过程中使用了非对称加密技术和对称加密技术。 对称加密算法采用单钥密码系统的加密方式，同一个密钥可以同时做信息的加密和解密，这种加密的方法称为对称加密。 SSL在通信过程中，使用了对称加密算法，也就是说客户端和服务器同时共享一个密钥。 于是，以共享密钥的方式加密，必须将密钥发给对方。这个时候，假如通信过程被监听，密钥被攻击者获取了，那么这个时候也就失去了加密的意义了。 于是就需要使用两把密钥的非对称加密算法。 非对称加密算法与对称加密算法相反，非对称加密算法需要两个密钥来进行加密和解密，这两个密钥是配对的，分别是公开密钥（公钥）和私有密钥（私钥）。 于是现在，假设现在由服务器来生成一对公钥和密钥。 当客户端第一次发请求和服务器协商的时候，服务器就生成了一对公钥和私钥。 紧接着，服务器把公钥发给客户端（明文，不需要做任何加密），客户端接收后，使用服务器发过来的公钥进行数据加密。 再接着，服务器接收到了以后，用配对的私钥进行解密，就得到了客户端发送的数据。 非对称加密算法的特点：算法强度复杂、安全性依赖于算法与密钥但是由于其算法复杂，而使得加解密速度性能上比较差，没有对称加密算法加解密的速度快。 但是我们还存在一个问题，如果公钥被中间人拿到篡改呢？ 这时我们就需要使用证书保证公钥的正确性 公钥证书首先，服务器的运营人员向数字证书机构（CA）提出公开密钥的申请。数字证书认证机构在验证申请者的身份之后，会对申请的公开密钥做数字签名，然后分配这个已签名的公开密钥，并将该公开密钥放入公钥证书后绑定在一起。 简单点理解就是：CA会向申请者颁发一个证书文件和证书的私钥文件，这个证书文件里面的内容有：签发者、证书用途、服务器申请的时候附带的公钥、服务器的加密算法、使用的HASH算法、证书到期的时间等等，私钥文件就是与证书中公钥对应的私钥。 紧接着，把上面所提到的证书文件里的内容，做一次HASH求值，得到一个HASH值。 再接着，用CA的私钥进行加密，这样就完成了数字签名。而用CA的私钥加密后，就生成了类似人体指纹的签名，任何篡改证书的尝试，都会被数字签名发现。 最后，把数字签名，附在数字证书的末尾，传输回来给服务器。 接下来，服务器会把这份由数字证书认证机构颁发的公钥证书发给客户端。客户端拿到这个数字证书以后，会去校验证书签名的合法性，先对证书进行SHA256（浏览器的加密算法）得到一个哈希值，然后用证书的公钥对证书的签名进行解密从中取得另一个哈希值，如果这两个哈希值相等，说明证书没有被篡改过，确实是权威机构颁发。 如果认证通过，就可以取得服务器的公开密钥。 接下来就可以使用对称加密算法通信了。 扩展：客户端证书HTTPS中不仅可以使用服务器证书，还可以使用客户端证书。以客户端证书进行客户端认证，它的作用与服务器证书是相同的。 例如，银行的网上银行就采用了客户端证书（网银盾）。在登录网银时不仅要求用户确认输入ID和密码，还会要求用户的客户端证书（网银盾），以确认用户是否从特定的终端访问网银。 HTTPS的安全通信机制 client_hello这一步中，客户端通过发送client_hello报文开始SSL通信。在请求中，浏览器会带上一些建立连接的必要信息（注意：这一步的信息全都是明文的），包括： 版本: 客户端支持的最高的 TLS 协议版本。从高到低依次为：TLS v1.2, TLS v1.1, TLS v1.0, SSL v3, SSL v2。其中低于 TLS v1.0 的版本基本不再使用，因为 SSL v3 和 SSL v2 都存在漏洞，Google 和 Mozilla 已明确禁用 SSL 协议。 密码套件: 按优先级降序排列的、客户端支持的加密套件列表。每个加密套件会各包含一个认证算法（用于身份验证）、密钥交换算法（用于协商密钥）、对称加密算法（用于消息加密）和信息摘要算法（用于完整性校验）。 压缩方法: 客户端支持的用于压缩消息、降低传输体积的压缩算法列表。 随机数: 一个由客户端生成的随机数，使用 32 位时间戳和一个安全随机数生成器生成的 28 字节随机数组成。这个随机数用于后续Master Key的生成，并防止重放攻击。 会话标识: 一个变长的会话标志。非 0 值意味着客户端希望更新当前已存在的连接的参数或者为此连接创建一个新的连接。0 值表示客户端想在新会话上创建一个新连接。 扩展字段: 包含一些其他的相关参数（比如 SNI）。 server_hello客户端在发出client_hello消息之后，会等待服务器返回server_hello消息，包含和 client_hello相同的参数。一般来说，参数结构如下： 版本: 包含客户端支持的最低版本和服务器支持的最高版本。 密码套件: 包含了服务器从客户端发来的密码套件列表中选择出的将要使用的密码套件。 压缩方法: 包含了服务器从客户端发来的压缩方法列表中选择出的将要使用的压缩方法。 随机数: 由服务器生成的不同于客户端在client_hello中发来的随机数的另一个独立的随机数。 会话标识: 如果客户端发送的会话标识不为 0，服务器会使用与客户端发送的一致的会话标识，否则返回的是服务器生成的一个新的会话标识。 certificate + server_hello _done通常来说，服务器会在certificate消息中发送其自身的公开密钥证书供客户端进行验证。 最后，服务器发送server_hello_done消息，表明服务器的 hello 相关的消息结束。在发送此消息之后，服务器会等待客户端应答，该消息没有参数。 在这一步结束之后表明最初阶段的SSL握手协商部分结束。 client_key_change客户端在收到服务器发来的server_hello_done消息之后，会验证服务器提供的证书是否合法，并检查server_hello的各项参数。如果验证通过，则客户端会向服务器发送一条或多条消息。 然后客户端会发送client_key_exchange报文消息，报文中包含通信加密中使用的一种被称为PreMaster Key的随机密码串，并使用服务器证书中的公钥或者服务器密钥交换消息中的临时 RSA 密钥加密。这个密钥会被用于之后的Master Key的计算。 change_cipher_spec + finished经过以上步骤，客户端和服务器已经可以通过得到的消息计算出Master Key了。从现在开始，客户端和服务器都将开始使用协商好的加密算法、密钥进行通信，在正式传递消息之前会计算Master Key和之前握手过程中收到的所有信息的hash，并通过协商好的加密算法使用 Master Key加密，作为change_cipher_spec消息的内容，接着发送finished消息。服务器在收到客户端发来的change_cipher_spec和finished消息之后，也会计算Master Key并使用协商好的加密算法和之前握手过程中收到的所有信息的hash，发回给客户端用以验证。至此，握手阶段结束，之后就可以交换应用层的内容了。 服务器和客户端的finished报文交换完毕之后，SSL连接就算建立完成，当然，通信会受到SSL的保护。从此处开始进行应用层协议的通信，即发送HTTP请求。 至此，整个过程介绍完毕。 实践HTTPS连接的握手过程我们可以使用 curl 命令来简略查看建立 HTTPS 时的握手过程，在命令行中执行：curl -v -I -L https://hzzly.cn 能得到如下的输出： 简单说明一下连接的建立过程： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152# 表示建立了和 hzzly.cn 服务器 443 端口的连接。Connected to hzzly.cn (39.108.182.125) port 443 (#0) # 客户端发出 client_hello 消息。TLSv1.2 (OUT), TLS handshake, Client hello (1): # 服务器发出 server_hello 消息。TLSv1.2 (IN), TLS handshake, Server hello (2): # 服务器发出 certificate 消息。TLSv1.2 (IN), TLS handshake, Certificate (11): # 服务器发出 server_key_exchange 消息。TLSv1.2 (IN), TLS handshake, Server key exchange (12): # 服务器发出 server_done 消息。TLSv1.2 (IN), TLS handshake, Server finished (14): # 客户端发出 client_key_exchange 消息。TLSv1.2 (OUT), TLS handshake, Client key exchange (16): # 客户端发出加密后的 client_hello 消息。TLSv1.2 (OUT), TLS change cipher, Client hello (1): # 客户端发出 hello_done 消息。TLSv1.2 (OUT), TLS handshake, Finished (20): # 服务器将加密后的 client_hello 消息发回。TLSv1.2 (IN), TLS change cipher, Client hello (1): # 握手结束。TLSv1.2 (IN), TLS handshake, Finished (20): # SSL 连接采用 ECDHE-RSA-AES256-GCM-SHA384 密码套件。# ECDHE 表示密钥交换方法采用椭圆曲线迪菲-赫尔曼交换方法# RSA 表示密钥交换中使用的签名方式# AES-256-GCM 表示的是对称加密算法# SHA-384 表示的是内容完整性校验使用的哈希算法SSL connection using TLSv1.2 / ECDHE-RSA-AES256-GCM-SHA384 # 之后的几行包含了证书的内容，包括有效时间、常用名、证书签发机构等。Server certificate: # Common Name 为 hzzly.cn subject: CN=hzzly.cn # 在此时间之前无效 start date: Aug 2 00:00:00 2019 GMT # 在此时间之后无效 expire date: Aug 1 12:00:00 2020 GMT # 域名和证书的域名匹配 subjectAltName: host "hzzly.cn" matched certs "hzzly.cn" # 签发者是 Encryption issuer: C=US; O=DigiCert Inc; OU=www.digicert.com; CN=Encryption Everywhere DV TLS CA - G1 参考 《图解http》 从Chrome源码看HTTPS","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"https","slug":"https","permalink":"http://yoursite.com/tags/https/"}]},{"title":"动手开发一个自己的项目脚手架","date":"2019-07-19T13:00:49.000Z","path":"2019/07/19/动手开发一个自己的项目脚手架/","text":"前言：随着前端工程化的不断深入，同时 Node 给前端开发带来了很大的改变，促进了前端开发的自动化，越来越多的人选择使用脚手架来从零到一搭建自己的项目。其中最熟悉的就是vue-cli和create-react-app，它们可以帮助我们初始化配置、生成项目结构、自动安装依赖等等，最后我们一行指令即可运行项目开始开发，或者进行项目构建（build）。在实际的开发过程中，我们可能会有自己的特定需求，那么我们就得学会如何开发一个Node命令行工具。 在前面的文章 动手搭建react开发环境系列 中，结尾处我们说到，既然我们的项目结构搭建好了，但不能每次开发都来手动复制项目结构，所以我们就要通过执行命令就生成我们需要的项目结构。 我们的初步设想是，在指定目录下执行一个命令（假设为create） 1hzzly create demo 就会生成一个目录名为 demo 的项目，里面包含有我们所需的基础项目结构。 开始初始化项目1234mkdir hzzly-clicd hzzly-climkdir bin libnpm init -y 依赖1yarn add commander chalk boxen fs-extra inquirer ora update-notifier download-git-repo rimraf commander 一款重量轻，表现力和强大的命令行框架 chalk 用于打印彩色的信息 boxen 创建小“面板” inquirer 交互式命令行用户界面的集合 ora 用于创建 spinner，添加下载模板 loading 效果 update-notifier 用于检查包的线上版本与本地版本 download-git-repo 从节点下载并提取git存储库 初探1、创建一个用于运行命令的脚本123// bin/hzzly.js#! /usr/bin/env nodeconsole.log("hello world ~"); 执行 1node bin/hzzly.js 不出意外的话能够看到输出了 hello world ~，当然这不是我们想要的结果，我们是要直接运行 hzzly 命令就能输出 hello world ~ 🔥Tip: 主入口文件的最上方添加代码 #! /usr/bin/env node, 表明这是一个可执行的应用 2、添加命令1234567// package.json{ // ... "bin": { "hzzly": "bin/hzzly.js" },} 这里我们指定 hzzly 命令的执行文件为 bin/hzzly.js。 3、全局运行命令调试在项目目录下运行： 123npm install . -g// 或npm link 这样就可以使用 hzzly 命令了。 到此，一个本地的 npm 命令行工具就已经成功完成了，接下来我们就来完善具体的功能。 脚手架开发1、效果12345678910111213141516Usage: hzzly <command> [options] <app-name> [folder-name] Options: -v, --version output the version number -c, --clone use git clone -h, --help output usage information Commands: setup run remote setup commands create generate a new project from a react template check check test Examples: # create a new react project $ hzzly create demo 2、准备项目模版脚手架是帮助我们快速生成一套既定的项目架构、文件、配置，而最常见的做法的就是先写好一套项目框架模版，等到脚手架要生成项目时，则将这套模版拷贝到目标目录下。 一种是直接放在本地 另一种是托管在 github 上 这里我们选择托管在 github，然后通过download-git-repo下载到指定目录。我准备了一个项目模版，之后就会用它来作为脚手架生成的项目结构。 3、初始Command1234567891011121314151617181920// bin/hzzly.jsconst program = require('commander');const chalk = require("chalk");const pkg = require('../package.json'); program .version(pkg.version) .usage('<command> [options] <app-name> [folder-name]') .option("-c, --clone", "use git clone") .on("--help", () => { console.log(); console.log("Examples:"); console.log(); console.log( chalk.gray(" # create a new react project") ); console.log(" $ hzzly create demo"); console.log(); });program.parse(process.argv) 这样，当我们执行 hzzly 命令时就会有如下效果： 1234567891011Usage: hzzly <command> [options] <app-name> Options: -V, --version output the version number -c, --clone use git clone -h, --help output usage information Examples: # create a new react project $ hzzly create demo 接下来就可以去定义我们的 Commands 了。 4、定义Command命令在 program.parse(process.argv) 前面去定义我们的command命令 为什么要在它前面去定义命令呢？ parse 用于解析process.argv，设置options以及触发commands 123456789101112// bin/hzzly.js// 同上...program .command('create') .description('generate a new project from a template') .option("-c, --clone", "use git clone") .action((appName, option) => { // 获得了参数，可以在这里做响应的业务处理 console.log(`指令 create 后面跟的参数值: ${appName}`); console.log(option); });// 同上 command 定义命令行指令 description 命令描述，它会在help里面展示 option 定义参数。它接受四个参数，在第一个参数中，它可输入短名字 -a和长名字–name ,使用 | 或者 , 分隔，在命令行里使用时，这两个是等价的，区别是后者可以在程序里通过回调获取到；第二个为描述, 会在 help 信息里展示出来；第三个参数为回调函数，他接收的参数为一个string，有时候我们需要一个命令行创建多个模块，就需要一个回调来处理；第四个参数为默认值 action 注册一个 callback 函数 接下来就是处理生成项目模板的逻辑了，继续。 5、处理生成项目结构逻辑5.1、思路 1、输入 vue create 提示输入项目文件夹名称 2、输入 vue create . 表示在当前目录构建项目，但要给个提示（是否确定要在所在目录生成项目，其它文件将被删除） 3、输入 vue create app 表示在当前目录生成一个 app 的目录并在此目录构建项目，当有相同的目录时也要提示（当前目录已存在，是否继续构建） 好了，思路有了就 so easy 了 123456789101112131415161718192021222324252627282930313233343536// bin/hzzly.js// 同上...program .command('create') .description('generate a new project from a template') .option("-c, --clone", "use git clone") .action((appName) => { // // 获得了参数，可以在这里做响应的业务处理 // console.log(`指令 create 后面跟的参数值: ${appName}`); // 判断是否有传appName if (typeof appName === 'string') { // 判断是否有相同 appName 目录 checkAppName(appName); } else { // 没有传appName的话提示用户输入 const opts = [{ type: 'input', name: 'appName', message: 'Please enter the app name for your project：', validate: appName => { if (!appName) { return '⚠️ app name must not be null！'; } return true; } }]; // inquirer命令行交互工具 inquirer.prompt(opts).then(({ appName }) => { if (appName) { // 输入完之后判断是否有相同 appName 目录 checkAppName(appName); } }) } });// 同上 5.2、checkAppName1234567891011121314151617181920212223242526// 处理项目名称function checkAppName(appName) { // 获取绝对路径 const to = path.resolve(appName); // 判断是否在当前目录构建 if (appName === '.') { // 判断当前目录是否为空 checkEmpty(to) } else if (checkExist(to)) { // 如果传入的 appName 在当前目录已存在 inquirer.prompt([{ type: 'confirm', message: 'Target directory exists. Continue?', name: 'ok', }]).then(answers => { if (answers.ok) { // 回答是的话删除已存在的目录并下载模板构建项目 rm(appName) downloadAndGenerate(REACT_TPL, to, appName) } }) } else { // 如果以上情况都不是就直接下载模板构建项目 downloadAndGenerate(REACT_TPL, to, appName) }} 5.3、checkEmpty123456789101112131415161718// 判断目录是否为空function checkEmpty(path, appName) { const dirFiles = fs.readdirSync(path); if (dirFiles.length > 0) { inquirer.prompt([{ type: 'confirm', name: 'ok', message: 'Target directory is not empty and will overwritten. Continue?', }]).then(answers => { if (answers.ok) { fs.emptyDirSync(path) downloadAndGenerate(REACT_TPL, path, appName) } }) } else { downloadAndGenerate(REACT_TPL, path, appName) }} 5.4、checkExist1234// 判断目录是否已存在function checkExist(path) { return fs.pathExistsSync(path);} 5.5、downloadAndGenerate1234567891011121314151617181920// 下载模板构建项目function downloadAndGenerate(template, tmp) { // 生成下载loading const spinner = ora("downloading template"); const clone = program.clone || false; spinner.start(); download(template, tmp, { clone }, err => { spinner.stop(); if (err) { console.error( chalk.red( "Failed to download repo " + template + ": " + err.message.trim() ) ); process.exit(1) } // 下载完成后提示用户操作 console.log(`To get started:\\n\\n cd ${tmp}\\n npm install\\n npm run dev\\n\\nDocumentation can be found at https://github.com/hzzly`); });} 看到这，开发阶段就可告一段落了，我们已经可以通过 hzzly create <app-name> 命令行构建项目目录的步骤，接下来就是发布到npm给其他人使用。 发布到npm到目前为止，我们开发的 hzzly 还是在本地的，现在就该将其发布到 npm 上了。 1、首先 注册一个账号。 2、在终端执行 1npm login 输入用户名、密码和邮箱便可将本地机器与 npm 连接起来了。 3、修改package.json 123456{ // ... "files": [ "bin/" ],} 添加 files 属性指定哪些文件提交到 npm，这样可以减少包的大小。 4、发布 1npm publish 更新包首先修改 package.json 配置文件中的 version 字段，比如这里我从 1.0.0 改成 1.0.1（只能大于当前版本），然后修改脚手架，最后再次 1npm publish 优化1、添加小面板 123456789101112131415161718192021222324252627282930313233const boxen = require('boxen'); const BOXEN_OPTS = { padding: 1, margin: 1, align: 'center', borderColor: '#678491', borderStyle: 'round'}; function initializing(pkg) { const messages = []; messages.push( `🔥 Welcome to use hzzly-cli ${chalk.grey(`v${pkg.version}`)}` ); messages.push( chalk.grey('https://github.com/hzzly/hzzly-cli') ); messages.push( chalk.grey('https://www.npmjs.com/package/hzzly-cli') ) console.log(boxen(messages.join('\\n'), BOXEN_OPTS));} program .command('create') .description('generate a new project from a template') .option("-c, --clone", "use git clone") .action((appName) => { // 调用小面板 initializing(pkg) // ... }) 2、检查包的线上版本与本地版本12345678910111213141516171819202122232425262728const updateNotifier = require('update-notifier'); function checkVersion(pkg) { console.log(); console.log('🛠️ Checking your hzzly-cli version...'); const notifier = updateNotifier({ pkg, updateCheckInterval: 0 }); const update = notifier.update; if (update) { const messages = []; messages.push(`Update available ${chalk.grey(update.current)} → ${chalk.green(update.latest)}`) messages.push(`Run ${chalk.cyan(`npm i -g ${pkg.name}`)} to update`) console.log(boxen(messages.join('\\n'), { ...BOXEN_OPTS, borderColor: '#fae191' })); console.log('🛠️ Finish checking your hzzly-cli. CAUTION ↑↑', '⚠️'); } else { console.log('🛠️ Finish checking your hzzly-cli. OK', chalk.green('✔')); }}function initializing(pkg) { // ... checkVersion(pkg)} 3、README.md添加徽标推荐自动生成徽标网站 shields.io 深入inquirer.js创建脚手架的时候我们会发现很多脚手架都需要我们和命令行频繁交互，就像我们使用npm init的时候一样，那么是如何实现和命令行交互的呢？此时inquirer.js闪亮登场。 1、基本用法12345const inquirer = require('inquirer');inquirer.prompt([/* opts */]) .then((answers) => { // Use answers for... whatever!! }) 2、参数详解 type：表示提问的类型，包括：input, confirm, list, rawlist, expand, checkbox, password, editor； name: 存储当前问题回答的变量； message：问题的描述； default：默认值； choices：列表选项，在某些type下可用，并且包含一个分隔符(separator)； validate：对用户的回答进行校验； filter：对用户的回答进行过滤处理，返回处理后的值； transformer：对用户回答的显示效果进行处理(如：修改回答的字体或背景颜色)，但不会影响最终的答案的内容； when：根据前面问题的回答，判断当前问题是否需要被回答； pageSize：修改某些type类型下的渲染行数； prefix：修改message默认前缀； suffix：修改message默认后缀。 3、实例123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899const opts = [ { type: 'input', message: '姓名', name: 'name' }, { type: 'input', message: '手机号', name: 'phone', validate: val => { if (val.match(/\\d{11}/g)) { return true } return '请输入11位数字' } }, { type: 'confirm', message: '是否参加本次考核？', name: 'assess' }, { type: 'confirm', message: '是否同意本次考核须知？', name: 'notice', when: answers => { return answers.assess } }, { type: 'list', message: '欢迎来到本次考核，请选择语言：', name: 'eductionBg', choices: [ "js", "java", "php" ], filter: val => { // 将选择的内容后面加语言 return val + '语言' } }, { type: 'rawlist', message: '请选择你喜欢逛的社区：', name: 'game', choices: [ "掘金", "github", ] }, { type: 'expand', message: '请选择你喜欢的水果：', name: 'fruit', choices: [ { key: "a", name: "Apple", value: "apple" }, { key: "O", name: "Orange", value: "orange" }, { key: "p", name: "Pear", value: "pear" } ] }, { type: 'checkbox', message: '请选择你喜欢的颜色：', name: 'color', choices: [ { name: "red" }, new inquirer.Separator(), // 添加分隔符 { name: "blur", checked: true // 默认选中 }, { name: "green" }, new inquirer.Separator("--- 分隔符 ---"), // 自定义分隔符 { name: "yellow" } ] }, { type: 'password', message: '请输入你的密码：', name: 'pwd' }] inquirer.prompt(opts).then(answers=>{ console.log(answers);}) 代码已上传至我的GitHub，欢迎 Star、Fork 感谢Nodejs 制作命令行工具 用一次就会爱上的cli工具开发 commander.js","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"脚手架","slug":"脚手架","permalink":"http://yoursite.com/tags/%E8%84%9A%E6%89%8B%E6%9E%B6/"}]},{"title":"动手搭建react开发环境三","date":"2019-07-15T01:23:52.000Z","path":"2019/07/15/动手搭建react开发环境三/","text":"版本 webpack 4 Babel 7 本篇主要使用针对代码或者开发效率进行优化 1、ESLint规范 规范代码有利于团队协作 安装1yarn add eslint babel-eslint eslint-config-airbnb eslint-config-standard eslint-loader eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-standard -D .eslintrc新建.eslintrc文件（配置ESLint） 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465{ "parser": "babel-eslint", "env": { "browser": true, "es6": true, "node": true }, "parserOptions": { "ecmaVersion": 6, "sourceType": "module" }, "extends": ["airbnb", "prettier"], "rules": { "generator-star-spacing": [0], "consistent-return": [0], "react/forbid-prop-types": [0], "react/jsx-filename-extension": [1, { "extensions": [".js"] }], "global-require": [1], "import/prefer-default-export": [0], "react/jsx-no-bind": [0], "react/prop-types": [0], "react/prefer-stateless-function": [0], "react/jsx-wrap-multilines": [ "error", { "declaration": "parens-new-line", "assignment": "parens-new-line", "return": "parens-new-line", "arrow": "parens-new-line", "condition": "parens-new-line", "logical": "parens-new-line", "prop": "ignore" } ], "no-else-return": [0], "no-restricted-syntax": [0], "import/no-extraneous-dependencies": [0], "no-use-before-define": [0], "jsx-a11y/no-static-element-interactions": [0], "jsx-a11y/no-noninteractive-element-interactions": [0], "jsx-a11y/click-events-have-key-events": [0], "jsx-a11y/anchor-is-valid": [0], "no-nested-ternary": [0], "arrow-body-style": [0], "linebreak-style": ["error", "unix"], "import/extensions": [0], "no-bitwise": [0], "no-cond-assign": [0], "import/no-unresolved": [0], "comma-dangle": [ "error", { "arrays": "always-multiline", "objects": "always-multiline", "imports": "always-multiline", "exports": "always-multiline", "functions": "ignore" } ], "object-curly-newline": [0], "function-paren-newline": [0], "no-restricted-globals": [0], "require-yield": [1] }} .eslintignore新建.eslintignore文件（ESLint忽略特定的文件或目录） 1build/*.js 编译前置检验在执行编译之前去执行eslint-loader检查代码规范，有报错就不执行编译 12345678910111213module.exports = { //...同上 module: { rules: [ { enforce: 'pre', test: /\\.(js|jsx)$/, exclude: /node_modules/, use: 'eslint-loader', }, ], },} 2、编辑器配置EditorConfig包含一个用于定义代码格式的文件和一批编辑器插件，这些插件是让编辑器读取配置文件并以此来格式化代码。 .editorconfig新建.editorconfig文件 12345678910111213141516# http://editorconfig.orgroot = true [*]indent_style = spaceindent_size = 2end_of_line = lfcharset = utf-8trim_trailing_whitespace = trueinsert_final_newline = true [*.md]trim_trailing_whitespace = false [Makefile]indent_style = tab 3、cross-env因为windows不支持NODE_ENV=development的设置环境变量的方式，所以使用我们可以cross-env设置跨平台的环境变量的脚本。 安装1yarn add cross-env -D 使用1234// package.json"scripts": { "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"} 这样就可以使用 process.env.NODE_ENV 来获取环境变量继续操作了。 4、代码自动格式化使用husky, prettier, eslint在代码提交时自动格式化，并检查代码。 husky。一个git钩子工具，这里主要用pre-commit钩子。通俗点讲就是husky可以在你commit之前帮你做一些事情。 prettier。 一个很流行的代码格式化工具，你很容易在编辑器找到实现它的各种插件，像vscode,atom,webstom都可以找到。这里用它在代码提交前做代码格式化。 eslint。 代码检查工具。eslint也可以负责一部分代码格式检查的工作，让其负责代码错误检查。 lint-staged。在你提交的文件中，执行自定义的指令。 安装安装eslint如果上面已经安装过了就不用再次安装了，没有安装就按照上面 ESLint规范 步骤安装好。 安装stylelint1yarn add stylelint stylelint-config-prettier stylelint-config-standard -D 新建.stylelintrc文件 12345678910111213141516171819202122232425262728{ "extends": ["stylelint-config-standard", "stylelint-config-prettier"], "rules": { "selector-pseudo-class-no-unknown": null, "shorthand-property-no-redundant-values": null, "at-rule-empty-line-before": null, "at-rule-name-space-after": null, "comment-empty-line-before": null, "declaration-bang-space-before": null, "declaration-empty-line-before": null, "function-comma-newline-after": null, "function-name-case": null, "function-parentheses-newline-inside": null, "function-max-empty-lines": null, "function-whitespace-after": null, "number-leading-zero": null, "number-no-trailing-zeros": null, "rule-empty-line-before": null, "selector-combinator-space-after": null, "selector-descendant-combinator-no-non-space": null, "selector-list-comma-newline-after": null, "selector-pseudo-element-colon-notation": null, "unit-no-unknown": null, "no-descending-specificity": null, "value-list-max-empty-lines": null }} 安装prettier1yarn add prettier eslint-plugin-prettier eslint-config-prettier -D 安装husky，lint-staged1yarn add husky lint-staged pretty-quick -D prettier配置在eslintrc.json修改如下配置： 123{ "extends": ["airbnb", "prettier"],} 新建.prettierrc文件 1234567891011{ "singleQuote": true, "trailingComma": "es5", "printWidth": 100, "overrides": [ { "files": ".prettierrc", "options": { "parser": "json" } } ]} 配置.eslintignore文件 1build/*.js husky钩子配置husky会在你提交前，调用pre-commit钩子，执行lint-staged，如果代码不符合prettier配置的规则，会进行格式化；然后再用eslint的规则进行检查，如果有不符合规则且无法自动修复的，就会停止此次提交。如果都通过了就会讲代码添加到stage，然后commit。 12345678910111213141516171819202122232425262728// package.json{ // ... "scripts": { // ... "lint-staged": "lint-staged", "lint-staged:js": "eslint --ext .js --fix", "prettier": "prettier --write ./src/**/**/**/*" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "linters": { "**/*.{js,jsx,scss}": [ "prettier --write", "git add" ], "**/*.{js,jsx}": "npm run lint-staged:js", "**/*.scss": "stylelint --syntax=scss" }, "ignore": [ "**/dist/public/*" ] }} 到此，我们的react开发环境对于打包、代码规范以及提升开发效率的一些配置我们都具备了，可以开心的写我们的react了。接下来我们就可以把这些配置单独完善成一个库，通过我们的 cli 脚手架拉取直接基于它来开发，Let’s go脚手架开发…","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"react","slug":"react","permalink":"http://yoursite.com/tags/react/"},{"name":"webpack","slug":"webpack","permalink":"http://yoursite.com/tags/webpack/"}]},{"title":"动手搭建react开发环境二","date":"2019-07-12T01:31:10.000Z","path":"2019/07/12/动手搭建react开发环境二/","text":"版本 webpack 4 Babel 7 本篇主要使用针对上篇的webpack配置进行优化 webpack优化1、抽取css（MiniCssExtractPlugin）为每个引入 CSS 的 JS 文件创建一个 CSS 文件，提高首页加载速度 把 style-loader 替换成 MiniCssExtractPlugin.loader 新增 plugins 1yarn add mini-css-extract-plugin -D 1234567891011121314151617181920212223const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { //...同上 module: { rules: [ { test: /\\.(sc|sa|c)ss$/, use: [ // 'style-loader', MiniCssExtractPlugin.loader, // ...同上 ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].[hash].css', chunkFilename: '[id].[hash].css', }), ]} 2、压缩CSS（OptimizeCssAssetsWebpackPlugin）1yarn add optimize-css-assets-webpack-plugin -D 12345678const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = { //...同上 plugins: [ new OptimizeCssAssetsWebpackPlugin(), ]} 3、压缩JSwebpack 4只要在生产模式下， 代码就会自动压缩 1mode: 'production', 4、代码分割（SplitChunksPlugin）代码分割，单独打包，可以有效避免所有页面只生成一个js文件，首屏加载很慢的情况。 1234567891011121314151617181920212223242526module.exports = { //... optimization: { splitChunks: { chunks: 'all', // include all types of chunks // minSize: 30000, // 引入的库大于30kb时才会做代码分割 // minChunks: 1, // 一个模块至少被用了1次才会被分割 // maxAsyncRequests: 5, // 同时异步加载的模块数最多是5个，如果超过5个则不做代码分割 // maxInitialRequests: 3, // 入口文件进行加载时，引入的库最多分割出3个js文件 // automaticNameDelimiter: '~', // 生成文件名的文件链接符 // name: true, // 开启自定义名称效果 // cacheGroups: { // 判断分割出的代码放到那里去 // vendors: { // 配合chunks：‘all’使用，表示如果引入的库是在node-modules中，那就会把这个库分割出来并起名为vendors.js // test: /[\\/]node_modules[\\/]/, // priority: -10, // filename: 'vendors.js' // }, // default: { // 为非node-modules库中分割出的代码设置默认存放名称 // priority: -20, // reuseExistingChunk: true, // 避免被重复打包分割 // filename: 'common.js' // } // } } }}; 5、配置全局变量12345678910const webpack = require("webpack"); module.exports = { //...同上 plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development'), }), ]} 🔥Tip1 问题：当用 DefinePlugin 来配置全局变量时，只给依赖中注入了环境变量，也就是src文件夹下面的和依赖的模块。当我们在webpack配置文件中去取 process.env.NODE_ENV 依然是 undefined。 解决：在package.json命令中注入 123"scripts": { "start": "webpack-dev-server NODE_ENV=development --config ./build/webpack.config.js",} 6、CSS Tree Shaking去除项目代码中用不到的 CSS 样式，仅保留被使用的样式代码 🔥Tip2 问题：当使用 CSS Tree Shaking 的时候，需要把 css-modules 关闭，不然 css 会被全部清除掉。 1yarn add glob-all purify-css purifycss-webpack -D 123456789101112131415const PurifyCSS = require("purifycss-webpack");const glob = require("glob-all");module.exports = { //...同上 plugins: [ new PurifyCSS({ paths: glob.sync([ // 要做CSS Tree Shaking的路径文件 path.resolve(__dirname, "../public/*.html"), // 请注意，我们同样需要对 html 文件进行 tree shaking path.resolve(__dirname, "../src/*.js") ]) }) ]} 7、JS Tree Shaking清除到代码中无用的js代码，只支持import方式引入，不支持commonjs的方式引入 webpack 4只要在生产模式下， tree shaking就会生效。 8、resolve（解析）能设置模块如何被解析。 extension: 指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配 alias: 配置别名可以加快webpack查找模块的速度 123456789module.exports = { //...同上 resolve: { extensions: ['.js', '.jsx'], alias: { '@': path.join(__dirname, '../src'), }, },} 9、模块热替换HMR模块热替换也称为HMR，代码更新时只会更新被修改部分都显示。有如下有点 针对于样式调试更加方便 只会更新被修改代码的那部分显示，提升开发效率 保留在完全重新加载页面时丢失的应用程序状态。 这里我们采用Node.js的方式实现 1234yarn add express webpack-dev-middleware webpack-hot-middleware react-hot-loader cross-env -D cd buildtouch dev-server.js 1234567891011121314151617181920212223242526272829303132// dev-server.jsconst path = require('path');const express = require('express');const webpack = require('webpack');const webpackDevMiddleware = require('webpack-dev-middleware');const webpackHotMiddleware = require("webpack-hot-middleware")const config = require('./webpack.config.js'); const complier = webpack(config); // 编译器，编译器执行一次就会重新打包一下代码const app = express(); // 生成一个实例const DIST_DIR = path.resolve(__dirname, '../', 'dist'); // 设置静态访问文件路径const port = parseInt(process.env.PORT, 10) || 8586;const host = process.env.HOST || 'localhost'; const devMiddleware = webpackDevMiddleware(complier, { quiet: true, noInfo: true, stats: 'minimal'})const hotMiddleware = webpackHotMiddleware(complier, { log: false, heartbeat: 2000}) app.use(devMiddleware)app.use(hotMiddleware)// 设置访问静态文件的路径app.use(express.static(DIST_DIR))app.listen(port, () => { console.log(`App running at: http://${host}:${port}`);}) //监听端口 修改webpack.config.js 123456789101112131415161718192021222324252627282930313233343536// webpack.config.jsconst isDev = process.env.NODE_ENV === 'development'; module.exports = { entry: { main: [ 'webpack-hot-middleware/client?noInfo=true&reload=true', './src/index.js' ] }, module: { rules: [ { test: /\\.(sc|sa|c)ss$/, use: [ isDev ? 'style-loader' : MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { modules: { localIdentName: '[local]_[hash:base64:5]', }, sourceMap: !isDev && true, // 开发时刷新会导致闪屏（样式加载慢一步） }, }, 'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀 'sass-loader', // 编译scss ], }, ], }, plugins: [ new webpack.NamedModulesPlugin(), // 用于启动HMR时可以显示模块的相对路径 new webpack.HotModuleReplacementPlugin(), // 开启HMR(热替换功能,替换更新部分,不重载页面！) 相当于在命令行加 --hot ]} 修改入口文件index.js 123456789101112131415161718192021222324252627// index.jsimport React from 'react';import ReactDOM from 'react-dom';import { AppContainer } from 'react-hot-loader';import { BrowserRouter } from 'react-router-dom';import Router from './router';function render() { ReactDOM.render( <AppContainer> <BrowserRouter> <Router /> </BrowserRouter> </AppContainer>, document.getElementById('root') );}/* 初始化 */render();/* 热更新 */if (module.hot) { module.hot.accept('./router/index.js', () => { render(); });} 修改script命令行 1"start": "cross-env NODE_ENV=development node ./build/dev-server.js", ok，当我们修改代码时，页面就不需要刷新了，而是直接更新变化的部分。 10、BundleAnalyzerPlugin使用交互式可缩放树形图可视化webpack输出文件的大小，可以方便我们针对代码依赖的大小进行优化。 1yarn add webpack-bundle-analyzer -D 12345678910111213141516171819const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = { //...同上 plugins: [ new BundleAnalyzerPlugin({ analyzerMode: 'server', analyzerHost: '127.0.0.1', analyzerPort: 8889, reportFilename: 'report.html', defaultSizes: 'parsed', openAnalyzer: true, generateStatsFile: false, statsFilename: 'stats.json', statsOptions: null, logLevel: 'info' }) ]} 123456// package.json{ "script": { "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build" }} webpack分离配置文件针对开发环境和发布环境配置对应的webpack，公共的部分提取出来，再使用 webpack-merge 来将不同环境下的配置合并起来 123456cd buildtouch webpack.base.conf.jstouch webpack.dev.conf.jstouch webpack.prd.conf.js yarn add webpack-merge -D 1、提取公共配置1234567891011121314151617181920212223242526272829303132333435363738// webpack.base.conf.jsconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const { CleanWebpackPlugin } = require('clean-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const isDev = process.env.NODE_ENV === 'development';module.exports = { entry: ['./src/index.js'], output: { // 输出目录 path: path.resolve(__dirname, '../dist'), }, module: { // ...同webpack.config.js的modules }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ filename: 'index.html', // 最终创建的文件名 template: path.join(__dirname, '../public/index.html'), // 指定模板路径 }), ], resolve: { extensions: ['.js', '.jsx'], alias: { '@': path.join(__dirname, '../src'), }, }, optimization: { splitChunks: { // 代码分割按需加载、提取公共代码 chunks: 'all', // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件 }, }, performance: false, // 关闭性能提示}; 2、配置开发环境123456789101112131415161718192021222324252627282930313233343536373839404142// webpack.dev.conf.jsconst path = require("path");const webpack = require("webpack");const merge = require('webpack-merge');const commonConfig = require('./webpack.base.conf.js');module.exports = merge(commonConfig, { mode: "development", devtool: 'cheap-module-eval-soure-map', entry: { //实现刷新浏览器webpack-hot-middleware/client?noInfo=true&reload=true 是必填的 main: [ 'webpack-hot-middleware/client?noInfo=true&reload=true', './src/index.js' ] }, output: { // 输出目录 path: path.resolve(__dirname, "../dist"), // 文件名称 filename: "bundle.[name].[hash].js", chunkFilename: '[name].[hash].js' }, plugins: [ new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), // new webpack.DefinePlugin({ // 'process.env.NODE_ENV': JSON.stringify('development'), // }), ], devServer: { hot: true, contentBase: path.resolve(__dirname, "../dist"), host: "localhost", port: 8586, historyApiFallback: true, // 该选项的作用所有的404都连接到index.html proxy: { // 代理到后端的服务地址 // "/api": "http://localhost:3000" } }}); 3、配置发布环境123456789101112131415161718192021222324252627282930313233343536373839// webpack.prd.conf.jsconst path = require('path');const merge = require('webpack-merge');const commonConfig = require('./webpack.base.conf.js');module.exports = merge(commonConfig, { mode: 'production', devtool: 'cheap-module-source-map', output: { publicPath: '/', // 打包路径 // 输出目录 path: path.resolve(__dirname, '../dist'), // 文件名称 filename: 'bundle.[name].[hash].js', chunkFilename: '[name].[hash].js', }, optimization: { usedExports: true, splitChunks: { chunks: 'all', // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件 cacheGroups: { // 公共代码打包分组配置 vendors: { test: /[\\\\/]node_modules[\\\\/]/, name: 'vendors', }, }, }, }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].[hash].css', chunkFilename: '[id].[hash].css', }), // new webpack.DefinePlugin({ // 'process.env.NODE_ENV': JSON.stringify('production'), // }), ],}); 4、修改script命令行12"start": "cross-env NODE_ENV=development node ./build/dev-server.js","build": "cross-env NODE_ENV=production webpack --config ./build/webpack.prod.conf.js", 写到这里，一个基本的React开发环境也就搭起来了，接下来就可以针对代码或者开发效率进行优化。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"react","slug":"react","permalink":"http://yoursite.com/tags/react/"},{"name":"webpack","slug":"webpack","permalink":"http://yoursite.com/tags/webpack/"}]},{"title":"动手搭建react开发环境一","date":"2019-07-11T01:42:50.000Z","path":"2019/07/11/动手搭建react开发环境一/","text":"前言：接触webpack从在学校的那会起，也一直在使用它，用的都是别人封装好的，偶尔去修改一点点配置，也没有真正自己从零开始配置一个脚手架，接下来几篇将记录我对webpack以及开发中提升效率的配置，其中遇到的一些坑也会提示出来。 版本 webpack 4 Babel 7 本篇主要使用webpack搭建基础的React环境 快速浏览： webpack优化篇 webpack核心概念 entry: 入口起点 output: 输出 module: 模块，webpack中一切皆是模块 loader: 转换工具，webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中 plugin: 扩展插件，loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情，比如：打包优化，资源管理，注入环境变量等等 mode: webpac的打包环境[development, production] chunk: 代码库，一个chunk由十多个模块组合而成，用于代码合并与分割 基础配置1、初始化项目1234mkdir webpack-templatecd webpack-templatemkdir src public build distnpm init -y 2、安装webpack123yarn add webpack webpack-cli -Dcd buildtouch webpack.config.js 12345678910111213141516// 简单的webpack配置// webpack.config.js初始化内容const path = require('path'); module.exports = { mode: "development", // 指定环境 entry: ["./src/index.js"], // 打包入口文件 output: { // 输出目录 path: path.resolve(__dirname, "../dist"), // 文件名称 filename: "bundle.js" }, // 打包输出到 dist/bundle.js. module:{}, plugins:[]} package.json更改 123"scripts": { "start": "webpack --config ./build/webpack.config.js"}, 3、HtmlWebpackPlugin将打包的js自动插入到 index.html 里面去。 123yarn add html-webpack-plugin -Dcd publictouch index.html 123456789101112<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Webpack Template</title></head><body> <div id="root"></div></body></html> 1234567891011const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { //...同上 plugins:[ new HtmlWebpackPlugin({ filename: 'index.html', // 最终创建的文件名 template: path.join(__dirname, '../public/index.html'), // 指定模板路径 }), ]} 4、配置转义ES6/ES7/JSX12345678// @babel/polyfill: 模拟一个es6+的环境,提供es6方法和函数的垫片// core-js@2：@babel/preset-env实现按需引入polyfill时，声明core-js版本yarn add @babel/polyfill core-js@2 // babel-loader和@babel/core是核心模块// @babel/preset-env是一个智能预设，允许您使用最新的JavaScript// @babel/preset-react 转换JSXyarn add babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties -D 123456789101112module.exports = { //...同上 module: { rules: [ { test: /\\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader', } ], },} 新建.babelrc文件 123456789101112131415{ "presets": [ [ "@babel/preset-env", // 将es6的语法翻译成es5语法 { "useBuiltIns": "usage", // 做@babel/polyfill补充时，按需补充，用到什么才补充什么 "corejs": 2 }, ], "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-class-properties" ]} 🔥Tip1 问题：Support for the experimental syntax ‘classProperties’ isn’t currently enabled yarn add @babel/plugin-proposal-class-properties 并在plugins中配置 🔥Tip2 提示：useBuiltIns 和 transform-runtime 不能同时使用，如果使用transform-runtime就不要配useBuiltInsor，一般独立的类库项目才用transform-runtime 5、配置转义Typescript1yarn add typescript ts-loader -D 123456789101112module.exports = { //...同上 module: { rules: [ { test: /\\.tsx?$/, exclude: /node_modules/, loader: "ts-loader" } ], },} 新建tsconfig.json 123456789101112131415161718192021222324252627282930{ "compilerOptions": { "baseUrl": ".", "rootDir": ".", "outDir": "dist", "module": "esnext", // 模块引入的方式 "target": "es6", // 转换为es6 "lib": ["dom", "es7"], "jsx": "preserve", "moduleResolution": "node", "sourceMap": true, "allowJs": true, // 在typescript中允许引入js文件 "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": true, "noUnusedLocals": true, "noUnusedParameters": true, "strictNullChecks": true, "importHelpers": true, "suppressImplicitAnyIndexErrors": true, "experimentalDecorators": true, "downlevelIteration": true, "allowSyntheticDefaultImports": true, "paths": { "@/*": ["src/*"] } }, "exclude": ["node_modules", "dist", "build", "mock"]} 6、CleanWebpackPlugin清除 dist 目录下旧版本文件。 1yarn add clean-webpack-plugin -D 123456789const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { //...同上 plugins:[ //...同上 new CleanWebpackPlugin() ]} 7、source-map可以帮助我们定位到错误信息位置的文件 12devtool: "cheap-module-eval-source-map", // developmentdevtool: "cheap-module-source-map", // production 8、WebpackDevServerwebpack在本地为搭建了一个静态文件服务器，实时打包重加载修改的代码。 1yarn add webpack-dev-server -D 1234567891011121314module.exports = { //...同上 devServer: { hot: true, contentBase: path.resolve(__dirname, "../dist"), host: "localhost", port: 8586, historyApiFallback: true, // 该选项的作用所有的404都连接到index.html proxy: { // 代理到后端的服务地址 // "/api": "http://localhost:3000" } }} 修改package.json命令 1234// package.json"scripts": { "start": "webpack-dev-server --config ./build/webpack.config.js",}, 9、编译css和scss并使用css-modules1yarn add css-loader style-loader sass-loader node-sass -D 1234567891011121314151617181920212223module.exports = { //...同上 module: { rules: [ { test: /\\.(sc|sa|c)ss$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: { localIdentName: '[local]_[hash:base64:5]', }, // sourceMap: !isDev && true, }, }, 'sass-loader', // 编译scss ], }, ], },} 🔥Tip3 问题：当在 css-loader 配置上 sourceMap 时，配合热加载样式会闪屏 sourceMap: !isDev && true, 10、集成postcss为css某些特性自动增加前缀，并做一些兼容处理。 1yarn add postcss-loader postcss-preset-env -D 123456789101112131415module.exports = { //...同上 module: { rules: [ { test: /\\.(sc|sa|c)ss$/, use: [ //...同上 'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀 'sass-loader', ], }, ], },} 新建postcss.config.js文件 123456module.exports = { loader: 'postcss-loader', plugins: { 'postcss-preset-env': {}, }} 新建.browserlistrc文件 12341% in CNandroid >= 4.4ios >= 8not ie <= 11 11、图片处理123yarn add file-loader url-loader -D# file-loader 解决css等文件中引入图片路径的问题# url-loader 当图片较小的时候会把图片BASE64编码，大于limit参数的时候还是使用file-loader 进行拷贝 1234567891011121314151617module.exports = { //...同上 module: { rules: [ { test: /\\.(png|jpg|jpeg|gif|svg)/, use: { loader: 'url-loader', options: { outputPath: 'images/', limit: 10 * 1024, }, }, }, ], },} 12、字体文件处理123456789101112131415161718192021module.exports = { //...同上 module: { rules: [ { test: /\\.(eot|woff2?|ttf|svg)$/, use: [ { loader: 'url-loader', options: { name: '[name]-[hash:5].min.[ext]', limit: 5000, publicPath: 'fonts/', outputPath: 'fonts/', }, }, ], }, ], },} 到这里，webpack的基本配置我们已经准备的差不多了，赶紧写点react来试试水。 测试React环境1yarn add react react-dom react-router react-router-dom 123456789101112131415161718// src/index.jsimport React, { PureComponent } from 'react';import ReactDOM from 'react-dom'; export default class App extends PureComponent { render() { return ( <div> hello word~ </div> ) }} ReactDOM.render( <App />, document.getElementById('root')); 执行 npm start ，如果页面上能正常显示 hello word~ 那表示我们的webapck基础配置成功。 第一篇webpack基础配置到此结束了，下一篇对webpack进行优化配置。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"react","slug":"react","permalink":"http://yoursite.com/tags/react/"},{"name":"webpack","slug":"webpack","permalink":"http://yoursite.com/tags/webpack/"}]},{"title":"Nginx下升级https","date":"2019-06-11T07:26:49.000Z","path":"2019/06/11/Nginx下升级https/","text":"购买证书可以去阿里云的云盾证书服务购买 下载证书在证书控制台下载 Nginx 版本证书。下载到本地的压缩文件包解压后包含： .pem文件：证书文件 .key文件：证书的私钥文件（申请证书时如果没有选择自动创建CSR，则没有该文件） 配置Nginx1、在 Nginx 的安装目录下创建 cert 目录，并且将下载的全部文件拷贝到 cert 目录中，如果申请证书时是自己创建的CSR文件，请将对应的私钥文件放到 cert 目录下。 2、打开 Nginx 安装目录下 conf 目录中的 nginx.conf 文件 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024;}http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; gzip on; #开启gzip gzip_min_length 1k; #低于1kb的资源不压缩 gzip_comp_level 3; #压缩级别【1-9】，越大压缩率越高，同时消耗cpu资源也越多，建议设置在4左右。 gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css; #需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片，下面会讲为什么。 gzip_disable "MSIE [1-6]\\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持） gzip_vary on; #是否添加“Vary: Accept-Encoding”响应头 server { listen 80 default backlog=2048; #配置http可用 listen 443 ssl; #配置https server_name localhost; ssl_certificate ../cert/hzzly.pem; #配置证书文件 ssl_certificate_key ../cert/hzzly.key; #配置私钥文件 ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; location / { root /home/hzzly; index index.html index.htm; } # location ^~ /apis/ { # proxy_set_header Host $host; # proxy_set_header X-Real-IP $remote_addr; # proxy_set_header X-Forwarded-Server $host; # # 匹配任何以 /apis/ 开始的请求，并停止匹配 其它location # proxy_pass http://xxxxxxxxxx/; # } # location ^~ /assets/ { # gzip_static on; # expires max; # add_header Cache-Control public; # } }} 3、重启 Nginx 12$ cd /usr/local/nginx/sbin$ ./nginx -s reload 错误详解1、Nginx如果未开启SSL模块，配置Https时提示错误1nginx: [emerg] the "ssl" parameter requires ngx_http_ssl_module in ... Nginx开启SSL模块 切换到源码包： 1$ cd /usr/local/src/nginx-1.16.0 修改新的configure参数 1$ ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module 配置完成后，运行命令 1$ make //这里不要进行make install，否则就是覆盖安装 备份原有已安装好的nginx 1$ cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak 将刚刚编译好的nginx覆盖掉原有的nginx 1$ cp ./objs/nginx /usr/local/nginx/sbin/ 重启 Nginx 12$ cd /usr/local/nginx/sbin$ ./nginx -s reload","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"nginx","slug":"nginx","permalink":"http://yoursite.com/tags/nginx/"}]},{"title":"图解词法作用域与作用域链","date":"2019-03-04T07:53:11.000Z","path":"2019/03/04/图解词法作用域与作用域链/","text":"作用域 作用域是指程序源代码中定义变量的区域。 作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。 JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域。 想了解更多关于作用域的问题推荐阅读《你不知道的JavaScript上卷》第一章（或第一部分），从编译原理的角度说明什么是作用域。概括的说作用域就是一套设计良好的规则来存储变量，并且之后可以方便地找到这些变量。 词法作用域在你不知道的javascript上卷中是这样定义的：词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变(大部分情况下是这样的)。 在JS中词法作用域的规则： 函数允许访问函数外部的数据 整个代码结构中只有函数可以限定作用域 作用规则首先使用提升规则分析 如果当前作用域中有了名字了，就不考虑外面的名字 栗1： 123456var a = 2;function foo() { var a = 3; console.log(a); // 3}foo(); 栗2： 123456789function foo() { console.log(a); // 2}function bar() { var a = 3; foo();}var a = 2;bar(); 作用域链只有函数才能制造作用域结构，那么只要是代码，至少有一个作用域，即全局作用域。 凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域，那么将这样的所有作用域列出来，可以有一个结构：函数内指向函数外的链式结构。 以上面栗2： 123456789function foo() { console.log(a); // 2}function bar() { var a = 3; foo();}var a = 2;bar(); 全局作用域，有三个标识符：foo、bar、a bar 所创建的作用域，其中有一个标识符：a 作用域是由代码写在哪里决定的，并且是逐级包含的。 我们用级链来表示一下以上代码块： 从图中我们可以看到：函数foo和bar以及变量 a=2， 在1级链，而bar下又可以展开2级链，2级链上有a=3。程序bar()调用进入中间2级链，而bar中又调用了foo函数，此时程序进入foo的作用域链，按照向上查找的原则，程序会从这一条链向上查找，首先2级链没有a，向上到达1级链，刚好1级链上有a=2，所以就直接使用2，程序最后的结果就是打印2。 所以无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。 实践《JavaScript深入之词法作用域和动态作用域》思考题 123456789var scope = "global scope";function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f();}checkscope(); 参考 JavaScript深入之词法作用域和动态作用域","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"}]},{"title":"gitflow基本操作","date":"2019-03-03T15:34:28.000Z","path":"2019/03/03/gitflow基本操作/","text":"前言：在多组员，多项目等环境进行协同工作时，如果没有统一规范、统一流程，则会导致额外的工作量，甚至会做无用功。所以要减少版本冲突，减轻不必要的工作，就需要规范化的工作流程，本文就gitflow作简要的命令操作。 主分支 master 只负责管理发布的状态。在提交时使用标签记录发布版本号。develop 针对发布的日常开发分支。刚才我们已经讲解过有合并分支的功用。 开发分支Git创建Develop分支的命令：1git checkout -b develop master 将Develop分支发布到Master分支的命令：1234# 切换到Master分支git checkout master# 对Develop分支进行合并(使用了--no-ff参数，生成一个新的节点提交)git merge --no-ff develop 临时性分支 功能（feature）分支预发布（release）分支修补bug（fixbug）分支 功能分支创建一个功能分支：1git checkout -b feature-x develop 开发完成后，将功能分支合并到develop分支：12git checkout developgit merge --no-ff feature-x 删除feature分支：123git branch -d feature-x# 删除远程分支git push origin --delete feature-x 预发布分支创建一个预发布分支：1git checkout -b release-1.2 develop 确认没有问题后，合并到master分支：1234git checkout mastergit merge --no-ff release-1.2# 对合并生成的新节点，做一个标签git tag -a 1.2 再合并到develop分支：12git checkout developgit merge --no-ff release-1.2 最后，删除预发布分支：1git branch -d release-1.2 修补bug分支创建一个修补bug分支：1git checkout -b fixbug-0.1 master 修补结束后，合并到master分支：1234git checkout mastergit merge --no-ff fixbug-0.1# 对合并生成的新节点，做一个标签git tag -a 0.1.1 再合并到develop分支：12git checkout developgit merge --no-ff fixbug-0.1 最后，删除修补bug分支：1git branch -d fixbug-0.1 取消刚才的合并merge1git reset --hard HEAD~ 合并123456# rebase 合并git checkout issue3git rebase master# master 合并git checkout mastergit merge issue3 修改冲突后的提交1git rebase --continue 取消rebase1git rebase --abort 回退commit 回退 commit log commit reset push 回退 push log push reset 合并 commit12345# 从HEAD版本开始往过去数3个版本$ git rebase -i HEAD~3# 合并指定版本号（不包含此版本）$ git rebase -i [commitid] 标签添加轻标签12345git tag v2.0# 显示标签列表git tag# 显示标签列表包含标签资料的历史记录git log --decorate 添加注解标签12345git tag -a v3.0// 或git tag -am "注解" v3.0# 显示标签的列表和注解git tag -n 删除标签12git tag -d v2.0git tag -d v3.0 推送标签到远程1git push origin v1.5 查看远程分支1git branch -a Git远程仓库地址变更查看所有远程仓库1git remote 删除远程仓库地址1git remote rm origin 修改变更后的远程仓库地址1git remote add origin http://xxx.git git问题LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 601git config --global http.postBuffer 1048576000 LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443Empty reply from server1git config --global --unset http.proxy 参考 《Git分支管理策略–阮一峰》 猴子都能懂的GIT入门","tags":[{"name":"git","slug":"git","permalink":"http://yoursite.com/tags/git/"}]},{"title":"dva models一些隐藏的骚操作","date":"2019-02-27T12:34:09.000Z","path":"2019/02/27/dva models一些隐藏的骚操作/","text":"dva 是一个基于 redux 和 redux-saga 的数据流方案redux-saga API take(pattern) 使用take操作进行事件监听，用来命令 middleware 在 Store 上等待指定的 action。 在发起与 pattern 匹配的 action 之前，Generator 将暂停（eg：下一个请求的参数依赖前一个请求的结果）。 1234567891011121314*fetchList({ payload, callback }, { call, put, select, take }) { yield put({ type: 'dict/xxxx', payload: { ... }, }); yield take('dict/xxxx/@@end'); const dictData = yield select(state => state.dict.dicts); const response = yield call(getList, { xxx: dictData.xxx ... });} race(effects) 任务的竞争，用来命令 middleware 在多个 Effect 间运行 竞赛（Race）（与 Promise.race([…]) 的行为类似）。 123456789*fetchList({ payload, callback }, { race }) { const { list, timeout } = yield race({ list: call(services.fetchList), timeout: call(delay, TIMEOUT), }); if (timeout) { throw new Error('timeout'); }} 任务的并行执行 把多个要并行执行的东西放在一个数组里，就可以并行执行，等所有的都结束之后，进入下个环节，类似promise.all的操作。一般有一些集成界面，比如dashboard，其中各组件之间业务关联较小，就可以用这种方式去分别加载数据，此时，整体加载时间只取决于时间最长的那个。 之前是 yield [], 后来 dva 升级了 saga 的版本之后就推荐用 yield all([]) yield [] 1234567*fetchList({ payload, callback }, { }) { const [xx1_req, xx2_req, xx3_req] = yield [ call(xx1, payload), call(xx2, payload), call(xx3, payload), ]} yield all([]) 1234567*fetchList({ payload, callback }, { all }) { const [xx1_req, xx2_req, xx3_req] = yield all([ call(xx1, payload), call(xx2, payload), call(xx3, payload), ])}","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"React","slug":"React","permalink":"http://yoursite.com/tags/React/"}]},{"title":"折腾一个chrome插件","date":"2019-01-04T09:43:48.000Z","path":"2019/01/04/折腾一个chrome插件/","text":"前言：作为一个开发者，是否有时一个单词不认识或者业务命名而烦恼呢，以至于需要打开浏览器，然后打开google翻译，如此繁琐的打开页面可能一天重复好几遍，而我们开发者对于浏览器标签打开的又多，所以如何简化我们重新打开标签来翻译呢？所以浏览器插件就非常强大了。 chrome浏览器是一个工作、学习和生活的必备工具。除了chrome本身的基本能力（控制台等）外，能大幅提高这个神器的使用体验的是它可扩展能力（插件）以及丰富的插件生态。接下来我们就来折腾一个在线翻译的chrome插件。 好了，有了需求我们就得开发了(囧)！ 要点： manifest.json // chrome配置文件 webpack配置(打包，热编译) jsonp ajax封装 开发之前了解一下什么是Chrome插件=> 什么是Chrome插件Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。 核心介绍（manifest.json）这是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在需要浏览器打包的根目录。其中，manifest_version、name、version3个是必不可少的，description和icons是推荐的。 栗子(比较全)： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061{ // 清单文件的版本，这个必须写，而且必须是2 "manifest_version": 2, // 插件的名称 "name": "demo", // 插件的版本 "version": "1.0.0", // 插件描述 "description": "简单的Chrome扩展demo", // 图标，一般偷懒全部用一个尺寸的也没问题 "icons": { "16": "img/icon.png", "48": "img/icon.png", "128": "img/icon.png" }, // 会一直常驻的后台JS或后台页面 "background": { // 2种指定方式，如果指定JS，那么会自动生成一个背景页 "page": "background.html" //"scripts": ["js/background.js"] }, // 浏览器右上角图标设置，browser_action、page_action、app必须三选一 "browser_action": { "default_icon": "img/icon.png", // 图标悬停时的标题，可选 "default_title": "这是一个示例Chrome插件", "default_popup": "popup.html" }, // 当某些特定页面打开才显示的图标 /*"page_action": { "default_icon": "img/icon.png", "default_title": "我是pageAction", "default_popup": "popup.html" },*/ // 需要直接注入页面的JS "content_scripts": [{ //"matches": ["http://*/*", "https://*/*"], // "<all_urls>" 表示匹配所有地址 "matches": ["<all_urls>"], // 多个JS按顺序注入 "js": ["js/jquery-1.8.3.js", "js/content-script.js"], // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式 "css": ["css/custom.css"], // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle "run_at": "document_start" }, { // 这里仅仅是为了演示content-script可以配置多个规则 "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"], "js": ["js/show-image-content-size.js"] }], // 权限申请 "permissions": [ "contextMenus", // 右键菜单 "tabs", // 标签 "notifications", // 通知 "webRequest", // web请求 "webRequestBlocking", "storage", // 插件本地存储 "http://*/*", // 需要请求的地址 "https://*/*" // 需要请求的地址 ]} 介绍完后我们就来开发了(码代码中…) 开发(基于Vue)初始化项目123456789101112mkdir online-translatecd online-translatenpm init// 文件层级├── chrome // 浏览器打包的文件夹├── index.html├── package.json├── src // 源码└── webpack.config.js // wepack 安装依赖12345// 安装项目依赖npm install vue element-ui --save// 安装开发依赖npm install babel-core babel-loader babel-plugin-component babel-preset-env cross-env css-loader file-loader html-webpack-plugin style-loader vue-loader vue-template-compiler webpack webpack-dev-server --save-dev webpack配置12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485// webpack.config.jsvar path = require('path')var webpack = require('webpack')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: { popup: './src/popup.js', }, output: { path: path.resolve(__dirname, './chrome'), publicPath: '/', filename: '[name].[hash].js' }, module: { rules: [ { test: /\\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\\.css$/, loader: 'style-loader!css-loader' }, { test: /\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/, loader: 'file-loader' }, { test: /\\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, plugins: [ // new webpack.HotModuleReplacementPlugin(), // new webpack.NamedModulesPlugin(), new HtmlWebpackPlugin({ template: path.join(__dirname, './index.html'), inject: true }) ], devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map'}if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: false, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ])} 配置好了，我们就能愉快的开发了 接下来就是 Vue 的开发了！正常的项目开发… 详细源码可以看github webpack打包1npm run build 把代码打包到了chrome文件夹内，然后就可以使用chrome扩展进行打包扩展程序，会生成.crx和.pem文件，然后直接发布或者把.crx文件拖进扩展程序内进行内测。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"},{"name":"chrome","slug":"chrome","permalink":"http://yoursite.com/tags/chrome/"}]},{"title":"Node 配置文件的定制","date":"2018-11-13T13:54:17.000Z","path":"2018/11/13/Node-配置文件的定制/","text":"在任何一个项目中都缺少不了配置文件具有下面的特点: 数据量不大,信息需要长期保存,容易维护 现在是大前端的时代，Node 的重要性不言而喻。在使用 Node 作为后端或者中间层的技术架构时，往往需要用到一些可配置的变量，比如数据库，在开发时我们会连开发的数据库，生成环境我们需要连生产的数据库，这样我们就需要根据不同的环境加载不一样的配置文件，从而提高我们的开发效率，接下来我们就一起来定制我们的配置文件。 环境变量在 Node 中可以通过 process.env 来访问当前的环境变量信息。比如我们在 package.json 中通过 scripts 定义的shell脚本执行对应的命令。 12345678910// package.json{ ... "scripts": { "start": "node ./bin/www", "dev": "NODE_ENV=dev node ./bin/www", "pro": "NODE_ENV=pro node ./bin/www" }, ...} 可以看到，上面有三条条启动命令，一条是默认的 start，另外两条我们通过 NODE_ENV=xxx 来设置了对应的环境，当我们使用 npm run dev 启动项目的时候，通过 process.env.NODE_ENV 就可以取到项目的当前环境。 通过环境变量指定对应的配置文件在上面我们通过shell脚本指定了对应的环境，那我们就可以通过 process.env.NODE_ENV 来加载对应的配置文件了。 12345678910111213141516// config/index.jsmodule.exports = { dev: { ...省略 mongodb: 'mongodb://localhost:27017/demo' }, build: { ...省略 mongodb: 'mongodb://127.0.0.0:27017/demo' }}// app.jsconst config = require('./config')const mongodb = process.env.NODE_ENV === 'dev' ? config.build.mongodb : config.dev.mongodb 这样，我们就可以开开心心的放心的写代码了，但这样\b写还不是很优雅，都写到一个文件里了，不太好维护，接下来我们就真正的动态加载，不需要我们再加判断了。 config-lite config-lite： A super simple & flexible & intuitive config module, support yaml & toml. 这一次，我们针对不同的环境，将配置写入不同的配置文件中，在项目根目录下新建config目录，里面新建不同环境的配置文件：default.js、dev.js和pro.js。 12345678910111213141516171819202122232425// default.jsmodule.exports = { session: { secret: 'config-lite-demo', resave: false, saveUninitialized: true, cookie: { maxAge: 1000*60*60 } }};// dev.jsmodule.exports = { host: "https://dev.com", mongodb: 'mongodb://localhost:27017/test', ...省略};// pro.jsmodule.exports = { host: "https://pro.com", mongodb: 'mongodb://127.0.0.0:27017/test', ...省略}; 好了，配置文件写好了，如何使用呢？这里我们使用的 config-lite 插件，这个插件依旧是依据我们shell脚本指定的对应环境来选择不同的配置文件。 Install1$ npm i config-lite --save 当我们使用 npm run dev 启动项目的时候，config-lite会去抓取dev.js配置，并且会与default.js里配置去合并，如果有相同的对象，会覆盖default.js里的配置。同理 npm run pro Usage1234567891011121314151617181920212223242526272829303132// app.jsconst config = require('config-lite')(__dirname);// 1、如果\b运行 npm run devconfig = { host: "https://dev.com", mongodb: 'mongodb://localhost:27017/test', session: { secret: 'config-lite-demo', resave: false, saveUninitialized: true, cookie: { maxAge: 1000*60*60 } } ...省略}// 2、如果\b运行 npm run proconfig = { host: "https://pro.com", mongodb: 'mongodb://127.0.0.0:27017/test', session: { secret: 'config-lite-demo', resave: false, saveUninitialized: true, cookie: { maxAge: 1000*60*60 } } ...省略} \b至此，我们就得到了更好维护的动态加载配置文件。还有一个问题（大多数情况下，在windows平台下使用类似于: NODE_ENV=pro的命令行指令会卡住，windows平台与POSIX在使用命令行时有许多区别（例如在POSIX，使用$ENV_VAR,在windows，使用%ENV_VAR%。。。））。那该如何解决呢？👇 cross-env cross-env 让这一切变得简单，不同平台使用唯一指令，无需担心跨平台问题 Install1$ npm i cross-env --save Usage12345678910// package.json{ ... "scripts": { "start": "node ./bin/www", "dev": "cross-env NODE_ENV=dev node ./bin/www", "pro": "cross-env NODE_ENV=pro node ./bin/www" }, ...} 这样 NODE_ENV 便设置成功，无需担心跨平台问题。 egg 配置文件的使用在 config 目录(脚手架生成的)新增 config.dev.js 和 config.pro.js，然后在文件内写我们对应环境的配置。 配置环境 1234567891011// package.json{ ... "script": { ... "dev": "EGG_SERVER_ENV=dev egg-bin dev", "pro": "EGG_SERVER_ENV=pro egg-scripts start", ... } ...} 在 egg 中通过 EGG_SERVER_ENV \b来声明对应的环境变量。 使用 1const config = this.app.config // 得到对应环境的配置文件(也会和 default 进行合并) 完结，好久没写了，有点生疏了，苦笑！！！","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"node","slug":"node","permalink":"http://yoursite.com/tags/node/"}]},{"title":"前端路由的实现原理","date":"2017-09-16T13:09:32.000Z","path":"2017/09/16/前端路由的实现原理/","text":"路由 在现代前端开发中，路由是非常重要的一环。但路由到底是什么呢？有些说：路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。这是从路由的用途上来解释路由是什么的，还有一种说法是：路由就是URL到函数的映射。这是从路由的实现原理上来解释路由是什么的。这两种说法都很有道理。 早期的路由都是后端实现的，直接根据 url 来 reload 页面，页面变得越来越复杂服务器端压力变大，随着 ajax 的出现，页面实现非 reload 就能刷新数据，也给前端路由的出现奠定了基础。我们可以通过记录 url 来记录 ajax 的变化，从而实现前端路由。 前端路由说白了就是监听浏览器路由地址的变化，渲染不同的页面或组件。下面主要讲两种主流方式实现前端路由： History这里不细说每一个 API 的用法，大家可以看 MDN 的文档：https://developer.mozilla.org... 14年后，因为HTML5标准发布，新增了两个 API，history.pushState 和 history.replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。 这两个 API 都接收三个参数，分别是 状态对象（state object） — 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。 标题（title） — FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。 地址（URL） — 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。相同之处是两个 API 都会操作浏览器的历史记录，而不会引起页面的刷新。 不同之处在于，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。 我们拿大百度的控制台举例子（具体说是我的浏览器在百度首页打开控制台。。。） 我们在控制台输入 1window.history.pushState(null, null, "https://www.baidu.com/?name=hzzly"); 好，我们观察此时的 url 变成了这样https://www.baidu.com/?name=hzzly 我们这里不一一测试，直接给出其它用法，大家自行尝试 1234567891011121314window.history.pushState(null, null, "https://www.baidu.com/name/hzzly");//url: https://www.baidu.com/name/hzzly window.history.pushState(null, null, "?name=hzzly");//url: https://www.baidu.com?name=hzzly window.history.pushState(null, null, "name=hzzly");//url: https://www.baidu.com/name=hzzly window.history.pushState(null, null, "/name/hzzly");//url: https://www.baidu.com/name/hzzly window.history.pushState(null, null, "name/hzzly");//url: https://www.baidu.com/name/hzzly 每次改变 url 页面并没有刷新，同样根据上文所述，浏览器会产生历史记录。 我们需要一个根据监听history变化触发的事件 —— popstate 事件 12345function matchAndUpdate () { // 匹配路径 做 dom 更新操作}window.addEventListener('popstate', matchAndUpdate) hash我们经常在 url 中看到 #，这个 # 有两种情况，一个是我们所谓的锚点，比如典型的各个标题之间的跳转等，路由里的 # 不叫锚点，我们称之为 hash。 同样我们需要一个根据监听哈希变化触发的事件 —— hashchange 事件 12345function matchAndUpdate () { // 匹配 hash 做 dom 更新操作}window.addEventListener('hashchange', matchAndUpdate) 我们用 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。 前端路由优缺点优点：1.从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。2.在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户就不能复制到想要的地址，用前端路由做单页面网页就很好的解决了这个问题 缺点：使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"}]},{"title":"在Vue.js中使用Mixins","date":"2017-09-12T03:15:14.000Z","path":"2017/09/12/在Vue-js中使用Mixins/","text":"一个很常见的场景: 有两个非常相似的组件, 它们拥有非常相似的基本功能, 但是它们之间又有足够的不同的地方, 该如何选择呢? 我们是应该将它们分成两个完全不同的组件呢? 还是创建一个基础组件, 然后定义足够多的props以方便区分使用场景? 这两种方式都不是完美的: 如果你将它们分成两个完全不同的组件, 在需求变化(功能变化)时, 可能会增加需要同时修改两个组件的风险, 这违反了”DRY”的前提. 另一方面, 太多的props很快会让人变得凌乱, 并且, 迫使维护人员, 甚至是你自己, 要首先理解这些props的上下文才能使用它, 这会让人非常失望. Vue的Mixins是非常实用的编程方式, 因为最终实用的编程是通过不断减少运动部件(moving parts)使代码变得容易理解. (关于这一点, Michael Feathers有一个很好的引用). 一个mixin允许你封装一个功能, 以便你能在整个应用程序中的不同组件中使用它. 如果mixin被正确的创建, 它们是纯粹的–它们不会修改或更改函数的作用范围(scope)之外的内容, 因此, 您可以在多个地方执行它们, 并且只要输入值相同, 总是能非常可靠得得到相同的结果. 这真的非常强大. 认识Mixins混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。 栗子 假设我们有一些不同的组件, 它们的工作是切换状态boolean, 一个模态(modal)和一个提示(tooltip). 这些tooltips和modals没有很多共同之处, 除了这个功能: 它们看起来不一样, 它们使用起来也不尽相同, 但是它们的逻辑是相似的 . 1234567891011121314151617181920212223242526272829//modalconst Modal = { template: '#modal', data() { return { isShowing: false } }, methods: { toggleShow() { this.isShowing = !this.isShowing; } }} //tooltipconst Tooltip = { template: '#tooltip', data() { return { isShowing: false } }, methods: { toggleShow() { this.isShowing = !this.isShowing; } }} 我们可以从中提取逻辑, 并创建可以复用的部分： 12345678910111213141516171819202122const toggle = { data() { return { isShowing: false } }, methods: { toggleShow() { this.isShowing = !this.isShowing; } }} const Modal = { template: '#modal', mixins: [toggle]}; const Tooltip = { template: '#tooltip', mixins: [toggle]}; duang — 一个小而简单的🌰让我们知道了Mixins对于封装一些可复用的功能如此有趣、方便、实用。 项目实践 MagicMusic star(200+)","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"}]},{"title":"Vue插件的开发(一)","date":"2017-08-25T05:59:55.000Z","path":"2017/08/25/Vue插件的开发-一/","text":"前言：随着 Vue.js 越来越火，Vue.js 的相关插件也在不断的被贡献出来，数不胜数。比如官方推荐的 vue-router、vuex 等，都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段，比较少自己开发。所以接下来通过一个简单的 vue-toast 插件，来了解掌握插件的开发和使用。 认识插件想要开发插件，先要认识一个插件是什么样子的。官方文档:插件 Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象: 1234567891011121314151617181920MyPlugin.install = function (Vue, options) { Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性，如: vue-custom-element // 逻辑... } Vue.directive('my-directive', { // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) Vue.mixin({ created: function () { // 3. 通过全局 mixin方法添加一些组件选项，如: vuex // 逻辑... } ... }) Vue.prototype.$myMethod = function (options) { // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现 // 逻辑... }} 接下来要讲到的 vue-toast 插件则是通过添加实例方法实现的。我们先来看个小例子。先新建个js文件来编写插件：toast.js 123456// toast.jsvar Toast = {};Toast.install = function (Vue, options) { Vue.prototype.$msg = 'Hello World';}module.exports = Toast; 在 main.js 中，需要导入 toast.js 并且通过全局方法 Vue.use() 来使用插件： 1234// main.jsimport Vue from 'vue';import Toast from './toast.js';Vue.use(Toast); 然后，我们在组件中来获取该插件定义的 $msg 属性。 123456// App.vueexport default { mounted(){ console.log(this.$msg); // Hello World }} 可以看到，控制台成功的打印出了 Hello World 。既然 $msg 能获取到，那么我们就可以来实现我们的 vue-toast 插件了。 开发 vue-toast 插件需求：在组件中通过调用 **this.$toast(‘网络请求失败’) **来弹出提示，默认在底部显示。可以通过调用 this.$toast.top() 或 this.$toast.center() 等方法来实现在不同位置显示。 整理一下思路，弹出提示的时候，我可以在 body 中添加一个 div 用来显示提示信息，不同的位置我通过添加不同的类名来定位，那就可以开始写了。 123456789101112131415// toast.jsvar Toast = {};Toast.install = function (Vue, options) { Vue.prototype.$toast = (tips) => { let toastTpl = Vue.extend({ // 1、创建构造器，定义好提示信息的模板 template: '<div class="vue-toast">' + tips + '</div>' }); let tpl = new toastTpl().$mount().$el; // 2、创建实例，挂载到文档以后的地方 document.body.appendChild(tpl); // 3、把创建的实例添加到body中 setTimeout(function () { // 4、延迟2.5秒后移除该提示 document.body.removeChild(tpl); }, 2500) }}module.exports = Toast; 好像很简单，我们就实现了 this.$toast() ，接下来显示不同位置 123456// toast.js['bottom', 'center', 'top'].forEach(type => { Vue.prototype.$toast[type] = (tips) => { return Vue.prototype.$toast(tips,type) }}) 这里把 type 传给 $toast 在该方法里进行不同位置的处理，上面说了通过添加不同的类名(toast-bottom、toast-top、toast-center)来实现，那 $toast 方法需要小小修改一下 123456Vue.prototype.$toast = (tips,type) => { // 添加 type 参数 let toastTpl = Vue.extend({ // 模板添加位置类 template: '<div class="vue-toast toast-'+ type +'">' + tips + '</div>' }); ...} 好像差不多了。但是如果我想默认在顶部显示，我每次都要调用 this.$toast.top() 好像就有点多余了，我能不能 this.$toast() 就直接在我想要的地方呢？还有我不想要 2.5s 后才消失呢？这时候注意到 Toast.install(Vue,options) 里的 options 参数，我们可以在 Vue.use() 通过 options 传进我们想要的参数。最后修改插件如下： 123456789101112131415161718192021222324252627282930313233var Toast = {};Toast.install = function (Vue, options) { let opt = { defaultType:'bottom', // 默认显示位置 duration:'2500' // 持续时间 } for(let property in options){ opt[property] = options[property]; // 使用 options 的配置 } Vue.prototype.$toast = (tips,type) => { if(type){ opt.defaultType = type; // 如果有传type，位置则设为该type } if(document.getElementsByClassName('vue-toast').length){ // 如果toast还在，则不再执行 return; } let toastTpl = Vue.extend({ template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>' }); let tpl = new toastTpl().$mount().$el; document.body.appendChild(tpl); setTimeout(function () { document.body.removeChild(tpl); }, opt.duration) } ['bottom', 'center', 'top'].forEach(type => { Vue.prototype.$toast[type] = (tips) => { return Vue.prototype.$toast(tips,type) } })}module.exports = Toast; 这样子一个简单的 vue 插件就实现了，并且可以通过 npm 打包发布，下次就可以使用 npm install 来安装了。 好久没更新博客，逃。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"}]},{"title":"vue与echarts的可视化","date":"2017-07-09T13:51:32.000Z","path":"2017/07/09/vue与echarts的可视化/","text":"好久没有更新博客了，但我并没有偷懒哦。因为进入了公司实习，需要熟悉项目需求以及技术栈，公司技术栈用的react与dva，所以需要现学现卖。趁着周末写写vue，美滋滋，哈哈哈。 一、配方 vue echarts 二、参考案例 gallery 社区demo 三、实践3.1安装 echarts1npm install echarts --save 3.2vue dom 结构1<div id="charts" style="height:300px;width:300px"></div> 3.3在vue中引入echarts因为ECharts初始化必须绑定dom，所以我们只能在vue的mounted生命周期里初始化。 3.3.1全部引入可以直接在项目代码中 require(‘echarts’) 或 import 得到 ECharts，我这里通过es6的import来引入 123456789101112131415161718192021222324252627import echarts from 'echarts' mounted () { this.initChart()},methods: { initChart () { this.chart = echarts.init(document.getElementById('charts')) let option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } this.chart.setOption(option) }} 3.3.2按需引入默认使用 require(‘echarts’) 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。 例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。 123456789// 引入 ECharts 主模块import echarts from 'echarts/lib/echarts'// 引入柱状图import 'echarts/lib/chart/bar'// 引入提示框和标题组件import 'echarts/lib/component/tooltip'import 'echarts/lib/component/title' // 后面的跟上面的就一样了 3.3.3动态改变ECharts的配置(option)12345678910111213141516//第一种 watch options变化 利用vue的深度 watcher，options一有变化就重新setOptionwatch: { options: { handler(options) { this.chart.setOption(this.options) }, deep: true },}//第二种 只watch 数据的变化 只有数据变化时触发EChartswatch: { seriesData(val) { this.setOptions({series:val}) }} 3.4结果到这我们在页面上就可以显示图表了，实现可视化数据，是不是很酷炫。 四、参考在 webpack 中使用 ECharts","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"},{"name":"echarts","slug":"echarts","permalink":"http://yoursite.com/tags/echarts/"}]},{"title":"基于vue-cli配置proxyTable开发环境的跨域","date":"2017-06-21T02:30:54.000Z","path":"2017/06/21/基于vue-cli配置proxyTable开发环境的跨域/","text":"前言：目前前端项目普遍采用前后端分离的思想来开发，这样在和后端进行数据联调时势必会面临恼人的跨域问题，最近几个基于Vue开发项目时也遇到了这个问题，网上关于跨域的解决方案很多，这里就简单的介绍基于vue-cli配置proxyTable的开发环境来解决跨域。 还不懂前后端分离的可以移步👉：前后端分离的尝试 配置 proxyTable在 config/index.js 中，把 dev 下的 proxytable 里面配置如下： 123456789proxyTable: { '/api': { target: 'http://api.hjingren.cn', changeOrigin: true, pathRewrite: { '^/api': '' } }} 使用（请求）1fetch('/api/playlist/detail?id=12345') 最后：vue-cli的这个配置来自于其使用的插件http-proxy-middleware，想进一步了解的可以深入研究。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"}]},{"title":"基于vue-cli配置移动端自适应","date":"2017-06-16T10:44:03.000Z","path":"2017/06/16/基于vue-cli配置移动端自适应/","text":"之前写过一篇关于移动端屏幕适配：移动端屏幕适配的解决，今天来聊一聊基于vue-cli配置的移动端屏幕适配问题。 配方还是一样：手淘的 lib-flexible + rem 配置 flexible安装 lib-flexible在命令行中运行如下安装： 1npm i lib-flexible --save 引入 lib-flexible在项目入口文件 main.js 里 引入 lib-flexible 12// main.jsimport 'lib-flexible' 添加 meta 标签在项目根目录的 index.html 中添加如下 meta 1<meta name="viewport" content="width=device-width, initial-scale=1.0"> px 转 rem实际开发中，我们通过设计稿得到的值单位是 px，所以要将 px 转换成 rem 再写进样式中。将 px 转换成 rem 我们将使用 px2rem 这个工具，它有 webpack 的 loader：px2rem-loader 安装 px2rem-loader在命令行中运行如下安装： 1npm i px2rem-loade --save-dev 配置 px2rem-loade在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。 我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 750px。 12345678910111213141516// utils.jsvar cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap }}var px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 }}// ... 并放进 loaders 数组中 1234// utils.jsfunction generateLoaders(loader, loaderOptions) { var loaders = [cssLoader, px2remLoader] // ... 修改配置后需要重启，然后我们在组件中写单位直接写 px，设计稿量多少就可以写多少了，舒服多了。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"}]},{"title":"Nginx与Node的纠缠","date":"2017-06-11T12:10:54.000Z","path":"2017/06/11/Nginx与Node的纠缠/","text":"前言：前几天面试被问到：“nginx的好处？nginx和node的比较”，所以在这里总结一波。 nginx的好处 热部署 高并发连接 处理响应请求很快 具有很高的可靠性 热部署在不停止服务的情况下修改配置文件，更换日志文件等功能。 高并发连接高并发：是指在同一个时间点，有很多用户同时的访问URL地址，比如：淘宝的双11，双12，就会产生高并发。 这是一个很重要的一个特性！在这一个 互联网 快速发展， 互联网 用户数量不断增加，一些大公司、网站都需要面对高并发请求，如果有一个能够在峰值顶住10万以上并发请求的Server，肯定会得到大家的青睐。理论上，Nginx支持的并发连接上限取决于你的内存，10万远未封顶。 Nginx能做什么 反向代理 负载均衡 HTTP服务器（包含动静分离） 正向代理 反向代理反向代理应该是Nginx做的最多的一件事了，什么是反向代理呢，以下是百度百科的说法：反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。简单来说就是真实的服务器不能直接被外部网络访问，所以需要一台代理服务器，而代理服务器能被外部网络访问的同时又跟真实服务器在同一个网络环境，当然也可能是同一台服务器，端口不同而已。 下面贴上一段简单的实现反向代理的代码： 123456789server { listen 80; server_name localhost; location / { proxy_pass http://localhost:8081; proxy_set_header Host $host:$server_port; }} 当我们访问localhost的时候，就相当于访问localhost:8081了 负载均衡负载均衡可以把用户的请求分摊到多个服务器上进行处理，从而实现了对海量用户的访问支持。负载均衡的架构如图所示： 简单而言就是当有2台或以上服务器时，根据规则随机的将请求分发到指定的服务器上处理，负载均衡配置一般都需要同时配置反向代理，通过反向代理跳转到负载均衡。 1234567891011121314upstream test { server localhost:8080; server localhost:8081;}server { listen 81; server_name localhost; location / { proxy_pass http://test; proxy_set_header Host $host:$server_port; }} HTTP服务器Nginx本身也是一个静态资源的服务器，当只有静态资源的时候，就可以使用Nginx来做服务器，同时现在也很流行动静分离，就可以通过Nginx来实现。 123456789101112131415161718server { listen 80; server_name localhost; location / { root /home/hzzly; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; }} 正向代理正向代理，意思是一个位于客户端和原始服务器(origin server)之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端才能使用正向代理。当你需要把你的服务器作为代理服务器的时候，可以用Nginx来实现正向代理。 node的特点 它是一个javascript运行环境 依赖于Chrome V8引擎进行代码解释 事件驱动 非阻塞I/O 轻量、可伸缩，适于实时数据交互应用 并发连接（高并发） node应用场景NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景。（RESTful API，聊天） Event Loop、消息队列、事件轮询通过回调函数（Callback）和异步机制来实现非阻塞。通过事件队列和事件循环来实现并发连接。 异步函数在执行结束后，会在事件队列中添加一个事件（回调函数）(遵循先进先出原则)，主线程中的代码执行完毕后（即一次循环结束），下一次循环开始就在事件队列中“读取”事件，然后调用它所对应的回调函数。这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环） nginx和node的比较 一个更专业，一个更全面。 Nginx 采用C编写，性能更高，但是它仅适合于做web服务器，用于反向代理或者负载均衡等服务。 NodeJs高性能平台，web服务只是其中一块，NodeJs在处理业务层用的是JS编写,采用的是异步编程方式和思维方式。 Node.js发展方向不再单独是一个Web服务器，而是一个面向网络的平台，它甚至可以是TCP服务器，或者变身为远端服务器的客户端。 nginx与node的完美搭配node自己本身可以作为服务器进行驱动，但是node本身对文件的处理能力并不是很好，所以当我们的生产环境中应尽量使用nginx来处理静态的资源以及反向代理，同时也解决了node分布式以及负载均衡的相关问题。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"nginx","slug":"nginx","permalink":"http://yoursite.com/tags/nginx/"},{"name":"node","slug":"node","permalink":"http://yoursite.com/tags/node/"}]},{"title":"js实现图片懒加载","date":"2017-06-09T14:23:39.000Z","path":"2017/06/09/js实现图片懒加载/","text":"前言：最近面试都被问到了这个问题，所以在这里整理一波。 懒加载的意义 懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数，对服务器缓压。 **预加载:**提前加载好，缓存到本地，当需要的时候直接读取缓存，对服务器增压 懒加载实现方式 第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟 第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载 第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片 Web 图片的懒加载就是通过读取img元素，然后获得img元素的data-src（也可以约定为其他属性名）属性的值，并赋予img的src，从而实现动态加载图片的机制 1、懒加载HTML约定我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-src属性。具体示例为： 1<img class="m-lazyload" data-src="imgUrl"> 2、懒加载JavaScript实现动态加载总共分为以下几个步骤:1、添加页面滚动监听事件 1234567891011121314151617imgBoxList.addEventListener('scroll', debounce(() => { _loadImage();}, 200)); // 简单的防抖函数function debounce(func, delay) { let timer return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { func.apply(this, args) }, delay) }} 2、当触发监听事件时会执行 _loadImage 函数，该函数负责加载图片 12345678910function _loadImage() { const domOffsetHeight = imgBoxList.offsetHeight; const imgs = imgBoxList.querySelectorAll('img[data-src]'); for (let i = 0; i < imgs.length; i++) { const el = imgs[i]; if (_isShow(el, domOffsetHeight)) { el.src = el.getAttribute('data-src') } }} 3、判断该图片是否在当前窗口的可视区域内 1234function _isShow(el, domHeight) { const rect = el.getBoundingClientRect(); return rect.top <= domHeight + 200;} 到这一个简单的图片懒加载就写成了 当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在，则动态将data-src的值赋予该图片。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"DIY一个自己的音乐播放器2.0来袭","date":"2017-06-05T13:32:59.000Z","path":"2017/06/05/DIY一个自己的音乐播放器2-0来袭/","text":"前言：之前做的第一版播放器功能做出来了，但发现结构不是很优雅以及后端api很不稳定，所以进行了一次小升级。此次升级 功能更全，体验更好，api更稳定，技术栈更多，收获也更多👍。 [温馨提示：pc浏览f12手机模式最佳,手机建议wifi下访问,低版本浏览器可能有兼容性问题] 预览地址： http://hzzly.net/magic-musicGithub地址： https://github.com/hzzly/MagicMusic欢迎大家的star和fork😄~ 实现的功能 首页 轮播 个性推荐[流行、古典、轻音乐、流行] 歌曲操作（动画） 底部播放控件 播放、暂停、下一曲 实时播放进度条 播放页 上一曲、播放、暂停、下一曲 播放进度条（弧形进度条） 歌词滚动、歌词高亮 播放列表 播放歌曲高亮 切歌(单击切歌) 删歌(点击右侧小X) 清空播放列表 本地缓存播放列表 排行榜 排行榜列表 排行榜里的歌曲(单击播放)、全部播放 音乐搜索 搜索单曲、歌手 搜索历史记录 侧边栏 未实现的功能 喜欢、分享、下载、切换播放模式 预览 更多预览👉更多 技术栈1、Vue全家桶(vue2、vue-router、vuex) 快速开发SPA神器2、Axios vue作者推荐的数据请求方案3、ES6 全面过度es6的写法 趋势4、Webpack2 脚手架已经配置好了，超贴心5、Promise 把请求封装在promise中，方便的可以使用.then回调6、flex布局 对于移动端可以放心大胆的使用7、移动端屏幕适配 采用手淘的flexible+rem方案8、本地存储(sessionStorage、localStorage) 避免重复资源请求，快速读取9、图片懒加载 vue-lazyload 提升用户体验 本次更新日志 后端api采用pm2来部署，防止断开后数据无法请求的尴尬。 把监听audio加载完数据事件统一管理起来，避免重复监听，优化代码结构。 更新axios请求，让请求更加优美。 修改播放页面，优化用户体验。 添加加载音乐loading等待，提升用户体验。 添加播放全部，避免一个一个添加。 本地缓存播放列表与清空。 修改首页tab切换动效 DIY一个自己的音乐播放器1.0 后记MagicMusic还在不断努力的改进，觉得还行的可以点个star，你的star是我继续开源创作的动力，谢谢！！！当然有建议可以在issues里提。项目地址： https://github.com/hzzly/MagicMusic欢迎大家的star啦~ 求实习本人大三，求一个前端实习：简历","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"},{"name":"vuex","slug":"vuex","permalink":"http://yoursite.com/tags/vuex/"}]},{"title":"CentOS 7 Nginx的折腾","date":"2017-06-05T05:52:23.000Z","path":"2017/06/05/CentOS-7-Nginx的折腾/","text":"CentOS 7 下安装 Nginx查看centos版本1$ cat /etc/redhat-release 一. gcc 安装 安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境，如果没有 gcc 环境，则需要安装： 1$ yum install gcc-c++ 二. pcre pcre-devel 安装 PCRE(Perl Compatible Regular Expressions) 是一个Perl库，包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要在 linux 上安装 pcre 库，pcre-devel 是使用 pcre 开发的一个二次开发库。nginx也需要此库。命令： 1$ yum install -y pcre pcre-devel 三. zlib 安装 zlib 库提供了很多种压缩和解压缩的方式， nginx 使用 zlib 对 http 包的内容进行 gzip ，所以需要在 Centos 上安装 zlib 库。 1$ yum install -y zlib zlib-devel 四. OpenSSL 安装 OpenSSL 是一个强大的安全套接字层密码库，囊括主要的密码算法、常用的密钥和证书封装管理功能及 SSL 协议，并提供丰富的应用程序供测试或其它目的使用。nginx 不仅支持 http 协议，还支持 https（即在ssl协议上传输http），所以需要在 Centos 安装 OpenSSL 库。 1$ yum install -y openssl openssl-devel 五、官网下载 打开http://nginx.org/en/download.html 找到Stable version下的 nginx-1.12.0 右键 复制链接 使用wget命令下载 12$ cd /usr/local/$ wget -c http://nginx.org/download/nginx-1.12.0.tar.gz 解压12$ tar -zxvf nginx-1.12.0.tar.gz$ cd nginx-1.12.0 配置 使用默认配置 1$ ./configure 编译安装12$ make$ make install 查找安装路径： 1$ whereis nginx 启动、停止nginx12345$ cd /usr/local/nginx/sbin/$ ./nginx $ ./nginx -s stop //此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程。$ ./nginx -s quit //此方式停止步骤是待nginx进程处理任务完毕进行停止。$ ./nginx -s reload //重启，当 ngin x的配置文件 nginx.conf 修改后，要想让配置生效需要重启 nginx，使用-s reload不用先停止 ngin x再启动 nginx 即可将配置信息在 nginx 中生效 检验是否安装成功打开浏览器访问此机器的 IP，如果浏览器出现 Welcome to nginx! 则表示 Nginx 已经安装并运行成功。 开机自启动即在rc.local增加启动代码就可以了。 1$ vi /etc/rc.local 增加一行 /usr/local/nginx/sbin/nginx 设置执行权限： 1$ chmod 755 /etc/rc.local","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"nginx","slug":"nginx","permalink":"http://yoursite.com/tags/nginx/"}]},{"title":"Fetch学习笔记","date":"2017-05-20T15:52:22.000Z","path":"2017/05/20/Fetch学习笔记/","text":"前言: 前几天面试问到 Ajax和Fetch的区别，因为以前也用过这两个东西，所以也没难倒我，现在回头整理一遍。 fetch 与XMLHttpRequest(XHR)类似，fetch()方法允许你发出AJAX请求。区别在于Fetch API使用Promise，因此是一种简洁明了的API，比XMLHttpRequest更加简单易用。 如果还不了解Promise，可以移步👉浅谈Promise这篇博客 比较XMLHttpRequest（传统Ajax）创建步骤： 创建XMLHttpRequest对象，也就是创建一个异步调用对象 创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息 发送HTTP请求 处理响应，获取异步调用返回的数据 可以发现，主要的不同点在于：传统Ajax使用事件处理器，而不是Promise对象，并且请求的发起完全依赖于xhr对象所提供的方法。 想详细了解 Ajax的封装可以查看我上一篇博客，一步步教你 Ajax的封装👉Ajax学习笔记 fetch语法12345678910fetch(url) .then(function(response) { return response.json(); }) .then(function(data) { console.log(data); }) .catch(function(e) { console.log("Oops, error"); }); 使用 ES6 的 箭头函数 1234fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(e => console.log("Oops, error", e)) 使用 async/await 来做最终优化： 123456789(async function () { try { let response = await fetch(url); let data = response.json(); console.log(data); } catch(e) { console.log("Oops, error", e); }})(); 使用 await 后，写异步代码就像写同步代码一样爽。await 后面可以跟 Promise 对象，表示等待 Promise resolve() 才会继续向下执行，如果 Promise 被 reject() 或抛出异常则会被外面的 try…catch 捕获。 如果还不了解async/await，可以移步👉es6Async这篇博客 GET请求123456789fetch(url, { method: "GET", //默认 headers:{ "Accept": "application/json, text/plain, */*" }}).then(response => response.json()).then(data => console.log(data)).catch(e => console.log("Oops, error", e)) POST请求1234567891011fetch(url, { method: "POST", headers: { "Accept": "application/json, text/plain, */*", "Content-type":"application:/x-www-form-urlencoded; charset=UTF-8" }, body: "name=hzzly&age=22"}).then(response => response.json()).then(data => console.log(data)).catch(e => console.log("Oops, error", e)) 使用Fetch请求发送凭证 要使用Fetch发送带有诸如cookie之类的凭证的请求。你可以在选项对象中将credentials属性值设置为“include”： 123fetch(url,{ credentials: "include"}) 封装POST请求123456789101112131415161718192021222324252627282930313233//将对象拼接成 name=hzzly&age=22 的字符串形式function params(obj) { let result = '' for(let item in obj) { result += `&${item}=${obj[item]}` } if(result) { result = result.slice(1) } return result}function post(url, paramsObj) { let result = fetch(url, { methods: 'POST', credentials: "include" headers: { "Accept": "application/json, text/plain, */*", "Content-type":"application:/x-www-form-urlencoded; charset=UTF-8" }, body: params(paramsObj) }) return result}let obj = { name: 'hzzly', age: 22}post(url, obj) .then(response => response.json()) .then(data => console.log(data)) .catch(e => console.log("Oops, error", e))","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"Fetch","slug":"Fetch","permalink":"http://yoursite.com/tags/Fetch/"}]},{"title":"Ajax学习笔记","date":"2017-05-17T14:53:25.000Z","path":"2017/05/17/Ajax学习笔记/","text":"在上一个外包项目中，因为用到了前后端分离的思路，所以都要通过Ajax来请求数据然后把数据渲染到页面上，一开始想过直接引用Jquery，但感觉就使用Jquery的Ajax函数，有点太浪费，所以就自己撸了一个Ajax函数。本文由浅入深，一步一步带你封装属于自己的Ajax库。 Ajax简介 Asynchronous Javascript And XML （异步的JavaScript和XML） 它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体 Ajax是一种用于创建快速动态网页的技术。在前台与后台进行数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，实现局部更新。 1、优点 页面无刷新，用户体验好。 异步通信，更加快的响应能力。 减少冗余请求，减轻了服务器负担。 基于标准化的并被广泛支持的技术 2、应用场景 场景 1. 数据验证 场景 2. 按需取数据 场景 3. 自动更新页面 … 说了这么多，接下来来点干货。 创建ajax的步骤 Ajax的原理简单来说通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。原生创建ajax可分为以下四步 1、创建XMLHttpRequest对象123456789function createRequest (){ if (window.XMLHttpRequest) { //IE6以上 xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } return xhr;} 2、准备请求1xhr.open(method,url,async); 第一个参数表示请求类型的字符串，其值可以是GET或者POST GET请求： 1xhr.open("GET",demo.php?name=hzzly&age=21,true); POST请求： 1xhr.open("POST",demo.php,true); 第二个参数是要作为请求发送目标的URL。 第三个参数是true或false，表示请求是以异步还是同步的模式发出。（默认为true，一般不建议为false） 3、发送请求1xhr.send(); GET请求： 12xhr.open("GET",demo.php?name=hzzly&age=21,true);xhr.send(); POST请求 123xhr.open("POST",demo.php,true);xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");xhr.send(param) 4、处理响应12345xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ console.log(xhr.responseText); }} onreadystatechange：当处理过程发生变化的时候执行下面的函数 readyState：ajax处理过程 0：请求未初始化（还没有调用 open()） 1：请求已经建立，但是还没有发送（还没有调用 send()） 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头） 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成 4：响应已完成；您可以获取并使用服务器的响应了 status属性: 200: “OK” 404: 未找到页面 responseText：获得字符串形式的响应数据，可以用JSON.parse(xhr.responseText)转化为JSON对象 封装例子 1.get请求函数 12345678910111213141516171819202122232425262728293031323334353637383940/** * 一个简单的get请求 * @param {String} url 请求地址,文件名 * @param {Function} fnSucc 请求成功时执行的函数 * @param {Function} fnFaild 请求失败执行的函数 */function Get(url, fnSucc, fnFaild) { //1.创建ajax对象 var xhr = null; /** * 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined. * 进入else若直接使用XMLHttpRequest在不支持的情况下会报错 **/ if (window.XMLHttpRequest) { //IE6以上 xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //2.连接服务器 //open(方法,url,是否异步) xhr.open("GET", url, true); //3.发送请求 xhr.send(); //4.接收返回 //OnRedayStateChange事件 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { //alert("成功" + xhr.responseText); fnSucc(xhr.responseText); } else { //alert("服务器响应失败!"); if (fnFaild) { fnFaild(); } } } };} 2.get与post结合的请求函数 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364/** * AJAX函数封装 * @param {string} url 请求地址（必须） * @param {object} options 发送请求的选项参数 * @config {string} [options.type] 请求发送的类型。默认为GET。 * @config {Object} [options.data] 需要发送的数据。 * @config {Function} [options.onsuccess] 请求成功时触发。（必须） * @config {Function} [options.onfail] 请求失败时触发。 */function AJAX(url, options) { //1.创建ajax对象 var xhr = null; /** * 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined,进入else * 若直接使用XMLHttpRequest,在不支持的情况下会报错 **/ if (window.XMLHttpRequest) { //IE6以上 xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //2.连接服务器 //open(方法,url,是否异步) var param = ""; //请求参数。 //只有data存在，且为对象使才执行 var data = options.data ? options.data : -1; //缓存data if (typeof (data) === "object") { for (var key in data) { //请求参数拼接 if (data.hasOwnProperty(key)) { param += `${key}=${data[key]}&`; } } param.replace(/&$/, ""); } else { param = "timestamp=" + new Date().getTime(); } //3.发送请求 var type = options.type ? options.type.toUpperCase() : "GET"; if (type === "GET") { xhr.open("GET", `${url}?${param}`, true); xhr.send(); } else { xhr.open("POST", url, true); xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"); xhr.send(param); } //4.接收返回 //OnRedayStateChange事件 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { //请求成功。形参为获取到的字符串形式的响应数据 options.onsuccess(xhr.responseText); } else { //先判断是否存在请求失败函数 //存在时，形参为XMLHttpRequest对象，便于进行错误进行处理 if (options.onfail) { options.onfail(xhr); } } } };}","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"读书笔记-es6编程风格","date":"2017-05-15T12:48:47.000Z","path":"2017/05/15/读书笔记-es6编程风格/","text":"编程风格块级作用域 let 取代 var ES6提出了两个新的声明变量的命令：let和const。其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。 全局常量和线程安全 在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。 123456789// badvar a = 1, b = 2, c = 3;// goodconst a = 1;const b = 2;const c = 3;// bestconst [a, b, c] = [1, 2, 3]; 了解更多👉：let与const 字符串 静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。 123456789// badconst a = "foobar";const b = 'foo' + a + 'bar';// acceptableconst c = `foobar`;// goodconst a = 'foobar';const b = `foo${a}bar`;const c = 'foobar'; 了解更多👉：字符串的扩展 解构赋值 使用数组成员对变量赋值时，优先使用解构赋值。 函数的参数如果是对象的成员，优先使用解构赋值。 如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。 123const [first, second] = arr;function getFullName({ firstName, lastName }) { }const { left, right } = processInput(input); 了解更多👉：解构赋值 对象 单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。 12345const a = { k1: v1, k2: v2 };const b = { k1: v1, k2: v2,}; 对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写 12345678var ref = 'some value';const atom = { ref, value: 1, addValue(value) { return atom.value + value; },}; 了解更多👉：对象的扩展 数组 使用扩展运算符（…）拷贝数组。 1const itemsCopy = [...items]; 使用Array.from方法，将类似数组的对象转为数组。 1234const foo = document.querySelectorAll('.foo');const nodes = Array.from(foo);//或者扩展运算符(...)const nodes = [...foo]; 了解更多👉：数组的扩展 函数 那些需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了this。 使用rest运算符（…）代替参数 使用默认值语法设置函数参数的默认值。 1234567[1, 2, 3].map(x => x * x);function concatenateAll(...args) { return args.join('');}function handleThings(opts = {}) { // ...} 了解更多👉：函数的扩展 Class 总是用Class，取代需要prototype的操作。因为Class的写法更简洁，更易于理解。 使用extends实现继承，因为这样更简单，不会有破坏instanceof运算的危险。 1234567891011121314151617class A { constructor(contents = []) { ... } getA() { ... }}class B extends A { constructor() { super() ... } getB() { ... }} 了解更多👉：Class 模块 使用import取代require。 使用export取代module.exports。 1234import { func1, func2 } from 'moduleA';export default function () { console.log('foo');} 了解更多👉：Module","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"读书笔记-es6Module","date":"2017-05-14T11:13:48.000Z","path":"2017/05/14/读书笔记-es6Module/","text":"Module概述 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。 1234567// CommonJS模块let { stat, exists, readFile } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile; 上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取3个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。 ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。 12// ES6模块import { stat, exists, readFile } from 'fs'; 上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。 严格模式 ES6 的模块自动采用严格模式，不管你有没有在模块头部加上”use strict”;。 严格模式主要有以下限制: 变量必须声明后再使用 函数的参数不能有同名属性，否则报错 不能使用with语句 不能对只读属性赋值，否则报错 不能使用前缀0表示八进制数，否则报错 不能删除不可删除的属性，否则报错 不能删除变量delete prop，会报错，只能删除属性delete global[prop] eval不会在它的外层作用域引入变量 eval和arguments不能被重新赋值 arguments不会自动反映函数参数的变化 不能使用arguments.callee 不能使用arguments.caller 禁止this指向全局对象 不能使用fn.caller和fn.arguments获取函数调用的堆栈 增加了保留字（比如protected、static和interface） export 命令 export命令用于规定模块的对外接口 12345678910111213// 输出变量export let firstName = 'Michael';export let lastName = 'Jackson';export let year = 1958;//或者简写let firstName = 'Michael';let lastName = 'Jackson';let year = 1958;export {firstName, lastName, year};//输出函数或类（class）export function multiply(x, y) { return x * y;}; import 命令 import命令用于输入其他模块提供的功能，import命令具有提升效果，会提升到整个模块的头部，首先执行 1234import {firstName, lastName, year} from './index';function setName(element) { element.textContent = firstName + ' ' + lastName;} as关键字 1234//为输入的变量重新取一个名字import { lastName as surname } from './index';//模块整体加载import * as circle from './circle' export default 命令 为模块指定默认输出 1234567// export-default.jsexport default function () { console.log('foo');}// import-default.jsimport customName from './export-default';customName(); // 'foo' 栗子一个 vuex 模块（module）实例 123456789101112131415161718192021222324252627282930313233//com.jsimport * as types from '../types'const state = { showLoading: false,}const actions = { setShowLoading({ commit }, status) { commit(types.COM_SHOW_LOADING, status) }}const getters = { showLoading: state => state.showLoading,}const mutations = { [types.COM_SHOW_LOADING](state, status) { state.showLoading = status },}export default { state, actions, getters, mutations}//serach.vueimport { mapGetters } from 'vuex'computed: { //mapGetters(map: Array<string> | Object): Object,创建组件的计算属性返回 getter 的返回值 //使用对象展开运算符将 getters 混入 computed 对象中 ...mapGetters([ 'showLoading' ])},","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"读书笔记-es6Class的继承","date":"2017-05-13T14:14:52.000Z","path":"2017/05/13/读书笔记-es6Class的继承/","text":"Class的继承一、基本用法 Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。 123456789class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y) this.color = color; } toString() { return this.color + ' ' + super.toString(); // 调用父类的toString() }} 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。 ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6的继承机制完全不同，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。 在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例。 12345678910111213class Point { constructor(x, y) { this.x = x; this.y = y; }}class ColorPoint extends Point { constructor(x, y, color) { this.color = color; // ReferenceError super(x, y); this.color = color; // 正确 }} 下面是生成子类实例的代码，这与ES5的行为完全一致。 123let cp = new ColorPoint(25, 8, 'green');cp instanceof ColorPoint // truecp instanceof Point // true 二、类的prototype属性和__proto__属性 大多数浏览器的ES5实现之中，每一个对象都有__proto__属性，指向对应的构造函数的prototype属性。Class作为构造函数的语法糖，同时有prototype属性和__proto__属性，因此同时存在两条继承链。1）子类的__proto__属性，表示构造函数的继承，总是指向父类。2）子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。 123456class A {}class B extends A {}B.__proto__ === A // trueB.prototype.__proto__ === A.prototype // true 三、Object.getPrototypeOf() Object.getPrototypeOf方法可以用来从子类上获取父类。可以使用这个方法判断，一个类是否继承了另一个类。 12Object.getPrototypeOf(ColorPoint) === Point// true 四、super 关键字 super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。 super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。 123456class A {}class B extends A { constructor() { super(); }} 注意，super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于A.prototype.constructor.call(this)。 super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。 12345678910111213class A { p() { return 2; }}class B extends A { constructor() { super(); console.log(super.p()); // 2 //super.p() 相当于 A.prototype.p() }}let b = new B(); 由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。 123456789101112class A { constructor() { this.p = 2; }}class B extends A { get m() { return super.p; }}let b = new B();b.m // undefined 如果属性定义在父类的原型对象上，super就可以取到。 123456789class A {}A.prototype.x = 2;class B extends A { constructor() { super(); console.log(super.x) // 2 }}let b = new B(); ES6 规定，通过super调用父类的方法时，super会绑定子类的this。 12345678910111213141516171819class A { constructor() { this.x = 1; } print() { console.log(this.x); }}class B extends A { constructor() { super(); this.x = 2; } m() { super.print(); }}let b = new B();b.m() // 2 上面代码中，super.print()虽然调用的是A.prototype.print()，但是A.prototype.print()会绑定子类B的this，导致输出的是2，而不是1。也就是说，实际上执行的是super.print.call(this)。 五、实例的__proto__属性 子类实例的__proto__属性的__proto__属性，指向父类实例的__proto__属性。也就是说，子类的原型的原型，是父类的原型 1234var p1 = new Point(2, 3);var p2 = new ColorPoint(2, 3, 'red');p2.__proto__ === p1.__proto__ // falsep2.__proto__.__proto__ === p1.__proto__ // true 因此，通过子类实例的__proto__.__proto__属性，可以修改父类实例的行为。 1234p2.__proto__.__proto__.printName = function () { console.log('Ha');};p1.printName() // "Ha" 上面代码在ColorPoint的实例p2上向Point类添加方法，结果影响到了Point的实例p1。 六、原生构造函数的继承 Boolean() Number() String() Array() Date() Function() RegExp() Error() Object() 以前，这些原生构造函数是无法继承的，比如，不能自己定义一个Array的子类。ES6可以自定义原生数据结构（比如Array、String等）的子类，这是ES5无法做到的。 1234567891011121314151617181920212223class VersionedArray extends Array { constructor() { super(); this.history = [[]]; } commit() { this.history.push(this.slice()); } revert() { this.splice(0, this.length, ...this.history[this.history.length - 1]); }}var x = new VersionedArray();x.push(1);x.push(2);x // [1, 2]x.history // [[]]x.commit();x.history // [[], [1, 2]]x.push(3);x // [1, 2, 3]x.revert();x // [1, 2]","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"读书笔记-es6Class","date":"2017-05-11T15:46:21.000Z","path":"2017/05/11/读书笔记-es6Class/","text":"Class一、Class基本语法传统方法: 12345678function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2); ES6: 12345678910class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; }}var p = new Point(1, 2); ES6的类，完全可以看作构造函数的另一种写法: 12345class Point { // ...}typeof Point // "function"Point === Point.prototype.constructor // true 构造函数的prototype属性，在ES6的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。 12345678910111213141516class Point { constructor(){ // ... } toString(){ // ... } toValue(){ // ... }}// 等同于Point.prototype = { toString(){}, toValue(){}}; 在类的实例上面调用方法，其实就是调用原型上的方法。 123class B {}let b = new B();b.constructor === B.prototype.constructor // true 由于类的方法都定义在prototype对象上面，所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。 1234567891011class Point { constructor(){ // ... }}Object.assign(Point.prototype, { toString(){}, toValue(){}});//prototype对象的constructor属性，直接指向“类”的本身，这与ES5的行为是一致的。Point.prototype.constructor === Point // true 类的内部所有定义的方法，都是不可枚举的（non-enumerable）。这一点与ES5的行为不一致。 二、constructor方法 constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。 三、类的实例对象 生成类的实例对象的写法，与ES5完全一样，也是使用new命令。如果忘记加上new，像函数那样调用Class，将会报错。 1234// 报错var point = Point(2, 3);// 正确var point = new Point(2, 3); 与ES5一样，实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。 12345678910111213141516class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; }}var point = new Point(2, 3);point.toString() // (2, 3)point.hasOwnProperty('x') // truepoint.hasOwnProperty('y') // truepoint.hasOwnProperty('toString') // falsepoint.__proto__.hasOwnProperty('toString') // true 上面代码中，x和y都是实例对象point自身的属性（因为定义在this变量上），所以hasOwnProperty方法返回true，而toString是原型对象的属性（因为定义在Point类上），所以hasOwnProperty方法返回false。这些都与ES5的行为保持一致。 与ES5一样，类的所有实例共享一个原型对象。 123var p1 = new Point(2,3);var p2 = new Point(3,2);p1.__proto__ === p2.__proto__ //true 上面代码中，p1和p2都是Point的实例，它们的原型都是Point.prototype，所以__proto__属性是相等的。 这也意味着，可以通过实例的__proto__属性为Class添加方法。 1234567var p1 = new Point(2,3);var p2 = new Point(3,2);p1.__proto__.printName = function () { return 'Oops' };p1.printName() // "Oops"p2.printName() // "Oops"var p3 = new Point(4,2);p3.printName() // "Oops" 上面代码在p1的原型上添加了一个printName方法，由于p1的原型就是p2的原型，因此p2也可以调用这个方法。而且，此后新建的实例p3也可以调用这个方法。这意味着，使用实例的__proto__属性改写原型，必须相当谨慎，不推荐使用，因为这会改变Class的原始定义，影响到所有实例。 四、不存在变量提升 Class不存在变量提升（hoist），这一点与ES5完全不同。 12new Foo(); // ReferenceErrorclass Foo {} 五、Class表达式 采用Class表达式，可以写出立即执行的Class。 123456789let person = new class { constructor(name) { this.name = name; } sayName() { console.log(this.name); }}('张三');person.sayName(); // "张三" 六、私有方法 私有方法是常见需求，但 ES6 不提供，只能通过变通方法模拟实现。 在命名上加以区别: 1234567891011class Widget { // 公有方法 foo (baz) { this._bar(baz); } // 私有方法 _bar(baz) { return this.snaf = baz; } // ...} 上面代码中，_bar方法前面的下划线，表示这是一个只限于内部使用的私有方法。但是，这种命名是不保险的，在类的外部，还是可以调用到这个方法。 七、this的指向 类的方法内部如果含有this，它默认指向类的实例 八、Class的取值函数（getter）和存值函数（setter） 与ES5一样，在Class内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。 12345678910111213141516class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value) { console.log('setter: '+value); }}let inst = new MyClass();inst.prop = 123;// setter: 123inst.prop// 'getter' Github地址： https://github.com/hzzly/learn-es6 文章来源hzzly博客技术分享","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"读书笔记-es6Async函数栗子","date":"2017-05-10T12:07:22.000Z","path":"2017/05/10/读书笔记-es6Async函数栗子/","text":"async函数栗子栗子一：从豆瓣 API 获取数据123456789101112131415161718192021222324252627282930313233var fetchDoubanApi = function() { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { var response; try { response = JSON.parse(xhr.responseText); } catch (e) { reject(e); } if (response) { resolve(response, xhr.status, xhr); } } else { reject(xhr); } } }; xhr.open('GET', 'https://api.douban.com/v2/user/aisk', true); xhr.setRequestHeader("Content-Type", "text/plain"); xhr.send(data); });};(async function() { try { let result = await fetchDoubanApi(); console.log(result); } catch (e) { console.log(e); }})(); 栗子二：根据电影文件名，自动下载对应的海报12345678910111213141516171819202122232425262728293031323334353637import fs from 'fs';import path from 'path';import request from 'request';var movieDir = __dirname + '/movies', exts = ['.mkv', '.avi', '.mp4', '.rm', '.rmvb', '.wmv'];// 读取文件列表var readFiles = function () { return new Promise(function (resolve, reject) { fs.readdir(movieDir, function (err, files) { resolve(files.filter((v) => exts.includes(path.parse(v).ext))); }); });};// 获取海报var getPoster = function (movieName) { let url = `https://api.douban.com/v2/movie/search?q=${encodeURI(movieName)}`; return new Promise(function (resolve, reject) { request({url: url, json: true}, function (error, response, body) { if (error) return reject(error); resolve(body.subjects[0].images.large); }) });};// 保存海报var savePoster = function (movieName, url) { request.get(url).pipe(fs.createWriteStream(path.join(movieDir, movieName + '.jpg')));};(async () => { let files = await readFiles(); // await只能使用在原生语法 for (var file of files) { let name = path.parse(file).name; console.log(`正在获取【${name}】的海报`); savePoster(name, await getPoster(name)); } console.log('=== 获取海报完成 ===');})();","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"读书笔记-es6Async函数","date":"2017-05-09T06:41:45.000Z","path":"2017/05/09/读书笔记-es6Async函数/","text":"async 函数 async 函数，使得异步操作变得更加方便。它是 Generator 函数的语法糖。 Generator 函数，依次读取两个文件: 123456789101112131415var fs = require('fs');var readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName, function(error, data) { if (error) reject(error); resolve(data); }); });};var gen = function* () { var f1 = yield readFile('/etc/fstab'); var f2 = yield readFile('/etc/shells'); console.log(f1.toString()); console.log(f2.toString());}; 写成async函数，就是下面这样: 123456var asyncReadFile = async function () { var f1 = await readFile('/etc/fstab'); var f2 = await readFile('/etc/shells'); console.log(f1.toString()); console.log(f2.toString());}; async函数对 Generator 函数的改进，体现在以下四点: 1）内置执行器 Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。 1var result = asyncReadFile(); 上面的代码调用了asyncReadFile函数，然后它就会自动执行，输出最后结果。这完全不像 Generator 函数，需要调用next方法，或者用co模块，才能真正执行，得到最后结果。 2）更好的语义 async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。 3）更广的适用性 co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。 4）返回值是 Promise async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。 进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。 一、基本用法 async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。 12345678910function timeout(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); });}async function asyncPrint(value, ms) { await timeout(ms); console.log(value);}asyncPrint('hello world', 5000); 上面代码指定5000毫秒以后，输出hello world。 由于async函数返回的是 Promise 对象，可以作为await命令的参数。所以，上面的例子也可以写成下面的形式: 12345678910async function timeout(ms) { await new Promise((resolve) => { setTimeout(resolve, ms); });}async function asyncPrint(value, ms) { await timeout(ms); console.log(value);}asyncPrint('hello world', 5000); async 函数多种使用形式 123456789101112131415161718192021// 函数声明async function foo() {}// 函数表达式const foo = async function () {};// 对象的方法let obj = { async foo() {} };obj.foo().then(...)// Class 的方法class Storage { constructor() { this.cachePromise = caches.open('avatars'); } async getAvatar(name) { const cache = await this.cachePromise; return cache.match(`/avatars/${name}.jpg`); }}const storage = new Storage();storage.getAvatar('hzzly').then(…);// 箭头函数const foo = async () => {}; 二、语法 async函数的语法规则总体上比较简单，难点是错误处理机制。 返回 Promise 对象 async函数返回一个 Promise 对象。async函数内部return语句返回的值，会成为then方法回调函数的参数。 12345async function f() { return 'hello world';}f().then(v => console.log(v))// "hello world" Promise 对象的状态变化 async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。 1234567async function getTitle(url) { let response = await fetch(url); let html = await response.text(); return html.match(/<title>([\\s\\S]+)<\\/title>/i)[1];}getTitle('https://tc39.github.io/ecma262/').then(console.log)// "ECMAScript 2017 Language Specification" 上面代码中，函数getTitle内部有三个操作：抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成，才会执行then方法里面的console.log。 三、使用注意点 await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try…catch代码块中。 1234567891011121314async function myFunction() { try { await somethingThatReturnsAPromise(); } catch (err) { console.log(err); }}// 另一种写法async function myFunction() { await somethingThatReturnsAPromise() .catch(function (err) { console.log(err); };} 多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。 12345678910//异步操作（即互不依赖），被写成继发关系。这样比较耗时，因为只有getFoo完成以后，才会执行getBar，完全可以让它们同时触发。let foo = await getFoo();let bar = await getBar();// 写法一let [foo, bar] = await Promise.all([getFoo(), getBar()]);// 写法二let fooPromise = getFoo();let barPromise = getBar();let foo = await fooPromise;let bar = await barPromise; await命令只能用在async函数之中，如果用在普通函数，就会报错。 下一节将介绍 async 函数的栗子(🌰)，敬请期待。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"读书笔记-es6Generator函数","date":"2017-05-08T14:27:47.000Z","path":"2017/05/08/读书笔记-es6Generator函数/","text":"Generator函数 从语法上，可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象(遍历器对象)。Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。Generator 函数也不能跟new命令一起用，会报错。 1234567891011121314function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending';}var hw = helloWorldGenerator();hw.next()// { value: 'hello', done: false }hw.next()// { value: 'world', done: false }hw.next()// { value: 'ending', done: true }hw.next()// { value: undefined, done: true } 总结一下，调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。 写法 1234function * foo(x, y) { ··· }function *foo(x, y) { ··· }function* foo(x, y) { ··· }function*foo(x, y) { ··· } 一、yield 表达式 由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。 遍历器对象的next方法的运行逻辑如下:1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。4）如果该函数没有return语句，则返回的对象的value属性值为undefined。 123456function* gen() { yield 123 + 456;}var g = gen()gen.next()//{ value: 579, done: false } 二、for…of 循环 for…of循环可以自动遍历 Generator 函数时生成的Iterator对象，且此时不再需要调用next方法。 123456789101112function *foo() { yield 1; yield 2; yield 3; yield 4; yield 5; return 6;}for (let v of foo()) { console.log(v);}// 1 2 3 4 5 这里需要注意，一旦next方法的返回对象的done属性为true，for…of循环就会中止，且不包含该返回对象，所以上面代码的return语句返回的6，不包括在for…of循环之中。 除了for…of循环以外，扩展运算符（…）、解构赋值和Array.from方法内部调用的，都是遍历器接口。这意味着，它们都可以将 Generator 函数返回的 Iterator 对象，作为参数。 1234567891011121314151617181920function* numbers () { yield 1 yield 2 return 3 yield 4}// 扩展运算符[...numbers()] // [1, 2]// Array.from 方法Array.from(numbers()) // [1, 2]// 解构赋值let [x, y] = numbers();x // 1y // 2// for...of 循环for (let n of numbers()) { console.log(n)}// 1// 2 三、作为对象属性的Generator函数1234567891011let obj = { * myGeneratorMethod() { ··· }};//等同于let obj = { myGeneratorMethod: function* () { // ··· }}; 四、应用 1）异步操作的同步化表达 12345678910function* loadUI() { showLoadingScreen(); yield loadUIDataAsynchronously(); hideLoadingScreen();}var loader = loadUI();// 加载UIloader.next()// 卸载UIloader.next() 123456789101112function* main() { var result = yield request("http://some.url"); var resp = JSON.parse(result); console.log(resp.value);}function request(url) { makeAjaxCall(url, function(response){ it.next(response); });}var it = main();it.next(); 2）控制流管理 123456789step1(function (value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { // Do something with value4 }); }); });}); 采用 Promise 改写上面的代码。 12345678910Promise.resolve(step1) .then(step2) .then(step3) .then(step4) .then(function (value4) { // Do something with value4 }, function (error) { // Handle any error from step1 through step4 }) .done(); Generator 函数可以进一步改善代码运行流程。 1234567891011121314151617181920function* longRunningTask(value1) { try { var value2 = yield step1(value1); var value3 = yield step2(value2); var value4 = yield step3(value3); var value5 = yield step4(value4); // Do something with value4 } catch (e) { // Handle any error from step1 through step4 }}scheduler(longRunningTask(initialValue));function scheduler(task) { var taskObj = task.next(task.value); // 如果Generator函数未结束，就继续调用 if (!taskObj.done) { task.value = taskObj.value scheduler(task); }}","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"读书笔记-es6Set和Map数据结构","date":"2017-05-07T11:10:28.000Z","path":"2017/05/07/读书笔记-es6Set和Map数据结构/","text":"Set和Map数据结构一、Set 它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。 123456const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4 Set 函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。 12345678910111213141516// 例一const set = new Set([1, 2, 3, 4, 4]);[...set]// [1, 2, 3, 4]// 例二const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);items.size // 5// 例三function divs () { return [...document.querySelectorAll('div')];}const set = new Set(divs());set.size // 56// 类似于divs().forEach(div => set.add(div));set.size // 56 去除数组重复成员的方法。 12// 去除数组的重复成员[...new Set(array)] 二、Set 实例的属性和方法 属性 Set.prototype.constructor：构造函数，默认就是Set函数。 Set.prototype.size：返回Set实例的成员总数。 方法 add(value)：添加某个值，返回Set结构本身。 delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 has(value)：返回一个布尔值，表示该值是否为Set的成员。 clear()：清除所有成员，没有返回值。 三、遍历操作 keys()：返回键名的遍历器 values()：返回键值的遍历器 entries()：返回键值对的遍历器 forEach()：使用回调函数遍历每个成员 123456789101112131415161718192021222324252627282930313233let set = new Set(['red', 'green', 'blue']);for (let item of set.keys()) { console.log(item);}// red// green// bluefor (let item of set.values()) { console.log(item);}// red// green// bluefor (let item of set.entries()) { console.log(item);}// ["red", "red"]// ["green", "green"]// ["blue", "blue"]let set = new Set([1, 2, 3]);set.forEach((value, key) => console.log(value * 2) )// 2// 4// 6let set = new Set([1, 2, 3]);set = new Set([...set].map(x => x * 2));// 返回Set结构：{2, 4, 6}let set = new Set([1, 2, 3, 4, 5]);set = new Set([...set].filter(x => (x % 2) == 0));// 返回Set结构：{2, 4}let arr = [3, 5, 2, 2, 5, 5];let unique = [...new Set(arr)];// [3, 5, 2] 四、Map 它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。 123456789const map = new Map([ ['name', '张三'], ['title', 'Author']]);map.size // 2map.has('name') // truemap.get('name') // "张三"map.has('title') // truemap.get('title') // "Author" 五、Map 实例的属性和方法 属性 Map.prototype.constructor：构造函数，默认就是Map函数。 Map.prototype.size：返回Map实例的成员总数。 方法 set(key, value)：set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。可以采用链式写法。 get(key)：get方法读取key对应的键值，如果找不到key，返回undefined。 has(key)：has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。 delete(key)：delete方法删除某个键，返回true。如果删除失败，返回false。 clear(): clear方法清除所有成员，没有返回值。 六、遍历操作和 Set 一样","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"读书笔记-es6对象的扩展","date":"2017-05-06T02:17:56.000Z","path":"2017/05/06/读书笔记-es6对象的扩展/","text":"对象的扩展一、属性和方法的简洁表示法12345678910111213141516171819202122var foo = 'bar';var baz = {foo};baz // {foo: "bar"}// 等同于var baz = {foo: foo};var o = { method() { return "Hello!"; }};// 等同于var o = { method: function() { return "Hello!"; }};//如果某个方法的值是一个Generator函数，前面需要加上星号。var obj = { * m(){ yield 'hello world'; }}; 用于函数的返回值，将会非常方便 1234567function getPoint() { var x = 1; var y = 10; return {x, y};}getPoint()// {x:1, y:10} CommonJS模块输出变量，就非常合适使用简洁写法。 1234567891011121314151617var ms = {};function getItem (key) { return key in ms ? ms[key] : null;}function setItem (key, value) { ms[key] = value;}function clear () { ms = {};}module.exports = { getItem, setItem, clear };// 等同于module.exports = { getItem: getItem, setItem: setItem, clear: clear}; 二、Object.is() Object.is它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。 三、Object.assign() Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target） 123456var target = { a: 1 };var source1 = { b: 2 };var source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, c:3}//如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。 Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。 1234var obj1 = {a: {b: 1}};var obj2 = Object.assign({}, obj1);obj1.a.b = 2;obj2.a.b // 2 对于这种嵌套的对象，一旦遇到同名属性，Object.assign的处理方法是替换，而不是添加。 1234var target = { a: { b: 'c', d: 'e' } }var source = { a: { b: 'hello' } }Object.assign(target, source)// { a: { b: 'hello' } } Object.assign常见用途 1）为对象添加属性 12345class Point { constructor(x, y) { Object.assign(this, {x, y}); }} 上面方法通过Object.assign方法，将x属性和y属性添加到Point类的对象实例。 2）为对象添加方法 123456789101112131415Object.assign(SomeClass.prototype, { someMethod(arg1, arg2) { ··· }, anotherMethod() { ··· }});// 等同于下面的写法SomeClass.prototype.someMethod = function (arg1, arg2) { ···};SomeClass.prototype.anotherMethod = function () { ···}; 3）克隆对象 123function clone(origin) { return Object.assign({}, origin);} 上面代码将原始对象拷贝到一个空对象，就得到了原始对象的克隆。 不过，采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。如果想要保持继承链，可以采用下面的代码。 1234function clone(origin) { let originProto = Object.getPrototypeOf(origin); return Object.assign(Object.create(originProto), origin);} 4）合并多个对象 12const merge = (target, ...sources) => Object.assign(target, ...sources); 如果希望合并后返回一个新对象，可以改写上面函数，对一个空对象合并。 12const merge = (...sources) => Object.assign({}, ...sources); 四、属性的遍历 1）for…in for…in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）。 2）Object.keys(obj) Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）。 3）Object.getOwnPropertyNames(obj) Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）。 4）Object.getOwnPropertySymbols(obj) Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有Symbol属性。 5）Reflect.ownKeys(obj) Reflect.ownKeys返回一个数组，包含对象自身的所有属性，不管属性名是Symbol或字符串，也不管是否可枚举。 12Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })// ['2', '10', 'b', 'a', Symbol()] 五、Object.keys()，Object.values()，Object.entries() Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。 Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。Object.values只返回对象自身的可遍历属性。Object.values会过滤属性名为 Symbol 值的属性。如果Object.values方法的参数是一个字符串，会返回各个字符组成的一个数组。 Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。如果原对象的属性名是一个 Symbol 值，该属性会被忽略。Object.entries的基本用途是遍历对象的属性。另一个用处是，将对象转为真正的Map结构。 1234567891011121314151617181920212223var obj = { foo: 'bar', baz: 42 };Object.keys(obj)// ["foo", "baz"]var obj = { foo: 'bar', baz: 42 };Object.values(obj)// ["bar", 42]var obj = { 100: 'a', 2: 'b', 7: 'c' };Object.values(obj)// ["b", "c", "a"]var obj = { foo: 'bar', baz: 42 };Object.entries(obj)// [ ["foo", "bar"], ["baz", 42] ]let {keys, values, entries} = Object;let obj = { a: 1, b: 2, c: 3 };for (let key of keys(obj)) { console.log(key); // 'a', 'b', 'c'}for (let value of values(obj)) { console.log(value); // 1, 2, 3}for (let [key, value] of entries(obj)) { console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]} 六、对象的扩展运算符 扩展运算符（…）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。 12345678910let z = { a: 3, b: 4 };let n = { ...z };n // { a: 3, b: 4 }let aClone = { ...a };// 等同于let aClone = Object.assign({}, a);//合并两个对象let ab = { ...a, ...b };// 等同于let ab = Object.assign({}, a, b); Github地址： https://github.com/hzzly/learn-es6","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"读书笔记-es6函数的扩展","date":"2017-05-05T08:26:01.000Z","path":"2017/05/05/读书笔记-es6函数的扩展/","text":"函数的扩展一、函数参数的默认值 参数变量是默认声明的，所以不能用let或const再次声明 通常情况下，定义了默认值的参数，应该是函数的尾参数 123456function log(x, y = 'World') { console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello 二、与解构赋值默认值结合使用1234567function foo({x, y = 5}) { console.log(x, y);}foo({}) // undefined, 5foo({x: 1}) // 1, 5foo({x: 1, y: 2}) // 1, 2foo() // TypeError: Cannot read property 'x' of undefined 三、rest参数 ES6 引入 rest 参数（形式为“…变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。 rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错 12345678910111213141516function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum;}add(2, 5, 3) // 10function push(array, ...items) { items.forEach(function(item) { array.push(item); console.log(item); });}var a = [];push(a, 1, 2, 3) 四、扩展运算符(…) 它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。扩展运算符内部调用的是数据结构的Iterator接口 1234567891011121314console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]function push(array, ...items) { array.push(...items);}function add(x, y) { return x + y;}let numbers = [4, 38];add(...numbers) // 42 栗子： 替代数组的apply方法 123456// ES5的写法Math.max.apply(null, [14, 3, 77])// ES6的写法Math.max(...[14, 3, 77])// 等同于Math.max(14, 3, 77); 合并数组 12345678910111213// ES5[1, 2].concat(more)// ES6[1, 2, ...more]var arr1 = ['a', 'b'];var arr2 = ['c'];var arr3 = ['d', 'e'];// ES5的合并数组arr1.concat(arr2, arr3);// [ 'a', 'b', 'c', 'd', 'e' ]// ES6的合并数组[...arr1, ...arr2, ...arr3]// [ 'a', 'b', 'c', 'd', 'e' ] 与解构赋值结合 123456789const [first, ...rest] = [1, 2, 3, 4, 5];first // 1rest // [2, 3, 4, 5]const [first, ...rest] = [];first // undefinedrest // []:const [first, ...rest] = ["foo"];first // "foo"rest // [] 五、箭头函数 箭头函数可以让this指向固定化，这种特性很有利于封装回调函数 （1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。 （2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。 （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。 （4）不可以使用yield命令，因此箭头函数不能用作Generator函数。 12345678910111213var f = () => 5;// 等同于var f = function () { return 5 };var f = v => v;//等同于：var f = function(v) { return v;};var sum = (num1, num2) => num1 + num2;// 等同于var sum = function(num1, num2) { return num1 + num2;}; 箭头函数简化回调函数 123456// 正常函数写法[1,2,3].map(function (x) { return x * x;});// 箭头函数写法[1,2,3].map(x => x * x); 箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域 123456789101112131415function Timer() { this.s1 = 0; this.s2 = 0; // 箭头函数 setInterval(() => this.s1++, 1000); // 普通函数 setInterval(function () { this.s2++; }, 1000);}var timer = new Timer();setTimeout(() => console.log('s1: ', timer.s1), 3100);setTimeout(() => console.log('s2: ', timer.s2), 3100);// s1: 3// s2: 0 因为所有的内层函数都是箭头函数，都没有自己的this，它们的this其实都是最外层foo函数的this 12345678910111213function foo() { return () => { return () => { return () => { console.log('id:', this.id); }; }; };}var f = foo.call({id: 1});var t1 = f.call({id: 2})()(); // id: 1var t2 = f().call({id: 3})(); // id: 1var t3 = f()().call({id: 4}); // id: 1 Github地址： https://github.com/hzzly/learn-es6","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"读书笔记-es6数组的扩展","date":"2017-05-04T15:22:23.000Z","path":"2017/05/04/读书笔记-es6数组的扩展/","text":"数组的扩展一、Array.from() 将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map） 123456789101112131415161718192021//类似数组的对象let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3};// ES5的写法var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']// ES6的写法let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']// NodeList对象let ps = document.querySelectorAll('p');Array.from(ps).forEach(function (p) { console.log(p);});// arguments对象function foo() { var args = Array.from(arguments); // ...} 扩展运算符（…）也可以将某些数据结构转为数组 二、Array.of() 用于将一组值，转换为数组 123Array.of(3, 11, 8) // [3,11,8]Array.of(3) // [3]Array.of(3).length // 1 三、数组实例的copyWithin() 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组 target（必需）：从该位置开始替换数据。 start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。 end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。 1234567[1, 2, 3, 4, 5].copyWithin(0, 3)// [4, 5, 3, 4, 5][1, 2, 3, 4, 5].copyWithin(0, 3, 4)// [4, 2, 3, 4, 5]// -2相当于3号位，-1相当于4号位[1, 2, 3, 4, 5].copyWithin(0, -2, -1)// [4, 2, 3, 4, 5] 四、数组实例的find()和findIndex() find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。 findIndex返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。 12345678[1, 4, -5, 10].find((n) => n < 0)// -5[1, 5, 10, 15].find(function(value, index, arr) { return value > 9;}) // 10[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9;}) // 2 五、数组实例的fill() 使用给定值，填充一个数组 12345['a', 'b', 'c'].fill(7)// [7, 7, 7]//从1号位开始，向原数组填充7，到2号位之前结束['a', 'b', 'c'].fill(7, 1, 2)// ['a', 7, 'c'] 六、数组实例的entries()，keys()和values() keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历 123456789101112131415for (let index of ['a', 'b'].keys()) { console.log(index);}// 0// 1for (let elem of ['a', 'b'].values()) { console.log(elem);}// 'a'// 'b'for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem);}// 0 "a"// 1 "b" 七、数组实例的includes() 返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似,方法的第二个参数表示搜索的起始位置，默认为0 123[1, 2, 3].includes(2); // true[1, 2, 3].includes(4); // false[1, 2, NaN].includes(NaN); // true 八、数组的空位 forEach(), filter(), every() 和some()都会跳过空位 map()会跳过空位，但会保留这个值 join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串 1234567891011121314// forEach方法[,'a'].forEach((x,i) => console.log(i)); // 1// filter方法['a',,'b'].filter(x => true) // ['a','b']// every方法[,'a'].every(x => x==='a') // true// some方法[,'a'].some(x => x !== 'a') // false// map方法[,'a'].map(x => 1) // [,1]// join方法[,'a',undefined,null].join('#') // "#a##"// toString方法[,'a',undefined,null].toString() // ",a,," ES6则是明确将空位转为undefined。尽量建议避免出现空位。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"读书笔记-es6数值的扩展","date":"2017-05-03T15:03:20.000Z","path":"2017/05/03/读书笔记-es6数值的扩展/","text":"数值的扩展一、Number.isFinite(), Number.isNaN() Number.isFinite() 检查一个数值是否为有限的（finite） Number.isNaN() 检查一个值是否为NaN 1234567891011121314151617//Number.isFinite()Number.isFinite(15); // trueNumber.isFinite(0.8); // trueNumber.isFinite(NaN); // falseNumber.isFinite(Infinity); // falseNumber.isFinite(-Infinity); // falseNumber.isFinite('foo'); // falseNumber.isFinite('15'); // falseNumber.isFinite(true); // false//Number.isNaN()Number.isNaN(NaN) // trueNumber.isNaN(15) // falseNumber.isNaN('15') // falseNumber.isNaN(true) // falseNumber.isNaN(9/NaN) // trueNumber.isNaN('true'/0) // trueNumber.isNaN('true'/'true') // true 二、Number.parseInt(), Number.parseFloat() 全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。 12Number.parseInt === parseInt // trueNumber.parseFloat === parseFloat // true 三、Number.isInteger() 判断一个值是否为整数 12345Number.isInteger(25) // trueNumber.isInteger(25.0) // trueNumber.isInteger(25.1) // falseNumber.isInteger("15") // falseNumber.isInteger(true) // false 四、安全整数和Number.isSafeInteger() JavaScript能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值。Number.isSafeInteger() 用来判断一个整数是否落在这个范围之内 五、Math.trunc() 去除一个数的小数部分，返回整数部分 六、Math.sign() 判断一个数到底是正数、负数、还是零 参数为正数，返回+1； 参数为负数，返回-1； 参数为0，返回0； 参数为-0，返回-0; 其他值，返回NaN。 七、Math.signbit() 判断一个数的符号位是否设置了 如果参数是NaN，返回false 如果参数是-0，返回true 如果参数是负值，返回true 其他情况返回false 1234Math.signbit(2) //falseMath.signbit(-2) //trueMath.signbit(0) //falseMath.signbit(-0) //true 八、指数运算符( ** )122 ** 2 // 42 ** 3 // 8 Github地址： https://github.com/hzzly/learn-es6","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"DIY一个自己的音乐播放器","date":"2017-04-27T06:47:55.000Z","path":"2017/04/27/DIY一个自己的音乐播放器/","text":"前言：在最近的一个外包项目中包联盟(PC端)中使用到了video，遇到了好多坑。突发奇想来踩一踩audio的坑😀，果然一入深似海，👇下面将分享我的DIY之路-Vue音乐播放器。注：本项目为开源项目，不能用于商业应用，仅供学习。有问题或建议发我邮箱：hjingren@aliyun.com [温馨提示：pc浏览f12手机模式最佳,手机建议wifi下访问] 预览地址： http://hzzly.net/magic-musicGithub地址： https://github.com/hzzly/MagicMusic欢迎大家的star啦😄~ 先来个预览： 更多预览：更多 👉老铁们，准备发车(技能点)： vue文档 vue-router文档 vuex文档 不想看文档的可以看看我这篇博客vuex学习实践笔记 axios文档 或者这篇博客 Vuex2 与 Axios 开发(我也是参考这篇，感谢作者😁) es6(阮一峰的es6入门) 可以参考我的es6之路(还在继续,轻喷) flex (Web的flex弹性盒模型) 移动端屏幕适配的解决 (flexible+rem) 本地存储(sessionStorage、localStorage) 图片懒加载 👉坐好，出发 实现的功能1、首页 轮播 个性推荐[流行、古典、轻音乐、流行] 歌曲操作 加入播放列表 喜欢 分享 2、底部播放控件 播放 暂停 下一曲 播放进度条 3、播放页面 上一曲 播放 暂停 下一曲 播放进度条[弧形进度条] 歌词滚动 播放的歌词高亮 播放模式[单曲循环、列表循环、随机播放] 4、播放列表 播放歌曲高亮 切歌(单击切歌) 删歌(点击右侧小X) 清空播放列表 本地缓存播放列表 5、排行榜 热门排行榜 排行榜里的歌曲(单击播放) 6、音乐搜索输入搜索关键词，点击放大镜图标 单曲(单击或点击歌曲操作(…)添加至音乐播放列表，部分音乐会存在版权问题无法播放) 歌手 专辑 歌单 用户 本地缓存搜索列表 7、侧边栏 头像 菜单 个人中心 API感谢作者把api整理的这么好(点个赞👍) 网易云音乐 NodeJS 版 API 目录结构123456789101112131415161718192021222324252627282930313233343536|——MagicMusic/| |——build/| |——confg/| |——node_modules/| |——src/| | |——assets/ //静态文件| | |——components/ //公共组件| | |——api/| | | |——index.js //axios封装与api| | |——pages/ //存放项目页面| | | |——classical.vue //古典歌曲页面| | | |——collection.vue //排行榜| | | |——home.vue //首页| | | |——light.vue //轻音乐歌曲页面| | | |——login.vue //登录页面| | | |——popular.vue //流行歌曲页面| | | |——radio.vue //电台歌曲页面| | | |——rank.vue //排行榜列表| | | |——search.vue //搜索页| | | |——user.vue //用户| | |——router/ | | | |——index.js //页面路由| | |——util //公用方法| | |——vuex / //存放vuex代码| | | |——modules / //数据模块| | | |——store.js //vuex主入口| | | |——types.js //vuex的types文件| | |——App.vue //父组件| | |——main.js //入口文件| |——static/| |——.babelrc| |——.editorconfig| |——.gitgnore| |——index.html| |——package.json| |——README.md 开发心得与总结1、轮播图首先感谢作者ShanaMaid/vue-image-scroll开源的代码，我把代码copy下来自己进行了一点修改(没有手指滑动效果)，因为这是移动端，少不了的手指滑动切换，所以添加了vue-touch(偷偷告诉你，vue-touch的next分支还是支持vue2.0的😜)。代码传送门 1234567891011121314151617<li v-for="(item,index) in image" :class="[move[index]]"> <v-touch class="vuetouch" v-on:swipeleft="nextPic" v-on:swiperight="prePic"> ... </v-touch></li>methods: { nextPic(event) { let temp = this.move.pop() this.move.unshift(temp) }, prePic(event) { let temp = this.move.shift() this.move.push(temp) },} 2、歌曲操作(喜欢，分享，加入播放列表)动画、播放列表展开与删除歌曲动画 Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡 条件渲染 （使用 v-if） 条件展示 （使用 v-show） 动态组件 组件根节点 12345678910<transition name="move"> <div class="menu" v-show="item.menuShow"> ... </div></transition><transition-group name="slide" tag="div" class="list-wrapper"> <div class="item" v-for="(item, index) in listenLists" :key="item"> ... </div></transition-group> transition-group一组过度动画，这里有个小坑的，之前看官网列表过渡的栗子，给每一项设置唯一的key值，一般都会用index。所以在做的时候就把index传给key，结果过渡老是不对，后来换成对应的item就正常了(生无可恋脸)。 3、直线进度条、弧形进度条 西班牙建筑大师曾说过：“直线属于人类，曲线则归于上帝”。在这里我大胆的使用了弧形来作为进度条，(几大热门音乐APP貌似还没有弧形进度条😄)。 这里我用到了Vue的绑定内联样式 123456789101112//直线进度条<div class="progress-bar"> <div class="play" :style="{width: (now / duration).toFixed(3)*100 + '%'}"></div></div>//弧形进度条//因为用到了弧形，所以我这里用到了`border-radius`来使它变成一个大圆，然后平移`translateX`居中，其它不要的部分`overflow: hidden`。//这里用两个div来表示进度条，一条固定的进度条，一条慢慢增加。<div class="process" @click="showToast"> <div class="line"></div> <div class="pro" :style="{transform: `translateX(${translateX}) rotate(${deg*1 + 56.5*((now / size).toFixed(3))}deg)`}"></div></div> 4、本地存储 将一些数据缓存到localStorage，可以减少Http请求，从而优化页面加载时间。 在这个项目中首页歌曲列表以及搜索历史用到了本地缓存，拿搜索历史来举栗： 12345678910111213141516created() { if (!localStorage.searchHistory) { let searchHistory = ['前端', '童话镇', '刚好遇见你'] localStorage.searchHistory = JSON.stringify(searchHistory) } },methods: { _search(keywords) { //判断搜索列表中是否已存在 let searchHistory = JSON.parse(localStorage.searchHistory) let find = searchHistory.findIndex((val) => { return val === keywords }) find === -1 ? localStorage.searchHistory = JSON.stringify([keywords, ...searchHistory]) : '' }} 5、图片懒加载使用了vue-lazyload插件用法👉： 1$ npm install vue-lazyload 123456789//main.jsimport VueLazyLoad from 'vue-lazyload'import def_lazy_img from '../static/img/loading.gif' //懒加载的默认图片Vue.use(VueLazyLoad,{ loading: def_lazy_img}) //使用懒加载组件//在使用img标签的地方使用<img v-lazy="item.al.picUrl" alt=""> 6、歌词滚动与高亮因为api提供的歌词包括时间，如：[03:57.280]原谅我这一生不羁放纵爱自由所以首先要进行字符串切割： 123456789101112131415161718192021222324<div class="lyric"> <div class="roll-lyric" v-html="lyrics" ref="lyric"></div></div>computed: { lyrics() { let lyrics = '' this.lyricArr = [] if (this.lyric) { let arr = this.lyric.split('\\n') for (let item of arr) { if (item) { let arr2 = item.split(']') this.lyricArr.push(arr2[0].substring(1,3)*60+arr2[0].substring(4)*1) if (arr2) { lyrics += `<p class='lyrichook' style='margin: 10px 0'>${arr2[1]}</p>` } } } } else { lyrics = '暂无歌词~' } return lyrics }} 然后在播放的监听事件中与播放的当前做对比： 123456789101112131415this.$refs.myAudio.addEventListener('play', () => { this.pDOM = [...document.querySelectorAll('.lyrichook')] timer = setInterval(() => { this.now = audioDOM.currentTime this.lyricArr.forEach((item, index) => { if (parseInt(item) == parseInt(this.now)) { this.pDOM.forEach((p) => { p.style.color = 'rgba(255,255,255,.8)' //其它歌词清除高亮 }); this.pDOM[index].style.color = '#f12c61' //歌词高亮 this.$refs.lyric.style.transform = `translateY(-${(index-2)*25}px)` //歌词滚动 } }); }, 1000)}) 到这就ok了😜 7、vuex状态管理推荐官方调试工具 devtools extension 想进一步理解vuex，可以看这篇博客vuex学习实践笔记 之前看到好多人写的vuex，把整个项目的数据放到了一个state里，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。 所以我建议(个人见解，轻喷)：将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters。这样方便管理与后期的维护。 车已到站✌️。 不知不觉写了这么多，老铁们凑合这看吧😁，觉得还行的可以点个star，你的star是我继续开源创作的动力，谢谢！！！ 项目地址： https://github.com/hzzly/MagicMusic欢迎大家的star啦~","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"},{"name":"vuex","slug":"vuex","permalink":"http://yoursite.com/tags/vuex/"}]},{"title":"本地存储sessionStorage与localStorage","date":"2017-04-26T15:44:04.000Z","path":"2017/04/26/本地存储sessionStorage与localStorage/","text":"sessionStorage 数据的存储仅特定于某个会话中，也就是说数据只保持到浏览器关闭，当浏览器关闭后重新打开这个页面时， 之前的存储已经被清除。 localStorage 是一个持久化的存储，它并不局限于会话。除非主动删除数据，否则数据是永远不会过期的。 一、localStorage和sessionStorage操作 localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等 1.setItem存储value12sessionStorage.setItem("name", "hzzly");localStorage.setItem("blog", "hzzly.github.io"); 2.getItem获取value12let name = sessionStorage.getItem("name");let blog = localStorage.getItem("blog"); 3.removeItem删除key12sessionStorage.removeItem("name");localStorage.removeItem("blog"); 4.clear清除所有的key/value12sessionStorage.clear();localStorage.clear(); 5.其他操作方法：点操作和[] web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储及读取，像如下的代码： 12345678910//存localStorage.name = "hzzly"; localStorage["age"] = "21"; sessionStorage.name = "hzzly"; sessionStorage["age"] = "21";//取let name1 = localStorage.namelet age1 = localStorage["age"]let name2 = sessionStorage.namelet age2 = sessionStorage["age"] 6.localStorage和sessionStorage的key和length属性实现遍历 sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码： 123456var storage = window.localStorage; for (var i=0, len = storage.length; i < len; i++){ let key = storage.key(i); let value = storage.getItem(key); console.log(key + "=" + value); } 二、实例 storage只能存储字符串的数据，对于JS中常用的数组或对象却不能直接存储，可以用下面两个方法进行转换： JSON.stringify() 用于从一个对象解析出字符串 JSON.parse() 用于从一个字符串中解析出json对象 1.localStorage/sessionStorage存取数组123456//存let language = ['HTML/HTML5', 'CSS/CSS3', 'JavaScript', 'Vue', 'React']localStorage.language = JSON.stringify(language)sessionStorag.language = JSON.stringify(language)//取let storageLanguage = JSON.parse(localStorage.language) 2.localStorage存取对象1234567891011//存let myInfo = { 'name': 'hzzly', 'age': 21, 'school': 'ECUT', 'city': 'NanChang'}localStorage.myInfo = JSON.stringify(myInfo)sessionStorag.myInfo = JSON.stringify(myInfo)//取let storageLanguage = JSON.parse(localStorage.myInfo)","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"}]},{"title":"读书笔记-es6字符串的扩展","date":"2017-04-22T15:07:23.000Z","path":"2017/04/22/读书笔记-es6字符串的扩展/","text":"字符串的扩展一、字符串的遍历器接口123456for (let codePoint of 'foo') { console.log(codePoint)}// "f"// "o"// "o" 二、at返回字符串给定位置的字符 1234//es5'abc'.charAt(0) // "a"//es6'abc'.at(0) // "a" 三、indexOf(), includes(), startsWith(), endsWith() indexOf() 确定一个字符串是否包含在另一个字符串中(es5) includes() 返回布尔值，表示是否找到了参数字符串。 startsWith() 返回布尔值，表示参数字符串是否在源字符串的头部。 endsWith()返回布尔值，表示参数字符串是否在源字符串的尾部。 1234var s = 'Hello world!';s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // true 支持第二个参数，表示开始搜索的位置 1234var s = 'Hello world!';s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // true 1234var s = 'Hello world!';s.startsWith('world', 6) // trues.endsWith('Hello', 5) // trues.includes('Hello', 6) // false endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。 四、repeat() 返回一个新字符串，表示将原字符串重复n次。 12'x'.repeat(3) // "xxx"'hello'.repeat(2) // "hellohello" 五、padStart()，padEnd() 字符串补全长度 padStart() 头部补全 padEnd() 尾部补全第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。如果省略第二个参数，默认使用空格补全长度 1234'x'.padStart(5, 'ab') // 'ababx''x'.padStart(4, 'ab') // 'abax''x'.padEnd(5, 'ab') // 'xabab''x'.padEnd(4, 'ab') // 'xaba' 六、模板字符串123// 字符串中嵌入变量let name = "hzzly", time = "today";`Hello ${name}, how are you ${time}?` Github地址： https://github.com/hzzly/learn-es6","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"读书笔记-es6变量的解构赋值","date":"2017-04-21T14:59:09.000Z","path":"2017/04/21/读书笔记-es6变量的解构赋值/","text":"变量的解构赋值 这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。 一、数组的解构赋值数组的元素是按次序排列的，变量的取值由它的位置决定 1234567let [a, b, c] = [1, 2, 3]a // 1b // 2c // 3let [head, ...tail] = [1, 2, 3, 4]head // 1tail // [2, 3, 4] 默认值 12let [foo = true] = [];foo // true 栗子：12345// 返回一个数组function example() { return [1, 2, 3];}let [a, b, c] = example(); 二、对象的解构赋值对象的属性没有次序，变量必须与属性同名，才能取到正确的值 123let { foo, bar } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb" 默认值 12345var {x = 3} = {};x // 3var {x, y = 5} = {x: 1};x // 1y // 5 栗子： 将现有对象的方法，赋值到某个变量。 12345678910//将Math对象的对数、正弦、余弦三个方法，赋值到对应的变量上let { log, sin, cos } = Math // 返回一个对象function example() { return { foo: 1, bar: 2 };}let { foo, bar } = example(); 提取json数据 12345678let jsonData = { id: 42, status: "OK", data: [867, 5309]};let { id, status, data: number } = jsonData;console.log(id, status, number);// 42, "OK", [867, 5309] 三、字符串的解构赋值123456const [a, b, c, d, e] = 'hzzly'a // "h"b // "z"c // "z"d // "l"e // "y" 123//length属性let {length : len} = 'hello';len // 5 四、函数参数的解构赋值1234function add([x, y]){ return x + y;}add([1, 2]); // 3 Github地址： https://github.com/hzzly/learn-es6","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"读书笔记-es6let与const","date":"2017-04-09T14:16:56.000Z","path":"2017/04/09/读书笔记-es6let与const/","text":"let和const 两种新的声明变量的方法 一、let用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 1.块级作用域 2.不存在变量提升 123456// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2; 3.暂时性死区 12345var tmp = 123;if (true) { tmp = 'abc'; // ReferenceError let tmp;} 上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。 4.不允许重复声明 12345678910// 报错function () { let a = 10; var a = 1;}// 报错function () { let a = 10; let a = 1;} 二、constconst声明一个只读的常量。一旦声明，常量的值就不能改变。const一旦声明变量，就必须立即初始化，不能留到以后赋值。只在声明所在的块级作用域内有效。 const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。 123456const foo = {};// 为 foo 添加一个属性，可以成功foo.prop = 123;foo.prop // 123// 将 foo 指向另一个对象，就会报错foo = {}; // TypeError: "foo" is read-only 上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。 Github地址： https://github.com/hzzly/learn-es6 文章来源hzzly博客技术分享","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"vuex学习实践笔记","date":"2017-04-04T12:11:26.000Z","path":"2017/04/04/vuex学习实践笔记/","text":"Vuex是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 栗如(travel store)： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667import * as types from '../types'//数据const state = { travelsList: [], searchKey: { page: 0, limit: 20 }, scroll: true}//用户行为(可以处理异步),触发 mutations 来改变 stateconst actions = { /** * 获取约跑步列表 */ getTravelsList({ commit }) { if(state.scroll) { commit(types.GET_TRAVELS_PAGE_NUM) commit(types.COM_LOADING_STATUS, true), commit(types.GET_TRAVELS_SCORLL_STATUS, false) api.TravelsList() .then(res => { console.log(res) commit(types.COM_LOADING_STATUS, false), commit(types.GET_TRAVELS_SCORLL_STATUS, true) commit(types.GET_TRAVELS_LIST, res) }) } }, /** * 参加 */ joinTravel({ commit }, id) { ... }}//可以过滤 state 中的数据const getters = { travelsList: state => state.travelsList, travelListIndex: state => state.travelsList.slice(0,4)}//唯一能改变 state 的方法(纯函数)const mutations = { [types.GET_TRAVELS_LIST](state, res) { if(state.searchKey.page <= 1) { state.travelsList = res.data } else { state.travelsList = state.travelsList.concat(res.data) } }, [types.GET_TRAVELS_SEARCH_KEY](state, params) { state.searchKey = params }, [types.GET_TRAVELS_PAGE_NUM](state) { state.searchKey['page'] += 1 }, [types.GET_TRAVELS_SCORLL_STATUS](state, status) { state.scroll = status }}//导出一个 travel store 模块export default { state, actions, getters, mutations} 每一个 Vuex 应用的核心就是 store（仓库）。”store” 基本上就是一个容器，它包含着你的应用中大部分的状态(state)数据。 Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。 用一张图来理解一下 客户端(Client) -> action -> mutations -> state -> 客户端 可以看出在vuex中数据是单一流向的：视图(view)触发action，action提交(commit)到mutations，mutations改变state(数据)，state的改变，相应的组件也会相应的更新。 1.State 单一状态树，唯一数据源，能够直接清晰的读懂数据的结构。 1.1在 Vue 组件中获得数据123456789101112131415//storeconst state = { travelsList: [], searchKey: { page: 0, limit: 20 }, scroll: true}//在view中直接获取data () { return { scroll: this.$store.state.scroll }}, 1.2mapState 辅助函数12345678910computed: mapState([ // 映射 this.scroll 为 this.$store.state.scroll 'scroll'])//或对象展开运算符computed: { ...mapState({ 'scroll' })} 2.Getters 对state数据进行过滤或直接返回 2.1在 Vue 组件中获得Getters数据1234567891011//storeconst getters = { travelsList: state => state.travelsList, travelListIndex: state => state.travelsList.slice(0,4)}//在view中直接获取data () { return { travelListIndex: this.$store.getters.travelListIndex }}, 2.2mapGetters 辅助函数12345678910computed: mapGetters([ // 映射 this.travelListIndex 为 this.$store.state.travelListIndex 'travelListIndex'])//或对象展开运算符computed: { ...mapGetters({ 'travelListIndex' })} 3.Mutations 要更改 Vuex 的 store 中的数据，唯一方法是提交 mutation。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行数据更改的地方。 1234567891011const mutations = { //使用常量替代 Mutation 事件类型 [types.GET_TRAVELS_LIST](state, res) { if(state.searchKey.page <= 1) { state.travelsList = res.data } else { state.travelsList = state.travelsList.concat(res.data) } }, ...} 当我们在这改变数据时，其它引用此state数据的 Vue 组件也会自动得到更新。 4.Actions 用户的一些行为，来提交到mutations改变数据。可在这进行异步操作。 1234567891011121314151617181920const actions = { //es6的参数解构 getTravelsList({ commit }) { if(state.scroll) { commit(types.GET_TRAVELS_PAGE_NUM) commit(types.COM_LOADING_STATUS, true), commit(types.GET_TRAVELS_SCORLL_STATUS, false) api.TravelsList() .then(res => { console.log(res) commit(types.COM_LOADING_STATUS, false), commit(types.GET_TRAVELS_SCORLL_STATUS, true) commit(types.GET_TRAVELS_LIST, res) }) } }, joinTravel({ commit }, id) { ... }} 4.1分发 Action12345created() { if (this.travelListIndex.length == 0) { this.$store.dispatch('getTravelsList') }}, 4.2mapActions 辅助函数12345methods: { ...mapActions([ 'getTravelsList' // 映射 this.getTravelsList() 为 this.$store.dispatch('getTravelsList') ]),} 5.Modules 当应用变得很大时，store 对象会变得臃肿不堪。为了解决这个问题，Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters 12345678910111213141516171819const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... }}const moduleB = { state: { ... }, mutations: { ... }, actions: { ... }}const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB }})store.state.a // -> moduleA 的状态store.state.b // -> moduleB 的状态 6.项目实践 进阶vue全家桶 DIY一个自己的音乐播放器","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"vuex","slug":"vuex","permalink":"http://yoursite.com/tags/vuex/"}]},{"title":"读书笔记-es5Array对象","date":"2017-03-30T04:24:01.000Z","path":"2017/03/30/读书笔记-es5Array对象/","text":"1.创建 Array 对象的语法：123new Array();new Array(size);new Array(element0, element1, ..., elementn) 2.属性 属性 描述 constructor 返回对创建此对象的数组函数的引用 length 设置或返回数组中元素的数目 prototype 允许向对象添加属性和方法 3.常用方法 方法 描述 concat() 连接两个或更多的数组，并返回结果 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔 pop() 删除并返回数组的最后一个元素 push() 向数组的末尾添加一个或更多元素，并返回新的长度 reverse() 颠倒数组中元素的顺序 shift() 删除并返回数组的第一个元素，会修改原数组 unshift() 向数组的开头添加一个或更多元素，并返回新的长度 slice() 从某个已有的数组返回选定的元素，不修改原数组 sort() 对数组的元素进行排序 splice() 删除元素，并向数组添加新元素，返回删除的元素，会修改原数组 valueOf() 返回某个字符串对象的原始值 4.循环 方法 描述 entries() 返回一个数组的迭代对象，该对象包含数组的键值对 (key/value) every() 使用指定函数检测数组中的所有元素是否都符合指定条件（通过函数提供）。如果数组中检测到有一个元素不满足，则返回 false ，且剩余的元素不会再进行检测，如果所有元素都满足条件，则返回 true，不会改变原始数组 filter() 检查指定数组中符合条件的所有元素，并返回符合条件所有元素的数组(新数组)，不会改变原始数组 find() 返回通过测试（函数内判断）的数组的第一个元素的值。当数组中的元素在测试条件时返回 true 时，返回符合条件的元素，之后的值不会再调用执行函数，如果没有符合条件的元素返回 undefined ，不会改变原始数组 findIndex() 返回传入一个测试条件（函数）符合条件的数组第一个元素位置。当数组中的元素在测试条件时返回 true 时，返回符合条件的元素的索引位置，之后的值不会再调用执行函数，如果没有符合条件的元素返回 -1 ，不会改变原始数组 forEach() 对数组的每个元素执行一次提供的函数，但总是返回undefined map() 数组中的每个元素都调用一次提供的函数后返回处理过的结果。返回值是一个新的数组，不会改变原始数组 4.栗子123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475//concat()let a = [1,2,3]a.concat(4,5) //[1,2,3,4,5] //join()let a = [1,2,3]a.join() //1,2,3 //shift()let a = [1,2,3,4]a.shift() //1a //[2,3,4] //unshift()let a = [1,2,3,4]a.unshift(6) //5a //[6,1,2,3,4] //slice()let a = [1,2,3]a.slice(1) //[2,3] let a = [1,2,3]a.slice(1,2) //[2] //splice()let a = [1,2,3,4,5]a.splice(1,1) //[2] let a = [1,2,3,4,5]a.splice(1,1,'hzzly') //[2]a //[1, "hzzly", 3, 4, 5] //entries()const fruits = ["Banana", "Orange", "Apple", "Mango"]fruits.entries()//[0, "Banana"]//[1, "Orange"]//[2, "Apple"]//[3, "Mango"] //every()const ages = [32, 33, 16, 40]ages.every((val, index) => val >= 18) //false //filterconst ages = [32, 33, 16, 40]ages.filter((val, index) => val >= 18) //[32, 33, 40]ages.filter((val, index) => val >= 18).length //3 //find()const ages = [32, 33, 16, 40]ages.find((val, index) => val >= 18) //32 //findIndex()const ages = [32, 33, 16, 40]ages.findIndex((val, index) => val >= 18) //0ages.findIndex((val, index) => val === 16) //2ages.findIndex((val, index) => val > 40) //-1 //forEach()const ages = [32, 33, 16, 40]const arr = ages.forEach((val, index) => { console.log(val) //可遍历到所有数组元素 return val + 10})//arr: 总是返回undefined //mapconst ages = [32, 33, 16, 40]const arr = ages.map((val, index) => { console.log(val) //可遍历到所有数组元素 return val + 10})// arr: [42, 43, 26, 50]","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es5","slug":"es5","permalink":"http://yoursite.com/tags/es5/"}]},{"title":"读书笔记-es5String对象","date":"2017-03-29T05:48:14.000Z","path":"2017/03/29/读书笔记-es5String对象/","text":"1.创建 String 对象的语法：12new String(s);String(s); 2.属性 属性 描述 constructor 对创建该对象的函数的引用 length 字符串的长度 prototype 允许向对象添加属性和方法 3.常用方法 方法 描述 charAt() 返回在指定位置的字符 concat() 连接字符串 indexOf() 检索字符串 lastIndexOf() 从后向前搜索字符串 match() 找到一个或多个正则表达式的匹配 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分 split() 把字符串分割为字符串数组 toLowerCase() 把字符串转换为小写 toUpperCase() 把字符串转换为大写 toString() 返回字符串 valueOf() 返回某个字符串对象的原始值 4.栗子123456789101112131415161718192021222324//charAt()let str="Hello world!"str.charAt(1) //e //concat()let str1="Hello "let str2="world!"str1.concat(str2) //Hello world! //indexOf()let str="Hello world!"str.indexOf("Hello") //0str.indexOf("World") //-1 (没有就返回-1)str.indexOf("world") //6 //slice()let str="Hello happy world!"str.slice(6) //happy world! //split()let str="How are you doing today?"str.split(" ") //["How", "are", "you", "doing", "today?"]str.split("") //["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", " ", "t", "o", "d", "a", "y", "?"]str.split(" ",3) //["How", "are", "you"]","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"es5","slug":"es5","permalink":"http://yoursite.com/tags/es5/"}]},{"title":"Express与MongoDB的缠绵","date":"2017-03-25T11:00:36.000Z","path":"2017/03/25/Express与MongoDB的缠绵/","text":"前奏Express 是什么？ Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。 全局安装express脚手架 1$ npm install express-generator -g 创建express项目 1234$ express myapp$ cd myapp$ npm install$ DEBUG=myapp npm start MongoDB与Mongoose？ MongoDB是一个对象数据库，是用来存储数据的；存储的数据格式为JSON。 Mongoose是封装了MongoDB操作(增删改查等)的一个对象模型库,是用来操作这些数据的。 安装MongoDB：https://www.mongodb.com/download-center?jmp=nav 安装Mongoose： 1$ npm install mongoose --save 一、连接MongoDB 在项目根目录下新建/lib/mongo.js 123var mongoose = require("mongoose");var db = mongoose.connect('mongodb://localhost:27017/myblog');module.exports = db 要连接的数据库为myblog 二、Schema 一种以文件形式存储的数据库模型骨架，无法直接通往数据库端，不具备对数据库的操作能力，仅仅只是数据库模型在程序片段中的一种表现，可以说是数据属性模型(传统意义的表结构)，又或着是“集合”的模型骨架 新建一个用户Schema 在项目根目录下新建/models/users.js 12345678910111213141516var mongoose = require("mongoose");var db = require('../lib/mongo');//一个用户模型var UserSchema = new mongoose.Schema({ username : { type:String }, password : {type: String}, avatar : {type: String}, age : { type:Number, default:0 }, description : { type: String}, email : { type: String }, github : { type: String }, time : { type:Date, default:Date.now }});//创建Modelvar UserModel = db.model("user", UserSchema );module.exports = UserModel user：数据库中的集合名称,当我们对其添加数据时如果user已经存在，则会保存到其目录下，如果不存在，则会创建user集合，然后在保存数据。 拥有了Model，我们也就拥有了操作数据库的金钥匙，就可以使用Model来进行增删改查的具体操作。 Entity Entity–由Model创建的实体，使用save方法保存数据，Model和Entity都有能影响数据库的操作，但Model比Entity更具操作性。所以此项目主要用的Model。 12345678910111213var UserEntity = new UserModel({ name : "hzzly", age : 21, email: "hjingren@aliyun.com", github: 'https://github.com/hzzly'});UserEntity.save(function(error,doc){ if(error){ console.log("error :" + error); }else{ console.log(doc); }}); 三、封装数据库的CURD 在lib文件下新建api.js 采用Promise封装对数据库的操作，避免回调地狱，使得代码能够更好的被读懂和维护。 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879var UserModel = require('../models/users');module.exports = { /** * 添加数据 * @param {[type]} data 需要保存的数据对象 */ save(data) { return new Promise((resolve, reject) => { //model.create(保存的对象,callback) UserModel.create(data, (error, doc) => { if(error){ reject(error) }else{ resolve(doc) } }) }) }, find(data={}, fields=null, options={}) { return new Promise((resolve, reject) => { //model.find(需要查找的对象(如果为空，则查找到所有数据), 属性过滤对象[可选参数], options[可选参数], callback) UserModel.find(data, fields, options, (error, doc) => { if(error){ reject(error) }else{ resolve(doc) } }) }) }, findOne(data) { return new Promise((resolve, reject) => { //model.findOne(需要查找的对象,callback) UserModel.findOne(data, (error, doc) => { if(error){ reject(error) }else{ resolve(doc) } }) }) }, findById(data) { return new Promise((resolve, reject) => { //model.findById(需要查找的id对象 ,callback) UserModel.findById(data, (error, doc) => { if(error){ reject(error) }else{ resolve(doc) } }) }) }, update(conditions, update) { return new Promise((resolve, reject) => { //model.update(查询条件,更新对象,callback) UserModel.update(conditions, update, (error, doc) => { if(error){ reject(error) }else{ resolve(doc) } }) }) }, remove(conditions) { return new Promise((resolve, reject) => { //model.update(查询条件,callback) UserModel.remove(conditions, (error, doc) => { if(error){ reject(error) }else{ resolve(doc) } }) }) }} 四、使用 在/routers/index.js中使用 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849var api = require('../lib/api');router.post('/login', function(req, res, next) { var user = { username : req.body.username, password: req.body.password }; api.findOne(user) .then(result => { console.log(result) })})router.post('/sign_up', function(req, res, next) { var user = { username : req.body.username, password: req.body.password, email: req.body.email }; api.save(user) .then(result => { console.log(result) })})router.get('/user_list', function(req, res, next) { //返回所有用户 api.find({}) .then(result => { console.log(result) }) //返回只包含一个键值name、age的所有记录 api.find({},{name:1, age:1, _id:0}) .then(result => { console.log(result) }) //返回所有age大于18的数据 api.find({"age":{"$gt":18}}) .then(result => { console.log(result) }) //返回20条数据 api.find({},null,{limit:20}) .then(result => { console.log(result) }) //查询所有数据，并按照age降序顺序返回数据 api.find({},null,{sort:{age:-1}}) //1是升序，-1是降序 .then(result => { console.log(result) })}) 项目Github地址： https://github.com/hzzly/express-mongodb如果对你有帮助，欢迎star 文章来源hzzly博客技术分享","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"node","slug":"node","permalink":"http://yoursite.com/tags/node/"}]},{"title":"浅谈Promise","date":"2017-03-25T07:29:12.000Z","path":"2017/03/25/浅谈Promise/","text":"说说promise Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。 所谓Promise，简单说就是一个容器(对象)，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 接触过promise的的都知道它的应用场景和用途，Promise可以用来避免异步操作函数里的嵌套回调（callback hell）问题，因为解决异步最直接的方法是回调嵌套，将后一个的操作放在前一个操作的异步回调里，但如果操作多了，就会有很多层的嵌套(回调地狱)。 12345678910$.ajax(url1, function(data1){ // do something... $.ajax(url2, function(data2){ // do something... $.ajax(url3, function(data3){ // do something... done(data3); // 返回数据 }) });}); Promise学术点的描述： promise代表一个异步操作的执行返回状态，这个执行返回状态在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值：异步方法会返回一个包含了原返回状态的 promise 对象来替代原返回状态。 Promise的表现如果使用回调方法处理多个操作的异步场景，判断某个操作成功或失败的控制在于声明的匿名函数里面，使用Promise对象则可以重新定义异步执行的状态和控制逻辑。 promise的最重要的特点就是它把我们处理任何函数调用的成功或者失败的方式规范成了可预测的形式，特别是如果这个调用实际上的异步的。 Promise中有几个状态： pending: 初始状态。 非 fulfilled 或 rejected。 resolved: 成功的操作。也有的成为fulfilled 。 rejected: 失败的操作。 状态转换关系为： pending->resolved(fulfilled)，pending->rejected。 Promise对象有以下两个特点: 对象的状态不受外界影响，Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败） 一旦状态改变，就不会再变，任何时候都可以得到这个结果。 用法说了这么多，直接上代码。 123456789101112131415var promise = new Promise((resolve, reject) => { // do somthing, maybe async if (success){ return resolve(res); } else { return reject(err); }}); promise.then(res => { // do something... e.g console.log(res);}, err => { // deal the err.}) 或封装成方法 1234567891011121314151617function fetch(data) { return new Promise((resolve, reject) => { // do somthing, maybe async if (success){ resolve(res); } else { reject(err); } })} fetch(data) .then(res => { console.log(res) }, err => { // deal the err. }) 异步嵌套回调123456789101112131415161718192021222324252627function loadAsync1(){ return new Promise((resolve, reject) => { //异步操作 setTimeout(() => { console.log('异步任务1'); resolve('异步任务1传过来的值'); }, 2000); }); }function loadAsync2(data1){ return new Promise((resolve, reject) => { //异步操作 setTimeout(() => { console.log('异步任务2'); resolve('异步任务2传过来的值'); }, 2000); }); }function loadAsync3(data2){ return new Promise((resolve, reject) => { //异步操作 setTimeout(() => { console.log('异步任务3'); resolve('异步任务3传过来的值'); }, 2000); }); } 有返回值 12345678loadAsync1() .then(data1 => { return loadAsync2(data1) }) .then(data2 => { return loadAsync3(data2) }) .then(okFn, failFn) 没有返回值 12345678loadAsync1() .then(data1 => { loadAsync2(data1) }) .then(data2 =>{ loadAsync3(data2) }) .then(res => console.log(res)) 输出的值为： 异步任务1异步任务1传过来的值异步任务2异步任务2传过来的值异步任务3异步任务3传过来的值 promise.all方法 Promise.all 可以接收一个元素为 Promise 对象的数组作为参数，当这个数组里面所有的 Promise 对象都变为 resolve 时，该方法才会返回。 12345678910111213141516var p1 = new Promise((resolve) => { setTimeout(() => { resolve("第一个promise"); }, 3000);}); var p2 = new Promise((resolve) => { setTimeout(() => { resolve("第二个promise"); }, 1000);}); Promise.all([p1, p2]) .then((result) => { console.log(result); // ["第一个promise", "第二个promise"] }); 上面的代码中，all接收一个数组作为参数，p1,p2是并行执行的，等两个都执行完了，才会进入到then，all会把所有的结果放到一个数组中返回，所以我们打印出我们的结果为一个数组。 值得注意的是，虽然p2的执行顺序比p1快，但是all会按照参数里面的数组顺序来返回结果。all的使用场景类似于，玩游戏的时候，需要提前将游戏需要的资源提前准备好，才进行页面的初始化。 promise.race方法 Promise.race 可以接收一个元素为 Promise 对象的数组作为参数，这个数组里面所有的 Promise 对象进行竞速，完成一个即可。 12345678910111213141516171819202122var p1 = new Promise((resolve) => { setTimeout(() => { console.log('异步任务1执行完成'); resolve("第一个promise"); }, 3000);}); var p2 = new Promise((resolve) => { setTimeout(() => { console.log('异步任务2执行完成'); resolve("第二个promise"); }, 1000);}); Promise.race([p1, p2]) .then((result) => { console.log(result); });//异步任务2执行完成//第二个promise//异步任务1执行完成 在then里面的回调开始执行时，p1 并没有停止，仍旧在执行。于是再过2秒后，输出了他们结束的标志。 这个race有什么用呢？使用场景还是很多的，比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，代码如下： 123456789101112131415161718192021222324252627282930/请求某个图片资源function requestImg(){ var p = new Promise(function(resolve, reject){ var img = new Image(); img.onload = function(){ resolve(img); } img.src = 'xxxxxx'; }); return p;}//延时函数，用于给请求计时function timeout(){ var p = new Promise(function(resolve, reject){ setTimeout(function(){ reject('图片请求超时'); }, 5000); }); return p;}Promise .race([requestImg(), timeout()]) .then(function(results){ console.log(results); }) .catch(function(err){ console.log(err); }); requestImg函数会异步请求一张图片，我把地址写为”xxxxxx”，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。 一道常见面试题1234567891011121314151617setTimeout(function() { console.log(1)}, 0); new Promise(function executor(resolve) { console.log(2); for( var i=0 ; i<10000 ; i++ ) { i == 9999 && resolve(); } console.log(3);}).then(function() { console.log(4);}); console.log(5);“2 3 5 4 1” 情景传入一个token，根据这个token请求一次网络，然后获取用户ID，将获取的用户ID访问数据库，获取用户信息 12345678910111213141516171819202122232425262728293031323334353637var request = function (token) { return new Promise((resolve, reject)=> { setTimeout(()=> { token ? resolve(2) : reject('token error'); },1000) });}; var find = function (id) { return new Promise((resolve, reject)=> { setTimeout(()=> { id ? resolve(id + '-info') : reject('id error'); },1000) });}; request('token') .then(function (id) { return find(id); }) .then(function (info) { console.log( info); }); co(function *() { var id = yield request('token'); var info = yield find(id); console.log(id, info);}); (async function () { var id = await request('token'); var info = await find(id); console.log(id, info);})(); 之后会有express操作mongondb的基于Promise的封装，敬请期待！","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"promise","slug":"promise","permalink":"http://yoursite.com/tags/promise/"}]},{"title":"移动端touch事件","date":"2017-03-22T14:08:21.000Z","path":"2017/03/22/移动端touch事件/","text":"4个touch事件touchstart 事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove 事件：当手指在屏幕上滑动的时候连续地触发。调用preventDefault()事件可以阻止滚动。touchend 事件：当手指从屏幕上离开的时候触发。touchcancel 事件：触摸结束的时候触发 触摸事件：touches：当前位于屏幕上的所有手指的列表。targetTouches：位于当前DOM元素上手指的列表。changedTouches：涉及当前事件手指的列表。 Touch对象属性每个Touch对象包含的属性如下： clientX：触摸目标在视口中的x坐标。clientY：触摸目标在视口中的y坐标。identifier：标识触摸的唯一ID。pageX：触摸目标在页面中的x坐标。pageY：触摸目标在页面中的y坐标。screenX：触摸目标在屏幕中的x坐标。screenY：触摸目标在屏幕中的y坐标。target：触摸的DOM节点目标。 12345678910111213141516171819document.addEventListener('touchstart',touch,false);document.addEventListener('touchmove',touch,false);document.addEventListener('touchend',touch,false); function touch (event){ var event = event || window.event; var oInp = document.getElementById("inp"); switch(event.type){ case "touchstart": oInp.innerHTML =`Touch started ( ${event.touches[0].clientX} , ${event.touches[0].clientY} )`; break; case "touchend": oInp.innerHTML =`<br>Touch end ( ${event.changedTouches[0].clientX} , ${event.changedTouches[0].clientY} )`; break; case "touchmove": event.preventDefault(); oInp.innerHTML =`<br>Touch moved ( ${event.touches[0].clientX} , ${event.touches[0].clientY} )`; break; }} 事件(包括鼠标事件)发生的顺序如下：(1) touchstart(2) mouseover(3) mousemove(一次)(4) mousedown(5) mouseup(6) click(7) touchend","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"h5","slug":"h5","permalink":"http://yoursite.com/tags/h5/"}]},{"title":"一个Vue+Canvas的酷炫后台管理","date":"2017-03-21T09:10:38.000Z","path":"2017/03/21/一个Vue-Canvas的酷炫后台管理/","text":"又一个Vue+Cnavas酷炫的后台管理，依然前后端分离（用PC打开，还没适配移动端）。 项目地址： https://github.com/hzzly/canvas-vuedemo地址： http://hjingren.cn/curriculum-design/账号：hzzly 密码：123456欢迎大家的star啦~ 技术栈前台: vue-cli vue vue-router webpack canvas ajax 后台: wamp PHP(ThinkPHP) mysql 功能说明 登录 用户登录 管理员登录 注册 用户注册 Canvas 流星滑过 星星闪闪 后台折线 折线跟着鼠标滑动 Vue 弹出框组件 路由切换动画 通过Ajax调用后台接口 留言板(时间轴) 添加房屋信息 出租 求租 出售 求购 个人信息修改 密码修改 …… 1.登录注册模块 2.后台管理页面 3.留言板(时间轴特效) 目录结构12345678910111213141516171819202122232425|——canvas-vue/| |——build/| |——confg/| |——node_modules/| |——src/| | |——assets/ //静态文件| | |——components/ //页面组件| | | |——Menu.vue //登录注册加载页面| | | |——Home.vue //后台首页| | | |——Login.vue //登录页面| | | |——Regist.vue //注册页面| | | |——Navbar.vue //我的发布| | | |——Messageboard.vue //留言板页面| | | |——... //等等| | |——router/ | | | |——index.js //页面路由| | |——App.vue //父组件| | |——main.js //入口文件| |——static/ | |——.babelrc| |——.editorconfig| |——.gitgnore| |——index.html| |——package.json| |——README.md 技术点 登录注册切换动画–vue的transition转换动画 123456789101112131415<template> <transition name="fade-out"> ... </transition></template><style>.fade-out-enter-active, .fade-out-leave-active { transition: all .5s}.fade-out-enter, .fade-out-leave-active { opacity: 0; transform: translateX(-400px);}</style> 登录注册星星与流星–canvas 123456789101112131415161718192021222324252627282930313233343536373839404142let canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), width = window.innerWidth, height = window.innerHeight, //实例化月亮和星星。流星是随机时间生成，所以只初始化数组 moon = new Moon(ctx, width, height), stars = new Stars(ctx, width, height, 200), meteors = [], count = 0 canvas.width = width; canvas.height = height; const meteorGenerator = ()=> { //x位置偏移，以免经过月亮 let x = Math.random() * width + 800 meteors.push(new Meteor(ctx, x, height)) //每隔随机时间，生成新流星 setTimeout(()=> { meteorGenerator() }, Math.random() * 2000)} const frame = ()=>{ count++ count % 10 == 0 && stars.blink() moon.draw() stars.draw() meteors.forEach((meteor, index, arr)=> { //如果流星离开视野之内，销毁流星实例，回收内存 if (meteor.flow()) { meteor.draw() } else { arr.splice(index, 1) } }) requestAnimationFrame(frame)}meteorGenerator()frame() 总结这个项目还没有完成，后期将不定期更新，敬请期待。。 如果觉得还行，欢迎star项目地址： https://github.com/hzzly/canvas-vue项目后台(PHP)地址： https://github.com/hzzly/canvas-vue-backstage 好了，溜了溜了。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"}]},{"title":"移动端屏幕适配的解决","date":"2017-03-15T14:01:18.000Z","path":"2017/03/15/移动端屏幕适配的解决/","text":"随着手机硬件配置的飞速增长、屏幕尺寸的越来越大和网络带宽的逐渐提升，越来越多的PC业务和服务在向移动端转移。然而在这移动端的时代，为了处理各终端屏幕的适配，是否乱了手脚呢？ 虽然移动端的页面与PC的页面相比简单了不少，但让我们头痛的事情还是要想尽办法让页面能适配众多不同的终端设备。在前几个外包项目中，我做的主要都是移动微信端的。期间也遇到了不同屏幕大小的适配问题，所以今天特来分享一下我的解决方法。 项目地址： https://github.com/hzzly/xyy-vuedemo地址： http://hjingren.cn/xyy-vue/欢迎大家的star啦~ 一、meta标签 meta之viewport，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大。在开发移动端页面，我们需要在html中设置meta标签如下： 1<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 二、手淘的flexible flexible是一个制作H5适配的开源库，需要在html中引入，可以直接使用阿里CDN： 1<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> 执行这个JS后，会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说1、2或者3，同时会给html加上对应的font-size的值，比如说37.5px。 三、放弃px拥抱rem 用px写的是绝对单位，这种方法肯定不行。让我们来拥抱rem吧！！！ 我们知道 em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人，再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 的。比如默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem） 如果对rem还有不懂的可以先看看这个CSS3的REM设置字体大小 刚刚我们引入了手淘的flexible，并给html加了font-size，如此一来，页面中的元素，都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算，从而实现屏幕的适配效果。 四、CSS处理器(SASS) 使用Sass的同学，可以使用Sass的函数、混合宏这些功能来实现： 123@function px2rem($px, $base-font-size: 75px) { @return ($px / $base-font-size) * 1rem;} 这里的这个参数$base-font-size: 75px，可以通过(psd文件的宽度/10)来计算。假如psd宽750，则$base-font-size为75px。 使用： psd中量多少就写多少 12345//比如量取box宽为190，高为190，则代码：.box { width: px2rem(190px); height: px2rem(190px);} 没用过的可以用sublime的cssrem的插件实现。 五、图示 六、图示代码 因为这是商业代码，所以就只贴了一部分代码，忘见谅，谢谢最下面有我开源项目的代码，可以参考，如果对你有帮助的话，给个star。 123456789101112131415161718192021222324252627//index.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Demo</title> <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> <link rel="stylesheet" href="index.css"></head><body> <div class="home"> <div class="home-list"> <div class="list-item"> <a href="/"> <div class="item-l"> <img src="../assets/images/check.png" alt=""> <span>待审核</span> </div> <div class="item-r isnew">6</div> </a> </div> ... </div> </div></body></html> 1234567891011121314151617181920212223242526272829303132333435363738394041//index.scss@function px2rem($px, $base-font-size: 75px) { @return ($px / $base-font-size) * 1rem;}.home-list { padding-bottom: px2rem(45px); .list-item { box-sizing: border-box; width: px2rem(690px); height: px2rem(190px); line-height: px2rem(190px); margin: px2rem(45px) auto 0; padding: 0 px2rem(50px) 0 px2rem(30px); background: #fff; border-radius: px2rem(20px); a { display: flex; justify-content: space-between; font-size: px2rem(40px); img { width: px2rem(90px); height: px2rem(65px); vertical-align: middle; margin-right: px2rem(30px); } span { color: #000; vertical-align: middle; } .item-r { color: #666666; &.isnew { color: #ff5500; } } &:link,&:visited,&:hover,&:active { text-decoration: none; } } }} 七、开源示例如果觉得还行，欢迎star项目地址： https://github.com/hzzly/xyy-vue 好了，溜了溜了。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"h5","slug":"h5","permalink":"http://yoursite.com/tags/h5/"}]},{"title":"移动端1px的解决方法","date":"2017-03-13T13:22:43.000Z","path":"2017/03/13/移动端1px的解决方法/","text":"在上个项目中，移动端1px问题被困扰了好久，设置1px边框，实际显示2px。以下是我在项目中的解决方法，才疏学浅，轻喷。 关于什么是移动端1像素边框问题，先上两张图，大家就明白了。 假的1px: 真的1px: 原来Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的retina屏下会显示成2px。 解决方案 transform: scaleY() 12345678910111213141516171819202122232425262728293031323334<div class="border-1px"></div> <style type="text/scss">.border-1px { position: relative; &:after{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid #000; content: ''; }} @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) { .border-1px{ &::after{ -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } }} @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) { .border-1px{ &::after{ -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } }}</style> 到这已经成功解决了1px问题。 好了，吃饭去喽，溜了溜了。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"h5","slug":"h5","permalink":"http://yoursite.com/tags/h5/"}]},{"title":"axios在vue中的简单配置与使用","date":"2017-03-12T13:34:08.000Z","path":"2017/03/12/axios在vue中的简单配置与使用/","text":"尤雨溪之前在微博发布消息，不再继续维护vue-resource，并推荐大家开始使用 axios 。 一、axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 二、引入方式：npm: 123$ npm install axios//淘宝源$ cnpm install axios bower: 1$ bower install axios cdn: 1<script src="https://unpkg.com/axios/dist/axios.min.js"></script> **三、vue中axios的配置 ** 之前那个开源项目一开始就打算用axios，在网上找了好多文章与攻略，发现好多都不太详细，所以打算自己动手配置一个，(不要怂，撸起袖子就是干)。 我的配置： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import axios from 'axios'import qs from 'qs' import * as _ from '../util/tool' axios.defaults.timeout = 5000; //响应时间axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //配置请求头axios.defaults.baseURL = '你的接口地址'; //配置接口地址 //POST传参序列化(添加请求拦截器)axios.interceptors.request.use((config) => { //在发送请求之前做某件事 if(config.method === 'post'){ config.data = qs.stringify(config.data); } return config;},(error) =>{ _.toast("错误的传参", 'fail'); return Promise.reject(error);}); //返回状态判断(添加响应拦截器)axios.interceptors.response.use((res) =>{ //对响应数据做些事 if(!res.data.success){ // _.toast(res.data.msg); return Promise.reject(res); } return res;}, (error) => { _.toast("网络异常", 'fail'); return Promise.reject(error);}); //返回一个Promise(发送post请求)export function fetchPost(url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(response => { resolve(response.data); }, err => { reject(err); }) .catch((error) => { reject(error) }) })}////返回一个Promise(发送get请求)export function fetchGet(url, param) { return new Promise((resolve, reject) => { axios.get(url, {params: param}) .then(response => { resolve(response.data) }, err => { reject(err) }) .catch((error) => { reject(error) }) })} 四、vue中使用配置好的axios123456789101112131415161718192021export default { /** * 用户登录 */ Login(params) { return fetchPost('/users/api/userLogin', params) }, /** * 用户注册 */ Regist(params) { return fetchPost('/users/api/userRegist', params) }, /** * 发送注册验证码 */ RegistVerifiCode(tellphone) { return fetchPost('/users/api/registVerifiCode', {tellphone: tellphone}) }, ......} 如果觉得还行，欢迎star项目地址： https://github.com/hzzly/xyy-vuedemo地址： http://hjingren.cn/xyy-vue/ 好了，溜了溜了。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"},{"name":"axios","slug":"axios","permalink":"http://yoursite.com/tags/axios/"}]},{"title":"开源的收获","date":"2017-03-09T15:57:05.000Z","path":"2017/03/09/开源的收获/","text":"第一次在github上发布了开源《Qu约》后，不到两天，被人star了137次，fork了25次，这个成绩大大出乎了我自己的意料！ Github地址： https://github.com/hzzly/xyy-vuedemo地址： http://hjingren.cn/xyy-vue/欢迎大家的star啦~ 同时也让我收获到了许多： github首次破百 掘金的阅读量与喜欢量同时给他人带来了不一样的价值 segmentfault的阅读量、收藏量与声望值，把其中的价值传给他人 收获了一个offer 给我以后就业增加了一份保证 结交了好多同行开发者 分享与开源，让技术生生不息。借用一本书de名字，Just for fun。开源是一种情怀，happy hacking！ 革命尚未成功，我们还需努力。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"}]},{"title":"进阶vue全家桶","date":"2017-03-08T01:47:54.000Z","path":"2017/03/08/进阶vue全家桶/","text":"有人说只会vue不会vuex还只是个切图仔，所以本项目将带领你进阶vue全家桶。前端结合Vue2.0全家桶(vue+vue-router+vuex+axios+es6+sass)以及后端Node,一个前后端分离的练手项目。本项目可以作为一个前端vue进阶项目，从前端flex布局到前端vue以及组件分离的使用，再到后端Node以及Leancloud的结合，是一个打通前后端流程的一个项目。欢迎大家前来star。如果有任何问题，可以给我留言，我们互相学习讨论，一起进步。注：本项目为开源项目，非本人同意不能用于商业应用。 预览地址： http://hzzly.net/xyy-vue/Github地址： https://github.com/hzzly/xyy-vue欢迎大家的star啦~ 功能说明 首页轮播图 首页热门活动 约跑步活动列表 约出行活动列表 个人中心 查看个人活动 学生认证(待开发) 学生信息修改 消息通知(后台接口待开发) 选择高校(待开发) 登录 注册 活动详情 活动报名 活动发布 时间选择组件 地址选择组件 文件上传 axios的封装 …… 公共组件 弹出文字组件 弹出框组件 loading组件 toast组件 时间选择器组件 地址选择器组件 …… 目录结构 123456789101112131415161718192021222324252627282930313233343536373839|——xyy-vue/| |——build/| |——confg/| |——node_modules/| |——src/| | |——assets/ //静态文件| | |——components/ //公共组件| | |——fetch/| | | |——api.js //axios封装与api| | |——pages/ //存放项目页面| | | |——Detail.vue //活动详情页面| | | |——Home.vue //首页| | | |——Login.vue //登录页面| | | |——Navbar.vue //我的发布| | | |——NotFound.vue //出错页面| | | |——Post.vue //发布活动页面| | | |——Regist.vue //注册页面| | | |——Set.vue //设置页面| | | |——Sport.vue //约跑步活动列表页面| | | |——Travel.vue //约出行活动列表页面| | | |——User.vue //个人中心页面| | | |——UserInfo.vue //个人详情页面| | | |——UserMsg.vue //消息列表页面| | |——router/ | | | |——index.js //页面路由| | |——util //公用方法| | |——vuex / //存放vuex代码| | | |——modules / //数据模块| | | |——store.js //vuex主入口| | | |——types.js //vuex的types文件| | |——App.vue //父组件| | |——main.js //入口文件| |——static/| |——.babelrc| |——.editorconfig| |——.gitgnore| |——index.html| |——package.json| |——README.md 主要难点1.各个组件数据的共享 传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。而且也会导致代码难以维护 解决方法：采用vuex进行状态管理，把所有事件和状态存储在store对象中，在组件中通过计算属性获得事件，因此就有了实时性。 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 每一个 Vuex 应用的核心就是 store（仓库）。”store” 基本上就是一个容器，它包含着应用中大部分的状态(state)。 Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化。 代码如下(以一个user module为例)： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566//vuex/modules/user.jsimport api from '../../fetch/api'import * as types from '../types' const state = { // 用户登录状态 loginStatus: JSON.parse(localStorage.getItem('loginStatus')) || false,} const actions = { /** * 用户登录 */ setUserInfo({ commit }, res) { localStorage.setItem('loginStatus', true) commit(types.SET_LOGIN_STATUS, true) }, /** * 退出登录 */ setSignOut({ commit }) { localStorage.removeItem('loginStatus') commit(types.SET_LOGIN_STATUS, false) },} const getters = { loginStatus: state => state.loginStatus} const mutations = { [types.SET_LOGIN_STATUS](state, status) { state.loginStatus = status } } export default { state, actions, getters, mutations} //User.vue<template> <div class="user"> <div v-if="!loginStatus"> ... </div> <div v-else> ... </div> </div></template> <script>import { mapGetters } from 'vuex'export default { computed: { ...mapGetters([ 'loginStatus' ]) }}</script> 2.时间选择组件(要可选择时间段) 规则： 默认值为：开始日期在后天，结束日期在第六天 今天以前不可选择 点击某个日子，则将最近的节点移动过 如果离两个节点一样，则将开始日期移动过去 两个节点也可选到1天里；显示为各一半 一开始打算在github上搜索一个然后直接拿来用，发现都是不符合我的设计，所以打算自己撸一个，(不要怂，撸起袖子就是干)。终于经过几个晚上的奋战写出来了(期间遇到了各种坑)。代码就不贴出来了 代码传送门 总结虽然只是做了个小小的个人开源项目，但是我感觉收获还是很大的，很多知识点掌握得更加的牢固，对 vue全家桶 的理解又更深了一些。这个项目还没有完成，后期将不定期更新，敬请期待。。 如果觉得还行，欢迎star项目地址： https://github.com/hzzly/xyy-vue 好了，溜了溜了。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"},{"name":"vuex","slug":"vuex","permalink":"http://yoursite.com/tags/vuex/"}]},{"title":"webpack工程化","date":"2017-03-07T12:01:48.000Z","path":"2017/03/07/webpack工程化/","text":"一、webpack是什么 webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules webpack 是一个模块打包工具，输入为包含依赖关系的模块集，输出为打包合并的前端静态资源。在上一节的前端工程化中，已经介绍过，webpack 是同时支持 AMD 和 CommonJs 的模块定义方式，不仅如此，webpack 可以将任何前端资源视为模块，如 css，图片，文本。 二、为什么要使用它在 webpack 出现之前，已经有了一些打包工具，如 Browserify、grunt、gulp… 这些打包工具工具功能单一，只能完成特定的任务，然而 web 前端工程是复杂的，一个 webapp 对于业务代码的要求可能有： 代码可以分块，实现按需加载 首屏加载时间要尽量减少 需要集成一些第三方库 webpack 的出现正式为了解决这些问题，在 webpack 中，提供了一下这些功能： 1.代码分块： webpack 有两种类型的模块依赖，一种是同步的，一种是异步的。在打包的过程中可以将代码输出为代码块（chunk），代码块可以实现按需加载。 异步加载的代码块通过分割点（spliting point）来确定。2.Loaders： Webpack 本身只会处理 Javascript，为了实现将其他资源也定义为模块，并转化为 Javascript， Webpack 定义 loaders , 不同的 loader 可以将对应的资源转化为 Javascript 模块。3.智能的模块解析： webpack 可以很容易将第三方库转化为模块集成到项目代码中，模块的依赖可以用表达式的方式（这在其他打包工具中是没有支持的），这种模块依赖叫做动态模块依赖。4.插件系统： webpack 的可定制化在于其插件系统，其本身的很多功能也是通过插件的方式实现，插件系统形成了 webpack 的生态，是的可以使用很多开源的第三方插件。 三、webpack 核心思想1.万物皆模块： 在 webpack 的世界中，除了 Javascript，其他任何资源都可以当做模块的方式引用。2.按需加载： webapp 的优化关键在于代码体积，当应用体积增大，实现代码的按需加载是毕需，这也是 webpack 出现的根本原因。3.可定制化： 任何一个工具都不可能解决所有问题，提供解决方案才是最可行的，webpack 基于可定制化的理念构建，通过插件系统，配置文件，可以实现大型项目的定制需求。 四、安装配置在此之前你应该已经安装了 node.js. 全局安装webapck或webpack-dev-server(开启一个本地服务) 12$ npm install webpack -g$ npm install webpack-dev-server -g 在项目中安装webpack和webpack-dev-server 12$ npm install webpack --save-dev$ npm install webpack-dev-server --save-dev webpack使用 1234567//name.jslet name = 'hzzly'export default name//index.jsimport name from './name'document.getElementById('app').textContent = `hello~${name}` 1.命令行的使用 1$ webpack src/index.js dist/bundle.js 语法：webpack 要打包的文件 打包输出的文件 2.配置文件的使用在项目目录下创建 webpack.config.js如下(简单的配置)： 12345678910111213141516171819202122232425262728var webpack = require('webpack')module.exports = { entry: './src/index.js', //入口 output: { path: './dist/', //输出路径 filename: 'bundle.js' //输出文件名 }, module: { loaders: [ { test: /\\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader', //处理.js或.jsx文件loader query: { presets: ['env'] } }, { test: /\\.css$/, loader: "style-loader!css-loader" //处理.css文件loader }, { test: /\\.(png|jpg)$/, loader: 'url-loader?limit=8192' //处理图片loader } ] }} 执行： 123$ webpack//或开启本地服务器并实时监听文件变化$ webpack-dev-server --inline --colors --hot Github地址： https://github.com/hzzly/webpack欢迎大家的star啦~ 好了，装了一大波，溜了溜了。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"}]},{"title":"前后端分离的尝试","date":"2017-03-06T02:21:49.000Z","path":"2017/03/06/前后端分离的尝试/","text":"首次尝试前后端分离是在一个外包项目中: 点匠科技 o2o的家装类 移动项目微信平台前端开发主要工作内容是将原有的android、ios 应用 配合后端工程师开发一套 微信产品,个人角色为 前端开发工程师 负责界面 html css vue 前后端数据联调等工作 项目地址(测试账号:15103585135 测试密码:123456) 这次的项目技术栈 vue vue-router vuex weui sass es6 ajax 通过这次项目，让我体会到了这种前后端分离的快感，所以特来分享一波。 如果你没有尝试过前后端分离的工作流程，那么可以先试想一下这样的流程改变： 把流程从 PM：“我要这个功能” 后端：“这个先找前端做个模板” 前端：“模板做完了” 后端：“我来对接一下，这里样式不对” 前端：“我改完了” 后端：“功能交付” PM：“春节要加这个活动” 后端：“这个先找前端改个模板” 前端：“模板做完了” 后端：“我来对接一下，这里样式不对” 前端：“我改完了” 后端：“功能交付” 变成 PM：“我要这个功能” 前端：“我要接口” 后端：“接口完成了” 前端：“我来对接一下，功能交付” PM：“春节要加这个活动” 前端：“需要增加接口” 后端：“接口完成了” 前端：“我来对接一下，功能交付” 由此可见，前后端分离的主要概念就是：后台只需提供API接口，前端调用AJAX实现数据呈现。 前后端分离的实现对技术人员尤其是前端人员的要求会上升一个层次，前端的工作不只是切页面写模板或是处理一些简单的js逻辑，前端需要处理服务器返回的各种数据格式，还需要掌握一系列的数据处理逻辑、MVVM思想和各种主流前端框架(React, Vue..)。 意义对于前后端分离的意义我们也可以看做是前端渲染的意义，我主要总结了下面四点： 1. 彻底解放前端 前端不再需要向后台提供模板或是后台在前端html中嵌入后台代码，前后端解耦，增加可读性。 2. 提高工作效率，分工更加明确 前后端分离的工作流程可以使前端只关注前端的事，后台只关心后台的活，两者开发可以同时进行，在后台还没有时间提供接口的时候，前端可以先将数据写死或者调用本地的json文件即可，页面的增加和路由的修改也不必再去麻烦后台，开发更加灵活。 3. 局部性能提升 通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有的资源，服务器也不再需要解析前端页面，在页面交互及用户体验上有所提升。 4. 降低维护成本 通过目前主流的前端MVVM框架，我们可以非常快速的定位及发现问题的所在，客户端的问题不再需要后台人员参与及调试，代码重构及可维护性增强。 面对快速发展的前端，我们应该去适应其带来的工作方式和流程的改变，目前的前后端分离的工作方式必然是今后的趋势所在，作为一个前端开发人员，我们应当承担这个普及前端新知识和改变现状的职责。 我的Github 好了，装了一大波，溜了溜了。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"}]},{"title":"前端入坑笔记–JavaScript类型检测","date":"2017-03-05T12:29:59.000Z","path":"2017/03/05/前端入坑笔记–JavaScript类型检测/","text":"JavaScript变量可以用来保存两种类型的值：基本类型值和引用类型值 5种基本数据类型：String Number Boolean Undefined Null 引用类型：Object Array Data RegExp Function Error Map … ES6引入了一种新的原始数据类型Symbol，表示独一无二的值 一、typeof typeof 用来判断各种数据类型,有两种写法：typeof xxx, typeof(xxx) 123456789101112131415161718var a = 'hzzly';var b = true;var c = 22;var d;var e = null;var o = new Object();var f = function () {} console.log( typeof a ); //stringconsole.log( typeof b ); //booleanconsole.log( typeof c ); //numberconsole.log( typeof d ); //undefinedconsole.log( typeof e ); //objectconsole.log( typeof o ); //objectconsole.log( typeof f ); //function console.log( typeof {} ); //objectconsole.log( typeof [] ); //object 这里面包含了js里面的五种数据类型 number string boolean undefined object和函数类型 function 看到这里你肯定会问了：我怎么去区分对象，数组和null呢? 接下来我们就用到另外两个利器：Object.prototype.toString.call instanceof/constructor 二、Object.prototype.toString.call1234567891011121314151617var gettype=Object.prototype.toString gettype.call('hzzly') 输出 [object String] gettype.call(22) 输出 [object Number] gettype.call(true) 输出 [object Boolean] gettype.call(undefined) 输出 [object Undefined] gettype.call(null) 输出 [object Null] gettype.call({}) 输出 [object Object] gettype.call([]) 输出 [object Array] gettype.call(function(){}) 输出 [object Function] 三、instanceof/constructor根据规定，所有引用类型的值都是Object的实例。因此，在检测一个引用类型值和Object 构造函数时，instanceof 操作符始终会返回true。当然，如果使用instanceof 操作符检测基本类型的值，则该操作符始终会返回false，因为基本类型不是对象。 123456789console.log([] instanceof Array); //trueconsole.log(/^$/ instanceof RegExp); //trueconsole.log([] instanceof Object); //true console.log([].constructor === Array); //trueconsole.log([].constructor === Object); //false 我们的constructor可以避免instanceof检测的时候,用Object也是true的问题console.log({}.constructor === Object); //true console.log(1 instanceof Number); //false 看到这里，刚才的问题我们解决了 检测数组，ECMAScript5新增了Array.isArray() 方法。这个方法的目的是最终确定某个值到底是不是数组，而不管它是在哪个全局执行环境中创建。这个方法的用法如下： 123if( Array.isArray(value) ){ //对数组执行某些操作} 四、题外话基本类型值与引用类型值具有如下特点： 基本类型值在内存中占据固定大小的空间，因此被保存在栈内存中 从一个变量向另一个变量复制基本类型的值，会创建这个值得一个副本 引用类型的值是对象，保存在堆内存中 包含引用类型值得变量实际上包含的并不是对象本身，而是一个指向该对象的指针 从一个变量向另一个变量复制引用类型的值，复制的其实是指针，因此两个变量最终都指向同一个对象 好了，遛了遛了。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"手把手用Node的socket.io撸一个简单聊天室","date":"2017-03-04T14:51:43.000Z","path":"2017/03/04/手把手用Node的socket.io撸一个简单聊天室/","text":"点击查看效果 Socket.IO用于浏览器与Node.js之间实现实时通信。 Socket.IO设计的目标是支持任何的浏览器，任何Mobile设备。 支持主流的PC浏览器 (IE,Safari,Chrome,Firefox,Opera等)， Mobile浏览器(iphone Safari/ipad Safari/Android WebKit/WebOS WebKit等)。 Socket.IO解决了实时的通信问题，并统一了服务端与客户端的编程方式。 启动了socket以后，就像建立了一条客户端与服务端的管道，两边可以互通有无。 一、初始化一个Express项目通过应用生成器工具 express 可以快速创建一个应用的骨架。 123456789101112// 全局安装express 脚手架$ npm install express-generator -g //在当前工作目录创建一个命名为 chat-node 的应用$ express -e chat-node //安装所有依赖$ cd chat-node $ npm install //启动这个应用（MacOS 或 Linux 平台）：$ npm start 然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了 二、安装Socket.IO这里使用 npm 安装到项目依赖中 1$ npm install socket.io --save 三、整合Socket.IO到项目中找到服务开启的www文件 根目录 > bin > www 1234567891011121314151617181920212223//在创建服务器(var server = http.createServer(app))之后添加如下代码 var io = require('socket.io')(server); // 在线用户var onlineUser = {};// 在线人数var onlineCount = 0; io.on('connection', (socket) => { // 监听新用户加入 console.log('a user connected'); socket.on('disconnect', () => { console.log('user disconnected'); }); //监听post数据加入 socket.on('post', function(say) { io.emit('post', say) //通过io的emit把数据发送到前台 });}); 通过传递server(HTTP服务器)来初始化socket.io的一个新实例，然后监听连接sockets的connection事件，并将其记录到控制台。 三、修改前台代码在 views 目录下新建一个index.html 12345678910111213141516171819202122232425<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>聊天室</title></head><body><div class="chat" id="chatApp" v-cloak> <ul class="room-list"> <li v-for="item in msgList"> <div class="msg-detail">{{item}}</div> </li> </ul> <div class="send-box"> <input type="text" placeholder="写点什么喃..." v-model="sendMsg"> <button type="button" @click="doSendMsg">发送</button> </div></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script><script src="/javascripts/index.js"></script></body></html> 我在里面引入了socket.io以及vue(更好的渲染数据) 四、编写业务代码 在 public > javascripts 下新建一个index.js 12345678910111213141516171819202122const socket = io(); //加载socket.io-client会暴露一个全局io并连接。 const vue = new Vue({ //实例化一个Vue实例 el: "#chatApp", data() { return { //数据驱动 sendMsg: '', msgList: [] } }, mounted() { socket.on('post', (say) => { //接收服务端的 post 命令 this.msgList.push(say) //添加到msgList中给前台渲染出来 }) }, methods: { doSendMsg() { //监听按钮发送的事件 socket.emit('post', this.sendMsg) //把要发送的数据emit到服务端 this.sendMsg = '' } }}) 五、在对应路由中打开index.html 在 routes > index.js 修改如下代码 1234/* GET home page. */router.get('/', function(req, res, next) { res.sendFile(path.join(__dirname, '../views', 'index.html'));}); 然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用de效果了 Github Demo欢迎star 好了，遛了遛了。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"},{"name":"node","slug":"node","permalink":"http://yoursite.com/tags/node/"}]},{"title":"Web的Flex弹性盒模型","date":"2017-03-03T01:24:26.000Z","path":"2017/03/03/Web的Flex弹性盒模型/","text":"一、Flex布局是什么？Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 123.box{ display: flex;} 行内元素也可以使用Flex布局。 123.box{ display: inline-flex;} 二、容器的属性 [ flex-direction ] [ flex-wrap ] [ flex-flow ] [ justify-content ] [ align-self ] [ align-items ] [ align-content ] [ order ] 点击查看实例 下方为简略图 好了，遛了遛了。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"}]},{"title":"博客正式上线","date":"2017-03-02T00:49:45.000Z","path":"2017/03/02/博客正式上线/","text":"折腾了一个晚上，终于把Github Page上的博客搭起来了，有点小激动。哈哈哈，蛋定蛋定。之前一直想弄一个博客来着，偶然间发现了这个基于Node的Hexo博客，还可以放到Github上，很方便。你也可以试一试 (:好了，不扯这么多了，此博客将记录我学习的笔记、知识，并将其中承载的价值传给他人。 整理知识，学习笔记 发布日报，杂文，所见所想 撰写发布技术博客（代码支持） 撰写发布学术论文 1234567891011class Refuel { constructor (refuel) { this.refuel = refuel } refuel () { alert(this.refuel) }}new Refuel('加油！！！'); 好了，遛了遛了。。。","tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/%E9%9A%8F%E7%AC%94/"}]}]