`
xiangdefei
  • 浏览: 58287 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

javascript中模板方法模式的实现

 
阅读更多
 
<script>
function Panel () {
    this.el = document.createElement('div');
    this.el.style.position = 'absolute';
    this.initPosition();
    this.initStyle();
    document.body.appendChild(this.el);
}
Panel.prototype = {
    initPosition: function () {},
    initStyle: function () {}
}

function LeftPanel () {
    this.base = Panel;
    this.base();
}
LeftPanel.prototype = {
    initPosition: function () {
        this.el.style.left = '0';
    },
    initStyle: function () {
        this.el.style.background = 'red';
        this.el.style.width = this.el.style.height = '100px';
    }
}

function RightPanel () {
    this.base = Panel;
    this.base();
}
RightPanel.prototype = {
    initPosition: function () {
        this.el.style.right = '0';
    },
    initStyle: function () {
        this.el.style.background = 'green';
        this.el.style.width = this.el.style.height = '100px';
    }
}
var leftEl = new LeftPanel();
var rightEl = new RightPanel();
</script>
 


分享到:
评论

相关推荐

    第六课 模板方法模式1

    在【标题】"第六课 模板方法模式1"中,我们可以看到模板方法模式的运用,它强调了在基类中定义核心方法,并规定子类如何定义和实现这些方法的规则,从而约束和指导子类的行为。 【描述】中提到,模板方法模式适用于...

    JavaScript 设计模式(高清扫描版本)- 张容铭

    在JavaScript中,观察者模式广泛用于事件驱动编程,而策略模式和模板方法模式则有助于保持代码的灵活性和可扩展性。 每个模式都有其特定的适用场景和优缺点,通过理解和应用这些模式,开发者可以更好地组织代码,...

    180个javascript代码模板,每个都很小,但是全面

    8. **正则表达式**:用于文本匹配和替换,模板可能包含各种正则模式和方法,如test、exec、match等。 9. **错误处理**:JavaScript提供了try...catch结构来处理运行时错误。模板可能包含如何优雅地处理异常情况。 ...

    javascript设计模式 – 模板方法模式原理与用法实例分析

    使用模板方法模式,可以将一些复杂流程的实现步骤封装在一系列基本方法中。 定义:定义一个操作中算法的框架,而将一些步骤延迟到子类中,模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤...

    21 模板方法模式:咖啡厅制作咖啡.pdf

    模板方法模式是一种行为设计模式,它允许在定义行为框架的同时,允许子类在不改变整体...在JavaScript中,我们可以使用class和原型继承来实现模板方法模式,这样既保留了代码的面向对象特性,又实现了设计模式的意图。

    JavaScript高级与设计模式.zip

    5. **模块模式(Module)**:JavaScript中,可以利用闭包来创建私有作用域,保护内部变量和方法,只暴露必要的接口。这有助于代码组织和防止命名冲突。 6. **策略模式(Strategy)**:定义了一系列的算法,并将每个...

    学习JavaScript设计模式之模板方法模式

    模板方法模式是一种行为设计模式,它允许在定义行为的同时延迟一些具体步骤到子类中实现。这种模式在JavaScript中尤其有用,因为它可以帮助我们组织代码,减少重复,并提供了一种优雅的方式来处理共同的算法框架。 ...

    基于JavaScript的项目框架模板

    在基于JavaScript的项目框架模板中,这些工具通常已经预先配置好,开发者只需要按照模板初始化项目,然后就可以开始编写业务代码。模板可能还包括了预设的目录结构,例如src目录存放源代码,dist目录存放编译后的...

    javascript 面向对象编程.pdf javascript 设计模式与开发实践.pdf

    观察者模式实现了一对多的依赖关系,当一个对象的状态改变时,所有依赖于它的对象都会得到通知并自动更新。 "JavaScript 面向对象编程指南 第2版 .pdf"可能会涵盖如何使用构造函数、原型和实例来创建和操作对象,...

    javascript项目实战 模板

    3. 模板:模板在编程中通常指的是预设的代码结构或设计模式,可以快速启动一个新项目,节省开发时间,同时保持代码的一致性和可维护性。 【文件名称列表】中的“JAVAscrtip项目实战”可能包含了多个JavaScript实战...

    JavaScript设计模式之模板方法模式原理与用法示例

    JavaScript中的模板方法模式是一种行为设计模式,它通过定义一个操作中的算法的骨架,将一些步骤延迟到子类中。模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些特定步骤。 模板方法模式主要...

    js如何实现设计模式中的模板方法

    在JavaScript中实现设计模式中的模板方法,主要是利用函数的重写特性来达到代码复用和定制化的目的。模板方法设计模式是一种行为设计模式,它允许我们在父类中定义一个算法的骨架,而将一些步骤延迟到子类中。这样,...

    李晴川_JavaScript设计模式

    - **回调函数和异步设计模式**:JavaScript是异步编程模型,回调函数、Promise、async/await等技术在设计模式实现中不可或缺。 ### 结论 深入学习JavaScript设计模式,对于开发者而言,不仅能够提升代码质量和可...

    包含javascript的基础语法,面向对象的实现和设计模式实现-javascript.zip

    这个压缩包“包含javascript的基础语法,面向对象的实现和设计模式实现-javascript.zip”显然是一份关于JavaScript学习资源,特别是针对其基础、面向对象编程以及设计模式的应用。 **JavaScript基础语法** ...

    设计模式_javascript_源码.zip

    在JavaScript中,单例模式通常通过闭包或者模块模式实现,限制构造函数的访问权限,确保不会创建多个实例。 2. 工厂模式:一种创建对象的抽象方式,不直接暴露创建逻辑,而是通过工厂方法返回对象。JavaScript中的...

    基于JavaScript的返利优惠券小程序模板

    在这个"基于JavaScript的返利优惠券小程序模板"中,我们可以深入探讨JavaScript如何用于构建轻量级、交互丰富的移动应用程序,即微信小程序。 1. **JavaScript基础**:JavaScript是一种解释型的、面向对象的、动态...

Global site tag (gtag.js) - Google Analytics