- 博客(17)
- 收藏
- 关注
RSS订阅原创 前端单元测试环境搭建——Karma+Mocha+Chai
前端单元测试环境搭建——Karma+Mocha+Chai1、Karma安装npm install karma --save-dev 或yarn add karma --dev配置在安装完成karma后，要新建一个karma.conf.js文件来进行karma的配置，大致代码如下，后面会介绍配置的相关含义。// karma.conf.js// webpack配置const we...
2019-04-24 16:32:54
1513
原创 Vue项目的前端权限控制
Vue项目的前端权限控制本文主要介绍在Vue项目中如何进行前端权限控制。路由权限路由权限就是用户只能访问到自己有权限访问到的页面，对于无权限的页面可以跳转到404页面或者无权限提示。下面通过两种方式来实现对路由的权限控制。1.动态生成路由表第一种方式是动态生成路由表，前端原始的路由表中只保存一些基础的路由，获取权限之后根据用户拥有访问权限的路由信息构建一个路由表并动态添加进路由表中，这样...
2019-04-17 18:59:34
8344
原创 项目优化之撤销功能的优化
项目优化之撤销功能的优化本文写于2018/7/121、初始在开发一个管理系统的时候，遇到了这样的一个需求，用户可以通过操作建立一颗组织机构树，在建立树的过程中可以对树进行新增节点、修改属性、删除节点以及撤销操作等功能。对于其他功能的实现，就不再多做讲述了，这里主要介绍一下撤销功能，这个功能伪代码实现如下。let tree = {} // 组织机构树的数据结构let history ...
2019-03-09 17:12:50
300
原创 Vue中的Diff算法
Vue中的Diff算法本篇文章主要介绍Diff算法的思想和Vue中对Diff算法的基本实现。1. 为什么要用Diff算法由于在浏览器中操作DOM的代价是非常“昂贵”的，所以才在Vue引入了Virtual DOM，Virtual DOM是对真实DOM的一种抽象描述，不懂的朋友可以自行查阅相关资料。即使使用了Virtual DOM来进行真实DOM的渲染，在页面更新的时候，也不能全量地将整颗Vi...
2019-03-03 11:58:01
27010
8
原创 Vue解疑之data属性为什么是函数
Vue解疑之data属性为什么是函数在Vue项目中，我们通常使用单文件组件和全局的component方法来定义组件，像下面这样：Vue.component('test', { data () { return 'test' }})但是，不管是使用单文件组件或是component的函数，我们发现组件options中的data是一个函数，并且返回了一个对象，为...
2019-03-03 11:53:48
656
原创 Vue源码学习之createElement
Vue源码学习之createElement在Vue应用开发中，我们大部分时间都是使用template来创建HTML，但是在一些场景中，我们可能会需要在js进行模板的编写及渲染，这时候我们就会用到Vue中的渲染函数render，像下面这样：Vue.component('renderTest', { render: function (createElement) { return c...
2019-03-03 11:53:24
919
原创 Webpack之模块加载
Webpack之模块加载webpack作为前端打包工具受到大多数的前端开发者的青睐，在使用webpack的过程我们通过webpack自带的模块化功能实现了项目代码的模块化，方便了我们管理和维护，那么webpack是怎么实现各个模块之间的划分和加载的呢？模块划分在了解模块加载之前，我们需要首先看下webpack是怎么将一个个文件划分为模块的。我们有一个入口文件index.js以及模块a.js、...
2019-03-03 11:52:46
497
转载 Javascript中的事件循环
Javascript中的事件循环（转载）事件循环机制我们知道JavaScript的一大特点就是单线程，而这个线程中拥有唯一的一个事件循环。JavaScript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列(task queue)来搞定另外一些代码的执行。一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。任务队列又分为macro-task（宏任务）与mi...
2019-03-02 21:20:13
137
转载 React源码分析之事件系统
React源码分析之事件系统(转载自阿里云)react自己实现了一套高效的事件系统，包括了事件的注册、存储、分发、和重用，在DOM事件体系基础上做了很大改进，减少了内存消耗，简化了事件逻辑，并最大化的解决了IE等浏览器的事件不兼容问题。与传统的DOM体系相比，它有如下特点：1、React组件上声明的事件最终绑定到了document这个DOM节点上（事件代理），而不是React组件上的相应DO...
2019-03-02 21:19:34
198
原创 React学习之组件通信，refs，key，ReactDOM
React学习之组件通信，refs，key，ReactDOM1、组件间通信父组件向子组件通信React中规定了明确的单向数据流，利用props将数据从父组件传递到子组件，让父子组件进行通信，故父组件向子组件通信还是很容易实现的。引申一点，父组件怎么向孙子组件通信呢？可以利用props进行层层传递，使用ES6的…运算符可以用很简洁的方式把props传递给孙子组件。这里我们就不举例了。子组件向...
2019-03-02 21:18:59
176
原创 React中的高阶组件和es7中的装饰器
React中的高阶组件和es7中的装饰器1、什么是高阶组件？在解释什么是高阶组件之前，我们先要了解一个js中的概念—高阶函数。高阶函数就是：函数可以作为参数函数可以作为返回值如：const debounce = (fn, delay) => { let timeId = null return () => { timeId &&a...
2019-03-02 21:18:24
910
原创 Vuex源码分析
Vuex源码分析入口文件Vuex的入口文件为src/index.jsimport { Store, install } from './store'import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from './helpers'export default { St...
2019-03-02 21:17:50
186
原创 Vue源码学习之initEvents
Vue源码学习之initEventsinitLifecycle是Vue源码中core/instance/events.js下的一个函数，和上节的initLiftcycle一样，该函数也是在beforeCreate钩子之前调用，作用是初始化组件中的事件。下面让我们来进行代码分析。1、initEventsfunction initEvents (vm: Component) { // 存放事...
2019-03-02 21:17:09
1005
原创 Vue源码学习之initInjections和initProvide
Vue源码学习之initInjections和initProvide在进行源码阅读之前先让我们了解一个概念：provide/inject，这个是Vue在2.2.0版本新增的一个属性，按照Vue官网的说法，它的作用是：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文...
2019-03-02 21:16:24
2226
原创 Vue源码学习之initState
Vue源码学习之initState这次学习的initState方法，这个方法应该是整个Vue实例初始化过程中最重要的方法之一了，我们经常使用的属性，包括像是data，props，methods，watch，computed等都是在这个方法中进行初始化的。该方法介于beforeCreate和created两个钩子之间，所以在beforeCreate的时候我们还无法访问到Vue实例上的data，pr...
2019-03-02 21:15:43
1182
原创 微信浏览器中禁用后退按钮并弹窗
微信浏览器中禁用后退按钮并弹窗最近在做项目的时候，有一个需求是当用户点击微信浏览器自带的后退按钮时，阻止浏览器自带的后退操作，并弹窗让用户自己选择是否后退。下面来看具体的解决方案。解决方法从原理上来说，我们是无法阻止浏览器的后退操作的，包括使用event.preventDefault()。所以我们只能换一种思路，浏览器后退操作其实就是从历史记录栈中pop一个元素。所以，只要我们在进入应用的时...
2019-03-02 21:14:49
3818
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人