首页预览地址

mix2页面预览地址

data.js var categoryData = { \"code\": 200, \"result\": \"success\", \"data\": [ { \"index\": 0, \"cateName\": \"phone\", \"cateTitle\": \"手机 电话卡\", \"childrenData\": [ { \"imgSrc\": \"images/category/phone/note3-80-2.png\", \"text\": \"小米Note 3\" }, { \"imgSrc\": \"images/category/phone/note3-80-2.png\", \"text\": \"小米MIX 2\" }, ... ] } ] } 

index.js /*模块实现模块*/ var viewCommand = (function () { var tpl = { // 轮播图-雨伞盒模块 carouselView: [ \' li \', \' a href=\"#\" \', \' img src=\"images/blank.gif\" data-echo=\"{#imgSrc#}\" \', \' /a \', \' h3 \', \' a href=\"#\" {#title#} /a \', \' /h3 \', \' p {#desc#} /p \', \' p {#price#} /p \', \' /li \' ].join(\'\'), }; // 格式化字符串缓存字符串 var html = \'\'; function formateString ( str, obj ){ // 替换\'{#\'与\'#}\'之间的字符串 return str.replace(/\\{#(\\w+)#\\}/g, function (match, key){ return obj[ key ]; }) } // 方法集合 var Action = { // 雨伞盒轮播图 createCarousel: function ( data, view ) { var len = data.length; if ( len ) { for ( var i = 0; i len; i++ ) { html += formateString( tpl[ view ], data[ i ]); } } }, insertCarousel: function ( container, data, view ) { if ( data ) { this.createCarousel( data, view ); } document.getElementById( container ).innerHTML = html; html = \'\'; }, } // 命令接口 return function excute( msg ){ // 解析命令，如果msg.param不是数组则将其转化成数组（apply方法要求第二个参数为数组） msg.param = Object.prototype.toString.call( msg.param ) === \"[object Array]\"?msg.param:[msg.param]; // Action内部调用的方法应用this,所以此处为保证作用域this执行传入Action Action[ msg.command ].apply(Action, msg.param); }; })(); 

原型模式: 用原型实例指向创建对象的类，适用于创建新的对象的类共享原型对象的属性以及方法 优点： 可重复性、可共享性、耗时少

 // 轮播列表类 var LoopLists = function ( container, datas ) { this.container = container; this.datas = datas; }; LoopLists.prototype = { // 创建轮播列表 createList: function () { viewCommand({ command: \"insertCarousel\", param: [ \'carouselList\' + this.datas.index, jsonToArr(this.datas.data), \"carouselView\"] }); this.changeList(); }, // 创建动画 changeList: function () { !-- 动画逻辑 -- } } // 商品类 var ProduceLists = function (container, datas ) { // 构造函数继承轮播列表类 LoopLists.call( this, container, datas ); } ProduceLists.prototype = new LoopLists(); 

 // 明星商品类 var starCarousel = new ProduceLists( \"starGoods\", carouselData.data.starData ); starCarousel.createList(); // 为你推荐类 var recCarousel = new ProduceLists( \"recommend\", carouselData.data.recommend ); recCarousel.createList();