Dojo 1.9 Build 的误区

按照http://zhenghaoju700.blog.163.com/blog/static/13585951820139271115529/的操作能正常Build成功。

原先找了很多资料啊，dwb...但是都没有成功

下面列举简单的例子：

var profile = (function(){
return {
basePath: "../dojo-release-1.9.1-src",//必须是dojo的源码所在目录
releaseDir: "login",
action: "release",
cssOptimize: "comments",
mini: true,
stripConsole: "all",
localeList: 'zh',
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"
}
],
layers:
{
"dojo/login":
{
include:
[
"dojo/domReady",
"dojo/parser",
"dijit/form/Form",
"dijit/form/Button",
"dijit/form/ValidationTextBox"
],
customBase: true,
boot: true
}
}
};
})();

dos模式下：

进入login.profile.js 文件所在的目录,也就是dojo-release-1.9.1-src，他的目录下是dojo,dijit,dojox,util。

执行

.\util\buildscripts\build --profile ./login.profile.js
执行成功后发现dojo-release-1.9.1-src目录下多了一个login目录。

test.html 是没有build的测试html

<!DOCTYPE html>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<Meta charset="utf-8" />
<title>物联网粮食购销存管理查询系统</title>
<link rel="stylesheet" type="text/css" href="./dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="./Site.css" />
<script type="text/javascript">
var dojoConfig = {
async:true,
parSEOnLoad:false,
isDebug:false,
locale: "zh-cn",
baseUrl: "./dojo/"
};
</script>
<script type="text/javascript" src="./dojo/dojo.js"></script>
</head>
<body class="claro">
<div data-dojo-type="dijit/form/Form" id="login" data-dojo-id="login" encType="multipart/form-data" action="/Account/Login" method="POST">
<script type="dojo/on" data-dojo-event="submit">
if(this.validate())
{
return true;
}else{
return false;
}
</script>
<table border="0" cellspacing="0" style="width:80%;">
<tr>
<td><label for="UserName">用户名称<span class="warning">*</span></label></td>
<td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required:true,trim:true,promptMessage:'请输入登录用户编号',missingMessage:'此项必须输入'" id="UserName" name="UserName" type="text" /></td>
</tr>
<tr>
<td><label for="UserPassword">用户密码<span class="warning">*</span></label></td>
<td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required:true,promptMessage:'请输入登录用户密码',missingMessage:'此项必须输入'" id="UserPassword" name="UserPassword" type="password" /></td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<button type="submit" class="loginButton" data-dojo-type="dijit/form/Button">登录</button>
<button type="reset" class="loginButton" data-dojo-type="dijit/form/Button">重置</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
require(["dojo/parser","dijit/form/Form","dijit/form/Button","dijit/form/ValidationTextBox"],function(parser){
parser.parse();
});
</script>
</body>
</html>

test1.html 使用build后的login.js 使用浏览器的开发工具比较看一下加载文件大大减少

<!DOCTYPE html>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<Meta charset="utf-8" />
<title>物联网粮食购销存管理查询系统</title>
<link rel="stylesheet" type="text/css" href="./dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="./Site.css" />
<script type="text/javascript">
var dojoConfig = {
async:true,
tlmSibingOfDojo:false,
parSEOnLoad:true,
baseUrl: "./dojo/"
};
</script>
<script type="text/javascript" src="./dojo/login.js"></script>
</head>
<body class="claro">
<div data-dojo-type="dijit/form/Form" id="login" data-dojo-id="login" encType="multipart/form-data" action="/Account/Login" method="POST">
<script type="dojo/on" data-dojo-event="submit">
if(this.validate())
{
return true;
}else{
return false;
}
</script>
<table border="0" cellspacing="0" style="width:80%;">
<tr>
<td><label for="UserName">用户名称<span class="warning">*</span></label></td>
<td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required:true,missingMessage:'此项必须输入'" id="UserPassword" name="UserPassword" type="password" /></td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<button type="submit" class="loginButton" data-dojo-type="dijit/form/Button">登录</button>
<button type="reset" class="loginButton" data-dojo-type="dijit/form/Button">重置</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
require(["dojo/parser"],function(parser){
});
</script>
</body>
</html>

误区：

1、脑海中的印象就是build后的文件代替所有的dojo..require...的文件，但实际不是这样。你将login里面的dojo、dijit删除试试，删除后不好用。生成的login的文件代替已有的dojo require来生成需求的脚本文件。不知道对不对，看源码应该是这个意思。

要是这样的话，这个功能与Asp.net MVC ScriptBundle类似了。

这是曾经的build失败的方法

bundles.Add(new ScriptBundle("~/bundles/login").Include(
"~/Scripts/dijit/BackgroundIframe.js",
"~/Scripts/dijit/Destroyable.js",
"~/Scripts/dijit/Tooltip.js",
"~/Scripts/dijit/Viewport.js",
"~/Scripts/dijit/_AttachMixin.js",
"~/Scripts/dijit/_CssStateMixin.js",
"~/Scripts/dijit/_FocusMixin.js",
"~/Scripts/dijit/_OnDijitClickMixin.js",
"~/Scripts/dijit/_TemplatedMixin.js",
"~/Scripts/dijit/_Widget.js",
"~/Scripts/dijit/_WidgetBase.js",
"~/Scripts/dijit/_base/manager.js",
"~/Scripts/dijit/a11y.js",
"~/Scripts/dijit/a11yclick.js",
"~/Scripts/dijit/focus.js",
"~/Scripts/dijit/form/Button.js",
"~/Scripts/dijit/form/Form.js",
"~/Scripts/dijit/form/TextBox.js",
"~/Scripts/dijit/form/ValidationTextBox.js",
"~/Scripts/dijit/form/_ButtonMixin.js",
"~/Scripts/dijit/form/_FormMixin.js",
"~/Scripts/dijit/form/_FormValueMixin.js",
"~/Scripts/dijit/form/_FormValueWidget.js",
"~/Scripts/dijit/form/_FormWidget.js",
"~/Scripts/dijit/form/_FormWidgetMixin.js",
"~/Scripts/dijit/form/_TextBoxMixin.js",
"~/Scripts/dijit/form/nls/validate.js",
"~/Scripts/dijit/form/nls/zh/validate.js",
"~/Scripts/dijit/hccss.js",
"~/Scripts/dijit/layout/_ContentPaneResizeMixin.js",
"~/Scripts/dijit/layout/utils.js",
"~/Scripts/dijit/main.js",
"~/Scripts/dijit/place.js",
"~/Scripts/dijit/registry.js",
"~/Scripts/dojo/Stateful.js",
"~/Scripts/dojo/_base/url.js",
"~/Scripts/dojo/cache.js",
"~/Scripts/dojo/date/stamp.js",
"~/Scripts/dojo/dojo.js",
"~/Scripts/dojo/hccss.js",
"~/Scripts/dojo/parser.js",
"~/Scripts/dojo/promise/all.js",
"~/Scripts/dojo/string.js",
"~/Scripts/dojo/touch.js",
"~/Scripts/dojo/uacss.js",
"~/Scripts/dojo/window.js"
)
);

但是加载的结果还是有25个http连接，比不用这个功能是好多了（原先45个连接）。这个dojo build性能应该好很多吧，没时间测试！

Dojo 1.9 Build 的误区

猜你在找的Dojo相关文章