fis-image

基于FIS的image-webapp解决方案

使用方法：

• 安装nodejs

• 安装php-cgi

• 安装java

• 安装fis-image

    npm install -g fis-image

• 初始化 server，这个直接取自fis-plus提供的本地rewrite的php

    img 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

• 按需加载、模块化
• 首屏直输
• 服务缓存、本地缓存
• 预加载
• 懒加载
• 并行请求