注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

dojo work with JQuery and YUI2.9  

2013-11-15 08:25:16|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
如何使用让dojo与JQuery和YUI2.9共同使用呢?这里当然指的是AMD方式。
让我们开始吧!
step1
下载dojo源码包,在源码包加入以下jquery 和 yui 目录,like
[root@hjzheng dojo]# tree -L 1 dojo-release-1.9.1-src

dojo-release-1.9.1-src
├── dijit
├── dojo
├── dojox
├── jquery
├── util
└── yui

step2 
将你所需要的Jquery的源码和yui的源码放入相应的目录
dojo-release-1.9.1-src 
... ...
├── jquery
│   ├── jquery-1.10.2.min.js
├── util
└── yui
    ├── animation
    ├── storage
    └── yahoo-dom-event.js

step3
因为JQuery最新的版本已经支持AMD加载,我们不需要修改源码,仅仅做简单的配置即可,加入配置

<script type="text/javascript">
        dojoConfig = {
            async: true,
            tlmSibingOfDojo: false,
            parseOnLoad: true,
            //isDebug: false,
            locale: 'en-us',
            baseUrl: "./dojo-release-1.9.1-src",
            packages: [
                    {name: "dojo", location: "./dojo"},
                    {name: "dijit", location: "./dijit"},
                    {name: "dojox", location: "./dojox"},
                    {name: "jquery", location: "./jquery", main: "jquery-1.10.2.min"},
                    {name: "yui", location:"./yui", main: "yahoo-dom-event"}
            ]
        };
</script>

配合package路径,以及加载的main js,以及module name,顺便也将yui的配置配好。

在require的时候需要注意加上 define.amd.jQuery = true;

但是YUI2.9就不同了,YUI2.9还不支持AMD,所以就需要对源码进行修改,首先是main js --》 yahoo-dom-event.js
其实只要在源码开头和结尾加上一下代码就行

define([], function(){
   //----------------------
   yahoo-dom-event.js源码不动
   //----------------------
   return YAHOO;
});

其他js文件的修改,例如animation目录的animation.js

define(["yui"], function(YAHOO){
  //--------------------
  animation.js 源码
  //--------------------
  return YAHOO.util.Anim;
});

这时候所需要的source code配置好了,也修改好了,开始使用吧!

<script type="text/javascript">
dojoConfig = {
async: true,
tlmSibingOfDojo: false,
parseOnLoad: true,
//isDebug: false,
locale: 'en-us',
baseUrl: "./dojo-release-1.9.1-src",

packages: [
{name: "dojo", location: "./dojo"},
{name: "dijit", location: "./dijit"},
{name: "dojox", location: "./dojox"},
{name: "jquery", location: "./jquery", main: "jquery-1.10.2.min"},
{name: "yui", location:"./yui", main: "yahoo-dom-event"}
]
};
</script>
<script src="http://zhenghaoju700.blog.163.com/./dojo-release-1.9.1-src/dojo/dojo.js"></script>

<script>
define.amd.jQuery = true;
require(["yui","yui/storage/storage","yui/animation/animation","jquery", "dijit/form/Button", "dojo/dom", "dojo/domReady!"],
function(YAHOO, Storage, Animation, $, Button, dom){
//do something with dojo jquery and yui2.9
});
</script>

看一个完整的例子:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://zhenghaoju700.blog.163.com/./dojo-release-1.9.1-src/dijit/themes/claro/claro.css">
<style type="text/css">
#header {
background:#ccc;
overflow:hidden; /* so we can animate to zero width */
width:600px;
}
</style>

<script type="text/javascript">
dojoConfig = {
async: true,
tlmSibingOfDojo: false,
parseOnLoad: true,
//isDebug: false,
locale: 'en-us',
baseUrl: "./dojo-release-1.9.1-src",
packages: [
{name: "dojo", location: "./dojo"},
{name: "dijit", location: "./dijit"},
{name: "dojox", location: "./dojox"},
{name: "jquery", location: "./jquery", main: "jquery-1.10.2.min"},
{name: "yui", location:"./yui", main: "yahoo-dom-event"}
]
};
</script>
<script src="http://zhenghaoju700.blog.163.com/./dojo-release-1.9.1-src/dojo/dojo.js"></script>

<script>
define.amd.jQuery = true;
require(["yui","yui/storage/storage","yui/animation/animation","jquery", "dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(YAHOO,Storage,Animation,$, Button, dom){
var attributes1 = {
width: { to: 400 }
};
var an1 = new Animation('header', attributes1);

var attributes2 = {
width: { to: 800 }
};

var an2 = new Animation('header', attributes2);

// Create a button programmatically:
var myButton = new Button({
label: "Click me!",
onClick: function(){
// Do something:
$("#result").css("display", "block").html("Thank you!").fadeOut( "slow" );
YAHOO.util.Dom.get("header").innerHTML = "dojo work with jquery and YUI2.9";
}
}, "button");

var Button1 = new Button({
label: "see changed",
onClick: function() {
an1.animate();
}
}, "button1");

var Button2 = new Button({
label: "see changed too!",
onClick: function() {
an2.animate();
}
}, "button2");

});

</script>
</head>
<body class="claro">
<h2 id="header">dojo work with jquery</h2>
<div id="button1"></div>
<div id="button2"></div>
<div id="button"></div>
<h1 id="result"></h1>
</body>
</html>

在YSlow中查看加载的JS
dojo work with JQuery and YUI2.9 - 星期五 - 星期五
 

参考资料:


  评论这张
 
阅读(419)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017