李弈圣-CSDN博客

原创 let和const

1.let 命令let 定义的变量只在let命令所在的代码块内有效。并且let定义的变量不存在变量提升，意味着不可以先使用后申明，会报错。也不允许重复定义。// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;...

2019-12-23 14:09:52 154

转载 vue原理的简单实现

const Observer = function (data) { for (let key in data) { defineReactive(data, key); }}const defineReactive = function (obj, key) { const dep = new Dep(); let val = obj[key...

2019-07-19 15:44:35 228

转载记录call、apply和bing的区别

call()方法这个方法的第一个参数表示this指向的对象，后面的所有参数都是函数的参数。例如：function sayName(label) { console.log(label+'--->'+this.name)}var name = '张三';var person1 = { name: '李四'};var person2 = { name: '王...

2019-07-19 09:59:04 649

原创 d3.js的demo

<!DOCTYPE html><html style="overflow: hidden;"><head> <meta charset="UTF-8"> <title>流程设计工具</title> <link href="https://cdn.bootcss.com/bootstrap/4....

2019-07-17 11:22:08 1414

原创 vue使用echarts引入离线地图（geo.json）并切换省市（以四川为例）

首先安装echartsnpm install echarts --save然后再main.js中引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts在需要使用的vue组件中，就可以使用this.$echarts调用echarts的方法接下来注册地图//引入地图离线文件import sichu...

2019-07-12 10:46:20 9286 5

原创 vue通过路由实现对部分组件进行缓存（keep-alive）

首先在router中，设置meta属性keepAlive{ path:'/svglink', name: 'svglink', component: () => import('@/components/SvgMain/SvgLink.vue'), meta: { keepAlive: true } },然后在组件中，通过v-if将需要缓存的组件放到keep-...

2019-04-17 16:29:09 2935

原创 vue的状态更新（异步更新解决方案）

在vue中状态更新是异步的，这一点和react中的setstate类似。解决方案非组件解决方案：<div id="example">{{message}}</div>var vm = new Vue({ el: '#example', data: { message: '123' }})vm.message = 'new message' ...

2019-03-18 15:43:27 6626

原创 vue自定义指令

简单的例子当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: ...

2019-03-18 14:26:09 113

为什么是单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制...

2019-03-18 10:22:31 5535

原创 vue的计算属性和侦听器

计算属性缓存 vs 方法按照官网的实例，计算属性和方法使用后的效果是一致的。但是，计算属性是基于它们的依赖进行缓存，换句话说，只要计算属性依赖的值没有发生改变，那么计算属性就不会重新求值。<p>Reversed message: "{{ reversedMessage() }}"</p>// 方法methods: { reversedMessage: func...

2019-03-12 15:45:56 101

原创 webpack搭建react项目

package.json{ "name": "react-project-demo-20181016", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "w

2019-01-11 09:50:14 327

原创 vue学习笔记（2）

过滤器content | 过滤器,vue中没有提供相关的内置过滤器,可以自定义过滤器组件内的过滤器 + 全局过滤器组件内过滤器就是options中的一个filters的属性（一个对象）多个key就是不同过滤器名,多个value就是与key对应的过滤方式函数体Vue.filter(名,fn)输入的内容帮我做一个反转例子:父已托我帮你办点事总结全局：范围大，如果出现...

2019-01-03 21:23:34 133 1

原创 vue学习笔记（1）

准备开始学员反馈下午感觉要起飞了,给我们点时间练一下保留最终解释权晕晕乎乎的一天就过去了保留最终解释权1.后端代码的抽取感觉还可以，前端代码抽取懵，关于哪个需要依赖、注入，哪个不需要依赖、注入，不懂？输入服务是需要使用的时候配置期 config -&amp;gt; 可以注入供应商服务对象，对于具体服务进行配置运行期非config都算是运行期 ...

2019-01-03 21:21:09 168

原创 vscode中调试webpack构建的项目

在webpack的配置中： devtool: 'source-map',launch.json中配置{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request&am

2019-01-02 12:13:30 6306

原创 js对字符串的常用操作方法

replace() 方法replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。stringObject.replace(regexp/substr,replacement)// regexp/substr 必需。规定子字符串或要替换的模式的 RegExp 对象。//replacement 必需。一个字符串值。规定了替换文本或生成替换文本的函数。...

2018-12-29 14:25:35 252

原创使用antd的tree组件画树形结构（重点在于数据的处理）

二话不说先上代码import _ from 'underscore'import $ from 'jquery'let spreadArr = []//功能id树的方法export function changeToTree(data,name,id) { //原始数据名称数组 id数组 return createTreeData(getAllNodes(data, name,...

2018-12-29 14:13:33 14948

原创策略模式

策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使他们可以相互替换。很多公司的年终奖都是与绩效有关的，假如绩效S的4倍工资，A的3倍，B的两倍，写一个函数计算员工的年终奖，最初我们的设计可能是这样的：var calculateBonus = function (level, salary) { if (level === 'S') { return salary * 4;...

2018-10-31 11:14:28 77

原创 JavaScript闭包

对于闭包一种很准确的定义：无论通过何种手段将内部函数传递到所在的词法作用域以外，它都会持有对原始定义作用域的引用，无论在何处执行这个函数都会使用闭包。function foo () { var a = 2; function bar () { console.log(a); } return bar;}var baz = foo();baz(); //2 这就是闭包的效果...

2018-10-30 17:02:37 108

原创 JavaScript的原型

JavaScript中的对象有一个特殊的【Prototype】内置属性，其实就是对于其他对象的引用。几乎所有的对象在创建时【Prototype】属性都会被赋予一个非空的值。对于默认的【get】操作来说，如果无法在对象本身找到需要的属性，就会继续访问对象的【Prototype】原型链：var anotherObject = { a: 2};//创建一个关联到anotherObject的对象...

2018-10-30 15:40:19 121

原创 JavaScript对象及其属性和方法

1 浅复制Object.assign()方法实习对象的浅复制，其实就是使用 = 来赋值。var newObject = Object.assign({}, myObjext)2 属性描述符Object.getOwnPropertyDescriptor(…)获取属性描述符var myObject = { a: 2}Object.getOwnPropertyDescriptor(my...

2018-10-30 14:44:20 258

原创 JavaScript中this的用法

1 this是什么每个函数的this是在调用的时候绑定的，完全取决于函数的调用位置（也就是函数的调用方法）。需要注意的一点是，调用位置就是函数在代码中被调用的位置（而不是申明的位置）。一下举例来说明函数的调用位置：2 this的绑定2.1 默认绑定function foo() { console.log(this.a)}var a = 2;foo(); //2这段代码中，fo...

2018-10-30 11:05:24 1284

原创单例模式

var o = '123'

2018-10-29 17:20:13 114

转载 call和啊apply的区别

语法区别&gt; apply()方法function.apply(thisObj[, argArray])&gt; call()方法function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);它们各自的定义apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的...

2018-10-29 17:09:48 107

李弈圣的博客