JavaScript
关注
分享
扫一扫
文章平均质量分 58
Meskjei
爱那么短 而回忆那么长
展开
-
再理解—JavaScript的变量提升
学习过前端的同学们应该都对变量提升的概念不陌生，这对于没有接触过JavaScript开发的同学来说是一种极其反常识的现象。当时对这种现象并没有什么理解，只是了解并记住了这种现象。到了今天，我想重新描述我的理解，当然，未必准确，纯当抛砖引玉。首先来看一段代码：console.log(test)var test = 'Hello world'foo()function foo(){ ...原创 2019-11-29 00:49:39 · 268 阅读 · 0 评论 -
JS与DOM
文章目录DOM节点Node类型节点关系操作节点Document类型文档的子节点文档信息查找元素特殊集合Element类型HTML元素获取、设置、移除属性DOM节点DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。文档节点是每个文档的根节点，在HTML中，文档节点只有一个子节点，即<html>元素，称之为文档元素，文档中的其他所有元素都包含在文档元素之中并且每个文...原创 2019-03-15 16:12:06 · 139 阅读 · 0 评论 -
便捷地添加或去除class--classList
在开发中，经常碰到需要为某个DOM节点添加或去除一个class的情况。在这种情况下，要移除一个class，一般的做法是拿到DOM节点的className属性，然后将其拆分成数组。然后遍历数组元素找到要移除的属性然后将该项删除，把数组重新拼成字符串然后重新设置DOM节点的className属性。代码如下：//假设div变量是一个DOM对象，'foo'是要移除的classlet classNam...原创 2019-03-19 23:56:33 · 1074 阅读 · 0 评论 -
NodeList和HTMLCollection
以前从来没怎么注意NodeList和HTMLCollection之间的区别。直到我今天重新看了《JavaScript高级程序设计》才注意到它们之间是有着微妙的区别的。先来看下面的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=&q原创 2019-03-15 23:26:17 · 1669 阅读 · 0 评论 -
判断元素是否获得焦点以及用户是否在与页面交互
页面上DOM元素可以通过页面加载、用户的输入和调用focus方法等来获得焦点。在HTML5中document对象新增了activeElement属性，这个属性会引用当前获得焦点的那个元素。<html> <head> <meta charset='utf-8'/> <title>foo</title&g...原创 2019-03-21 19:02:00 · 1429 阅读 · 0 评论 -
getElementsBy系列方法和querySelectorAll方法
文章目录getElementsBy系列方法querySelectorAll方法getElementsBy系列方法getElementsByTagName()getElementsByClassName()getElementsByName()这几个方法都是用来获取多个DOM对象的，只是通过不同的属性来查询。而这三个方法里又属getElementsByName方法为特殊。因为只有它返...原创 2019-03-18 18:25:43 · 3996 阅读 · 1 评论 -
更快的插入HTML元素
一般我们想要往页面中添加HTML元素，通常是这样做的let ol = document.querySelector('ol'); //假设在页面中有一个ol元素let li = document.createElement('li');for(let i=0; i<10; i++){ li.innerText = i; ol.appendChild(li);}上面的代码中，每...原创 2019-03-23 14:05:49 · 557 阅读 · 0 评论 -
滚动到某个HTML元素
在一些时候，我们想要实现滚动到页面上某个部分的功能，即让页面上某个元素出现在视口内。这个时候就可以借助scrollIntoView这个方法了。这个方法可以在所有元素上调用。例如let div = document.querySelector('div');div.scrollIntoView();如果给这个方法传入true作为参数（默认为true），那么窗口滚动之后会让调用元素的顶部与视...原创 2019-03-23 14:14:26 · 2428 阅读 · 0 评论 -
ES6中的类（Class）
有过JavaScript开发经历的小伙伴们肯定都知道，class这个关键字一直以来都是作为系统保留字而不允许使用。而在ES6中，class关键字终于排上了用场。文章目录类实例的构造类表达式类的静态方法与构造函数的不同点类虽然说JavaScript也正儿八经是一个面向对象的语言，但很长一段时间以来JavaScript中的类一直都是“有实无名”。说“有实”是因为在ES6之前的标准中我们可以通过...原创 2019-04-11 07:58:21 · 576 阅读 · 0 评论 -
ES6中的super关键字
在其它面向对象的语言中都能看到一个关键字super。这个关键字的含义通常是“父类”的意思。而在Javascript中，super换了一个与“父类”相近的含义，即“原型（prototype）”。let proto = { foo: 'hello'};let obj = { foo: 'world', find() { return super.foo; }};O...原创 2019-04-09 12:41:44 · 473 阅读 · 0 评论 -
初识XMLHTTPRequest
提到Ajax，就不得不提XMLHttpRequest对象。它可以让我们从指定的URL中获取数据，而不必让整个页面刷新，也就是说可以只更新网页的局部。文章目录对象的构造构造函数：常用属性onreadystatechangereadyStaterespoenseTextresponseTyperesponseXMLstatus常用方法open()方法参数send()方法例子对象的构造构造函数：...原创 2019-04-09 22:59:03 · 316 阅读 · 0 评论 -
Http的CORS
文章目录浏览器的同源策略CORS例子预检请求浏览器的同源策略所谓同源策略，就是指浏览器会限制从一个源加载的网页和脚本与其他源的资源交互。这是一种用于隔离潜在恶意软件的机制。可能有人会奇怪，明明网页是自己写的，自己怎么会请求含有恶意程序的URL呢？话虽如此， 可是我们在开发中经常会引入第三方的库，当我们通过script标签将它们引入的时候是没有限制的。而它们之中就可能含有对恶意URL的请求。...原创 2019-04-10 09:25:05 · 991 阅读 · 0 评论 -
JavaScript的事件的节流与防抖
在前端开发中经常会碰到一些频繁的事件触发，例如：mouseoverkeydownresizescroll…为了演示，写了个demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...原创 2019-04-16 22:30:46 · 724 阅读 · 1 评论 -
JavaScript性能—加载与执行
文章目录问题解决措施脚本位置组织脚本无阻塞的脚本脚本延迟（defer）动态脚本问题由于浏览器多数使用单一进程来处理用户界面（UI）和JavaScript的执行，也就是说当浏览器在执行JavaScript代码的时候，不能做其他任何事情。一旦JavaScript执行的时间过长，由于浏览器无法响应用户的其他操作，就会给人“卡住”的感觉。反应在代码上，也就是每次遇到<script>标签，...原创 2019-06-25 23:19:42 · 251 阅读 · 0 评论 -
JavaScript性能—DOM编程
文章目录浏览器中的DOMDOM的访问与修改innerHTML与DOM方法HTML集合访问集合元素时使用局部变量重绘与回流回流何时发生渲染树的排队和刷新最小化重绘和回流批量修改DOM浏览器中的DOMDOM，即文档对象模型，是一个独立于语言的、用于操作XML和HTML文档的程序接口。尽管DOM是一个与语言无关的接口，但它在浏览器中的接口是用JavaScript实现的。浏览器中通常会把DOM和J...原创 2019-07-02 10:24:16 · 221 阅读 · 0 评论 -
对象的扩展运算符
之前我写过一篇笔记就是说扩展运算符的。可是那个笔记说的并不全面。以前我一直片面的认为，扩展操作符只能作用于数组而不能作用于对象，而且只能在函数调用的时候使用，可实际上扩展操作符是可以作用于对象的。文章目录解构赋值扩展运算符解构赋值应该来说，扩展运算符用在解构赋值中更像是rest参数。同样是把目标对象还未读取的字段，分配到指定的对象。例如let {a, b, ...c} = {a: 12, ...原创 2019-03-07 23:11:00 · 3333 阅读 · 0 评论 -
JS的构造函数模式
文章目录原型模式动态原型模式原型模式在JS中，每一个函数被定义之后，就会为这个函数创建一个prototype属性，该属性指向了这个函数的原型对象。那原型对象能在对象的构造中发挥多大的作用呢？先看一个例子function Person(){ this.name = 'Tom'; this.age = 22; this.sayHi = function(){ ...原创 2019-03-14 15:53:02 · 781 阅读 · 0 评论 -
JavaScript中的变量提升与函数提升
我们先来看下面这一段代码console.log(foo) //undefinedvar foo = ”test“ 很奇怪对吧，分明foo字符串声明在输出语句之后，为什么输出的结果只是“未找到值”而不是“未找到该变量”呢？别急，我们看接下来的这个例子。 var x = new Date()function foo (){ console.log(x) //u...原创 2018-06-27 10:28:29 · 179 阅读 · 0 评论 -
JS面向对象之对象属性的属性
ECMAScript的定义中，对象的属性有两种，一种是数据属性，另一种是访问器属性我们知道JS中有基本数据类型和对象，对象中的属性也无外乎是这些类型，可是作为对象的属性，这些属性本身却也多了一些特殊的属性，而且属性种类的不同也会使属性的属性有些许的差别。下面就来聊聊对象属性的两种类别。 1.数据属性这种属性包含有一个存放数据值的属性[[Value]],数据属性共有4个描述其行为的属...原创 2018-06-27 10:24:02 · 2993 阅读 · 0 评论 -
var关键字的使用
首先我们来看一段代码var a = 1b = 2console.log(a) //1console.log(b) //2 我们可以看到a, b都能被正常的输出。区别只是在于a前边有个“var”关键字，而b没有，不过从结果上看似乎并没有什么区别，那到底“var”关键字有什么用呢？再来看下一段代码。 function foo(){ var a = 1 ...原创 2018-06-27 10:33:21 · 1139 阅读 · 1 评论 -
JavaScript的变量类型和参数传递
1.变量类型在JavaScript中包含了两种不同数据类型的值，即基本类型值和引用类型值。基本类型值仅有5种类型：undefined、Null、Boolean、Number和String。而引用类型可以认为就是对象。那么基本类型和引用类型有什么区别呢？看起来似乎没什么不同。它们的区别在于基本类型值是按值访问的，而引用类型值是按引用访问的。按值访问可以直接操作保存在内存中的实际的值，而按引用访...原创 2018-11-21 12:56:33 · 353 阅读 · 1 评论 -
JavaScript 中的数组
数组（Array）类型应该是我们开发过程中使用最多的类型了。数组在许多语言中都能看到，不过JavaScript中的数组更为强大。主要的特点在于：数组长度可以动态调整数组提供了大量操作方法数组的每一项都可以存放任意类型的数据首先我们从最基本的数组的创建说起，由于数组实际上是数组(Array)类型的实例对象，那么与Java、C#等语言一样，数组可以用下面的形式创建var array = ...原创 2018-11-22 23:22:52 · 446 阅读 · 0 评论 -
谈谈Promise
说到Promise，总是不可避免的会与一个词联系起来----异步。是的，Promise生来最大的作用便是为了解决回调地狱的问题。开发过程中，为了使异步操作按顺序进行，或者说，下一个异步操作需要上一个异步操作的返回结果。在这种情况下，我们原先的做法是使用回调函数。下列代码就是典型的使用回调函数的场景，我们需要使三个异步函数（假设它们是）按照我们希望的顺序执行。function async1(re...原创 2018-11-29 16:24:22 · 222 阅读 · 0 评论 -
ES6的解构赋值
文章目录数组的解构赋值对象的解构赋值字符串的解构赋值函数参数的解构赋值所谓的解构赋值，就是按照一定的模式，从数组或者对象等可遍历的对象中提取出值，然后对变量进行赋值。For example数组的解构赋值let [x,y,z] = [1,2,3];console.log(x); //1console.log(y); //2console.log(z); //3上面的代码就是一个典型的...原创 2019-01-17 16:19:48 · 187 阅读 · 0 评论 -
ES6中的块级作用域与函数声明
首先，在ES5的标准中，函数是不能在块级作用域中声明的。if(true){ function foo(){}}try{ function foo(){}} catch(e){ }也就是说类似以上两种情况在ES5中都是非法的。然而，浏览器为了兼容旧代码所以并没有遵守这一规定。所以上面的代码在浏览器中运行并不会出错。而在ES6的标准中引入了块级作用域，也确定了...原创 2019-01-12 21:16:53 · 761 阅读 · 0 评论 -
JS中函数缺少参数的报错
稍微有过一点JS编程经历的人都知道，JS中的函数，即便是缺少了参数也不会报错，例如function add(x, y){ return x + y;}console.log(add()); //NaNadd函数中并没有传参数，但是可以正常运行不会报错。那如果想要像C/C++或其他一些语言一样在缺少参数的时候会报错该怎么办呢？ES6规范中允许开发者为函数的参数设置默认值，而这个默认值可...原创 2019-01-18 15:20:49 · 3072 阅读 · 0 评论 -
函数的rest参数
如果想要实现为函数传入多个参数，那么可以使用arguments对象，例如function foo(){ for(let num of arguments){ console.log(num); }}foo(1,2,3);/*123*/可是我们都知道arguments只是一个类似数组的对象而并不是数组，所以如果我们想使用一些数组上的方法例如sort...原创 2019-01-18 16:17:56 · 1810 阅读 · 0 评论 -
ES6的扩展操作符
ES6中的扩展操作符实际上与rest参数非常相似。前者是...，后者则是...+变量名。那它们主要的区别我个人认为主要是两个：rest参数使用在函数的参数定义时，扩展操作符使用在函数调用时。function foo(...items){ //这里的...items就是rest参数 console.log(items);}console.log(...[1,2,3,4,5])...原创 2019-02-06 16:29:49 · 181 阅读 · 0 评论 -
ES6中的Set
在ES6中新增了Set这一数据结构，这在许多编程语言中都能见到。Set很像数组，但是它的元素都是唯一的，也就是说Set内的元素没有两个是一样的。let s = new Set();这样就构造了一个Set。数组用push或shift方法分别从数组的前端或后端添加数据，而在Set中，我们可以通过add方法往Set内添加数据。let s = new Set();let arr = [1,2,...原创 2019-02-26 23:00:43 · 329 阅读 · 0 评论 -
ES6的Symbol
Symbol，字面意思是标志。所谓标志，往往是一些标识性强、独一无二的东西。ES6中引入了Symbol这样一种新的原始数据类型。用来表示一个独一无二的值。例如let symbol1 = Symbol();let symbol2 = Symbol();console.log(symbol1 === symbol2); //false首先要注意的是，Symbol()前面不能加new关...原创 2019-03-08 23:50:51 · 128 阅读 · 0 评论 -
JS中对数组进行求和
如果在一个数组想对数组中的所有项进行求和（当然每项都得是Number对象）该怎么做呢？可以使用Array对象的reduce或reduceRight方法。这两个方法会遍历数组中的每个对象，并最终返回一个值。这两个方法都接受两个参数：在每一项上调用的函数，这个函数包含4个参数total：初始值，或者是每一次函数调用完之后的返回值currentValue：当前值，当前所遍历到的值curr...原创 2019-03-14 08:43:35 · 3547 阅读 · 0 评论 -
domReady的实现
functionmyReady(cb){ //判断是否是现代浏览器if(document.addEventListener){ document.addEventListener("DOMContentLoaded", cb, false); }else{ IEContentLoaded(cb); } functionIEContentLoaded(){ vard = win...原创 2018-09-26 10:07:30 · 193 阅读 · 0 评论