LuckXinXin的博客

原创 hybrid 存在价值

可以快速迭代更新【关键】（无需 app 审核，思考为何？）体验流畅（和 NA 的体验基本类似）减少开发和沟通成本，双端公用一套代码

原创 hybrid 是什么

hybrid 文字解释hybrid 即“混合”，即前端和客户端的混合开发需前端开发人员和客户端开发人员配合完成某些环节也可能涉及到 server 端PS：不要以为自己的前端就可以不理会客户端的知识

原创 是否用过 jQuery 的 Deferred

原创 什么是单线程，和异步的关系

单线程 - 只有一个线程，只能做一件事原因 - 避免 DOM 渲染的冲突浏览器需要渲染 DOMJS 可以修改 DOM 结构JS 执行的时候，浏览器 DOM 渲染会暂停两段 JS 也不能同时执行（都修改 DOM 就冲突了）webworker 支持多线程，但是不能访问 DOM解决方案 - 异步...

原创 谈谈变量提升？

当执行 JS 代码时，会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境接下来让我们看一个老生常谈的例子，varb() // call bconsole.log(a) // undefinedvar a = 'Hello world'function b() { console.log('call b')}变量提升这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误.

原创 防抖/节流

防抖在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。可以通过函数防抖动来实现// 使用 underscore 的源码来解释防抖动/** * underscore 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行 * * @param {function} func 回调函数 * @param {number} wait 表示时间窗口的间隔 * @param {boolean} immediate

原创 深浅拷贝

浅拷贝Object.assign或者展开运算符深拷贝可以通过 JSON.parse(JSON.stringify(object)) 来解决let a = { age: 1, jobs: { first: 'FE' }}let b = JSON.parse(JSON.stringify(a))a.jobs.first = 'native'console.log(b.jobs.first) // FE该方法也是有局限性的会忽略 unde

原创 尽可能多的说出你对 Electron 的理解

最最重要的一点，electron 实际上是一个套了 Chrome 的 nodeJS程序所以应该是从两个方面说开来Chrome （无各种兼容性问题）；NodeJS（NodeJS 能做的它也能做）

原创 WebSocket

由于 http 存在一个明显的弊端（消息只能有客户端推送到服务器端，而服务器端不能主动推送到客户端），导致如果服务器如果有连续的变化，这时只能使用轮询，而轮询效率过低，并不适合。于是 WebSocket被发明出来相比与 http 具有以下有点支持双向通信，实时性更强；可以发送文本，也可以二进制文件；协议标识符是 ws，加密后是 wss ；较少的控制开销。连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决.

原创 浏览器缓存

浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下先根据这个资源的一些 http header 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些request header验证这个资源是否命中协商缓存，称为http再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；强缓存和协商缓存共同之处在于，如果命中缓存，服务器.

原创 项目做过哪些性能优化？

减少 HTTP 请求数减少 DNS 查询使用 CDN避免重定向图片懒加载减少 DOM 元素数量减少DOM 操作使用外部 JavaScript 和 CSS压缩 JavaScript 、 CSS 、字体、图片等优化 CSS Sprite使用 iconfont字体裁剪多域名分发划分内容到不同域名尽量减少 iframe 使用避免图片 src 为空把样式表放在link 中把JavaScript放在页面底部...

原创 怎么判断两个对象相等？

obj={ a:1, b:2}obj2={ a:1, b:2}obj3={ a:1, b:'2'}可以转换为字符串来判断JSON.stringify(obj)==JSON.stringify(obj2);//trueJSON.stringify(obj)==JSON.stringify(obj3);//false

原创 封装一个函数，参数是定时器的时间，.then执行回调函数

function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time));}

原创 使用js实现一个持续的动画效果

定时器思路var e = document.getElementById('e')var flag = true;var left = 0;setInterval(() => { left == 0 ? flag = true : left == 100 ? flag = false : '' flag ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`}, 1000 / 60)request

原创 Javascript全局函数和全局变量

全局变量Infinity 代表正的无穷大的数值。NaN 指示某个值是不是数字值。undefined 指示未定义的值。全局函数decodeURI() 解码某个编码的 URI。decodeURIComponent() 解码一个编码的 URI 组件。encodeURI() 把字符串编码为 URI。encodeURIComponent() 把字符串编码为 URI 组件。escape() 对字符串进行编码。eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。isFi

原创 （设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）

给需要拖拽的节点绑定mousedown, mousemove, mouseup事件mousedown事件触发后，开始拖拽mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置mouseup时，拖拽结束需要注意浏览器边界的情况...

原创 数组去重方法总结方法十二

方法十二、[...new Set(arr)][...new Set(arr)]//代码就是这么少----（其实，严格来说并不算是一种，相对于第一种方法来说只是简化了代码）

原创 数组去重方法总结方法十一

方法十一、利用reduce+includesfunction unique(arr){ return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{}

原创 数组去重方法总结方法十

方法十、利用Map数据结构去重function arrayNonRepeatfy(arr) { let map = new Map(); let array = new Array(); // 数组用于返回结果 for (let i = 0; i < arr.length; i++) { if(map .has(arr[i])) { // 如果有该key值 map .set(arr[i], true); } else { map .set(arr[i], fals

原创 数组去重方法总结方法九

方法九、利用递归去重function unique(arr) { var array= arr; var len = array.length; array.sort(function(a,b){ //排序后更加方便去重 return a - b; }) function loop(index){ if(index >= 1){ if(array[index] === array[index-1]){

原创 数组去重方法总结方法八

方法八、利用filterfunction unique(arr) { return arr.filter(function(item, index, arr) { //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素 return arr.indexOf(item, 0) === index; });}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, n

原创 数组去重方法总结方法七

方法七、利用hasOwnPropertyfunction unique(arr) { var obj = {}; return arr.filter(function(item, index, arr){ return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true) })} var arr = [1,1,'true','true',true,

原创 数组去重方法总结方法六

方法六、利用includesfunction unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return } var array =[]; for(var i = 0; i < arr.length; i++) { if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值

原创 数组去重方法总结方法五

方法五、利用对象的属性不能相同的特点进行去重function unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return } var arrry= []; var obj = {}; for (var i = 0; i < arr.length; i++) { if (!obj[arr[i]]) {

原创 数组去重方法总结方法四

方法四、利用sort()function unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return; } arr = arr.sort() var arrry= [arr[0]]; for (var i = 1; i < arr.length; i++) { if (arr[i] !== arr[i-1]) {

原创 数组去重方法总结方法三

方法三、利用indexOf去重function unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return } var array = []; for (var i = 0; i < arr.length; i++) { if (array .indexOf(arr[i]) === -1) { array .

原创 数组去重方法总结方法二

方法二、利用for嵌套for，然后splice去重（ES5中最常用）function unique(arr){ for(var i=0; i<arr.length; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二个 arr

原创 数组去重方法总结方法一

方法一、利用ES6 Set去重（ES6中最常用）function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr)) //[1, "true", tr

原创 获取页面所有的checkbox

var resultArr= [];var input = document.querySelectorAll('input');for( var i = 0; i < input.length; i++ ) { if( input[i].type == 'checkbox' ) { resultArr.push( input[i] ); }}//resultArr即中获取到了页面中的所有checkbox

原创 addEventListener()和attachEvent()的区别

addEventListener()是符合W3C规范的标准方法; attachEvent()是IE低版本的非标准方法addEventListener()支持事件冒泡和事件捕获; - 而attachEvent()只支持事件冒泡addEventListener()的第一个参数中,事件类型不需要添加on; attachEvent()需要添加'on'如果为同一个元素绑定多个事件, addEventListener()会按照事件绑定的顺序依次执行, attachEvent()会按照事件绑定的顺序倒序执行.

原创 window.onload和$(document).ready

原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕function ready(fn){ if(document.addEventListener) { //标准浏览器 .

原创 Javascript中callee和caller的作用？

caller是返回一个对函数的引用，该函数调用了当前函数；callee是返回正在被执行的function函数，也就是所指定的function对象的正文那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用callee完成）var result=[]; function fn(n){ //典型的斐波那契数列 if(n==1){ return 1; }e.

原创 正则表达式

正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\表示一个\）。使用正则表达字面量的效率更高邮箱的正则匹配：var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;...

原创 怎样添加、移除、移动、复制、创建和查找节点

创建新节点createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点添加、移除、替换、插入appendChild() //添加removeChild() //移除replaceChild() //替换insertBefore() //插入查找getElementsByTagName() /.

原创 希望获取到页面中所有的checkbox怎么做？

不使用第三方框架 var domList = document.getElementsByTagName(‘input’) var checkBoxList = []; var len = domList.length;　　//缓存到局部变量 while (len--) {　　//使用while的效率会比for循环更高 　　if (domList[len].type == ‘checkbox’) { 　　checkBoxList.push(domList[len]); 　　} }.

原创 如何渲染几万条数据并不卡住界面

这道题考察了如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s.

原创 快速的让一个数组乱序

var arr = [1,2,3,4,5,6,7,8,9,10];arr.sort(function(){ return Math.random() - 0.5;})console.log(arr);

原创 let var const

let允许你声明一个作用域被限制在块级中的变量、语句或者表达式let绑定不受变量提升的约束，这意味着let声明不会被提升到当前该变量处于从块开始到初始化处理的“暂存死区”var声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全局的由于变量声明（以及其他声明）总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明const声明创建一个值的只读引用 (即指针)基本数据当值发生改变时，那么其对应的指针也将发生改变，故造成 const申明基本数据

原创 事件的各个阶段

1：捕获阶段 —> 2：目标阶段 —> 3：冒泡阶段document —> target目标 ----> document由此，addEventListener的第三个参数设置为true和false的区别已经非常清晰了true表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件false表示该元素在事件的“冒泡阶段”（由内向外传递时）响应事件...

原创 说一下Vue的双向绑定数据的原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调