javascrpt知识要点梳理——知识清单

写在前面：

这篇文章是我在学习《javascript高级程序设计（第三版）》时随书所做的笔记，由于使用word记录的笔记，转到markdown编辑器里有点吃力，所以文章排版可能会有点问题。感兴趣的朋友可以去github看看我的项目，这篇文章的word文档也在项目文件夹里放着。如果这个项目对你产生了帮助，记得帮我点个小星星呀~
另外，这篇文章更适合有基础的同学当作知识清单使用，可以帮助你回顾知识，大家可以去下载word文档并且打印出来，帮助自己回顾复习，梳理脉络，让我们一起努力学习前端吧！

JavaScript实现：

(1) 核心（ECMAScript）：提供核心语言标准
(2) 文档对象模型（DOM）：提供访问和操作网页内容的方法和接口
(3) 浏览器对象模型（BOM）：提供与浏览器交互的方法和接口

Function类型：

1. 函数实际上是对象，每个函数都是Function类型的实例。除了通过function关键字定义以外，也可以使用new Function()的方式定义，但该方式需要多次解析代码，效率较低。
2. 函数名仅仅是指向函数对象的指针。
3. 函数对象有一个属性caller，保存了调用当该函数的函数的引用。还有一个对象属性prototype是保存他们实例方法的真正所在，该属性不可枚举，主要用于定义自定义引用类型和实现继承。
4. 函数内部有两个特殊属性：arguments（保存参数）和this。arguments有个一叫做callee的属性，是一个指向拥有该arguments对象的函数的指针。
5. 函数不能重载，但可通过特殊方法简单实现类似重载的效果，例如使用arguments对象或“…”操作符。
6. 函数只是在特定环境下执行代码的对象，因此函数的作用域是可以改变的，通过apply()和call()可以改变函数内部this指针的指向，从而设置函数执行时的作用域。还可以用bind()方法。
7. 函数本身可以作为参数传递给另一个函数，也可以在一个函数中返回另一个函数。

函数表达式：

1. 函数表达式不同于函数声明，函数声明要有函数名，但函数表达式不需要，没有名字的函数表达式交叫做匿名函数（拉姆达函数）。解析器会优先读取函数声明，即函数声明提升，故执行语句可以放至声明语句之前，而函数表达式则不行。
2. 递归：递归函数影应始终使用arguments.callee来递归地调用自身，不要使用函数名——函数名可能会发生变化。在无法确定如何引用函数的情况下，递归就会变得比较复杂。
3. 闭包：指的是（有权访问另一个函数作用域中的变量的）函数。当在函数内部定义了其他函数时，就创建了闭包。
   (1) 在后台的执行环境中，闭包的作用域链包含着自己的作用域、包含函数的作用域、和全局作用域。
   (2) 通常函数的作用域会在函数执行完毕时销毁，但是当一个函数返回一个闭包时，这个函数的作用域将会一直存在到闭包不再存在为止。使用闭包可以在js中模仿块级作用域（js本身没有块级作用域的概念）。
   (3) 创建并立即调用一个函数，既可以执行其中的代码，又不会在内存中留下对该函数的引用。但是结果就是函数总所有变量会被立即销毁——除非将某些变量赋值给了包含作用域（即外部作用域）中的变量。
   (4) 闭包还可用于对象中创建私有变量，即便JavaScript中没有正式的私有变量的概念，但是可以使用闭包来实现公有方法，而通过公有方法可以访问在包含作用域中定义的变量。有权访问私有变量的公有方法叫做特权方法。
   (5) 使用构造函数模式，原型模式来实现自定义类型的特权方法，也可以用模块模式，增强的模块模式来实现单例的特权方法。
   (6) 每个函数都是闭包，只不过我们常说的闭包是在一个函数中返回另一个函数的这种情况。闭包可能会造成内存泄露（内存无法回收），要格外注意。
4. 块级作用域：可以用匿名函数模拟。（function(){ /代码区域/ })()，给匿名函数声明套上括号再跟一对括号。相当于定义匿名函数后立即调用。这种方式可以减少闭包占用的内存问题，因为没有指向匿名函数的引用，所以只要函数执行完毕就可以立即销毁其作用域链了。
5. 私有变量：函数参数、局部变量、函数内部定义的函数。

引用类型：

1. 属性：

Object.getOwnPropertyDescriptor(obj,name)可以取得给定属性的描述符，返回值是一个对象，具有configurable，enumberable属性，若是数据属性还具有writerable、value，若是访问器属性则具还有get，set属性。另外，这些属性的可以自行修改，使用方法Object.defineProperty(obj,name,{})。任何对象都适用。

2. 创建对象：

(1) 工厂模式：使用简单函数创建对象，为对象添加属性和方法，然后返回对象。该方法没有解决对象识别问题，后被构造函数模式代替。
(2) 构造函数模式：可以创建自定义引用类型，可以像创建内置对象实例一样使用new操作符。特点：没有显式创建对象，直接将属性和方法赋值给this对象，没有return语句。问题：成员无法复用，包括属性和方法。由于函数不局限于对象，不局限于执行环境，所以没有理由不复用。
(3) 原型模式：向构造函数的原型对象(prototype)中添加属性，使得创建的实例之间共享这些属性。
问题：
a. 如果原型对象中包含引用类型属性，例如Array类型，会导致所有实例共享修改这一属性。
b. 在创建实例后修改原型对象，会切断现有实例和新原型之间的联系。
(4) 组合模式：使用构造函数模式和原型模式。前者用于定义实例属性，后者用于定义方法和共享属性。
① 优点：最大限度的节省了内存。
② 缺点：构造函数和原型分开编写，没有整体的感觉，可能会给编程人员带来困惑。
(5) 动态原型模式：将组合模式中的的两部分代码封装到一起。对于需要创建的方法进行判断，若不存在则创建，否则什么也不干（原型部分只会在初次调用构造函数时创建，且不能使用对象字面量方式定义，会切断已创建实例与原型之间的联系）。
(6) 寄生构造函数模式：通过构造函数末尾添加return语句，重写调用构造函数时的默认返回值。特殊情况下（如创建一个有额外方法的特殊数组，因为不能直接修改Array构造函数）使用。
缺点：返回对象与构造函数或其原型属性没有关系，与在构造函数外部直接创建对象等价，本质上是工厂模式的一个变形。
(7) 稳妥构造函数模式：模式基本与寄生模式先相同，但不用new，也不用this。返回一个稳妥的对象。特点：安全性高，类似于c++中的类，可以包含私有属性。该方法创建的对象和寄生构造函数模式一样，与构造函数之间没有什么关系，是工厂模式的变形。

3. 继承

1. 构造函数与函数原型的关系：构造函数Person（对象）有个属性prototype（指针）指向原型对象。 Person.prototype（原型对象，实质也是对象）他有个属性constructor（指针） ，又指向 Person函数对象。constructor属性指向创建此对象的构造函数的引用
2. 原型链继承：原型对象等于另一个类型的实例，进而构成原型链。是javascript的主要继承手段。问题：包含引用类型的原型会导致共享修改。创建子类时不太容易向父类传递参数（使用借用构造函数的方式）。故一般不会单独使用。
3. 借用构造函数继承：函数只是在特定环境下执行代码的对象，因此通过使用apply()，call()方法，可以在新创建的对象上执行构造函数并传递相应参数。但是由于使用了构造函数，无法避免构造函数模式下的一些问题——方法都在构造函数中定义无法复用。因此该方法一般不单独使用。
4. 组合继承：将原型链方式和借用构造函数方式的继承思想结合，原型链继承公共属性和方法，借用构造函数继承实例属性。问题：无论什么情况下，总会调用两次父类的构造函数，一次是创建子类原型时，一次是在子类构造函数内部。解决办法——寄生组合式继承。
5. 原型式继承：Object.create(父类，属性值)或object(父类)。将返回一个将父类作为原型的对象。本质上是对给定对象的浅复制，用于只想让一个对象和另一个对象保持类似，不必兴师动众的创建构造函数时。注意包含引用类型的值属性始终共享。
6. 寄生式继承：创建一个仅用于封装继承过程的函数，函数内部克隆对象，增强并返回该对象（object和create函数不是必须的）。基本思路类似于寄生构造函数与工厂模式。缺点也类似，由于不能复用函数而降低效率等。
   a. 调用函数复制父类原型创建一个新对象（利用Object.create()或object()）。
   b. 通过某些步骤增强该对象，例如添加方法。
   c. 返回创建的新对象。
7. 寄生组合式继承： 通过借用构造函数继承属性，通过原型链混成形式来继承方法。本质上是使用寄生式继承父类的原型来继承属性（替代了之前在子类型里调用父类构造函数的过程，我们所需的不过是父类原型的一个副本而已），然后再将结果指定给子类原型。
   a. 复制父类原型。
   b. 添加因重写原型失去的constructor属性。
   c. 将复制的原型赋值给子类原型。
   其高效性体现在只调用了一次父类的构造函数，避免了在子类原型中创建不必要的多余的属性。与此同时原型链也不变。可以利用instanceof和isPrototypeOf()确定类型。开发人员普遍认为该方式是引用类型最理想的继承范式。

4. BOM

浏览器对象模型（BOM）以window对象为依托，表示浏览器窗口以及页面可见区域。同时，window对象还是ECMAScript中的Global对象，因而所有全局对象都是他的属性，所有原生构造函数以及其他函数也都存在于他的命名空间下。

1. 使用框架时，每个框架有自己的window对象以及所有原生构造函数和其他函数的副本。每个框架都保存再frames的集合中，可以通过位置或者名称来访问到。
2. 有一些窗口指针可以用来引用其他框架，包括父框架。
3. top对象始终指向最外围的框架，也就是整个浏览器窗口。
4. parent对象表示包含当前框架的框架，即父框架，而self对象则指向window。
5. 使用location对象可以通过便程的方式来访问浏览器中的导航系统。设置相应的属性，可以逐段或者整体性地修改浏览器的URL。
6. 调用页面的replace()方法可以导航到一个新的URL，同时该URL会替换浏览器历史记录中当前显示的页面。
7. navigator对象提供了与浏览器相关的信息。到底提供哪些信息，很大程度上取决于用户的浏览器；不过，也有一些公共的属性例如userAgent存在于所有浏览器中。

BOM中还有两个对象：screen和history，但他们的功能有限。screen对象中包含着与客户端显示器有关的信息，这些信息一般只用于站点分析。history对象为访问浏览器历史记录开了一个缝隙，开发人员可以据此判断历史纪录的数量，也可以在历史中向后或者向前导航到任意界面。

5. DOM

DOM用于访问和操作HTML和XML文档。DOM1级将HTML和XML文档视作节点树，可以使用js操作，改变其外观和结构。DOM由各种节点构成。

1. 最基本的节点类型是Node，用于抽象表示文档中一个独立的部分；所有其他类型都继承自Node。
2. Document类型表示整个文档，是一组分层节点的根节点。再JavaScript中，document对象是Document类型的一个实例。使用document对象可以查找并获取节点。
3. Element类型节点表示文档中所有HTML和XML元素，可以用来操作这些元素的内容和特性。
4. 还有一些节点类型，Text，Comment，Attr,DocumentType，CDATASection，DocumentFragment等
   理解DOM的关键在于理解DOM对性能的影响。DOM操作往往是JavaScript中开销最大的部分，而 因访问NodeList导致的问题最多。NodeList对象都是“动态的”，这意味着每次访问都会运行一次查询。有鉴于此，最好的办法是尽量减少DOM操作。

6. 事件（注意点）

• 有必要限制页面中事件处理程序的数量，数量太多会导致占用大量内存，降低性能。
• 可以使用建立在事件冒泡机制上的事件委托技术，可以有效减少事件处理程序的数量。
• 建议在浏览器卸载页面之前移除页面中所有的事件处理程序，防止内存泄漏。

7. JSON

EMCAScript5定义了原生的JSON对象，可以用来将对象序列化为JSON字符串（JSON.stringify()方法）或者将JSON数据解析为JavaScript对象（JOSN.parse()方法）。

1.JSON.stringify()方法

a) 接受三个参数，第一个参数是相应的JavaScript对象，必须。其他两个非必须。
b) 第二个参数用来过滤结果，可以是数组，或函数。若是数组则过滤后的结果只包含数组中列出的属性，若是函数则会执行更精确的操作。函数接受两个参数（key，value），并返回过滤结果
c) 第三个参控制缩进，若是数字则是空格缩进，数字代表空格数量，最大为10。若是字符串，则会用字符串作为缩进，最大长度也为10，多余会截取
d) toJSON()方法可以作为函数过滤器的补充。可以为任何对象添加toJSON()方法，返回其自身的JSON数据格式
stringify()方法执行过程：

• 若存在toJSON()方法，，而且能通过它取得有效的值，则调用该方法。否则返回对象本身。
• 如果提供了第二个参数，应用这个过滤器，传入的值是第一步返回的值
• 对第二部返回的值进行相应的序列化。
• 如果提供了第三个参数，执行相应的格式化。

2. JSON.parse()方法

• 可接受两个参数，第一个是JSON字符串，必须。另一个是还原函数，可选。
• 在将JSON字符串中的日期对象转换为Date对象时，经常需要用到还原函数，参数（key, value），类似于过滤函数，也需要返回值。

8. 表单脚本

1. 表单基础操作：submit事件，change事件，focus事件等。

2. 文本框脚本：

1. 选择文本——包括select事件。
   1. 取得选择的文本——selectionStart，seletionEnd等。
   2. 选取部分文本——setSelectionRange()，利用DOM范围。
2. 过滤输入——不同浏览器对剪切板对象的访问具有不同限制。如chrome只允许在发生相关的剪切板事件的时候才允许访问剪切板对象。
   1. 屏蔽字符——利用keypress事件检测按键，屏蔽掉不合法的输入字符。
   2. 剪切板事件——ocopy，beforecopy，paste，beforepaste等，利用event.clipboardData对象访问数据，主要方法：
   1. getData(取得数据的格式，text或者text/plain)
   2. setData(格式，值)
   3. clearData()。
3. 自动切换焦点——如电话号码，身份证号，生日等，可以由多个输入框控制输入，当一个输入框达到最大字符限制的时候，自动将焦点切换至下个输入框。
4. HTML5约束验证API
   1. 必填字段——require
   2. 其他输入类型——url，email
   3. 数值范围——number，range，datetime，datetime-local，date，month，week，time，min，max，step等
   4. 输入模式——pattern属性，值为正则表达式，用来验证输入内容
   5. 检测有效性——必填字段无值或与pattern属性不匹配都视为无效。使用checkValidity()检测，可于表单整体检测，也可于某一个表单元素上检测。还有一个更精细的检测，使用validity属性。
   6. 禁用验证——通过设置表单的novalidate属性，可以告诉表单不进行验证。如果一个表单中有多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate属性。

3. 选择框脚本：选择框基本元素——、。

1. 相关属性和方法：add(newOption, relOPtion)，multiple，options，selectedIndex，size。相关事件——change事件，选择后立即触发。
2. 相关属性：index，label，seleted，text，value。推荐使用这些属性操作选项，不推荐使DOM方法，因为不同浏览器存在略微差异。
3. 选择选项——将option的seleted属性设置为true即可。（设置为false不会取消选择）
4. 添加选项
   1. 原生DOM方法——createElement()+appendChild()
   2. 使用option构造函数，new Option(text, value)+appendChild()
   3. 使用

的add方法。

移除选项
① DOM的removeChild()方法
② 选项框调用remove()方法
③ 相应选项设置为null

移动和重排选项——appendChild()传入已有元素会删除原元素并添加到指定为位置，类似的还有insertBefore()

4. 表单序列化要点：

• 对表单字段名称和值进行URL编码，使用“&”分隔
• 不发送禁用的表单字段
• 直达送勾选的复选框和单选按钮
• 不发送type为“reset”和“button”的按钮
• 多选框中每个选中的值单独一个条目
• 单击按钮提交表单，也会发送提交按钮；否则不发送提交按钮。也包括type为image的input元素。
• 元素的值就是选中的元素的value值。若元素没有value，则是其文本值

  5.富文本编辑——设置document.designMode = “on”

  1. 使用contenteditable属性——true，false，inherit。默认值要直接添加上去即可，无需设置值
  2. 操作富文本
     • document.execCommand(命令，false，值(null))，执行操作
     • document.queryCommandEnabled(命令)，检测是否可对当前文本，或当前插入字符所在位置执行某个命令
     • document.queryCommandState(命令)，检测是否已经将命令应用到了指定文本
     • document.queryCommandValue(命令)，取得执行命令时传入的值，即为execCommand的第三个参数
  3. 富文本选区——使用框架的getSelection()方法，返回一个表示当前选择文本的Selection对象。常用方法toString()返回选取所包含的文本内容。要取得富文本编辑器中的文本，首先要创建一个文本范围
  4. 表单与富文本：通常可以添加一个隐藏表单字段让他的值等于从框架中提取出的HTML。具体就是在提交表单之前，从框架中提取出HTML插入到隐藏字段中

  9. DOM2和DOM3

  1. DOM变化——具体看书

  2. 样式

  1. 访问元素样式
     1. 每一个支持样式的实例都有一个style属性，这个属性是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，即行内CSS代码。但不包含外部样式与嵌入样式层叠而来的样式信息。
     2. 通过style属性指定样式信息需要将短横线写法转换为驼峰写法（只有float属性例外，属于保留字，需用cssFloat访问）。
     3. style对象包含一些属性和方法，其中较为常用的是
     - cssText：该属性可以访问到CSS代码，若修改则会重写该元素的CSS
     - parentRule：表示CSS信息所属的CSSRule对象
     - removeProperty(propertyName)：从样式中删除指定属性，在不清楚某个给定的CSS属性拥有什么默认值的情况下，可以移除，之后就会自动应用默认值。
     - length和item()配合使用，可以迭代CSS属性
     - insertRule(CSSRule, index)和deleteRule(index)：IE不支持。
     2. 计算元素样式——getComputedStyle(元素，伪元素)，第二个参数一般不需要，设置null即可。IE中有currentStyle属性同理。计算样式全部是只读的。
     3. 操作样式表
        1. 应用于文档中的所有样式表是通过document.styleSheets集合来表示的，通过方括号或者item()方法可以访问这些对象，这些对象继承自StyeSheet对象，继承了一些常用方法。
           • disabled：唯一可写的属性，设置为true禁用样式表
           • href：若是通过link包含的样式表，则返回其URL，否则为null
           • cssRules：样式表中包含样式规则的集合，其中包含了CSSRule对象。
        2. CSSRule对象（CSS规则）：如：div{ color: green; background-color: white } 即为一个CSSRule对象，即为一条规则。最常用的属性有三个：
           • cssText属性：返回整条样式规则的文本，是只读的。注意与style.cssText的区分。
           • style属性：即为上面提到的style属性，是一个CSSStyleDeclaretion对象的实例。
           • selectorText：返回当前规则的选择符文本。
        3. 大多数情况下，仅使用style属性便可以完成需求。
           • 创建规则——使用insertRule(CSSRule, index)插入规则即可，IE中使用addRule(selectorText, cssText, position)
           • 删除规则——deleteRule(index)，IE中使用removeRule(index)。
     4. 元素大小确定
        1. 偏移量：元素在屏幕上占用的所有可见空间
           • offsetHeight：元素垂直方向上占用的空间大小，包括滚动条、边框高度
           • offsetWidth：元素水平方向上占用的空间大小，包括滚动条、边框宽度
           • offsetLeft：元素左边框距离父元素的距离
           • offsetTop：元素顶部距离父元素的距离
           • 包含元素的引用保存在offsetParent中
        2. 客户区大小：元素内部空间大小
           • clientWidth：元素内容区宽度 + 左右内边距宽度
           • clientHeight：元素内容区高度 + 上下内边距高度
        3. 滚动大小：包含滚动内容的元素的大小
           • scrollHeight：没有滚动条时，元素内容的总高度
           • scrollWidth：没有滚动条时，元素内同的总宽度
           • scrollLeft：由于滚动被隐藏的左侧内容宽度，设置值可以改变滚动位置
           • scrollTop：由于滚动被隐藏的上方内容高度，设置值可以改变滚动位置
           • getBoundingClientRect()方法返回一个矩形对象，包含四个值：left、top、right、bottom，表示出了元素在页面中相对于视口的位置。但是浏览器之间存在少许差别。

  3. 遍历元素节点——NodeIterator和TreeWalker，深度优先的遍历。

  a) NodeIterator：一个简单接口，只允许以一个节点的步幅前后移动
  i. 通过document.createNodeIterator(rootNode, whatToShow, filter, false)创建遍历对象
  ii. wahtToShow：表示节点类型代码，表示要显示那些节点
  iii. filter：过滤器

  1. 可以指定一个自定义的NodeFilter对象，该对象只需要包含一个acceptNode()方法，该方法返回NodeFilter.FILTER_ACCEPT表示接受，NodeFilter.FILTER_SKIP表示拒绝。NodeFilter是一个抽象的类型，不能直接创建实例
  2. 可以直接编写一个过滤函数，实现与acceptNode()类似的功能
  3. 不指定过滤器则传入null
     iv. iterator.nextNode()与iterator.previousNode()控制遍历的前进和后退。
     b) TreeWalker
     i. 通过document.createTreeWalker(rootNode, whatToShow, filter, false)创建遍历对象
     ii. filter：TreeWalker过滤器返回值在NodeIterator基础上增加了NodeFilter.FILTER_REJECT，跳过相应节点及其整个子节点树。
     iii. iterator.nextNode()与iterator.previousNode()控制遍历的前进和后退。除此之外还有更灵活的遍历跳转方法：
  4. parentNode()：遍历到当前节点的父节点
  5. first/lastChild()：遍历到当前节点的第一/最后一个节点
  6. next/previousSibling()：遍历到当前节点的下一/上一个同辈节点
     iv. currentNode属性：可以通过设置该值，修改遍历继续行进的起点。很好用的属性，大大增加了遍历的灵活性。

  4. DOM范围

  a) 相关属性：
  i. startContainer：范围起点的父节点
  ii. startOffset：起点节点在父节点childNodes集合中的索引
  iii. endContainer：范围终点的父节点
  iv. endOffset：终点节点在父节点childNodes集合中的索引
  v. commonAncestorContainer：startContainer和endContainer最近的共同父节点
  b) 创建范围：var range = document.createRange()
  c) 利用范围实现简单选择：range.selectNode(node)、range.selectNodeContents(node)。区别在于前者选择整个节点，后者选择节点的子节点。
  d) 更精确的设置范围
  i. setStartBefore/After(refNode)：将范围起点设置在refNode之前/后
  ii. setEndBefore/After(refNode)：将范围终点设置在refNode之前/后
  e) 更复杂的范围控制，这两个函数都接受两个参数，一个参照节点和一个偏移量值
  i. setStart()：参照节点  startContainer、偏移量  startOffset
  ii. setEnd()：参照节点  endContainer、偏移量  endOffset
  iii. 可以使用户这两个方法来模拟前面的简单选择方法，但这并不是主要用途，这两个方法更胜一筹的地方在于可以选择结点的一部分，选择之后便可操作选区。
  f) 操作DOM范围中的内容：
  i. 创建范围时，内部会为这个范围创建一个文档片段（DocumentFragment），范围内所属节点全部被添加至这个文档片段中。
  ii. 范围知道自己缺少了那些开标签和闭标签，他能够重新构建有效的DOM结构以便我们对其进行操作。使用范围选区可以在删除文档中某些部分的同时，保持文档结构格式良好。
  iii. 表示范围的内部文档片段中的所有节点，都只是指向文档中相应节点的指针。
  iv. 一些常用方法：

  1. deleteContents()/extractContents()：从文档中移除范围选区，但是后者可以返回范围的文档片段，利用这个返回的值可以将其插入至文档其他地方。
  2. cloneContents()：创建一个范围对象的副本。返回的文档片段包含的是范围节点的副本，而不是实际节点。
     g) 插入DOM范围中的内容
     i. InsertNode(node)：向范围起点处插入一个节点
     ii. surroundContents(node)：环绕范围插入内容。常用于突显网页中某些词句。具体原理如下：
  3. 提取出范围内的内容，类似于执行extractContents()
  4. 将指定的节点插入到文档中原来的范围所在位置上
  5. 将文档片段中的内容添加到给定节点中
     h) 折叠DOM范围
  6. range.collapse(true)：传入true折叠至范围起点，传入false折叠至范围终点
  7. range.collapsed属性：检测某个范围是否处于折叠状态，可以利用该属性测试范围中两个节点是否紧密相连。
     i) 比较DOM范围——range1.compareBoundaryPoints(Range.START_TO_START, range2)
  8. 第一个参数值为要比较的方式的常量值，第二个参数是要比较的另一个范围
  9. 第一个参数值可根据字面意思理解，还有START_TO_END、END_TO_START、END_TO_END
  10. 若相等返回0，第一个节点位于之前返回-1，位于之后返回1
      j) 复制DOM范围——range.cloneRange()，创建并返回一个副本。
      k) 清理DOM范围——建议使用完范围之后清理掉范围释放内存。一旦分离范围，就不能再恢复使用了
  11. 调用range.detach()方法，从创建范围的文档中分理出该范围
  12. 设置range = null，从而触发垃圾回收机制，释放内存
      l) IE中也有范围，具体内容看书

  10. HTML5脚本编程

  (1) 跨文档消息传递：

  ① 核心——postMessage(“消息内容”, “限制接收方域名的字符串”)。第一个参数最好还是只传入字符串，并非所有浏览器都支持。若第二个参数为”*”，则不做域名限制（不推荐）。
  ② 接收：接收到消息之后会触发window对象的message事件。该事件异步触发，其event对象包含三个属性

  1. data：postMessage()的第一个参数
  2. origin：发送消息的文档所在的域
  3. source：发送消息的文档的window对象的代理。主要用于在发送上一条消息的窗口中调用postMessage()方法。若发送消息的窗口来自同一个域，那么这个对象计师window

  (2) 原生拖放

  ① 拖放事件：这个是父元素

  1. dragstart
  2. drag
  3. dragend
     ② 当某个元素被拖到有效的放置窗口时，会触发下列事件：这个是子元素
  4. dragenter：进入目标范围时触发
  5. dragvoer：拖动元素在目标范围内会持续触发该事件
  6. dragleave或drop：拖出目标触发dragleave事件，成功放入目标触发drop事件
     ③ 自定义放置的目标：拖动元素经过无效放置目标时，光标会变成禁止图案。若拖动元素经过不能放置的元素则不可能触发drop事件。但是可以通过重写dragenter和dragover事件的默认行为来将任何元素设置为有效的放置元素。在ondragover中一定要执行 preventDefault()，否则ondrop事件不会被触发。

  (3) dataTransfer对象

  ① 两个主要方法：getData(数据格式)和setData(数据格式, 值)，数据格式通常为”Text”，且dataTransfer对象中保存的数据只能在ondrop处理过程中读取
  ② 在拖动文本，链接或者图像时，浏览器会自动调用setData()方法将拖动的文本，链接，图像等以text格式保存到dataTransfer对象中，可以通过getData()读取到。也可以自己定义数据
  ③ dropEffect与effectAllowed——设置元素允许的拖动方式

  1. dropEffect：该属性可以知道被拖动的元素能够执行那种放置行为
  2. effectAllowed：表示允许元素以哪种dropEffect拖动
  3. dropEffect属性搭配effectAllowed属性使用。
  4. 在被移动元素的dragstart事件处理程序中设置effectAllowed属性，在dragenter事件处理程序中设置dropEffect属性。dropEffect 的每个可能值都会导致光标显示为不同的符号。

  (4) 可拖动性：默认情况加添加draggable = “false”即可让元素可以拖动

  (5) 其他成员方法：

  ① addElement(element)：为拖动操作添加一个元素
  ② clearData(format)：清除以特定格式保存的数据
  ③ setDragImage(element, x, y)：拖动时在光标下方指定一幅图像，该方法较常用
  ④ types：当前保存的数据类型，是一个类似数组的集合

  (6) 媒体元素——

  ① 属性：包括一套完善的js接口，例如总时长，当前播放时长等属性
  ② 事件：如暂停，开始播放，播放时间变化等事件
  ③ 自定义播放器：利用play()，pause()等方法，配合媒体元素的属性和事件来控制
  ④ Audio类型：new Audio(src)，即可新建音频元素

  (7) 历史状态管理

  现代web页面每次操作不一定会打开全新页面，导致前进和后退事件失去了作用，HTML5弥补了这一缺陷，完善了history对象。

  ① history.pushState(状态对象, null, 相对地址)：执行该方法后，新的状态信息将被加入历史信息状态栈，第二个参数暂时没有浏览器实现，可以忽略，传入null即可。
  ② popstate事件：在此之后，前进后退按钮可用，会触发该事件，事件对象event包含state属性，值为pushState()方法的第一个参数。注意单机后退按钮返回浏览器的第一个按钮时，event.state为null。
  ③ history.replace(状态对象, null)：该方法不会在历史状态栈中新建状态，只会重写当前状态。

  11. Ajax与Comet

  (1) XMLHttpRequest对象

  1. 调用open(“get/post”, 请求内容, 是否异步)：启动一个请求以备发送，并不会真正发送
  2. 调用setRequesHeader()：可选，设置自定义请求头。该方法必须在open之后send之前调用。
  3. 调用send(data)：如不需要发送值，必须传入null，调用send()之后，请求被发送出去，在收到响应后，响应的数据会自动填充XHR对象相应的属性
     1. responseText：作为相应主体被返回的额文本
     2. status：响应的HTTP状态，一般可以将200作为成功值。状态为成功时即可访问响应数据ready
     3. statusText：HTTP状态的说明
     4. readyState：表示请求/响应过程的当前活动阶段。一般用于异步时判断状态。一般只关注readyState == 4时的情况，因为此时所有数据已经准备就绪。记得在open调用之前设置onreadystatechange事件以确保浏览器兼容性。
  4. 调用abort()可以结束ajax请求，终止ajax请求后，应对XHR对象解引用
  5. 调用getResponseHeader()方法，并传入头部字段名称，可获得响应头部信息
  6. 调用getAllResopnseHeaders()方法，可以获得一个包含所有头部信息的长字符串

  (2) GET请求：

  常用于向服务器查询某些信息，必要时可将查询字符串参数追加值URL的末尾，以便将信息发送给服务器。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码。

  (3) POST请求：

  使用频率仅次于GET，通常用于向服务器发送应该被保存的数据。post将数据作为请求的主题发送，即send(data)。

  (4) XMLHttpRequest 2级

  1. FormData：为序列化表单以及创建与表单格式相同的数据提供了便利。
  2. 创建FormData：var data = new FormData()，另外如果向构造函数中传入表单元素，也可以用表单元素的数据预先向起哄填入键值对，如new FormData(document.forms[0])
  3. 增加数据：使用data.append(key, value)的形式
  4. 优点：使用FormData的好处在于不必明确的在XHR对象中设置请求头部，XHR对象能够自动识别传入的数据类型是FormData的实例，并自动设置请求头部。

  (5) 超时设定——timeout事件

  1. 设置xhr.timeout数值，单位毫秒。
  2. 设置xhr.ontimeout事件处理程序。
  3. 最好是将相关代码写在open之后send之前。

  (6) overrideMimeType()方法

  重写XHR响应的MIME类型，如overrideMimeType(“text/html”)。由于返回对额MIME类型决定了浏览器如何处理他，所以提供一种方法重写MIME类型是很有必要的。仍然在send之前open之后

  (7) 进度事件：

  1. load事件：在接受完整响应数据时触发。由于浏览器接收到服务器响应就会触发该事件，所以需要检查status属性确认数据是否真的可用。
  2. progress事件：在接收响应期间持续触发，其事件处理程序包含三个额外属性：lengthComputable、position、totalSize，分别表示进度信息是否可用、已接收字节数、根据Content-Length头部确定的预期字节数。为确保正常执行，该事件处理程序需要在open方法之前添加

  (8) 跨域资源共享（CORS）：

  默认情况下，XHR对象只能访问同源资源（协议、域名、端口完全相同）。CORS的思想是利用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应式是否应该成功。

  1. IE实现——利用XDomainRequest对象，这个对象与XHR对象类似。
  2. 其他浏览器——XHR对象中闯入绝对URL即可，但跨域XHR有些限制：
     1. 不能使用setRequestHeader()设置自定义头部
     2. 不能发送和接收cookie
     3. 使用getResponseHeaders()总会返回空字符串
     4. 由于无论同源请求还是跨域请求都是使用的相同的接口，因此，在访问本地资源时最好使用相对URL，在访问远程资源时再使用绝对URL。这样做可以消除歧义，避免出现限制访问头部或本地cookie信息等问题。
  3. 其他跨域技术
     1. 图像ping：与服务器进行简单单向跨域通信的一种方式，但只能发送get请求且不能访问响应文本。
     2. JSONP：动态创建script元素，为src指定一个跨域URL，由于JSONP是有效的js代码，所以请求完成后将script元素添加至页面即可立即执行。具体过程如下：
        1. 客户端访问接口时传递一个本地函数名作为回调函数
        2. 接口获取参数得知回调函数名称，最后返回一段js字符串，调用本地函数，并将要返回的数据作为参数传入该回调函数
        3. 后端代码通过参数获取，字符串平凑等，返回一段类似于： callbcak({“name”:“Danny”})的js代码
        4. 客户端接收到之后构建script元素并插入文档中，相当于调用了该本地定义的回调函数，其参数即为收到的数据，如此便完成了跨域

  (9) Comet——一种服务器向页面推送数据的技术，主要有两种实现方式，长轮询和HTTP流

  1. 长轮询指的是：页面发起一个请求到服务器，服务器一直保持连接打开，直到有数据可以发送，。发送完数据之后浏览器关闭连接，紧接着又发起一个新请求到服务器。这个过程在页面打开期间持续不断
  2. 轮询可以使用setTimeOut和XHR对象实现
  3. HTTP流是指浏览器向服务器发送一个请求，服务器保持连接打开，然后周期性地向浏览器发送数据
  4. HTTP流可通过监听页面的readystatechange事件并检测readyState值是否为3，就可以利用XHR对象实现HTTP流

  (10) 服务器发送事件——SSE API：用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream

  (11) Web-Sockets：是一种与服务器进项全双工、双向通信的信道。与其他方案不同的是，Web Sockets不使用HTTP协议，而是用一种自定义的协议。这种协议专门为快速传输小数据设计。虽然要求使用不同的web服务器，但却具有速度上的优势。

  你可能感兴趣的:(Web前端)

  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行” coderYYY VSCodebug解决方案前端vue.js编辑器visualstudiovscode
    作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》自从半月前，通义灵码一运行就会报这个错尝试了以下方法，都无法解决：阿里云官方方法：删除c盘的.lingma卸载重新安装通义灵码以管理员身份运行VSCode防火墙设置准入安装之前的版本最后是在扩展设置里面解决的路径不填也可
  • 微信小程序生成小程序转发链接，携带参数跳转到另外一个页面 coderYYY 前端项目教程以及代码小程序微信小程序前端javascript微信
    作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》✨一、前言需求：在页面A生成分享链接（携带参数），分享到微信聊天后，好友点击链接可跳转到页面B，页面B可获取到参数二、具体实现pageA（生成链接页面）：通过给button组件设置属性
  • web前端达到什么水平，才能找到工作？ cj瑾瑜 前端htmljavascriptcsscss3
    一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义
  • JavaScript 中 xml 的解析（dom4j 解析器），web前端开发规范手册 2401_84094868 程序员前端javascriptxml
    创建元素：Elementschool=DocumentHelper.createElement(“school”);创建文本：school.addText(“光明小学”);指定位置添加：list.add(1,school);回写xml：和在末尾添加一样7、获取属性值attributeValue()：获取属性值publicstaticvoidmain(String[]args)throwsDocum
  • 【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！ wcyd Web前端技术前端html5html
    深入探索HTML5：标签全解析与案例演示！大家好！在上一篇文章中，我们对HTML5有了一个基本的了解。今天，我们将更深入地探索HTML5，全面介绍各种标签及其应用。从基础标签到新增标签，从文档结构到格式标签，我们将一一解析，并提供丰富的案例演示。准备好了吗？让我们开始吧！️HTML5基础结构首先，让我们回顾一下HTML5的基本结构。HTML5文档的结构就像一座房子的蓝图，指导我们如何构建网页。下面
  • 479.迪斯尼公主动漫主题网页 大学生期末大作业 Web前端网页制作 html+css+js 仙女网页制作 Web网页设计实例动漫前端课程设计html
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！说起Web前端
  • web前端基础——第八章 ZiminLi 技术栈笔记前端javascript
    目录八十五、对象的简介和基本操作八十六、属性名和属性值八十七、基本数据类型和引用数据类型八十八、对象字面量八十九、函数的简介九十、函数的参数九十一、函数的返回值九十二、实参可以是任何值九十三、返回值的类型九十四、立即执行函数九十五、方法九十六、枚举对象中的属性九十七、作用域（Scope）全局作用域变量的声明提前函数作用域九十八、this九十九、使用工厂方法创建对象一百、构造函数一百零一、原型对象一
  • HTML 文本标签 一壶浊酒.. 前端开发html前端
    一个静态页面绝大部分都是由文字、图片、超链接、音频、视频组成。动态页面和静态页面的区别在于：是否与服务器进行数据交互标题标签这是一级标题这是二级标题这是三级标题这是四级标题这是五级标题这是六级标题web前端开发床前明月光，疑是地上霜。举头望明月，低头思故乡这是普通文本这是粗体文本这是粗体文本斜体文本斜体文本斜体文本--->(a+b)2=a2+b2+2abH2SO4是指硫酸分子水果原价：6元现在：5
  • 利用PHP和Selenium自动化采集数据、实现爬虫抓取 IT大数据小助手 phpselenium自动化
    随着互联网时代的到来，抓取互联网上的数据成为越来越重要的工作。在web前端开发领域，我们经常需要获取页面中的数据来完成一系列的交互操作，为了提高效率，我们可以将这个工作自动化。本文将介绍如何利用PHP和Selenium进行自动化数据采集和爬虫抓取。一、什么是SeleniumSelenium是一个免费的开源自动化测试工具，主要用于自动化测试Web应用程序，可以模拟真实的用户行为，实现自动交互。使用S
  • web前端，JavaScript字符串和数组，练习题:邮箱格式是否正确，登录名和密码格式是否正确 奔向我
    length属性，返回的是字符串的长度indexOf（）方法用于获取字符串中返回指定字符串第一次出现的位置（注意:索引从0开始，找不到返回-1）indexOf（）方法是从数组中检查指定数据的位置（从后往前找第一个），不存在返回-1includes（）方法，从数组中检查指定的数据是否存在，存在返回true,不存在返回falsepush（）方法，向数组的末尾添加一个或更多的元素，并返回新的长度spli
  • Web前端最全初识Sentry前端监控，浅谈前端消息机制原理 2401_84433924 程序员前端sentry
    Vue编码基础2.1.1.组件规范2.1.2.模板中使用简单的表达式2.1.3指令都使用缩写形式2.1.4标签顺序保持一致2.1.5必须为v-for设置键值key2.1.6v-show与v-if选择2.1.7script标签内部结构顺序2.1.8VueRouter规范Vue项目目录规范2.2.1基础2.2.2使用Vue-cli脚手架2.2.3目录说明2.2.4注释说明2.2.5其他开源分享：【大厂
  • web前端 ios性能问题 zhenryx 前端
    1.禁止用户拖拽标签-webkit-user-drag:none;2.禁止用户选择标签user-select:none;//-webkit-touch-callout:none;///*系统默认菜单被禁用*/-webkit-user-select:none;/*webkit浏览器*/-khtml-user-select:none;/*早期浏览器*/-moz-user-select:none;/*火
  • html如何嵌套页面？