javascript设计模式与开发实践

1. js面向对象6种形式（详情）

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<script>

    // 1. 基于object的对象

    var person=new Object();

    person.name='my name';

    person.getName= function () {

        return this.name+' is aa';

    }

    console.log("person.getName: "+person.getName());

    //2.对象字面量方式

    var person2={

        name:'person2',

        getName: function () {

            return this.name+' is bb';

        }

    }

    console.log("person2.getName: "+person2.getName());

    //3.工厂模式

    function createPerson3(name,age){

        var o=new Object();

        o.name=name;

        o.age=age;

        o.getName=function(){

            return this.name+' is cc';

        }

        return o;//使用return返回生成的对象实例

    }

    var person3=createPerson3('person3',12);

    console.log("person3.getName: "+person3.getName());

    // 4.构造函数模式

    function Person4(name,age){

        this.name=name;

        this.age=age;

        this.getName= function () {

            return this.name+" is dd";

        }

    }

    var person4=new Person4('person4',22);

    console.log("person4.getName: "+person4.getName());

    //5 原型模式

    function Person5(){

    }

    Person5.prototype.name='person5';

    Person5.prototype.age=22;

    Person5.prototype.getName= function () {

        return this.name+" is ee";

    }

    var person5=new Person5();

    console.log("person5.getName(): "+person5.getName());

    // 6 组合构造函数及原型模式

    function Person6(name,age){

        this.name=name;

        this.age=age;

    }

    Person6.prototype={

        construct:Person6,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person

        getName: function () {

            return this.name+" is ff";

        }

    }

    var person6=new Person6('person6',22);

    console.log("person6.getName(): "+person6.getName());

</script>

</body>

</html>

2.静态类型语言：编译时便已确定变量的类型如 java: int a = 1;

动态类型语言：待变量被赋予某个值之后，才会具有某种类型 如 javascript : var a=1;
javascript面向接口编程: 一个对象如果有lenght属性，也可以依照下标来存取属性，那这个对象就可以被当作数组来使用。【鸭子类型】

3.多态

多态：给不同的对象发送同一消息，这些对象会根据这个消息分别给出不同的反馈。【主人向家禽发出“叫”的命令，鸡会“咯咯咯“，鸭会”嘎嘎嘎“】
把不变的部分隔离出来，把可变的部分封装起来

// 多态   把相同的隔离出来，动物都会叫，

    //        把不同的封装起来，不同动物不同叫声。

    var makeSound= function (animal) {

        animal.sound();

    }

    var duck= function () {}

    duck.prototype.sound= function () {

        console.log("嘎嘎嘎: ");

    }

    var chicken= function () {

    }

    chicken.prototype.sound=function(){

        console.log("咯呼呼: ");

    }

    makeSound(new duck());    // ? 为什么要用new ?

    makeSound(new chicken());

    var dog= function () {

    }

    dog.prototype.sound= function () {

        console.log("旺旺旺: ");

    }

    makeSound(new dog());

    console.log("typeof dog: "+typeof dog);

    //  这个简单点！

    var cat={

        sound: function () {

            console.log("喵喵喵");

        }

    }

    makeSound(cat);

    //===================  多态简单版 google==============

    var googleMap={

        show: function () {

            console.log("google : " );

        }

    }

    var baiduMap={

        show: function () {

            console.log("baidu;");

        }

    }

    var renderMap= function (type) {

        type.show();

    }

    renderMap(googleMap);

    renderMap(baiduMap);

4.js模拟封装 public private 、 object.create()

 //js模拟封装 非必须 private public  ES6 有更好的方式

    var my=(function () {

        var __name='aaa';    // private

        return {

            getName: function () {

                return __name;   // public

            }

        }

    })();

    console.log("my.getName(): "+my.getName());

    console.log("my.__name: "+my.__name);  // 直接警告出错了。。

    // javascript 要得到一个对象,不是通过实例化类，而是找到一个对象作为原型并克隆它  Object.create()

    /*  兼容ie

    Object.create=Object.create || function (obj) {

                var F= function () {};

                F.prototype=obj;

                return new F();

            }

    */

    var Plane= function () {

        this.blood=100;

    }

    console.log("typeof plane: "+typeof plane);

    var plane=new Plane();

    plane.blood=110;

    var clonePlane=Object.create(plane);   // 新飞机

    console.log("clonePlane: "+clonePlane.blood);

    var clonePlane2=Object.create(new Plane());  //老飞机

    console.log("clonePlane2: "+clonePlane2.blood);

5.构造器创建对象效率比object.create()高　　原型继承

  // 常用原型继承

    var obj={name:'aaa'};

    var A= function () {}

    A.prototype=obj;

    var a=new A();

    console.log("a.name: "+a.name);

    //  构造器创建对象 效率比 object.create()高，但构造器底层也是object.create()

    // ES6有新的方式

    function Person10(name){

        this.name=name;

    }

    Person10.prototype.getName= function () {

        return this.name;

    }

    var b=new Person10('xxx');

    console.log("b.name: "+b.name);

6. js闭包、单例、函数作用域

// 【函数】内变量的作用域： 没加var为全局变量，加var为局部变量

    //  函数里面可以访问到函数外面的变量,  函数外面无法访问到函数里面的变量

    var func= function () {

        var a=1;

       console.log("a: "+a);

    };

    func();

   // alert(a);  // undefined

    //闭包，解决局部变量的问题，把一些不需要暴露在全局的变量封装成私有变量，防止被修改

    //使用闭包封装私有变量

    var user=(function () {

        var __name='sven', __age=22;   //  约定用 __ 表示私有

        return{

            getUserInfo: function () {

                return __name + __age;

            }

        }

    })();

    console.log("user.__name: "+user.__name);  // 访问不到

    console.log("user.getUserInfo(): "+user.getUserInfo());   //   可以访问

    //  js中的单例

    var test={};  // 独一无二，可全局访问

    //为了减少全局变量，可使用对象字面量的方式

    var namespace1={

        a:function(){alert(1);},

        b:function(){alert(2);}

    }

    //怪异的写法，不懂。。。

    var strategies={

        "S": function (salary) {

            return salary*4;

        },

        "A": function (salary) {

            return salary*3;

        },

        "B": function (salary) {

            return salary*2;

        }

    };

    var calc= function (level, salary) {

        return strategies[level](salary);    //  真怪异

    }

    console.log("calc: "+calc('S',20000));

    console.log("calc2: "+calc('A',10000));

7.闭包

  //闭包，解决局部变量的问题，把一些不需要暴露在全局的变量封装成私有变量，防止被修改

    //使用闭包封装私有变量

    var user=(function () {

        var __name='sven', __age=22;   //  约定用 __ 表示私有

        return{

            getUserInfo: function () {

                return __name + __age;

            }

        }

    })();

    console.log("user.__name: "+user.__name);  // 访问不到

    console.log("user.getUserInfo(): "+user.getUserInfo());   //   可以访问

    console.log("typeof user: "+typeof user);

    /* 闭包 读取函数内部的变量，把变量的值始终保持在内存中*/

    function f1(){

        var n=999;

        function f2(){

            console.log(n);

        }

        return f2;

    }

    var res=f1();

    res();   //网上经典闭包

    //f1();

    //闭包2

    function f11(){

        var test=111;

        tmp_test= function () {

            return test;

        }

    }

    function f2(){

        console.log("测试一： "+tmp_test());

        var test1=tmp_test();

        console.log("测试二： "+test1);

    }

    f11();

    f2();

    //闭包作用1： 使用闭包代替全局变量

    // 全局变量 stu1

    var stu1='aa';

    function st1(){

        console.log("stu11: "+stu1);

    }

    st1();

    console.log("stu1: "+stu1);

    //使用闭包  ,这种简单。。。。。。。

    (function () {

        var stu2='bb';

        function st2(){

            console.log("stu2: "+stu2);

        }

        function a(){

            console.log("闭包stu2: "+stu2);

        }

        st2();

       a();

    })();

    console.log("undefined stu2: "+stu2);

javascript设计模式与开发实践的更多相关文章

《JavaScript设计模式与开发实践》整理
最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...
JavaScript设计模式与开发实践 - 观察者模式
概述观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...
JavaScript设计模式与开发实践 - 策略模式
引言本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...
JavaScript设计模式与开发实践 - 单例模式
引言本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...
《javascript设计模式与开发实践》--- （单一职责原则）
看的这本书叫<JavaScript设计模式与开发实践> 先规划一下看书的顺序,基础知识我已经大概的浏览了一遍了,没有留下笔记,以后有时间还会补上.本来打算顺着看的.但是我感觉我很难短时间内 ...
JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)
说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...
《JavaScript设计模式与开发实践》读书笔记-基础知识
笔记内容多摘录自<JavaScript设计模式与开发实践>(曾探著),侵删. 面向对象的JavaScript 1. 动态需要类型和鸭子类型鸭子类型如果它走起路来像鸭子,叫起来也是鸭子, ...
《Javascript设计模式与开发实践》--读书笔记
第2章 this call apply bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用. bind( ...
JavaScript设计模式与开发实践——JavaScript的多态
“多态”一词源于希腊文polymorphism,拆开来看是poly(复数)+ morph(形态)+ ism,从字面上我们可以理解为复数形态. 多态的实际含义是:同一操作作用于不同的对象上面,可以产生不 ...
《JavaScript设计模式与开发实践》知识点笔记
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } p.p2 { margin: 0.0px ...

随机推荐

【USACO 2.3】Money Systems（dp）
v种货币,求有多少种组成和为n. dp[i][j]表示前i种货币价格为j有多少种方案,dp[i][j]+=dp[i-1][j-c]. http://train.usaco.org/usacoprob2 ...
SHOI2016游记&滚粗记&酱油记
Day0 学校刚期中考完,全科血崩,感觉这次真要考不到一本线了tat 晚上写了个可持久化trie的题,也懒得敲板子(上个礼拜都敲过了),就碎叫了 Day1 上午起床吃饭水群看球,吃完中饭就去考场了. ...
关于line-height
line-height不允许负值,给定值之后会根据font-size计算行高,line-height指定的行高是行高最小值,设置height可以增大行高 line-height的计算:以px为例,li ...
平衡二叉查找树（AVL）的理解与实现
AVL树的介绍平衡二叉树,又称AVL(Adelson-Velskii和Landis)树,是带有平衡条件的二叉查找树.这个平衡条件必须要容易保持,而且它必须保证树的深度是 O(log N).一棵AVL ...
Java内存与垃圾回收调优
Java(JVM)内存模型正如你从上面的图片看到的,JVM内存被分成多个独立的部分.广泛地说,JVM堆内存被分为两部分——年轻代(Young Generation)和老年代(Old Generat ...
使用css打造形形色色的形状！
使用css打造形形色色的形状! css是非常强大的工具,如果我们掌握的好,那么许多复杂的形状不需要使用图片而直接使用css完成即可,这不仅有利于减少http请求以增强性能还便于日后的管理和维护,一举两 ...
light
Unity5中lightmap的坑 http://blog.csdn.net/langresser_king/article/details/48914901 Unity中光照贴图一二坑及解决办法 h ...
Android基础篇（一）
Android体系结构介绍 Android是一个移动开发平台,层次结构:操作系统(OS).中间件(Middle Ware).应用程序(Application) 具体: 操作系统(OS)-->各种 ...
ZOJ 3696 Alien's Organ
泊松分布.... Alien's Organ Time Limit: 2 Seconds Memory Limit: 65536 KB There's an alien whose name ...
magic_quotes_gpc和magic_quotes_runtime的区别和用法详解
当你的数据中有一些 " ' 这样的字符要写入到数据库里面,又想不被过滤掉的时候,它就很有用,会在这些字符前自动加上,如中国地大物博"哈哈" 中国\地大物博&q ...

javascript设计模式与开发实践

javascript设计模式与开发实践的更多相关文章

随机推荐

热门专题