- 博客(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
205
原创 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
408
原创 原型链
创建对象之设计模式 工厂模式 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
275
原创 去掉 可选择型el-tree 根节点的复选框
最终效果如下： 查看树结构代码我们知道，只有叶子节点（没有子节点的节点）有单独的class标识is-leaf，如果是单独操作叶子节点则可以从这个标识下手； 而要操作根节点，在节点层层嵌套的情况下，可以利用直接子元素来解决： .el-tree > .el-tree-node > .el-tree-node__content .el-checkbox { display: non...
2019-11-13 17:39:10
4027
原创 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
5115
原创 ['1', '2', '3'].map(parseInt)
这道题大家应该经常会碰到，我们打印一下结果 想要彻底弄懂同类型的题，我们必须先弄懂map，parseInt map array.map(function(currentValue, index, arr), thisValue) 参数解析： item：第一个参数，数组中正在处理的当前元素（必选） index：第二个参数，数组中正在处理的当前元素的索引（可选） thisArr：第三个参数，ma...
2019-10-22 15:02:07
206
原创 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
202
原创 JS数据类型转换
当操作符两边的操作数类型不一致或者不是基本类型（也叫原始类型）时，需要进行类型转化。 隐式转换规则： 转成string类型： +（字符串连接符） 转成number类型：++ / – (自增自减运算符)、+ - * / %(算术运算符)、 > <、 >= <=、 == != 、=== !=== (关系运算符) 转成boolean类型：!（逻辑非运算符） 复杂类型的隐式转...
2019-10-18 20:18:45
220
原创 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
1142
原创 按值传递和按引用传递
对于基本类型而言,是按值传递的 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
297
原创 ES6新增的Symbol
基础数据类型 ES6中引入了一种新的数据类型symbol，它是JS的第七种基础数据类型，前六种分别为：undefined、null、Boolean、String、Number、Object 由于Symbol是一种基础数据类型，所以当我们使用typeof去检查它的类型的时候，它会返回一个属于自己的类型symbol let s = Symbol() typeof s // "symbol" 我们可以...
2019-08-21 15:37:07
244
原创 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
26554
1
原创 call()、apply()和bind()的区别
同 在js中，call、apply、bind这三个方法主要是为了改变函数中this的指向 var a = { name: "阿里巴巴", fn:function(){ console.log(this.name); } } var b = a.fn b() //undefined b.call(a) // 阿里巴巴 b.apply(a) // 阿里巴巴 ...
2019-06-18 17:14:02
127
原创 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
2286
6
原创 箭头函数的this和普通函数的this有何不同
在我们讲解之前先以一道题引入： const shape = { radius: 10, diameter() { return this.radius * 2; }, perimeter: () => 2 * Math.PI * this.radius } shape.diameter() // 20 shape.perimeter() // NaN 经过多番查阅...
2019-06-18 11:19:36
3258
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
18592
14
原创 chrome扩展Octotree：高效解读GitHub仓库的代码
在线查看github代码的时候，往往不能一览无余，除了clone到本地解读，还可以安装扩展，更高效的在线浏览代码结构，Octotree就是扩展之一 安装效果图 直接Octotree的github为例展示 展开时： 折叠后： 左侧的tree结构就是Octotree的功劳，结构清晰 支持下载单个文件：hover到左侧tree目录上即可显示下载图标 下载： octotree源码github ...
2019-06-05 18:46:24
267
翻译 ajax跨域
看慕课网ajax课程小做了一下笔记，具体如下 为什么会发生跨域？ 浏览器限制 有时候请求返回200，但是还是报跨域error，就是因为浏览器做了安全限制 跨域（协议、域名、端口任意不同引起） 发出的请求是xhr（xmlHttpRequest）类型 发出的如果不是xhr请求，就算有跨域问题也不会报错（比如静态资源） 这三个原因同时满足才可能引起跨域问题 解决思路 我们从引起跨域的三...
2019-06-05 17:23:22
175
原创 vue根据用户权限配置动态路由
首先让我们了解一下前端路由：路由router全部配置在前端，根据用户权限判断可以进入哪些页面 缺点： vue初始化的时候需要挂载全部路由，对性能有影响 安全性低，用户可以在地址栏跳转到无权访问的页面（可优化） 动态路由则是根据用户信息获取权限，简单来说就是根据用户信息获取其对应的权限，生成对应的路由挂载，然后动态渲染有权限的菜单于侧边栏 实现 定义静态路由（登录或者公用页面）、动态路由，vu...
2019-06-05 17:01:41
8586
3
原创 token验证机制
最近在vue-cli项目实现登录的过程中用到了token验证，在此总结如下 1. 客户端以用户名与密码为参数请求登录API 2. 服务端收到登录请求去验证用户名与密码 3. 验证通过,服务端会生成Token,再把这个Token响应给客户端. 4. 客户端收到Token,存储到本地,如Cookie,SessionStorage,LocalStorage.我们选择了cookie 5. 客户端每次向服务...
2019-05-08 15:30:32
278
原创 TCP的三次握手与四次挥手
TCP(Transmission Control Protocol)协议是一种面向连接的、相对可靠的传输控制协议（虽说是面向连接，其实也就是通信双方保持一个‘连接’状态） 三次握手和四次挥手是TCP协议中比较重要的部分，它们都是为数据传输而服务的，一个是在数据传输开始之前建立连接，一个是在数据传输结束之后关闭连接 接下来就简单说一下这个过程： 关于各种状态以及发送的报文信息，上图已经表现的很清楚...
2019-05-08 15:25:44
146
原创 实现表格的固定列和表头的效果
前言 基于表格横向有超多数据的需求，渲染量比较大，使用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
2360
原创 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
3175
翻译 实现表格内编辑、新增
效果 实现过程 关于input框：是否处在可编辑状态主要取决于自定义的isInput属性 关于取消操作：判断是新增row触发还是修改row触发主要决定于row的id是否为0 dom部分： <el-table :data="domainData" style="width: 100%"> <el-table-column label="域名"> &l...
2019-04-29 14:54:26
559
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人