- 博客(25)
- 收藏
- 关注
RSS订阅原创 谈谈JS继承
1、原型链继承如果想深入了解更多原型的内容，可以参考之前的文章function Parent(value) { this.parentVal = 'parent'}Parent.prototype.getParentValue = function() { return this.parentVal}function Child() { this.childVal = 'chi...
2019-12-13 13:58:49
192
原创 JS中new的实现
我们知道，JS中的new操作符可以用来创建构造函数的实例对象，比如下????：function Cat(name, age) { this.name = name this.age = age}var cat1 = new Cat('小米', 2) // Cat { name: "小米", age: 2 }我们打印一下cat1:那么new内部到底做了什么呢❓听我们娓娓道来...
2019-12-05 18:49:02
401
原创 原型链
创建对象之设计模式工厂模式function createCat(name, age) { var o = new Object() o.name = name o.age = age o.sayName = function() { console.log(this.name) } return o}var cat = cre...
2019-11-25 14:56:18
265
原创 去掉 可选择型el-tree 根节点的复选框
最终效果如下：查看树结构代码我们知道，只有叶子节点（没有子节点的节点）有单独的class标识is-leaf，如果是单独操作叶子节点则可以从这个标识下手；而要操作根节点，在节点层层嵌套的情况下，可以利用直接子元素来解决：.el-tree > .el-tree-node > .el-tree-node__content .el-checkbox { display: non...
2019-11-13 17:39:10
4000
原创 el-table自定义表头
类似实现这类功能；方法一<el-table-column width="150"> <template slot="header" slot-scope="slot"> <span class="strategy-column">*</span> <span>告警类型</span> </templa...
2019-10-24 16:41:01
5095
原创 ['1', '2', '3'].map(parseInt)
这道题大家应该经常会碰到，我们打印一下结果想要彻底弄懂同类型的题，我们必须先弄懂map，parseIntmaparray.map(function(currentValue, index, arr), thisValue)参数解析：item：第一个参数，数组中正在处理的当前元素（必选）index：第二个参数，数组中正在处理的当前元素的索引（可选）thisArr：第三个参数，ma...
2019-10-22 15:02:07
198
原创 a == 1 && a == 2 && a == 3
js中有7种数据类型，可以分为两类：基础类型(原始值)：Undefined、 Null、 String、 Number、Boolean、 Symbol(es6新出的)复杂类型(对象值)：object什么情况下能正确打印‘success’？var a = ???if(a == 1 && a == 2 && a == 3 ){ consol...
2019-10-18 20:20:54
198
原创 JS数据类型转换
当操作符两边的操作数类型不一致或者不是基本类型（也叫原始类型）时，需要进行类型转化。隐式转换规则：转成string类型： +（字符串连接符）转成number类型：++ / – (自增自减运算符)、+ - * / %(算术运算符)、 > <、 >= <=、 == != 、=== !=== (关系运算符)转成boolean类型：!（逻辑非运算符）复杂类型的隐式转...
2019-10-18 20:18:45
201
原创 vue router 报错：Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated"...}
问题（知其然）触发操作：在项目开发中，重复点击当前菜单路由会报错，报错不影响功能使用报错详情如下：原因（知其所以然）经过多方查找&实践，发现是vue-router的版本问题引起的。vue-router的更新日志显示 v3.1.0 版本的路由跳转改用了 promise 的方式，针对于路由跳转相同的地址，如果没有捕获到错误，控制台始终会出现上面的错误下方是vue-router v...
2019-10-14 16:03:28
1129
原创 按值传递和按引用传递
对于基本类型而言,是按值传递的var a = 1;function test(x) { x = 10; console.log(x); // 10}test(a);console.log(a); // 1按值传递的意思就是形参是实参的复制，形参实参互不干扰So，虽然在函数test中a被修改，但是并没有影响到函数外部a的值那么复杂类型呢？按值传递还是引用类型传递？引用类型...
2019-08-28 16:45:31
282
原创 ES6新增的Symbol
基础数据类型ES6中引入了一种新的数据类型symbol，它是JS的第七种基础数据类型，前六种分别为：undefined、null、Boolean、String、Number、Object由于Symbol是一种基础数据类型，所以当我们使用typeof去检查它的类型的时候，它会返回一个属于自己的类型symbollet s = Symbol()typeof s // "symbol"我们可以...
2019-08-21 15:37:07
235
原创 element框架中el-table表格列的筛选功能
关于表格的前端筛选，element文档已经讲解的很详细了，这里不多加介绍，我们主要说一下后端筛选如何实现1、el-table-column需要绑定filter筛选项<el-table-column prop="tag" label="标签" :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"&...
2019-06-27 18:17:33
26507
1
原创 call()、apply()和bind()的区别
同在js中，call、apply、bind这三个方法主要是为了改变函数中this的指向var a = { name: "阿里巴巴", fn:function(){ console.log(this.name); }}var b = a.fnb() //undefinedb.call(a) // 阿里巴巴b.apply(a) // 阿里巴巴...
2019-06-18 17:14:02
121
原创 let存在变量提升么？
答案是Yes，会提升，但是没有被初始化不信的话可以比较一下以下代码：let a = 'code'{ console.log(a) // code}let b = 'js'{ console.log(b) // Uncaught ReferenceError: Cannot access 'b' before initialization let b = 'css'}...
2019-06-18 14:06:04
2259
6
原创 箭头函数的this和普通函数的this有何不同
在我们讲解之前先以一道题引入：const shape = { radius: 10, diameter() { return this.radius * 2; }, perimeter: () => 2 * Math.PI * this.radius}shape.diameter() // 20shape.perimeter() // NaN经过多番查阅...
2019-06-18 11:19:36
3248
1
原创 element-ui的el-table和el-form表单校验嵌套使用
在项目有遇到table中嵌套form，并且带有表单验证的需求，效果图如下：刚开始el-form-item定义了静态prop（prop=“sn”），结果input填入值后错误提示一直存在，自定义校验的value也为undefined，然后经百度大神提点，得知出错在prop⚠️应该写动态prop保证唯一性。:prop="'monitorData.' + scope.$index + '....
2019-06-07 14:11:34
18560
14
原创 chrome扩展Octotree：高效解读GitHub仓库的代码
在线查看github代码的时候，往往不能一览无余，除了clone到本地解读，还可以安装扩展，更高效的在线浏览代码结构，Octotree就是扩展之一安装效果图直接Octotree的github为例展示展开时：折叠后：左侧的tree结构就是Octotree的功劳，结构清晰支持下载单个文件：hover到左侧tree目录上即可显示下载图标下载：octotree源码github...
2019-06-05 18:46:24
254
翻译 ajax跨域
看慕课网ajax课程小做了一下笔记，具体如下为什么会发生跨域？浏览器限制有时候请求返回200，但是还是报跨域error，就是因为浏览器做了安全限制跨域（协议、域名、端口任意不同引起）发出的请求是xhr（xmlHttpRequest）类型发出的如果不是xhr请求，就算有跨域问题也不会报错（比如静态资源）这三个原因同时满足才可能引起跨域问题解决思路我们从引起跨域的三...
2019-06-05 17:23:22
165
原创 vue根据用户权限配置动态路由
首先让我们了解一下前端路由：路由router全部配置在前端，根据用户权限判断可以进入哪些页面缺点：vue初始化的时候需要挂载全部路由，对性能有影响安全性低，用户可以在地址栏跳转到无权访问的页面（可优化）动态路由则是根据用户信息获取权限，简单来说就是根据用户信息获取其对应的权限，生成对应的路由挂载，然后动态渲染有权限的菜单于侧边栏实现定义静态路由（登录或者公用页面）、动态路由，vu...
2019-06-05 17:01:41
8552
3
原创 token验证机制
最近在vue-cli项目实现登录的过程中用到了token验证，在此总结如下1. 客户端以用户名与密码为参数请求登录API2. 服务端收到登录请求去验证用户名与密码3. 验证通过,服务端会生成Token,再把这个Token响应给客户端.4. 客户端收到Token,存储到本地,如Cookie,SessionStorage,LocalStorage.我们选择了cookie5. 客户端每次向服务...
2019-05-08 15:30:32
269
原创 TCP的三次握手与四次挥手
TCP(Transmission Control Protocol)协议是一种面向连接的、相对可靠的传输控制协议（虽说是面向连接，其实也就是通信双方保持一个‘连接’状态）三次握手和四次挥手是TCP协议中比较重要的部分，它们都是为数据传输而服务的，一个是在数据传输开始之前建立连接，一个是在数据传输结束之后关闭连接接下来就简单说一下这个过程：关于各种状态以及发送的报文信息，上图已经表现的很清楚...
2019-05-08 15:25:44
135
原创 实现表格的固定列和表头的效果
前言基于表格横向有超多数据的需求，渲染量比较大，使用el-table的固定列功能会出现2～3秒的卡顿，所以自己实现了一个固定头+列的表格效果脱离element-ui又借鉴element-ui，实现类似el-table的固定列和表头的效果1-1固定，1-2只支持上下滑动，2-1只支持左右滑动，2-2上下、左右均可滑动其中下图中1-2和2-1两part的滑动事件应用了el-table的mou...
2019-04-30 16:23:44
2329
原创 keyup.enter和blur绑定同一事件，触发两次的问题
有个需求，要求input框失焦或者键盘按下Enter键时触发handleAddDomain事件，但是实际上在按下Enter键后，会触发两次handleAddDomain事件<el-input class="input-new-tag" v-if="inputDomainVisible" v-model.trim="inputDomainVal" ref="s...
2019-04-29 15:21:56
3160
翻译 实现表格内编辑、新增
效果实现过程关于input框：是否处在可编辑状态主要取决于自定义的isInput属性关于取消操作：判断是新增row触发还是修改row触发主要决定于row的id是否为0dom部分：<el-table :data="domainData" style="width: 100%"> <el-table-column label="域名"> &l...
2019-04-29 14:54:26
545
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人