javascript 对象的设计模式
1、为什么学习设计模式:http://www.iteye.com/news/32092 或 https://blog.csdn.net/pigpigpig4587/article/details/48630223 ( 设计模式的作用是让人们写出可复用和可维护的程序)
(个人):设计模式,可以看做是 创建对象的 函数的一种代码风格(本质上就是通过经验积累,总结了几种比较好的这种函数结构)。不同的设计模式,应对变动的需求,处理效果是有很大差异的;如果不考虑设计模式,随意用,需求的开发都是可以实现的。
但是需求改变,维护的时候,不同的设计模式 维护难易就会很明显。设计模式 讲的是创建对象的 类 或 函数(因为对象除了构造函数创建,也可以用函数return一个对象进行创建,如 单例模式)。
2、浅谈JS的一些设计模式 : https://www.jianshu.com/p/010071439eaa
3、Javascript设计模式 : https://www.cnblogs.com/chenxygx/p/5754101.html
4、常用的javascript设计模式 : https://www.cnblogs.com/xianyulaodi/p/5827821.html (这个比较详细) 或 https://www.cnblogs.com/imwtr/p/9451129.html
5、单例模式 :
使用场景:
单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如全局缓存、浏览器的window对象、loading效果。在js开发中,单例模式的用途同样非常广泛。试想一下,当我们
单击 右上角登录按钮的时候,页面中会出现一个登录框 (这个组件不能事先创建好,使用显隐控制。因为只有未登入的用户才会需要创建),而这个浮窗是唯一的,无论单击多少次登录按钮,这个浮窗只会被创建一次。因此这个登录浮窗就适合用单例模式。
var single = (function(){
var unique;
function getInstance(){
// 如果该实例存在,则直接返回,否则就对其实例化
if( unique === undefined ){
unique = new Construct();
}
return unique;
}
function Construct(){
// ... 生成单例的构造函数的代码
}
return {
getInstance : getInstance
}
})();
上面是 参考链接中 构造函数单例模式的 创建。基于这种单例模式,可以变成只执行一次函数的 单例模式 。
var single = (function(){
var unique; // 返回的函数中有指向 unique变量,所以函数执行完毕后,这个变量还是保存在内存中的。
function getInstance(){
// 如果该实例存在,则直接返回,否则就对其实例化
if( unique === undefined ){
unique = construct();
}
return unique;
}
function construct(){
// ... 执行一次 功能的代码
console.log('uu');
return true;
}
return getInstance;
})();
个人总结:单例模式,利用了闭包的特性。函数执行完,但是函数内某些变量没有被回收的特点。 为什么闭包函数中 某些变量不被回收的原理 参考:https://www.cnblogs.com/wfblog/p/8951886.html
6、观察者模式(发布订阅模式):
应用场景:
这个模式要先说应用场景,比较好理解。
打一个离我们比较近的一个场景,博客园里面有一个订阅的按钮(貌似有bug),比如小A,小B,小C都订阅了我的博客,当我的博客一有更新时,就会统一发布邮件给他们这三个人,就会通知这些订阅者
7、
总结:
javascript 对象的设计模式的更多相关文章
- 一种JavaScript 类的设计模式
一种JavaScript 类的设计模式尽管前面介绍了如何定义一个类,如何初始化一个类的实例,但既可以在function定义的函数体中添加成员,又可以用prototype 定义类的成员,代码显的很混乱, ...
- 3种创建、调用JavaScript对象的方法
hey you guys,两个月没有写技术博客了.作为一名有理想.有抱负的程序员,两个月不写技术博客,真该打.业精于勤,荒于嬉.行成于思,毁于随.勤奋是必不可少的,今后养成一周至少一篇博客的习惯.好了 ...
- JavaScript 中常见设计模式整理
开发中,我们或多或少地接触了设计模式,但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式.本文意在梳理常见设计模式的特点,从而对它们有比较清晰的认知. JavaScript 中常见设计模 ...
- 面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统
面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...
- Javascript常用的设计模式详解
Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...
- 深入JavaScript对象(Object)与类(class),详细了解类、原型
JavaScript基于原型的对象机制 JavaScript原型上的哪些事 一.JavaScript基于原型的对象机制 JavaScript对象是基于原型的面向对象机制.在一定程度上js基于原型的对象 ...
- 初识JavaScript对象
JavaScript对象语法.类型.属性 属性描述符(getOwnPropertyDescriptor().defineProperty()) [[Get]].[[Put]].Getter.Sette ...
- json与JavaScript对象互换
1,json字符串转化为JavaScript对象: 方法:JSON.parse(string) eg:var account = '{"name":"jaytan&quo ...
- javaScript对象-基本包装类型的详解
本人按书上的内容大致地把javaScript对象划分成“引用类型”.“基本包装类型”和“内置对象”三块内容. 我们这篇先了解下基本包装类型的详细用法吧! 一.我们先解下相关概念: 1.引用类型的值(对 ...
随机推荐
- codeforces798C - Mike and gcd problem (数论+思维)
原题链接:http://codeforces.com/contest/798/problem/C 题意:有一个数列A,gcd(a1,a2,a3...,an)>1 时称这个数列是“漂亮”的.存在这 ...
- HTTP协议之-URL
一.URL url统一资源定位符 1.URL格式: 方案.就是指所使用的协议,类似http:// 服务器的地址,类似i.cnblogs.com/ 制定web服务器的某个资源路径 方案://服务器位置/ ...
- [CSP-S模拟测试]:physics(二维前缀和+二分+剪枝)
题目传送门(内部题26) 输入格式 第一行有$3$个整数$n,m,q$.然后有$n$行,每行有一个长度为$m$的字符串,$+$表示正电粒子,$-$表示负电粒子.然后有$q$行,每行$2$个整数$x,y ...
- codeforces 582A GCD Table
题意简述: 给定一个长度为$n$的序列 将这个序列里的数两两求$gcd$得到$n^2$个数 将这$n^2$个数打乱顺序给出 求原序列的一种可能的情况 ------------------------- ...
- vue 点击其他地方隐藏dom
document.addEventListener('click', function (e) { if (document.getElementsByClassName('keywordContai ...
- zabbix真的很简单 (安装篇)
系统环境: Centos 6.4 一直觉得 zabbix 很简单,但是还是有好多人看了好多文档都搞不明白怎么用,我从2013年使用到现在也小有心得,如果时间允许,很高兴与大家一起分享我在使用过程中的一 ...
- 关于tomcat中的三个端口的作用及其相关细节
[一]端口内容 tomcat的端口号相关信息: Tomcat admin port——管理端口,允许你远程配置tomcat HTTP——正常的http协议 AJP——Apache JServ Prot ...
- 关于ExtJS对javascript中的Object的扩展
关于ExtJS对javascript中的Object的扩展,可以参考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 下 ...
- if语句的嵌套使用之获取三个数据的最大值
获取三个数据的最大值: class Hello2 { public static void main(String[] args) { int a = 10; int b = 20; int c = ...
- 插件化框架解读之四大组件调用原理-Service(三)下篇
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 本文将继续通过Service调用原理来解读Replugin插件化 ...