| 1 | # widget说明
|
| 2 |
|
| 3 | ## 什么是widget
|
| 4 |
|
| 5 | 在一个比较大型的项目中，一定会拥有很多页面，页面之间会有很多相似的模块，我们就可以把这些功能相似或者样式相似的模块抽离出来，形成一个widget。在需要的html页面中引入即可，引用语法如下：
|
| 6 |
|
| 7 | ```
|
| 8 | {%widget name="test"%}
|
| 9 | ```
|
| 10 |
|
| 11 | 在jdf工程中，创建一个widget使用`jdf widget --create xxx`命令，它会默认存在于当前项目的`widget`目录中，创建过程如下所示：
|
| 12 |
|
| 13 | ```
|
| 14 | if you want to create it, type 'y', else 'n'
|
| 15 | vm: y
|
| 16 | js: y
|
| 17 | scss: y
|
| 18 | json: y
|
| 19 | ```
|
| 20 |
|
| 21 | 一个标准的`widget`模块会默认包含上面四种文件，并且文件名默认和当前`widget`同名。如果只想引用vm文件，使用语法：
|
| 22 |
|
| 23 | ```
|
| 24 | {%widget name="test" type="vm"%}
|
| 25 | ```
|
| 26 |
|
| 27 | 只想引用css文件，使用语法：
|
| 28 |
|
| 29 | ```
|
| 30 | {%widget name="test" type="css"%}
|
| 31 | ```
|
| 32 |
|
| 33 | 同时只引用`vm`和`css`文件，使用语法：
|
| 34 |
|
| 35 | ```
|
| 36 | {%widget name="test" type="vm,css"%}
|
| 37 | ```
|
| 38 |
|
| 39 | ## vm文件
|
| 40 |
|
| 41 | `vm`是widget的模版文件，可以把其扩展名自行改成`tpl`，默认都支持`velocity`，`smarty`等模版引擎，当然，你也可以直接在其中编写html代码。
|
| 42 |
|
| 43 | ## css文件
|
| 44 |
|
| 45 | jdf默认创建的是scss文件，你可以使用less语法来编写css代码。
|
| 46 |
|
| 47 | ## js文件
|
| 48 |
|
| 49 | 在js文件中编写与此widget相关的js代码逻辑，支持使用ES6，jdf会自动编译成ES5。
|
| 50 |
|
| 51 | ## json文件
|
| 52 |
|
| 53 | widget的数据文件，直接书写`json`数据结构，在`vm`模版中使用类似`${name}`或者`<%=name%>`语法即可引用，具体需要看你使用的是哪种模版语法。
|
| 54 |
|
| 55 | ## 相关命令
|
| 56 |
|
| 57 | * `widget --preview [xxx]` - 预览所有项目中所有widget或部分widget
|
| 58 | * `widget --install xxx` - 安装一个widget模块到当前工程
|
| 59 | * `widget --publish xxx` - 发布一个widget模块到服务端
|
| 60 | * `widget --create xxx` - 在本地项目新建一个widget,会生成widget文件夹和vm,css,js,json文件
|
| 61 | * `widget --list` - 取得服务端所有widget列表
|
| 62 |
|