<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系列(41):设计模式之模板方法 深入理解JavaScript系列(42):设计模式之原型模式 深入理解JavaScript系列(43):设计模式之状态模式 深入理解JavaScript系列(44):设计模式之桥接模式 ...
深入理解JavaScript系列(41):设计模式之模板方法 深入理解JavaScript系列(42):设计模式之原型模式 深入理解JavaScript系列(43):设计模式之状态模式 深入理解JavaScript系列(44):设计模式之桥接模式 ...
模板方法是基于继承的设计模式,可以很好的提高系统的扩展性。 java中的抽象父类、子类 模板方法有两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类。 二、示例 Coffee or Tea (1) 把水煮沸 (2) 用...
本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面,既包括具体风格和原则的介绍,也包括示例和技巧说明,最后还介绍了如何通过自动化的工具和方法来实现一致的编程风格。 《编写可维护的JavaScript》作者...
41.设计模式之模板方法 42.设计模式之原型模式 43.设计模式之状态模式 44.设计模式之桥接模式 45.代码复用模式(避免篇) 46.代码复用模式(推荐篇) 47.对象创建模式(上篇) 48.对象创建模式(下篇)
用于简单 Javascript 数据模型的 Observable 模式的实现。 是的,另一个 Observable for Javascript 实现。 为什么是另一个 Observable? Javascript 有很多 Observable 的实现——为什么还有一个呢? 在某种程度...
JavaScript库实现了热敏打印机ESC / POS协议,并提供了XML接口,用于准备打印模板。 特征: 文本 文字行 进料线 粗体 下划线文字 字体大小 小模式 白模式 对齐 条码 二维码 剪纸节点 图片 带把手的...
欢迎使用 JavaScript 后台管理框架 - AMF AMF-可应用于网站后台、系统管理等领域。...06) 模板: 支持多模板设计,结合后端程序轻松实现模板切换。 07) 其它: 使用简单。架构合理。统一的流程控制管理机制等...
等等由于歌曲播放时允许设置三种模式:顺序播放、单曲循环、随机播放,当歌曲播放完时要进行播放判断从而进行不同处理,当手动添加新歌曲时,首先在歌曲播放列表中进行寻找,若没有则添加歌曲进入播放列表中,若歌曲...
本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面,既包括具体风格和原则的介绍,也包括示例和技巧说明,最后还介绍了如何通过自动化的工具和方法来实现一致的编程风格。 《编写可维护的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...
8.7在CMS模板页面中创建面包屑路径 8.8将一个动态页面加入书签 8.9针对后退按钮、页面刷新来保持状态 第9章表单元素和验证 9.0简介 9.1访问表单文本输入值 9.2动态关闭或打开表单元素 9.3根据一个...
基于Cesium+VUE实现地下模式效果组件,完整demo和源代码,包括模型数据,代码未加密/未压缩,可直接调用运行 文章描述:https://blog.csdn.net/qq_34205305/article/details/125503033 代码不易,略收小费,使用过程...
9.3.3 利用JavaScript Template实现数据绑定 9.3.4 Predictive Fetch 9.4 小结 第Ⅲ部分 案例研究:在线电子商务商店 第10章 需求和基础设施 10.1 Agatha服装店需求 10.1.1 Product Catalog和Basket截屏 ...
TypeScript中的存储库模式实现,可通过SharePoint JavaScript客户端对象模型方便地访问列表数据。 经过SharePoint 2013和SharePoint Online的测试。 ### NuGet: Install-Package SPListRepository.js ### Bower...
AMF-可应用于网站后台、系统管理等领域。 01) 兼容: 天衣无缝的兼容性能,可完美运行于IE...06) 模板: 支持多模板设计,结合后端程序轻松实现模板切换。 07) 其它: 使用简单。架构合理。统一的流程控制管理机制等...
此外,它还包含了丰富的JavaScript插件,可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换,轻松打造出符合您项目风格的网站。同时...