TmodJS是一套完整的前端模块框架。
虽然我们PHP框架自带各种模板引擎,但是始终是后端模板引擎。例如我们在使用ThinkPHP3.2.3中如果是Ajax异步加载页面,拼接HTML真的是很头疼的一件事情。
第一次使用TmodJS是在人人商城开发中使用,用起来非常方便,于是记录下来。
先看看后端的代码:
<?php //人人商城自带的生成json函数 function show_json($_var_31 = 1, $_var_32 = null) { $_var_33 = array("status" => $_var_31); if ($_var_32) { $_var_33["result"] = $_var_32; } die(json_encode($_var_33)); } //假设shop是商品列表 $shop=array(); $shop['goods']=array(array('title'=>'苹果'),array('title'=>'香蕉'),array('title'=>'荔枝'),array('title'=>'大枣')); show_json(1,$shop); ?>
再看看基本的前端页面:
<html> <head> <title></title> <meta charset="UTF-8"/> <script language="javascript" src="/js/require.js"></script> <script language="javascript" src="/js/config.js"></script> </head> <body> <div id="shop"> 商城商品 <script id='shop_goods' type='text/html'> <ul> <%each goods as g %> <li><%g.title%></li> <%/each%> </ul> </script> </div> <script type="text/javascript"> require(['jquery','tpl','core'],function(jquery,tpl,core){ var url="http://learn.cn/api.php"; core.json(url, {}, function (json) { var result = json.result; $('#shop').html( tpl('shop_goods',result) ); }); }); </script> </body> </html>
以上的页面要求商城首页打开默认使用异步加载数据显示。
解释以上代码:
RequireJS是一个非常小巧的JavaScript模块载入框架,用于加载其他js,config.js是配置要加载的js的位置和别名。core是人人商城的核心Js,内置非常的工具,例如提示,get/post工具。
core.json是获取后端json的方法,然后将后端发送的json赋予#shop下的shop_goods模板,然后就能进行循环了.
下载附件:
由于工作需要长期使用Ajax,一个页面重复的AJAX请求太多,于是封装起来,只需要编写回调函数/* ------------- 使用方法: 1.ajaxrequest()函数执行准备的参数(1.请求地址2.发送数据字符串拼接3.type值可选get/post4.回调函数名称) exam...
捕捉模式从DOM最顶层一直到最后一层,冒泡正好相反,具体运行以下实例测试.<!DOCTYPE html> <html> <head> <title>捕捉和冒泡</title> <meta charset="...
<!-- 三个核心方法 openDatabase:这个方法使用现有数据库或创建...
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>获取mac地址</title> </head&g...
jQuery 插件——jqueryrotate,它可以实现旋转效果。jqueryrotate 支持所有主流浏览器,包括 IE6。如果提示方法不存在,可能是你的Jquery版本过低或者过高。基本语法:$('#img').rotate(90);//旋转90度其他的参数:参数类型说明默认值...