<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>

<body>

<div id='title'></div>

<div id='product'></div>

</body>

<script language="javascript" src="test.js" ></script>

</html>
// JavaScript Document

var viewCommand= (function(){

    var tpl= {

        product :[

                '<div>' ,

                '<img src ="{#src#}"/> ',

                '<p>{#text#}</p> ',

                '</div>'

                  ].join(''),

        title :[

                 '<div class="main">',

                   '<h2>{#title#}</h2>',

                    '<p>{#tips#}</p>' ,

                  '</div>' 

                  ].join('') 

        }    ,

        html='';

        function formateString (str,obj){

            return str.replace(/\{#(\w+)#\}/g,function(match,key){

                return obj[key];

                })

            }

         var Action = {

             create : function (data,view){

                if(data.length){

                    for(var i=0,len=data.length;i<len;i++){

                        html+=formateString(tpl[view],data[i]);

                        }

                 } else {

                         html+=formateString(tpl[view],data );

                     }

                 },

             display : function (container,data,view){

                if(data){

                  this.create(data,view);    

                }

                document.getElementById(container).innerHTML=html;

                html='';

             }

             }

         return function excute(msg){

            msg.param=Object.prototype.toString.call(msg.param)==="[object Array]" ? msg.param : [msg.param];

            Action[msg.command].apply(Action,msg.param)

        }           

     })();

var productData = [

 {

   src : 'command/02.jpg',

   text :' 桃花'

 },

 {

    src : 'command/03.jpg',

   text :' 阳光'

   },

   {

    src : 'command/04.jpg',

   text :' 绿色'

   }

],

titleData= {

    title : '夏日温馨',

    tips:'暖暖的夏日'

    };

    viewCommand({

                command :'display',

                param : ['title',titleData,'title']

                })

        viewCommand({

                command :'create',

                param : [ {

                         src : 'command/01.jpg',

                           text :'01 绿色'

                         },'product']

                })

    viewCommand({

                command :'display',

                param : ['product',productData,'product']

                })
 
 

javascript 命令方式 测试例子的更多相关文章

  1. php多线程抓取信息测试例子

    php多线程抓取信息测试例子 PHP 5.3 以上版本,使用pthreads PHP扩展,可以使PHP真正地支持多线程.多线程在处理重复性的循环任务,能够大大缩短程序执行时间. PHP扩展下载:htt ...

  2. ORM开发之解析lambda实现完整查询(附测试例子)

    上次讲解了怎么解析匿名对象(ORM开发之解析lambda实现group查询),这次来实现解析二元运算,完成基本条件语法 先看一个表达式 query.Where(b => b.Number == ...

  3. php判断数据库是否连接成功的测试例子

    php判断数据库是否连接成功的测试例子 如果出现数据库配置不正确的错误,请看php与mysql的配置教程: win7系统下如何配置php-Apache-mysql环境 http://www.cnblo ...

  4. 自己实现的一款在线Javascript正则表达式测试器——JRE-Parser

    本文最初发布于我的个人博客:http://jerryzou.com/posts/jreparser/ 昨天在看<正则表达式30分钟入门教程>的时候,看到博主自己实现了一个C#写的正则测试器 ...

  5. Go语言学习之斐波那契数列的测试例子和定义常量方法

    ### Go语言学习之斐波那契数列的测试例子和定义常量方法 1.go语言中测试文件必须以test.go结尾,比如:fib_test.go 2.测试文件内的方法必须是Test开头,比如:func Tes ...

  6. google map javascript api v3 例子

    之前一直用百度map,但如果是国外的项目就需要用google地图.由于在国内屏蔽了google地图的服务,因此调用的是一个国内地址(开发用).这个地址没有用key,语言设置也还是中文的. //---- ...

  7. javascript闭包学习例子

    javascript中的闭包个很让人头疼的概念.总结一下 闭包是指有权访问一个函数作用域中的变量的函数.创建闭包最常见的方式,是在一个函数内部创建另一个函数,用return返回出去. 使用闭包可能造成 ...

  8. 可进行JavaScript代码测试与调试的12个网站

    概述:JavaScript是网站前端开发最为重要的一门编程语言,本文收集了能够在线测试与调试JavaScript代码的12个网站 1.JS Bin JS bin是一个为JavaScript和CSS爱好 ...

  9. javascript进阶——测试和打包分发

    建立一个面向对象的好的代码基础后,为了达到代码重用的目的,通过调试使用适当的测试用例进行测试尤为必要,之后就是打包分发的主题. 一.调试与测试 1.调试 Firebug:包含了错误控制台.调试器.DO ...

随机推荐

  1. 关于js判断鼠标移入元素的方向--解释

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

  2. [原创]cocos2d-x研习录-第二阶 基本概念

    在Cocos2D-x引擎中,有几个非常重要的概念:导演(CCDirector).摄像机(CCCamera).场景(CCSecen).布景(CCLayer).精灵(CCSPrite)和动作(CCActi ...

  3. ubuntu 编译安装 srilm

    Ubuntu 64bit系统下SRILM的配置 依赖软件包(先进行): 1.c/c++ compiler:编译器gcc 3.4.3及以上版本,我的是gcc 4.4 2.GNU make:构建和管理工程 ...

  4. Delphi 2010错误 ＂displayNotification: 内存不够＂

    打开 Delphi 2010 的时候, 它报一个错误 ＂displayNotification: 内存不够＂,从而无法使用 Delphi , 解决办法 摘自http://www.cnblogs.com ...

  5. 千里积于跬步——流，向量场，和微分方程[转载]

    在很多不同的科学领域里面,对于运动或者变化的描述和建模,都具有非常根本性的地位--我个人认为,在计算机视觉里面,这也是非常重要的. 什么是"流"? 在我接触过的各种数学体系中,对于 ...

  6. WebApi：自定义筛选器

    最近在项目中有这样一个需求,记录每次Api访问的调用时间,运行时间,传入数据,返回数据等信息. 第一反应就是添加一个类,用来实现相应的功能,然后在方法的代码中添加,但是这样的话,需要修改所有的方法的代 ...

  7. Semaphore tryAcquire release 正确的使用方法

    boolean permit = false; try { permit = semaphore.tryAcquire(1, TimeUnit.SECONDS); if (permit) { Syst ...

  8. JavaScript 输入内容就触发事件

    <textarea name="textarea" placeholder="请输入产品识别号" onkeyup="alert();" ...

  9. 使用不同用户对Oracle数据库进行异机恢复，失败，错误：Backup file not found in NetBackup catalog

    最近做某数据库恢复演练,数据库版本是10.2.0.4,恢复控制文件一直报错,报错如下,经过反复折腾,原来恢复机上oracle用户不是oracle导致(我的是oraclev4),查看源库oracle用户 ...

  10. json（http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html）

    http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html