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

星期五

明天不上班

 
 
 

日志

 
 
关于我

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

网易考拉推荐

Dojo Build总结  

2013-10-27 14:37:03|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
最近由于公司项目,开始研究dojo build, 之前的所有项目js引入,出于简单的目的,都是进行all-in-one压缩后引入的,虽然说是减少了js的http请求数量,但是毕竟引入了一些不必要的js模块功能,同时也增加了js文件的大小。
所以针对不同页面的需求引入不同的js(all in one)是十分必要的。

Dojo build可以实现上述的要求。
如何使用dojo build?
1.下载dojo的dojo-release-1.9.1-src包, 其中dojo-release-1.9.1-src/util/buildscripts的目录包含有build.sh的工具。
注意还有一个profiles目录,里面有很多dojo默认的一些标准profile,你可以自己看看,也可以尝试去使用它们进行build,具体使用方法可以参考buildscripts目录的README。

2.书写自己的profile文件。
我不建议使用dojo默认的profile文件,进行修改,因为里面有很多默认的配置没有体现出来,我建议是书写自己的profile,具体如何书写dojo document提供一份较为详细的文档:http://dojotoolkit.org/documentation/tutorials/1.9/build/

3.我们先看一个原生的dojo gridx例子:(使用firebug, check js的数量)
<!DOCTYPE html>
<html>
<head>
<script src="./js/dojo-release-1.9.3/dojo/dojo.js" data-dojo-config="async:true"></script>

<link rel="stylesheet" href="./js/dojo-release-1.9.3/dojo/../dijit/themes/claro/claro.css">
<style type="text/css">@import "./js/dojo-release-1.9.3/dojo/../dojo/resources/dojo.css";
@import "./js/dojo-release-1.9.3/dojo/../dijit/themes/claro/claro.css";
@import "./js/dojo-release-1.9.3/dojo/../dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "./js/dojo-release-1.9.3/dojo/../dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";

/*Grid needs an explicit height by default*/
#gridDiv {
height: 20em;
}
</style>
<script>

require(["dojo/json","dojo/data/ObjectStore", "dojox/grid/enhanced/plugins/Pagination",
"dojox/grid/enhanced/plugins/Filter", "dojox/grid/EnhancedGrid",
"dojo/store/JsonRest", "dojo/domReady!"], function(JSON, ObjectStore, Pagination, Filter, EnhancedGrid, JsonRest){

var restStore = new dojo.store.JsonRest({target:"http://9.111.244.178:8080/...../..../.../getData.action"});

var dataStore = dojo.data.ObjectStore({objectStore: restStore});

var setupFilter = function(commands, request){
// the commands object here is the same as the POSTed commands object for stateful server, see below.
if(commands.filter && commands.enable){
	        // some filter is defined and valid. You can modify the request object here.
                     request.query = {"filter": JSON.stringify(commands.filter)};
}else{
// no filter is valid.
}
};

var grid = new dojox.grid.EnhancedGrid({

store: dataStore,
structure: [
{name:"Value", field:"value", width: "auto"},
{name:"RequestID", field:"requestId", width: "auto"},
{name:"ID", field:"id", width: "auto"},
{name:"Name", field:"name", width: "auto"}
],
columnReordering: true,
clientSort: true,
rowSelector: '20px',
rowsPerPage: 5,
autoHeight: true,
plugins: {
pagination: {
pageSizes: ["5", "10", "15", "All"], // page length menu options
description: true, // display the current position
sizeSwitch: true, // display the page length menu
pageStepper: true, // display the page navigation choices
gotoButton: true, // go to page button
position: "bottom" // position of the pagination bar
},
filter: {
// Show the closeFilterbarButton at the filter bar
closeFilterbarButton: true,
// Set the maximum rule count to 5
ruleCount: 5,
// Set the name of the items
itemsName: "items",
isServerSide: true,
setupFilterQuery: setupFilter
}
}
}, "gridDiv");
grid.startup();
});
</script>
</head>
<body class="claro">
<div id="gridDiv"></div>
</body>
</html>
Dojo Build总结 - 星期五 - 星期五
 4.上面例子中引入了大量的dojo js文件,这时候就需要对所需要的js文件进行压缩合并。
写profile文件mygrid.profile.js(具体写法参考http://dojotoolkit.org/documentation/tutorials/1.9/build/
include上面require到的js。

var profile = (function(){
return {
basePath: "../dojo-release-1.9.1-src",
releaseDir: "app",
action: "release",
cssOptimize: "comments",
mini: true,
stripConsole: "all",
localeList: 'en-us',
optimize: 'shrinksafe',
layerOptimize: 'shrinksafe',
selectorEngine: "acme",

staticHasFeatures: {
'dojo-trace-api': 0,
'dojo-log-api': 0,
'dojo-publish-privates': 0,
'dojo-sync-loader': 0,
'dojo-xhr-factory': 0,
'dojo-test-sniff': 0
},

packages:[{
name: "dojo",
location: "dojo"
},{
name: "dijit",
location: "dijit"
},{
name: "dojox",
location: "dojox"
}],

layers: {
"dojo/myGrid": {
include: [ "dojo/json","dojo/data/ObjectStore",

"dojox/grid/enhanced/plugins/Pagination",

"dojox/grid/enhanced/plugins/Filter",

"dojox/grid/EnhancedGrid",

"dojo/store/JsonRest",

"dojo/domReady" ],
customBase: true,
boot: true
}
}
};
})();

使用该profile文件进行build,

./util/buildscripts/build.sh --profile ./mygrid.profile.js

然后将build成功的myGrid.js和nls文件copy你的项目中,修改页面代码,在进行测试(firbug check js引入数量)

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var dojoConfig = {
async: true,
tlmSibingOfDojo: false,
parseOnLoad: true,
isDebug: false,
locale: 'en-us',
baseUrl: "js/dojo/dojo/"
};
</script>
<script src="http://zhenghaoju700.blog.163.com/./js/dojo-release-1.9.3/dojo/myGrid.js"></script>
<link rel="stylesheet" href="http://zhenghaoju700.blog.163.com/./js/dojo-release-1.9.3/dojo/../dijit/themes/claro/claro.css">
<style type="text/css">@import "./js/dojo-release-1.9.3/dojo/../dojo/resources/dojo.css";
@import "./js/dojo-release-1.9.3/dojo/../dijit/themes/claro/claro.css";
@import "./js/dojo-release-1.9.3/dojo/../dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "./js/dojo-release-1.9.3/dojo/../dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";

/*Grid needs an explicit height by default*/
#gridDiv {
height: 20em;
}
</style>
<script>

require(["dojo/json","dojo/data/ObjectStore", "dojox/grid/enhanced/plugins/Pagination",

"dojox/grid/enhanced/plugins/Filter", "dojox/grid/EnhancedGrid",

"dojo/store/JsonRest", "dojo/domReady!"], function(JSON, ObjectStore, Pagination, Filter, EnhancedGrid, JsonRest){

var restStore = new dojo.store.JsonRest({target:"http://9.111.244.79:8080/platform/pcm/kits/getData.action"});
var dataStore = dojo.data.ObjectStore({objectStore: restStore});

var setupFilter = function(commands, request){
// the commands object here is the same as the POSTed commands object for stateful server, see below.
if(commands.filter && commands.enable){

// some filter is defined and valid. You can modify the request object here.

request.query = {"filter": JSON.stringify(commands.filter)};
}else{
// no filter is valid.
}
};

var grid = new dojox.grid.EnhancedGrid({

store: dataStore,
structure: [
{name:"imagename", field:"imagename", width: "auto"},
{name:"kitdir", field:"kitdir", width: "auto"},
{name:"kitname", field:"kitname", width: "auto"},
{name:"Name", field:"name", width: "auto"}
],
columnReordering: true,
clientSort: true,
rowSelector: '20px',
rowsPerPage: 5,
autoHeight: true,
plugins: {
pagination: {
pageSizes: ["5", "10", "15","All"], // page length menu options
description: true, // display the current position
sizeSwitch: true, // display the page length menu
pageStepper: true, // display the page navigation choices
gotoButton: true, // go to page button
position: "bottom" // position of the pagination bar
},
filter: {
// Show the closeFilterbarButton at the filter bar
closeFilterbarButton: true,
// Set the maximum rule count to 5
ruleCount: 5,
// Set the name of the items
itemsName: "items",
isServerSide: true,
setupFilterQuery: setupFilter
}
}
}, "gridDiv");
grid.startup();
});
</script>
</head>
<body class="claro">
<div id="gridDiv"></div>
</body>
</html>

Dojo Build总结 - 星期五 - 星期五

实际上,只引入了两个js(一个myGrid.js和一个i18n)
Dojo Build总结 - 星期五 - 星期五
 
5.有时候,你会发现nls里面i18n的js引入路径错误,那是因为你的dojoConfig的baseUrl不对,需要进行设置

<script type="text/javascript">
var dojoConfig = {
async: true,
tlmSibingOfDojo: false,
parseOnLoad: true,
isDebug: false,
locale: 'en-us',
baseUrl: "js/dojo/dojo/"
};
</script>

关于dojoConfig配置  http://dojotoolkit.org/reference-guide/1.7/dojo/_base/config.html
  评论这张
 
阅读(2749)| 评论(0)
推荐

历史上的今天

评论

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

页脚

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