《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 相关文章推荐
JavaScript 题型问答有答案参考
Feb 17 Javascript
js倒计时小程序
Nov 05 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
VueJs监听window.resize方法示例
Jan 17 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
支付宝小程序实现省市区三级联动
Jun 21 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类
2006/11/25 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
详解node中创建服务进程
2017/05/09 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
Python制作数据导入导出工具
2015/07/31 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Python实现带百分比的进度条
2016/06/28 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Python读取yaml文件的详细教程
2020/07/21 Python
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
高职教师岗位职责
2013/12/24 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
2014年少先队工作总结
2014/12/03 职场文书
单位推荐信范文
2015/03/27 职场文书
党内外群众意见范文
2015/06/02 职场文书
十七岁的单车观后感
2015/06/12 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js