Jack's Blog
所有文章

《JavaScript高级程序设计》读书笔记

12 分钟阅读#1
#blog

2017-09-12

看完第7章，对最后的增强的模块模式颇有感触，一起总结下：
0.声明会被自动提升，包括函数声明提升和变量提升。对于函数提升带来的非预期结果，可以用函数表达式解决
0.闭包可以理解为一种特殊的对象，包括【函数】以及与其相关的【变量】。其存在的原因是由于Js的作用域链，变量会沿着作用域链向上查找。正常的函数执行完毕后会自动销毁内部变量，但由于闭包返回的是一个函数，所以同时也能把变量返回。
0.闭包的作用思考了下，大概有两点：1）可以读取函数内部变量 2）可以将变量值保留在内存中（注意由此带来的内存开销）
0.可以使用 IIFE模拟块级作用域
0.增强的模块模式包括【私有】和【公有】变量和方法，对单例模式在私密性有意义

大概这么多了，(๑•̀ㅂ•́)و✧加油

2017-09-14

看完第8章 BOM，大概总结下：

  1. BOM 的核心对象window既可以是 Js访问浏览器的接口，也是Js 的 Global对象
  2. 窗口与框架
    1. 每个框架都有自己的 window 对象
    2. 可以通过 window.frames[0]，window.frame[’name’]，top.frame[0]，top.frame[’name’]等访问框架对象
    3. 推荐使用 top，parent，self 对象来访问框架（因为 window 不一定是最高层框架）
    4. 窗口位置 screenX，screenY
    5. 窗口大小 innerWidth，innerHeigh，outerWidth，outerHeight(document.documentElement访问)
    6. 调整位置：resizeTo,resizeBy
    7. window.open(url, target, mode, replacer) p199
    8. setTimeout,setInterval（两种调用的开始时间不一样，注意）
    9. alert,confirm,prompt
  3. location
    1. hash,host,hostname,pathname,port,href,protocol,search
    2. 除更改 hash 外，都会重新加载
    3. 使用 replace 不会生成记录
  4. navigator，screen 对象
  5. history对象
    1. go,back,forward

第8章内容虽不多，但知识点较难记忆。只能通过以后翻阅查询了

😀 加油~

2017-09-15

粗略过了下第9章，对代理检测又有新的认知

  1. 浏览器检测是为了实现兼容性而设计的。其设计目标是首先设计通用的法案，在使用基于特定浏览器的技术增强方案。
  2. 客户端检测分为能力检测，怪癖检测和代理检测（一直在用都不知道这个学名。。。）
  3. 能力检测是对于特定的功能检测，如果具备这个能力则使用这个特性
  4. 怪癖检测不同于能力检测在于其目的是检测浏览器存在什么 bug
  5. 用户代理检测主要使用 navigator.userAgent 检测
  6. 用户代理的历史由来已久。。。
  7. 目前接触的产品主要有检测移动端平台、微信环境等，实现起来不难

大概是这么多了，有需要再查询相关资料。
周末，愉快~O(∩_∩)O

2017-09-17

第10章，DOM。看完第一节，总结下

  1. DOM是一个文档的 API
  2. DOM 是通过节点的关系链接起来的层次结构
  3. 常用的 nodeType 有1，3，9
  4. 节点具有 childNodes 属性，它是一个类数组，可以通过 Array.prototype
    .slice.call(node)获得普通数组的方法
  5. 节点还具有 parentNode，previousSibling,nextSibling,fistChild,lastChild等属性
  6. 操作节点可以用 appendChild,insertBefore,replaceChild,removeChild,cloneChild,normalize。其中指定 cloneChild(true)可以深拷贝
  7. document 可以通过 document.documentElement 获得引用，其主要属性有 doctype,title,URL,domain,referrer，anchors,forms,images,links
  8. 元素查找有 getElementById,getElementsByClassName,getElementsByName,getElementsByTagName等方式
  9. 文档写入有 write,writeln,open,close等方法
  10. HTML 元素主要有 id,title,lang,dir,className属性
  11. 通过 getAttribute获得属性，setAttribute 设置属性，removeAttribute 移除属性
  12. document.createElement 创建新元素,document.createTextNode 创建文本节点
  13. text类型的方法有 appendData,deleteData,instertData,replaceData,splitText,substringData,normalize

主要的内容大概这么多，有需要再来翻阅~(๑•̀ㅂ•́)و✧加油

2017-09-18

完成了第10章剩下的两节和第11章。总结下

  1. DOM 操作有动态脚本，动态样式，动态操作表格等。DOM 已为操作这些元素提供了便利，需要时查询即可
  2. NodeList，NamedNodeMap，HTMLCollection 理解
  3. DOM的扩展有选择符扩展（应用的 document,element,documentElement上的 querySelector,querySelectorAll）,和 matchesSelector ，元素遍历（childElementCount,firstElementChild,lastElementChild,previousElementSibling,nextElementSibling）
  4. HTML 扩展有 选择器 getElementsByClassName，classList 属性。其中 childList 是新类型DOMTokenList 的示例，故有 add,contains,remove,toggle 等方法，实在好用。焦点管理有 document.activeElement属性和 document.hasFocus方法
  5. 此外还有 readyState,兼容模式，head 属性，字符集属性，自定义数据属性（dataset）,innerHTML 和 outerHTML,innerText 等
  6. 对于页面滚动，有 scrollIntoView(bolean),scrollIntoViewIfNeeded,scrollByLines,scriooByPages等方法

大体是这么多，收获最多的是 scroll 事件，对页面定位有很大的帮助。暂时这么多了，加油~

2017-09-19

第12章，只看到12.2.2，大概总结下

  1. DOM@定义了 HTML 和 XML 的底层结构，DOM2和 DOM3通过增加方法、属性、类型来增强语义
  2. 第一个是命名空间的变化，命名空间是为了解决混合文档的问题。在 doucment 上增加的有*NS(namespaceURI,fun)等方法
  3. 核心层面的变化有增加了 publicId，systemId和 internalSubset 方法，此外还有一个异与 cloneNode 的方法 importNode，其可以将节点导入另外一个文档中
  4. createHTMLDocument用以创建新的 HTML 文档,增加的还有 isSupported,setUserData,getUserData,contentDocunemt 等
  5. 样式方面，使用 style 属性可以设置或读取相应样式，（float=>cssFloat）。主要有方法：cssText(批量设置属性)，length，item（迭代使用），parentRule，getPropertyCssValue,getPropertyValue,removeProperty,setProperty等
  6. 增加了计算样式 getComputedStyle 方法，可以计算得来真正的属性方法

2017-09-20

第12章余下的部分。总结：

  1. 操作样式的基类是 CSSStyleSheet
  2. 元素大小：offsetHight 和 offsetWidth 是元素的【内容+内边距+边框】之和，offsetLeft和 offsetTop 是元素【距离 offsetParent】的距离
  3. clientHeight 和 clientWidth 是元素的【内容+内边距】之和
  4. scrollHeight 和 scrollWidth 是元素的【内容+内边距】之和
  5. scrollTop 和 scrollLeft 是元素【隐藏的距离】
  6. 范围可以通过 createRange 创建，selectNode和 selectNodeConents添加元素
  7. 遍历操作要细度了

大概这么多

第12章的内容好多，只能慢慢肯了 ~ 😀

2017-09-21

啃到第13章到13.4.8节，总结下：

  1. Js 与 HTML 交互是通过事件实现的，使用侦听器监听事件，之后再触发事件的过程
  2. 事件流是页面接收事件的顺序。在 DOM2上分三个阶段【事件捕获阶段】、【目标阶段】和【事件冒泡阶段】
  3. 事件处理程序有 HTML事件处理（标签内添加事件），DOM0级处理(onclick 事件)和 DOM2级事件（addEventListener）。推荐使用DOM2级处理，原因三点：1.表现与结构相分离 2.可为同一元素添加多个事件 3.可规定事件流触发顺序
  4. 事件对象 event 常用的有 detail，currentTarget，target，trusted，type，preventDefault()，stopPropagation()等
  5. 事件类型有 UI、焦点、鼠标、键盘、滚轮、文本、合成、变动等事件
  6. 和 UI 相关的有 load，unload,resize,scroll,select,error,abort,
  7. 和焦点相关的主要有 focus和 blur
  8. 鼠标事件有：click，dbclick，mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover,mouseup,mousewheel(wheelDelta 正负即为方向)。和坐标相关的有客户区clientX,clientY，页面 pageX,pageY，屏幕 screenX,screenY
  9. 修改键 shiftKey,ctrlKey,altKey,metaKey，键码是以 ASCII 码对应。可以用 e.keyCode/e.key/e.char 取得鼠标键值
  10. HTML5新增事件有contentment，beforeunload，DOMContentLoaded，readystatechange，pageshow，pagehide和 haschange 事件
  11. 设备事件有 orientationchange，deviceorientation，deviceemotion 事件

获益匪浅，要(๑•̀ㅂ•́)و✧加油了

2017-09-23

看完剩下的13章和14章，总结下：

  1. 触摸事件touchstart,touchmove,touchend，用以它们的属性：touches，targetTouches,changeTouches
  2. 手势事件有 gesturestart，gesturechange 和 gestureend，此外，包含两个特殊属性：rotation和 scale
  3. 内存和性能方面主要有：使用事件委托，移除过期的事件处理器等（不限于此
  4. HTMLFormElement 继承自 HTMLElement，公有属性：acceptCharest,action,elements,enctype,length,method,name,reset,submit,target
  5. 表单的提交方式通过制定 type 为 submit,或 image
  6. 表单字段可以从 elements 中获取
  7. 共用的表单属性：disabled，form,name,readOnly,tabIndex,type,value 等，共有的方法：focus，blur,共有的事件：blur,change,focus
  8. 选择文本通过 select 方法，selectionStart，selectionEnd获得选择索引
  9. 表单的约束验证有必填字段，类型检查，数值范围，输入模式和检查有效性等
  10. WYSIWYG 可是使用 contenteditable属性，操作富文本主要使用 document.execCommond 命令

HTML5给表单带来了更多的操作空间，一定程度上减少了 Js 逻辑复杂度。但可靠的验证还需要 JS 来完成。

[](￣▽￣)*干杯

2017-09-24

看了第15章的 canvas 部分前三节，总结下：

  1. 创建 canvas首先要使用 HTML5的 canvas元素，并要指定宽和高
  2. 取得绘制上线文 getContext(‘2d’)
  3. 填充和描边使用 fillStyle 和 strokeStyle 属性来指定
  4. 绘制矩形 fillRect,strokeRect,clearRect
  5. 绘制路径先调用 begiPath，然后可以调用以下方法来绘制路径:arc,arcTo,bezierCurveTo,lineTo,moveTo,quadraticCurveto,rect,
  6. 绘制文本：fillText,strokeText。基础属性：font,textAlign,textBaseline
  7. 变换矩阵：rotate,scale,translate,transform,setTransform
  8. 绘制图像：drawImage。其结果可以通过 toDataURL 获得
  9. 阴影的创建：shadowColor,shadowOffsetX,shadowOffsetY,shadowBlur
  10. 渐变：createLinearGradient,addColorStop
  11. 模式的创建：createPattern
  12. 读取图像数据：getImageData
  13. 合成：globalAlpha和 globalCompostionOperation

内容很多，但大多数都是 API 的使用，孰能生巧就好了

2017-09-25

看了第16章的HTML5脚本编程，总结下：

  1. 跨文档消息传递（XDM）核心方法 postMessage(msg,domain)，可以使用 message 事件监听此事件，其中，event 包含的 data,origin,source 属性十分重要
  2. 原生拖放，开始拖放dragstart,drag,dragend，放置目标dragenter,dragover,dragleave或 drop
  3. dataTransfer 对象保存着拖放的重要方法 getData 和 setData。可以在拖放开始时 setData,setData 接受 MIME类型
  4. 媒体元素 video,audio，检查编码器的支持情况 canPlayType,返回值可能是 probably，maybe,或””
  5. 历史状态管理：hashchange事件，pushState（obj,title,url），replaceState

第16章的内容不多，最重要的拖放、媒体、历史状态都有详解。自己动手才能理解，加油~
:D

2017-09-26

恰好最近和架构商量前端错误预警，今天刚刚看到第17章“错误处理与调试”，试着总结下：

  1. 错误处理的重要性：任何有影响力的 Web 程序都要一套完整的错误处理机制
  2. 可以使用 try{}catch(err){}finally{}捕获错误
  3. 错误类型有 Error(基类)，RangeError，ReferenceError，SyntaxError，TypeError，EvalError,URIError等类型，其中 SyntaxError 会导致程序停止
  4. 错误要给定适当的信息进行定位，捕获用于避免浏览器默认处理，抛出用于提供错误信息
  5. error 事件是 DOM0级，要用 onerror处理
  6. “作为开发人员，必须要知道代码何时可能出错，会出什么错，同时还要有一个跟踪此类问题的系统”
  7. 类型转换错误，数据类型错误及通信错误通常是关注的重点。基本类型的值使用 typeof 来检测，对象值使用 instanceof检测。
  8. 分清致命错误和非致命错误取决于业务
  9. 把错误记录到服务器可用于定位错误，及时发现错误（用 new Image()发送错误还真是奇淫技巧。。。

大体这么多，明天实操一番了:D

2017-09-27

翻看了第18章和19章的内容，讲得是 XML 和 E4X，发现实际工作用得不多，甚至目前没有用到。暂时搁置了。。。

2017-09-28

完成了第20章和21章1.3节，试着总结下：

  1. JSON包含三类值：简单值，对象和数组
  2. JSON 对象的两个方法 JSON.stringify(value, replacer?: (key: string, value: any) => any ,space?: string | number)，JSON.parse(text: string,reviver?: (key: any, value: any) => any)
  3. JSON.stringify()中，所有函数及原型对象都会被有意忽略，值为 undefined也会被忽略
  4. 在序列化中，可以使用 toJSON()方法自定义返回值
  5. Ajax 的核心对象是XMLHttpRequest

熟悉了JSON 对象的两个核心方法和 XHR 对象属性方法的用途，收获不少~~

2017-09-30

完成了21章的余下部分和22章1.4节：

  1. 跨域源资源共享 CORS 在主流浏览器需指定绝对路径
  2. withCredentials 设置为 true 即可将客户端 cookie 发送
  3. 图像 ping 和 JSONP 也可以实现跨域
  4. Web Sockets 提供了全双工，双向通信的能力。在使用上一般有建立 new Socket，socket.send，socket.open，socket.error 和 socket.close 方法。通过监听 message 事件得到服务器消息
  5. 安全的类型检测可以使用 Object.prototype.toString.call，作用域安全检测要判断相应的示例对象 this 指向。惰性载入函数的目的是为了节省 JS 重复判断时间，加快运行速度，可以在通过检测后直接赋值给所用对象

大概这么多了，高级内容的知识要慢慢咀嚼了

各位，十一快乐哈~~ :D

2017-10-09

今天完成了22章高级技巧余下的部分理解，总结下：
1. 惰性载入函数是为了节省 js 运算性能，在多次重复判断时最为明显
2. 防篡改对象的创建有 Object.preventExtensions，Object.seal,Object.freeze
3. 定时器的工作方式是“在特定时间过去后将代码插入执行队列，尽快执行”
4. 可以避免重复定时器间隔跳过或间隔错误等问题
5. 性能问题的考量十分重要，可以使用数组分块技术减少大数组执行时间过长的问题
6. 节流则是避免同一时间，相同的代码无必须的执行。

十一过后的第一次阅读了，要多花点时间才行，(๑•̀ㅂ•́)و✧加油

2017-10-11

完成了第23章的阅读，试着总结下：

  1. 离线检测可以navigator.onLine 属性，用 online和 offline检测联网状态改变
  2. 应用缓存使用描述文件（manifest file）关联文件
  3. cookie 是绑定在特定域名下，其有大小的限制。其有名称、域名、路径、过期时间、安全等部分构成
  4. web 存储机制有 Storage 类型，localStoreage,sessionStorage,globalStorage等。注意它们适用的场景及限制
  5. 结构换数据库 IndexedDB，有固有的一套 API，方便索引。具体实现晚点总结

大概这么多，对 IndexedDB有深入的一次了解

2017-10-15

完成本书的最后一章新兴 API的阅读，总结下：

  1. requestAnimationFrame用以流畅得更新动画，可以使用递归的方式调用
  2. Page visibility API用于监听页面的显示/隐藏
  3. Geolocation API 可以在得到用户授权后得到用户的位置信息
  4. File和 FileReader 都是为了增强客户端文件处理的方法
  5. Web Workers可以以异步的方式运行客户端代码，在执行大量的运算时会非常有用

啊啊啊啊，《高程3》就这样读完了，体会的是对 JS的认识更为全面了，平常遇到的问题也大都能在读到的时候恍然大悟。但这也只是一小步，如何运用这些 API编写设计良好、维护性强及性能卓越的程序才是长期的努力目标 。“君子藏器于身，相时而动”，那就用 Js 这板斧，踏平前路吧！

这篇文章写在 GitHub Issue 里。

在 GitHub 上参与讨论 ↗