据说ArtTemplate是腾讯的,感觉这东西真不错,使用方便,用起来很简单,哈哈。腾讯也不完全只是坑爹啊。

ArtTemplate


  使用是,正常引入js,这个自然不用说。这东西啥时候使用呢?我觉得这东西不仅仅是语法上,连使用的场景也跟JSTL很相似。

  当我们使用Ajax向后端获取数据以后,在渲染网页时,如果这个网页元素要跟随者你的数据的不同而不同,那此时就可以很方便的使用ArtTemlate来实现,从而代替大量的使用操作DOM的方式来修改页面(当然如果简单的变化,直接操作DOM就好了,更快,技术嘛,都有它的应用场景,切不可生搬硬套!)。

  简单说一下我使用的时候,是一个怎样的流程。

  一开始如果不习惯使用这个,可以现在自己的网页部分,正常的把你想要的HTML元素先正常的写出来,然后随便填一些测试数据,先做一个demo(当然如果你公司有专门的前端设计人员,你就爽了。。。),然后直接在这个页面上,套如ArtTemplate的语法。类似这样:

  

  然后再按照语法,把他抽取到Script标签中。这东西,简单得很,语法更是简单,它没有太多的语法无非就是:遍历、判断,因为本身也只是一个模板插件,如果是太复杂的逻辑处理,本身还是应该交给JS来做。

  在抽取到script标签中的时候,需要给标签定义id属性,这个属性就是回头在js调用ArtTemplate的时候,用于指定需要操作哪个模板(一个页面当然可以有多个模板片断啦),比如:

  

  然后js中调用就:

  template对象就是ArtTemplate在JS中用于操作模板的对象,第一个参数是模板的id,用于指定此次操作的是哪个模板,第二个就是要放入模板的参数了。放入的参数有两个方式。

  看第一张图,可以看到我们是直接调用了data这个对象来取值,这个data怎么来的,只能叫data么?不能使其他的什么“date”、“beta”么?当然可以是其他的,主要在于放入的参数,如果你放入的对象,其内部具有一个data属性,那你就可以直接调用data来获取它的值,但如果你放入的参数已经是最终的数据,那就得想我上面这种图一样,加一个壳{data:room[0]},这种感觉很像java中的Map,键值对一样。

  这插件没啥难度,也写不出啥牛逼教程,哈哈,上面那个参数的规则,算是一个小窍门儿吧。

【JavaScript】ArtTemplate个人的使用体验。的更多相关文章

  1. JavaScript脚本放在哪里用户体验好

    javascript代码写在<head>里面: 由于这时候网页主体(body)还未加载,所以这里适合放一些不是立即执行的自定义函数,立即执行的语句则很可能会出错(视浏览器而定) javas ...

  2. JavaScript学习历程和心得体验

    一.前言 在过去,JavaScript只是被用来做一些简单的网页效果,比如表单验证.浮动广告等,所以那时候JavaScript并没有受到重视.自从AJAX开始流行后,人们发现利用JavaScript可 ...

  3. 第十一章:WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  4. JavaScript快速入门(一)——JavaScript概览

    JavaScript是什么? JavaScript的诞生 在1995年前后,当时世界上的主流带宽为28.8Kbps,现在世界平均下载带宽为21.9Mbps(数据来源于http://www.netind ...

  5. JavaScript权威指南--WEB浏览器中的javascript

    知识要点 1.客户端javascript window对象是所有客户端javascript特性和API的主要接入点.它表示web浏览器的一个窗口或窗体,并且可以用window表示来引用它.window ...

  6. javascript不可用的问题探究

    昨天在Twitter上的一些有趣的讨论中, 我发现人们对于Web应用和站点对javascript的依赖普遍存在一种疑惑. 这种疑惑一直都存在, 而对我而言, 这个问题随着浏览技术的飞跃发展而集中爆发了 ...

  7. 【转】JavaScript 简史

    本文来自众成翻译.JavaScript 毋庸置疑是当今最重要的语言之一.Web 的兴起已经把 JavaScript 带到一个前所未有的地步.下面我们来看看 JavaScript 在其短短历史中是如何演 ...

  8. Github资源汇集

    Github资源汇集 突然发现申请博客园已经两年有余,没有发表过一篇文章,十分惭愧.言归正传,先分享一下两年来收集的部分编程资源,大部分为Github上的项目.虽然网上这样的分享已不在少数,但不如我理 ...

  9. kettle系列-5.kettle实现二进制文件迁移

    本文就是分享下二进制文件(图片.txt文件等)在oracle和文件系统间的传输的转换示例. 转换示例如下图: 示例本身较简单,但很多人应该还是不太清楚怎么做,很多时候都是上网搜索,网上有关的就是通过j ...

随机推荐

  1. ASP.NET Core Web API Cassandra CRUD 操作

    在本文中,我们将创建一个简单的 Web API 来实现对一个 “todo” 列表的 CRUD 操作,使用 Apache Cassandra 来存储数据,在这里不会创建 UI ,Web API 的测试将 ...

  2. Google C++单元测试框架GoogleTest(总)

    之前一个月都在学习googletest框架,对googletest的文档都翻译了一遍,也都发在了之前的博客里,另外其实还有一部分的文档我没有发,就是GMock的CookBook部分:https://g ...

  3. 慎用mutableCopy

    因为逻辑需要,我在present到一个页面时,将一个存放uiimage的数组mutablecopy了过去(因为再返回的时候防止对数组做了改动),时间长了也忘了这事儿,后来发现添加多张图片上传时,app ...

  4. Unity3D安卓出包报错

    今天又遇到了在安卓出包时,直接报错了两个错误,报错信息分别如下: Installation failed with the following output: pkg: /data/local/tmp ...

  5. GitHub + VSTS 开源代码双向同步

    GitHub已经是全球开源代码的大本营了,通过以下统计你可以看到仅仅javascript在github就有超过32万个活动的repo.很多开发人员都会把自己的一部分代码分享到github上进行开源,一 ...

  6. iOS系列 基础篇 01 构建HelloWorld,剖析并真机测试

    iOS基础 01 构建HelloWorld,剖析并真机测试 前言: 从控制台输出HelloWorld是我们学习各种语言的第一步,也是我们人生中非常重要的一步. 多年之后,我希望我们仍能怀有学习上进的心 ...

  7. Linix登录报"/etc/profile: line 11: syntax error near unexpected token `$'{\r''"

    同事反馈他在一测试服务器(CentOS Linux release 7.2.1511)上修改了/etc/profile文件后,使用source命令不能生效,让我帮忙看看,结果使用SecureCRT一登 ...

  8. 关于B树的一些总结

    B树的定义 一棵m阶的B树满足下列条件: 树中每个结点至多有m个孩子. 除根结点和叶子结点外,其它每个结点至少有m/2个孩子. 根结点至少有2个孩子(如果B树只有一个结点除外). 所有叶结点在同一层, ...

  9. linux基本知识

    1.默认不写端口号就是80端口   127.0.0.1.localhost都代表本机 2.linux下的用户管理: id:可以查看当前用户whoami:查看当前的用户who:看当前已经登录的用户w:也 ...

  10. MTU(Maximum transmission unit) 最大传输单元

    最大传输单元(Maximum transmission unit),以太网MTU为1500. 不同网络MTU如下: 如果最大报文数据大小(MSS)超过MTU,则会引起分片操作.   路径MTU: 网路 ...