项目开始前的思考：
- 采用动静结合的方式，缓解服务器压力（然而也没什么压力）
- 组件化、模块化，采用CMD规范（fis3-smarty不是那么兼容amd，好吧我太懒没有深入研究这块，最后用了百度提供的mod.js，也挺好用）
- 数据和结构分离（smarty、art-template）
项目依赖的工具与技术：
- fis3
- fis3-smarty
- mod.js
- art-template
- 插件：es6-babel、node-sass、autoprefixer 等。
项目的目录结构：
components目录：项目所用到的js组件（js库、功能模块等）
page目录：页面模板目录
plugin目录：本地模拟数据预览用到的模板解析插件（可忽略）
static目录：存放图片，公共样式，公共脚本
test目录：本地模拟数据
widget目录：模板组件目录
fis-conf.js主要配置
fis.hook('commonjs',{
baseUrl: 'components/',
extList: ['.js', '.es']
});
fis.match("components/**", {
isMod: true,
useSameNameRequire: true
});
fis.match("widget/**", {
isMod: false,
useSameNameRequire: true
});
/ 启用 es6-babel 插件，解析 .es 后缀为 .js
fis.match('**.es', {
rExt: '.js',
parser: fis.plugin('es6-babel')
});
// 启用node-sass 插件 ， 解析 .scss 后缀为 .css
fis.match('*.scss', {
rExt: '.css',
preprocessor : fis.plugin("autoprefixer",{
"browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
"cascade": true
}),
parser: fis.plugin('node-sass', {
// include_paths: [
// './src/scss',
// './components/compass-mixins'
// ]
})
});
// widget目录下存放的html文件是arttemplate模板文件，不需要发布
fis.match('widget/{*,**/*}.html', {
release: false
});
需要动态加载的数据的组件使用前端模板的优点是：
1.提高可维护性 2.代码结构更加清晰 3.数据更容易控制 4.降低耦合性
（此处为什么要用html作为模板后缀名，主要是利用fis对html 文件编译处理会重新定位资源路径，目前尝试了一些配置去改变模板文件的后缀，但是还没有找到可行的方法； 模板文件会在编译阶段直接引入到js文件，依赖fis在js文件的内容嵌入功能：__inline(‘xxx.html’)）
存在的问题：
最主要的问题是缓存，由于页面都是需要后端生成，静态的页面会有缓存