blog
blog copied to clipboard
thinkerchan
javascript高级程序设计(第三版) 快速阅读版，省略较多不常用的内容。
## 为什么需要模块化 随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。一单产生了js依赖关系, 那么完全靠手工去对js文件做顺序加载就是不太现实的方案, 所以. Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。 ES6之前, JS是没有模块化的明确实现的 ,全靠开发人员的聪明才智来实现模块化. ## 原始方案 ### 函数 最初实现模块化的思路就是一个简单的函数封装, 以区别于不同的功能, 类似这样: ``` js function m1(){ //... } function m2(){ //... } ``` 这也有很明显的缺点: ”污染”了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系. 不过总聊胜于无....
> 劫持对象属性的get/set特性是双向数据绑定的实现方式. 数据改变的时候, set中触发视图更新函数. 这种思路也就是常见的观察者模式. 手写双向数据绑定, 非常适合作为一道面试题, 它考察了 原型链/变量作用域/闭包/Dom/正则/设计模式等等知识点. ``` js // minivue.js function miniVue(options) { this.$el = document.querySelector(options.el); this.$data = options.data; this.$methods = options.methods; this.bindings = {}; // data中的某个数据有可能作用到好几个地方,...
## 前言 第23章的时候是介绍过indexedDB的, 今天单独把它重新写一遍. 后续给出的代码, 基本能够满足大部分人开发使用了. 为什么只写indexedDB? 我们可以打开chrome浏览器的控制台, 可以看到除了indexedDB实际上还有一种本地数据库方案 - Web SQL(它的语句和主流数据库操作语句没什么区别, 意味着前端还要另外学习sql语句), 但是Web SQL已经明确被放弃了, 所以indexedDB的存在是为了代替它. indexedDB的思想是创建一套API, 方便保存和读取**JS对象**, 同时支持查询搜索. 这样的API设计, 能让前端开发者以更前端的方式进行对接. ## 实例 通常我们操作传统数据库的时候是这么做的: > 创建数据库 -> 创建表 -> 操作数据...
## 跨文档消息传递(XDM) 跨文档消息传递(cross-document messaging)指的是在来自不同域的页面间传递消息。例如，www.wrox.com域中的页面与位于一个内嵌框架中的p2p.wrox.com域中的页面通信。 XDM的核心是postMessage()方法。对于XDM而言，就是将信息发送至包含在当前页面中的iframe元素，或者由当前页面弹出的窗口。 这个方法接受两个参数，一个消息字符串和一个表示消息接受方来自哪个域的字符串。如果内嵌框架的来源不符合参数，则什么也不做，传递“＊”代表匹配所有文档。 ``` js var iframeWindow = document.getElementById("myframe").contentWindow; iframeWindow.postMessage("A secret", "http://www.wrox.com"); ``` ## 原生拖放 ### 拖放事件 通过拖放事件，可以控制拖放相关的各个方面，其中最关键的地方在于确定那里发生了拖放事件，有些事件是在被拖动的元素上产生的，有些是在放置目标上触发的。 拖动某元素时将依次在被拖动的元素上触发下列事件： - dragstart：按下鼠标且鼠标移动开始时 - drag：在元素被拖动的过程中持续触发 - dragend：当拖动停止时，无论把元素放到有效的放置目标上还是无效的上，都会触发dragend事件。 在拖动的过程中，被拖动的元素的外观是可以改变的，一般浏览器会默认创建一个半透明的副本，这个副本始终跟随光标移动。 当某个元素被放置到有效的放置目标的时候，下列事件会在放置目标会依次发生：...
## 基本用法 本章书关于Canvas的都是一些api用法, 这部分内容查阅[W3school](http://www.w3school.com.cn/html5/html_5_canvas.asp) 更为直观. ## WebGL WebGL也就是Canvas 3d的情况, 请查阅 [WebGL教程](https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial) *** 本章完
## 浏览器报告的错误 写此文时chrome已经成了市场主流浏览器(可见百度浏览器统计数据), 书中讲的浏览器版本比较旧也比较多, 这里不再讲解, 大家以chrome为标准即可. ## 错误处理 ### try-catch-finally ``` js try{ //... } catch(error){ console.log(error); }finally { // 一定会执行的代码 } ``` ### 抛出错误 与 try-catch 语旬相配的还有一个 throw 操作符，用于随时抛出自定义错误。抛出错误时，必须要给...
## requestAnimationFrame ### 早期动画循环 JS的动画很长时间以来都是使用计时器setInterval来达成的。就像这样： ``` js (function(){ function updateAnimations(){ doAnimation1(); doAnimation2(); } setInterval(updateAnimations, 100); })() ``` ### 循环间隔的问题 但是这样使用是有问题的，最大的问题就是时间间隔的问题。不能太长，否则看起来就会卡卡的，也不能太短，更新速度超过了屏幕的刷新速度会造成丢帧。 而且浏览器的计时器其实精度是有限的，精度最高的chrome为4ms。且在页面没有显示在屏幕上的时候，大多数浏览器会对计时器的运行频率做出限制。 这样的动画绘制机制就造成了绘制下一帧动画的时机我们并不能准确掌握。最好的结果应该是正好在屏幕刷新的那一刻绘制下一帧，也就是动画绘制的速度与电脑屏幕刷新速度一致。 于是Mozilla就带头提出了requestAnimationFrame这个API, 如今这个API已经被标准化: ``` js function updateProgress(){ var div...
## 高级函数 ### 安全类型的检测 JavaScript 内置的类型检测机制并非完全可靠。事实上，发生错误否定及错误肯定的情况也不在少数。比如说 typeof 操作符吧，由于它有一些无法预知的行为，经常会导致检测数据类型时得到不靠谱的结果。 ``` js var isArray = value instanceof Array; ``` 这个表达式要是想返回true，value必须是个数组，且必须与Array构造函数在同一个全局作用域中，如果value是另一个全局作用域(其他frame)中定义的数组，那这个表达式返回false。 检测某个对象是原生的还是开发人员自定义的对象时也会有问题。因为浏览器开始原生支持JSON了，而有些开发人员还是在用第三方库来实现JSON，这个库里会有全局的JSON对象，这样想确定JSON对象是不是原生的就麻烦了。 解决这些问题的办法就是使用Object的toString方法，这个方法会返回一个[object NativeConstructorName]格式的字符串。 ``` js function isArray(value){ return Object.prototype.toString.call(value) == "[object Array]";...