javascript 设计模式(二)

(function(){

    //在js中我们利用function来定义类
    function Shape(){
        //在类的内部使用var声明的为私有变量
        var x = 1;
        var y = 1;
    };

    //利用new关键字进行类的实例化
    var oShape = new Shape();

    console.log(oShape.x);//undefined,类的实例化对象中不能访问到私有变量

    //如何在类中定义公有变量
    function Parent(){
        this.x = 1;
        this.y = 1;
    };

    var oParent = new Parent();
    console.log(oParent.x); //1,在类中使用this关键字来定义公有变量,可以在类的实例化对象中访问到

    //定义私有函数
    function Box(){

        //私有函数
        var draw1 = function(){
            alert("draw1")
        };

        //公有函数
        this.draw2 = function(){
            alert("draw2")
        };
    };

    var oBox = new Box();
    // oBox.draw1(); //报错
    oBox.draw2();  //draw2

})();

(function(){

    //用javascript模仿OOP编程,为什么需要使用OOP编程,因为能够模块化,结构化,方便一个团队共同开发,但是在javascript中没有类的概念,只能模仿
    function Slider(x,y){
        var x = 0;
        var y = 0;

        var init = function(){
            x = x;
            y = y;
        };
        init();
    };

    var oSlider = new Slider();
})();
时间: 2024-10-13 11:21:19

javascript 设计模式(二)的相关文章

javascript设计模式二: 策略模式

策略模式指定义一系列算法,将它们一个个封装起来.将不变的部分与变化的部分隔开是每个设计模式的主题,策略模式同样如此,策略模式的目的就是将算法的使用与算法的实现分离开来. 策略模式的基础组成: 一个基于策略模式的程序至少要由两部分组成.第一个部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程.第二个部分是环境类Context,Context接收. 客户的请求,随后把请求委托给某一个策略类(发送消息给某个策略对象),要做到这点,说明Context中要维持对某个策略对象的引用. 简易表单校

Javascript设计模式系列二

创建对象的基本模式,一.门户大开型,二.采用下划线来表示属性和方法的私用性,三.使用闭包来创建私用的成员. 一.门户大开型.只能提供公用成员.所有属性和方法都公开的.可访问的.这些共用属性都要使用this关键字来创建. <script type="text/javascript"> ////定义Dog对象 var Dog = function (name, age) { this.name = name; this.age = age; } Dog.prototype.Sa

JavaScript设计模式 - 迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素 许多浏览器都支持 Javascript 的 Array.prototype.forEach 迭代器可以分为 内部迭代器 和 外部迭代器 一.jQuery 中的迭代器 1 $.each( [1,2,3,4], function (i, n) { 2 console.log( "当

javascript设计模式详解之命令模式

每种设计模式的出现都是为了弥补语言在某方面的不足,解决特定环境下的问题.思想是相通的.只不过不同的设计语言有其特定的实现.对javascript这种动态语言来说,弱类型的特性,与生俱来的多态性,导致某些设计模式不自觉的我们都在使用.只不过没有对应起来罢了.本文就力求以精简的语言去介绍下设计模式这个高大上的概念.相信会在看完某个设计模式之后有原来如此的感慨. 一.基本概念与使用场景: 基本概念: 将请求封装成对象,分离命令接受者和发起者之间的耦合. 命令执行之前在执行对象中传入接受者.主要目的相互

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

Javascript设计模式系列三

继承,一个类或对象继承另一个类或对象的三种方法.类式继承.原型式继承.掺元类. 一.类式继承,原型链.Extend函数. <script type="text/javascript"> ////定义Person类 var Person = function (name) { this.name = name; }; Person.prototype.getName = function () { return this.name; }; ////原型链 function A

【读书笔记】读《JavaScript设计模式》之观察者模式

一.定义 在事件驱动的环境中,比如浏览器这种持续寻求用户关注的环境中,观察者模式(又名发布者-订阅者(publisher-subscripber)模式)是一种管理人与其任务之间的关系(确切地讲,是对象及其行为和状态之间的关系)的得力工具.用JavaScript的话来说,这种模式的实质就是你可以对程序中某个对象的状态进行观察,并且在其发生改变时能够得到通知. 二.例子 我们需要一个发布者的构造函数,它为该实例定义了一个类型为数组的属性,用来保存订阅者的引用. function Publisher(

《JavaScript设计模式 张》整理

最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单工厂 又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例. 两种实现方式,第一种是通过类实例化对象创建,第二种是创建一个新对象然后包装增强其属性和功能. demo代码. 2)工厂方法 通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例. 将工厂方法看作是一个实例化对象的工厂类. demo

【Javascript设计模式】第一课 Javascript中的继承

在Javascript中每个类有三个部分:     1.第一部分是构造函数内,这是供实例化对象复制用的. 2.第二部分是构造函数外,通过点语法添加的,这是供类使用的,实例化对象是访问不到的. 3.第三部分是类的原型中,实例化对象可以通过其原型链间接访问到,也是为供所有实例化对象所共用的. 一. 子类的原型对象 --类式继承 类式继承是最常见最简单的继承模式,类式继承用一句话概括就是"父类实例指向子类原型" /** * 声明一个父类 * @constructor */ var Super

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个