.

JavaScript库 解构

深入JavaScript库源代码,条分缕析,顿悟最优秀JavaScript库的核心机制

JavaScript库“解构”系列旨在以可视化和可交互的方式剖析JavaScript库的源代码,包括 jQueryPrototypeMooTools

通过将 JavaScript 源代码以可见块元素的方式标记出来,可以更方便查找和学习。点开每个块元素,即可查看相应的代码。点击代码中的链接,即可在程序流中纵情畅游(* iPad用户在代码区空白处轻点屏幕即可看到链接)。

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Summary

  • Focuses on expressiveness, quick and easy coding, and plugins

Advantages

  • Optimised for DOM manipulation
  • Operate on multiple items with no special syntax
  • CSS selector-driven
  • Method chaining makes writing code easy
  • Intuitive API and syntax
  • Modular plugin archutecture keeps the core lean
  • Fastest selector performance
  • Single namespace

Disadvantages

  • DOM rather than JavaScript oriented
  • Some developers have issues around "this" in callback functions

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications, featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around.

Summary

  • Focuses on extension of native classes, inheritance, legibility

Advantages

  • Extensive API
  • Elegant class-oriented syntax
  • Extend native classes and the DOM with new methods
  • Useful new Object types

Disadvantages

  • More verbose syntax and API than jQuery
  • Too many trivial methods in the core
  • Not as easy as jQuery to update the DOM
  • Slowest of the 3 with regards to selector performance
  • Needs script.aculo.us for effects
  • Clutters global namespace

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

Summary

  • Focuses on extension, inheritance, legibility, reuse, and maintainability

Advantages

  • Consise API
  • Elegant class-oriented syntax
  • Extends native classes with new methods
  • Lean core
  • Can extend functionality with plugins and mixins

Disadvantages

  • More verbose syntax and API than jQuery
  • Not as easy as jQuery to update the DOM