- 博客(56)
- 收藏
- 关注
RSS订阅原创 js 中this绑定的五种方式
本文总结自《你不知道javascript》1 默认绑定默认绑定是指，当直接调用函数，函数前面没有任何修饰的时候，默认将this绑定到当前函数上下文环境。2 隐式绑定将this绑定到上下文对象，例如，obj.foo(), foo函数的this即指向obj这个对象需要注意的是，隐式绑定是将this绑定到离函数最近的对象上，例如，obj1.obj2.foo（），foo函数的this指...
2019-10-02 18:01:54
581
原创 vuex 模块初始化源码阅读
GitHub：https://github.com/vuejs/vuex/blob/dev/src/module/module-collection.js首先看构造函数：constructor (rawRootModule) { // register root module (Vuex.Store options) this.register([], rawRootMo...
2019-09-23 21:43:45
254
原创 vuex 中的commit源码解读
在介绍commit之前，先介绍一下subscribe。这个API的官方文档在这里https://vuex.vuejs.org/zh/api/#watch订阅 store 的 mutation。handler会在每个 mutation 完成后调用，接收 mutation 和经过 mutation 后的状态作为参数：store.subscribe((mutation, state) =...
2019-09-22 23:11:11
613
原创 vuex 的dispatch源码解读
vuex 源码的网址：https://github.com/vuejs/vuex/blob/dev/src/store.js在介绍dispatch之前，先介绍一个函数：subscribeAction。首先通过官方文档https://vuex.vuejs.org/zh/api/#subscribeaction来看一下这个api的作用：订阅 store 的 action。handler会...
2019-09-22 22:43:01
1239
原创 vuex源码阅读（一）
github源码网址：https://github.com/vuejs/vuex/blob/dev/src/store.js一 首先看vuex的构造函数export class Store { constructor (options = {}) { // Auto install if it is not done yet and `window` has `Vue`. ...
2019-09-22 17:23:07
188
原创 draft-js插件在使用中RichUtils函数库不起作用
facebook推出的draft-js富文本编辑器并不是一个开箱可用的编辑器，如果我们按照github上面的配置引入的话，得到一个类似输入框的编辑器。 但是draft-js提供了一个RichUtils函数库，里面提供了丰富的函数，让我们可以自己设计自己的编辑器。 在开发的过程中，如下，我按照官方的例子写了一个简单的编辑器import React, ...
2019-09-06 18:28:59
339
原创 探索vue中watch在任务执行队列中的执行时间
先说本文的结论：watch的处理函数是在同步函数都执行完毕之后，在浏览器更新DOM之前执行首先来看官方这样子，实际上只会有一个输出：test 10接着，如果我们在有这样一个html结构：Watch的结构如上图所示，this.$refs[‘test-watch’]的输出结果是undefined。如果我们在调用testFun后，执行一些其他的指令，也...
2019-08-15 18:50:02
2188
1
原创 使用el-checkbox踩的坑
在开发的过程中，遇到了一个需求：1 需要根据list这个数组的添加el-checkbox, 将对应绑定的值存放到select中。自然而然，html结构是这样写的：<div v-for=“index in list”> <el-checkbox v-model=“select[index]” @change=“selectChange(index...
2019-07-31 17:32:02
1431
原创 JavaScript输入框中选中文字加粗
首先看看效果图：大概就是想实现两个功能点：1输入框中可以随便输入内容2用户选中文字后点击按钮可以实现文字修饰（加粗）现实现的代码中有1个bug尚未修复：1 不可加粗已经加粗过的文字（选择已经加粗的和普通文字的混合也不行）代码的主要内容：1 计算选中的位置2 在选中的文字两边加上<b></b>3 重新渲染输入框的内容主要代码：...
2019-04-26 14:22:16
5374
1
原创 使element-tree默认展开节点高亮
element-ui tree组件默认节点高亮问题：Element-ui tree的官方文档中给我们提供了一个接口：default-expanded-keys数组我们可以将默认展开的节点的key放到数组中，就可以默认展开但是有一个比较难受的问题是默认展开的节点没有渲染相应的样式（高亮）在工程中，我tree组件绑定的data一共有两次刷新第一次是在本地读取数据，将数据渲染出来...
2018-09-30 10:35:34
8899
4
原创 el-transfer组件自定义左右列表宽度
el-transfer组件自定义左右列表宽度我们知道element-ui 是自带样式的，但是有时候我们需要覆盖掉它们自带的样式，比如自定义el-transfer列表宽度1首先打开后台信息，看看自己想要修改的样式的类2 在style标签中修改相关的样式，注意不要加上scope3 在element-ui 标签上加上相应的选择器，防止样式污染全局，同时加大优先级举个例子：实现el...
2018-08-28 11:35:14
10707
6
原创 常见错误总结
常见的踩坑总结：1 JSON.parse（） 使用函数时出现 “SyntaxError: Unexpected token o in JSON at position 1”的错误提示，这里一般是类型错误，JSON.parse要求传入的是字符串类型，如果传入的参数是对象，就会有这个错误信息 2 选出来的节点值是null：这种错误原因一般有两个：1 不存在该节点2 有这个节...
2018-08-25 18:50:20
585
原创 vue中自定义事件回调函数传参
我们知道父子组件中，子组件一般是通过$emit(自定义事件名称，数据)的形式来将数据传给父组件父组件通过回调函数处理子组件传过来的数据，例如：子组件内：this.$emit(change,data)父组件内<json-editor @change="onSettingChange" ></json-editor>我们都知道子组件会将数据自动作为...
2018-08-25 02:18:23
20587
6
原创 自定义组件v-model绑定
自定义事件v-model绑定 首先先看看官方文档的写法：我们知道v-model与v-bind的区别有两点：1 v-model是双向绑定数据，也就是当父组件的传进去的数据发生改变时，子组件的数据也会发生改变，当子组件发生改变时，父组件也会发生改变 v-bind是单向绑定，当父组件的数据发生改变时，子组件的数据也会改变，但是当子组件发生改变时，父组件的数据不会发生改变2 ...
2018-08-25 01:49:43
14972
4
原创 快速入门--Vue基本知识
1声明周期:created:实例创建完成后调用,这个阶段完成了数据监测等,但是还没有完成挂载,$el还不可以用,一般用来做数据初始化mounted:$el挂载之后,一般我们第一个业务逻辑会从这里开始beforeDestroy:实例销毁之前,主要是解绑一些监听事件2 v-pre跳过这个元素和子元素不编译,例如:<span v-pre>{{这里的内容是不会被编译的}}</span&g...
2018-05-03 00:11:37
334
原创 用贝塞尔曲线画曲线
在j中,提供了bezierCurveTo()方法,也就是利用起点,终点,两个控制点在canvas画贝塞尔曲线,首先,咱们通过moveTo函数将笔尖移动到曲线的起点,然后bezierCurveTo(控制点, 控制点, 终点)这样画出贝塞尔曲线.关于贝塞尔曲线的控制点,咱们可以大概看看这个图其中A是曲线的起点,D曲线的终点,B和C是曲线的控制点,将B和C连起来得到线段BCBC上的点G从左到右移...
2018-04-25 14:47:27
4825
1
原创 css3伸缩布局盒模型(一)
容器的设置语法是:display:box|inline-box我们来看看它们的区别:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3的伸缩布局</title> <st
2018-04-23 00:14:45
672
原创 用css3径向渐变制作花纹背景
我们可以通过多种css3渐变的叠加制作各种各样好看的花纹css3中.如果有多种渐变叠加,先写的渐变会覆盖后写的渐变.制作格子花纹:代码如下: .bg{ width: 120px; height: 200px; background-color: #282828; background-image: ...
2018-04-22 21:17:18
1810
原创 求最长回文子串
原题如下:Given a string s, find the longest palindromic substring in s. You may assume that the maximum length of s is 1000.时间复杂度为n平方.总体思路如下:首先,外层遍历从1开始寻找一个中心点,再一一比较中心点两边是否相等,比如说:babad 一开始的中心点是a,下标i=1,...
2018-04-16 16:15:31
125
原创 前端里的几种颜色渐变
1 canvas画布里的渐变: 要创建一个新的线性渐变，可以调用createLinearGradient()方法。这个方法接收4 个参数：起点的x 坐标、起点的y 坐标、终点的x 坐标、终点的y 坐标。调用这个方法后，它就会创建一个指定大小的渐变，并返回CanvasGradient 对象的实例。 创建了渐变对象后，下一步就是使用addColorStop()方法来指定色标。这个方法接收两...
2018-04-14 23:31:05
8188
原创 svg里的clipPath和mask
svg里的clipPath定义了一个区域,在区域内的元素是可见的,区域外是不可见的,同时,区域外的元素无法产生事件.咱们先看一个简单区域的例子:<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" > <clipPath id="rectClip"> <rect
2018-04-14 21:48:40
1772
1
原创 三维图形的投影变换
1.平行投影:1.1 正轴投影:我们通常说的三视图是指正视图、俯视图和侧视图, 投影平面分别与 x,y,z 轴垂直。正视图:(yz)俯视图:(xy)侧视图:(xz)1.2 正轴测投影:如图:咱们希望按照这个平面对物体进行平行投影:首先,先把物体及投影面沿着y轴顺时针旋转,在绕x轴逆时针旋转θ角,使投影面与z轴重合,变换矩阵如下:最后做Z方向的正投影:结果为:2 透视投影:2.1 一点透视:如图所示...
2018-04-12 13:35:25
5019
原创 三维图形几何变换
与二维变换矩阵相似,采用齐次坐标的三维变换矩阵为同样可以分为四个子矩阵:对图像进行比例,旋转,错切,对称等几何变换,产生平移变换,对图形进行投影变换,对整体进行比例变换.1 平移变换:x方向移动d,y方向移动h,z方向移动l2 比例变换:x方向扩大a倍,y方向扩大f倍,z方向扩大k倍3 对称变换:以YOZ对称为例,其余平面都相似:4 旋转变换:用右手坐标系确定旋转角度正负(拇指与旋转轴正方向同向,...
2018-04-12 12:22:13
2578
原创 二维图形的基本变换与裁剪的变换矩阵
设二维平面上有一点(x,y),经过图形变换后成为另一点(x1,y1),则可用向量乘上一个变换矩阵得:若用齐次坐标表示,则有:我们称为二维变换矩阵,可以分为四个矩阵:其中对图形进行比例变换,旋转,对称,错切等变换;对图形进行平移变换,对图形进行投影变换,[i]对整体图形做比例变换.1 单一变换1.1 平移变换:往x方向移动c,往y轴方向移动f,如图所示:1.2 比例变换:1.2.1 当a=e=1时,...
2018-04-12 01:10:09
7661
1
原创 DOM2 中的事件处理程序
1 添加删除事件“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。...
2018-04-11 16:30:18
214
原创 javascript中的事件流
1 事件冒泡:IE中得事件流叫做事件冒泡,就是事件最开始的元素接收,然后逐级向上传播到不具体的节点,举个例子:<!DOCTYPE html><html><head> <title>Event Bubbling Example</title></head><body> <div
2018-04-11 16:07:21
288
原创 javascript中的范围选区
1 使用DOM范围实现简单的选择:1.1 使用electNode()方法:举个例子:<!DOCTYPE html><html><body><p id="p1"><b>Hello</b> world!</p></body></html&g
2018-04-11 00:35:30
966
原创 动态插入html元素的几种方法
1 insertNode()方法: 方法可以向范围选区的开始处(光标处)插入一个节点。举个例子:<!DOCTYPE html><html><body><p id="p1"><b>Hello</b> world!</p></body></h
2018-04-11 00:10:13
1909
原创 圆弧的生成算法(二)
正负法:算法原理:圆的方程为:F(x,y)=0;当点(x,y)在圆内时,有F(x,y)<0;若在圆外,则反之取P0(x,y)为A点,也就是所,我们可以求出Pi的点,然后接着找下一个点,方法是:当Fi(xi,yi)<0时往圆外方向走,也就是Xi+1=Xi + 1,Y+1=Yi,反之,则往园内走:Xi+1=Xi,Y+1=Yi - 1,我们推导一下递推公式:将F0初始化为0得出结论:当Fi&...
2018-04-10 22:03:35
4448
1
原创 用动态规划法求最长子串和
原题如下: Find the contiguous subarray within an array (containing at least one number) which has the largest sum. For example, given the array [-2,1,-3,4,-1,2,1,-5,4], the contiguous subarray [4...
2018-04-10 13:51:13
145
原创 圆弧的生成算法
1 Breasenham算法1.1 它的基本方法是从一个起点出发,利用判别式选择下一个显示点1.2 算法原理:假设圆心的坐标位于坐标原点,位于第一项限的1/8圆弧p1p2,它可以用方程画出:算法的每一步都选择一个离开理想圆周最近的点Pi(Xi,Yi)让他的误差项每一步都是最小的.Pi-1(Xi-1,Yi-1)是已经确定为最靠近圆弧的点,下一步x=xi-1+1时,要决定取T还是S更好.很明显,|D(...
2018-04-10 10:56:43
13049
3
原创 直线的生成的两种算法
1 DDA算法(数字微分分析法):1.1算法思想:从直线段的起点像素出发,依据直线的微分方程确定描述直线的各个像素点1.2 算法原理:直线的起点(xs,ys)终点:(xe,ye)变化量为cx=xe-xs,cy=ye-ys;我们将变化时间设为ct.则有: x[i+1]=x[i]+cx/ct; y[i+1]=y[i]+cy/ct;1.3 算法描述:void drawline(int xs,...
2018-04-10 00:38:33
4477
1
原创 在O(n)的时间复杂度空间复杂度为(1)的条件下删除有序数组的多余字符
原题如下:Given a sorted array, remove the duplicates in-place such that each element appear only once and return the new length.Do not allocate extra space for another array, you must do this by modifying...
2018-04-09 23:52:10
996
1
原创 用javascript判断字符串括号是否匹配
输入一个字符串,里面包含小括号,大括号,中括号,这个代码在市时间复杂度为n的情况下判断输入字符串是否合理.原题如下:Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.The brackets must cl...
2018-04-09 01:16:11
5709
原创 javascript的整数位数
今天偶然发现了一道题目: Given a 32-bit signed integer, reverse digits of an integer. 题目让我写一个函数,它把 integer传进来,函数返回 integer的反转数.这个题也没什么难度,但是他要求32位,而我们都知道js里的整数只有16位,这样的话,要是参数稍微大一点,肯定会溢出 所以我无奈之下将 integ...
2018-04-07 00:30:08
3395
原创 用svg来给图标绘边
首先先介绍一下 stroke-dasharray和stroke-dashoffset这两个属性1 stroke-dasharray这个属性就是给图标绘边.当 stroke-dasharray只有一个参数时,描绘的是需要,线段的长度,间隔的距离等于 stroke-dasharray的值当 stroke-dasharray有两个参数时,第一个表示线段的长度,第二个表示距离多个参数时,第奇数个参数表示线...
2018-04-04 23:59:41
260
原创 用canvas做粒子组成的动画
一般来说,用canvas做粒子都要经过几个步骤1 先初始化画布的大小,画布的环境2 计算好各个点对象的位置,半径大小,颜色3 清空画布4将所有的粒子对象画在指定的位置5循环到步骤2粒子中,静态的用粒子组成一条抛物线在这个例子中,咱们定义的画布大小等于屏幕大小,所以写了一个函数来返回屏幕的高度和宽度:var Utils={ getWindowSize: function()...
2018-04-04 23:22:06
1755
原创 javascript的闭包
闭包:闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数，仍以前面的createComparisonFunction()函数为例function createComparisonFunction(propertyName) { return function(object1, object2){ var value1 = o...
2018-04-04 19:13:53
102
原创 javascript中的垃圾收集以及内存管理
垃圾收集 javascript中的垃圾收集机制很简单:找出那些不在使用的变量,然后释放他们. 局部变量只存在在函数执行过程中,所以,当函数执行结束之后,局部变量就没有存在的必要了.但是并不是所有的变量都是那样容易判断的,所以要用一些方法来回收这些变量 1 标记清除: javascript中最常用的垃圾收集方式是清除标记.当变量进入环境时,将这个变量标记为"进入环境",当变量...
2018-04-04 10:40:15
88
原创 javascript执行环境与作用域
1 执行环境 执行环境是javascript中一个最为重要的概念,执行环境定义了变量或函数的有权访问其他数据,决定了它们各自的行为.每个执行环境都有一个与之相关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中,解析器在处理数据时会在后台使用它 全局执行环境是最外围的一个执行环境,在web浏览器中,全局执行环境被认为是window对象,因此所有的全局变量和函数都是作为w...
2018-04-04 01:07:15
90
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人