继续想到哪说哪,, 继上一期说,定好了MVC结构之后 就准备先搞些组件出来,首先就是抽个input出来。。 目前有登录页和用户地址栏页, input至少有二种以上特性, 一检测是否为空,input上弹出小提示框 二如果为空,边框变色。
思路是这样,伪代码:
var createInput = {
init:function(){ },
cInput:function(){
var _ths = this;
$('<input>',{
'id':_id,
'class':_cls,
}).appendTo( 相关dom );
this.showBorder();
this.popEnpty();
},
showBorder:function(){
//如果xx,border变红
},
popEnpty:function(){
//如果为空,pop窗口
}
}
以后页面上需要input的时候,就调用createInput.cInput()方法,, 就不用到处写if什么else然后border:red什么的了
把ajax方法也进一步封装了一下,网站中有get和post二种方式,,就封装二个方法,
function getJson( _url, _type, fn){
$.ajax({
url: _url,
type: _type,
//data:_d
success:function(d){
fn(d)
}
})
}
然后调用的时候就是,
getJson('xx/xx', get, function(d){
//这里是个回调
console.log(d)
});
function postJson....也是一样,方法里多个data传进去而已 postJson(_url, _type, d, function(d){console.log(d)}); 这几个封装的方法,都写在common.js里面,都算是c层的。
现在目录结构是下图所示:
V层使用了模板引擎:handlebars.js,主要是用它对用户地址栏列表来进行渲染,就是这种展示:
{{#each student}}
<tr>
<td>{{name}}</td>
<td>{{address}}</td>
<td>{{phone}}</td>
</tr>
{{/each}}
这就是最基本的,用数据来渲染模板生成模块。 再接下来更复杂的购物车页面,必须使用双向绑定的模板,, 使用哪个好呢,,?还得多尝试尝试
目前的感觉, M层就是后端接口API,, C层就是各种方法,组件,, V层就是html,css,模板引擎 更多的目前我也说不出来其它,明日再报,,