lovexiaoqiu的博客

// 节流function throttle(fn,delay = 500) { console.log(delay) let timer = null return function() { if (timer) { return } timer = setTimeout(()=>{ console.log(this) fn.apply(this,argu

// 函数防抖let timer = nullinput.addEventListener('keyup',function(){ if (timer) { clearTimeout(timer) } timer = setTimeout(()=>{ console.log(input.value) timer = null },500)})

function http({ url, type, data, dataType }) { return new Promise(function (resolve, reject) { var xhr = window.XMLHttpRequest ? new XMLHttprequest() : new ActiveXObject('Microsoft.XMLHttp'); xhr.onreadystatechange = function () { .

function bindEvent(elem,type,selector,fn){ if (fn == null) { fn = selector selector = null } elem.addEventListener(type,event=>{ const target = event.target if (selector) { // 代理绑定 if

const listNode = document.getElementById("list")// 创建一个片段,此时还没有插入到DOM树中const frag = document.createDocumentFragment()// 执行插入for (let x=0; x<10;x++) { const li = document.createElement('li') li.innerHTML = 'List item' + x frag.appendCh.

function loadImg(src){ return new Promise((resove,reject)=>{ const img = document.createElement('img') img.onload = ()=>{ resove(img) } img.onerror = ()=>{ let err = new Error('图片加载失败').

闭包的主要表现有两种 ，一个作为 函数返回值，一个作为 参数。作为函数返回值function demo(){ let a = 100 return function(){ console.log(a) }}let a = 200demo()作为参数function fn1(fn){ const a = 100 fn()}const a = 200function fn(){ console.log(a)}fn1(fn)闭包的简单应用

bind 函数 重点是参数的处理Function.prototype.bindcopy = function(){ const args = Array.prototype.slice.call(arguments) const t = args.shift() const self = this return function(){ return self.apply(t,args) }}

简易的jQuery 对象class jQuery{ // 构造函数 constructor(selector){ const result = document.querySelectorAll(selector); const length = result.length for (let i=0;i<length;i++) { this[i] = result[i] } this.length = length this.selector = selecto

说道深拷贝，就不得不提浅拷贝，浅拷贝往往是指只拷贝了对象或数组的内存地址，就是说，改变之前的对象或数组时，拷贝后的对象或数组连带着都会改变，但深拷贝，不会出现前面的情况，因为，深拷贝是真正意义上的对象属性或数组元素的完全复制，不受之前对象或数组的影响。下面就来手写一个简单的深拷贝deepClone(obj={}){ // obj 是 null,或者不是对象和数组,直接返回 if (typeof obj !== 'object' || obj == null) { return obj }

之前，一直写vue的前端的小伙伴们，对于组件的使用，很熟悉，比如，封装一个组件，往组件里传值，复用等。可是去写小程序后，会发现，小程序的组件，准确来说，应该叫模板，只能复用，wxml 和wxss，也就是只能复用 html 和 css，这样就不能传入值到组件中，实现不同情境下的复用。给写惯了vue，的开发者来说，会有些不适应，同时，给开发带来了很大的困难。好消息是，最近小程序已经支持，传入值到组件...

对于商城项目来说，商品分类的页面，往往需要用到滚动效果。类似于下面这种。如果，纯手动用原生css的去写的话，会比较麻烦。但是如果利用cube-ui这个UI库，会很快的实现这个效果，而且兼容性还比较好。下面简单的说下，实现的过程。scroll-nav在页面引入scroll-nav 这个组件，然后在里层再嵌套一个组件，cube-scroll-nav-panel。下面是代码。 <cub...

随着浏览器对css3属性的支持，flex布局运用的越来越多。今天，简单的说下flex的几个常用属性之间的关系。flex-directionflex-direction 主要有四个属性值。 row row-reverse column column-reverseflex 布局的方向。垂直和水平。reverse 为取反。但是 reverse 后，水平和垂直方向上有些不用，水平上方向revers...

移动端，常见的tab切换效果比较多，今天，我就用cube-ui ，这个移动端非常火的UI框架来实现。我们使用vue来做tab切换效果的时候，往往倾向于用路由实现，其实也可以用组件来实现，而且在滑动效果的细节上更加完善。

cube-ui 安装和使用在vue-cli 中安装cube-ui 的时候，需要注意版本，vue-cli 版本 >= 3.0 直接一行命令就行了。vue add cube-ui而且在安装cube-ui 的时候，它就已经自动的将组件导入到了 main.js中了，不需要手动导入了。安装cube-ui后，会自动生成这个文件。是一个配置文件。但vue-cli 版本 <= 3.0 的时候...