fisp项目练习

(这个自动保存。。竟然只是临时保存！😢)

简述

fisp基本用法和Smarty的基础语法就不赘述了，可以看fisp官方文档和慕课网上的教程，这里主要讲我自己学习构建的项目。
开始时是想学前辈构建一个google主页，但是我又想尝试一下对php传输到模版到数据进行处理，所以就选了github的profile页面。

showProgram.png

(哈哈哈虽然除了中间那部分基本都是图片，但是主要还是体验。)

项目构建

fisp项目通常分为common和其他模块，common模块中通常存放可复用的文件/组件，fisp的其他模块也有着严格的目录规范，通常如下：

moduleList.png

page中放页面模版
static中存放不需要组件化的公共库
test中存放数据与page中的模版相对应
widget 中存放模板组件，JS组件，CSS组件等。
server.conf 这是一个很有用的文件，它里面可以配置url转发，可以方便在本地模拟ajax请求等。（这个我暂时不太懂怎么做）
另外fis-config.js文件在每个模块中都有，需要注意的是需要在fis-config.js中设置namespace用来区分是哪个模块。

fis.config.set('namespace','name');

接下来就是我的项目构建，我构建了两个模块common和home，将fis-config配置好后，将所需的静态文件建立好放到相应的目录。（我觉得这是一个很重要的过程，你要想好你这个页面要分成多少个部分？构建多少个组件？哪些可以复用放到common中？这都是要提前想好的。）
最后构建好是这样的：

treeList.png

细节展示

建立整个项目都有用到的模版layout.tpl，放在common—>page中，｛%block name=“static_source”%}用于加载页面中需要的静态文件，｛％block name=“content”％｝用于加载页面的主体内容。

<!doctype html>
{%html framework="common:static/mod.js" class="expanded"%}
    {%head%}
        <meta charset="utf-8"/>
        <title>{%$title%}</title>
        {%block name="static_source"%}{%/block%}
    {%/head%}
    {%body%}
        {%block name="content"%}{%/block%}
    {%/body%}
{%/html%}

然后在index.tpl中引用。

{%extends file="common/page/layout.tpl"%}
{%block name="static_source"%}
    {%require name="home:static/main/main.css"%}
{%/block%}
{%block name="content"%}
    <div id="header">
        {%widget name="common:widget/header/header.tpl"%}
    </div>
    <div id="container">
        <div class="left_profile">
            {%widget name="home:widget/photo/photo.tpl" data=$name%}
            {%widget name="home:widget/left_foot/left_foot.tpl"%}
        </div>
        <div class="right_profile">
            {%widget name="home:widget/right_header/header.tpl"%}
            {%widget name="home:widget/right_program/program.tpl" data=$docs%}
            {%widget name="home:widget/right_footer/footer.tpl"%}
        </div>
        <div class="clear"></div>
    </div>
    <footer>
        {%widget name="common:widget/footer/footer.tpl"%}
    </footer>
{%/block%}

可以看到我们用require请求静态文件，用widget调用组件。
(我为了多练习一下将页面分成了好几个组件，有点啰嗦，所以组件是如何实现的就不展示了。)
别忘了php中的模拟数据，因为我没学过php，所以就模仿了pc-demo。

<?php
    $github = 'https://github.com/';
    $fis_data = array(
        'title' => 'Smarty练习',
        'name' => 'zhiliang',
        'docs' => array(
            array(
                'project' => 'ife',
                'detail' => 'Baidu Institute of Fornt - End Technology'
            ),
            array(
                'project' => 'Lenovo-sale',
                'detail' => 'Lenovo sale for the course of software engineering'
            ),
            array(
                'project' => 'liuzhenkun.github.io',
                'detail' => ''
            ),
            array(
                'project' => 'lshPrograms',
                'detail' => ''
            )
        )
    );

这里有个问题，为什么我在模版中只能获取到fis-data中的数据呢？这个问题我也查了好久没能找到个明确的说法。
最后，把所有部分都完成，启动项目。

//如果没初始化别忘了 fisp init
fisp release -r home
fisp release -r common
fisp server start

总结

自己构建这样一个项目，我感觉主要就是了解基本应用，另外对组件化的概念有了一定对认识，另外学会对于后台传过来的数据进行调用处理（以前用Jade也了解），其实在晚上海鹏codeview的时候看实际代码还是有点晕的，离实际开发还是有点远，期待以后参与实际开发。