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,"JIM@USPCAT.COM");
})()
/**
 * 闭包完成封装
 */
(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,"www.USPCAT@126.COM")
})()
/**
 * 一般的属性和函数是作用早对象上的
 * 而静态的函数是定义到类上面的
 */
(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.分支单体

函数的链式挪用

工场形式

桥梁形式

门面形式

组合形式

适配形式

装潢者

享元形式

代办形式

义务链形式

敕令形式

观察者形式

类引擎

    原文作者:eve0803
    原文地址: https://segmentfault.com/a/1190000005082885
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞