《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 相关文章推荐
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
js实现坦克大战游戏
Feb 24 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 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
python基础教程之获取本机ip数据包示例
2014/02/10 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python处理CSV与List的转换方法
2018/04/19 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
pandas的qcut()方法详解
2019/07/06 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python画微信表情符的实例代码
2019/10/09 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
介绍一下Python中webbrowser的用法
2013/05/07 面试题
会计出纳员的自我评价
2014/01/15 职场文书
行政主管职责范本
2014/03/07 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
2016猴年春节问候语
2015/11/11 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android