js设计模式

基础知识

变量,声明,数据类型,
类型转换

/**
 * 基础教程
 */
(function(){
    /**
     * 变量
     * 他是用于存储信息的一个容易
     * 规则
     * 他是敏感大小写的 (Y和y他是2个不同的变量)
     * 变量名字必须以字母或者下划线开始 数字不可以 $("#id")
     */
    x = 5;
    length = 66.15;
    // 你不用var
    var k = "YUNFENGCHENG";
    alert(k)
    k = "USPCAT.COM";
    //在javascript中 创建这个动作经常挥别称之为"声明"
    //您可以通过var 语句来声明jS变量
    var x = "44";
    var carname;
    //注意的地方
    //如果变量再次被定义一会他的原始数值将不被持有
})()

/**
 * 数据类型和类型转换
 */
(function(){
/**
 * 基本数据类型(3种)
 * (1)数字 number
 *   例如 3.1415927 ,0.251,.2,100,1.478E
 * (2)字符串
 *   string
 * (3)布尔 booble
 */
 //数字型转字符串
 var num1 = 3.1415927;
 var str1 = Number.toString(num1); 
 document.write(typeof str1 == "string");//true
 document.write("<br>")
 //四舍五入
 var num2 = num1.toFixed(2);
 document.write(num2);
 document.write("<br>")
 //返回指定的为数的数字
 var num3 = num1.toPrecision(4);
 document.write(num3);
 document.write("<br>")
 //(Math) 介绍一点方法
 //四舍五入round
 document.write(Math.round(4.7));
 document.write("<br>")
 //随机出处理0~1
 document.write(Math.random());
 document.write("<br>")
 //0~10的随机数
 document.write(Math.floor((Math.random()*11)));
 document.write("<br>")
 document.write("-------------------------------<br>")
 
 //字符串
 //注意(转义) pca't  要输入 pca\'t \n 换行 
 /**
    \' \" \& 和好+ \\ \n \r 回车 
    \t \b \f 换页
  */
 //属性 length indexof substring chartAt(整数)
 //如何转成数字
 var str2 = "USPCAT.COM";
 var str3 = "3.14";
 var number = Number(str3);
 document.write(typeof number == "number");
 document.write("<br>")
 document.write((str2 - 0)+"<br>");//NaN 非数值
 document.write((str3 - 1)+"<br>");//如果是减法他回自动将字符串转成数字
 document.write((str3 + 1)+"<br>");//加法会当成字符串的拼接操作
 //布尔类型(boolean)
 //true | false
 var s = "";
 var o = {};//true
 var l = [];//true
 var n = null;
 var f = false;
 var u = undefined;
 document.write("-------------------------------<br>")
 if(!s){
     document.write("s is false<br>")
 }
 if(!o){
     document.write("o is false<br>")
 }
 if(!l){
     document.write("l is false<br>")
 }
 if(!n){
     document.write("n is false<br>")
 } 
 if(!f){
     document.write("f is false<br>")
 }
 if(!u){
     document.write("u is false<br>")
 }
 /**
s is false
f is false
u is false
n is false
  */
 if(str != "" && str != null && str != undefined){
     //...
 }
 if(str){
     //...
 }
 /**
  * 2复合类型
  * (1)数组-->有序的集合(array):下标(index) 是从0开始的
  * 例子
  * var arr = new Array();
  * (2)特殊的对象-->函数(function)
  */
 /**
  * 特殊值
  * (1)null 不是有效的对象\数组\数组\字符串  他们为空 
  * (2)undefined 他是代表没有定义 和空不是一个概念
  * [没有] 但是有容易 有一个盒子但是盒子里卖没有东西
  * undefined 连盒子也没有
  */
 /**
  * 内置特殊对象
  * Data对象
  * Error错误对象
  * ReExp对象
  */
})()

/**
 * 数据类型和类型转换
 */
(function(){
    /**
      * 2复合类型
      * (1)数组-->有序的集合(array):下标(index) 是从0开始的     
     */
    //属性
    //constructor 返回对创建次对象的数组的函数引用
    //index 
    //input
    //*length
    //方法
//    *concat 合并数组
//    *join 把数组按照一定的各式进行串联
//    *push 数组的追加
//    *pop 删除数组返回的最后一个元素
    //sort toString shift 删除并且返回数组的第一个元素
    var arr = new Array();
    arr.push(1);
    arr.push(55);
    arr.push(5);
    arr.push(3);
    arr.push(9);
    //alert(arr.length)
    var arr2 = [1,2,3,45,6,7,8];
    //alert(arr2.join(":"));
    //alert(arr.concat(arr2).toString())
    for (var i = 0; i < arr2.length; i++) {
        document.write(arr2[i]+"<br>");
    }
    //扩展array的方法
    Array.each = function(array,fn){
        for (var i = 0; i < array.length; i++) {
            fn(array[i])
        }
    }
    Array.each(arr2,function(v){
        document.write(v+"<br>");
    })
})()

高级类

继承和聚合

接口

1.注解的方法
2.属性检验法
3.鸭式变形法

/**
 * 1.注释方法
 * 最简单,但是功能也是最弱的
 * 他利用inerface和implement"文字"
 * 把他们用注解的方式显示的表现出来
 */
(function(){
    /**
     * 用注释来定义一个接口
     * interface PersonDao(){
     *     function add(obj);
     *  function remove(obj);
     *  function find(id);
     * }
     */
    //我们用注释的方式来实现他
    /**
     * PersonDaoImpl implement interface
     */
    var PersonDaoImpl = function(){
        
    }
    PersonDaoImpl.prototype.add = function(obj){
        //..
    }
    PersonDaoImpl.prototype.remove = function(obj){
        //..
    }
    PersonDaoImpl.prototype.find = function(id){
        //..
    }
    /**
     * 千万不要感觉他是没有任何意义的
     * 1.大型的项目靠得就是规范和标准
     * 2.这样的写法会交你的程序员在没有写实现之前有充分时间做代码的设计和架构
     * 3.缺点:要认为的遵守
     */
})()

/**
 * 属性检验法
 */
(function(){
    /**
     * 用注释来定义一个接口
     * interface PersonDao(){
     *     function add(obj);
     *  function remove(obj);
     *  function find(id);
     * }
     */
    //我们用注释的方式来实现他
    var PersonDaoImpl = function(){
        this.implementInterface = ["PersonDao"];        
    }
    PersonDaoImpl.prototype.add = function(obj){
        alert(obj)
        //..
    }
    PersonDaoImpl.prototype.remove = function(obj){
        //..
    }
    PersonDaoImpl.prototype.find = function(id){
        //..
    }    
    function addObj(obj){
        var PersonDao = new PersonDaoImpl();
        //开始检查
        if(!impl(PersonDao,"PersonDao")){
            throw new Error("类PersonDaoImpl没有实现接口PersonDao");
        }else{
            PersonDao.add(obj);
        }
    }
    addObj("USCAPT.COM");
    /**
     * 他接受的是一个不定参数
     */
    function impl(Object){
        //遍历出入对象的属性
        for(var i=1;i<arguments.length;i++){
            var interfaceName = arguments[i];
            var interfaceFound = false;
            for(var j=0;j<Object.implementInterface.length;j++){
                if(Object.implementInterface[j] == interfaceName){
                    interfaceFound = true;
                    break;
                }
            }
            if(!interfaceFound){
                return false;
            }
        }
        return true;
    }
    
    
    
})()

/**
 * 3.鸭式变形法
 * 这个方法来源于一个国外的老头他有一个名言(jim)
 * "像鸭子一样走路并且会嘎嘎叫的东西就是鸭子"
 * 换言之
 * 如果对象具有与接口定义的方法名字的同命所有方法 那么我就认为你就是实现本接口
 */
(function(){
    //定义一个接口类
    var Interface = function(name,methods){
        if(arguments.length != 2){
            alert("interface must have two paramters...");
        }
        this.name = name;//这个是接口的名字
        this.methods = [];//定义个空数组来转载函数名
        for (var i = 0; i < methods.length; i++) {
            if(typeof methods[i] != "string"){
                alert("method name must is String ...")
            }else{
                this.methods.push(methods[i])
            }
        }
    }
    //定义接口的一个静态方法来实现接口与实现类的直接检验
    //静态方法不要写成Interface.prototype.* 因为这是写到接口原型连上的
    //我们要把静态的函数直接写到类层次上
    Interface.ensureImplements = function(object){
        if(arguments.length<2){
            alert("必须最少是2个参数");
            return false;
        }
        //遍历
        for (var i = 1; i < arguments.length; i++) {
            var inter = arguments[i];
            //如果你是接口就必须是Interface类型的
            if(inter.constructor != Interface){
                throw new Error("if is interface class must is Interface type");
            }
            //遍历函数集合并分析
            for (var j = 0; j < inter.methods.length; j++) {
                var method = inter.methods[j];
                //实现类中必须有方法名字 和 接口中所有的方法名项目
                if(!object[method] || typeof object[method] != "function"){
                    throw new Error("实现类并且没有完全实现接口中的所有方法...");
                }
            }
        }
    }
    //应用
    //定义自己的接口
    var GridMananger = new Interface("GridMananger",["add","remove","list"]);
    var FormMananger = new Interface("FormMananger",["save"])
    
    function commManager(){
        //先实现方法
        this.add = function(){
            alert("ok")
        }
        this.remove = function(){}
        this.list = function(){}
        this.save = function(){}
        //检验
        Interface.ensureImplements(this,GridMananger,FormMananger)
    }
    var c = new commManager();
    c.add();
    /**
     * 接口的重要性
     * 1.大型项目提高代码的灵活度
     * 2.松耦合
     * 3.在团队开发的时候,有写时候你在真正编码之前就可以写API(自己的类库)
     * 那这类库就可以时候在进行实现
     * 开始的时候我们就可以对整个项目是否可行,通过接口就可模拟出来
     */
    
})()

闭包

1. 门户大开类型

2. 用命名规范区别私有和共有的方式

3. 闭包

/**
 * 信息的隐藏是最终的目的,封装只不过是隐藏的一种方法 
 */
(function(){
    /**
     * 1.门户大开类型
     * 2.用命名规范区别私有和共有的方式
     * 3.闭包
     */
    //门户打开型
    function Person(age,name){
        this.name = name;
        if(!this.checkAge(age)){
            throw new Error("年龄必须在0到150之间");
        }
        this.age = age;
    }
    //var p = new Person(-10,"JIM");
    //alert(p.age)
    //解决上述问题
    Person.prototype = {
        checkAge:function(age){
            if(age>0 && age < 150){
                return true;
            }else{
                return false;
            }
        }
    }
    Person.prototype["getName"] = function(){
        return this.name || "USPCAT.COM";    
    }
    //var p = new Person(-10,"JIM");
    var p = new Person(27,"JIM");
    var p2 = new Person(27);
    alert(p2.getName());

})()

上面这种门户大开的都是公用的不是很好，应该提前做好闭包

(function(){
    //用命名规范来区别私有和共有变量
    function Person(name,age,email){
        //定义私有变量
        this._name;//私有
        this._age;//私有
        this.setName(name);
        this.setAge(age);
        this.email = email;//共有
        
    }
    Person.prototype = {
        setName:function(name){
            this._name = name;
        },
        setAge :function(age){
            if(age>0 && age < 150){
                this._age = age;
            }else{
                throw new Error("年龄必须在0到150之间");
            }            
        }
    }
    var p = new Person("JIM",-1,"[e-mail]");
})()

/**
 * 闭包实现封装
 */
(function(){
    function person(name,age,email,sex){
        this.email = email;//public 变量
        //get
        this.getName = function(){
            return this.name;
        }
        this.getAge = function(){
            return this.age;
        }        
        //set
        this.setName = function(name){
            this.name = name
        }
        this.setAge = function(age){
            if(age>0 && age < 150){
                this.age = age
            }else{
                throw new Error("年龄必须在0到150之间");
            }                
        }
        var _sex = "M";//这也是私有变量的编写方式
        this.getSex = function(){
            return _sex;
        }
        this.setSex = function(){
            _sex = sex
        }
        this.init = function(){
            this.setName(name);
            this.setAge(age);
        }
        this.init();
    }
    //ceshi 
    var p = new person("JIM",-1,"[e-mail]")
})()

/**
 * 普通的属性和函数是作用早对象上的
 * 而静态的函数是定义到类上面的
 */
(function(){
    function Person(name,age){
        this.name = name;
        this.showName = function(){
            alert(this.name)
        }
    }
    //第一种静态函数的写法
    Person.add = function(x,y){
        return x+y;
    }
    //alert(Person.add(10,20))
    //第二种方式
    //用类中类的方式完成没一个对象全拥有相同的属性和阐述
    var cat = (function(){
        //私有静态属性
        var AGE = 10;
        //私有函数
        function add(x,y){
            return x+y;
        }
        return function(){
            this.AGE = AGE;
            this.add = function(x,y){
                return add(x,y)
            }
        }
    })()
    alert(new cat().add(1,2)+"  "+new cat().AGE);
    alert(new cat().AGE);
    /**
     * 1.保护内部数据完整性是封装一大用处
     * 2.对象的重构变得很轻松,(如果没有封装你感动正在用这的代码吗?)
     * 3.弱化模块直接的耦合
     * 弊端
     * 私有的方法他会变得很难进行单元测试
     * 使用封装就会意味着与复杂的代码打交道
     * 最大问题是封装在javascript中是很难实现的
     */
})()

单体模式

1.普通的单体
2.具有局部变量的强大单体
3.惰性单体
4.分支单体

函数的链式调用

工厂模式

桥梁模式

门面模式

组合模式

适配模式

装饰者

享元模式

代理模式

责任链模式

命令模式

观察者模式

类引擎