widgetOutputName标签

介绍

widgetOutputName可以将页面中引用的widget的js/css内容合并，并在js文件夹或css文件夹中生成指定名称(myOutputName)的js/css文件，这样页面针对widget就只会引入一个资源文件。在服务器没有部署combo服务，或者前端需要频繁改动css文件时特别有用。

示例

  1.  page1.html                               page1.html(jdf output --debug)
  2. +-------------------------------------+  +----------------------------------+
  3. | head                                |  | head                             |
  4. | link.href=jdf/unit/2.0.0/base.css   |  | link.href=jdf/unit/2.0.0/base.css|
  5. | /head                               |  | link.href=../css/myPureSource.css|
  6. | body                                |  | /head                            |
  7. | {%widget="pureWidget1"%}            |  | body                             |
  8. | {%widget="pureWidget2"%}            +->|                                  |
  9. | {%widget="pureWidget3"%}            |  | script.src=../js/myPureSource.js |
  10. | {%widgetOutputName="myPureSource" %}|  | /body                            |
  11. | /body                               |  |                                  |
  12. |                                     |  |                                  |
  13. |                                     |  |                                  |
  14. +-------------------------------------+  +----------------------------------+

如果给widgetOutputName指定type属性(css或js)，那么只会将对应的type合并成myPureSource文件并引入。比如：

  1. {%widgetOutputName="myPureSource" type="css" %}

那么生成的页面就只会引用myPureSource.css，而不会引用myPureSource.js，js依旧引用widget中的js。

如何在多个页面引用同一个widgetOutputName？

jdf会将各个页面设置的widgetOutputName都生成至./css目录中，因此，如果两个页面的widget不一致，而widgetOutputName同名的话，两个页面就会生成两个不同内容的css文件，就会导致后面生成的文件覆盖前面生成的文件。

从正常开发角度来说，如果两个页面引用了同名css，那么两个页面访问的css内容是一致的。如果想为每个页面单独生成一份独立的文件，请保证页面间widgetOutputName名不一致。如果想为页面引用同一个widgetOutputName，jdf也提供了一个配置选项。

jdf提供在config.json文件中配置一个全局widgetOutputName的能力。所有页面均可以引用这个全局widgetOutputName。

config.json

  1. {
  2.     "projectPath": "myProject",
  3.     "widgetOutputName": "globalPureSource",
  4.     "widgetOutputMode": 2, // 1: all widgets|2: white list|3: black list
  5.     "widgetWhiteList": ["pureWidget1", "pureWidget3"],
  6.     "widgetBlackList": ["pureWidget1", "pureWidget3"], 
  7. }

myPage.html

  1. {%widgetOutputName="globalPureSource" type="js,css" %}

我们在config.json中定义了widgetOutputName字段，同时提供三个控制字段：widgetOutputMode, widgetWhiteList, widgetBlackList来控制全局widgetOutputName的文件生成。

widgetOutputMode这个属性值可选1|2|3，1代表合并所有widget，2代表合并widgetWhiteList，3代表合并排除widgetBlackList的其他widget。