这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
单体模式可以说是 javascript 中最基本也是最有用的模式之一,接下来通过本文给大家解析 js 设计模式之单体模式,非常不错,感兴趣的朋友一起看看吧
单体是一个用来划分命名空间并将一些相关的属性与方法组织在一起的对象,如果她可以被实例化的话,那她只能被实例化一次(她只能嫁一次,不能二婚)。
单体模式是 javascript 里面最基本但也是最有用的模式之一。
特点:
1. 可以用来划分命名空间,从而清除全局变量所带来的危险或影响。
2. 利用分支技术来来封装浏览器之间的差异。
3. 可以把代码组织的更为一体,便于阅读和维护。
单体模式的基本写法:
- /* 最基本的单体模式 */
- var her = {
- name: 'Anna',
- sex: 'women',
- say: function(){
- // 一些处理逻辑......
- },
- doing: function(){
- // 另一些处理函数......
- }
- }
1. 划分命名空间:
- var box = {
- width: 0,
- height: 0,
- getArea: function() {
- return this.width * this.width; // js中对象成的访问必须是显示的,即this是不能省略的
- },
- init: function(w, h) {
- // width = w;
- // height = h;这种方式相当于定义了两个全局变量,(没加var声明的变量为全局变量)
- // 并不是对对象width和height的赋值
- // 下面是正确的
- this.width = w;
- this.height = h;
- }
- } //box划分了一个命名空间,命名空间里的变量只在空间里有效
上面的单体中的所有的成员以及方法都是公有的(public),也就是在单体的外部可以对她们进行任意的改动(但不能访问其中的局部变量),那为什么说单体提供了一个命名空间呢?
别急,我们接着往下看:
- var box = {
- width: 0,
- height: 0,
- //单体的变量
- getArea: function() {
- return width * height; // width,height其实并不是单体的变量,而是在init中定义的全局变量
- }
- init: function(w, h) {
- width = w;
- height = h;
- }
- } // init中width,height其实并不是单体的变量
- window.onload = function() {
- var init = box.getArea();
- alert(init);
- }
由于没有对 init 中的 width,height 进行初始化,所以会报错,这样改一下:
- var box = {
- width:0,
- height:0,
- getArea:function(){
- return width * height;
- },
- init:function(w,h){
- width = w;
- height = h;
- }
- }
- window.onload = function(){
- width = 0;
- height = 0;
- //or box.init(0,0);
- var init = box.getArea();
- alert(init);
- }
发现可以了,由于 init 和 getArea 所用的 width 和 height 并不是归单体所有的变量,而是一个全局变量,所以我们可以在单体外面进行随意调用而不受影响、
- var box = {
- width: 0,
- height: 0,
- getArea: function(){
- return width * height;//js中对象成的访问必须是显示的,即this是不能省略的
- },
- init:function(w,h){
- width = w;
- height = h;
- }
- }//这里的width,height其实并不是单体的对象
- window.onload = function(){
- width = 0;
- height = 0;
- var width = box.getArea();
- alert(width);
- }
这样写又会报错了,可见我们以上的方式对于全局变量并没有建立起一个命名空间,全局变量为我们带来了危险。所以最上面的写法是对的,我们来验证一下:
- var box = {
- width: 2,
- height: 2,
- getArea: function() {
- return this.width * this.height;
- / /js中对象成的访问必须是显示的,即this是不能省略的
- },
- init: function(w, h) {
- this.width = w;
- this.height = h;
- }
- }
- window.onload = function() {
- width = 0; // 不会影响单体中的局部变量也就是命名空间
- height = 0; // 不会影响单体中的局部变量也就是命名空间
- var width = box.getArea();
- alert(width);
- }
可见在 window.onload 中的 width 和 height 已经没有干扰了,因为单体为单体中的 width 和 height 建立了一个命名空间。
2. 成员的属性:
虽然在 javascript 中没有这么严格的面向对象 (oop),但是我们可以借助闭包来进行一个模仿,毕竟有的变量设为 public 是很不好的。
- var her = (function(){
- var name = 'Anna';
- var sex = 'women';
- return {
- getArea: function(){
- return name + 'is a' + sex;
- },
- init:function(b){
- name = b;
- }
- }
- })();
- window.onload = function(){
- her.name = 'Jock'; // 无法访问
- alert(ger.getArea());
- her.init('Lous');
- alert(her.getArea());
- }
私有变量、方法是只读的,公有变量、方法是可读可写的。
访问:
对于私有成员,直接访问即可,前面不用加任何修饰, 对于公有的访问在单体作用域内前面要加上 "this.",在单体作用域外前面要加上 "her."(单体名字.)
3. 利用分支技术来来封装浏览器之间的差异
注意的地方:
a. 一定要用闭包,实现即时绑定
b. 每个分支之间用分号隔开
c. 最后返回的是分支的名字
d. 调用的时候用单体名 + 分支的方法名;
- // 利用单体的分支技术来定义XHR(XMLHttpRequest)对象,必须要用闭包才可以实现
- var XHR = (function(){
- //The three branches
- var standard = {
- cXHR:function(){
- return new XMLHttpRequest();
- }
- };
- var activeXNew = {
- cXHR:function(){
- return new ActiveXObject('Msxml2.XMLHttp');
- }
- };
- var activeXOld = {
- cXHR:function(){
- return new ActiveXObject('Microsoft.XMLHttp');
- }
- };
- //To assign(分配) the branch, try each method;return whatever doesn't fail
- var testObject;
- try{
- testObject = standard.cXHR();
- return standard;// return this branch if no error was thrown
- }catch(e){
- try{
- testObject = activeXNew.cXHR();
- return activeXNew;
- }catch(e){
- try{
- testObject = activeXOld.cXHR();
- return activeXOld;
- }catch(e){
- throw new Error('Create the XMLHttpRequestObject failed!');
- }
- }
- }
- })();
- window.onload = function(){
- alert(XHR.cXHR());
- }
以上所述是小编给大家介绍的 JavaScript 设计模式之单体模式全面解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0526/331955.html