![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
阅读笔记
阅读笔记
青鸟明丹心
山间的风,林间的雨,万物为我所用,而不为我所有...
展开
-
0-JavaScript高级程序设计-序章
一、目录第 1 章“JavaScript 简介”第 2 章“在 HTML 中使用 JavaScript”第 3 章“基本概念” ⭐️第 4 章“变量、作用域和内存问题” ⭐️第 5 章“引用类型” ⭐️第 6 章“面向对象的程序设计” ⭐️第 7 章“函数表达式” ⭐️第 8 章“BOM” ⭐️第 9 章“客户端检测”第 10 章“DOM” ⭐️第 11 章“D...原创 2019-08-21 19:25:53 · 196 阅读 · 0 评论 -
54-附录-严格模式
一、严格模式ECMAScript 5 最早引入了“严格模式”(strict mode)的概念。通过严格模式,可以在函数内部选择进行较为严格的全局或局部的错误条件检测。使用严格模式的好处是可以提早知道代码中存在的错误,及时捕获一些可能导致编程错误的 ECMAScript 行为。支持严格模式的浏览器:IE10+、Firefox 4+、Safari 5.1+ 和 Chrome。1. 选择使用...原创 2019-08-21 19:00:29 · 128 阅读 · 0 评论 -
53-附录-ECMAScript Harmony
一、ECMAScript HarmonyHarmony(ECMAScript 6)与 ECMAScript 5 的指导思想一致:只进行增量调整,不彻底改造 JavaScript 语言。1. 一般性变化(1)常量const 关键字声明常量:const MAX_SIZE = 25;使用方式与 var 类似,但 const 声明的变量在初始赋值后,就不能再重新赋值。可以像声明变量一样在任何地...原创 2019-08-21 13:49:58 · 273 阅读 · 0 评论 -
52-JavaScript高级程序设计-新兴的API
一、requestAnimationFrame()1. 早期动画循环JavaScript 中创建动画的典型方式,就是使用 setInterval() 方法来控制所有动画。关键是要知道延迟时间多长合适,最平滑动画的最佳循环间隔是 1000ms/60,约等于 17ms。以这个循环间隔重绘的动画是最平滑的,因为这个速度最接近浏览器的最高限速。问题:间隔时间指定了把动画代码添加到浏览器 UI 线程...原创 2019-08-18 22:16:12 · 163 阅读 · 0 评论 -
51-JavaScript高级程序设计-最佳实践2性能&部署
二、性能1. 注意作用域访问全局变量总是要比访问局部变量慢,因为需要遍历作用域链。只要能减少花费在作用域链上的时间,就能增加脚本的整体性能。避免全局查找将一个函数中会用到多次的全局对象存储为局部变量,减少全局查找次数。避免 with 语句在性能非常重要的地方必须避免使用 with 语句。和函数类似,with 语句会创建自己的作用域,会增加其中执行的代码的作用域链的长度。with 语句...原创 2019-08-18 20:21:59 · 143 阅读 · 0 评论 -
50-JavaScript高级程序设计-最佳实践1可维护性
一、可维护性1. 什么是可维护的代码可理解性——其他人可以接手代码并理解它的意图和一般途径,而无需原开发人员的完整解释。直观性——代码中的东西一看就能明白,不管其操作过程多么复杂。可适应性——代码以一种数据上的变化不要求完全重写的方法撰写。可扩展性——在代码架构上已考虑到在未来允许对核心功能进行扩展。可调试性——当有地方出错时,代码可以给予你足够的信息来尽可能直接地确定问题所在。...原创 2019-08-17 22:09:58 · 198 阅读 · 0 评论 -
49-JavaScript高级程序设计-离线应用与客户端存储
一、离线应用离线 Web 应用:在设备不能上网的情况下仍然可以运行的应用。(HTML5 一个重点)开发离线 Web 应用的几个步骤:1)确保应用知道设备是否能上网,以便下一步执行正确的操作。2)应用必须能访问一定的资源(图像、JavaScript、CSS 等),只有这样才能正常工作。3)必须有一块本地空间用于保存数据,无论能否上网都不妨碍读写。...原创 2019-08-16 21:55:30 · 140 阅读 · 0 评论 -
48-JavaScript高级程序设计-高级技巧3自定义事件&拖放
四、自定义事件事件是 JavaScript 与浏览器交互的主要途径。事件是一种叫做观察者的设计模式,这是一种创建松散耦合代码的技术。观察者模式由两类对象组成:主体和观察者。主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。自定义事件背后的概念:创建一个管理事件的对象,让其他对象监听那些事件。基本模式:function EventTarget(){ this.handle...原创 2019-08-15 21:23:11 · 155 阅读 · 0 评论 -
47-JavaScript高级程序设计-高级技巧2防篡改对象&高级定时器
二、防篡改对象JavaScript 共享的本质,任何对象都可以被在同一环境中运行的代码修改。ECMAScript 5 致力于解决这个问题,可以让开发人员定义防篡改对象(tamper-proof object)。JavaScript对象,可以手工设置每个属性的 [[Configurable]]、[[Writable]]、[[Enumerable]]、[[Value]]、[[Get]] 以及 [...原创 2019-08-15 20:10:50 · 148 阅读 · 0 评论 -
46-JavaScript高级程序设计-高级技巧1高级函数
一、高级函数1. 安全的类型检测JavaScript 内置的类型检测机制并非完全可靠。问题:typeof 操作符,有一些无法预知的行为,经常会导致检测数据类型时得到不靠谱的结果。Safari(直至第 4 版)在对正则表达式应用 typeof 操作符时会返回 “function”。instanceof 操作符在存在多个全局作用域(像一个页面包含多个 frame)的情况下,也是问题多多。在...原创 2019-08-15 13:16:33 · 136 阅读 · 0 评论 -
45-JavaScript高级程序设计-跨域
一、跨源资源共享1. CORS通过 XHR 实现 Ajax 通信的一个主要限制,来源于跨域安全策略。默认情况下,XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。CORS(Cross-Origin Resource Sharing,跨源资源共享),定义了在必须访问跨源资源时,浏览器与服务器应该如何沟通。CORS 背后的基本思想:使用自定义的 HTT...原创 2019-08-14 17:18:33 · 248 阅读 · 0 评论 -
44-JavaScript高级程序设计-XMLHttpRequest对象
AjaxAjax:Asynchronous JavaScript + XML 的简写,虽然名字包含 XML,但 Ajax 通信与数据格式无关。【无须刷新页面即可从服务器取得数据】核心:XMLHttpRequest 对象 (简称 XHR)原创 2019-08-07 18:34:44 · 145 阅读 · 0 评论 -
43-JavaScript高级程序设计-JSON
JSON是一种数据格式,不是一种编程语言。一、语法JSON 的语法可以表示以下三种类型的值:简单值:使用与 JavaScript 相同的语法,可以在 JSON 中表示字符串、数值、布尔值和 null。但 JSON 不支持 JavaScript 中的特殊值 undefined。对象:对象作为一种复杂数据类型,表示的是一组无序的键值对。每个键值对中的值可以是简单值,也可以是复杂数据类型的值。...原创 2019-08-06 23:33:28 · 145 阅读 · 0 评论 -
42-JavaScript高级程序设计-E4X
一、E4XE4X(ECMAScript for XML):E4X 本身不是一门语言,它只是 ECMAScript 语言的可选扩展。就其本身而言,E4X 为处理 XML 定义了新的语法,也定义了特定于 XML 的对象。1. E4X 的类型E4X 定义了几个新的全局类型:XML:XML 结构中的任何一个独立的部分。XMLList:XML 对象的集合。Namespace:命名空间前缀与命名...原创 2019-08-04 14:06:49 · 203 阅读 · 0 评论 -
41-JavaScript高级程序设计-JavaScript与XML
一、JavaScript 与 XML1. 浏览器对 XML DOM 的支持document.implementation 引入方法 createDocument()。浏览器支持:IE9+、Firefox、Opera、Chrome 和 Safari。var xmldom = document.implementation.createDocument(namespaceUri, root, ...原创 2019-08-03 23:20:46 · 290 阅读 · 0 评论 -
40-JavaScript高级程序设计-错误处理与调试
一、错误处理与调试1. 浏览器报告的错误IE 是唯一一个在浏览器的界面窗体(chrome)中显示 JavaScript 错误信息的浏览器。在发生 JavaScript错误时,浏览器左下角会出现一个黄色的图标,图标旁边则显示着 “Error on page” (页面中有错误)。...原创 2019-08-02 23:49:24 · 220 阅读 · 0 评论 -
39-JavaScript高级程序设计-HTML5 脚本编程
HTML5 脚本编程一、跨文档消息传递跨文档消息传送(cross-document messaging):有时候简称为 XDM,指的是在来自不同域的页面间传递消息。【核心】postMessage():向另一个地方传递数据,对于 XDM 而言,“另一个地方”指的是包含在当前页面中的<iframe>元素,或者由当前页面弹出的窗口。两个参数:一条消息和一个表示消息接收方来自哪个域的字...原创 2019-08-01 21:14:06 · 257 阅读 · 0 评论 -
38-JavaScript高级程序设计-canvas
一、使用 canvas 绘图HTML5 添加 <canvas>元素,该元素负责在页面中设定一个区域,然后就可以通过 JavaScript 动态地在这个区域中绘制图形。浏览器支持:IE9+、Firefox 1.5+、Safari 2+、Opera 9+、Chrome、iOS 版 Safari 以及 Android 版 WebKit 都在某种程度上支持。1. 基本用法要使用<...原创 2019-07-31 18:24:14 · 546 阅读 · 0 评论 -
37-JavaScript高级程序设计-表单序列化和富文本编辑
一、表单序列化在 JavaScript 中,可以利用表单字段的 type 属性,连同 name 和 value 属性一起实现对表单的序列化。在表单提交期间,浏览器将数据发送给服务器遵循规则:对表单字段的名称和值进行 URL 编码,使用和号(&)分隔。不发送禁用的表单字段。只发送勾选的复选框和单选按钮。不发送 type 为 “reset” 和 “button” 的按钮。多选选...原创 2019-07-30 23:06:45 · 213 阅读 · 0 评论 -
36-JavaScript高级程序设计-选择框脚本
一、选择框脚本选择框是通过 <select> 和 <option> 元素创建的。除了所有表单字段共有的属性和方法外,HTMLSelectElement 类型提供下列属性和方法:multiple:布尔值,表示是否允许多项选择;等价于 HTML 中的 multiple 特性。options:控件中所有 <option> 元素的 HTMLCollection ...原创 2019-07-30 22:37:47 · 173 阅读 · 0 评论 -
35-JavaScript高级程序设计-文本框脚本
一、文本框脚本表现文本框的两种方式:(1)使用 <input> 元素的单行文本框type:“text”size:指定文本框中能够显示的字符数value:设置文本框的初始值maxlength:指定文本框可以接受的最大字符数<input type="text" size="25" maxlength="50" value="initial value">(2)使...原创 2019-07-29 23:16:36 · 256 阅读 · 0 评论 -
34-JavaScript高级程序设计-表单基础知识
一、表单的基础知识HTML 中,表单由 <form> 元素表示;JavaScript 中,表单对应 HTMLFormElement 类型(继承了 HTMLElement)。HTMLFormElement 独有的属性和方法:acceptCharset:服务器能够处理的字符集;等价于 HTML 中的 accept-charset 特性。action:接受请求的 URL;等价于 H...原创 2019-07-24 21:19:49 · 129 阅读 · 0 评论 -
33-JavaScript高级程序设计-性能&模拟事件
一、内存和性能性能问题:在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。原因是多方面的。首先,每个函数都是对象,都会占用内存;内存中的对象越多,性能就越差。其次,必须事先指定所有事件处理程序而导致的 DOM 访问次数,会延迟整个页面的交互就绪时间。1. 事件委托对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡,只指定一个...原创 2019-07-21 19:09:31 · 129 阅读 · 0 评论 -
32-JavaScript高级程序设计-事件类型(下)
一、事件类型接上篇4. 键盘与文本事件键盘事件:用户在使用键盘时会触发键盘事件3 个键盘事件:keydown:当用户按下键盘上的任意键时触发,按住不放会重复触发此事件。keypress:当用户按下键盘上的字符键时触发,按住不放会重复触发此事件。按下 Esc 键也会触发。keyup:当用户释放键盘上的键时触发。最常使用场景:用户通过文本框输入文本时。1个文本事件:textInpu...原创 2019-07-20 22:15:15 · 189 阅读 · 0 评论 -
31-JavaScript高级程序设计-事件类型(上)
一、事件类型1. UI事件UI(User Interface,用户界面)事件,指的是那些不一定与用户操作有关的事件,当用户与页面上的元素交互时触发。现有的 UI 事件,多数与 window 对象或表单控件相关。DOMActivate(废弃)、load、unload、abort、error、select、resize、scroll。(1)load 事件当页面完全加载后(包括所有图像、J...原创 2019-07-18 13:14:15 · 152 阅读 · 0 评论 -
30-JavaScript高级程序设计-事件对象
一、事件对象事件对象(event):包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。1. DOM中的事件对象兼容 DOM 的浏览器,会将一个 event 对象传入到事件处理程序中。在通过 HTML 特性指定事件处理程序时,变量 event 中保存着 event 对象。// DOM0级btn.onclick = function(event){ ...原创 2019-07-17 18:00:47 · 119 阅读 · 0 评论 -
29-JavaScript高级程序设计-事件流&事件处理程序
一、事件1. 事件流事件流:描述从页面中接收事件的顺序。(1)事件冒泡 ⭐️事件冒泡(event bubbling):事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。所有现代浏览器都支持事件冒泡。实现差别:IE5.5 及更早版本中的事件冒泡会跳过<html>元素,IE9、Firefox、Chrome 和 Safari...原创 2019-07-17 13:11:37 · 138 阅读 · 0 评论 -
28-JavaScript高级程序设计-DOM2&3范围
四、范围“DOM2 级遍历和范围”模块定义了“范围”(range)接口。通过范围可以选择文档中的一个区域,而不必考虑节点的界限(选择在后台完成,对用户是不可见的)。1. DOM中的范围创建 DOM 范围:document.createRange()每个范围由一个 Range 类型的实例表示,这个实例拥有很多属性和方法:startContainer:包含范围起点的节点(即选区中第一个节点的...原创 2019-07-16 18:15:20 · 153 阅读 · 0 评论 -
27-JavaScript高级程序设计-DOM2&3遍历
三、遍历“DOM2 级遍历和范围”模块定义了两个用于辅助完成顺序遍历 DOM 结构的类型:NodeIterator 和 TreeWalker。这两个类型能够基于给定的起点对 DOM 结构执行深度优先(depth-first)的遍历操作。浏览器支持:Firefox 1+、Safari 1.3+、Opera 7.6+、Chrome 0.2+,IE不支持。1. NodeIterator2. T...原创 2019-07-16 13:09:17 · 122 阅读 · 0 评论 -
26-JavaScript高级程序设计-DOM2&3样式
二、样式在 HTML 中定义样式的方式有 3 种:1.通过 <link/> 元素包含外部样式表文件(外联)2.使用 <style/> 元素定义嵌入式样式(嵌入)3.使用 style 特性定义针对特定元素的样式(行内)确定浏览器是否支持 DOM2级定义的 CSS能力:var supportsDOM2CSS = document.implementation.has...原创 2019-07-15 22:01:06 · 143 阅读 · 0 评论 -
25-JavaScript高级程序设计-DOM2&3变化
DOM1 级主要定义的是 HTML 和 XML 文档的底层结构。DOM2 和 DOM3 级则在这个结构的基础上引入了更多的交互能力,也支持了更高级的 XML 特性。一、DOM变化DOM2 级和 3 级的目的在于扩展 DOM API,以满足操作 XML 的所有需求,同时提供更好的错误处理及特性检测能力。“DOM2 级核心”没有引入新类型,它只是在 DOM1 级的基础上通过增加新方法和新属性来增...原创 2019-07-14 22:50:34 · 126 阅读 · 0 评论 -
24-JavaScript高级程序设计-DOM扩展
一、DOM扩展对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和 HTML5。1. 选择符 APIquerySelector()接收一个 CSS 选择符,返回匹配的第一个元素,没有找到返回 null。querySelectorAll()接收一个 CSS 选择符,返回所有匹配的元素。(实际上是带有所有属性和方法的 NodeList 对象)取得返回的 Node...原创 2019-07-13 22:14:00 · 164 阅读 · 0 评论 -
23-JavaScript高级程序设计-DOM操作技术
一、DOM操作技术1. 动态脚本向页面中插入 JavaScript 代码:1.通过 <script> 元素的 src 特性包含外部文件;2.用 <script> 元素本身来包含代码。动态脚本:在页面加载时不存在,但将来某一时刻通过修改 DOM 动态添加的脚本。创建动态脚本两种方式:插入外部文件:function loadScript(url){ va...原创 2019-07-13 19:00:27 · 143 阅读 · 0 评论 -
22-JavaScript高级程序设计-DOM节点(下)
一、节点层次(接上篇)3. Element类型原创 2019-07-11 21:34:49 · 120 阅读 · 0 评论 -
21-JavaScript高级程序设计-DOM节点(上)
DOM(文档对象模型):针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。DOM 描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。一、节点层次节点之间的关系构成了层次,所有页面标记表现为一个以特定节点为根节点的树形结构。文档节点:每个文档的根节点文档元素:文档的最外层元素,文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在 H...原创 2019-07-11 13:12:20 · 188 阅读 · 0 评论 -
20-JavaScript高级程序设计-客户端检测
一、能力检测最常用也最为人们广泛接受的客户端检测形式是能力检测(又称特性检测)。能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力。...原创 2019-07-09 22:20:34 · 134 阅读 · 0 评论 -
19-JavaScript高级程序设计-location对象
一、location对象location对象:提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。特殊:location对象既是window对象的属性,也是document对象的属性。location 对象的所有属性:href "http:/www.wrox.com"返回当前加载页面的完整URL。location对象的toString()方法也返回这个值protocol ...原创 2019-07-08 23:24:26 · 172 阅读 · 0 评论 -
18-JavaScript高级程序设计-window对象
一、BOM 之 window对象BOM 的核心对象是 window,表示浏览器的一个实例。在浏览器中,window 对象有双重角色, 既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。1....原创 2019-07-08 12:36:15 · 203 阅读 · 0 评论 -
17-JavaScript高级程序设计-函数表达式
一、函数表达式1.定义函数2种方式函数声明function functionName(arg0, arg1, arg2) { //函数体}Firefox、Safari、Chrome 和 Opera 给函数定义了一个非标准的 name 属性,可以访问函数名。重要特征:函数声明提升(function declaration hoisting)函数表达式var functi...原创 2019-07-07 18:03:23 · 119 阅读 · 0 评论 -
16-JavaScript高级程序设计-继承
一、继承许多 OO 语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,实现继承则继承实际的方法。ECMAScript 只支持实现继承,主要依靠原型链实现。1.原型链原型对象也有自己的原型,原型的原型也指向自己的构造函数。层层递进,形成原型链。原创 2019-07-06 23:12:26 · 167 阅读 · 0 评论