从零开始学_JavaScript_系列（17）——dojo(6)（声明一个类declare）

灰太狼 2022-07-24 10:11 168阅读 0赞

**（71）声明一个类declare**

**作用：**

封装一个类，然后可以通过调用这个类，来调用其类方法。

**优点：**

①可以继承其他类的类方法；

②假如我们需要使用一个类的类方法，而这个类依赖于5个插件。如果正常调用的话，我们需要在每个使用这个类的js文件里，调用这5个插件。当我们使用封装时，我们只需要调用这个类即可。而调用这个类的方法很简单。

③可以使得代码模块化，按需加载。例如，我有封装好的A类B类C类，起初我用的是A类（假设A类依赖于20个插件），然后我可能弃用A类改用B类（B类使用与A类不同的15个插件）和C类（C类使用另外10个插件）。

在之前的情况下，我们需要删除A类（包括其依赖的插件比如dojo/dom），然后依次删除其类方法（还要小心没有删错，或者少删了什么东西）。当删除完之后，依次加入B类和C类的插件、参数、方法等。灰常麻烦，而且容易搞错。

使用封装的类后，我们只需要提前写好B类和C类，然后在js里导入B类和C类（像导入插件那样导入），在回调函数的参数中，加上B类和C类的参数。然后声明一个B类的实例和一个C类的实例，通过这个实例来调用B类和C类的方法即可。

（如果不太明白，建议先去看看我的博客：

http://blog.csdn.net/qq20004604/article/details/51388185

搜索关键字：构造函数）

如果还不太明白，可以这么理解，我声明了一个对象A，这个对象A有一个方法add，其效果是给2个参数，返回他们的和。

var fun = function () {
        this.add = function (num1, num2) {  //构造函数的方法
            return num1 + num2;
        }
    }
    var p = new fun();  //声明一个实例
    console.log(p.add(2, 3));   //调用这个实例，返回值，并输出

返回值是5

声明一个类，就类似fun这个变量，

使用这个类，就是new fun()生成一个实例

调用这个类方法，就是p.add(2,3)这样调用它。

如果还不明白？！那先看下去，然后把代码拿过来用用，再改改就知道了。

**如何声明一个类：**

require(["dojo/_base/declare"], function (declare) {
        declare("aClass", null, {
            /*            constructor:function(){
             构造函数是声明一个实例时使用，我们这里并没有使用它，所以注释掉
             },*/
            add: function (num1, num2) {    //类方法
                return num1 + num2;
            }              //注意！！类结尾的方法之后不能有逗号
        })
        var m = new aClass();
        console.log(m.add(3, 3));
    })

这是非常简单的一个封装类，我没有为她创建一个构造函数，也只给他设置了一个方法add（这些都是在declare第三个参数中）。他的类名是aClass（第一个参数），没有继承任何类（declare第二个参数null）。

在声明他之后，我创建了一个他的实例m，然后最后通过m调用add这个方法。

这里是在同文件声明，我们声明类的目的，是为了在另外一个文件中使用它，这样才能起到封装的作用（调用类，并使用其提供的API接口）。

那么如何在另一个文件中声明并调用一个类呢？（封装类）

**如何封装类：**

同样是上面那个方法。

①首先，我们找到dojo文件夹，就是有dojo、dijit这两个文件夹的位置，在它旁边创建一个myclass文件夹。

②然后在其中创建一个add.js这个文件，记住这个文件名（还有myclass文件夹的名字）

③打开那个js文件，把以下这段代码放进去：

define(["dojo/_base/declare"], function (declare) {
        return declare("aClass", null, {
            /*            constructor:function(){
             构造函数是声明一个实例时使用，我们这里并没有使用它，所以注释掉
             },*/
            add: function (num1, num2) {    //类方法
                return num1 + num2;
            }
        })
    })

④打开你的html文件，引用dojo.js，我给个例子吧：

其中第一段代码的意思是表示异步执行，很重要，不能缺。不懂的话就别管他，记得加上就行，而且要放在加载dojo之前。（不然会出错）

⑤调用这个封装的类：

require(["myclass/add"], function (myclass) {
        var m = new myclass();
        console.log(m.add(3, 3));
    })

还记得上面自定义的路径么，参数就是路径（myclass文件夹，add.js文件），然后在回调函数里加上参数（指我们定义的这个类）。

通过第二行代码，生成这个类的实例m；

第三行代码，调用其方法add。

刷新页面，会在console控制台输出6。

**解释：**

①在当前文件调用一个类，使用require；

在一个新的文件声明类，需要使用define。

二者区别在于，require是请求（请求一个声明好的），define是定义（定义一个新的）。

我们在当前文件调用类时，并不是我们自己声明的（当前文件声明不需要使用require或者define），因此我们需要请求（这个请求是dojo帮我们完成的）；

那么我们需要自己定义一个类，用于给其他人请求时使用，那么就必须用define。dojo在看到define的时候，就知道我们这里是定义了一个类了。

②在自定义的add.js文件的第二行代码中，有一个return。

这里的return，实时上是return的是一个函数（可以理解为上面所说的js的构造函数），这个构造函数里有一些类方法和变量（当然我们这里只有一个add方法）。

return的这个函数跑哪里去了呢？很简单，就是我们调用它时，回调函数里的那个参数。（注意，参数不需要和类名相同，因为调用时这个参数一般就不重要了——应该吧）。

因为有了这个参数，所以我们才能通过new myclass()来获得这个类的实例。因为他实质上就像这样

var fun = function () {
       //fun右边的函数，可以理解为那个被return的函数
        this.add = function (num1, num2) {

return num1 + num2;
        }
    }
    var p = new fun();  //声明一个实例

③我们可以在add.js里，像我们正常使用dojo那样，引用很多个插件，然后依次在回调函数里给插件对应的参数。

然后声明一些类方法，在类方法里写我们需要的功能（即API接口）。

也可以声明一些变量，并在类方法中调用它。

也可以使用构造函数，做一些声明该类实例时就做的事情。

还可以继承（当然这里就略了，下次说）

就像这样：

define(["dojo/_base/declare"], function (declare) {
        return declare("aClass", null, {
            mynum: 10,       //声明一个变量（在这个类里是全局的）
            constructor: function (num) {  //这个是构造函数，声明类的实例时，传的参数在这里
                console.log(num);       //我们让声明实例时，输出他传的参数
            },
            add: function (num1) {    //类方法，调用类方法时，返回值是参数+10
                return this.mynum + num1;   //必须加this.mynum才能调用类内置的变量
            },
            getMynum: function () {    //返回类内部的变量
                return this.mynum;
            },
            mynumAdd:function(){
                this.mynum++;
                return this.mynum;
            }
        })
    })

方法很简单，就不详细解释了。

然后调用它。

require(["myclass/add"], function (myclass) {
        var m = new myclass(1);
        console.log(m.add(3));
        console.log(m.getMynum());
        console.log(m.mynumAdd());
        var n = new myclass(1);
        console.log(n.getMynum());
    })

输出结果是：

我们会发现：

①不同的实例，并不会共享类内的变量。

②类内声明的变量，类外是无法直接访问的：

console.log(mynum);

报错，提示undefined

另外：

①假如在html文件里引用了jquery库（或者其他库），然后又在html里引用了这个类，那么是可以直接在add.js里调用jquery的方法的（并不需要在add.js里引用jquery库）；当然，如果html里没引用jquery库的话，是会报错的。