《JavaScript权威指南》中说到：“JavaScript是面向对象的语言”。这句话固然权威，但实现起来却缺少指南。究其原因，是JavaScript中含有Java这个单词（^_^开个玩笑）。不过，将js与Java对比后就可以发现，js没有直接提供名称空间（也就是包）的机制，同时，类的创建与Java也大相径庭，加之平常对js的使用，也就局限在一些function的定义和触发调用上，因此对js面向对象的性能不感冒，直到dojo这个js框架的出现，就像黑夜中的萤火虫，让人看到了js开发的新局面。
我在参考了dojo book中的相关章节后，写下这篇介绍在dojo中实现js面向对象编程的帖子。如果您对js的面向对象的说法不理解，还请您先参考附件中的《JavaScript权威指南（第五版）》（En），相信这对您学习JavaScript有极大的帮助。
好了，废话说了很多了。先新建一个工程（我用的是Eclipse3.2＋MyEclipse5.5＋JSEclipse插件）：DojoOO
然后将dojo资源加入到工程文件中，现在看起来就像这样：
现在，在dojo文件夹的旁边，建一个自己的文件夹：trace，用来存放自己写的js包和类。
刚才在写Person时，用的是一般的js类定义。在dojo中，有它设计的更”亲切“的定义方法，如下：
initializer就相当于构造函数，静态方法，实例方法的定义一目了然。可以注意到，其中有一个null，这表示Person类不继承于其他类，否则，这个null就换成它的父类，就实现了继承功能。（具体做法，参见dojo book中的 相关章节）。本文同时也参考了 这篇文章，在此，一并感谢原作者。
我在参考了dojo book中的相关章节后，写下这篇介绍在dojo中实现js面向对象编程的帖子。如果您对js的面向对象的说法不理解，还请您先参考附件中的《JavaScript权威指南（第五版）》（En），相信这对您学习JavaScript有极大的帮助。
好了，废话说了很多了。先新建一个工程（我用的是Eclipse3.2＋MyEclipse5.5＋JSEclipse插件）：DojoOO
然后将dojo资源加入到工程文件中，现在看起来就像这样：
本来，按照Java的规矩，我应该搞个org.trace.***的目录结构的，但是在js中，每一个类我们都得写全称，所以包名就尽量简写了。现在，在trace文件夹下建立util文件夹。注意：dojo的二级文件夹名称是src，自定义的就不需要了，直接把dojo中的三级文件夹提到二级就对了。
现在，就是创建一个类了~~，别忙，在js中，由于没有包的机制，所以我们先得自己建个”包文件“：
注意，这个”包文件“的名字一律都是：__package__.js。内容如下：
可以看到，用到了dojo的函数。解释一下，第一行是把包内所有的文件进行”注册“，照上面看来，这个util包内应该有Person.js和Employee.js两个文件。第二行就是产生这个包了。至于dojo具体是怎么做的……，咱不care，能用就行。
顺便说一说，如果你要写注释，最”安全“的办法就是将dojo中的某个__package__.js的注释代码段拷过来，再修改其中的内容。我曾经在js代码中遍地开花地写了很多注释，结果在firefox中可以运行，在ie中就报错了（鄙视它），删掉注释后就好了。所以，dojo怎么写，咱最好就怎么写。
现在，来写Person.js，内容如下：
这就是《JavaScript权威指南》中最权威的js类定义了。第一行要解释一下，这是在dojo中定义一个类或模块（带包名）的模板语句。Employee.js暂时不写了。现在看起来就像这样：
- dojo.kwCompoundRequire({common:["trace.util.Person", "trace.util.Employee"]});
- dojo.provide("trace.util.*");
可以看到，用到了dojo的函数。解释一下，第一行是把包内所有的文件进行”注册“，照上面看来，这个util包内应该有Person.js和Employee.js两个文件。第二行就是产生这个包了。至于dojo具体是怎么做的……，咱不care，能用就行。
顺便说一说，如果你要写注释，最”安全“的办法就是将dojo中的某个__package__.js的注释代码段拷过来，再修改其中的内容。我曾经在js代码中遍地开花地写了很多注释，结果在firefox中可以运行，在ie中就报错了（鄙视它），删掉注释后就好了。所以，dojo怎么写，咱最好就怎么写。
现在，来写Person.js，内容如下：
- dojo.provide("trace.util.Person");
- trace.util.Person = function(name,age) {
- this.name = name;
- this.age = age;
- }
- trace.util.Person.prototype.sayWaoo = function() {alert("Waooooo~~");}
这就是《JavaScript权威指南》中最权威的js类定义了。第一行要解释一下，这是在dojo中定义一个类或模块（带包名）的模板语句。Employee.js暂时不写了。现在看起来就像这样：
现在，可以在index.jsp中写入测试代码了。内容如下：
说明几点：1、不可以有base标签；2、dojo的配置一定要按照这个脚本段出现的顺序来；3、最好加上debug属性和一个装载debug信息的容器，不然在ie中很不好调试。
运行一下，看看效果吧：）
- <%@ page language="java" pageEncoding="UTF-8"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>测试页面</title>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="This is my page">
- <script type="text/javascript">
- var djConfig = {
- isDebug: true,
- debugContainerId: "dojodebug",
- bindEncoding: 'UTF-8'
- };
- </script>
- <script type="text/javascript" src="/DojoOO/js/dojo/dojo.js"></script>
- <script type="text/javascript">
- dojo.require("trace.util.Person");
- var trace = new trace.util.Person("AKai",23);
- document.write(trace.name);
- </script>
- </head>
- <body>
- <div id="dojodebug"></div>
- </body>
- </html>
说明几点：1、不可以有base标签；2、dojo的配置一定要按照这个脚本段出现的顺序来；3、最好加上debug属性和一个装载debug信息的容器，不然在ie中很不好调试。
运行一下，看看效果吧：）
刚才在写Person时，用的是一般的js类定义。在dojo中，有它设计的更”亲切“的定义方法，如下：
- dojo.declare("trace.util.Person",null,{
- initializer : function(name, age){
- this.name = name;
- this.age = age;
- },
- sayWaoo: function() {
- alert("Waoooo~~~");
- },
- statics {counter: 0, somethingElse: "hello"}
- });
initializer就相当于构造函数，静态方法，实例方法的定义一目了然。可以注意到，其中有一个null，这表示Person类不继承于其他类，否则，这个null就换成它的父类，就实现了继承功能。（具体做法，参见dojo book中的 相关章节）。本文同时也参考了 这篇文章，在此，一并感谢原作者。
扫一扫
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
