dojo入门总结

引用dojo的引用
js中，某些属性名字类似于font-size 和 border-top ,要使用大小写组合来代替“-”，变成fontSize 和 borderTop
1. Dojo可以runtime实时设定各种配置信息。parseOnLoad用来处理页面装载解析widgets和添加代码,isDebug用来打开和禁止特定的debugging信息。
 <script type="text/javascript" src="dojo-release/dojo/dojo.js"
  djConfig="parseOnLoad:true, isDebug:true"></script>
 也可以
  <script type="text/javascript">
   var djConfig = {
      isDebug:true, parseOnLoad:true
       };
  </script>
2.  dojo.addOnLoad是Dojo的重要方法, 如同ready方法
 <script>
  var init = function(){
    alert("testing");
    console.log("I run after the page is ready.");
   }
  dojo.addOnLoad(
   function(){
    console.log("I after run , but second.");
   }   
  );
 </script>
3. Dojo通过dojo.require()装载其他相关代码。这个功能允许我们使用那些不属于Dojo.js的Dojo Toolkit，比如拖放功能，动画， Dijit.widgets, DojoX项目或者开发者自己的代码。
 dojo.require("dijit.form.Button");
 dojo.require("dijit.TitlePane");
 dojo.addOnload(
  function(){
   dojo.byId("testHeading").innerHTML = "We're on our way";
   console.log("动态加载的一个库");
  }
 );
 dojo.addOnLoad执行的代码要等dojo.require()装载完毕才运行
4.操作DOM
  Dojo提供了一个函数dojo.query()来处理文档对象模型(DOM)
  dojo.query() 的用法
  dojo.addOnload(
  dojo.query("#testHeading")
   .addClass("testClass");
   .fadeOut({ delay: 500}).play();
  );
5.事件传递 两种方式
  dojo.connect()
  dojo.addOnLoad(function(){
  var node = dojo.byId("testHeading");
  dojo.connect(node,"onclick", function(){
    node.innerHTML = "I've been clicked";
  });
  }
  )
   var disbleLinks = function(){
  dojo.query("a").connect("onclick",function(e){
   e.preventDefault(); //stop the event
   console.log('clicked', e.target);
  })
   }
 代码e.preventDefault()会阻止需要被执行事件的发生。 在作为参数传递时候，时间经常写成"e","evt"
6. 把特定对象的方法连接起来，然后在同一范围内执行。  下面定义个个包含若干方法的简单对象，然后通过dojo.connect()把这些方法连接起来
 var mineObj = {
  aMethod : function(){
   console.log("running A");
  },
  bMethod : function(){
   console.log("running B");
  }
 };
 var otherObj = {
  cMethod : function(){
   console.log("running c");
  }
 };
 dojo.addOnLoad(function(){
  // run bMethod() whenever aMethod() gets run
   dojo.connect(mineObj,"aMethod",mineObj,"bMethod");
  // run an entirely different object's method via a separate connection
   dojo.connect(mineObj,"bMethod",otherObj,"cMethod");
  // start chain of events
   mineObj.aMethod();
  } 
  )
  终端会显示"running A; running B; running C"。
7.Dojo动画
  所有的动画都使用一个“magic object” 作为唯一的参数。 节点： 属性对于应用到动画中的DOM节点很重要。
  通常的配置如下：
  dojo.addOnLoad(function(){
 var animArgs = {
  node : "testHeading",
  duration : 1000 , // ms to run animation
  delay : 250 // ms to stall before playing
 };
 dojo.fadeOut(animArgs).play();
  }
  );
  基本动画：
  包含在dojo.js中的动画效果：fadeIn, fadeOut 和animateProperty是更多高级动画的基础.
  dojo.addOnLoad(function(){
  dojo.style("testHeading","opacity","0");
  var anim1 = dojo.fadeOut({node:"testHeading",during:700});
  var anim2 = dojo.animateProperty({
   node : "testHeading",
   delay: 1000,
   properties: {
    //fade back in and make text bigger
    opacity:{end:1},
    fontSize: {end : 19 ,
         unit:"pt"
        }
   }
  });
 anima1.play();
 anima2.play();
  }
  )
8. 通过基本的animateProperty可以做很多可视化的工作，为了减小dojo.js的大小，所有其他的动画和工具都打包放在一个单独的模块：dojo.fx,通过dojo.require()单独调用。
   dojo.fx.combine(), dojo.fx.chain(),dojo.fx.wipeIn(),dojo.fx.wipeOut()和dojo.fx.slideTo()
   dojo.require("dojo.fx");
   dojo.addOnLoad(function(){
  dojo.fx.slideTo(
   node: "testHeading" ,
   top:75,
   left:75
  ).play(); 
   }
   );
  dojo.fx.chain() 和 dojo.fx.combine都很常用， 他们可以并行或者顺序执行动画效果，然后返回一个dojo.Animation对象实例。
  dojo.require("dojo.fx");
  dojo.addOnLoad(function(){
  var anim1 = dojo.fadeOut({node:"testHeading"});
  var anim2 = dojo.fadeIn({node:"testHeading"});
  dojo.fx.chain([anim1,anim2]).play();
  })
9.动画事件
  通过dojo.connect()方法把dojo._Animation()一系列事件连接起来，产生特别的效果。常用的是onEnd() 和 beforeBegin();
  dojo.addOnLoad(function(){
  var anim = dojo.fadeOut({node:"testHeading"});
  dojo.connect(anim,"onEnd",function(){
   console.log("the animation is done");
  });
  dojo.conncet(anim,"beforeBegin",function(){
   console.log("the animation is about to start");
  });
  anim.play();
  }
  );
 dojo.addOnLoad(function(){
   var anim = dojo.fadeOut({
   node: "testHeading",
   onEnd: function(){
   dojo.byId("testHeading").innerHTML = "replaced ... ";
   dojo.fadeIn({ node: "testHeading" }).play();
   }
   }).play();
   });
10.dojo.query()动画效果
   使用dojo.query()可以实现节点集合中的每个对象都产生动画效果。当要操作一组节点的时候，这个功能非常有用。(在这个例子中,所有的节点应该带有同样的类别 class='fadeNode')
 dojo.require("dojo.NodeList-fx");
 var fadeThem = function(){
  dojo.query(".fadeNode").fadeOut().play();
 }
 dojo.addOnLoad(function(){
   dojo.connect(dojo.byId("testHeading"),"onclick",fadeThem);
 }  
 );
11.Ajax简单的数据传输
 Ajax的核心技术：XmlHttpRequest ,当使用http动作，如post，get，put，delete时
 XHR方法使用dojo.Deferred()方法在后台处理callbacks().   很重要。。。
 获取数据
 第一步是dojo.xhrGet(),这个方法返回通过URL进行GET调用的内容。XHR方法共享许多参数，最重要和常用的是url:（目的地）和handleAs:（我们如何处理返回信息）。当被请求的数据返回时，数据会被传递给我们定义好的函数load:
 var init = function(){
  var contentNode = dojo.byId("content");
  dojo.xhrGet({
   url: "sample.txt",
   handleAs:"text",
   load: function(data,args){
    //fade out the node we are modifying
    dojo.fadeOut({
     node : contenNode,
     onEnd : function(){
      //set the data , fade it back in
      contentNode.innerHTML = data;
      dojo.fadeIn({node:contentNode}).play();
     }
    }).play();
   },
   //if any error occurs, it goes here
   error : function(error,args){
     console.warn("error!",error);
   }
  });
 };
 dojo.addOnLoad(init);
 发送数据：
  dojo.addOnload(function(){
    dojo.xhrPost({
    url:"submit.html",
    content:{
     "key":"value",
     "foo":42,
     "bar" : {
      "baz" : "value"
     }
    },
    load : function(data,ioargs){
     console.log(data);
    },
    }
    );
  }
  );
 添加一些js通过dojo.connect()来提交表单
  var formSubmit = function(e){
    // prevent the form from actually submitting
    e.preventDefault();
    // submit the form in the background? ?
    dojo.xhrPost({
    url: "alternate-submit.php",
    form: "mainForm",
    handleAs: "text",
    handle: function(data,args){
    if(typeof data == "error"){
     console.warn("error!",args);
    }else{
    // show our response
     console.log(data);
    }
    }
     });
  };
  dojo.addOnLoad(function(){
   var theForm = dojo.byId("mainForm");
   // another dojo.connect syntax: call a function directly? ?
   dojo.connect(theForm,"onsubmit",formSubmit);
  });