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

(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,我给个例子吧:

<script>var dojoConfig={async:true}</script>
<script src="dojo/dojo.js"></script>

 

其中第一段代码的意思是表示异步执行,很重要,不能缺。不懂的话就别管他,记得加上就行,而且要放在加载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());
})

输出结果是:

1

13

10

11

1

10

 

我们会发现:

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

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

console.log(mynum);

报错,提示undefined

 

另外:

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

 

时间: 2024-11-02 01:32:54

从零开始学_JavaScript_系列(17)——dojo(6)(声明一个类declare)的相关文章

从零开始学_JavaScript_系列(21)——dojo(8)(手把手教你封装一个widget)

(73)封装一个widget 醒目:必须在web环境下使用,无论是python的web.py或者是通过http访问网站环境,都可以,但纯本地是不可行的.   首先,什么是widget? 简单来说,就是一个dom结点,比如像这样: <div>     这是一个dom结点 </div>   为什么需要widget呢? 很简单,比如,我们想在这样一个地方: <div class="nodes"> </div>   添加很多个上面那个dom结点,

从零开始学_JavaScript_系列(18)——dojo(7)(dojo中类的继承)

关于声明及封装一个类,请查阅我的上一篇博客: http://blog.csdn.net/qq20004604/article/details/51456809 (72)继承一个类 在(71)的基础上,我们继续. 我们之前声明了一个类add,那么计算时,仅仅只有add显然是不够的.我们还需要minus(减去). 那么我们重新建一个文件minus,然后把add的内容复制过来,再给他加上减法功能,然后调用minus这个文件(像71那样),声明一个这样的实例? 显然太麻烦了.   这个时候,我们就需要用

从零开始学_JavaScript_系列(五)——dojo(基础,动画移动,重力模拟,动画合并,添加标签)

关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论.或者站内信,我会尽快回复.   (1)加载 ①首先,先设置   <script>      //替代使用data-dojo-config,我们创建一个dojoConfig对象(是个设置)在我们调用dojo.js之前,他们功能相同      //这比通过一大堆设置来说,更易阅读         var dojoConfig = {       

从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)

如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo. 关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论.或者站内信,我会尽快回复. (21)和(22)写的不好,跳过. (23)AJAX异步加载 插件:dojo/request 参数:request 语法(get): re

从零开始学_JavaScript_系列(14)——dojo(7)(饼图,BorderContainer,hashchange,弹窗)

5/5更新.BorderContainer自适应在本地时正常使用的方法,请查看原文代码之前那一段话 (60)创建一个饼形图 比较简单的标签声明法:(只需要修改数据即可) ①首先,加载dojo文件和样式文件:(关于style.css,需要根据自己找到的路径修改,或者使用我从官网上找到的链接:https://dojotoolkit.org/documentation/tutorials/1.10/charting/demo/style.css) <link rel="stylesheet&qu

从零开始学_JavaScript_系列(十)——dojo(3)(GRID表格创建、样式、列宽可变、排序、过滤器)

如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo.(当然,本篇也考虑了未使用过dojo的人,可以只阅读该链接关于dojo下载的部分,以获得dojo) 关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论.或者站内信,我会尽快回复. (34)gridx gridx系列插件并

从零开始学_JavaScript_系列(22)——dojo(9)(表单、JsonRest的post方法,widget的使用思路)

(74)dojo的表单模块 插件:dojo/dom-form 参数:domForm 解释:        当我们需要像服务器提交很多内容时(比如很多个input输入框,还有一些单选按钮.多选按钮),我们必须将这些输入框的值变成一个对象(也许还要转为一个json字符串),在post的时候将其传递给服务器:          假如一个一个读过去,这也太傻了.所以这就是dom-form方法的作用了.        先上代码: <!DOCTYPE html> <html> <head

从零开始学_JavaScript_系列(十一)——dojo(4)(GRID表格进阶:格式化、style、数据获取、多重排序、点击事件)

如果没有阅读过gridx表格的基本运用教程,建议先阅读这篇(4天点击量已经接近5k): http://blog.csdn.net/qq20004604/article/details/51170919 里面很详细的说明了gridx表格的创建,常用模块,和基本使用. 如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo. 关于dojo的下载,请查看: https://dojo

从零开始学_JavaScript_系列(十一)——dojo(5)(GRID表格进阶:更新值,name,重置表结构/缓存,重绘表格)

如果没接触过dojo,或者是dojo的gridx控件,请查看我之前几篇博客,写的已经非常详细了 最重要的,更新grid中指定单元格的值,请拉到最后看(59) 至此,grid表格日常所需的常见功能已经基本完结.如果有其他功能需求,请评论提出. (54)获得某列的name属性 代码: grid.column(2).name(); 效果: ①获得第2+1=3列的name属性: ②这里的name属性指表头的名字,如图中红框的 补充: ③grid.column(2).width 显示本列宽度 ④grid.