文/米酒 背景 前段时间在某个项目进行需求开发的时候，该项目是基于 webpack3 进行打包构建的。在开发过程中我发现打包很慢，开发体验不佳，于是做了简单的优化并梳理了优化方案 分析打包速度 进行优化的第一步需要知道我们的构建到底慢在那里。通过 speed-measure-webpack-plugin 测量你的 webpack 构建期间各

前言:ajax的知识相对比较简单，此文章仅代表鄙人的总结和理解，如有错漏，欢迎指正... 一、原理： Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。 XMLHttpRequest是ajax的核心机制，是一种支持异步请求的技术。简单的说，也就是j

将 arguments 对象转换为数组 arguments对象是函数内部可访问的类似数组的对象，其中包含传递给该函数的参数的值。 与其他数组不同，这里我们可以访问值并获得长度（length），但是不能在其上使用其他数组方法。 幸运的是，我们可以将其转换为常规数组：  复制代码 varargArray =Array.prototype.slice.call

这里所指的angularjs是只angular早期的1.x版本。虽然vue, react在热度上已经碾压angularjs几条街，但是在面对web开发（以DOM为中心的开发）中，某些场景下面，angularjs可能比任何框架或库都做得好。这里，主要举例两个点。 Modal弹窗的隐现 现在是单向数据流和immutable的天下，其目的是为了数据流所蕴含的业务流清晰

导航 执行上下文 原型链 继承 事件循环 柯里化 偏函数 函数记忆 隐式转换 和 运算符 浏览器缓存机制（http缓存机制） 前端安全 深浅拷贝 Debounce Throttle [深

前段时间有朋友问我一个他们公司遇到的问题, 说是后端由于某种原因没有实现分页功能, 所以一次性返回了2万条数据,让前端用 select 组件展示到用户界面里. 我听完之后立马明白了他的困惑, 如果通过硬编码的方式去直接渲染这两万条数据到 select 中,肯定会卡死. 后面他还说需要支持搜索, 也是前端来实现,我顿时产生了兴趣.

webpack NPM 设置淘宝镜像 # 配置淘宝镜像 npm config set registry https://registry.npm.taobao.org # 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装包 npm install --global 或者 npm install -g 其他命令 npm set # 查看包的信息 npm i

之前学习 vue 的时候，一直没刨根问底过。在看到网上这类文章比较多，参差不齐的质量有时候看的一头雾水。当然也有不错的文章，但是终究是别人的理解。于是写一篇关于自己的理解记录下来，亲身实践才能收获更多！ 初阶：响应式原理 在说明之前，我们先了解一个 Object.defineProperty() 。引用 MDN 上的权威介绍 de

最近一个小伙遇到一个需求，客户需要绘制圆点样式的线条。 大致效果是这样的： 思路一：计算并使用arc填充 他自己实现了一种思路，然后咨询我有没有更好的思路。 先看看他的思路是如何实现的，大致代码如下： // 绘制圆点线，通过计算在线条上进行插值运算，计算出需要绘制圆点的一系列点位 // 然后调用dra

介绍 Lunr.js是个用于浏览器的轻量级 JavaScript 全文搜索引擎。它为JSON文档建立索引，并提供一个简单的搜索界面来检索与文本查询比较匹配的文档对于一些小型的博客、开发者文档或 Wiki 网站来说,完全可以通过它实现站内离线搜索: 为什么使用它? 对于已经将所有数据存储在客户端中的Web应用程序，也能

课程目标 developement和production打包区别 如何解决在开发和打包的切换中常常修改webpack.config.js文件内容的问题? 一、developement和production打包区别 在开发项目的时候使用的模式是development模式 在development环境下我们使用的是webpack中的devServer可以帮助我们开启一个服务器，里面还集成

前端编写测试用例时，在测试界面上的一些效果时，通常都希望能够模拟一些用户操作，而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法，例如click、focus等，但是如果

浏览器有同源策略的限制，所以不是同源的脚本不能被访问，即不能跨域名访问。 所以为了实现跨域，前后端都有很多解决的办法，这里我们就来解决webpack下vue的跨域问题。 二、webpack下vue跨域需要配置ProxyTable 1. 增加ProxyTable配置 在vue工程下的config -> index.js -> module.exports -> dev里增

在HTTPS出现之前，所有请求都是以明文方式送出的，那么如果有人在传输途中偷听或者抓包的话，你的所有通信内容都会泄漏。比较安全的方法是将通信内容加密在发送给对方。加密方法有两种，对称加密和非对称加密

最近要对 react 项目做重构优化等相关的工作，由于有好长时间没碰 React 了，今天索性把一个基于关键字搜索的 demo 做一下简单优化，在此记录以下

一、数据 API： https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE 1. data 类型：Object | Function 限制：组件的定义只接受 function 详细：Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含

再学了前三节之后，其实我们已经会对文件资源等进行一些打包，但是这些在大型项目中是远远不够的，那么我们在平时的配置中还会遇到什么难题呢？ 我能学会什么 通过本节的学习，你可以学会 按需打包文件 区分线上环境与开发环境配置 Webpack 和 Code Splitting SplitChunksPlugin 配置参数详解 Laz

作者：Dr. Axel Rauschmayer翻译：疯狂的技术宅 原文：[链接] 未经允许严禁转载 在 TypeScript中，any 和 unknown 是包含所有值的类型。在本文中，我们将会研究它们是怎样工作的。 TypeScript 的两种顶级类型 any

Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。使用 context 比较好的场景是真正意义上的全局信息且不会更改，例如界面主题、用户信息等如果你

圣杯布局和双飞翼布局都是三栏布局，左右盒子宽度固定，中间盒子自适应（固比固），区别是他们的实现的思想。 圣杯布局： <div id="header">#header</div> <div id="container"> <div id="center" class="column">#center</div> <div i

特别注意： 本代码为 Springboot 工作流 前后分离 + 跨域 版本 （权限控制到菜单和按钮） 后台框架： springboot 2.3.0+ Flowable 6.5.0+ mybaits+maven+接口 前端页面：html +vue.js 形式 jquery ajax 异步跨域 json 格式数据交互 前后分离，前后台分开部署 （特别注意，前端用的vue.js, 就是html页面引入vue.js

JavaScript中有很多重要特性及概念。比如原型,原型链,this,闭包,作用域,隐式转换等等。如果不能熟练掌握,在进阶中级前端开发工程师的道路上必定是困难重重

导读：既然有兴趣，就手动搭建一个vue应用吧。所需相关环境依赖，项目中跟 java web 开发一样，需要引入依赖相关库（类似 jar 包）。譬如（UI组件- Element UI 、请求路由- Vue Router 、图形报表- VCharts 、视图模板引擎- jade 、样式组件- scss 等等），透过这次搭建认识到如何通过 npm 安装依赖所需依赖库，鉴于此，

eslint prettier husky lint-staged typescript eslint-config-alloy 为构建项目代码质量保驾护

本文所分享的是关于 vue 3.x 在用法上的改变，而不是在代码实现上的不同。 虽然 vue2 到 vue3 的实现大改，但在用法上变化基本不大，比较明显的一个变化就是添加了 setup(){} 函数了，几乎所有的配置变成了以函数的方式进行定义。即使是这样，但小改动还是很多的。本文主要分享的是 vue 2.x 与 vue 3.x 之间一些常见

Render2 是angular中用于操作dom的 Angular做了封装，屏蔽底层差异，通用性更强。 不仅仅可以用于浏览器端， 还可以用于Server Side rendering, Web-Worker, mobile apps, and desktop apps等。 Render2之指令用法 setStyle、removeStyle # 定义指令 import { Directive, ElementRef, OnInit, Renderer2,

往期回顾 从零开始的Flutter之旅: StatelessWidget 从零开始的Flutter之旅: StatefulWidget 在之前的文章中，介绍了StatelessWidget与StatefulWidget的特性与它们的呈现原理。 这期要聊的是它们的另一个兄弟Inher