当前位置 : 主页 > 网页制作 > Dojo >

Dojo 1.9 Build 的误区

来源:互联网 收集:自由互联 发布时间:2021-06-15
按照http://zhenghaoju700.blog.163.com/blog/static/13585951820139271115529/的操作能正常Build成功。 原先找了很多资料啊,dwb...但是都没有成功 下面列举简单的例子: login.profile.js var profile = (function()

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

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

下面列举简单的例子:

login.profile.js

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, trim: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,
    isDebug:false,
    locale: "zh-cn",
    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, 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, trim: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"],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性能应该好很多吧,没时间测试!

网友评论