《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 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
angular.js分页代码的实例
Jul 27 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 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
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
写JQuery插件的基本知识
2013/11/25 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
python从入门到精通(DAY 2)
2015/12/20 Python
python常见排序算法基础教程
2017/04/13 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python FFT合成波形的实例
2019/12/04 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
实习老师个人总结的自我评价
2013/09/28 职场文书
语文教育专业应届生求职信
2013/11/23 职场文书
2014年药店工作总结
2014/11/20 职场文书
无罪辩护词范文
2015/05/21 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
Python基础知识之变量的详解
2021/04/14 Python
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang