摘要：
介绍 策略模式的意义是定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换。此模式让算法的变化不会影响到使用算法的客户。 实现 举一个例子，比如我们做数据合法性校验，一般是通过swich来实现，或者通过if语句来实现，如果校验规则多了的话，那么代码的扩展性和维护性就很差了，而且进行单元测试就 阅读全文
摘要：
基本介绍 Math.sin(x) ：x 的正玄值。返回值在 -1.0 到 1.0 之间； Math.cos(x) ：x 的余弦值。返回的是 -1.0 到 1.0 之间的数； 其中函数中是x是指“弧度”而非角度。 弧度定义：两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆 阅读全文
摘要：
如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals。 这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包， 阅读全文
摘要：
方法一：异步加载第三方库 在我们的vue工程中新建如下路径：src/utils/index.js，在index.js中实现如下方法： export function loadScript(url) { let isLoaded = false; return new Promise((resolve 阅读全文
摘要：
快速创建 使用官方推荐的vue-cli创建项目如下： # 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create vanttest # 创建完成后，可以通过命令打开图形化界面 vue ui 下面记录下创建一个项目中需要选择的配置及相关说明。 创建 阅读全文
摘要：
Tapable源码解析图，如图所示： 一个webpack plugin由一下几个步骤组成： 一个JavaScript类函数。 在函数原型 (prototype)中定义一个注入compiler对象的apply方法。 apply函数中通过compiler插入指定的事件钩子,在钩子回调中拿到compila 阅读全文
摘要：
学习资料介绍 github地址：mcg-helper代码生成工具 什么是 FreeMarker? - FreeMarker 中文官方参考手册 视频学习地址： 第一节、视频教程内容介绍 探讨研发工作中典型的重复繁杂工作，可通过流程自动化实现代替的常见场景。第二节、mcg-helper初步认识教程 mc 阅读全文
摘要：
nvm是node版本管理工具 为了解决node各种版本存在不兼容现象 nvm是让你在同一台机器上安装和切换不同版本的node的工具 安装 nvm-windows 最新下载地址： https://github.com/coreybutler/nvm-windows/releases 可以看到这里又有四 阅读全文
摘要：
前言 如下图： AMD与CMD的主要区别： 1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible. 2. CMD 推崇依赖就近，AMD 推崇依赖 阅读全文
摘要：
Pointer Events API 是Hmtl5的事件规范之一，它主要目的是用来将鼠标（Mouse）、触摸（touch)和触控笔（pen）三种事件整合为统一的API。 Pointer Event Pointer指可以在屏幕上反馈一个指定坐标的输入设备。Pointer Event事件和Touch E 阅读全文
摘要：
mode 和 plugin 前边我们介绍 mode 时提过，mode 不同值会影响 webpack 构建配置，其中有一个就是会启用 DefinePlugin 来设置process.env.NODE_ENV 的值，方便代码中判断构建环境。 除此之外，development和 production两个不 阅读全文
摘要：
loader 基本上都是第三方类库，使用时需要安装，有一些 loader 还需要安装额外的类库，例如 less-loader 需要 less，babel-loader 需要 babel 等。 loader 匹配规则 loader的配置是放在 module 字段下,如下代码前面提到过： module. 阅读全文
摘要：
module webpack 的初衷是让 js 支持模块化管理，并且将前端中的各种资源都纳入到对应的模块管理中来，所以在 webpack 的设计中，最重要的部分就是管理模块和模块之间的关系。 在 webpack 支持的前端代码模块化中，我们可以使用类似 import * as m from './i 阅读全文
摘要：
webpack 本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码打包。 一切文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。 阅读全文
摘要：
一、什么是进制 在生活中，我们通常都是使用阿拉伯数字计数的，也就是10进制，以10为单位，遇10进一，所以是由0，1，2、3、4、5、6、7、8、9组成的；而在计算机中，计算机是无法识别10进制数的，它只能识别01代码，也就是二进制，由0、1两位数字组成，逢二进一。 那么什么是进制呢，进制就是进位制 阅读全文
摘要：
HTML元素属性分类 全局属性和局部属性 属性可以分为两类：全局属性和局部属性。 其中全部元素都能使用的通用属性称为全局属性。只能运用在某些特定元素的属性，称为局部属性，例如form的action属性、textarea的rows属性等。 全局属性可简单分为5种，如下： HTML4原有的全局属性acc 阅读全文
摘要：
为了能在HTML文档中正确显示某些特殊字符，就需要使用HTML实体（entity）。HTML实体就是对当前文档的编码方式不能包含的字符，提供一种转义表示。 HTML实体定义 1.名称方式 名称方式会以“&”开头，然后紧跟由英文字母组成的名称（下面格式中的name）,最后以分号结尾。注意，这种方式对大 阅读全文
摘要：
css单位我们常用的是px,也即是像素。随着网页开发自适应的要求，css3新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等。 em 做前端的应该对em不陌生，不是什么罕见的单位，是相对单位，参考物是父元素的font-size，具有继承的特点。如果字体大小是16px（浏览器的默认值 阅读全文
摘要：
babel介绍 babel总共分为3个阶段: 解析、转换和生成 babel本身不具有任何转换功能， 如果没有plugin,那么经过babel的代码和输入的是相同的。 babel插件分为两种 语法插件：在解析的过程中，能使babel能够解析更多的语法 转译插件: 在转换的过程中将代码输出。比如将箭头函 阅读全文
摘要：
前言 文章只记录理解以及容易遗忘的知识点。 词法作用域、块作用域 词法作用域 词法作用域：简单的说，词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域就是在你写代码时将变量和块作用域写在哪里来决定的，因此在词法分析器处理代码时会保持作用域不变（大部分情况是这样的）。 当然有一些欺骗词法作用域 阅读全文
摘要：
为什么需要构建工具？ 转换 ES6 语法 转换 JSX CSS 前缀补全/预处理器 压缩混淆 图片压缩 前端构建演变之路 ant + YUI Tool grunt gulp、fis3 webpack、rollup、parcel 为什么选择 webpack? 社区⽣态丰富 配置灵活和插件化扩展 官⽅方 阅读全文
摘要：
npm npm是Node.js的软件包管理器，其目标是自动化的依赖性和软件包管理。 这意味着，可以在package.json文件中为项目指定所有依赖项（软件包），当需要为其安装依赖项时，只要运行npm install就可以。 npx npx是执行Node软件包的工具，它从 npm5.2版本开始，就与 阅读全文
摘要：
一个 HTTP 请求过程示例图： 一个 HTTP 请求需要经历以上过程，接下来看一个具体的例子： 名词解释： Queueing: 在请求队列中的时间。 Stalled: 从TCP 连接建立完成，到真正可以传输数据之间的时间差，此时间包括代理协商时间。 Proxy negotiation: 与代理服务 阅读全文
摘要：
一：工程安装less、less-loader 配置版本如下： "devDependencies": { "less": "^3.0.4", "less-loader": "^5.0.0", /**其它配置*/ } 二：在main.js中引入vant的less文件 import 'vant/lib/i 阅读全文
摘要：
安装使用 使用npm安装： $ npm install axios 使用CDN： <script src="https://unpkg.com/axios/dist/axios.min.js"></script> get与post使用示例 执行 GET 请求： // 为给定 ID 的 user 创建 阅读全文
摘要：
阅读过几篇关于 px rem 的文章，感觉 rem 很强大。但是自己接触到的公司项目全部都使用 px，想知道为什么。是我司技术更新落后了吗？ 我们当然有在用 vw 和 vh，但是只是在 layout 层级，组件层使用 px。 人数赞同最多的回答 先抛出观点： 本文建议读者不要使用flexible或者 阅读全文
摘要：
ruby标签实现给汉字加拼音 ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。 <ruby> 、<rt>、<rp> 标签一同使用，代码如下： <ruby> 这是一个汉字 <rp>(z 阅读全文
摘要：
ES6介绍 ES6， 全称 ECMAScript 6.0 ，2015.06 发版。 let 和 const命令 let命令 let 命令，用来声明变量。它的用法类似于var，区别在于var声明的变量全局有效，let 声明的变量只在它所在的代码块内有效。 使用var声明： var a = []; fo 阅读全文
摘要：
本地安装 GitBook的安装非常简单。您的系统只需满足这两个要求： NodeJS（推荐使用v4.0.0及以上版本） Windows，Linux，Unix或Mac OS X gitbook-cli 是安装和管理GitBook版本库的程序。它会自动安装GitBook所需的模块来创建一本书。 gitbo 阅读全文
摘要：
配置文件在项目根目录里，文件名以 .eslintrc.* 为名。 为了兼容以前写的代码，避免修改太多代码，把不符合自己习惯的规则去掉，简单配置代码： 配置规则： "off"或者0 //关闭规则关闭 "warn"或者1 //在打开的规则作为警告（不影响退出代码） "error"或者2 //把规则作为一 阅读全文