《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析


Posted in Javascript onApril 07, 2020

本文实例讲述了Javascript面向对象程序设计单例模式原理与实现方法。分享给大家供大家参考,具体如下:

1.单例模式概述

源自百度百科对于单例模式的定义:

单例模式的意思就是只有一个实例。单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例。这个类称为单例类。

在javascript的世界里,其实没有严格的对象和类定义,“一切皆对象”使得javascript中都是对象,不能像java,c++或者php使用特定的方法返回一个实例来实现,因此对javascript来说,我们要创造的是一个“不能被多次实例化的”对象,也就是说只能实例化一次的对象。

2.简单单例模式:

只能实例化一次的对象也就可以使用“对象字面量”的定义方式来实现:

var singleton = {
  attribute:'',
  method:function(){}
}

这样定义的对象,不能使用new singleton的方式来生成另外的对象(不存在prototype和constructor属性)。

3.包含私有成员的单例模式:

如果看过之前的我写的关于类成员的文章,自然的我们就能想到用闭包来实现,既然要用的闭包,那么一定会用到函数和函数返回值,于是,这样的单例模式如下:

var singleton = function(){
  var private_attribute = '';
  functioin private_method(){}
  return {
   public_attribute:'',
   public_method:function(){}
  };
}

还记得匿名函数吗?通常在使用闭包的时候会使用,改进之后如下:

var singleton = (function(){
  var private_attribute = '';
  functioin private_method(){}
  return {
   public_attribute:'',
   public_method:function(){}
  };
})();

4.惰性加载(lazy loading,延迟加载)单例模式

2,3中所示单例模式定义方式都是在定义时创建的单例,这样很浪费内存,如何能在使用的时候才创建(lazy loading,更多的用于图片的延迟加载)呢?所谓惰性加载,也就是先定义,然后在某个地方才创建对象,所以必须要使用函数,我们知道在java或者php中单例模式通常使用一个静态方法来创建,同理,我们再改进一下闭包形式的定义式:

var singleton = (function(){
  var unique;
  function getinstance(){
    if(!unique){
      unique = construct();
      return unique;
    }
  }
  function construct(){
    var private_member;
    function private_method(){}
    return {//这里才是真正的单例对象
      public_member:'',
      public_method:function(){}
    };
})();

这样调用一个单例对象的方法:

singleton.getinstance().publicmethod();

这样只有在调用方法或引用属性的时候才会真正的创建unique对象,就是使用的时候比较麻烦:)

5.简单mvc代码风格

顺便在这里分享一下我写js的一个简单风格,尽管js是一个前台代码,但是就其本身而言,也可以将它的内容分为mvc(model,controller,view,关于mvc的概念请baidu/google),因此在写一个页面的js代码的时候,我会这么写:

//函数封装在此
var controller = {
  init:function(){}
};
//页面相关内容封装在此
var view = {
  table:{},
  banner:{},
  foot:{}
};
//数据相关内容封装在此
var model = {
  table_data:{}
}

在页面onload的时候调用controoler.init();完成初始化工作(数据加载,页面渲染,事件监听等),这样写的目的是尽量将一些相同的逻辑组织在一起,方便查找和修改,目前只是一个雏形,希望在看完《javascript设计模式》这本书之后能写一个轻量级的模型出来^_^

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

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

Javascript 相关文章推荐
jQuery中的常用事件总结
Dec 27 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
flexible.js实现移动端rem适配方案
Apr 07 #Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 #Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 #Javascript
小谈angular ng deploy的实现
Apr 07 #Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 #Javascript
vue开发中遇到的问题总结
Apr 07 #Javascript
手把手教您实现react异步加载高阶组件
Apr 07 #Javascript
You might like
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
PHP分页类集锦
2014/11/18 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
学习python的几条建议分享
2013/02/10 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
python GUI计算器的实现
2020/10/09 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
Delphi笔试题
2016/11/14 面试题
绿色城市实施方案
2014/03/19 职场文书
检讨书格式
2015/01/23 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL