zoukankan      html  css  js  c++  java
  • Javascript 5种设计风格

    1.过程式的程序设计

    <script>
    /*Start and Stop animations using functions.*/
    function startAnimation() {
    //....
    }
    function stopAnimation() {
    //....
    }
    </script>

     

    2.创建类对象

    <script>
    /* Anim class. */
    var Anim = function () {
    //...
    };
    Anim.prototype.start = function () {
    //...
    };
    Anim.prototype.stop = function () {
    //...
    };
    
    /* Usage.*/
    var myAnim = new Anim();
    myAnim.start();
    //...
    myAnim.stop();
    
    </script>

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

    <script>
    
    /* Anim class, with a slightly different syntax for declaring methods. */
    var Anim = function () {
    //...
    };
    Anim.prototype = {
    start: function () {
    //...
    },
    strop: function () {
    //...
    }
    };
    </script>

    4.添加一个方法

    <script>
    /* Add a method to the Fuction object that can be used to declare methods. */
    /* Function.prototype.method 用于为类添加新方法,两个参数。
    第一个参数:字符串,表示新方法的名称;
    第二个参数:用作新方法的函数
    */
    Function.prototype.method = function (name, fn) {
    this.prototype[name] = fn;
    }
    
    /* Anim class,with methods created using a convenience method.*/
    var Anim = function () {
    //...
    };
    Anim.method('start', function () {
    //...
    });
    Anim.method('stop', function () {
    //...
    });
    </script>

    5.链式调用

    <script>
    /* This version allows the calls to be chained. */
    Function.prototype.method = function (name, fn) {
    this.prototype[name] = fn;
    return this; //返回this,使其可以被链式调用。
    };
    
    /* Anim class,with methods created using a convenience method and chaining .*/
    var Anim = function () {
    //...
    };
    Anim.
    method('start', function () {
    //...
    }).
    method('stop', function () {
    //... 
    });
    </script>
  • 相关阅读:
    不得不爱开源 Wijmo jQuery 插件集(6)【Popup】(附页面展示和源码)
    遗漏的知识点
    初识函数
    ==和is的区别 以及编码和解码
    函数的动态参数 及函数嵌套
    基本数据类型补充、set集合、深浅拷贝
    文件操作
    基本数据类型之“字典”
    建立自己的Servlet
    还原误删数据笔记
  • 原文地址:https://www.cnblogs.com/sxhlf/p/7000685.html
Copyright © 2011-2022 走看看