-
Notifications
You must be signed in to change notification settings - Fork 9
使用jsbbs的框架
******** 此文件已经弃用 ***********
至少应该包括下面这些文件：
+ Projcet
|-- template
|-- js
|-- seajs
|-- lib
--- juqery.js
--- thinist.js
--- main.js
--- frame.js
--- config.js
--- index.html
考虑我们要做一个简单的签到系统。有两个页面，一个页面add是输入签到的人的名字，另一个页面see是显示签到的人的名字。
这个是template/add.html：
<p>共有 ${total} 个人签到了！</p>
<form data-submit="add">
<input name="username">
<button>签到</button>
</form>
这个是template/see.html：
<ul>
{{each(i, p) signed }}
<li>${p}</li>
{{/each}}
</ul>
<a href="#!add">Back to add</a>
这个是index.html;
<html>
<body>
<div id="main"></div>
<script
src="js/seajs/sea.js"
data-config="./config.js"
data-main="main.js" >
</script>
</body>
</html>
这个是 main.js ：
define(function(require){
require('jquery');
require('thinist');
require('frame');
$MOD('handler', function(){
var all_sign = [];
function add_person(kwargs){
all_sign.push(kwargs.username);
alert('Sign successed.');
}
declare_frame({
mark: 'add',
enter: function(){
render_template('add', null, '#main');
},
submit : {
add : add_person
}
});
declare_frame({
mark: 'see',
enter: function(){
render_template('see', {signed: all_sign}, '#main');
}
});
return {
add: add_person,
see: function(){ return all_sign; }
}
});
$MOD('main', function(){
window.onhashchange = onhashchange;
refresh_frame();
});
});
特别的，在其他模块还直接通过 $MOD.handler.add 来添加签到， $MOD.handler.see
来获得全部签到者的名单。
jsbbs采用了两层结构，以实现前端和后台的彻底分离。后台专注与需要提供底层的数据，以api的格式放出。而前台根据需要手动调用这些api，并且展示出来。
-------
js
-------
api
-------
底层的函数和object类（如果需要），组织成为一个个的 $MOD，包裹在js文件中。原则上，相关的函数组织在一个$MOD中，并且可以被其他的$MOD调用，实现模块化和重用。
--------------
js file
--------------
$MOD
--------------
function
or Object
--------------
其中，需要的两个类库包括 jQuery 和 thinist.js 。
在使用了 thinist.js 后，会有一个 $MOD 全局变量。考虑我们有一个数组处理的 $MOD 叫做alib，可以这样使用：
var alib = $MOD.alib;
alert(alib.range(1, 20, 5));
// or ...
var range = $MOD.alib.range
alert(range(1, 20, 5))
这样来进行一个声明：
$MOD(modname, builder)
其中modname是$MOD的唯一标识符，而builder可以是一个对象，或者是一个函数。如果是一个对象，则可以像上面一样直接被外部调用。如果是一个函数，会将执行后的结果作为被外部调用的实体。如这样声明一个 $MOD :
$MOD('Counter', function(){
var counter=0;
return {
'delta': function(num){ return counter += num; },
'set' : function(num){ return counter=num ;},
'get' : function(){ return counter; },
}
});
这样使用：
$MOD.Counter.delta(20);
alert($MOD.Counter.get());
全部的函数或者类实现都应该组织在某个$MOD里面。
使用 declare_frame 函数：
declare_frame({
mark: 'home',
enter: function(kwargs){
do_with(kwargs);
},
submit: {
}
});
当访问 index.html#!home 时，就会调用上面的enter函数。特别的，可以通过键值对传入参数到kwargs。比如访问
index.html#!home?pagenum=1&&limit=2
就会将 {pagenum:1, limit: 2} 作为kwargs传入。通过键值对，也可以实现简单的跨frame通信。
template使用jQuery.tmpl作为底层实现，语法十分简单，这里不对具体语法继续介绍。
使用template，先在 template/ 文件夹中建立相应的 html 文件。比如 index.html 。然后在函数执行中调用 render_string 或者 render_template 。如
var data = { site_name: 'TestSite'};
alert(render_string('index', data));
render_template('index', data, '#main');
函数原型如下：
String render_string(tplname, data);
void render_template(tplname, data, append_target);
点击事件和提交事件可以使用标配的 data-submit 属性来完成。
在你的html中这样写：
<form data-submit="login">
用户名：<input type="text" name="userid" />
密码：<input type="password" name="password" />
<button>提交</button>
</form>
表示使用login来处理这个表单的提交。然后在你的frame的声明中，
var submit = {};
submit['login'] = function(kwargs){
do_login(kwargs.userid, kwargs.password);
}
declare_frame({
mark: 'home',
enter: function(kwargs){
do_with(kwargs);
},
submit: submit
}
});
通过submit属性实现这个事件交互的具体方法。
目前使用的是url驱动的方法，需要手工在你的main.js中加入这句：
window.onhashchange = onhashchange;
refresh_frame();
然后就会去检测url，启动相应的frame。
编辑 handler.js ，增加你的frame，添加必要的 html 文件。提交你的patch。
编辑js文件和相关的html文件，提交你的patch。
欢迎联系我 LTaoist@163.com