JavaScript
关注
分享
扫一扫
哒玲
这个作者很懒，什么都没留下…
展开
-
JS继承的实现方式
1) 原型链继承原型链是由原型对象组成，每个对象都有 __proto__属性，指向了创建该对象的构造函数的原型， __proto__将对象连接起来组成了原型链。是一个用来实现继承和共享属性的有限的对象链。核心：将父类的实例作为子类的原型：SubType.prototype = new SuperType()。缺点：– 在包含引用类型值（除了undefined,Null,Bool...原创 2019-02-24 20:55:01 · 352 阅读 · 0 评论 -
移动端响应式布局
目前主流设计稿为iphone6或iphone8尺寸：750*1334。目前主流的适配移动端页面方法：用rem做单位，通过css3媒体查询来改变html中的font-size值。rem 是相对于 html 元素的 font-size 的一个单位。1. 步骤加重置样式reset.css/normalize.css确保字体设置及基础样式在各终端有相同的值。通过rem的方式适配移动设备。2. ...转载 2019-04-28 22:57:52 · 552 阅读 · 0 评论 -
闭包的作用
闭包的作用有:封装私有变量模仿块级作用域(ES5中没有块级作用域)实现JS的模块原创 2019-07-15 18:06:38 · 293 阅读 · 0 评论 -
网页性能优化
1. 网络加载⑴ DNS预加载通过dns-prefetch属性可以让浏览器提前解析资源或接口对应的服务器IP地址，避免在请求中发起DNS解析请求，节省请求时间。⑵ CDN加速CDN的优点： 本地Cache加速，加快访问速度 镜像服务，消除运营商之间互联的瓶颈影响，保证不同网络的用户都能得到良好的访问质量 远程加速，自动选择cache服务器 带宽优化，分担网络流量，...原创 2019-05-27 09:41:26 · 6708 阅读 · 1 评论 -
防抖和节流
防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于设置的时间，防抖的情况下只会调用一次，而节流的情况会每隔一定时间调用一次函数。1. 防抖⑴ 函数防抖（debounce）：n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。如下例，对于高频操作Mousemove，没有限制count函数执行频率时，数字在不停的加一：<...转载 2019-05-27 11:16:09 · 482 阅读 · 0 评论 -
原生js中如何添加dom元素
1. appendChild()概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。使用方式：fatherdom.appendChild( insertdom )。兼容性：所有浏览器都支持此方法。2. insertBefore()概念：把要插入的节点添加到指定父级里面的指定节点之前。使用方式：fatherdom.insertBefore( insertdom，chose...原创 2019-05-22 22:15:56 · 39095 阅读 · 1 评论 -
for...of，for...in，forEach和map的区别
1. for…of循环具有 iterator 接口，就可以用for...of循环遍历它的成员(属性值value)。for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象、Generator 对象，以及字符串。for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。对于普通的对象，for...of结构不能直接使用，会报错，必须部署了 Iter...原创 2019-05-27 17:09:52 · 4096 阅读 · 1 评论 -
web安全
这为博主写的很好，还有相应的实例https://juejin.im/post/5cd6ad7a51882568d3670a8e#heading-0转载 2019-06-13 23:51:52 · 135 阅读 · 0 评论 -
正则表达式
老姚：https://juejin.im/post/5965943ff265da6c30653879#comment老师写得很精炼易懂，有记忆点，收藏。转载 2019-06-25 14:43:17 · 139 阅读 · 0 评论 -
js中的数据类型
1. 基本数据类型和复杂数据类型基本类型：undefined，null，bool，string，number，symbol(ES6新增)。虽然 typeof null 返回的值是 object，但是null不是对象，而是基本数据类型的一种。这是一个历史遗留问题，JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象，null 表示为全零，所...原创 2019-06-25 17:47:05 · 161 阅读 · 0 评论 -
call、apply及bind的实现原理
1. call和applycall 和 apply 的功能相同，都是改变 this 的执行，并立即执行函数。区别在于传参方式不同。func.call(thisArg, arg1, arg2, ...)：第一个参数是 this 指向的对象，其它参数依次传入。func.apply(thisArg, [argsArray])：第一个参数是 this 指向的对象，第二个参数是数组或类数组。2. c...原创 2019-07-15 16:29:13 · 2272 阅读 · 1 评论 -
实现Promise.all、Promise.race、Promise.finally
1. 实现Promise.all实现思路promise.all(iterable)返回一个新的promise实例。此实例在iterable参数内所有的promise都fulfilled或者参数中不包含promise时，状态才变成fulfilled；如果参数中有一个失败rejected，此实例回调失败，失败的信息是第一个失败promise的返回结果。let p1 = new Promise...原创 2019-07-21 20:54:10 · 5845 阅读 · 0 评论 -
发布订阅模式和观察者模式
1. 发布订阅先实现一个简单的发布订阅：const fs = require('fs');const school = {};let e = { arr: [], on(fn) { this.arr.push(fn); }, emit() { this.arr.forEach(fn => fn()); }}...原创 2019-09-25 20:17:34 · 308 阅读 · 0 评论 -
详解Promise的实现
1. 初级版首先要确定promise有什么特点：promise是一个类；每次new 一个promise 都需要传递一个执行器 执行器是立即执行的；执行器函数中有两个参数 resolve reject；默认promise有三个状态 pending => fulfilled 表示成功了，pending => rejected 表示失败了；如果一旦成功了，不能变成失败；一旦失...原创 2019-09-25 23:02:53 · 877 阅读 · 0 评论 -
原生js实现拖拽
1. 预备知识offsetTop/offsetLeft ：调用者：任意元素。(盒子为主)作用：距离父系盒子中带有定位的距离。scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)调用者：document.body.scrollTop作用：浏览器无法显示的部分（被卷去的部分）。clientY/clientX:调用者：event.clientX/clientY作...原创 2019-05-29 16:05:06 · 361 阅读 · 0 评论 -
原型/构造函数/实例--傻傻分不清楚
原型 (prototype):一个简单的对象，用于实现对象的属性继承。可以简单的理解成对象的爹。在 Firefox 和 Chrome 中，每个 JavaScript对象中都包含一个 proto (非标准)的属性指向它爹(该对象的原型)，可 obj.__proto__进行访问；构造函数:可以通过 new来 新建一个对象 的函数；实例:通过构造函数和 new创建出来的对象，便是实...转载 2019-02-24 20:58:31 · 1770 阅读 · 0 评论 -
浏览器及内核
1. 浏览器现在主流的浏览器有：IE浏览器、Opera浏览器、Safari浏览器、Firefox浏览器以及Chrome浏览器。IE浏览器IE是微软公司旗下浏览器，是目国内用户量最多的浏览器。Opera浏览器Opera是挪威Opera Software ASA公司旗下的浏览器。现在采用的是Blink内核。Safari浏览器：Safari浏览器是苹果公司开发的，是最早使用webkit内核...原创 2019-02-25 10:29:45 · 271 阅读 · 0 评论 -
用js实现动画
1. 体验动画<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width原创 2019-03-01 20:01:35 · 24903 阅读 · 1 评论 -
焦点图
结构&lt;div class="box" id="box"&gt; &lt;div class="inner"&gt; //图片 &lt;ul&gt; &lt;li&gt;&lt;a href原创 2019-03-01 20:54:01 · 249 阅读 · 0 评论 -
图片懒加载的实现
1. datasetHTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。dataset自定义属性的格式：data-xx；前面的data-是固定的，后面的xx一般为表示与自定义属性相关的字符串。img标签中的data-src属性就属于一种自定义的dataset属性。举个例子：&lt;div id="today" data-food="sushi" ...原创 2019-03-16 16:23:21 · 7399 阅读 · 1 评论 -
迭代器和生成器
我们在用循环语句迭代数据时，必须要初始化一个变量来记录每一次迭代在数据集合中的位置，var values = [1, 2, 3];for(var i=0, len=values.length; i&amp;lt;len; i++) { console.log(value[i]);}上面的for循环通过变量i跟踪数组的索引。虽然语法简单，但是如果将多个循环嵌套则需要追踪多个变量，代码的复杂度会...原创 2019-04-20 21:23:13 · 271 阅读 · 0 评论 -
js实现缓动动画
我们都知道实现动画的原理就是：盒子未来的位置 = 盒子当前的位置+步长。那么缓动动画实现就是步长越来越小。盒子慢慢停下的效果。根据这个原理实现一个缓动的效果：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title><原创 2019-04-20 21:24:08 · 1097 阅读 · 0 评论 -
函数柯里化
1. 定义柯里化是指这样一个函数(假设叫做createCurry)，他接收函数A作为参数，运行后能够返回一个新的函数。并且这个新的函数能够处理函数A的剩余参数。假如有一个接收三个参数的函数A：function A(a, b, c) { // TODO something}又假如我们有一个已经封装好了的柯里化通用函数createCurry。他接收bar作为参数，能够将A转化为柯里...转载 2019-04-20 22:25:13 · 437 阅读 · 1 评论 -
函数式编程
1. 函数式编程当我们想要使用一个函数时，通常情况下其实就是想要将一些功能，逻辑等封装起来。相信大家对于封装这个概念并不陌生。我们在初学时，往往会不由自主的使用命令式编程的风格来完成我们想要干的事情。因为命令式编程更加的简单，直白。例如我们现在有一个数组，array = [1, 3, 'h', 5, 'm', '4']，现在想要找出这个数组中的所有类型为number的子项。当我们使用命令式编程...转载 2019-04-23 15:53:46 · 139 阅读 · 0 评论 -
深拷贝with浅拷贝
浅拷贝: 以赋值的形式拷贝引用对象，仍指向同一个地址，修改时原对象也会受到影响Object.assign(target,source1,source2...) 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。注意前面说的是可枚举属性，这是一个介于完全的深拷贝和完全的浅拷贝之间的方法：❶ 如果我们把它的第一个参数target设置为一个空对象 {}，同时保证剩余的源对象sou...原创 2019-04-21 21:29:11 · 221 阅读 · 0 评论 -
js和异步
关于以js和异步编程一直理解的不够透彻，这两个不是相斥的吗？1、js和异步js引擎是基于单线程事件循环的概念构建的，即同一时刻只允许一个代码块执行，与之相反的Java/C++，它们允许许多个不同的代码块同时执行。js将即将运行的代码块放在一个**任务队列（job queue）**中，每当js引擎中的一段代码结束执行，**事件循环（event loop）**会执行队列中的下一个任务。但是对于一...原创 2019-04-22 21:40:46 · 375 阅读 · 0 评论 -
js浮点数/大数相加
console.log(0.1 + 0.2); //0.30000000000000004console.log(0.1 + 0.2 === 0.3); //false原因在于 js的 Number 是IEEE 754标准的64-bits的双精度数值，这是一种二进制表示法，可以精确地表示分数，比如1/2，1/8，1/1024。但是，二进制浮点数表示法并不能精确的表示类似0.1这样 的简...原创 2019-04-26 11:20:15 · 3901 阅读 · 0 评论 -
Vue3.0之proxy代替object.definProperty()
在最新的Vue 3.0，一个很重要的改变就是将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。对于Object.defineProperty大家应该在学习Vue中的响应式数据时深有体会，它可以 重写属性的 get 与 set 方法，从而完成监听数据的改变。1. Vue 2.x中的 Object.defineProperty实现响应式数据...原创 2019-04-22 11:56:34 · 3602 阅读 · 0 评论 -
最全的跨域总结
在面试中不止一次被问到了对跨域的理解，总是答得不尽人意，今天就来总结一下跨域中的方方面面。1. 浏览器的同源策略浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。所谓“同源”指的是：协议相同、域名相同、端口相同。举例来说，http://www.example.com/dir/page.html 这个网址，协议是http://，域名是www.ex...转载 2019-04-26 22:22:37 · 422 阅读 · 0 评论 -
详解async和await的实现
1. generator和yield在学习async和await之前，首先要知道生成器和迭代器的概念，因为本质上前者就是后者的一个语法糖，这部分不了解的可以先看博文https://blog.youkuaiyun.com/zl13015214442/article/details/88018172。2. async和await没有async和await的时候，我们来看下面一个场景：// name.txt...原创 2019-09-28 21:26:27 · 1662 阅读 · 0 评论