WEB前端架构(二)
时间:2022-04-27
本文章向大家介绍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,模板引擎 更多的目前我也说不出来其它,明日再报,,
- checkbox 全选和取消
- SQL 存储过程分页
- 使用shell进行日志分析(r2第14天)
- easyui表单提交验证form
- 数据紧急修复之启用错误日志 (r2第12天)
- javascript 模拟按键点击提交
- 微信小程序调用接口返回数据或提交数据
- 巧用shell脚本生成快捷脚本(r2第12天)
- asp.net动态增加服务器端控件并提交表单
- c# asp.net 实现分页(pager)功能
- 一次数据库无法登陆的"问题"及排查(r2第11天)
- popcorn-js视频Video框架简单用法
- 一次数据库响应缓慢的问题排查(r2第9天)
- 通过Ajax方式上传文件(input file),使用FormData进行Ajax请求
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法