美文网首页
前端自动化构建工具 - FIS-PLUS - 第二节:逐步使用

前端自动化构建工具 - FIS-PLUS - 第二节:逐步使用

作者: 会煮咖啡的猫咪 | 来源:发表于2016-11-28 13:35 被阅读176次

前言

fis-plus smarty

技术点

静态资源 id

如有目录 home/static/a.js

资源描述写法如下 home:static/a.js

目录规范

|---site
|     |---common #通用子系统
|     |      |---config #smarty配置文件
|     |      |---page #模板页面文件目录,也包含用于继承的模板页面
|     |            └── layout.tpl
|     |      |---widget #组件的资源目录,包括模板组件,JS组件,CSS组件等
|     |      |     └── menu   #widget模板组件
|     |      |     |    └── menu.tpl
|     |      |     |    └── menu.js
|     |      |     |    └── menu.css
|     |      |     └── ui   #UI组件
|     |      |          └── dialog  #JS组件
|     |      |          |    └──dialog.js
|     |      |          |    └──dialog.css
|     |      |          └── reset #CSS组件
|     |      |               └── reset.css
|     |      |---static #非组件静态资源目录,包括模板页面引用的静态资源和其他静态资源
|     |      |---plugin #模板插件目录(可选,对于特殊需要的产品线,可以独立维护)
|     |      |---fis-conf.js #fis配置文件
|     |---module1 #module1子系统
|     |      |---test
|     |      |---config
|     |      |---page
|     |            └── index.tpl
|     |      |---widget
|     |      |---static
|     |      |     └── index #index.tpl模板对应的静态资源
|     |      |          └── index.js
|     |      |          └── index.css
|     |      |---fis-conf.js #fis配置文件

文件命名规则

  • 页面 page
tpl :path_to_module/page/页面名.tpl
 js :path_to_module/page/页面名.js
css :path_to_module/page/页面名.css
  • css 组件
#widget目录下的css文件皆为css组件,建议存放在widget/ui目录下
css :path_to_module/widget/ui/组件名/组件名.css
  • js 组件
#widget目录下的js文件皆为js组件,建议存放在widget/ui目录下
js :path_to_module/widget/ui/组件名/组件名.js
  • 模板组件
tpl :path_to_module/widget/组件名/组件名.tpl
 js :path_to_module/widget/组件名/组件名.js
css :path_to_module/widget/组件名/组件名.css
  • smarty 配置文件
conf:path_to_module/config/模块名/
  • 配置文件 (fis-conf.js)
conf:path_to_module/fis-conf.js
  • smarty 插件
插件:path_to_module/plugin/
  • 测试数据 (test)
tpl:path_to_module/page/模块名/页面名.tpl
data:path_to_module/test/page/页面名.json(或php)

Smarty 三种语言能力

  • {%require%}

参数 name , src

{%require name="common:static/lib/jquery.js"%}
  或
{%require src="http://www.baidu.com/cdn/jquery.js"%} {%*外链*%}
  • {%uri%}

参数 name

<script src="{%uri name="common:static/lib/jquery.js"%}" type="text/javascript"></script>
  • widget_inline

内嵌一些widget模板

最新 Smarty 插件

git clone https://github.com/fex-team/fis-plus-smarty-plugin

后进入 plugin 目录 删除.git 目录

参考

http://oak.baidu.com/fis-plus/document.html#%25E9%2585%258D%25E7%25BD%25AE

我的博客

相关文章

网友评论

      本文标题:前端自动化构建工具 - FIS-PLUS - 第二节:逐步使用

      本文链接:https://www.haomeiwen.com/subject/addopttx.html