fis-tizi
基于FIS的纯前端模块化解决方案tizi
目录
模块化开发
- 不仅仅是脚本模块化，tizi带给你模版、脚本、样式的组件化方案。
- 自动加载模块化依赖，无需手动引入静态资源。
- 与Node.js风格一致的模块化开发体验，告别
define。
自动性能优化
tizi可以自动压缩、合并页面引用到的所有资源，配置灵活，一个命令完成性能优化，轻松实践雅虎14条优化规则。并且这一切优化无需任何后端框架或服务支持。
前端语言支持
- 直接编写less文件，无需额外编译工具支持。
- 可以直接在脚本中通过
var template = __inline('path/to/template.tmpl');引用经过了预编译的underscore模版，无需异步请求和解析。 - 更多的前端语言支持可以参考辅助开发
本地调试环境
- 通过
tizi server start就能开启本地调试服务器。 - 通过
fis release --watch --live实现监听文件修改，自动刷新页面等功能。更多内容可以参考辅助开发。
如何使用
安装
-
安装 nodejs&npm
-
安装tizi
npm install fis-tizi -gtizi -v
快速上手
快速上手请参考前端模块化
模块化加载
如何使用模块化加载可以参考fis-tizi-demo，大致需要以下几个步骤
- 在需要模块化资源管理的页面，如index.html中引用Mod，注意Mod需放在lib文件夹内，因为这是模块化加载库，不能被模块化。 示例
- modules目录下添加页面脚本，如
main.js，在页面中则可以通过require('main')加载静态资源。 示例 - 需要引用其他模块，以jquery.js为例，只要在modules目录中添加代码，在main.js中就可以通过
var $ = require('jquery')加载，在通过tizi release发布后，页面就会自动加载jquery.js与main.js。
目录规范
tizi自带了一个非常简单的目录规范
- 所有组件化的脚本、样式、图片均放在modules目录中，可以按照组件划分目录，非模块化的脚本放在lib目录中。
- page目录下的页面文件会发布到根目录，静态资源会发布到static目录。
任何 目录规范、部署规范、编译规范 都是可配置的（配置代码）。
如果希望调整目录规范，建议将配置代码中roadmap.path的部分整体复制到项目的fis-conf.js中再进行调整，避免配置不符合预期的问题。
内置的规范包括：
modules目录下的js、css、less文件都是模块化文件，脚本会自动包装define，无需手动添加。使用require.async或者require加载模块的时候id与文件的对应规则是这样的：
| 文件 | 引用id | 举个例子 |
| /modules/main.js | main | var main = require('main'); |
| /modules/jquery/jquery.js | jquery | var $ = require('jquery'); |
| /modules/jquery/jquery.scroll.js | jquery/jquery.scroll | require('jquery/jquery.scroll'); |
lib目录下的文件不被认为是模块化的，请直接在页面上使用script或link标签引用。
配置
参考fis配置