1.过程式的程序设计

  1. <script>
  2. /*Start and Stop animations using functions.*/
  3. function startAnimation() {
  4. //....
  5. }
  6. function stopAnimation() {
  7. //....
  8. }
  9. </script>

2.创建类对象

  1. <script>
  2. /* Anim class. */
  3. var Anim = function () {
  4. //...
  5. };
  6. Anim.prototype.start = function () {
  7. //...
  8. };
  9. Anim.prototype.stop = function () {
  10. //...
  11. };
  12.  
  13. /* Usage.*/
  14. var myAnim = new Anim();
  15. myAnim.start();
  16. //...
  17. myAnim.stop();
  18.  
  19. </script>

3.把类封装在一条声明中

  1. <script>
  2.  
  3. /* Anim class, with a slightly different syntax for declaring methods. */
  4. var Anim = function () {
  5. //...
  6. };
  7. Anim.prototype = {
  8. start: function () {
  9. //...
  10. },
  11. strop: function () {
  12. //...
  13. }
  14. };
  15. </script>

4.添加一个方法

  1. <script>
  2. /* Add a method to the Fuction object that can be used to declare methods. */
  3. /* Function.prototype.method 用于为类添加新方法,两个参数。
  4. 第一个参数:字符串,表示新方法的名称;
  5. 第二个参数:用作新方法的函数
  6. */
  7. Function.prototype.method = function (name, fn) {
  8. this.prototype[name] = fn;
  9. }
  10.  
  11. /* Anim class,with methods created using a convenience method.*/
  12. var Anim = function () {
  13. //...
  14. };
  15. Anim.method('start', function () {
  16. //...
  17. });
  18. Anim.method('stop', function () {
  19. //...
  20. });
  21. </script>

5.链式调用

  1. <script>
  2. /* This version allows the calls to be chained. */
  3. Function.prototype.method = function (name, fn) {
  4. this.prototype[name] = fn;
  5. return this; //返回this,使其可以被链式调用。
  6. };
  7.  
  8. /* Anim class,with methods created using a convenience method and chaining .*/
  9. var Anim = function () {
  10. //...
  11. };
  12. Anim.
  13. method('start', function () {
  14. //...
  15. }).
  16. method('stop', function () {
  17. //...
  18. });
  19. </script>

Javascript 5种设计风格的更多相关文章

  1. JavaScript 一种轻量级的编程语言

     JavaScript 一种轻量级的编程语言 作为一名计算机应用专业的学生,大一上学期开始接触了网页设计和制作,刚开始时感觉做网页很不错,简单地写几行代码就能做出效果来,当时感觉很兴奋,渐渐的喜欢上它 ...

  2. JavaScript 三种绑定事件方式之间的区别

    JavaScript三种绑定事件的方式: 1. <div id="btn" onclick="clickone()"></div> // ...

  3. Perl,Python,Ruby,Javascript 四种脚本语言比较

    Perl 为了选择一个合适的脚本语言学习,今天查了不少有关Perl,Python,Ruby,Javascript的东西,可是发现各大阵营的人都在吹捧自己喜欢的语言,不过最没有争议的应该是Javascr ...

  4. javascript两种定时器的使用及其清除

    <!--示例代码如下:--><!DOCTYPE html> <html> <body> <p>A script on this page s ...

  5. 有一种设计风格叫RESTful

    一 前言 刚看了<RESTful Web APIs中文版>.试读了前两章. 每本书的第一章都是抽象得不得了,是整本书的总结:开篇说基础有点简单,从教你怎么向地址栏输入地址訪问网页開始(某人 ...

  6. TypeScript和JavaScript哪种语言更先进

    TypeScript和JavaScript哪种语言更先进 近两年来最火爆的技术栈毫无争议的是JavaScript,随着ES6的普及,不管是从前端的浏览器来看,还是后端的NodeJS场景,JavaScr ...

  7. javascript 45种缓动效果BY司徒正美

    javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...

  8. JavaScript三种绑定事件的方式

    JavaScript三种绑定事件的方式: 1. <div id="btn" onclick="clickone()"></div> // ...

  9. JavaScript四种数值取整方法

    一.Math.trunc() 1.定义 Math.trunc()方法去除数字的小数部分,保留整数部分. 2.语法 Math.trunc(value) 3.示例 console.log(Math.tru ...

随机推荐

  1. [Algorithm]查找

    一.查找的算法 1.顺序查找 1 int Search_Seq( SeqList L, ElemType elem ) 2 { 3 L.elem[0] = elem; 4 for ( int i = ...

  2. iOS 查看代码总行数

    1.打开终端 2.cd 拖入工程 回车 3.输入命令 find . "(" -name "*.m" -or -name "*.mm" -or ...

  3. C# winform调用类似按钮点击的事件时自带参数该怎么写

    //按钮事件 private void btn_Click(object sender, EventArgs e) {} //自己的函数 private void myFunc() { //程序中其他 ...

  4. C# Winform下一个热插拔的MIS/MRP/ERP框架11(启航)

    初学时,有了想法却完全不知道该从何下指,此序列将抛砖引玉,与大家共同学习进步. 一个程序的初始,必然是启动. 我的要求: 1.应用程序保持单例: 2.从配置文件加载一些基础数据进行初始化: 3.显示软 ...

  5. tcp连接过程中的三次握手和四次挥手

    在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手握手建立连接 @第一次握手: 建立连接是,客户端A发送SYN包到服务器B,并进入SYN_SEND状态,等待B确认. @第二次握手: 服务 ...

  6. Java面向对象之多态(向上、向下转型) 入门实例

    一.基础概念 多态: 重点是对象的多态性.某一事物的多种体现形态. 多态的作用: 1.提高了代码的扩展性,后期出现的功能,可以被之前的程序所执行. 2.不能使用子类特有的功能.只能使用覆盖父类的功能. ...

  7. Phpstudy+WordPress安装详解

    Phpstudy+WordPress安装详解 1.安装phpStudy程序 将下载的phpStudy程序解压到某个分区的根目录中,第一次使用会提示你初始化一下: 之后在主控制界面点击启动即可. php ...

  8. 6. 重点来啦,pytest的各种装饰圈fixtures

    pytest中,fixture的目的是什么 为可靠的和可重复执行的测试提供固定的基线.(可以理解为测试的固定配置,使不同范围的测试都能够获得统一的配置.) fixture提供了区别于传统单元测试(se ...

  9. 洛谷P2679 子串

    放题解 题目传送门 放代码

  10. Android HttpURLConnection的使用+Handler的原理及典型应用

    1.介绍 总结:HttpURLConnection用来发送和接收数据. 2.ANR异常报错 (1)ANR(Application not response) 应用无响应, 主线程(UI线程) (2)如 ...