JavaScript设计模式---单例模式详解【四种基本形式】_javascript技巧

来源:脚本之家  责任编辑:小易  

《JavaScript设计模式》共有两部分。第一部分给出了实现具体设计模式所需要的面向对象特性的基础知识,主要包括接口、封装和信息隐藏、继承、单体模式等内容。第二部分则专注于各种具体的设计模式及其在JavaScript语言中的应用,主要介绍了工厂模式、桥接模式、组合模式、门面模式等几种常见的模式。为了让每一章中的示例都尽可能地贴近实际应用,书中同时列举了一些JavaScript程序员最常见的任务,然后运用设计模式使其解决方案变得更模块化、更高效并且更易维护,其中较为理论化的例子则用于阐明某些要点。《JavaScript设计模式》适合各层次的Web前端开发人员阅读和参考,也适合有C++/Java/C#背景的服务器端程序员学习www.zgxue.com防采集请勿采集本网。

本文实例讲述了JavaScript设计模式---单例模式.分享给大家供大家参考,具体如下:

JS基础学习:http://www.w3school.com.cn/js/index.asp Js的一些应用:http://www.knowsky.com/article.asp?typeid=36 另外建议到网上搜索下载一些JavaScript帮助文档。IBM开发者中文站:

单例模式也称为单体模式,其中:

工厂

1,单体模式用于创建命名空间,将系列关联的属性和方法组织成一个逻辑单元,减少全局变量。

如果你向成为厉害的人,只要是编程知识都有用,但从实用的角度就要看你工作要用到哪些就学哪些.

 逻辑单元中的代码通过单一的变量进行访问。

设计模式的名字和oop的一些术语在翻译上都有疏漏。书中有不少不错的译者注释可以看出作者对前端开发还是有较深刻的理解。除了有点别扭意外没什么大的缺陷,推荐。

2,三个特点:

非常大,建议多看看(JavaScript设计模式)这书,现在大多数人拿js只做验证。我只能说太大材小用了。当然如果你很精通,就算是验证也会写的很美。哈哈。

 ① 该类只有一个实例;

 ② 该类自行创建该实例,即在该类内部创建自身的实例对象;

 ③ 向整个系统公开这个实例接口

3,单体模式有四种基本形式:

第一种,最简单的单体,只被实例化一次    我简记为json对象

(1)基本结构

var userInfo={//已经自行被实例化 其实是一json对象 name:"测试名称", dept:"测试PD", code:"测试PD001", getName:function () { return "测试" } };

(2)使用方法与json的使用方法一致:使用点 " . "的方式访问

alert(userInfo.getName())

单体模式用来划分命名空间,并将一群相关的属性和方法组织到一起的简单介绍:

var comm={};//一个空对象

comm.userInfo={//空对象下的第一个命名空间 name:"命名空间1下的", code:"001" }

comm.funcInfo={//空对象下的第二个命名空间 funcName:"命名空间2下的", code:"002" }

总结:该种方式可以看出对象的变量值不是动态加载的,而且对象没有显示初始化,由此有了第二种单体模式。

第二种,具有局部变量的单体

要求:模拟一个使用ajax从数据库加载数据的过程

 (1)简单模拟一下ajax过程

//模拟一个Ajax操作 function Ajax() {};//空对象 //静态函数 模拟作为从数据库取值 此处值写死的 Ajax.request=function (url,fn) { //默认永远回调成功 if(true){ fn("测试值1","测试值2") } }

(2)在最简单的单体中出现了数据不是动态从数据库加载的,而且没有显示实例化对象,此处使用闭包原理解决上述问题

//使用闭包的原理解决:动态从数据库加载数据 ,显示实例化 var userInfo=(function () { //(1)利用闭包使单体有自己的私有局部变量 var name=""; var code=""; //(2)利用ajax访问数据库取到数据 Ajax.request("url",function (n,c) {//由于模拟的ajax中只是简单传递参数,所以第一个参数可以任意 name=n; code=c; }) //(3)单体实现私有变量的赋值 return { name:name, code:code } })()

(3)使用该种方式的单体,不用实例化 可以直接返回一个单体 【因为使用userInfo时,直接return一个单体回来】

alert(userInfo.name);

总结:

(1)优点,灵活

(2)弊端:return 单体数据量比较大时,都需要从数据库取数据,每次加载都要执行,会影响程序性能。由于该种方式每次加载都要直接执行,return单体数据量大时会影响呈现的性能,于是有了第三种单体模式。

第三种,惰性单体 提供的解决方案为:调方法时才实例化单体,而不是加载时就执行。

于是在第二种的基础上进行修改为,

(1)模拟ajax从数据库加载数据不变

//模拟一个Ajax操作 function Ajax() {} //静态函数 模拟作为从数据库取值 Ajax.request=function (url,fn) { //默认永远回调成功 if(true){ fn("测试值1","测试值2") } }

(2)动态从数据库加载数据 ,显示实例化,使用一个函数(Init())封装产生单体的函数,通过一个私有变量来返回函数(Init())

//使用闭包的原理解决:动态从数据库加载数据 ,显示实例化 var UserInfo=(function () {

var userInfo="";//私有变量 function Init() {//在产生单体方式为包裹一层初始化函数 //利用闭包使单体有自己的私有局部变量 var name=""; var code=""; //利用ajax访问数据库取到数据 Ajax.request("url",function (n,c) { name=n; code=c; }) //单体 return { name:name, code:code, } } return {//此时开始调用初始化函数实现单体的产生 getInstance:function () { if(userInfo){//userInfo=""为false return userInfo; }else { userInfo=Init(); return userInfo; } } } })()

(3)使用   访问UserInfo对象里面的获取初始化获取对象的函数(getInstance())

alert(UserInfo.getInstance().name);

总结:使用惰性单体实质上是通过对产生单体的函数进行再一次封装(使用函数封装),再在通过该类提供的唯一接口(getInstance()方法)访问初始化单体 的函数。

第四种,分支单体

简单的用处:做Ajax的时候根据不同的浏览器获得不同的XHR。(将浏览器之间的差异封装到动态方法,适用于解决浏览器之间的差异。)

比如下面一个简单的例子:在电脑不同分辨率的情况下初始化不一样的界面。(这里只是弹窗显示而已)

(1)获取电脑的分辨率

//得到机器的分辨率 var screenWidth=window.screen.width;//width var screenHeight=window.screen.height;//height

(2)进行分支判断处理 ,将差异封装到动态方法中

var portalInfo=(function () {

//单体 var $1280_1024={info:'1,2,3,5'}//单体1 var $1366_768={info:'4,2,1,2'}//单体2

//动态图选择浏览器的差异结果(这里是分辨率) if(screenWidth==1280){ return $1280_1024;//返回单体进行初始化 }else if(screenWidth==1366){ return $1366_768;//返回单体进行初始化 }else { throw new Error("请检查你当前的电脑分辨率") } })();

(3)使用 ,获取最终的结果

alert(portalInfo.info)//我的结果为4,2,1,2 这是由于我的电脑的分辨率为1366*768

总结一下,对于分支单体有一个缺点:分支中,单体1和单体2都被创建了,并保存在内存中了,但只用到一个。需要在 计算时间 和 占用内存 两者中取舍。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

好像只有二版。本书共有两部分。第一部分给出了实现具体设计模式所需要的面向对象特性的基础知识,主要包括接口、封装和信息隐藏、继承、单体模式等内容。第二部分则专注于各种具体的设计模式及其在JavaScript语言中的应用,主要介绍了工厂模式、桥接模式、组合模式、门面模式等几种常见的模式。本书适合各层次的Web 前端开发人员阅读和参考,也适合有C++/Java/C# 背景的服务器端程序员学习内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript设计模式之单例模式实例
  • 学习javascript设计模式(单例模式)
  • javascript实现设计模式中的单例模式的一些技巧总结
  • javascript设计模式之单例模式详解
  • js设计模式之单例模式原理与用法详解
  • js 设计模式之:单例模式定义与实现方法浅析
  • javascript设计模式 – 单例模式原理与应用实例分析
  • javascript 设计模式 安全沙箱模式
  • javascript设计模式之观察者模式(发布者-订阅者模式)
  • javascript 设计模式之组合模式解析
  • javascript设计模式之解释器模式详解
  • 常用的javascript设计模式小结
  • 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源
  • 关于javascript模块化和命名空间管理的问题说明
  • 使用fullpage插件快速开发整屏翻页的页面
  • 详解next.js页面渲染的优化方案
  • react+typescript+webpack4多入口配置详解
  • 一道常被人轻视的web前端常见面试题(js)
  • 深入理解promise.all
  • 微信小程序如何获取用户收货地址
  • 获取阴历(农历)和当前日期的js代码
  • 纯javascript手写图片轮播代码
  • javascript设计模式有哪几个版本
  • rossharmes javascript设计模式怎么样
  • 谁有 张容铭 javascript 设计模式
  • 和《javascript设计模式》这两本书怎么样
  • 我现在在学JAVASCRIPT跟设计模式需要相关网站
  • 这个javascript用了什么设计模式吗?谢谢
  • javascript设计模式有用吗
  • JAVASCRIPT设计模式怎么样
  • 设计模式在JavaScript的开发中用处大不大?
  • javascript设计模式张容铭怎样
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript面向对象入门教程javascript错误与调试技巧总结javascript数据结构与算法技巧总结javascript遍历算法与技巧总结javascript数学运算用法总结javascript设计模式之单例模式实例学习javascript设计模式(单例模式)javascript实现设计模式中的单例模式的一些技巧总结javascript设计模式之单例模式详解js设计模式之单例模式原理与用法详解js 设计模式之:单例模式定义与实现方法浅析javascript设计模式 – 单例模式原理与应用实例分析javascript 设计模式 安全沙箱模式javascript设计模式之观察者模式(发布者-订阅者模式)javascript 设计模式之组合模式解析javascript设计模式之解释器模式详解常用的javascript设计模式小结微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源关于javascript模块化和命名空间管理的问题说明详解next.js页面渲染的优化方案react+typescript+webpack4多入口配置详解一道常被人轻视的web前端常见面试题(js)深入理解promise.all微信小程序如何获取用户收货地址获取阴历(农历)和当前日期的js代码纯javascript手写图片轮播代码js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包小程序如何获取多个formid实现详解始终在屏幕中间显示div的代码(css+js)javascript 使用for循环时该注意的问题-附javascript中判断函数、变量是否存在innertext和textcontent对比及使用介绍javascript 数据存储的常用函数总结利用canvas实现的加载动画效果实例代码javascript实现带节日和农历的日历特效es6知识点整理之proxy的应用实例详解javascript高级程序设计 阅读笔记(七)
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved