OLPM项目实践（3）-- 项目脚手架重要文件详解
1.components模块
在初始化项目的时候，项目已经给出了一个模块示例，就是foo。我们自己写的模块就按照foo那样的规范写就可以了。下面以foo为例子讲解一下：
1、data.js是运营人员配置文件，页面中需要运营人员配置的内容都必须写在这里，以{}对象字面量的方式来写。每一个模块都必须有这么一个文件，否则项目报错。
module.exports = { title: 'hello, olpm'， content: 'this is content' }; //以key-value的方式编写，运营人员只需要改value的值就可以了。
2.foo.css是该模块的样式文件，只控制该模块的样式。模块中的样式如果跟其他模块的样式有同名，则会产生冲突。所以要注意样式名的唯一性。这个文件可有可无。
.foo { color: red }
3.foo.ejs是模板文件，dom结构都存放在这里。模板语言不一定使用ejs，可以使用tpl等。常用的是ejs和tpl模板。如果该模块需要运营人员进行数据配置，则该文件是必须有的。原因下面讲解。
<div class="foo"> <h1><%=title%></h1> </div>
4.foo.js是js控制文件。顾名思义，js代码都在这个文件里写。
5.模块内获取运营人员配置的数据。
怎样获取运营人员配置的数据？本质就是从data.js中获取数据传送到foo.js中使用。
可是在这里遇到问题，foo.js不能直接从data.js中获取数据。所以，我们可以这么做。。。
把data.js的数据渲染到foo.ejs文件中，然后foo.js读取dom节点中存在的数据。
例如:data.js是这样的
module.exports = { title: 'hello, olpm' };
foo.ejs是这样子渲染data.js数据的：
<div class="foo"> <h1><%=title%></h1> </div>
那么foo.js是这样读取数据的：
module.exports = function(){ var title = document.getElementsByClassName('foo')[0].getElementsByTagName('h1')[0]; alert(title); };
那么问题又来了。如果运营人员配置的是比较敏感的内容，例如：api接口。那岂不是赤裸裸滴暴露在页面dom上？
针对这个问题，可以这么恶心地解决：
从data.js把数据渲染到dom上，foo.js读取了以后马上把渲染的数据清空。所以foo.js是这样写的
module.exports = function(){ var title = document.getElementsByClassName('foo')[0].getElementsByTagName('h1')[0]; alert(title); title.innerHTML = '';//清空数据 };
2.views页面布局
页面布局是大概描绘了一个页面模板。请记住，这只是一个模板，所有的页面都是从这个模板中产生的。
一个页面布局就是views下的一个文件夹。
在初始化项目脚手架的时候，已经有一个index的页面布局。
1.index.css是页面的样式。与components模块的样式文件的不同之处在于，index.css是存放页面独有的样式，样式耦合度非常高。
2.index.html文件是dom结构文件。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>hello world</title> <link rel="stylesheet" type="text/css" href="index.css"> <!--[STYLES]--> </head> <body> <h1>hello world</h1> {{{unit name="foo"}}}
{{{unit name=""}}} <script type="text/javascript" src="../lib/md.js"></script> <!--[SCRIPTS]--> <script type="text/javascript" src="index.js"></script> </body> </html>
1.{{{unit name="foo"}}} 这是模块单元的引入，name是单元的名称。建议在页面中写入足够多的空单元，给页面预留单元空间。{{{unit name=""}}}
2.md.js是一个非常简化的项目工程文件。为了方便，建议使用scrat.js工程文件。减少开发的时间。
3.index.js是页面级别的js控制
3.index.js文件是页面级别的控制文件，可有可无。
4.olpm.json文件是页面描述文件，必须填写，用于运营人员进行配置时候的模板选用。其实运营人员选模板就是看name字段的。
{ "name" : "首页", "description" : "首页布局描述" }
3.lib全局文件
顾名思义，全局使用的文件都放在这里。包括css，js。
4.fis-conf.js
这个文件非常重要！全局的基础配置都放在这里，其中最重要而且必须有的一个配置是olpm code的配置。
fis.olpm('test');
这个olpm code在项目初始化的时候已经自动在这里配置。如果以后要改的话，可以在这里改。如果项目的olpm code与平台的项目code不一致，就会导致上传工程包失败。
如果要添加多个参数，可以这样子写：
fis.olpm({ code : 'pojoksanti', domain : 'http://www.baidu', description : '讲解示例' });
5.index.js
项目启动文件。
服务器端口，路由配置都在这里写。
'use strict'; var request = require('request'), express = require('express'), app = module.exports = express(); // static files app.use('/s/uae/g/06/', express.static(__dirname)); // layouts app.use(express.static('layouts')); // proxy (optional) // app.use(function (req, res) { // req.pipe(request('http://hao.uc.cn' + req.url)).pipe(res); // }); app.listen(process.env.PORT || 8082);
