主要是为了解决有些项目需要支持ie8浏览器，并
-- css
-- images
-- js
-- lib
-- tpl
js目录-- index.html
config.js 一些基本的配置
core.js 核心方法
filter.js 过滤器方法
utils.js 公共的一些方法
lib目录index.js 入口文件
tpl目录lib包含了一些插件，例如layer弹框、layerdata时间插件以及webUploader插件，ie8下需要加载使用es5-sham.min.js、es5-shim.min.js、json3.min.js，因为在ie8下template.js需要依赖它们
核心的方法简单介绍 config.js配置一些全局的变量以及requirejs的一些配置内部都有详细的注释 utils.js 的方法依赖core.js的方法 1.1 utils.Http 请求方式存放组件模板的地方
var Http = utils.Http; // post请求 Http.post(url, data, function(errorcode, result){ if(errorcode){ return false; } console.log(result); }); // get请求 Http.get(url, data, function(errorcode, result){ if(errorcode){ return false; } console.log(result); }); // async POST同步请求 Http.async(url, data, function(errorcode, result){ if(errorcode){ return false; } console.log(result); }); 2.2 utils.layer layer的弹窗组件
var layer = utils.layer; layer.msg('你好！'); layer.alert('你好！'); 2.3 utils.getQueryString 获取地址栏url的参数
// 例如：'http://xx/xxservice.html?id=1'; var id = utils.getQueryString('id'); // id = 1 2.4 utils.webUploaderFiles 初始化上传按钮
<div id="uploadFile">上传</div>
/** * @description 上传附件插件 * @param {string} element - element：绑定按钮元素id * @param {string} method - url：上传地址 * @param {string} type - type：1-普通文件上传 2-知识库文件上传 3-只允许图片上传 * @param {string} upUrl - upUrl: 当有值时优先使用该地址，没有则使用默认地址 * @callback callback(file, response) - 回调方法 */ utils.webUploaderFiles(element, type, callback, upUrl); // 例如 utils.webUploaderFiles('#uploadFile', 1, function(file, response){ console.log(file, response); }); 2.5 utils.cookie cookie的存储以及获取
var cookie = utils.cookie; // 存储 cookie.set('userinfo', {id:1,name:'白云'}); // 获取 cookie.get('userinfo'); 2.6 utils.templateView 渲染组件的方法
/** * @description options 配置对象 * @callback callBack 回调函数 * @property {String} options.elementId: 将模板的内容渲染到页面指定的id选择器 * @property {String} options.templateId: 模板的id名字，用id选择器 * @property {Object} options.data: 模板页面的数据 * @property {Boolean} options.isDraw: 默认是直接渲染，如果想拿到模板字符串，可设置 isDraw = true * @property {Boolean} options.isStore: 默认是模板不保留，如果想保持模板字符串，可设置 isStore = true * @property {Function} options.callback 默认处理方法，返回模板处理后的字符串 * @see 注意：只支持本页面模板化 */ var options = { elementId: '#demo-con', templateId: 'demo-con-tpl', data: {message: '你好！这是一个demo！'} }; utils.templateView(options);
<div id="demo-con"></div> <script id="demo-con-tpl" type="text/html"> <span>{{message}}</span> </script> 2.7 utils.templateLoaderRender 加载组件并且渲染组件()
/** * @description 按文件与目录组织模板,在没有预编译的情况下可以使用如下请求获取模板页面，里面不能包含子模板 * @param {Object} options 配置对象 * @callback callBack 回调函数 * @property {String} options.templateId: 模板地址， /tpl/xxx.html 或 tpl/xxx.tpl * @property {Function} options.callback 默认处理方法，返回模板处理后的字符串 * @see _temporaryTemplateHTML存储所有加载过的模板，可以减少请求 */ var options = { elementId: '#demo-con-1', templateId: 'tpl/test-content-template.tpl', data: {title: '你加载了模板test-content-template.tpl'} }; utils.templateLoaderRender(options);
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>demo</title> </head> <body> <div id="demo-con-1"></div> <script type="text/javascript" src="js/config.js"></script> <script data-main="js/index" src="lib/require.js"></script> </body> </html> 2.8 模板中使用 include 方法可以在模板中引入子模版
/** * @description 注册加载子模板的方法 * @param {Object} data 数据对象 * @param {string} url 子模版路径 * @param {string/object} argsOne 形参1 * @param {string/object} argsTwo 形参2 * @return {string} 返回编译过后子模板的html字符串 */ // 模板中调用方式如下：
<h1>{{@title | include 'tpl/test-content.html', msg, '345'}}</h1> 2.9 utils.loadingTpl 按文件与目录组织加载组件,在回调函数渲染组件
/** * @description 按文件与目录组织加载组件, 数据处理在回调函数里进行，可以在组件里，创建多个 * @param {String} url 组件的地址 * @callback 在callBack回调中处理组件的渲染 * @see /tpl/xxx.html 或 tpl/xxx.tpl 中创建多个组件 */ utils.loadingTpl(url, function(){ // 执行方法 }) 2.10 utils.log 打印日志
/** * @description 自定义console.log * @param {string} params 数据 * @param {boolean} type 判断是否打印字符串 */ utils.log(params, type); // 例如 var log = utils.log; var obj = {a: 123, b: 1234}; log(obj); // 或者 utils.log(obj); filter.js 各种过滤函数的方法
目前只提供几个常用的过滤函数 dateFormat ：格式化时间 yyyy-MM-dd hh:mm:ss substrByLength ：字符串截取 dateDiff ：时间戳显示为多少分钟前，多少天前的处理 getSubString ：判断字符串超过多少就开始截取 下面就是格式化时间例子:
<div id="demo-con"></div> <script id="demo-con-tpl" type="text/html"> <span>{{message}}答：{{sendTime | dateFormat}}</span> </script>
// 例如 时间的格式 'yyyy-MM-dd hh:mm:ss' var options = { elementId: '#demo-con', templateId: 'demo-con-tpl', data: {message: '你好,现在几点了？', sendTime: 1565858448014} }; utils.templateView(options); // 结果：你好,现在几点了？答：2019-8-15 16:40:48
创建过滤函数的方法
var data = {content: 'world'}; filter.getContent = function(data){ var str = 'hello ' + data; retrun str; }
<!-- 调用filter的方法getContent --> <div>{{content | getContent }}</div> <!-- 渲染之后的结果 --> <div>hello world</div> template.js 的用法
artTemplate是腾讯开源的前端模版引擎，无论就速度，兼容性还是相当可以 web前端vue.js、react.js、angularjs等技术，支持的浏览器本IE10以上/firefox/chrome等高版本浏览器 而artTemplate在兼容IE8浏览器做的很出色，可以大大提高一些项目需要支持IE8浏览器的开发速度
each的遍历artTemplate常用的一些方法
<div id="content"></div> <-- 在index.html内编写模板：使用一个type="text/html"的script标签存放模板： --> <script id="test" type="text/html"> <h1>{{title}}</h1> <ul> {{each list val i}} <li>索引 {{i + 1}} ：{{val}}</li> {{/each}} </ul> </script>
<!-- js渲染模板 --> var data = { title: '标签', list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var options = { elementId: '#content', templateId: 'test', data: {list: data} }; utils.templateView(options); if判断
{{if admin}} <div>{{title}}</div> {{/if}} <!-- if...else... --> {{if admin}} <div>{{title}}</div> {{else}} <div>没有结果</div> {{/if}} <!-- if...else if....else... --> {{if admin == 1}} <div>admin等于1</div> {{else if admin == 2}} <div>>admin等于2</div> {{else}} <div>>既不等于1也不等于2</div> {{/if}} @表示对内容的html进行渲染
var data = { content: '<h>这是一个@标题测试</h>' }
<!-- content内容中的<h>标签，将被浏览器渲染 --> <div>{{@content}}</div> 创建过滤函数 filter,上面已经说了就不再介绍 以上就是RTJ框架的基本结构，非常简单 只要初略熟悉一下requirejs和template.js 可以开始写项目了, 不需要任何打包工具
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
