js实现观察者模式风格替换

如下图,我们看到两种风格:在选择男士时,页面颜色为黑色:在选择女士时,页面颜色为粉红色. 主要可以分为两类: 下拉框 ---> 被观察者 div ---> 观察者面向过程实现风格替换: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <st…

JS实现IOS风格对话框 jquery / zepto

Alert alert("这个是一个alert弹窗"); Alert 自定义参数 alert({ content: "自定义alert弹窗", btnText: "OK", boxClass: "custom-alert" }, function () { console.log("good!"); }); Confirm confirm("这个是一个confirm弹窗", functi…

使用 iosOverlay.js 创建 iOS 风格的提示和通知

iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼容:IE7+, Google Chrome, Firefox, Opera, Desktop Safari, Mobile Safari — iPhone & iPad. 您可能感兴趣的相关文章特别推荐:10套精美的免费网站后台管理系统模板 SlimerJS – Web开发人员可编写 JS 控制的…

js用replaceAll全部替换的方法

1 前言 js中字符串整体替换,只有自带的replace,并没有replaceAll,如果我们需要把字符串中的字符统一替换,可以用正则表达式,由于经常使用就在String直接加个原生方法,方便调用. 2 代码 //默认是大小写敏感 String.prototype.replaceAll=function(str,replace,ingore){ ingore = ingore || false; var reg; if(!ingore){ reg = new RegExp(str,"g"…

js设计模式-观察者模式

定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路定义一个对象,在对象中实现注册事件,关闭事件和触发事件. js 简单实现 var Observer = { data: {}, // 订阅 register: function (event, func) { if (this.data[event]) { this.data[event].push(func); } el…

js中字符串全部替换

废话不多说,直接发结果在js中字符串全部替换可以用以下方法: str.replace(/需要替换的字符串/g,"新字符串") 比如: "yyyy-MM-dd-hh-mm-ss".replace(/-/g,"/") 结果如下:"yyyy/MM/dd/hh/mm/ss" 原理请看JavaScript replace() 方法介绍定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹…

js使用占位符替换字符串

js使用占位符替换字符串是一个ES6中的模版字符串语法. 在``中使用 ${} var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); Fifteen is 15 and not 20.…

JS 正则查找与替换

JS正则查找与替换一.前提/背景今天遇到个问题,需要替换字符串中部分字符,这些字符相对整个字符串而言,与其他子字符串类似,无法单独提出:重要的是,该字符串是动态的生成的,就像我们日常看到的网页Url一样,同一个页面,Url路径不总是相同,这时还需要有区别的判断.所以.这时最好的方式,就是使用JS正则表达式匹配各个部分,然后有由各个匹配的部分再组合上参数,替换原来的Url路径.至此.可解决目前我们讨论的问题. 贴出demo代码: <script type="text/javascript…

谈谈JS的观察者模式（自定义事件）

呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象的接口,功能见注释(测试1) 该 Event 对象的接口需要能被其他对象拓展复用(测试2) // 测试1 Event.on('test', function (result) { console.log(result); }); Event.on('test', function () { cons…

js实现观察者模式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>面向对象之观察者模式</title> </head> <style type="text/css"> .word{ width:500px; height: 150px; border:1px solid #333…

【js实现观察者模式风格替换】的更多相关文章