fis-image
基于FIS的image-webapp解决方案
使用方法：
-
安装nodejs
-
安装php-cgi
-
安装java
-
安装fis-image
npm install -g fis-image -
初始化 server，这个直接取自
fis-plus提供的本地rewrite的phpimg server init -
开启server
img server start -
检出新模块smartphone
svn checkout https://svn.baidu.com/XX/XXX/XX/XX -
进入svn项目模块根目录
-
执行发布
img release -pw
新建一个页面的流程，例如新建名为baidu的页“baidu"
新模块约定所有的页面都放在项目路径下的/page文件夹下，用户访问时，经过router路由解析，自动去require对应路径的controller。
例如访问#!/baidu/word=1&pn=1，会根据fis提供的resource map看看有没有/page/baidu模块，然后发现如果有，就将后面的参数word=1&pn=1解析成object对象{word:1,pn=1}，作为参数传入对应的controller。这种匹配方式叫做自然映射
当然也可以使用老的手工映射的方式，新增一个匹配规则，新增一个对应函数来处理。
当然无论是自然映射或者手工映射都会调用router的doAction，这个方法主要是
1、在第一次进入时load这个页面的模块，这个模块里面包含了页面需要的所有资源，包括html（主要是页面的结构）、css、js、front end template。
2、在第一次进入时初始化控制器
3、调用show和render方法，统计加载速度、页面完成加载以后预加载其他模块
新建文件夹
/page/baidu
将
/page/_example里面的文件拷贝到/page/baidu
修改
/page/baidu/html/box.html文件里面的section元素id为baidu
修改
/page/baidu/js/_view.js文件里面的el属性为#baidu
在
/index.html文件里面给PDCDATA添加baidu: 一个递增的数字
命令行执行
img release -pw
打开
127.0.0.1:8080#!/baidu/name=conan&age=18
即可看到你的页面了
请注意参数被传入到
/page/baidu/js/_view.js的render方法里来了
请注意show方法会自动调用无需自己调用
请注意页面完成之后调用this.trigger('done')，为了统计以及预加载其他页面
请注意添加统计
工程化前端开发
- 自动同步测试机，本地文件修改之后自动upload到测试机
- 自动刷新浏览器，本地文件修改浏览器自动刷新(https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)
- 自动sprite：自动拼接多张小图
- 自动base64：自动将图片转成base64源码
更合理的文件结构-高内聚低耦合
- 旧模块聚集在一个文件夹里，例如24个model都放在一个文件夹
- 新模块现在单个页面需要的资源都放在其所对应的页面文件夹，以main.js作为入口，简单可依赖
- 自动将page/index/html/box.html会自动被嵌入#wrapper元素中
/page/index/
main.js
js/
_View.js
_Collection.js
_Model.js
....js
css/...
html/...
tpl/...
WEBAPP真正实现可无限扩展
- 旧模块新增一个功能或者页面能导致js体积变大，影响加载速度，日积月累越来越慢。
- 新模块现在进入页面仅仅加载当前页面的js，可以选择展示之后进行预加载，扩展到1W个都不会受影响，真正实现无限度扩展的WEBAPP
router文件不用初始化所有页面模块了
- 旧模块把页面初始化全部放在router入口，繁多的代码导致部分模块块被重复初始化而不被发现
- 新模块只要一个页面调用doaction方法即可
数据和模块文件并行请求
- 一个页面一个模块的方式，有童鞋会担心先请求模块再请求数据2步会耗时，这个已经把需要请求数据的model放到common里面了，进入页面时可以并行请求模块和数据。
预加载页面
- 第一个页面展示以后开始预加载其他页面，例如进入首页开始预加载搜索页等（可以自由定制）
前端模板分离开发不用纠结换行和单、双引号问题
- 旧模块的前端模板放在js里面，换行是个容易出错，还要纠结单双引号问题
- 新模块直接将需要的模板使用__inline方法嵌入即可，以上问题都不要考虑
提测上线不用手动执行项目编译啦
- 旧模块提测都需要在本地进行编译，然后删除output。
- 提测时自动进行项目编译和发布
不用忍受本地开发smarty模版变量导致js报错问题了
- 可以通过`config/index.php`自有修改页面里用到的smarty变量
更清晰的结构
- fis-conf.js -- fis配置文件
- server.conf -- rewrite配置文件
- index.html -- 展示页面DOCUMENT
- init -- 应用入口
- lib -- 框架文件夹
- base -- 基类文件夹
- page -- 页面文件夹
- css -- 基础CSS
- util -- 工具模块
页面模块
-
index/
- main.js -> id是header - _abc.js -> id是header/abc.js - _my.js -> 没有id，用于内嵌，【注意】共享作用域
”_“开头的代表仅供模块内部使用
一个新功能仅仅放到自身模块文件夹下，以main.js作为输出口，其他全部添加在exports上面作为输出。
好处是一个功能集中在一个地方开发，达到高内聚要求。
例如'a'模块有2个功能say+eat;使用时require(a).say();require('a').eat()
开发原则
雅虎军规提到将脚本放到底部，这个在纯前端项目里是很大的错误。
纯前端项目里页面展示流程是这样的：进入页面--》加载资源--》执行js--》ajax获取数据--》模板+数据展示。
因为页面展示依赖js的执行，我们这里应该尽快让js及早去执行ajax，把js逻辑放到head，ajax这里因为是异步的不会阻塞页面。 一定程度上，ajax和剩余body加载是同步进行的，所以速度更快。
对于纯前端的spwa(single page web application)，应该每个js+html+tempalte+css都打包在一个模块里面，刷新进入页面时仅仅加载当前页面的js，展示当前页面之后去preload其他页面的js模块，当然都用localStorage缓存起来，至于怎么更新，可以通过文件md5码做更新判断条件，md5文件戳fis自然有提供了。
代码量少的直接放到各个页面里，多的放到base里面公用。不到迫不得已，不要放到base里面，因为放了之后所有页面都要加载。 2个页面公用一个collection实例，则放在其中一个，2个页面打包在一起
大家喜欢用this.$el.find方法，保存DOM结果，这是很聪明的办法。 但是backbone已经提供了this.$方法，供大家可以使用， 且新模块添加了缓存this.$(selector,true)来缓存，且限制所有的view总共可以缓存最近20个DOM选择结果.
single page web application
- 按需加载、模块化
- 首屏直输
- 服务缓存、本地缓存
- 预加载
- 懒加载
- 并行请求