了解JavaScript中的prototype （实例）
JS中的phototype是JS中比较难理解的一个部分。javascript的方法可以分为三类：类方法，对象方法，原型方法。
例子：
?实例 2： 用 JavaScript 实现 jQuery 显示与隐藏动画
?
在 jQuery 中有 show(), hide(), slideDown(), slideUp() 等方法，能够以动画的形式显示或隐藏 DOM 元素。这一类的动画在页面交互中比较常用，这也是 jQuery 方便开发的地方之一，但如果只想使用这些动画效果而加载整个 jQuery 库那就有点浪费资源了，于是便尝试用原生的 JavaScript 实现这一类 jQuery 动画。
?
在介绍原生 JavaScript 代码前 Kayo 先想提出一个问题，也就是 jQuery 相对 JavaScript 的优势是什么？若开发者是先了解 jQuery 再学习原生 JavaScript ，那么以下这些优势将会让你很容易发现：
强大而且灵活的选择器， 正如很多 JavaScript 类库一样，jQuery 使用 $() 函数来作为选择器，支持 CSS1 到 CSS3 的选择器，比起 JavaScript 中的 document.getElementById(), document.getElementsByTagName() ，这样的选择器无疑方便很多。
带有常用的事件、方法，包括一些动画方法。
完善的封装， jQuery 中的对象处理，传递，操作都有着完善的封装和处理机制，并且做好了针对不同浏览器的兼容，这些若使用原生 JavaScript 重写将是一项非常繁重的工作。
当然， jQuery 的劣势也非常明显——即使你的整个网站只是使用 jQuery 的几个动画方法，也要加载一个近 100K 的库文件。下面大家不妨带着上面几点思考去阅读下文，这样就会感觉到 jQuery 在使用上的方便。
?
回到一开始讨论的问题——使用原生的 JavaScript 实现 jQuery 动画，下面会放出代码，但由于代码已经封装好了，具体的过程通过代码比较难理解，这里再简要说明一下：?
1.建立一个动画对象—— Transform ，增加一些方法：
动画形式隐藏 DOM 元素
动画形式显示 DOM 元素
2.建立一个 DOM 元素对象—— $ ，增加一些方法：
获取某 id 的 DOM 元素
获取该元素的某项 CSS
动画形式隐藏元素（实例化 Transform 对象并调用其中的方法）
动画形式显示元素（实例化 Transform 对象并调用其中的方法）?
3.根据实际需要操作的 DOM 元素 id 实例化 $ 对象并调用相应的方法
?可以看出，上面的方法有点累赘，为什么不直接把动画方法写到 $ 对象里呢？
?
之所以会这样写，完全是为了方便维护和提高对象的独立性，例如给动画对象添加更多的动画方法或是给 Dom 元素对象添加更多的操作，封装为两个不同的对象将会更加方便维护。如果只是希望使用简单的动画效果，完全可以不同封装，毕竟封装后效率会降低很多，当然这种效率的差别你很难在 PC 上直接看出。
?
下面给出具体方法和代码：
?
实现动画的原理很简单——按特定的单位时间连续播放一组静态画面，在 JavaScript 中，我们可以利用 window.setTimeout 或 window.setInterval 来实现此效果，这里 Kayo 采用 window.setTimeout 递归调用一个减少元素宽度和高度的方法来实现。
?
需要注意的是：
在实现动画的方法中应该直接传递需要操作的 DOM 对象而不是传递 DOM 对象的 id ，因此我们最好写一个方法来获取 DOM 。
动画应该是能同时作用于网页上的多个元素，因此避免使用全局变量。
封装函数时应该使用 .prototype 添加方法，节省内存。
这些 JavaScript 写好后应该放在 footer 而不是 header ，因为原生 JavaScript 中没有自带的函数检查页面中每一个 DOM 是否都加载完毕，因此应该把 JavaScript 写在最后，当然开发者也可以另外写出一个判断页面的 DOM 是否加载完毕的函数。
?
这里以隐藏 DOM 元素为例，创建一个动画对象，包含以动画形式隐藏 DOM 元素的方法。在动画对象的接口中， obj 是需要操作的 DOM 对象， speed 是动画速度，数值越小动画越快， mode 是动画方式，有 “zoom” , “slide” 两种方式，分别模拟 jQuery 中 hide() 和 slideUp() 的效果， fn 为回调函数。另外 hide() 中的 width 和 height 两个参数为 DOM 元素的宽度和高度，会在 DOM 元素对象中调用 hide() 时赋值。?
以需要操作的 DOM 元素的 id 实例化一个 DOM 元素对象?
来源： http://kayosite.com/achieve-jquery-animate-by-javascript.html
?
?
?
?
?
