<!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. jQuery的attr与prop,attribute和property区别

    jQuery1.6中新添加了一个prop方法,看起来和用起来都和attr方法一样,这两个方法有什么区别呢?这要从HTMl 的attribute与property区别说起,attr与prop正是这两个东 ...

  2. python pandas.DataFrame选取、修改数据最好用.loc，.iloc，.ix

    先手工生出一个数据框吧 import numpy as np import pandas as pd df = pd.DataFrame(np.arange(0,60,2).reshape(10,3) ...

  3. Intellij IDEA连接Git@OSC

    错误提示:fatal: remote origin already exists. 解决办法:$ git remote rm origin http://my.oschina.net/lujianin ...

  4. SQLServer2012中用于记录数据操作时刻的附加字段使用datetime2(3)就可以了

    datetime2(3)精确到毫秒(听说),约等于2005时代的datetime类型.实际上后者是精确到3.33毫秒(也是听说). ) = GETDATE(); ) = GETDATE(); ) = ...

  5. 异步等待（ManualResetEvent

    ManualResetEvent实现异步等待,超过时间 不做处理,继续往下执行代码 (ManualResetEvent 涉及一个线程在其他线程进行之前必须完成的任务) ManualResetEvent ...

  6. Dockerfile指令

    指令的一般格式为INSTRUCTION arguments,指令包括FROM.MAINTAINER.RUN等. FROM 格式为FROM <image>或FROM <image> ...

  7. Asp.net MVC 之异常处理

    对于Asp.Net MVC 项目中,对于异常情况下,会跳转到自己定义好的页面,这时就用到了MVC中的异常过滤器(Exception Filters) (1)一旦action 方法中出现异常,异常过滤器 ...

  8. 【总结】我所整理的各种CSS居中

    在网上看了很多文章,自己也总结了一下,虽说是自己写的,但是还是要列出我参考过的那些文章的地址,感谢你们的分享!  http://blog.gejiawen.com/2015/03/13/css-lay ...

  9. centos7优化mysql5.6配置

    一.环境参数 [root@hn mysql]# grep 'physical id' /proc/cpuinfo |sort -u physical id : 0 physical id : 1 [r ...

  10. el 中requestScope和param

    ${scope.attribute},其中scope指pageSocpe.requestScope.sessionScope.applicationScope,attribute指的就是你在某个sco ...