`
xiangdefei
  • 浏览: 57506 次
  • 性别: 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>
 


分享到:
评论

相关推荐

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

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

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

    本文实例讲述了JavaScript设计模式之模板方法模式原理与用法。分享给大家供大家参考,具体如下: 一、模板方法模式:一种只需使用继承就可以实现的非常简单的模式。 二、模板方法模式由两部分组成,第一部分是抽象...

    深入理解JavaScript系列

    深入理解JavaScript系列(41):设计模式之模板方法 深入理解JavaScript系列(42):设计模式之原型模式 深入理解JavaScript系列(43):设计模式之状态模式 深入理解JavaScript系列(44):设计模式之桥接模式 ...

    深入理解JavaScript系列(.chm)

    深入理解JavaScript系列(41):设计模式之模板方法 深入理解JavaScript系列(42):设计模式之原型模式 深入理解JavaScript系列(43):设计模式之状态模式 深入理解JavaScript系列(44):设计模式之桥接模式 ...

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

    模板方法是基于继承的设计模式,可以很好的提高系统的扩展性。 java中的抽象父类、子类 模板方法有两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类。 二、示例 Coffee or Tea (1) 把水煮沸 (2) 用...

    编写可维护的JavaScript(中文)

    本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面,既包括具体风格和原则的介绍,也包括示例和技巧说明,最后还介绍了如何通过自动化的工具和方法来实现一致的编程风格。  《编写可维护的JavaScript》作者...

    深入理解JavaScript系列.chm

    41.设计模式之模板方法 42.设计模式之原型模式 43.设计模式之状态模式 44.设计模式之桥接模式 45.代码复用模式(避免篇) 46.代码复用模式(推荐篇) 47.对象创建模式(上篇) 48.对象创建模式(下篇)

    limivorous:Javascript 模块模式的 Observable 模式的简单实现

    用于简单 Javascript 数据模型的 Observable 模式的实现。 是的,另一个 Observable for Javascript 实现。 为什么是另一个 Observable? Javascript 有很多 Observable 的实现——为什么还有一个呢? 在某种程度...

    escpos-xml:JavaScript库,该库实现热敏打印机ESC POS协议,并提供XML接口用于准备打印模板

    JavaScript库实现了热敏打印机ESC / POS协议,并提供了XML接口,用于准备打印模板。 特征: 文本 文字行 进料线 粗体 下划线文字 字体大小 小模式 白模式 对齐 条码 二维码 剪纸节点 图片 带把手的...

    AMF-JavaScript 后台管理框架 v1.0

    欢迎使用 JavaScript 后台管理框架 - AMF AMF-可应用于网站后台、系统管理等领域。...06) 模板: 支持多模板设计,结合后端程序轻松实现模板切换。 07) 其它: 使用简单。架构合理。统一的流程控制管理机制等...

    JavaScript开发基于React+Ant Design实现的仿网易云音乐官网网站音乐网站源码.zip

    等等由于歌曲播放时允许设置三种模式:顺序播放、单曲循环、随机播放,当歌曲播放完时要进行播放判断从而进行不同处理,当手动添加新歌曲时,首先在歌曲播放列表中进行寻找,若没有则添加歌曲进入播放列表中,若歌曲...

    编写可维护的javascript(英文)

    本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面,既包括具体风格和原则的介绍,也包括示例和技巧说明,最后还介绍了如何通过自动化的工具和方法来实现一致的编程风格。  《编写可维护的JavaScript》作者...

    WebGIS从基础到开发实践代码(基于ArcGIS API for JavaScript)

    3.3.4订阅/发布模式的事件处理机制 3.4使用菜单组织功能 3.4.1菜单容器小部件 3.4.2菜单项小部件 3.4.3菜单小部件 3.4.4测试 第4章地图与图层 4.1图层操作 4.1.1图层类及其之间的继承关系 4.1.2切片地图图层 4.1.3...

    JavaScript经典实例

     8.7在CMS模板页面中创建面包屑路径  8.8将一个动态页面加入书签  8.9针对后退按钮、页面刷新来保持状态  第9章表单元素和验证  9.0简介  9.1访问表单文本输入值  9.2动态关闭或打开表单元素  9.3根据一个...

    基于Cesium+VUE实现地下模式效果组件,完整demo和源代码,包括模型数据,代码未加密/未压缩,可直接调用运行

    基于Cesium+VUE实现地下模式效果组件,完整demo和源代码,包括模型数据,代码未加密/未压缩,可直接调用运行 文章描述:https://blog.csdn.net/qq_34205305/article/details/125503033 代码不易,略收小费,使用过程...

    ASP.NET设计模式-杨明军译(源码)

    9.3.3 利用JavaScript Template实现数据绑定 9.3.4 Predictive Fetch 9.4 小结 第Ⅲ部分 案例研究:在线电子商务商店 第10章 需求和基础设施 10.1 Agatha服装店需求 10.1.1 Product Catalog和Basket截屏 ...

    SPListRepository.js:存储库模式实现,可通过SharePoint JavaScript客户端对象模型方便地访问列表数据

    TypeScript中的存储库模式实现,可通过SharePoint JavaScript客户端对象模型方便地访问列表数据。 经过SharePoint 2013和SharePoint Online的测试。 ### NuGet: Install-Package SPListRepository.js ### Bower...

    AMF-JavaScript 后台管理框架.7z

    AMF-可应用于网站后台、系统管理等领域。 01) 兼容: 天衣无缝的兼容性能,可完美运行于IE...06) 模板: 支持多模板设计,结合后端程序轻松实现模板切换。 07) 其它: 使用简单。架构合理。统一的流程控制管理机制等...

    企业网站HTML源码-企业业务模式展示响应式网页模板-可适配移动端.zip

    此外,它还包含了丰富的JavaScript插件,可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换,轻松打造出符合您项目风格的网站。同时...

Global site tag (gtag.js) - Google Analytics