WEB前端架构（二）

继续想到哪说哪，， 继上一期说，定好了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,模板引擎 更多的目前我也说不出来其它，明日再报，，