深入Vue-Router源码分析路由实现原理 使用Vue开发SPA应用，离不开vue-router，那么vue和vue-router是如何协作运行的呢，下面从使用的角度，大白话帮大家一步步梳理下vue-router的整个实现流程。 到发文时使用的版本是： - vue (v2.5.0) - vue-router (v3.0.1)一、vue-router 源码结构 github 地址：https://github.com/vuejs/vue-routercomponents下是两个组件<router-view> 和 <router-link> history是路由方式的封装，提供三种...
clickoutside是Element-ui实现的一个自定义指令，顾名思义，该指令用来处理目标节点之外的点击事件，常用来处理下拉菜单等展开内容的关闭，在Element-ui的Select选择器、Dropdown下拉菜单、Popover 弹出框等组件中都用到了该指令，所以这个指令在实现一些自定义组件的时候非常有用。 要分析该源码，首先要了解一下Vue的自定义指令。自定义指令的定义方式如下： // 注册一个全局自定义指令 Vue.directive(directiveName, {bind: fu...
导语： 本文是对 Vue 官方文档深入响应式原理（https://cn.vuejs.org/v2/guide/reactivity.html）的理解，并通过源码还原实现过程。 响应式原理可分为两步，依赖收集的过程与触发-重新渲染的过程。依赖收集的过程，有三个很重要的类，分别是 Watcher、Dep、Observer。本文主要解读 Observer 。 这篇文章讲解上篇文章没有覆盖到的 Observer 部分的内容，还是先看官网这张图：Observer 最主要的作用就是实现了上图中touch -Data(gett...
本文介绍了vue 虚拟dom的patch源码分析，分享给大家，具体如下：源码目录：src/core/vdom/patch.jsfunction updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {let oldStartIdx = 0let newStartIdx = 0let oldEndIdx = oldCh.length - 1let oldStartVnode = oldCh[0]let oldEndVnode = oldCh[oldEndIdx]let newEndIdx = newCh.length - 1let newStartVnode = newCh[0]let newEndVnode = newCh[newEndIdx...
近期使用tap事件为老夫带来了这样那样的问题，其中一个问题是解决了点透还需要将原来一个个click变为tap，这样的话我们就抛弃了ie用户当然可以做兼容，但是没人想动老代码的，于是今天拿出了fastclick这个东西， 这是最近第四次发文说tap的点透事件，我们一直对解决“点透”的蒙版耿耿于怀，于是今天老大提出了一个库fastclick，最后证明解决了我们的问题 而且click不必替换为tap了，于是我们老大就语重心长的对我说了一句，你们就...
1. 什么是Vue.nextTick()？官方文档解释如下：在下次DOM更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。 2. 为什么要使用nextTick? <!DOCTYPE html> <html><head><title>演示Vue</title><script src="https://tugenhua0707.github.io/vue/vue1/vue.js"></script></head><body><div id="app"><template><div ref="list">{{name}}</div></template></div><script>new Vue({el: #app,data: {name...
前言 虽然工作中一直使用Vue作为基础库，但是对于其实现机理仅限于道听途说，这样对长期的技术发展很不利。所以最近攻读了其源码的一部分，先把双向数据绑定这一块的内容给整理一下，也算是一种学习的反刍。 本篇文章的Vue源码版本为v2.2.0开发版。 Vue源码的整体架构无非是初始化Vue对象，挂载数据data/props等，在不同的时期触发不同的事件钩子，如created() / mounted() / update()等，后面专门整理各个模块的文章。这里先讲双向...
这两天学习了Vue transition感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 本来打算自己造一个transition的轮子，所以决定先看看源码，理清思路。Vue的transition组件提供了一系列钩子函数，并且具有良好可扩展性。 了解构建过程 既然要看源码，就先让Vue在开发环境跑起来，首先从GitHub clone下来整个项目，在文件./github/CONTRIBUTING.md中看到了如下备注，需要强调一下的是，npm run dev构建的是runtime ...
我想有过vue开发经验的，对于vue.use并不陌生。当使用vue-resource或vue-router等全局组件时，必须通过Vue.use方法引入，才起作用。那么vue.use在组件引入之前到底做了那些事情呢？让我们一窥究竟。 先上vue.use源码 // javascript的方法是可以传递的，哈哈 Vue.use = function (plugin) {/* istanbul ignore if */if (plugin.installed) {return}// additional parametersvar args = toArray(arguments, 1);args.unshift(this);if...
前言 相信一说到监听，当然就离不了设计模式中鼎鼎大名的观察者模式。举个例子，你家后院着火了，可一定要等到烟雾很大火光很亮你才能发现啊，可是当你安装了一个火灾预警器，当发生火灾就立马能够通知到你了。这就是一个典型的观察者模式。当然也还有一些其他变种，比如发布/订阅（publish/subscribe）模式。 我们知道如果要将数据和视图关联起来，在数据变更的时候，同步视图，同理视图变更，数据也发生变化。vue.js是怎么实现这...
前言 Sizzle 原本是 jQuery 中用来当作 DOM 选择器的，后来被 John Resig 单独分离出去，成为一个单独的项目，可以直接导入到项目中使用。 点击这里下：jquery/sizzle。 本来我们使用 jQuery 当作选择器，选定一些 #id 或 .class，使用 document.getElementById 或 document.getElemensByClassName 就可以很快锁定 DOM 所在的位置，然后返回给 jQuery 当作对象。但有时候会碰到一些比较复杂的选择 div div.hot>span 这类肯定用上面...
init 构造器 由于这个函数直接和 jQuery() 的参数有关，先来说下能接受什么样的参数。 源码中接受 3 个参数： init: function (selector, context, root) {... }jQuery() ，空参数，这个会直接返回一个空的 jQuery 对象，return this。jQuery( selector [, context ] ) ，这是一个标准且常用法，selector 表示一个 css 选择器，这个选择器通常是一个字符串，#id 或者 .class 等，context 表示选择范围，即限定作用，可为 DOM，jQue...
Knockout.js是什么？ Knockout是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型（data model）即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新（比如：依赖于用户行为的改变或者外部的数据源发生变化），KO都可以很简单的帮你实现，并且非常易于维护。 一、主类关系图二、类职责2.1、observable（普通监控对象类）observable（他其是一个function）的内部...
jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大，下面就这个函数做了详细讲解： 代码 /*! * jQuery源码分析-each函数 * jQuery版本:1.4.2 * * ---------------------------------------------------------- * 函数介绍 * * each函数通过jQuery.extend函数附加到jQuery对象中： * jQuery.extend({ * each: function() {} * }); * 如果对jQuery.extend函数源码还不了解,可...
几年前就有人说javascript是最被低估一种编程语言，自从nodejs出来后，全端(All Stack/Full Stack)概念日渐兴起，现在恐怕没人再敢低估它了。javascrip是一种类C的语言，有C语言基础就能大体理解javascript的代码，但是作为一种脚本语言，javascript的灵活性是C所远远不及的，这也会造成学习上的一些困难。 一、集合 1.首先是几个迭代的方法。_.each = _.forEach = function(obj, iteratee, context) { iteratee = optimizeCb(ite...