专栏首页web前端教室WEB前端架构(二)

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,模板引擎 更多的目前我也说不出来其它,明日再报,,

本文分享自微信公众号 - web前端教室(webfeel)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-10-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • web前端架构 - 写在前面的话

    写在前面的话: 因为是我自己亲身参与的项目,所以代码啊,架构啊,应该不会很高大上,反而会很土,很从底开始,一点点的加深对web前端架构的认识。 而且很有...

    web前端教室
  • 简单讲解《前端模块化》(一)

    也就是后来的 common.js ,AMD, es6 ,CMD这些。。这些就下次再说了,

    web前端教室
  • 《vue+vant+node+mongoDB+koa2》电商项目实战连载(4)

    使用<van-row>和<van-col >来快速的创建一个搜索条的html的结构出来,

    web前端教室
  • Vue.js

    这个星期把Vue学习了一下。Vue.js是对JavaScript进行了封装,语法风格和小程序很像,比如双大括号{{}}都是插值表达式。也许它们有...

    用户3112896
  • 学习PHP函数

    PHP 在用户自定义函数中支持可变数量的参数列表。在 PHP 5.6 及以上的版本中,由 ... 语法实现;在 PHP 5.5 及更早版本中,使用函数 fun...

    老雷PHP全栈开发
  • 认识PHP函数

    PHP 在用户自定义函数中支持可变数量的参数列表。在 PHP 5.6 及以上的版本中,由 ... 语法实现;在 PHP 5.5 及更早版本中,使用函数 fun...

    老雷PHP全栈开发
  • 一个典型的数据平台诞生和发展简史

    为什么要搭建数据平台呢?这个问题的答案难也不难:对于小公司而言,数据量小、数据来源少,构建一个数据平台就有点杀鸡用牛刀了,博主认为使用传统的关系型数据库就可以解...

    哒呵呵
  • 微生活时光机:去项目中挖掘JS模块化简史

    让我们把眼光投向微生活各个时期项目中的 JS 代码,看一看时代在其中投下的烙印,也许只是管中窥豹、走马观花,但通过其组织形式的异同,或可一瞥 JS 模块化层面的...

    江米小枣
  • Elasticsearch Javascript API增删改查

    查询 根据索引、类型、id进行查询: client.get({ index:'myindex', type:'mytype', ...

    用户1154259
  • OpenCV 几何变换-图像镜像

    图像镜像是图像基本的几何变换之一,实现起来也很简单,先贴上源码: #include <opencv/highgui.h> #include <time.h>...

    chaibubble

扫码关注云+社区

领取腾讯云代金券