《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 学习 几种常用方法
Jun 11 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
微信小程序如何实现五星评价功能
Oct 15 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
php代码优化及php相关问题总结
2006/10/09 PHP
一个简易需要注册的留言版程序
2006/10/09 PHP
Snoopy类使用小例子
2008/04/15 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php实现socket推送技术的示例
2017/12/20 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python登陆asp网站页面的实现代码
2015/01/14 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
python语言基本语句用法总结
2019/06/11 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
市场营销工作计划书
2014/05/06 职场文书
公安学专业求职信
2014/07/27 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书