Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Js高级技巧

11.441 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie

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. 未 完 待续

×