力有不逮的对象众所周知，在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变。 这是什么原因？ 原因在于： Vue 的响应式系统是基于Object.defineProperty这个方法的，该方法可以监听对象中某个元素的获取或修改，经过了该方法处理的数据，我们称其为响应式数据。但是，该方法有一个很大的缺点，新增属性或者删除属性不会触发监听，举个栗子： var vm =...
前言 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果 同时也是支持JS的 不过在这个文章中讲述的都是如何利用CSS来实现过渡动画、keyframes动画以及实现的原理 过渡动画实现的原理 1.首先最基础的一点在于 如果你想要在单元素/单个组件之中实现过渡动画 那么 你需要在元素/组件所在的...
同源策略 在运行中我们有时会出错是因为我们违反了同源策略，这是一种浏览器所实施的安全措施，用于限制具有不同来源的文档之间的交互。页面的来源由其协议，主机和端口号定义。具有相同来源的资源可以相互完全访问。但是如果具有不相同的源将会拒绝访问。 http://www.a.com/a.js http://www.b.com/a.js 这两个之间就不可以互相访问，因为域名的不相同域名组成如果上面两个域名想互相访问就需要跨域请求，一般情况下同源政策规定...
一、前言forEach和map是数组的两个方法，作用都是遍历数组。在vue项目的处理数据中经常会用到，这里介绍一下两者的区别和具体用法示例。 二、代码1. 相同点 都是数组的方法都用来遍历数组两个函数都有4个参数：匿名函数中可传3个参数item(当前项), index(当前项的索引), arr(原数组)，还有一个可选参数this匿名函数中的this默认是指向window的对空数组不会调用回调函数不会改变原数组(某些情况下可改变)2. forEach(1) 没有返回值。...
最近在学习 webpack源码，由于源码比较复杂，就先梳理了一下整体流程，就参考官网的例子，手写一个最基本的 webpack 模块解析器。 代码很少，github地址：手写webpack模块解析器 整体流程分析1、读取入口文件。 2、将内容转换成 ast 语法树。 3、深度遍历语法树，找到所有的依赖，并加入到一个数组中。 4、将 ast 代码转换回可执行的 js 代码。 5、编写 require 函数，根据入口文件，自动执行完所有的依赖。 6、输出运行结果。 cr...
在函数内部，有两个特殊的对象：arguments和this。 1、argumentsarguments是一个类数组对象。包含着传入函数中的所有参数。但这个对象还有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。经典案例：阶乘函数 function factorial(num){if(num <= 1){return 1;}else{return num * factorial(num-1);} }定义阶乘函数一般都要用到递归算法，如上所示，但你会发现，这个函数的执行与函数名factorial紧紧耦合...
本文介绍了Webpack核心模块tapable，分享给大家，具体如下：前言 Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，是对前端项目实现自动化和优化必不可少的工具，Webpack 的 loader （加载器）和 plugin （插件）是由 Webpack 开发者和社区开发者共同贡献的，而目前又没有比较系统的开发文档，想写加载器和插件必须要懂 Webpack 的原理，即看懂 Webpack 的源码， tapable 则是 Webpack 依赖的核心库，可以说不懂 tapable...
tree-sharking 简介tree-sharking 是 Webpack 2 后续版本的优化功能，顾名思义，就是将多余的代码给 “摇晃” 掉，在开发中我们经常使用一些第三方库，而这些第三方库只使用了这个库的一部门功能或代码，未使用的代码也要被打包进来，这样出口文件会非常大，tree-sharking 帮我们解决了这个问题，它可以将各个模块中没有使用的方法过滤掉，只对有效代码进行打包。 AST 语法树分析假设我们现在使用了 ElementUI 库的两个组件，通常会...
路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。 路由中...
前言 最近死磕了一段时间vue源码，想想觉得还是要输出点东西，我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的。 Vue.set()和this.$set()应用的场景 平时做项目的时候难免不会对 数组或者对象 进行这样的骚操作操作，结果发现，咦~~，他喵的，怎么页面没有重新渲染。 const vueInstance = new Vue({data: {arr: [1, 2],obj1: {a: 3}} }); vueInstance.$data.arr[0] = 3; // 这种骚操作页面不会重新渲染...
在 AJAX 时代，进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生，虽然在目前会有一点浏览器兼容的问题，但是当我们进行 Hybrid App 开发的时候，如我之前介绍的 Ionic 和 React Native，都可以使用 fetch 进行完美的网络请求。 如果看网上的fetch教程，会首先对比XMLHttpRequest和fetch的优劣，然后引出一堆看了很快会忘记的内容(本...
从很久之前就已经接触过了angularjs了，当时就已经了解到，angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后，再接触了vue.js，当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面。今天，就我们就来一步步解析vue.js响应式的原理，并且来实现一个简单的demo。 首先，先让我们来了解一些基础知识。 基础知识 Object.defineProperty es5新增了Object.defineProperty这个api，它可以允许我们为对象的属性来设定ge...
之前项目里遇到一个需求，需要前端上传一个word文档，然后后端提取出该文档的指定位置的内容并保存。这里后端用的是nodejs，开始接到这个需求，发现无从下手，主要是没有处理过word这种类型的文档，怎么解析? Excel倒是有相关的库可以用，而且很简单 思路 搜索了好一会儿，在npm上发现了一个叫做 adm-zip 的包，这个包可以解压缩word文档，原来word文档也是可以解压缩的，之前一直不知道,通过如下代码就可以将word文档解压缩，并进...
1.中间键使用 koa-body npm install koa-body --save const koaBody = require(koa-body);app.use(koaBody({multipart: true,formidable: {maxFileSize: 200 * 1024 * 1024 // 设置上传文件大小最大限制，默认2M} }));2.书写路由，croller书写方法 uploadData.js const errorResult = require(../utils/errorResult.js); const uploadExcelSrv = require(../service/uploadExcelSrv);const saveData = async function (ctx, next) ...
首先需要明确，a() {}和 b: () => {}是不同的let obj = {a() {},// 相当于a:function() {},b: () => {} }1 VUE.js 源码解析 注意此处只设计核心代码 这段代码也是UMD实现原理，本文这里不是重点，有兴趣的可以自行探究。 (function (global, factory) {typeof exports === object && typeof module !== undefined ? module.exports = factory() :typeof define === function && define.amd ? define(factory) :(global.Vue = facto...