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

雨点打透心脏的1/2处 2022-07-28 06:25 90阅读 0赞

**关于dojo的下载，请查看：**

**https://dojotoolkit.org/download/**

**建议下载FULL SOURCE版**

**如果需要讨论，请评论、或者站内信，我会尽快回复。**

（1）加载

①首先，先设置

//替代使用data-dojo-config，我们创建一个dojoConfig对象（是个设置）在我们调用dojo.js之前，他们功能相同

//这比通过一大堆设置来说，更易阅读

var dojoConfig = \{

async: true,

//这个代码注册了demo包的正确位置，于是我们可以调用dojo从CDN，并且同时还能加载本地模块

packages: \[\{

name: "demo",

location: location.pathname.replace(/\\/\[^/\]\*$/,'') +'/demo'

\}\]

\};

</script>

②要加载dojo.js文件：

③最后，另开一个script，加载自己需要的插件，加载方式为使用：

require ( \[插件\],回调函数);

插件的值用单引号包括，用逗号分隔不同插件，都放在方括号里；

回调函数可以直接输入函数function(参数)，参数填写插件名，如果多个插件，用逗号分隔。

如例：

require(\[ //这行表示要加载东西了，用哪个加载哪个||这些直接映射到文件名，如果你下载的Dojo源分布 ，并期待在dojo目录，你会看到dom.js和dom-construct.js文件，这些文件定义这些模块。

'dojo/dom',  //加载dojo文件夹下的dom插件（应该）

'dojo/fx',  //加载fx插件，这个插件包括一个滑动动画（slideTo），还有其他

'dojo/domReady!'  //这个插件大概作用是，保证加载完毕后才执行，以免执行一个没加载好的。

\], //这行已经加载结束了

function (dom,fx) \{  //这是一个回调函数（即加载完才执行的），参数有dom和fx（这个应该指的是插件）

var greeting = dom.byId('greeting');//得到id为greeting的元素，赋值给greeting这个变量

greeting.innerHTML += ' from Dojo!';//这个元素加入文本（+=）

//动画部分，

fx.slideTo(\{

node: greeting, //不懂

top: 100,

left: 500,

\}).play();

\} //这行是函数完

); //到这部分是require完

</script>

**关于插件的加载：**

**回调函数中的顺序，是按照插件的顺序填写的。否则就很可能会插件加载出错！！而且这个bug莫名其妙！！！！！！！**

（2）移动动画

//动画部分，

fx.slideTo(\{

node: greeting, //不懂

top: 100,

left: 500,

\}).play();

第一个参数是移动后的情况。但node:greeting指对id为greeting的元素进行操纵

这是一个动画部分，他是回调函数内容的一部分，但显然，单独拿出来也是可以用的。

如：

'dojo/dom',  //加载dojo文件夹下的dom插件（应该）

'dojo/fx',  //加载fx插件，这个插件包括一个滑动动画（slideTo），还有其他

'dojo/domReady!'  //这个插件大概作用是，保证加载完毕后才执行，以免执行一个没加载好的。

\], //这行已经加载结束了

function (dom,fx) \{  //这是一个回调函数（即加载完才执行的），参数有dom和fx（这个应该指的是插件）

ST(dom,fx);\} //调用ST函数，ST函数在下面定义

); //到这部分是require完

</script>

function ST(dom,fx)\{

var greeting = dom.byId("greeting");//得到id为greeting的元素，赋值给greeting这个变量

greeting.innerHTML += " from Dojo!";//这个元素加入文本（+=）

//动画部分，

fx.slideTo(\{

node: greeting, //不懂

top: 100,

left: 500,

\}).play();

\} //这行是ST函数完

</script>

（3）变宽变窄动画

原型：（但需要在之前使用animateProperty=dom.byId("animateproperty");

baseFx.animateProperty(\{

node: dom.byId("anim8target"),

properties: \{ borderWidth: 100 \}

\}).play();

\});

效果是获得id为anim8target的东西为目标（node应该是操作目标的意思），

然后properties是把他变成什么样子（borderWidth应该是外边框），

.play() 应该是动画的意思。

代码：

require(\[ //第一个参数，加载插件

"dojo/\_base/fx",

"dojo/on",

"dojo/dom",

"dojo/domReady!"

\],

function(baseFx,on,dom) \{  //第二个参数，回调函数

var startButton1=dom.byId("startButton"),//得到id为startButton的元素

reverseButton1=dom.byId("reverseButton"),//得到reverseButton的元素

animateProperty=dom.byId("animateproperty");//得到animaterproperty的元素（应该是动画函数吧？），实测证明，这行如果被删除（并且上一行改成冒号），依然可以被运行   //这行如果前面的变量名被修改（下面不被修改），依然可以正常运行（不明白为什么）

on(startButton1,"click",function()\{ //on应该是当...的时候，比如放这里，应该是某元素（上面赋值的变量）当被按下的时候，调用函数后面的，但evt参数不知道有什么用（不加也没影响效果）

baseFx.animateProperty(\{ //这行应该是说baseFx插件的animateProperty函数（动画函数），然后\{\}内应该是变化后的状态，其中node指操纵的对象，properties指变成什么样子

node:anim8target, //这里的是操纵对象

properties:\{borderWidth:100\} //properties操纵的是css属性

\}).play(); //操纵速度不在play

\});

on(reverseButton1,"click",function()\{

baseFx.animateProperty(\{

node:anim8target,

properties:\{borderWidth:1\}

\}).play();

\});

</script>

注：

①borderWidth是外边框；如果是width则是宽度，height是高度（不会导致内部字体变形）

②操纵的目标是：

</div>

③**修饰这个目标有css属性（不然外形会是默认外形，很大），可以认为是初始属性**

.innerBox \{

margin: 5%;

padding: 5px;

background-color: white;

.box \{

position: absolute;

height: 200px; /\*这里必须加px\*/

width: 200px; /\*这两个是外框的高和宽\*/

background-color: \#ddd;

border: 1px \#eee;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-color: rgb(238, 238, 238);

border-right-color: rgb(238, 238, 238);

border-bottom-color: rgb(238, 238, 238);

border-left-color: rgb(238, 238, 238);

-moz-border-top-colors: none;

-moz-border-right-colors: none;

-moz-border-bottom-colors: none;

-moz-border-left-colors: none;

border-image-source: none;

border-image-slice: 100% 100% 100% 100%;

border-image-width: 1 1 1 1;

border-image-outset: 0 0 0 0;

border-image-repeat: stretch stretch;

padding: 5px;

padding-top: 5px; /\*这里的边距指外框到内框的，上边距\*/

padding-right: 5px; /\*右边距\*/

padding-bottom: 5px;/\*下边距\*/

padding-left: 5px;/\*左边距\*/

</style>

事实上应该不用这么多

④效果是外框左上是淡灰色，右下是深灰色。

（4）设置动画的开始和结束情况：

如代码：

on(startButton1, "click",  function () \{ //on应该是当...的时候，比如放这里，应该是某元素（上面赋值的变量）当被按下的时候，调用函数后面的，但evt参数不知道有什么用（不加也没影响效果）

node: anim8target, //这里的是操纵对象

properties: \{

height: \{ end: 400, start: 100 \},  //高度变化，初始是100（不受之前情况影响），结束是400

width: \{ end: 400, start: 100 \}

//width:\{end:400,start:100\}//properties操纵的是css属性

\}).play(); //感觉play应该能操纵速率，但不知道怎么用

\});

</script>

注：

①这个还可以用该对颜色进行变化。

（5）透明度与动画速度

如代码：

on(startButton1, "click",  function () \{ //on应该是当...的时候，比如放这里，应该是某元素（上面赋值的变量）当被按下的时候，调用函数后面的，但evt参数不知道有什么用（不加也没影响效果）

node: anim8target, //这里的是操纵对象

properties: \{

height: \{ end: 400, start: 100 \},  //高度变化，初始是100（不受之前情况影响），结束是400

width: \{ end: 400, start: 100 \},

opacity: \{ start: 1, end: 0.3 \}  //opacity是透明度，最大1（不透明），最小0（透明）

\},

duration: 3000 //这个是动画速度

\}).play(); //感觉play应该能操纵速率，但不知道怎么用

\});

透明度是opacity，

速度（变化所用时间）是properties函数的第二个参数（第一个参数是设置动画变换后的属性）

（6）动画过程的更多种形式

简单来说，除了点到点的动画之外，还有更多的可能。

而这些更多的可能，其位于插件dojo/fx/easing之中

插件需要：

dojo/fx/easing

dojo/\_base/fx

例如模拟球体掉落，需要使用插件dojo/fx/easing，类型为（在animateProperty的第一个参数中放置）：easing: easing.bounceOut ，

如：

require(\["dojo/\_base/fx",

"dojo/dom",

"dojo/fx/easing",  //这个插件用于加载更多的动画过程

"dojo/window",  //一个新的插件，应该是跟窗口相关的

"dojo/on",

"dojo/domReady!"\],  function (baseFx, dom, easing, win, on) \{  //5个参数（5个插件）

var startButton = dom.byId("startButton"),//开始按钮

reverseButton = dom.byId("reverseButton"),//另一个按钮

anim8target = dom.byId("anim8target");//操作对象

// 设置一对按钮用于处理事件

on(startButton, "click",  function (evt) \{ //开始按钮在点击后触发

// 得到我们窗口的尺寸

var viewport = win.getBox(win.doc);//变量被用于存储窗口的信息

baseFx.animateProperty(\{

easing: easing.bounceOut, //动画，向下加速，会触底4次后停止（类似球体从空中掉落的动画形式）

duration: 3500,

node: anim8target,

properties: \{

// calculate the 'floor'计算地板

// 然后减去东西的高度

top: \{ start: 0, end: viewport.h - anim8target.offsetHeight \}  //top（距离上面的距离为0，

//结束时，距离上面的距离是窗口高度（viewport.h）减去当前块的高度（ .offsetHeight）

\}).play();

\});

on(reverseButton, "click",  function (evt) \{

baseFx.animateProperty(\{

node: anim8target,

easing: easing.bounceOut,

properties: \{ top: 0 \}, //飞到最高

duration: 2000

\}).play();

\});

</script>

效果是：

①按钮1：摔下去，弹3次，第4次碰到地面（通过top设定）时停止。

②按钮2：飞上去，弹3才，第4次碰到时停止；

注：

①也可以斜着移动然后弹（弹往来的方向）

②也可以对字体大小（fontSize）之类的有效（例如从小变大，会反弹几下再变成指定大小）

③对颜色有效：backgroundColor:\{start:"\#0F0",end:"\#F0F"\}

④对透明度有效opacity

⑤注意：需要使用**baseFx.animateProperty(\{**

**easing:easing.bounceOut,**

**node:目标,**

**其他修饰（比如要抵达的状态）,**

**\})**

使用插件baseFx和插件easing

（7）关于各种图像的各种：

如图

![20160331174109000][]

offsetWidth的父为body

## [**圖解offsetLeft、offsetTop、offsetWidth和offsetHeight**][offsetLeft_offsetTop_offsetWidth_offsetHeight] ##

[http://emn178.pixnet.net/blog/post/95297028-%E5%9C%96%E8%A7%A3offsetleft%E3%80%81offsettop%E3%80%81offsetwidth%E5%92%8Coffsetheight][http_emn178.pixnet.net_blog_post_95297028-_E5_9C_96_E8_A7_A3offsetleft_E3_80_81offsettop_E3_80_81offsetwidth_E5_92_8Coffsetheight]

基本来说，最里面是text（文本区）；

文本区有底纹，称为填充区（padding）；

填充区外面有边框（border），边框比填充区大；

边框是元素的最外围了（应该），再外围是body标签范围。

（8）如何在style里设置初始的top、left等

办法是，例如：style=”position:absolute;left:100px”

即，必须先有：**position:absolute**或者是fixed或者是其他（但我不知道这有什么用）

后面的设置才是有用的，否则是无用的。

（9）读取当前的属性

需要插件：dojo/dom-style，

函数需要传递参数：domStyle

使用命令：No\_one\_top = parseInt(domStyle.get(No\_one,  "top"));

①第一个No\_one\_top表示存储这个值的变量；

②parseInt() 函数应该是要将值转换为数字；

③domStyle.get(No\_one,”top”)这个函数，表示读取No\_one这个的top属性；

关于第一个参数的解释：

①假如有：No\_one1 = dom.byId("No\_one"); //对象1在之前

②No\_one为id，加不加引号都能读取这个id（无论有没有①的存在）；

③不加引号，可以变更为No\_one1（有①的情况下），但加了引号的情况下，则不能读取；

④疑问：假如有两个ID，分别为No\_one和No\_two；

然后，变量No\_two= dom.byId("No\_one"); No\_one= dom.byId("No\_two")

那么调用No\_one作为domStyle.get的第一个参数时，调用的是ID为No\_one还是No\_two的？

（10）将两个动画合在一起

需要插件：dojo/fx

如代码：

**var mm=fx.chain(\[动画1,动画2\]);**

①里面需要明确是调用哪个参数（对哪个单位进行操作）；

②可以直接把动画函数写里面；

③mm为自定义变量名，调用时，使用mm.play()即可。

（11）设置初始颜色

需要插件：dojo/dom-style

格式：

**domStyle.set(目标对象,修改的属性,目标值);**

如：

**domStyle.set(container, "backgroundColor", "\#eee");**

效果是：设置id为container，将其背景颜色（backgroundColor）设置为颜色（\#eee）

（12）在动画开始之前

需要使用插件：dojo/aspect；

①假设有动画mm是正常执行的，假设有动画nn是预计要执行的。

②动画调用之前，使用aspect.before(mm, “beforeBegin”, nn);

③效果是，在mm动画调用前，将执行nn动画/函数，此时，相当于mm和nn一起执行（只不过其执行所需的时间可能不同）；

④但并非先执行完nn，才会执行mm

（13）在动画结束之后

需要插件：dojo/on

格式为：

on(对象,  “End”, 回调函数)；

例如：

on(anim, "End", function(n1, n2)\{

var mm =

baseFx.animateProperty(\{

easing:easing.bounceOut,

duration:7000,

properties:\{

backgroundColor:\{start:"\#FFF",end:"\#000"\},

\},

node:container,

\}); //mm定义完

mm.play();

\}); // \{ 是回调函数完，)是on完

（14）分拆动画和执行动作

分拆前：

baseFx.animateProperty(\{

easing:easing.bounceOut,

duration:7000,

properties:\{

backgroundColor:\{start:"\#FFF",end:"\#000"\},

\},

node:container,

\}).play();

分拆后：

var mm =

baseFx.animateProperty(\{

easing:easing.bounceOut,

duration:7000,

properties:\{

backgroundColor:\{start:"\#FFF",end:"\#000"\},

\},

node:container,

\}); //mm定义完

mm.play();

精简后；

baseFx.animateProperty(\{

执行的动作，比如达到的状态等

\}).play();

在分拆后得到：

var mm = baseFx.animateProperty(\{

执行的动作，比如达到的状态等

\});

mm.play();

即可。

理论上，对其他的也可行。实际上，也是可行的。

（15）常见错误：

①在baseFx.animateProperty(\{\})函数的“\}”结束处加分号；

②在properties:()的后面没有加逗号；

③在properties:()内部的属性，例如top:100后面加了px（正常是不能加的）；

④样式表名在不同地方不一样。例如：

背景颜色在css里是background-color，但在dojo里面是backgroundColor

⑤查看有没有多一个括号，少一个逗号、分号之类的错误

（16）dojo/dom插件

①首先需要加载插件：dojo/dom

②其次需要在回调函数中使用：dom作为参数

③功能有：var mm=dom.byId(“某id”)

其效果类似document.getElementById(“某id”)

将其赋值给mm（自定义变量名），于是mm就可以替代这一长串的文字了。

**功能有（假如声明了上面的）：**

①mm.innnerHTML，效果相当于document.getElementById(“某id”).innerHTML

替换文字

如函数：

**function settext(node,text)//效果是给第一个参数的位置，用第二个参数的文字替代**

**\{**

**node = dom.byId(node);**

**node.innerHTML = text;**

**\}**

settext(no1,"aaaaaa");

在id为no1的地方，将文字更改为text

（17）添加新标签

①使用插件：dojo/dom-construct《————之前这里写错了

②参数：domConstruct

③格式为：

domConsrtuct.create (“标签名”, 样式,父标签);

如：

box = dom.byId("box");

no2 = dom.byId("no2");

domConstruct.create("div", //domConstruct.create开头，第一个div为标签

\{ //第二个参数规定插入的各种东西

innerHTML:"six" //插入的文本内容

,box); //第三个参数为插入在哪个父标签下

domConstruct.create("div",

innerHTML:"seven",

className:"seven", //规定了插入的类型为seven，也可以是现有类型

style:\{fontWeight:"bold"\} //规定了style，这里字体宽度为bold

\},box);

domConstruct.create("div",

innerHTML:"Three and a half",

className:"smallerbox2",

style:\{backgroundColor:"\#fff"\}

\},no1,"after"); //在no1标签之后，最好用after，不太明白这个机制，特别是使用了偏移后的坐标时。

（18）常用功能（dojo用，与其他的语法可能不一样）：

<table> 
 <tbody> 
  <tr> 
   <td> <p>功能</p> </td> 
   <td> <p>格式</p> </td> 
  </tr> 
  <tr> 
   <td> <p>字体宽度</p> </td> 
   <td> <p>fontWeight</p> </td> 
  </tr> 
  <tr> 
   <td> <p>字体大小</p> </td> 
   <td> <p>fontSize</p> </td> 
  </tr> 
  <tr> 
   <td> <p>背景颜色</p> </td> 
   <td> <p>backgroundColor</p> </td> 
  </tr> 
  <tr> 
   <td> <p>类名</p> </td> 
   <td> <p>className</p> </td> 
  </tr> 
  <tr> 
   <td> <p>&nbsp;</p> </td> 
   <td> <p>&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

（19）移动标签

标红，搞定grid后回来补充

（20）发送请求

插件：dojo/request

参数：request

语法：

request.get (“链接”, \{ handleAs: “json” \}).then ( 回调函数);

[20160331174109000]: /images/20220727/4aa4eea07e3e42a9a4f1eacd661015ac.png
[offsetLeft_offsetTop_offsetWidth_offsetHeight]: http://emn178.pixnet.net/blog/post/95297028
[http_emn178.pixnet.net_blog_post_95297028-_E5_9C_96_E8_A7_A3offsetleft_E3_80_81offsettop_E3_80_81offsetwidth_E5_92_8Coffsetheight]: http://emn178.pixnet.net/blog/post/95297028-%E5%9C%96%E8%A7%A3offsetleft%E3%80%81offsettop%E3%80%81offsetwidth%E5%92%8Coffsetheight