《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实现代码[IE暂不支持]
May 24 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
微信小程序自动客服功能
Nov 02 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
js调用网络摄像头的方法
Dec 05 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
C# Assembly类访问程序集信息
2009/06/13 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
浅谈js中的闭包
2015/03/16 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
vue的token刷新处理的方法
2018/07/17 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
Django 登陆验证码和中间件的实现
2018/08/17 Python
Python中GIL的使用详解
2018/10/03 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
介绍下Java中==和equals的区别
2013/09/01 面试题
2014端午节活动策划方案
2014/01/27 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
Python正则表达式中flags参数的实例详解
2022/04/01 Python
Python实现双向链表
2022/05/25 Python
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python