widget组件 - widget文档 - 《JDFX - 京东前端自动化构建工具》

在一个比较大型的项目中，一定会拥有很多页面，页面之间会有很多相似的模块，我们就可以把这些功能相似或者样式相似的模块抽离出来，形成一个widget。在需要的html页面中引入即可，引用语法如下：

{%widget name="test"%}

在jdf工程中，创建一个widget使用jdf widget --create xxx命令，它会默认存在于当前项目的widget目录中，创建过程如下所示：

if you want to create it, type 'y', else 'n'
vm: y
js: y
scss: y
json: y

一个标准的widget模块会默认包含上面四种文件，并且文件名默认和当前widget同名。如果只想引用vm文件，使用语法：

{%widget name="test" type="vm"%}

只想引用css文件，使用语法：

{%widget name="test" type="css"%}

同时只引用vm和css文件，使用语法：

{%widget name="test" type="vm,css"%}

vm文件

vm是widget的模版文件，可以把其扩展名自行改成tpl，默认都支持velocity，smarty等模版引擎，当然，你也可以直接在其中编写html代码。

jdf默认创建的是scss文件，你可以使用less语法来编写css代码。

在js文件中编写与此widget相关的js代码逻辑，支持使用ES6，jdf会自动编译成ES5。

widget的数据文件，直接书写json数据结构，在vm模版中使用类似${name}或者<%=name%>语法即可引用，具体需要看你使用的是哪种模版语法。