Skip to content

web页面配置

Jump to bottom Edit New page
杨捷 edited this page Dec 11, 2013 · 6 revisions

Codekart 已经帮你完成了web页面的继承和模块化配置，你可以方便的把位于不同文件夹内的html模板、js文件、css文件等等组合成一个页面。

在页面比较大的时候，js、css、html的模块化就显得特别重要了，如果你的页面js超过一万行代码20几个模块，都放在一个文件里面开发，是不可想象的。

幸好，CodeTank可以为你把切分成模块的js、css和html组合起来，压缩并自动添加引用。我们将通过一个示例来详细讲解用法。

在framework/view文件夹下面包含四个文件html.js,home.js,404.js和error.js。这是框架自带的基础页面，你不需要修改它。如果自定义这几个页面，你可以在app/view下新建同名的文件，并按照配置自定义。框架会优先调用app/view下面的，而framework/view下的就会被覆盖。

它们就是四个基础web页面，其中其余三个页面都是从html.js继承过来，并且以后你添加的页面都必须直接或间接地继承它。

html.js 内容如下：

//web页面跟页面定义

var path = require('path');

exports.mop = {
    name:[path.basename(__filename,'.js')], //当前文件名和继承链文件名，用于页面数据获取时挨个调用处理方法
    tpl:[{file:'html'}],  //页面的tpl模板文件列表
    tpls:[],  //待用的tpl  保存在js文件里面 {name:'note_list',file:'abc/abc'}
    less:['html'],  //页面的css模板文件列表
    csslib:[],  //css库文件，在static/csslib目录下
    js:[
        'functions',
        'json',
        'cookie',
        'jq-extend',
        'tmpl',
        'pro'
    ], //页面的js模板文件列表
    jslib:[
        //'jquery-2.0.3.min' 
    ] //js库文件列表，在static/jslib目录下
};



/**
 * tpl模板数据获取函数
 * @param callback 返回模板数据
 */
exports.data = function(callback){
    var that = this
        , req = this.request;  //原生的request请求对象
    callback({
        title: config.site.name,
        time: req.time
    },{
        config: config.site
    });
};

接下来是home.js，它继承html.js。也就是说，它包含了html.js里添加的所有js、css、html模块和页面数据。

内容如下：

var mop = inheritView('html'); //继承父级页面，inheritView为全局函数
mop.name.push('home');  //本页面名称赋值，用于递归调用 data() 函数，必须使用push，否则无法遍历继承树

//tpl模板文件 id的值 必须在父级tpl内 有 <!body!> 格式的标签，在 app/stuff/tpl 目录下
mop.tpl.push(
    {body:'home'}
);
//当然 你也可以push一个数组，下同。

//less样式文件，自动编译并组合成less文件，在 app/stuff/less 目录下
mop.less.push(
    'home'
);

//css库文件文件，在 static/csslib 目录下，也可引入以http开头的外部库
mop.csslib.push(
    //'button.min.css'
    //'http://[url]/outlib.css'  //以http开头的外部css库文件
);

//js文件，在 app/stuff/js 目录下
mop.js.push(
    //'home'
);

//js库文件文件，在 static/jslib 目录下，也可引入以http开头的外部库
mop.jslib.push(
    //'JQuery.min.js'
    //'http://[url]/outlib.js'  //以http开头的外部js库文件
);

//必须给本模块加上对外接口，以便其他页面继承
exports.mop = mop;

/**
 * 页面模板数据获取
 * 可以不定义此函数，程序将跳过本页面的数据获取
 * @callback 必须调用 ，表示数据获取完成，进行子级页面数据获取，不调用则会一直等待不能进行下一步！！！
 * 在callback中返回的变量可以在tpl模板中使用，在这里可以进行数据库的查询等等。
 * 复杂的数据获取和运算，建议放在`app/model`中的模块中进行，在这里可以调用`require_model('model')`加载。
 */
exports.data = function(callback){
    callback({
        title: '' +
            'CodeTank  欢迎使用Node.js前后端一体化开发框架 ！'
    });
};

页面继承十分简单 ，调用全局函数inheritView，传入父页面名称(文件名)即可。

####tpl模板的组合

你已经注意到，tpl模板的配置是一个对象数组，而js和css的配置是一个路径数组，这是因为tpl模板的组合不是简单地末尾追加，而是需要插入父页面tpl的指定位置。CodeTank通过类似<!position!>的标签指定位置。例如app/stuff/tpl/html.tpl内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="description" content="[#=config.site.intro#]" />
    <link rel="apple-touch-icon-precomposed" href="/icon.png">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>[#=title#]</title>
    <!src_style!><!--css引用文件-->
</head>
<body>

    <!body!>

    <!--[#=global#]为tpl模板数据解析语法-->
    <script type="text/javascript">
      global =  [#=global#]; 
    </script>

    <!src_script!><!--js引用文件-->

</body>
</html>

当你在app/view/home.js或者其他页面配置中设置mop.tpl.push({body:'home/body'})时，CodeTank做了如下事情：

  1. 读取app/stuff/tpl/home/body.tpl和app/stuff/tpl/html.tpl文件内容(home继承了html，所以读取他们两个配置模板文件)
  2. 在html.tpl文件中查找<!body!>字符串，并在它的前面插入body.tpl文件的内容
  3. 解析组合的新模板并向客户端返回(查看模板的如何解析)

所以，tpl模板的配置，需要你在父tpl模板，通过类似<!body!>的标签，指定子tpl将要插入的位置。

####css和js模块的组合

css和js模块的组合比较简单，都是线性的追加在末尾。css模块采用less编写，CodeTank会自动帮你解析成css并压缩，然后自动通过../stuff/tpl/html.tpl文件中的<!src_style!>和<!src_script!>标签替换成引用地址。

**注意：**less完全向下兼容css，如果不熟悉可以完全当成css来写。详细了解less请访问less中文官网。

Codekart

Add a custom footer
Add a custom sidebar
Clone this wiki locally