首页 >> js开发 >> js代码《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
js代码《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了Javascript面向对象程序设计单例模式原理与实现方法。分享给大家供大家参考,具体如下:1.单例模式概述源自百度百科对于单例模式的定义:单例模式的意思就是只有一个实例。单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例。这个类称为单例类。在javascript的世界里,其实没有严格的对象和类定义,“一切皆对象”使得javascript中都是对象,不能像java,c++或者php使用特定的方法返回一个实例来实现,因此对javascript来说,我们要创造的是一个“不能被多次实例化的”对象,也就是说只能实例化一次的对象。2.简单单例模式:只能实例化一次的对象也就可以使用“对象字面量”的定义方式来实现:
var singleton = {
attribute:'',
method:function(){}
}
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(){}
};
}
还记得匿名函数吗?通常在使用闭包的时候会使用,改进之后如下:
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(){}
};
})();
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();
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:{}
}
//函数封装在此
var controller = {
init:function(){}
};
//页面相关内容封装在此
var view = {
table:{},
banner:{},
foot:{}
};
//数据相关内容封装在此
var model = {
table_data:{}
}
在页面onload的时候调用controoler.init();完成初始化工作(数据加载,页面渲染,事件监听等),这样写的目的是尽量将一些相同的逻辑组织在一起,方便查找和修改,目前只是一个雏形,希望在看完《javascript设计模式》这本书之后能写一个轻量级的模型出来^_^感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
var singleton = {
attribute:'',
method:function(){}
}
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(){}
};
}
还记得匿名函数吗?通常在使用闭包的时候会使用,改进之后如下:
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(){}
};
})();
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();
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:{}
}
//函数封装在此
var controller = {
init:function(){}
};
//页面相关内容封装在此
var view = {
table:{},
banner:{},
foot:{}
};
//数据相关内容封装在此
var model = {
table_data:{}
}
在页面onload的时候调用controoler.init();完成初始化工作(数据加载,页面渲染,事件监听等),这样写的目的是尽量将一些相同的逻辑组织在一起,方便查找和修改,目前只是一个雏形,希望在看完《javascript设计模式》这本书之后能写一个轻量级的模型出来^_^感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
相关文章:
- js解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题js大全
- js详细分析vue表单数据的绑定js大全
- js代码基于VSCode调试网页JavaScript代码过程详解
- jsecharts 使用formatter 修改鼠标悬浮事件信息操作js大全
- jsVue切换组件实现返回后不重置数据,保留历史设置操作js大全
- jsvue-router之解决addRoutes使用遇到的坑js大全
- js代码JavaScript undefined及null区别实例解析
- js解决vue+router路由跳转不起作用的一项原因js大全
- js解决echarts数据二次渲染不成功的问题js大全
- jsvue通过过滤器实现数据格式化js大全