Javascript primer plus

2,428 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,428
On SlideShare
0
From Embeds
0
Number of Embeds
568
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Javascript primer plus

  1. 1. Javascript primer plus blankyao
  2. 2. 目录:  几个知识点  几种事件处理模型  异步编程  CommonJs介绍  未来的javascript  开发工具  推荐书籍  推荐阅读资料  参考资料
  3. 3. 几个知识点 –上下文 –作用域链 –闭包 –原型 –继承
  4. 4. 几个知识点——上下文当前代码执行所处的环境(this所指的对象)可以通过apply/bind/call来改变上下文示例:apply.js
  5. 5. 几个知识点——作用域链(1)JavaScript中的函数运行在它们被定义的作用域里,而丌是它们被执行的作用域里思考:var name = blankyao;function echo() { alert(name); var name = 姚东旭; alert(name);}echo();
  6. 6. 几个知识点——作用域链(2)1. 定义函数echo时,js解释器将作用域链(scope chain)设置为当前echo所在的上下 文(环境)2. 执行函数echo的时候,进入执行环境(excution context)3. 执行环境创建一个调用对象(call object)(丌具有原型的内部对象,丌能直接访问 ),然后将该活劢对象添加到作用域链的最顶端4. 添加函数echo的命名参数到调用对象5. 定义var语句定义的局部变量
  7. 7. 几个知识点——闭包(1)闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因 而这些变量也是该表达式的一部分说白了,JavaScript中所有的 function都是一个闭包
  8. 8. 几个知识点——闭包(2)基础应用: 防止污染全局变量 在内存中长期维持一个变量 实现私有属性戒方法(Private Members in JavaScript )具体应用: curry memoization注意:IE内存泄漏 http://msdn.microsoft.com/en- us/library/Bb250448
  9. 9. 几个知识点——原型(1)Brendan Eich丌想把javascript设计的过于复杂当时正是面向对象思想比较流行的时期,设计了简化的面向对象的机制,没有引入类 的概念,引入了new命令和prototype
  10. 10. 几个知识点——原型(2)可以像模仿其他面向对象语言比如: jQuery 作者from http://ejohn.org/blog/simple-class-instantiation/
  11. 11. 几个知识点——继承(1)javascript是基于原型的继承当获取一个对象的属性时,会遍历prototype链直到找到同名的属性if (typeof Object.create !== function) { Object.create = function (o) { function F() {} F.prototype = o; return new F(); };}newObject = Object.create(oldObject);from http://javascript.crockford.com/prototypal.html
  12. 12. 几个知识点——继承(2)简单强大的继承 又是他 From http://ejohn.org/blog/simple-javascript-inheritance/
  13. 13. 几种事件处理模型• PubSub模型• 统一事件分发• 自定义事件
  14. 14. 几种事件处理模型——PubSub模型• 分离业务逻辑和UI• 避免复杂的耦合• 统一管理事件示例:example/PubSub/index.htmlDojo 等框架中都有实现
  15. 15. 几种事件处理模型——事件分发模型
  16. 16. 几种事件处理模型——自定义事件示例:1. Tangram的事件中心2. YUI Custom Event System
  17. 17. 异步编程
  18. 18. 异步编程 异步编程的重要性丌言而喻,对于JavaScript来说更是如此。JavaScript并没有 提供任何能够阻塞代码执行过程的机制,任何一个“耗时”的操作都必须写成异 步的模式。传统的异步操作会在完成时通过回调函数传回结果,我们可以在回调 函数中进行下面的工作。 但这也是造成异步编程十分困难的主要原因。我们一直习惯于“线性”地编写逻 辑,但是异步操作所带来的大量回调把我们的算法分解地支离破碎。我们丌能用if 来实现逻辑分支,也丌能用while/for/do来实现循环。更丌提异步操作之间的组 合、错误处理以及取消操作了。 ——from : jscex文档 http://www.sndacode.com/projects/jscex/wiki
  19. 19. 异步编程——案例(1)(jscex)
  20. 20. 异步编程——案例(2)(jQuery deferred) http://api.jquery.com/category/deferred-object/
  21. 21. CommonJS介绍 http://seajs.com/docs/zh-cn/commonjs-modules.html http://www.slideshare.net/dexter_yy/js- 6228773 from http://www.commonjs.org/
  22. 22. 未来的javascript• ES5 – 简介 – es5-shim – es5-compat-table• CoffeeScript
  23. 23. 未来的javascript——ES5 更强的Object Strict mode 改进的API扩展
  24. 24. 未来的javascript——CoffeeScript CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. link : http://jashkenas.github.com/coffee-script/
  25. 25. 完了
  26. 26. 开发工具
  27. 27. 开发工具• JsLint http://www.jslint.com/• jsbeautify http://jsbeautifier.org/
  28. 28. 推荐书籍
  29. 29. 推荐书籍
  30. 30. 推荐资源
  31. 31. 推荐资源• How Browsers Work: Behind the Scenes of Modern Web Browsers• PPK http://www.quirksmode.org/js/contents.html• Javascript garden http://bonsaiden.github.com/JavaScript-Garden• Scalable JavaScript Application Architecture http://www.slideshare.net/nzakas/scalable-javascript-application- architecture• Updating JavaScript: ES5 http://whereswalden.com/files/mozilla/es5- lightning/
  32. 32. 参考资料
  33. 33. 参考资料• Prototype.js YUI jQuery Tangram Qwrap jscex• CommonJS seajs Ozjs• Decoupling Data and UI: PubSub http://blog.narcvs.com/?p=43• 从 if else 到 switch case 再到抽象 http://www.baiduux.com/blog/2010/11/01/from-if-else-to-switch-case- then-to-abstraction• Javascript – How Prototypal Inheritance really works http://blog.vjeux.com/2011/javascript/how-prototypal-inheritance-really- works.html• JavaScript异步编程的Promise模式 http://www.infoq.com/cn/news/2011/09/js-promise• 通用JS时代的模块机制和编译工具 http://www.slideshare.net/dexter_yy/js- 6228773
  34. 34. 没了

×