前端自動化構建工具 - FIS-PLUS - 第二節:逐步使用

前言

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

我的博客

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容