zoukankan html css js c++ java

javascript 命令方式测试例子

<!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']
                
                })

查看全文

相关阅读:
Ionic Tabs
Ionic实战九：ionic视频播放
 Ionic实战八：ionic登陆页面源码
 Ionic实战七：Ionic 音乐以及社交页面
 Ionic实战六：日期选择控件
 Ionic实战五：ionic图表源码基于highcharts
Ionic实战四：ionic 即时通讯_ionic仿雅虎邮箱
 Ionic实战三：Ionic 图片预览可放大缩小左右滑动demo-iClub图片预览
 Ionic实战二：购物车
 编译错误总汇

原文地址：https://www.cnblogs.com/cndavy/p/5032184.html

javascript 命令方式 测试例子

javascript 命令方式测试例子