JavaScript
文章平均质量分 52
Carol小朋友
正在努力成为一名优秀的前端程序媛~
展开
-
虚拟DOM和diff算法
虚拟DOM(Virtual dom),也就是我们常说的虚拟节点,它是通过JS的Object对象模拟DOM中的节点,然后再通过特定的render方法将其渲染成真实的DOM的节点。为什么要使用虚拟DOM呢,因为操作真实DOM的耗费的性能代价太高,频繁的操作DOM,会大量的造成页面的重绘和回流,出于性能优化的考虑,我们应该减少重绘和回流的操作。对虚拟节点的DOM操作,并不会触发重绘和回流,把处理后的虚拟节点映射到真实DOM上,只触发一次重绘和回流。我们都知道Vue是基于数据驱动的,数据变化之后,不会像jQue原创 2020-07-30 15:41:56 · 225 阅读 · 0 评论 -
require和import的区别
node编程中最重要的思想就是模块化,import和require都是被模块化所使用。遵循规范require 是 AMD规范引入方式import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法调用时间require是运行时调用,所以require理论上可以运用在代码的任何地方import是编译时调用,所以必须放在文件开头本质require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量import是解构过程,但是目原创 2020-07-30 14:31:19 · 429 阅读 · 0 评论 -
ES6中的Set和Map
SetSet是ES6中提供的一种新的数据结构。类似于数组,但是成员值都是唯一的,不会重复。它本身是一个构造函数,生成Set数据结构。var s=new Set();属性:Set.prototype.constructor:指向构造函数SetSet.prototype.size:返回set实例的成员总数方法:add(value):添加value,并返回Set结构本身delete(...原创 2018-12-13 16:32:10 · 83 阅读 · 0 评论 -
JavaScript中各种遍历方法的总结
for最基础的循环for…in可以用来遍历对象var o ={ name:"jack", age:20, city:"beijing"};for (var key in o){ alert(key) //"name","age","city"}for…of可以遍历所原创 2018-12-13 16:52:53 · 137 阅读 · 0 评论 -
MVVM、MVC、MVP之间的区别
MVC、MVP及MVVM都是一种架构模式,都是用来解决界面呈现和逻辑代码分离而出现的模式。MVC实线表示调用,虚线表示事件通知。Model:是程序需要操作的数据以及数据的处理方法。View:它是提供给用户的操作界面。Controller:页面的业务逻辑,接收View层传递过来的指令,选取Model层对应的数据,进行相应操作。MVC是单向通信的。用户对View的操作交给了Contro...原创 2018-12-13 17:37:55 · 267 阅读 · 0 评论 -
TypeScript总结
TypeScript主要是为了解决JavaScript的弱类型和没有命名空间的特点。JS作为弱类型语言,好处就是编译的时候更简洁更灵活,但对于大型项目,强类型更有利,可以降低系统的复杂度,在编译时就发现类型错误。在语法上,TypeScript并没有摒弃JS语法,而是做成了JS的超集,因此任何JS语句在TypeScript下都是合法的。安装通过npm安装npm install -g type...原创 2018-12-18 10:39:35 · 1491 阅读 · 0 评论 -
移动端适配之脚本的加载控制
我在写项目的时候,会把一些特效用script脚本加载进来,这样在网页上看起来就非常漂亮,但是放在移动端,不仅消耗性能,而且非常的丑。于是我经过学习,发现可以这样来控制是否加载script。拿我用的CDN上的蜂窝特效举例:<script src="canvas-nest.min.js" type="text/javascript"></script>这是一开始我的写...原创 2018-12-29 16:54:52 · 199 阅读 · 0 评论 -
setTimeout()比setInterval()稳定的原因
setInterval()的问题使用setInterval()的问题在于,定时器代码可能在代码再次被添加到队列之前还没有完成执行,结果导致定时器代码连续运行好几次,而之间没有任何停顿。而javascript引擎对这个问题的解决是:当使用setInterval()时,仅当没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中。这确保了定时器代码加入到队列中的最小时间间隔为指定间隔但是,这样...原创 2019-01-21 10:31:13 · 783 阅读 · 0 评论 -
JS中的类型判断问题
if([]==false){console.log(1)};if({}==false){console.log(2)};if([]){console.log(3)}if([1]==[1]){console.log(4)}答:1 3== 是非严格比较操作符,false会转换为0,[]会转换成’’,{}会转换为"[object Object]",空数组和0的值都是false,所以会输出1,...原创 2019-01-31 15:58:13 · 160 阅读 · 0 评论 -
async/await执行顺序面试题
async function async1 () { console.log('async1 start') await async2(); console.log('async1 end')} async function async2 () { console.log('async2')} console.log('script start') setTimeo...原创 2019-02-14 23:35:43 · 2581 阅读 · 5 评论 -
从一个无序,不相等的数组中,选取N个数,使其和为M实现算法
function getCombBySum(array,sum,tolerance,targetCount){ var util = { /* get combination from array arr: target array num: combination item length return: one array that c...原创 2019-02-14 23:48:39 · 2233 阅读 · 0 评论 -
js中各种长度的含义
offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距...原创 2019-02-15 09:46:26 · 474 阅读 · 0 评论 -
打乱数组
sort排序法(最简单)原理:利用sort用法:arr.sort(compareFunction)如果 compareFunction(a,b) 返回的值大于 0 ,则 b 在 a 的前边;如果 compareFunction(a,b) 返回的值等于 0 ,则a 、b 位置保持不变;如果 compareFunction(a,b) 返回的值小于 0 ,则 a 在 b 的前边。let...原创 2019-02-16 17:37:20 · 152 阅读 · 0 评论 -
懒加载
1.懒加载概念对于页面有很多静态资源的情况下(比如网商购物页面),为了节省用户流量和提高页面性能,可以在用户浏览到当前资源的时候,再对资源进行请求和加载。2.懒加载实现原理2.1监听onscroll事件判断资源位置首先为所有懒加载的静态资源添加自定义属性字段,比如如果是图片,可以指定data-src为真实的图片地址,src指向loading的图片。然后当资源进入视口的时候,将src属性值...原创 2019-02-16 19:10:36 · 108 阅读 · 0 评论 -
JavaScript数组扁平化
数组扁平化,也就是把包含几个嵌套数组的数组转化成一个一维数组。有以下几种方法:1.reduce遍历数组每一项,若值为数组就递归遍历,否则cancatfunction flatten(arr) {return arr.reduce((result, item)=&gt; {return result.concat(Array.isArray(item) ? flatten(item) : ...原创 2018-12-13 00:06:56 · 409 阅读 · 0 评论 -
JavaScript柯里化
柯里化就是分批接受参数,不会立刻求值,而是到了需要的时候才去求值。主要用于数据量非常大的情况。在形式上,柯里化就是把接收多个参数的函数变为接收单一参数的函数(需要柯里化的函数的第一个参数),并且返回一个接收剩下的参数并返回结果的新函数。本质上,柯里化利用的是闭包。例如一个加法函数:function add(x,y){ return x + y;}add(3,4);//5将它...原创 2018-12-12 23:49:49 · 190 阅读 · 0 评论 -
防抖和节流
防抖(debounce)和节流(throttle)是针对响应跟不上触发频率这类问题的两种解决方案。防抖(debounce)当事件被触发时,设定一个周期延迟执行动作,若期间又被触发,则重新设定周期,直到周期结束,执行动作(用于搜索输入)function debounce(fn, delay) { // 维护一个 timer,用来记录当前执行函数状态 let timer = null;...原创 2018-12-12 23:45:15 · 109 阅读 · 0 评论 -
JavaScript中的this、apply()、call()、bind()
thisthis是函数执行时基于函数的执行环境绑定的,指向最后调用它的那个对象。例1:function a(){ var name= "Carol"; console.log(this.user); //undefined console.log(this); //Window}a();最后一个调用a的是全局对象Window,因此a的this指向Window,...原创 2018-11-28 23:02:33 · 97 阅读 · 0 评论 -
JavaScript数据类型及深拷贝与浅拷贝
JavaScript的数据类型分为基本类型和引用类型。基本类型基本类型包括undefined、null、string、number、boolean、(ES6中还有Symbol)这些类型是存放在栈中的,数据大小确定,可按值访问,直接操作保存在变量中的实际值。var a = 10;var b = a;b = 20;console.log(a); // 10console.log(b);...原创 2018-11-28 23:32:28 · 114 阅读 · 0 评论 -
跨域解决方案总结
同源策略浏览器为了保证用户信息的安全,防止恶意网站窃取数据,禁止不同域之间的JS进行交互。对于浏览器而言,只要域名、协议、端口中有一个不同就会引发同源策略。同源策略限制以下行为:1.Cookie、LocalStorage 和 IndexDB 无法读取2.DOM 和 JS 对象无法获取3.Ajax请求无法发送跨域场景跨域解决方案1. JSONP为了减轻web服务器的负载,JS、...原创 2018-11-29 01:42:04 · 114 阅读 · 0 评论 -
ajax异步请求的过程
AJAXAJAX是异步JavaScript和XML(Asynchronous JavaScript And XML),它是一种方法,允许网页在不重新加在整个页面的情况下更新一部分网页。AJAX异步请求的过程AJAX的核心是XMLHttpRequest对象,其中的方法可以用来在浏览器和服务器之间传输数据。1.创建XMLHttpRequest对象var xhr=new XMLHttpRequ...原创 2018-11-29 19:58:19 · 349 阅读 · 0 评论 -
JavaScript设计模式之工厂模式
工厂模式是用来创建对象的一种最常用的设计模式。把创建对象的具体逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂。工厂模式根据抽象程度的不同可以分为:简单工厂,工厂方法和抽象工厂。简单工厂模式简单工厂模式又叫静态工厂模式,由一个工厂对象决定创建某一种产品对象类的实例。主要用来创建同一类对象的不同实例。function createPerson (name,age) { var p...原创 2018-11-29 22:40:14 · 100 阅读 · 0 评论 -
异步编程的解决方案之async/await
什么是asyncasync其实是在ES7里出现的一种解决异步的方案。它是Generator函数的语法糖,本质上就是把Generator函数和自动执行器包装在一个函数中。async function fn(args){ // ...}等同于function fn(args){ return spawn(function*() { // ... }); }这个s...原创 2018-11-27 19:37:29 · 139 阅读 · 0 评论 -
JavaScript的异步编程方法
JS的单线程机制由于JS是单线程机制,任务的前后顺序是不能变的,在未执行完上一段代码时,不能做其他的事情,只能等待它执行完毕才能继续执行后面的代码。如果出现耗时较多的操作就会阻塞后面的代码。为什么不设计成多线程呢?因为JS是一门浏览器脚本语言,最开始只是为了处理一些表单验证和DOM操作被创造出来的,只能是单线程,否则会带来一些复杂的同步问题。例如在两个线程同时做增加和删除的操作,就无法处理。...原创 2018-11-27 22:38:13 · 137 阅读 · 0 评论 -
JavaScript数组去重的几种方式
1.利用ES6 Set的内容不重复的特性function unique (arr) { return Array.from(new Set(arr))}var arr = [];console.log(unique(arr));2.利用for循环嵌套比较,splice()删除重复function unique(arr){ for(var i...原创 2018-11-30 21:02:01 · 157 阅读 · 0 评论 -
异步编程的解决方案之Promise
Promise是一种异步解决方案,是对传统回调函数方法的一种改进。作用(1)解决回调地狱,使函数顺序执行(2)使用then继续返回一个promise对象可以实现链式调用三种状态pending(进行中)resolved(成功)rejected(失败)创建Promise实例Promise对象是一个构造函数,接受一个函数作为参数,这个函数的两个参数分别是resolve和reject,分...原创 2018-11-28 17:35:23 · 251 阅读 · 0 评论 -
异步编程的解决方案之Generator
Generator是ES6中新提出的一种异步编程解决方案。可以将Generator理解为一个状态机,封装了多个内部状态。它与普通函数不同之处在于它可以暂停执行以及恢复执行。语法在function和函数名之间加*号以区分普通函数。用yield来标识需要暂停的地方。function *gen(x){ var y = yield x + 2; return y;}使用next()...原创 2018-11-28 18:25:33 · 251 阅读 · 0 评论 -
JavaScript闭包的理解
闭包是指有权访问另一个函数作用域中的变量的函数。作用域作用域分为全局作用域和局部作用域。全局作用域:最外层函数定义的变量拥有全局作用域,任何内部函数都可以访问。局部作用域:只在固定的代码片段内可以访问,函数外部无法访问。全局变量都是全局对象window的一个属性。作用域链作用域链就是根据内部函数可以访问外部函数变量的这种机制,链式向上查找决定哪些数据可以被内部函数访问。当某一个函数...原创 2018-11-28 19:21:03 · 92 阅读 · 0 评论 -
JavaScript内存泄漏
内存泄漏就是没有及时释放不再用到的内存。内存泄漏会使内存占用越来越高,带来性能问题,严重时还可能造成崩溃。垃圾回收机制标记清除这是大多数浏览器使用的方法。当变量进入执行环境时,垃圾回收器将其标记为“进入环境”,当变量离开环境时(函数执行结束)将其标记为“离开环境”并回收其内存。引用计数这是低版本IE浏览器采用的方式,易引起内存泄露。跟踪一个值的引用次数,声明一个变量并将一个引用类型...原创 2018-11-28 20:32:38 · 164 阅读 · 0 评论 -
bind()的原生实现
bind()方法创建并返回一个新的函数,当被调用时,将其this设为bind()的第一个参数。自己实现一个bind()1.因为bind方法不会立即执行函数,需要返回一个待执行的函数(这里用到闭包,可以返回一个函数)return function(){}2.作用域绑定,可以使用apply或者call方法来实现3.参数传递,需要用apply或call传递数组this.value = 2va...原创 2018-12-12 22:58:54 · 143 阅读 · 0 评论 -
JavaScript中的原型与原型链
原型原型是一个对象,通过原型可以实现对象的属性继承。JavaScript中,只有函数才有prototype属性。_proto_是每个对象都拥有的属性。这两个属性就是new的过程实现的关键。当一个函数被用作构造函数来创建实例时,这个函数的prototype属性值会被作为原型赋值给对象实例,也就是会被赋给实例对象的_proto_属性。new的过程:1.创建一个空对象var obj={};...原创 2018-11-28 21:44:24 · 133 阅读 · 0 评论