javascript 类和命名空间的模拟代码

所属分类: 网络编程 / JavaScript 阅读数: 451
收藏 0 赞 0 分享
先上一段最简单的:
复制代码 代码如下:

// 以下几行代码展示了命名空间、类、以及函数的模拟定义和使用:
NameSpace = {};
NameSpace.Class = function(){
this.Method = function(info){alert(info);}
};
new NameSpace.Class().Method("Hello world");

再来一些可见到的,各种情况的代码
1.类的模拟
复制代码 代码如下:

// 类定义
function Class(info){
// 私有成员
var privateData = "private data";
var privateMethod = function(){writeline("private");};
function privateMethod2(info){writeline("private");}
// 公有成员(使用this)
this.Data = "public data";
this.Method = function(){writeline(info);};
};
// 类的静态成员
Class.StaticData = "static data";
Class.StaticMethod = function(info){writeline(info);};


2.命名空间的模拟
复制代码 代码如下:

function NameSpace(){}
或者
NameSpace = {};
或者
NameSpace = new Object();

3.目标:创建类实例,并调用实例方法
复制代码 代码如下:

var o = new NameSpace.Class("hello world");
o.Method();
// 使用已有的类定义,并用静态方法挂到NameSpace下
NameSpace.Class1 = Class;
new NameSpace.Class1("new NameSpace.Class1().Method()").Method();
// 或者:新建类定义
NameSpace.Class2 = function(info){
this.Method = function(){writeline(info);};
};
new NameSpace.Class2("new NameSpace.Class2().Method()").Method();


4.目标:调用类的静态函数
复制代码 代码如下:

NameSpace.Class.StaticMethod();
// 静态对象+静态方法
NameSpace.Class3 = {}; // {}表示这是一个对象,或者用new object();
NameSpace.Class3.Method = function(info) {writeline(info);};
NameSpace.Class3.Method("NameSpace.Class3.Method()");
// 或者:new一个对象赋予静态成员
NameSpace.Class4 = new Class("NameSpace.Class4.Method()");
NameSpace.Class4.Method();
// 或者:匿名函数用于定义类,再用new创建对象
NameSpace.Class5 = new (function(info){
this.Method = function(){writeline(info);};
})("NameSpace.Class5.Method()");
NameSpace.Class5.Method();
// 或者:JSON方式(类定义+创建同时完成)
// 优点是简单,缺点是不能传递参数进去
NameSpace.Class6 = {
Method : function(info){writeline(info);}
};
NameSpace.Class6.Method("NameSpace.Class6.Method()");

演示代码:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

ps.很开心,vs2010对js的智能感知越来越好用了:p
出处:http://surfsky.cnblogs.com
更多精彩内容其他人还在看

JavaScript this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多