- 博客(43)
- 收藏
- 关注
RSS订阅原创 jquery input框自动填充与防抖函数
实现input框自动填充效果html<input class="search-txt" type="text" name="search-txt" placeholder="请输入"><script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.js"></script>js逻辑1、监听input框输入的值val2、根据输入的val发送请求3、采用loadsh插件，控制输入
2020-08-27 10:22:32
890
原创 自定义指令的钩子函数
<!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>Doc
2020-08-06 23:37:24
812
原创 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>Doc
2020-08-06 23:35:38
185
1
原创 工厂模式
简单工厂模式<script> var factory=function(name,age,sex,national){ this.name=name this.age=age this.sex=sex switch(national){ ca...
2019-10-28 18:38:41
91
原创 代理模式
<script> //没有代理时 var shoe=function(name){ this.name=name } shoe.prototype.getName=function(){ return this.name } var star=...
2019-10-28 18:36:53
73
原创 单例模式
单例模式:通过使用一个实例解决内存占用问题例1<script> var zhansgsan=(function(){ var zhangsan=function(msg){ this.menling=msg } var men var in...
2019-10-27 20:20:26
88
原创 图片预加载jqurey插件
//图片预加载(function($){ function Preload(imgs,options){ this.img=(typeof imgs==='string')?[imgs]:imgs this.options=$.extend({},Preload.DEFAULTS,options) this._unoredered() ...
2019-10-27 17:01:51
107
原创 求a,b,c的交集
// 求a,b,c的交集 function main(a,b,c){ var arr=b.filter(function(item){ return a.includes(item) }) var newArr=arr.filter(function(item){ ...
2019-10-13 21:14:51
733
转载 JS自制SEO框架（js案例）
该框架主要功能有：阻止事件冒泡、阻止默认事件、获取元素、添加事件、删除事件、单个事件代理，多个事件代理、清除class、获取滚动距离等框架代码如下：var sEO={ $:function(exp){//获取对象（1个、多个） var el; if (/^#\w+$/.test(exp)){ el=document.queryS...
2019-10-13 11:26:43
762
转载 购物车实现
html代码：<body onselectstart="return false;"><template id="temp"> <tr> <td> <input type="checkbox" class="check" checked> </td> ...
2019-10-13 11:24:30
176
原创 契波那契数列
function fun(n){ if(n===1){ return 0 } if(n===2){ return 1 } return fun(n-1)+fun(n-2) } cons...
2019-10-12 21:39:23
954
原创 js中找见出现次数最多的元素和次数
function findMost(arr){ if(arr.length==1){return 1} var newArr={}//创建一个空数组 var maxName; var maxNum=0; for(var i in arr){ newArr[i]?newArr[i]+=1?newArr[i]=1//将数组中的值赋给属性，如果属性存在就将值进行加+1 } for(va...
2019-10-11 22:07:48
493
1
原创 微信小程序异步请求
逻辑层：1、wx.request(url:"") 向服务器发起请求2、获得数据res.data3、修改页面中data的值 采用this.setData(进行修改)
2019-10-08 20:42:47
161
原创 前端性能优化
图片方面1、采用css精灵图2、对于图片的各种格式有一个了解3、采用图片的懒加载javaScript方面1、将脚本放在页面的底部2、善于运用异步的操作3、代码的压缩4、js代码的格式，合理采用封装继承5、采用外部引入的方式6、避免过多的DOM操作7、尽量少用全局变量，尽量使用局部变量8、组件延迟加载CSS优化1、把CSS放在head中加载服务器优化1、GZIP压缩...
2019-10-06 00:52:21
69
原创 对symbol的理解
<!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-U...
2019-10-05 21:04:02
418
原创 iterator接口
简单总结一下：es6提供了一个iterator接口，并将接口部署到不同的数据结构上（数组、字符串、arguments对象、set、map数据结构）特点：可以用for…of…循环遍历概念iterator是一个接口机制，为各种不同的数据结构提供统一的访问机制作用概念：iterator是一个接口机制，为各种不同的数据结构提供统一的访问机制作用：1、为各种数据结构提供一个统一的、简便的访问接...
2019-10-05 20:47:19
1004
原创 对promise对象初步的理解
原理：通过执行异步任务的结果修改promise的状态，调用Promise实例对象里边then方法中成功或者失败的回调1、理解promise对象，代表了未来某个要发生的事件（通常时一个异步操作）有了promise对象，可以将异步的操作以同步的操作表达出来，避免了层层嵌套的的回调函数（回调地狱）es6的Promise是一个构造函数，用于生成promise实例2、基本步骤（两步）（1）创建一...
2019-10-05 18:42:02
188
原创 vue事件修饰符
事件冒泡：当点击按钮时控制台：触发了btn上面的事件 触发了div的点击事件阻止事件冒泡：@click.stop=small 触发了btn上面的事件阻止默认行为 @click.pervent捕获触发事件 @click.capture只有点击当前元素时才触发 @click.self使用once只触发一次 @click.once<!DOCTYPE html...
2019-10-05 16:14:27
85
原创 vue表单添加内容到页面中
业务逻辑层1、首先采用v-model实现数据双向绑定2、当点击添加时将数据添加到一个空数组中3、做一个循环<li v-for="value in arr">{{value}}</li><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
2019-10-05 15:46:19
2101
原创 vue跑马灯实例
业务逻辑层1、字符串截取第一个字符和剩余字符，将其倒装拼接起来2、放置到定时器中（注意：此处可以采用箭头函数，不修改this的指向）3、将定时器设置在对象上，便于操作开始和清除功能4、做判断，可以不打开多个定时器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
2019-10-05 15:38:02
289
原创 数据劫持和数据代理笔记
MVVM 双向数据绑定 数据劫持+发布者订阅模式（不兼容低版本 Object.defineProperty）vue不能新增不存在的属性没有get和set方法，不会监控数据的变化深度响应 因为每次赋予一个新对象增加prototypey<!DOCTYPE html><html lang="en"><head> <meta cha...
2019-10-05 13:14:57
718
原创 自定义组件和参数传递
（1） list:自定义组件 li:要替换的组件 components:注册函数 template:替换的关键字（2）参数传递:props:[数据1,数据2]接受数组类型值,可以把父类组件的值传给子类组件全局组件 全局组件 Vue.component("list",{ template:"<li>{{cons}}</li&g...
2019-10-02 16:10:39
722
原创 vue对象和函数
1、外部调用变量和函数（1）通过$data获取（2）通过实例化就可以获取<script src="vue.js"></script> <script> window.onload=function fun(){ var value={a:1,b:2} var v=new Vue({ ...
2019-10-02 16:04:47
1142
原创 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-U...
2019-10-02 14:09:36
87
原创 数组总结
1、创建数组 //创建数组 var arr1=new Array() var arr2=[]2、检测数组（1）判断对象的constructor是否指向Array，接着判断特殊的属性length，splice等。（应用的是construtor的定义：返回对象所定义的构造函数） var arr=[] console.lo...
2019-10-02 10:53:05
61
原创 js数组淘宝筛选练习
<!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-U...
2019-10-01 22:36:28
160
原创 深拷贝与浅拷贝
1、浅拷贝复制的是指向对象的指针，并没有开辟新的内存，原对象和新对象共享的是同一块内存，所以修改新对象会影响原对象2、深拷贝会开辟新的内存地址，原对象和新对象不共享同一内存，修改新对象不会影响到原来对象（1）深拷贝 var o={ x:1, y:2, z:...
2019-10-01 22:28:08
85
原创 将伪数组变成数组
1、Array.prototype.slice.call()2、[…args]3、es6中的from()方法 var div=document.getElementsByTagName("div") console.log(div)//HTMLCollection(6) [div, div, div, div, div, div] ...
2019-10-01 20:38:34
193
原创 排序
1、排序算法(1)插入排序① 直接插入排序把n个待排序的元素看成为一个有序表和一个无序表。开始时有序表中只包含1个元素，无序表中包含有n-1个元素，排序过程中每次从无序表中取出第一个元素，将它插入到有序表中的适当位置，使之成为新的有序表，重复n-1次可完成排序过程。因此，从上面的描述中我们可以发现，直接插入排序可以用两个循环完成：第一层循环：遍历待比较的所有数组元素第二层循环：将本轮选...
2019-09-29 16:29:40
90
原创 es6总结1
1、let 块级作用域解决了事件循环泄露的问题和setTimeout异步的问题for(var i=0;i<10;i++){ setTimeout(() => { console.log(i) }, 0); }//输出10个10for(var i=0;i<10;i++){ ...
2019-09-29 10:37:28
77
原创 js中循环点击事件
<!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-U...
2019-09-29 10:10:09
3123
原创 es6 中super关键字的理解
1、被当作函数引用时，代表父类的构造函数类似于super()相当于A。prototype.constructor.call(tihs)实质是先创建父类的实例对象，必须先调用super，然后给子类添加this2、super作为对象使用时在普通方法中指向父类的原型对象此处的super.x就是将super作为对象使用，类似于A.prototype.x因此定义在父类原型对象上的属性和方法可以通...
2019-09-29 09:21:28
638
原创 es6中class的理解
// 继承的区别// es5：是先生成子类的实例，给子类添加this关键字的引用，然后再将父类的方法添加到this上进行引用，例如parent.call(this)// es6:继承机制完全不同，实质是先创建父类的实例对象，必须先调用super，然后给子类添加this //super关键字 //1、被当作函数引用时，代表父类的构造函数 //2、super当被作为对象时，再普通方法中指向父...
2019-09-28 23:27:20
187
原创 关于es6中对象代理的理解
1、es3中将其设为局部变量，然后采用闭包的方式set和get方法 var Person=function(){ var data={ name:"张三", age:"18", sex:"男" } th...
2019-09-27 10:04:41
226
原创 对AJAX的浅薄的理解
AJAX（Asynchronous Javascript and XML）异步的javascript和XML首先，它不是一种编程语言，是可以在不加载整个页面的情况下局部更新的一种技术核心是XMLHttpRequest通过XMLHttpRequest和web浏览器进行数据的交互和异步，然后通过javascript操作dom，实现动态的局部刷新1、创建一个XMLHttpRequest对象va...
2019-09-26 21:28:50
82
原创 jsDOM事件流
事件流表示的是从页面接收事件的顺序事件冒泡：从当前触发的最里边的顺序向上冒泡事件捕获：与事件冒泡完全相反事件处理程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev...
2019-09-25 22:02:17
229
原创 对组合继承的理解
组合继承在结合原型链继承和构造器继承，结合了两者的优点，用原型链继承方法，将公用的方法放在构造函数下面的原型对象上；用构造器继承属性，避免了引用类型的属性被所有实例共享； //组合继承 function Father(name,age){ this.name=name this.age=age; this.say=function(){ ...
2019-09-25 17:19:58
145
原创 原型链继承和构造函数继承
//原型链继承 function Father(name,age){//构造器 this.name=name; this.age=age; this.say=function(){ console.log(this.name) } } Father.prototype.walk=function(){...
2019-09-24 22:34:31
1099
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人