- 博客(80)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue知识点串讲
一、Vue知识点串讲复习一下Vue中的核心知识点。复习完基本的知识点以后，后面再来看一下其它的面试内容1、基本使用下面，先来看一段最简单的代码，如下所示：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&
2022-01-18 23:50:42
213
转载 Promise实现原理浅析
Promise函数总体架构结构图#mermaid-svg-ODmq6aQf592tKUAy .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-ODmq6aQf592tKUAy .label text{fill:#333}#mermaid-svg-ODmq6aQf592tKUAy .node rect,#merm
2021-04-16 17:36:49
131
原创 Vue调用外部js事件
问题描述：当项目是vue项目时，动态插入一些html/js代码的时候，此时无法交互的原因是此时dom已经加载结束，无法与Vue项目交互解决思路强行启动生命周期 将js方法定义成全局js方法实现过程：1.强行启动生命周期varMyComponent=Vue.extend({ template: '<a style="color:#07bb49;" v-on:click="world('+"'"+id+"'"+')">删除</a>', meth...
2021-01-21 16:17:18
1177
原创 less的简单整理
less对比原生的css有很大优势，至少维护起来容易的多（别瞎写的情况下）想想吧：产品突然说这个风格我不喜欢 换个风格吧（很合理吧） 不同的class有很多相同的style（很正常吧） 原本在同一个dom下的样式 在css文件里 分布的到处都是（很常见吧） 想引入别人的css但是又不想直接cv大法这些问题在css里都存在，解决这些问题的方式也有，但是很麻烦/可读性不高为了解决这些问题less的引入就有道理了简单说less对比css的优势：变量 导入 嵌入 混入 函数1.
2020-10-09 17:07:03
191
原创 js防抖的一些疑问解答:为什么addEventListener调用防抖可以，onClick不行
刚学习防抖/节流的时候就一直有一个疑问：为啥addEventListener调用防抖函数可以，但是我再HTML里写onClick方法就不行呢？百思不得其解，后来还是屈服了，用了addEventListener，但是后来学到了vue.....这下不能这么干了（因为vue不建议直接操作dom）懵圈了，在仔细整理闭包后才知道原因：这种防抖函数(生成器)的原理是防抖函数每执行一次返回一个受time变量控制的函数！上代码：/** * 防抖函数 * @param {*} func 回调函数 必传...
2020-09-02 22:55:35
1592
1
原创 css样式使用vue定义值
在vue中想要修改组件的值本来就很麻烦了在你的dom节点使用 /deep/ 或者 >>>来穿透样式：.inputSearch >>> input { border-radius: 3px 0px 0px 3px;}.inputSearch /deep/ input { border-radius: 3px 0px 0px 3px;}要想在这种情况下修改穿透样式里面的值就很麻烦，至少常规办法不行--就算你通过ref获取了dom节点也不行
2020-09-02 16:35:34
353
原创 iframe嵌套导致的无法获取serial
问题描述：当自己的页面被第三方嵌套时，无法获取serial,单独打开页面就没有这个问题刨析：新版谷歌浏览器采取了更严格的cookie管理策略，所以当老系统写的不严谨没有显示的加上serial时就会出现问题解决方法：1.最笨的办法是获取本页面的serial 并显示的为所有ajax代码加上serial2.在页面的ready函数里加上ajax拦截器 $.ajaxSetup({ data:{ "serial": getParam("serial").trim() } });
2020-08-13 17:53:56
302
原创 观察者模式浅析
//儿子class mySon { constructor(name) { this.name = name; this.status = "笑了"; this.arr = []; } //将家长插入监控组 attach(item) { debugger this.arr.push(item); } changeStatus(newStatus) { if (newStatus !== this.status) { //变化状态 .
2020-07-13 21:21:08
168
原创 手写实现防抖与节流
part1 防抖<!DOCTYPE html><html><!-- 防抖 --><!-- 防抖就是在n秒内 防止连续触发，在n秒内触发了下一次，那就重新计算 --><body> <div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:
2020-06-29 11:54:47
2147
原创 深入理解call、apply、bind等及手写实现
part0前言这三种方式 不管是哪一种其实都是通过复制目标属性并将调用目标的方法实现。比如这个应用场景：对象调用Array的sort方法==》Array.sort(obj)part1 call///call bind apply的应用 ///call let PeoSon = { name: "里", say(param) { console.log(this); console.log(`我是${this.name}`) co.
2020-06-28 21:18:18
169
原创 为什么要用添加原型的方法丰富js自定义构造函数
在js面向对象思想里，所有方法都要交给不同对象来实现具体功能，那么问题来了。我们怎么来创建对象，京可能优雅的方式创建对象呢？老夫写代码要考虑优雅？不存在的，那就一把梭！<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <script> function
2020-05-25 08:05:03
107
原创 uniappH5中使用高德API
高德的API有现成的SDK支撑安卓/IOS 但是没有专门的API支撑H5（或者说不用专门支撑）当uniapp中调用高德API的时候就会遇到问题:因为直接用<sctipt>引入外部js肯定不行了所以为了解决这个问题就必须引入在线jsAPI下面就介绍步骤1.引入在线jsAPI 专门新建个工具类，这样当需要调用地图的时候直接引用该方法就行a.直接引用js肯定不行，所以采用回调函数的方式引入b.因为高德的API是异步的，所以我们把他封装成Promise函数expo...
2020-05-19 22:34:55
5102
4
原创 02模仿格式类似Vue初探究
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&.
2020-05-08 18:01:37
122
原创 01初步模仿vue实现插值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&.
2020-05-08 17:54:52
129
原创 柯里化初步探究
柯里化代码：//柯里化 提升性能 function coliTem(obj) { console.log(obj) return function mystyle(path) { console.log(obj.name + " " + path) } } let obj = { name: "张山" } debugg...
2020-05-08 12:06:56
87
原创 数据绑定问题
1. $nextTick当数据变化的时候Dom并不会立马渲染视图，而是有一定的延迟，等待数据不变的时候再行渲染所以就会异步操作：console.log($("#id").val())this.id+=1;console.log($("#id").val())如果我们setTimeOut函数也行，但是不合理所以为了解决引入新概念$nextTick==>>...
2020-04-15 23:09:56
96
原创 Vue之计算属性computed
啥是计算属性：当一个data变化的时候想监控变化（只想取特定的值）就是计算属性计算属性用起来像属性，定义起来像方法：定义：var vm = new Vue({ el: '#example', data: { a:1, b:2, c:3 }, computed: { subAB: function () { return th...
2020-04-14 23:39:22
136
原创 Vue之scoped限制优劣
.vue文件里的style标签里加上scoped标签后就会限制所有的样式为当前组件私有，不会造成样式泄露，但是这样也会有劣势非本组件内渲染，比如不能渲染父节点（body/html/app） 动态添加的html片段不展示根据2的劣势有下面解决方案1.再加个style不加scoped属性 2.穿透 父组件/deep/子组件3.另一种穿透 >>> 替换/deep...
2020-02-04 21:26:32
779
原创 Vue之保留页码
在刷新页面的时候，页码想不动解决思路：1.url到页面（上到下）在定义router转发规则的时候，可以定义一个坑位const router=new =new VueRouter({routes:[{path:'/',redirect:'/login'}, {path:'/login',name:'login',component:Login}, {path:'/home'...
2020-02-03 22:11:53
796
原创 Vue模块化之路由router
在使用vue-cli脚手架时我们在自定义路由的时候的步骤新建router文件夹 新建router的js文件 引入Vue、router等文件 import Vue from 'vue'import VueRouter from 'vue-router' 模块化使用vue-router //模块化加载Vue.use(VueRouter) 实例化及导出路...
2020-01-29 23:55:25
317
原创 Vue之导航模式
url式导航 ---‘/one’ 声明式导航 <router-link to='one'></router-link> 编程式导航后退this.$router.back()前进 this.$router.push('one') 有记录式前进 this.$router.replace('one') 无记录式前进...
2020-01-26 19:48:13
190
原创 Vue中的获取DOM元素 refs
功能：获取DOM中的东西 跟子组件交互第一步： 注册：在dom中声明，<div ref='d'></div>第二步： 调用，获取： this.$refsrefs里的东西是键值对方式存放的...
2020-01-25 18:11:27
258
原创 Vue组件传值（父子/子父）
1.父子传值先在子组件上定义一个属性 再在props里接受，=》 props=['msg'] 在标签里可以使用了{{msg}}2.子传父传值先在子标签里自定义一个事件 =》 @msFun='msPar' 在父组件里定义一个方法接受 msPar() 在子组件调用 =》 this.$emit('msFun','子传递到父了');...
2020-01-25 00:11:06
99
原创 Vue之监听器
监听器：watch主要功能是监听数据变化基本语法是：其中监听器的方法名要和data中要监听的值相同。newValue是新值 oldValue是旧值当监听复杂类型时：比如对象要启用深度监听简单粗暴点也可以监听到具体的值：'obj.message'(newValue){ console.log(newValue) ...
2020-01-17 16:54:31
2630
原创 vue之数据响应式问题
methods: { fn() { console.log('123') // 下面 这样直接添加是不行的,是无法实现正常的数据劫持,无法正常的进行数据响应式 // this.obj.name = 'zs' // this.$set this.$set(thi...
2020-01-17 16:16:05
365
原创 Vue之DOM异步更新问题
vue采用的虚拟dom，在改变dom属性的时候采用的是异步策略document.getElementById("app").innerHTML(); this.num+=1; this.$nextTick(()=>{ console.log(num) }...
2020-01-17 15:59:13
602
原创 es6数组遍历
## ES5-数组的新方法### forEach`forEach()` 方法对数组的每个元素执行一次提供的函数。功能等同于`for`循环.应用场景：为一些相同的元素，绑定事件处理器！**需求：遍历数组["张飞","关羽","赵云","马超"]**```javascriptvar arr = ["张飞","关羽","赵云","马超"];//第一个参数：element，数组...
2020-01-17 15:03:38
333
原创 js之垃圾回收机制
js就像java一样拥有自动分配内存+垃圾回收机制在写代码的时候不注意就会造成内存泄漏解决方案：1.引用计数算法var a={ a:1}//计数1var b=a;//计数2a=null;//计数1b=null;//计数0提升释放内存2.标记清除算法但是引用计数算法是有缺陷的，当发生循环引用的时候就没法释放内存了例如：var obj1={};...
2020-01-16 15:44:00
82
原创 闭包的概念及基本语法
//啥是闭包？//官方定义：函数和声明函数的词法组合(closure)//函数 ：inner函数//声明函数 ：outer函数//词法组合 ：作用域链//组合 ：以上的组合//最简单的闭包：function outer(){ var num=10; function inner(num){ console.log...
2020-01-16 11:38:29
315
原创 vue之双向绑定
上一博客说了MVVM，这一章就讲讲双向绑定双向绑定按照Vue官方文档说的意思是实现了Object.defineProperty(),正因为ie8及以下不支持这个方法所以Vue完全无法在ie8上运行 <input type="text" id="txt" /> <script> let obj={}; let temp=""...
2020-01-15 11:02:30
143
原创 vue之设计模式MVVM
传统的前端设计模式是MVC模式===》这样一般不会优化的新手写出来的代码性能会有很大问题，为了解决这个问题，vue根据MVVM设计出了一套虚拟DOM，啥是Vue中的MVVM呢：M：数据层（后台）V：视图层（前端代码html）VM：viewModel视图数据层，也就是Vue的封装，Vue的实例名称就是vm...
2020-01-15 10:43:43
286
原创 js设计模式之桥接模式
桥接模式：对于不同维度相互组合而不是继承的方式叫桥接，也可以理解为实现与抽象相分离的方式：$(function () { var my=new myCanvas("changfangx",'red'); my.init();});////需求一个不同的形状，渲染各种颜色var shape=function (name) { this.shape...
2019-12-23 10:25:48
171
原创 js设计模式之装饰者模式
$(function () { var telInput=document.getElementById("telInput"); telInput.onclick=function () { telInput.style.display='inline-block' } decorator('telInput',function () { ...
2019-12-20 16:35:12
67
原创 js设计模式之建造者模式
$(function () { var Person=function (name,work) { var _person=new Human() _person.name=new Names(name); _person.work=new Work(work); return _person } var person...
2019-12-20 09:18:08
87
原创 js设计模式之抽象工厂模式
var VehicleFactory =function (subType,superType) { if(typeof VehicleFactory[superType]==='function'){ //开始复制父类给子类 subType.constructor=subType; subType.prototype=new Vehic...
2019-12-19 17:10:06
100
原创 js设计模式之安全工厂模式
$(function () { Factory('Java','TEXT')});var Factory=function(type,text){ if(this instanceof Factory){ var s=new this[type](text); return s }else{ return new ...
2019-12-19 14:53:58
155
原创 js基础之立即执行函数
立即执行函数的格式为funtion f1(){ (function (text){ alert(text) })(text)}也就是说最外面的那个括号是立即调用这个该函数的意思，括号里面可以写参数...
2019-12-19 11:53:19
94
原创 js基础之闭包
js闭包听上去可能不好理解但是可以粗略的理解为： 供外部访问内部方法/变量的机制由于js链式作用域链的存在，导致外部无法直接调用内部变量，所以如果将内部变量直接return出来，不久解决了么直接上测试代码：function f1(){ var i=999; var f2=function () { alert(i); } ...
2019-12-19 09:50:44
73
原创 JS设计模式之简单工厂模式
$(function () { var userNameAlter=createPopup("alert","验证");});function createPopup(type,text){ var o=new Object(); o.content=text; o.show=function () { alert("显示"); }...
2019-12-19 09:30:02
81
转载 nginx+lua+redis实现token校验
环境搭建1.nginx lua环境搭建安装前准备好如下软件包· nginx 地址：http://www.nginx.org· luajit 地址：http://luajit.org/download.html· HttpLuaModule 地址：http://wiki.nginx.org/HttpLuaModule1. 下载安装LuaJIT# cd /usr/local/src...
2019-11-06 14:43:41
1349
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人