dojo 模块之define

前端之家收集整理的这篇文章主要介绍了dojo 模块之define前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Dojo中的模块,最直接的理解就是 Java 里的 Class ,只有语法的区别,概念是一样的

dojo.define()

使用 define 来定义一个模块,参数介绍如下:

define(自己模块名<可选>,依赖模块数组<可以为空>,function(依序的依赖模块declare){ 这里需要return一个dojo.declare对象 });

定义一个模块,假定我们的文件名为 myModule.js

  1. define(["dependentModuleOne","dependentModuleTwo"],function(declareModuleOne,declareModuleTwo){ // 这里必须return一个JSON对象
  2. var myModule = {}; myModule.hello = function(){ alert("hello"); }; return myModule; });

使用一个模块

  1. // require(["文件路径,不带扩展名","可以同时引入多个模块"],function(对前面引入模块的声明,要按照顺序){})
  2. require([ "myModule" ],function(myDeclare){
  3. myDeclare.hello();
  4. }); 

dojo.declare()

declare() 使用这个方法,可以声明一个Class,可以实现模块的继承和多继承,参数介绍如下:

declare("namespace.ClassName?",[ inheritanceModelOne,inheritanceModelTwo ],{ } );

  • "namespace.ClassName?" :可选,不写则为匿名,dojo会自动分配一个名称;
  • [ one,two ] : 这里是继承的对象,数组类型,可继承多个;
  • { } : 使用 JSON 来描述你的属性方法;

示例代码一,声明一个类

  1. // Create a new class named "mynamespace.MyClass"
  2. declare("mynamespace.MyClass",null,{
  3. // Custom properties and methods here
  4. });
  5. // 使用这个类
  6. var myClass = new mynamespace.MyClass();

  

示例代码二,匿名类

  1. // Create a scoped,anonymous class
  2. var MyClass = declare(null,{
  3. // Custom properties and methods here
  4. });

  

示例代码三,继承

  1. 这里先写基类:

  1. var MyClass = declare(null,{
  2. // Custom properties and methods here
  3. });
  4. // 然后派生类
  5. var MySubClass = declare(MyClass,{
  6. // MySubClass now has all of MyClass's properties and methods
  7. // These properties and methods override parent's
  8. });

  

示例代码四,多继承

  1. var MyClass = declare(null,{
  2. // Custom properties and methods here
  3. });
  4. var OtherClass = declare(null,{
  5. // Custom properties and methods here
  6. });
  7. var ThatClass = declare(null,{
  8. // Custom properties and methods here
  9. });
  10.  
  11. var MyMultiSubClass = declare([
  12. MyClass,OtherClass,ThatClass
  13. ],{
  14. // MyMultiSubClass now has all of the properties and methods from:
  15. // MyClass,and ThatClass
  16. });

  

define()和declare() 结合使用

  1. define([
  2. "dojo/_base/declare","dijit/form/Button"
  3. ],function(declare,Button){
  4. return declare("mynamespace.Button",Button,{
  5. label: "My Button",onClick: function(evt){
  6. console.log("I was clicked!");
  7. this.inherited(arguments);
  8. }
  9. });
  10. });

  

require()

require也可以嵌套使用
  1. require([ "myModule" ],function(myDeclare){
  2. // 这里引入dojo的xmlHttpRequest模块
  3. require(["dojo/_base/xhr"],function(xhr){
  4. xhr.post();
  5. });
  6. // 这里调用我们自定义的模块
  7. myDeclare.hello();
  8. });

  

require是异步执行的,所以如果你这样写会报错的

  1. var myVar;
  2. require([ "myModule" ],function(myDeclare){
  3. myVar = new myDeclare();
  4. });
  5. myVar.hello();
因为,require是异步执行的,在执行到myVar.hello();这句时,myModule模块还可能正在被加载——是否加载完毕由你的模块缓冲状态决定

  

(Via @glue)

猜你在找的Dojo相关文章