3.2 事件管理

Element.Event，提供事件的包装，元素绑定事件机制；Element.Delegation，提供事件委托机制, 即把一个(动态)子元素上的事件处理绑定委托到父容器上。都可在core文件中查看源码。
下面介绍几个常用的事件管理方法：
MooTools已经提供了window对象的自定义事件: ‘domready’。 MooTools就是用window.addEvent(‘domready’, function() {})方式来代替传统JavaScript的window.onload 方法的。

3.5 组件的组织结构

MooTools框架主要有mootools-core以及mootools-more这两大部分组成。mootools-core是MooTools框架的核心模块，mootools-more是针对mootools-core的功能扩展部分，可根据需求动态引入。
无论是mootools-core还是mootools-more都可针对具体需求，选择需要的模块，根据模块以来关系组装出最小的js包使得尽量小的框架代码实现所需功能。

如下图所示，是详细的MooTools框架体系结构：

3 功能

3.1 OOP继承

类的实现和扩展

MooTools框架的core中定义了class方法：

2 规范

2.1 组件命名规范

MooTools的方法命名属于传统对称命名的方式(prop为property属性缩写)，且语义明显，这种设计可以有效避免与原生dom方法的冲突。
在core中为全局window对象定义MooTools对象，并且全局定义了其他常用组件的集合。

1
2
3
4
5
6
7

 
(function(){
    this.MooTools = {
        version: '1.4.5',
        build: '74e34796f5f76640cdb98853004650aea1499d69'
    };
})

1 概述

1.1 框架名称

MooTools是个精简、模块化同时也对象导向的JavaScript框架，设计给中等与进阶的JavaScript开发员使用。透过其优美、详细而条理分明的API，可以让您写出强大、富有弹性且跨浏览器的程序。——MooTools官网

1.2 背景

MooTools是Valerio Proietti首先提出，他以Prototype和Dean Edward的BASE2为灵感，并在2006年9月发布。MooTools起源于Moo.fx —— 一个流行的插件，由Proietti在2005年10月为Prototype开发，现在仍在维护和使用中。
针对原型扩展——提供了许多JavaScript的原生字符串，数组，和拥有附加方法的函数对象，当时的Proietti想要一个框架，从而进一步扩展原生Element对象，以提供更强的文档对象模型（DOM）控制。

2. Canvas开发浅尝

2.1. 渲染上下文

canvas 初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（rendering context），它可以通过 canvas 元素对象的getContext方法来获取，同时得到的还有一些画图用的函数。getContext()接受一个用于描述其类型的值作为参数。现在“2d”是唯一支持的值。

2.2. API

canvas元素本身并没有绘制能力（它仅仅是图形的容器），您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

项目中正好要用到有限状态机js微框架（javascript-state-machine）。所以，下面对有限状态机的概念和这个框架做一些调研和分析。

有限状态机（FSM）

有限状态机（finite-state machine, FSM），又称有限状态自动机，状态机。是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。可参考wiki-有限状态机

状态机有三个特征：

状态总数（state）是有限的。
任一时刻，只处在一种状态之中。
某种条件下，会从一种状态转变（transition）到另一种状态。

状态机有几个重要的概念：状态、条件和动作。

状态存储关于过去的信息，就是说：它反映从系统开始到现在时刻的输入变化。状态可以无限细分，也可以大致归类，需要根据实际应用进行划分。例如下拉菜单，可以分为两个状态：隐藏列表和显示列表。
条件触发状态变化。满足了特定的条件，动作才会发生。例如，鼠标mouseover菜单和mouseout菜单，是触发状态切换的条件。
动作是在给定时刻要进行的活动的描述。在上面的例子里，动作是指将隐藏列表显示，或者将显示列表隐藏的行为。这个和状态不同，状态其实是我们自己的定义，为了方便理解，赋予他一定的意义。

HTML5引进了很多新特性，其中最受人关注的就有Canvas。Canvas元素以及JS引擎中新增的一些特性，让前端开发者不必借助第三方插件，即可开发出精细且具有交互性的2D网页。本文就向大家介绍一下Canvas元素。

1. Canvas背景介绍

1.1. Canvas由来

Canvas的概念最初是由苹果公司提出的，用于在Mac OS X WebKit中创建控制板部件(dashboard widget)。在Canvas出现之前，开发人员若要在浏览器中使用绘图API，只能使用Adobe的Flash和SVG(Scalable Vector Graphics，可伸缩矢量图形)插件，或者只有IE才支持的VML(Vector Markup Language，矢量标记语言)，以及其他一些稀奇古怪的JS技巧。
Canvas提供的绘图功能，对浏览器端来说非常有用，因此被纳入了HTML5规范。苹果公司还曾暗示过，可能会为Canvas规范申请知识产权。不过，最终还是按照W3C的免版税专利权许可条款公开了其专利。

总结操作快捷键：

1. 自动完成的快捷键是Tab， 加上zencoding插件后，更是如虎添翼
2. 按住ctrl点击鼠标，会出现多个闪烁的光标，这时可同时修改多处==== 或者按住鼠标中键拖拽
3. ctrl+/、ctrl+shift+/分别未行注释和块注释，再按一下就能去掉注释，ST2能够自动识别是html、css还是js文件，给出不同类型的注释。
4. 右键功能： show unsaved changes，显示未保存的修改，红色减号表示删去的内容，绿色加号表示新增的内容
5. 折叠功能， mouseover到侧边栏就会显示折叠三角号