Js高级技巧

11,113 views

Published on

本课程从规范的角度来出发来展示JS语言的全景图及其发展趋势。
课程并不打算让学员陷入那些让人抓狂的浏览器兼容性细节问题,将目光聚焦到重要的概念上,部分内容通过与JAVA的比较让学员有较深入的理解,并为这些功能点准备了充分的demo。

Published in: Technology
5 Comments
38 Likes
Statistics
Notes
No Downloads
Views
Total views
11,113
On SlideShare
0
From Embeds
0
Number of Embeds
6,045
Actions
Shares
0
Downloads
220
Comments
5
Likes
38
Embeds 0
No embeds

No notes for slide

Js高级技巧

  1. 1. JS高级技巧《让开发前端起来》系列课程
  2. 2. 讲师简介 沉鱼 新浪微博:fool2fish 博客:fool2fish.cn07年毕业于浙江大学,08年加入淘宝KISSY贡献者,负责其文档体系建立目前主要负责开放平台JSSDK&组件开放项目
  3. 3. 课程简介本课程从规范的角度来出发来展示JS语言的全景图 及其发展趋势。课程并不打算让学员陷入那些让人抓狂的浏览器兼 容性细节问题,将目光聚焦到重要的概念上,部 分内容通过与JAVA的比较让学员有较深入的理解, 并为这些功能点准备了充分的demo。
  4. 4. Demo访问:http://fool2fish.aliapp.com/js-senior-skill/index.html
  5. 5. 目录• 语言规范• 函数• 类• 包• 事件• 错误处理
  6. 6. ECMAScriptJavaScriptCommonJSNodeJS语言规范
  7. 7. ECMAScriptECMAScript 是一门由ECMA国际在ECMA-262规范中 标准化的脚本语言。该语言被广泛使用于网络上的客户端脚本。其中 JavaScript、Jscript 和 ActionScript是它的几个知名 实现。来源:http://en.wikipedia.org/wiki/ECMAScript
  8. 8. ECMAScript• 语法• 类型• 类型转换• 执行上下文• 表达式• 语句• 函数定义• 内置对象
  9. 9. JavaScriptJS是一门基于原型的脚本语言,它具有动态性、弱 类型、通用性,并且有一级函数。它是一门多范 式语言,支持面向对象、命令式和函数式编程风 格。JS最初在浏览器中实现以增强用户接口和动态交互, 除了实现ECMAScript语言规范外,还提供了宿主 环境下的对象访问能力。来源:http://en.wikipedia.org/wiki/JavaScript
  10. 10. 核心JavaScript 客户端JavaScript• 语法 • 窗口 • BOM和DOM• 类型 • CSS• 类型转换 • 事件• 执行上下文 • Cookie • 脚本化HTTP• 表达式 • 脚本化图形• 语句 • 脚本化Flash• 函数定义• 内置对象
  11. 11. CommonJSJavaScript是一个强大面向对象语言,它有很多快速 高效的解释器。官方JavaScript标准定义的API是为 了构建基于浏览器的应用程序。然而,并没有定 于一个用于更广泛的应用程序的标准库。来源: http://www.commonjs.org/
  12. 12. CommonJSCommonJS API定义很多普通应用程序(主要指非浏 览器的应用)使用的API,从而填补了这个空白。 它的终极目标是提供一个类似Python,Ruby和 Java标准库。这样的话,开发者可以使用 CommonJS API编写应用程序,然后这些应用可以 运行在不同的JavaScript解释器和不同的主机环境 中。来源: http://www.commonjs.org/
  13. 13. CommonJS在兼容CommonJS的系统中,你可以使用JavaScript 程序开发:• 服务器端的应用• 命令行工具• 图形界面应用• 混合应用(Titanium, Adobe AIR)来源: http://www.commonjs.org/
  14. 14. 已有规范 开发中的规范• Modules • Binary• Packages • Console• System • Encoding • Filesystem • HTTP Client • IO • Modules/… • Packages/… • Promises • Unit Testing
  15. 15. NodeJSNodeJS是一个基于Chrome v8引擎的平台,让开发者 通过简单的方式创建快速、可扩展的网络应用。 NodeJS采用事件驱动、非阻塞的IO模型,使得平 台轻量且高效。对于运行在分布式设备上的数据 密集型实时应用表现堪称完美。来源: http://nodejs.org/
  16. 16. 系统功能 默认模块 npm扩展模块• Globals • File System • 大量三方模• STDIO • Path 块• Timers • Net• Modules • DNS• Process • HTTP• Utilities • URL• Events •…• Buffer• Stream•…
  17. 17. 发展轨迹 2012 2009 KISSY等浏览器端 JS框架提供模块 JS应用日趋复 管理功能 2006 杂 NodeJS拥有丰富 前端逐渐成为 开始需要解决 的第三方模块 正式的职业 模块依赖等复1995 JS仍在高速发展 开始出现各种 杂应用需要关JS诞生后迅速扩散 中 JS框架 注的问题开始了长达10年的浮动广告时代 NodeJS诞生
  18. 18. 参考• ECMAScript• JavaScript 权威指南• CommonJS• NodeJS
  19. 19. 作用域重载惰性载入函数thiscallee()apply() 和 call()函数
  20. 20. 作用域• 一个变量的作用域是程序中定义这个变量的区域。• 全局变量的作用域是全局性的,但函数内声明的 变量,只在函数体内部有定义。• 在函数内部,局部变量优先级比同名的全局变量 高。• 函数定义可以嵌套,在嵌套的函数中声明的变量 具有嵌套的局部作用域。来源:《 JavaScript权威指南》
  21. 21. 重载• 相同的方法名,不同的参数,便产生了重载。来源: 《Core Java》
  22. 22. 惰性载入函数由于浏览器之间的行为差异,多数JS代码中包含了 大量的if语句,将执行代码引导到正确的代码中。惰性载入函数表示函数执行的分支仅会发生一次: 即函数第一次调用的时候。在第一次调用的过程 中,该函数会被覆盖为另一个按合适的方式执行 的函数,这样任何对原函数的调用都不需用再经 过执行分支了。来源:《 JavaScript高级程序设计》
  23. 23. thisthis是在运行时给予函数的执行环境绑定的当前对象。在全局函数中,this等于window,而当函数被作为 某个对象的方法调用时,this等于那个对象。不过,匿名函数的执行环境具有全局性,因此其this 对象指向window。来源:《 JavaScript高级程序设计》
  24. 24. callee()callee是arguments对象的一个只读属性。它在函数 体内使用,用于指向当前执行的函数本身。当不 知道函数名或者为匿名函数是非常有用。来源: mozilla developer network
  25. 25. apply() 和 call()使用这两个方法可以像调用其他对象的方法一样调 用函数。apply() 和 call() 的的一个参数都是要调 用的函数的对象,在函数体内这一参数是关键字 this的值。两者仅在定义参数的方式上有所区别: apply(thisArg,argArray); call(thisArg[,arg1,arg2…] ]);来源:《 JavaScript权威指南》
  26. 26. 定义类toString()静态属性和方法私有属性和方法原型继承混入KISSY的实现类
  27. 27. 定义类• JS并不像Java那样支持真正的类(JS2.0计划引 入)。但是在JS中可以使用构造函数和原型对象 来模拟类的实现。来源:《 JavaScript权威指南》
  28. 28. toString()JS中所有的对象都继承自Object类,Object有一些通 用的属性和方法,toString() 就是其中之一。默认的 toString() 方法总是返回如下形式的字符串: [object class]当JS需要把一个对象转换成为一个字符串的时候, 它就会调用这个方法。来源:《 JavaScript权威指南》
  29. 29. 静态属性和方法静态方法是一种不能向对象实施操作的方法。例如 Math.pow()。在运算是,不使用任何Math对象。 换句话说,没有隐式的参数。可以认为静态方法是没有this参数的方法。因为静态 方法不能操作对象,所以不能在静态方法中访问 实例域。来源: 《Core Java》
  30. 30. 私有属性和方法有时,可能希望将一个代码划分成若干个独立的辅 助方法。通常,这些辅助方法不应该成为公用接 口的一部分,这是由于他们往往与当前的实现机 制非常紧密,或者需要一个特别的协议以及一个 特别的调用次序,这就需要私有方法。只要方法是私有的,设计者就可以确信:它不会被 外部的其他代码操作调用。来源: 《Core Java》
  31. 31. 原型继承继承是OO语言中的一个最为人津津乐道的概念。许 多OO语言都支持两种继承方式:接口继承和实现 继承。接口继承只继承方法签名,而实现继承则 继承实际的方法。由于JS函数没有签名的概念,所以在ECMAScript中 无法实现接口继承。ECMAScript只有实现继承, 而且主要依靠原型链来实现。来源:《 JavaScript高级程序设计》
  32. 32. 混入JS 非常灵活,以致原型继承都不是扩展一个类的唯 一方式。既然 JS 函数是引用类型,可以只是从一 个类复制(或者“借用”)函数用于另一个类。这 样的设计叫做混入。来源:《 JavaScript权威指南》
  33. 33. KISSY的实现
  34. 34. CommonJS的规范KISSY的实现包
  35. 35. CommonJS的规范CommonJS包将一群模块、代码和资源文件包裹成一 个统一的形式。它为CommonJS的便捷传输、安装 和管理提供了基础。来源:commonjs.org
  36. 36. KISSY的实现
  37. 37. 事件流事件对象事件委托事件模拟自定义事件事件
  38. 38. 事件流事件流描述的是从页面中接收事件的顺序。DOM2级事件规定的事件流包括3个阶段:事件捕获 阶段、处于目标阶段和事件冒泡阶段。IE仅支持事件冒泡。来源:《 JavaScript高级程序设计》
  39. 39. 事件流<html><body><div>click me</div></body></html>
  40. 40. 事件对象在出发DOM上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息。属性/方法 类型 说明preventDefault() Function 取消事件的默认行为currentTarget Element 其事件处理程序当前正在处理事件的元素target Element 事件的目标type String 被触发的事件类型来源:《 JavaScript高级程序设计》
  41. 41. 事件委托在创建GUI的语言(如C#)中,为GUI中的每个按钮 添加一个onclick事件处理程序是司空见惯的事情。 可在JS中,这样不仅编码麻烦,也会带来严重的 性能问题。对“事件处理程序过多”问题的解决方案就是事件委 托。事件委托利用了事件冒泡,只制定了一个事 件处理程序,就可以管理某一类型的所有事件。来源:《 JavaScript高级程序设计》
  42. 42. 事件模拟可以用使用JS在任意时刻来触发特定的事件,而此 时的事件就如同浏览器创建的事件一样。在测试 web应用程序的时候,模拟触发事件是一种极其 有用的技术。来源:《 JavaScript高级程序设计》
  43. 43. 事件模拟DOM中可创建的事件类型有: UIEvents :一般的UI事件,鼠标和键盘事件都继 承于此。 MouseEvents : 一般的鼠标事件。 MutationEvents:一般的DOM变动事件。 HTMLEvents:一般的HTML事件。来源:《 JavaScript高级程序设计》
  44. 44. 自定义事件JS的事件是一个观察者模式的典型实现,这是一个 很好的松耦合解决方案。所以在几乎所有的JS库 中都重度依赖自定义事件就一点也不足为奇了。一个支持自定义事件的对象仅需要具备以下功能: 1. 绑定一个特定事件的处理器 2. 移除一个特定事件的处理器 3. 释放一个特定事件并触发所有处理器来源:http://www.nczonline.net/
  45. 45. 常见错误类型常见IE错误错误处理
  46. 46. 常见错误类型代码执行期间可能会发生的错误有多种类型。当错误发 生时,就会抛出相应的错误对象。 Error EvalError RangeError – 数值超过范围 ReferenceError – 找不到对象 SyntaxError – 语法错误 TypeError – 类型不符,或访问不存在的方法 URIError来源:《 JavaScript高级程序设计》
  47. 47. 常见 IE 错误多年来,IE都是最难以调试JS错误的浏览器。IE给出的错误信息一 般很短又语言不详,上下文信息也很少。作为开发人员,如何 看懂IE给出的错误也很受关注。 操作终止 无效字符 未找到成员 缺少标识符、字符串或数字 语法错误 系统无法找到指定资源来源:《 JavaScript高级程序设计》
  48. 48. 未 完 待续

×