【總結】項目代碼總結

self.Parent.apply(self, arguments) 繼承

global.init 初始化

//請求異步

.done() 請求異步

// 加載數據成功

if (res.errcode == 0) {  

}

 

//從當前數據獲取參數（roundId）

self.roundId = self.get('rounfdId’); 

 

// 獲取參數

new Result({ 

        roundId : json.data.roundId

 });

 

 

 

 

//添加模塊 

 var Result= require('./result/index’); 

 

// 調用模塊（Result）；

new Result(); 

 

 

//  全局模板

module.exports = Base.extend({

     //全局屬性

     initialize : function () {}

}）

 

 

//獲取當前節點並操做

var el = $(e.currentTarget); 當前節點操做

var qid = el.parent('li').attr('data-pid'); //取當前節點父元素上的data-pid得值

 

 

 

// 對URL操做

 

     //刪除URL中的 roundId 參數

var _url = url.delQuery(location.href , 'roundId’); 

 

//url 賦值

location.href = _url;  

 

// 在URL中添加參數

var _url = url.addParam(location.href , {  

                        roundId : rid

                    });

  location.href = _url;

 

//獲取URL中的roundId

var roundId = url.query('roundId’)；

 

//跳轉到URL

global.jump(_url);

 

 

// 獲取sid，從緩存中取出sid

var sid = localStorage.getItem('sid');

 

// 對節點的操做（點擊事件等）

bindNode : function () {

            var self = this;

            setTimeout(function () {

                $('#wrap')

                    .on('click' , '[data-id=create]' , function (e) {

 

                        self.createClickHandler(e);

                    })

                    

            },0);

        },

 

 

// 事件處理（渲染事件等）

 

     // 數據獲取成功後渲染

self.on('success' , function (res) {  

           self.render();

           self.bindNode();  

 });

 

 

//給方法添加一個字段（渲染頁面時給數據中添加一個字段）

self.render({

        creator: global.getUserInfo()

 });

 

 

 

// 獲取對應接口數據

           var self = this;

            var _url = api.participate();

 

            var promise = $.ajax({

                url: _url,

                type: 'GET',

                dataType: 'json',

           //   給數據庫上傳所需數據

                data: { 

                    sid : sid,

                    roundId : rid,

                    questionId : qid,

 

                }

            });

 

            promise.done(function(res) {

                switch (res.errcode) {

                    // 得到正常數據

                    case 0:

                        self.emit('getListSuccess', res.data);

                        break;

 

                        // 若將數據中信息傳出

                         case 0:

                        self.emit('joinGameSuccess', {

                            qc : qc，

                            allQuestions : self.questionList,

                            gname : gname

                        });

                        break;

                    

 

 

               // 給數據中添加字段（原後臺沒有的字段添加進來）

                    case 0:

                            res.node = node;

                            res.content = content;

                            self.emit('Thumbsupsuccess', res);

                            break;

 

               //系統錯誤

                    default:

                        self.emit('joinGameFail', {

                            msg: '系統錯誤Error(' + res.errcode + ')'

                        });

                        break;

                }

            });

        

            promise.fail(function(data) {

 

                self.emit('joinGameFail', {

                    msg: '請求失敗'

                });

            });

 

 

 

//是不是微信（1是微信）

    if (global.platform == 1) {

                global.hasJoinWX().done(function(res) {

                    if (res.status) {

                        json.isJoinwx = res.data; //是否關注（1是已關注）

 

                    } else {

                       con.append(tpl(json));//是微信的狀況下

                    }

                });

            } else {

                con.append(tpl(json));//不是微信的狀況下

            } 

 

 

//  分享和關注

 

     //應用模板

var shareSdk = require('module/n-share/index');

     //調用

.on('click','[data-id=share]',function (data) {

                        shareSdk.invoke();

                    })

 

     //函數

createShare: function(data) {

 

            var self = this;    

            var nickname = data.creator.nickname;

            var arr = ["你知道我最想要什麼嗎？","愛個人人才敢在這裏留下足跡！~","來和{nick}玩個遊戲"];

                    // 輪轉（隨機）

            var shareText = self.shareText = arr[ new Date().getTime() % arr.length]; 

          // 用戶名替換字段

            shareText = shareText.replace(/{nick}/g, nickname)

            var imgUrl = data.creator.avatar;

            var roundId = url.query('roundId');

            var arrTitle=["討厭ヽ(≧Д≦)ノ人家就想和你玩這個！","點進來的都是真愛！"];

            var Title=arrTitle[ new Date().getTime() % arrTitle.length];

            // 分享文案設置

            shareSdk.init({

 

                userName: nickname, //用戶名

                userAvatar: imgUrl, // {String} 用戶頭像連接

                gameIcon: global.gameIcon, //分享圖標

                url: location.href, // 分享路徑

                title: shareText, // 分享標題

                desc: Title, //分享描述

                imageUrl: imgUrl, // 分享圖片

 

                platformForPP: {

 

                },

               // 分享成功

                onShareSuccessFromWechat: function(res) {

                },

               // 分享失敗

                onShareCancelFromWechat: function(res) {

                },

                // 顯示分享蒙層

                onShowMask: function() {

               }

            });

        },

          //關注

        createSubscribe : function () {

               global.showQrcode();

        }

 

    });

 

 

// 加載更多

          var self = this;

            var page = this.state.page;

            var timer;

            $(window).on('scroll' , function () {

                timer && clearTimeout(timer);

                timer = setTimeout(function () {

              

                    if(self.dataOver || self.isLoading){

                            return;

                    }

                    var body = document.body, docElement = document.documentElement;

                    // 700 在頁面滑到底部前700px就能夠加載,增長交互流暢性

                      if(body.scrollTop > docElement.offsetHeight - docElement.clientHeight - 700){

                            self.isLoading = true; 

                            self.getLikeEachOtherList();

                       }

                } , 300);

            });

 

 

//點贊

 

     //獲取點贊數據成功

self.on('Thumbsupsuccess',function(res) {

 

 

                    var Thumbsup = res.node;

                    var li = Thumbsup.parents('li');

                    li.attr('data-isthumbsup' , true);

                    var text=parseInt(Thumbsup.text());

                    text++;

                    Thumbsup.html(text);

                    if (li.attr('data-isthumbsup') === 'true') {

 

                        Thumbsup.addClass("create");

                    };

 

 

            });

 

            return self;

        },

//獲取點贊數據

clickThumbsup : function (e) {

 

                var self = this;

                var _url = api.thumbsup();

                var node = $(e.currentTarget);

                var li = node.parents('li');

 

                if (node.hasClass("disable")){

                    return;

                }

 

                node.addClass("disable");

 

                if (li.attr('data-isthumbsup') === 'true') {

                    return;

                }

 

                var roundId = url.query("roundId");

                var sid = localStorage.getItem('sid');

                var pid = node.parent('li').attr('data-pid');

                var content = node.parent('li').attr('data-content');

 

                var promise = $.ajax({

                    url: _url,

                    type: 'post',

                    dataType: 'json',

                    data: {

                        sid : sid,

                        roundId : roundId,

                        participateId : pid

                    }

 

                });

 

                promise.done(function(res) {

                    switch (res.errcode) {

 

                        case 0:

                            res.node = node;

                            res.content = content;

                            self.emit('Thumbsupsuccess', res);

                            break;

                        default:

                            self.emit('Thumbsupfailure', {

                                msg: '系統錯誤Error(' + res.errcode + ')'

                            });

                            break;

                    }

                });

 

                promise.fail(function(data) {

                    self.emit('Thumbsupfailure', {

                        msg: '請求失敗'

                    });

                });

 

 

 

   // 渲染

        render : function (json) {

            loading.hide();

            var self = this;

            var s = tpl(json);

            console.log(json)

            $('#wrap').html(s);

            //埋點

            global.reportData('gameOpen', {

                frompage: 'gameOpen'

            });

            return self;

 

        },

 

 

 

 

 

//哈希值的引用

 

//引用相應模塊

var route = require('module/route/index');

var routie = require('module/routie/index');

 

 

//監聽

 route

      .on('null' , function () {  //無參數（參數爲空）

             new Home;

       })

       .on('typelist' , function () { //有參數（當參數爲typelist的時候執行函數操做）

              new Cates();

        })

         .start();

//執行 （點擊事件時執行route添加參數typelist）

$('#wrap').on('click','[data-id=startGame]',function (e){

                        routie('typelist');

})

 

//彈出框組件

var dialog = new Dialog({

                type: 'confirm’,// 彈出框形式（alert）

                content:'確認從新出題嗎？'

            });

            dialog.on('confirm', function(){

                // 確認

                $('#wrap .text').val('');

            })

            dialog.on('close', function(){

                // 取消

            });

            dialog.create();

// 設置local

 localStorage.setItem('currentCreateQuesIndex', $(e.currentTarget).attr('data-index'));

 

// 表單驗證

 

clickSubmit : function () {

     //獲取input  中的內容

            var self=this;

            var typeId=$(".head").attr("data-typeid");

            var question=$('#question').val();

            var answer1=$('#answer1').val();

            var answer2=$('#answer2').val();

            var answer3=$('#answer3').val();

            var answer4=$('#answer4').val();

     //設置不一樣input提示文字

            var q = self.verify(question,"題幹不能爲空~");

            var a1 = self.verify(answer1,"必需要填寫正確~");

            var a2 = self.verify(answer2,"錯誤1尚未輸入哦~");

            var a3 = self.verify(answer3,"錯誤2尚未輸入哦~");

            var a4 = self.verify(answer4,"錯誤3尚未輸入哦~");

            var tip;

     //用 if else 判斷

            if (q !== true) {

                tip = q;

            } else if (a1 !== true) {

                tip = a1;

            } else if (a2 !== true) {

                tip = a2;

            } else if (a3 !== true) {

                tip = a3;

            } else if (a4 !== true) {

                tip = a4;

            }

     //若是符合條件彈出提示框（提示框爲組件）

            if (tip) {

                var dialog = new Dialog({

                    type : 'alert’, //提示框類型

                    content : tip//提示框中內容

                });

                dialog.create();//建立提示框

                return;

            }

     //判斷函數

verify: function (answer , tip) {

            var result;

            answer = answer.trim();

            if (!answer) {

                 result = tip;

            } else {

                result = true;

            }

            return result;

        }

 

 

 

     //替換URL中的Hase值

_url = _url.replace('typelist','startGame');

              location.href = _url;

 

 

 

//只獲取數組中的一個項數據

      //和bindEvent並列放

questionList : [],  //設置全局的數據列表（數組）

firstPull : true, //設置一個開關

bindEvent : function () {

     var self = this;

            self

                .on('getquestionSuccess',function (arr) {//在調用數據成功之後參數爲一個數組

                    self.questionList = self.questionList.concat(arr);//將每次獲取的數組拼接起來

                    self.questionList.forEach(function (item , index) {//循環數組，將index指向下一個

                        item.index = index + 1;

                    });

 

                    if (self.firstPull) {

                        self.firstPull = false;//當獲取數組後關閉開關（再也不繼續獲取數據）

                        self.render(arr[0]);//渲染數據（渲染的爲新數組）

                    }

 

                })

 

}

 

 

//正計時

 timer : function () {

            var self = this;

            var mm = 0;

            var ss = 0;

            var str = '';

 

            var sumtimer = self.sumtimer = setInterval(function(){

 

                str = "";

                console.log(str);

                if(++ss==60) {

                    if(++mm==60) {

                        mm=0;

                    }

                    ss=0;

                }

 

                str += mm < 10 ? "0" + mm : mm;

                str += ":";

                str += ss < 10 ? "0" + ss : ss;

                $('[data-id=sumtime]').html(str);

 

            } , 1000);

        }

 

//倒計時（組件）

 

var Timer  = require('module/timer/index');//引用模塊

 

 

 

var timer = self.timer = new Timer({ //實例化模塊

                remainTime : '10’,//倒計時時間

                selector : {

                    second : '.ques [data-second]’//顯示時分秒？的dom位置

                },

                isDoubleBit : false// 是否須要補齊兩位

            });

 

            self.timer.on('end' , function () {//倒計時中止時函數

             

            });

self.timer.destroys();//清除定時器

 

 

//音頻組件(在audio組件中須要設置相應的路徑，類名也要作相應的修改)

 

 

var audio = require('../base/audio’);// 引用音頻模塊

audio.startClick();// 調用音頻

 

 

//  評論

 

self.on('getCommitSuccess', function(data){//在評論接口成功後調用評論

                var commit = data.commit;

                self.refreshRankList(commit);

            })

 

refreshRankList: function(commit){

            var rankLi = $('#rankbody [data-id=li]');

            var useinfo = global.getUserInfo();//當前用戶的opened

            var useOpenid = useinfo.openId;//列表中的opened

 

            rankLi.each( function (index ,item ) {//循環列表（each可返回false且先是index是item）

                var thisLi = $(item);//item是當前節點，可是裸節點須要用$()轉化

                var rankopenid = thisLi.attr('data-openid');

                if(rankopenid==useOpenid){//當前用戶的opened 和 列表中的opened相等時

                    thisLi.find('[data-id=comCount]').html(commit); //更新相對性的dom

                    return false; //返回false不在繼續查找

                };

 

            });

 

        },

//當最後一條時獲取數據

if (index == self.questionList.length - 1 && !self.questionEnd) {

                self.getquestion();

            } 

 

 

 

//提示框的調用

 

var dialog = new Dialog({

       type: 'alert’,//提示框類型

       content:"付款成功」//提示文字

});

     dialog.create();

 

 

 

//支付

 

//調用組件

var pay= require('module/pay/index');

var pid = global.cache.getCache('product/pp_prepay_id’);//進入頁面後先判斷是否付款

            if (pid) { //若是是調用付款成功接口

                self.getBuySuccess(pid);

                console.log("paySuccess")

            };

 

 

//調用付款成功接口成功後彈出提示框

promise.done(function(res){

                if (res.errcode == 0) {

                    loading.hide();

                   global.cache.removeCache('product/pp_prepay_id');

                   var dialog = new Dialog({

                        type: 'alert',

                        content:"付款成功"

                    });

                    dialog.create();

                }

            });

 

 

//調用付款接口並設置參數

 

promise.done(function(res){

                if (res.errcode == 0) {

                    global.cache.setCache('product/pp_prepay_id', pid);//接口調用成功後設置支付緩存

                    console.log("付款頁面");

                    

               pay.initialize({

                        data: {

                            appid:data.appid,

                            mch_id:data.mch_id,

                            order_id:data.order_id,

                            nonce_str:data.nonce_str,

                            pp_prepay_id:data.pp_prepay_id,

                            sign:data.sign

                        },

                        env: Url.query('env') || 'pro’,//返回按鈕的地址

                        need_confirm: 1//支付信息頁面（1，顯示，不顯示直接刪掉）

                    });

                }

            });

              

 

 

//大轉盤

     //加載圖片

preloadimages:function (arr){

            var self=this;

            var newimages=[], loadedimages=0

            var arr=(typeof arr!="object")? [arr] : arr;//肯定arr 爲一個數組

            function imageloadpost(){

                loadedimages++;//

                if (loadedimages==arr.length){

                    self.createImg(new images);//圖片所有加載後的調用函數

                }

            }

            for (var i=0; i< arr.length; i++){

                newimages[i]=new Image()//爲每個圖片建立一個圖片對象

                newimages[i].src=arr[i]

                newimages[i].onload=function(){//圖片加載成功

                    imageloadpost()

                }

                newimages[i].onerror=function(){//圖片加載失敗

                imageloadpost()

                }

            }

        },

 

//繪製轉盤盤面

createCircle：function (){

        var canvas=document.getElementById('myCanvas');

        var ctx = canvas.getContext("2d");

        var length= color.length;

        for (var i = 0; i < length; i++) {

            ctx.beginPath();

            ctx.moveTo(0,0);//移動開始點

            ctx.fillStyle=color[i];

            startAngle=(360/length)*circular*(i-1)-(Math.PI * 2 / 360) * (90/2 + 180/length);//計算每一個扇形開始角度

             endAngle=(360/length)*circular*i-circular * (90/2 + 180/length);//計算每一個扇形結束角度

            ctx.arc(0,0,145,startAngle,endAngle,false);//繪製扇形

            ctx.closePath();

            ctx.stroke();

            ctx.fill();

        };

 

        ctx.restore();

    };

//繪製轉盤圖片

 createImg: function (img){

            var canvas=document.getElementById('myCanvas');

            var ctx = canvas.getContext("2d");

            var circular = Math.PI/180;

            var length= imgSrc.length;

            ctx.translate(178,178);//  移動畫板圓點

            ctx.textAlign='center’;//圖片居中

            ctx.textBaseline='middle';

            //ctx.fillStyle ="#FFFFFF」;//設置字體顏色

 

            for ( var i = 0; i < length; i++) {

                ctx.save();

                ctx.beginPath();

                ctx.rotate(Math.PI*(2/length)*(-i));

                ctx.drawImage(img[i],-35,-130,70,70);//設置圖片

                    //ctx.filText =(「word",50,50,60);//設置文字

                ctx.restore();

                ctx.save();

            }  

            ctx.restore();

        },

 

//旋轉並在指定位置停下

rotate :function (index,isShowAddress){

            clearInterval(t);

            el.removeClass("on");

            var item=index;//指定位置

            num++ ;//參數，每次點擊都加一

            var angle = 360/imgSrc.length * (item) + 720*num;// 計算中止位置

            $("#myCanvas").css("-webkit-transform","rotate("+ angle +"deg)」);//利用rotate旋轉（在CSS中加入transition：transform，對動畫進行補間）

            isReturn = 1;//設置開關（可在其餘位置設置爲0，關閉開關）

            if (isReturn) {//動畫完成後再彈出提示框(

                setTimeout(function(){

                    $("#win").removeClass("hidden");

                    if (!isShowAddress) {

                        $("#btn-info").addClass('hidden')

                    };

                },1500)

            };

        }

 

 

 

//亮燈動畫

shineLight :function (){

                var i=0;

                clearInterval(t);

                t=setInterval(function(){

                    if (i >= el.length) { //一圈結束後重新開始  

                        el.removeClass("on");

                        i=0;

                        //clearInterval(t)

                    }else{

                        i++;    

                    };

                    el.eq(i).addClass("on」);// 依次亮燈（亮過的燈不滅）

                },200)

        },

 

//利用緩存判斷用戶當日是否登陸

var time =date.getFullYear() + "-";

      time += (date.getMonth()+1) + "-";

      time += date.getDate(); //獲取當前年月日

localStorage.setItem(time+"task1Over","1」);//登陸成功後設置當前時間下登陸成功緩存值

 

//進入頁面後判斷是有有登陸成功緩存

var time =date.getFullYear() + "-";

      time += (date.getMonth()+1) + "-";

      time += date.getDate(); //獲取當前年月日

 

var taskOver = localStorage.getItem(time+"task1Over」)  //調取緩存中的當前年月日是否存在

if ( taskOver ) {  //若是緩存中存在則當日登陸過

     alert(「當日已登陸")

}

 

 

 

 

//客戶端分享

 

     //組件內定義

sharePic: function (data) {

            var url = ' dd://share/pic',//分享地址（與客戶端商定）

                params = {

                    channel: data.channel || 'wechat_circle’,//定義分享類型

                    pic: data.pic,//定義分享圖片

                    jscallback: '$.ddclient.sharePicComplete’//定義回調函數

                };

 

            $.ddclient.sharePicComplete = function(cfg) {

                data.complete(cfg);

            };

 

            url = url + '?json=' + JSON.stringify(params);

            this.invoke(url);

        },

     //頁面調用

client.sharePic({

     channel:'qq' ,//分享渠道（QQ,微信等）

     pic: '123.jpg',//分享圖片（若分享氣泡則在組件和調用中均去掉這一項）

     complete: function(cfg) {//回調函數

          if (cfg.success==1) {//爲1是爲分享成功

             alert('分享成功')

             })    

       };

 }

 

 

//在項目已進入後就設置全局數據

var Game = {

        init: function(){

            client.getToken({//客戶端獲取token

                complete: function(token) {

                    React.render(<Actvity userToken={token}/>,$("#wrap")[0]);    //渲染全局組件，並傳入數據

                }

            })

 

        }    

    }

 

 

//菜單、手風琴效果

qaMenu : function (e){

            var el = $(e.currentTarget);

            var li =el.parents('li')

                li.find('p').toggle();

                li.siblings().find('p').hide();

                el.find('i').toggleClass('off');

                li.siblings().find('i').removeClass('off');

 

        }

 

 

//滾動到指定位置導航變換

 

 

//滑動時調用

$(window).bind("scroll", function (){

                self.scrollNav();

            });  

 

     //向下滑動函數 

scrollNav : function (){

            var nodeWhat = $('#what');

            var nodeQa = $('#qa');

 

            var nodeWhatTop = nodeWhat.offset().top - 80;

            var nodeQaTop = nodeQa.offset().top - 80;

            var _sTop = $(window).scrollTop();  

            var sTop = parseInt(_sTop); 

            if(nodeQaTop>sTop && sTop>nodeWhatTop) {

                $('.2F').addClass('on').siblings('a').removeClass('on');

            }else if(sTop>nodeQaTop) {

                $('.3F').addClass('on').siblings('a').removeClass('on');

            }else{

                $('.1F').addClass('on').siblings('a').removeClass('on');

            }

 

        }

 

 

 

//判斷使用設備

var ua = ppclient.getSystem();//調用組件

if (ua == 'ios') {

     alert('ios版本')

}else if (ua == 'android'') {

   alert('android')

 }else if(ua == ‘ pc’ )  {

     alert('pc')

}

 

 

//跳轉到當先域名下的其餘文件

var stage = Url.query('env') ? "?env=stage": 「」;//判斷是否爲stage環境

location.href = 'http://' + location.hostname +  '/lottery/record.html' + stage;

            }) 

 

 

// 向下滑動加載更多

 

//調用組件

var ScrollList = require('../widget/scrollList/index’)

 

//運用的組件

var LikeEachOther = React.createClass({

        getInitialState: function() {

            return{

               

            }

        },

        onError: function(res) { //錯誤函數

            $.channel.emit('onerror', res);

        },

        onSuccess: function(data, first) {// 成功後的函數

            if (this.props.onSuccess){

                this.props.onSuccess(first);

            }

        },

     formatData: function(data){//事先對數據的處理

          return data;

      }，

        renderItem: function(data) {//渲染列表（li,data是循環後的數據）

            var self = this;

            return(

                <li> </li>

                )

        },

        render: function() {

            var endTip = (//沒有數據時顯示結構

                    <div>沒有更多數據了</div>

                );

 

            var params = {//加載時須要的數據

            

            };

 

            $.extend(params, this.state.params);

 

            var listProps = {

                url: api.getLikeEachOtherList(),//ajax加載數據是接口地址

                data: params,//ajax回傳數據

                endTip: endTip,//沒有數據時顯示結構

                pageSize: params.pageSize,//每頁顯示個數

                prefixCls: 'no-list’,//UL的class名（在CSS編輯中默認添加後綴—wrap）

                onSuccess: this.onSuccess,

                renderItem: this.renderItem,

                formatData: this.formatData,

                onError: this.onError

            };

            return (

                <div>

                    <ScrollList {...listProps} ref="cardlist"/>

                </div>

            );

        }

    });

 

 

 

//table 切換

 

var ReactTab = require('../widget/tabview/index’);//調用table組件

 

 

        getInitialState: function(){//table信息初始化

            return{

                tabs:[

                    {

                        listId :'listLikeMe',

                        title:'喜歡個人人',

                        params: {

                            type: 'likeMe',

                            pageSize: 6

                        }

                    },

                    {

                        listId:'listILike',

                        title:'我喜歡的人',

                        params:{

                            type:'ILike',

                            pageSize:6

                        }

                    },

                    {

                        listId:'like',

                        title:'互相喜歡的人',

                        params:{

                            type:'like',

                            pageSize:6

                        }

                    }

                ],

                selectedIndex: 0//開始項（必須寫）

            }

        },

    

        render: function() {//  渲染UI（固定格式）

            var self = this;

            return(

                <ReactTab.Tabs selectedIndex={self.state.selectedIndex}  onSelect={self.onSelect.bind(self)} ref="tabs">

 

                    <ReactTab.TabList>

                    {

                        self.state.tabs.map(function(tab, i){

                            return (

                                <ReactTab.Tab>

                                    {tab.title}

                                </ReactTab.Tab>

                            );

                        })

                    }

                    </ReactTab.TabList>

                    {

                        self.state.tabs.map(function(tab, i){

                            return (

                                <ReactTab.TabPanel>

                                    {self.getTabPanel(tab)}

                                </ReactTab.TabPanel>

                            )

                        })

                    }

                </ReactTab.Tabs>

                )

        },

        getTabPanel: function(tab) {//table切換時的函數

            var self = this;

            var resule = [];

            //console.log(noticeData);

            if (tab.listId == "listLikeMe") {

               

               alert（’喜歡個人人table相應內容和邏輯’）

                resule = <NoticeList likeType={likeType} likeWho={likeWho}/>//渲染喜歡個人人模塊

            } else if (tab.listId == "listILike") {

                 alert（’我喜歡的人table相應內容和邏輯’）

                resule = <NoticeList likeType={likeType} likeWho={likeWho}/>

 

            } else if (tab.listId == "like") {

               alet("互相喜歡的人");

                resule = <LikeEachOther />

            };

 

            return(

                <div>

                    {resule}

                </div>

                )

        },

        onSelect:function(){//點擊是的函數（必需要寫）

        }

 

 

//react 下拉刷新，加載數據

 

constructor(props) {

        super(props);

        this.state = {

            List:[],//數據列表設置默認值

            page:1  //設置默認頁面          

        };

        this.listLoad = false;//設置列表是否已加載數據

    }

componentDidMount() {

        let self = this;

        self.scrollList(); 

    }

 

getList(){ //獲取列表數據

        let self = this;

        let url = api.getPropList();

        let page = this.state.page;

        let nextPage;

        self.listLoading = true;//設置正在加載

        let promise = $.ajax({

            url: url,

            type:'POST',

            dataType:'json',

            data: {

                page:page,

                pageSize:9

            }

        });

 

        promise.done(function(res){

            if (res.errcode == 0) {

                self.listLoad = true;//設置爲已經加載完成

                if (res.data.propList.length == 0) {

                    self.dataOver = true;//設置沒有更多數據

                    self.listLoading = true;//設置正在加載

                } else {

                    self.listLoading = false//設置不是正在加載

                };

                nextPage = page + 1;//設置下一頁頁碼

     

                self.setState({

                    List:self.state.List.concat(res.data.List),//將新拉取的數據添加到列表中

                    page:nextPage//設置新頁碼

                });

 

            } else {

                Alert.create({

                    content: res.errmsg

                });

            }

        });

    }

    scrollList(){//滾動事件

        let self = this;

        let page = this.state.page;

        let timer,nextPage;

        $(window).on('scroll' , function () {

            timer && clearTimeout(timer);

            timer = setTimeout(function () {

                if(self.dataOver || self.listLoading){//若是數據所有加載完或者正在加載不執行操做

                    return;

                } else {

                    var body = document.body, docElement = document.documentElement;

                    if(body.scrollTop > docElement.offsetHeight - docElement.clientHeight - 700){    // 700 在頁面滑到底部前700px就能夠加載,增長交互流暢性

                        self.getPropList();//向下滑動時獲取數據

                    }

                }

            } , 300);

        });

    } 

 

render() {//渲染

        let self = this;

        let List = this.state.toolsList;

        let $Li;

 

        if (self.listLoad) { //已經獲取過數據後再渲染

           

            List.forEach(function(item,index){ //循環數據

          

                $Li.push(//添加數據到dom

                    <li key = {index}>

                       <img src={item.url} onClick={self.showtool.bind(this,item)}/>

                    </li>

                )

            })

            return (

               

                   <div className="tools">

                        <ul>

                           {$toolLi} 

                        </ul>

                        {self.dataOver ? <div className="isEnd">沒有更多數據啦</div> : null}//沒有數據試顯示

                        {!self.listLoading ?<div className="isEnd">正在加載中...</div> : null}//正在加載中顯示

                    </div>

            );

        } else {

            return null;

        };

 

    }

 

添加 全局事件（在須要時調用）

$.channel.on('backlist', ()=>{ //在全部模塊外添加全局事件

    ReactDOM.render(<UpFollower />, wrap);//點擊事件後觸發的效果

});

 

goBack() {

        $.channel.emit('backlist’);// 調用全局事件

    }

 

 

銷燬當前Dom中的模塊並從新渲染

ReactDOM.unmountComponentAtNode(wrap);

ReactDOM.render(<Photo id={id} userInfo={this.state.userInfo} />, wrap);

 

圖片剪切

<img src={item.avatar + '?imageView2/1/w/158/h/137’}//在SRC後拼接（1：是否按比例剪切；w:剪切寬；H:剪切的高）

 

從數組中找出特定索引值的一項 

userInfo.forEach(function(item,index) { //循環數組

            if (index == id) { //當前的索引值等於指定索引時

                imgArr = item;//將這組 數據賦值給一個新的數組

            };    

        });

        self.setState({ //新數組就是要找的數組

            images:imgArr.images

        })

 

 

擴展數據（修改當前數據）

$.extend(userInfo, {//擴展userInfo數據

            hasBindPayPal: 1,//改變項和值

            bindOpenid: paypalAccount

        })

        this.setState({//從新定義數據

            userInfo: userInfo

        })

 

 

 

在現有組件上改造組件

var  Dialog = require('module/dialog/index’);//引用原文件

 

let templateList = //須要改變的內容（字段名和是原文件名相同）

        ['<div class="popbox">',

            '<div class="content">{{content}}</div>',

            '<div class="btn">',

                '<button class="cancel" data-id="close">'+lang['取消']+'</button>',

                '<button class="confirm" data-id="confirm">'+lang['肯定']+'</button>',

            '</div>',

        '</div>'];

 

module.exports = Dialog.extend({//擴展源文件（用新內容覆蓋原文件）

    defaults: { //重現改寫（須要改寫的字段名和原文件的相同）

        template : templateList.join(''),

    }

});

 

 

驗證表單是否已輸入

if (paypal.trim().length == 0) {//當去除空格後字符長度爲零時

            new Dialog({ //彈窗

                content: '請輸入paypal帳號'

            }).create();

            return;//返回再也不向下

        }

 

 

 發送驗證碼

var Timer  = require('module/timer/index’);//引用倒計時插件

getInitialState() {

        return {

            disVerifyCode: false//設置不可點擊狀態默認值爲false

        };

    },

clicVerifyCode(){  

        second.removeClass('hidden’);//顯示秒的DOM（因倒計時組件0秒時，不隱藏）

        code.addClass('dis’);//點擊獲取驗證碼後顯示置灰樣式

        this.setState({

            disVerifyCode:true//將不可點擊狀態設置爲true

        });

 

        if (this.state.disVerifyCode) {//當不可點擊時直接返回

            return;

        } else {

            let timer = self.timer = new Timer({//調用倒計時插件

                remainTime : '60’,

                isDoubleBit: true,

                selector : {

                    second : '[data-second]'

                }

            });

            self.timer.on('end' , function () {//當倒計時中止時回覆原有狀態

                second.addClass('hidden');

                code.removeClass('dis');

                self.setState({ //設置不可點擊狀態爲false

                    disVerifyCode:false

                });

            });

 

            self.getverifyCode();// 調取發送驗證碼接口

        };

 

    }

 

 

二進制pb文件傳輸數據

var cashWpb = require('../pb/cash');

var publicpb = require('../pb/public');

var pbajax = require('module/pbajax/index');

var cashResult = require('up-module/index');

var businessData = new cashWpb.Mall.WithdrawExecute.Request({//編輯轉換回傳數據（cashWpb ：引用的文件，Mall.WithdrawExecute：層級，Request：回傳數組層  ）

            bill: bill,

            transactionId: transactionId,

            verifyCode: verifyCode

        });

        pbajax.do({ //請求接口成功

            service: 'mall',    

            api :'/mall/withdraw/execute’,//文件名

            header: {

                userToken: url.query('userToken') //頭信息

            }  

        }, businessData, function(res){

 

              let dataWrap = publicpb.Result.decode(res), data;//解二進制碼（publicpb：解碼插件，Result：數據層）

              let tip = lang['系統異常'];

 

              if(dataWrap.code == 1){ 

                  let dialog = new Dialog({

                      type:'confirm',

                    content: lang['提現成功']

                });

                dialog.create();

                dialog.on('confirm',function(){ //回調成功

                    cashResult.reportCashResult({

                        success:1

                    });

                    location.reload();//刷新頁面

                })

              } else {

                  if (dataWrap.code == 12305) {

                      tip = lang['已超出最大提現額度'];

                  };

                  if (dataWrap.code == 12300) {

                      tip= lang['未綁定微信']

                  };

                  let dialog = new Dialog({

                    content: tip

                }).create();

              }

        });

 

 

若是驗證碼爲XXX那麼重複5次執行，第6次提示信息

let delayCount = 0; //設置計數器初始值爲零

if (dataWrap.code == XXX) {

      delayCount++;//若是符合條件計數器值加一

       if (delayCount > 5) {//若是計數器值達到上限則返回

            oading.hide();

             return;

       }

     self.queryResult(transactionId)//若是計數器不達到上限則反覆調用

 }

 

取出數組中字符、轉換大小寫

langOpts = ['zh-CN', 'zh-TW', 'en-US', 'vi-VN', 'ja-JP'],

langOpts.forEach((item, i) => { //遍歷數組中的每一項

        item = item.replace('-', '').toLowerCase();//將數組中的每一項帶有-的字符替換爲’’，toLowerCase大寫轉換小寫

    });

 

 

跳轉到相同域名下不一樣頁面

location.href = 'http://' + location.hostname +  '/lottery/record.html' + stage;

 

 

//圖片輪播 漸隱漸現

var count = $(".banner li").length;

        var index =0;

        var timer;

        move();

        $(".banner li:not(:first-child)").hide();

        function move(){

            timer=setInterval(function(){

                $(".banner li").eq(index).fadeIn(200).siblings().fadeOut(200);

                index++;

                if(index==count){index=0;}

            },3000);

        }

//返回頂部

        $(".top").on("click",function(){

            $("html,body").animate({scrollTop:0},500);

        });

//菜單欄

        $(".title").on("click",function(){

            var el = $(this);

            var li =el.parents('li');

                li.find('p').toggle();

                li.siblings().find('p').hide();

                li.find('i').toggleClass('off');

視頻播放

constructor(props) {

        super(props);

        this.state = {

            isPay:true

        };

    }

componentDidUpdate() {//數據改變時調用視頻方法

        if(this.state.isPay){ //可播放時調用

            this.payVidoe();

        };

    }

payVidoe(){

        let self = this;

        let myPlayer = null;

        let src = this.state.brief.content.video;

        let flvsrc = src.split('?')[0];//獲取的SRC去除後面

        let wrap = $("#videoWrap」);//

        let videoSourceArr = [ //建立video Dom 節點（數組字符串的形式）

            '<video id="video1" width="526" height="737">',

                '<source type="video/x-flv">',

            '</video>'

        ];

 

        wrap.append(videoSourceArr.join(''));//將建立的video節點添加到指定位置

        var element = $('#video1');

        setTimeout(function() { //設置延時防止建立video時數據沒有加載

            element.find('source').attr('src', flvsrc); //給source賦SRC

            myPlayer = VideoJS('video1', { //調用視頻插件

                techOrder: ['flash','html5'],

                preload:'none',

                controls:true,

                autoplay: true

            }).ready(function() {

 

            });

            $('#video1').addClass('video-js vjs-default-skin vjs-big-play-centered’);//爲video添加插件指定樣式

            self.setState({ // 正在播放時設爲不可播放

                isPay:false 

            })

        },300);

    }

 

瀑布流插件

import $ from ‘jquery’;//引入 query

import '../blocksit/index’; //引入插件

 

componentDidUpdate(){  //數據變動時引用插件

        setInterval(function(){ //異步數據運用定時器防止數據未加載就先執行插件

            $('#container').BlocksIt({

                numOfCol: 4,

                offsetX: 5,

                offsetY: 5,

                blockElement: '.grid'

            });},0)

 

    }

 

給時間戳顯示幾天前

let result,

                    minute = 1000 * 60,

                    hour = minute * 60,

                    day = hour * 24,

                    halfamonth = day * 15,

                    month = day * 30,

                    year = month *12,

                    now = new Date().getTime(),

                    timeValue = now - (schedule*1000),

                    yearB = timeValue/year,

                    monthB = timeValue/month,

                    weekB = timeValue/(7*day),

                    dayB = timeValue/day,

                    hourB = timeValue/hour,

                    minB = timeValue/minute;

                if(yearB>=1){ 

                    time = parseInt(yearB) + "年前";

                }else if(monthB>=1){

                    time=parseInt(monthB) + "個月前";

                }else if(weekB>=1){

                    time=parseInt(weekB) + "周前";

                }else if(dayB>=1){

                    time=parseInt(dayB) +"天前";

                }else if(hourB>=1){

                    time=parseInt(hourB) +"個小時前";

                }else if(minB>=1){

                    time=parseInt(minB) +"分鐘前";

                }else{

                    time="剛剛發表";

                }

多語言版本

/**

 * @fileoverview 語言包定義

 * @filetype ES6

 */

define(function(require, exports, module) {//建立多語言模塊

    var zhcn = require('./zhCN’),//對應的多語言包

        zhtw = require('./zhTW'),

        enus = require('./enUS'),

        vivn = require('./viVN'),

        jajp = require('./jaJP'),

        areg = require('./arEG'),

 

        url = require('module/url/index’),

        langOpts = ['zh-CN', 'zh-TW', 'en-US', 'vi-VN', 'ja-JP','ar-EG’],//將多語言包寫成對應的數組（裏面是字符串）

        laQuery = url.query('lang') || 'en-US’,//獲取URL上的語言環境

        langType = laQuery.replace('-', '').toLowerCase(),//去掉URL上的」-「,並轉換成小寫

        temp = {};

    langOpts.forEach((item, i) => {//循環多語言包對應的數組

        item = item.replace('-', '').toLowerCase();//去掉」-「，並轉換成小寫

        temp[item] = eval(item);//將多語言標示（字符串）轉換成多語言包相應的變量

    });

 

    module.exports = temp[langType] || temp.zhCN //引用相應的多語言包

});

/** 

 * @filetype ES6

 * @author 

 */

module.exports = { //以中文爲鍵，對應的語言爲值

    '可提現金額': '引き出せる金額：',

    

};

const lang = require('./lang/index’);//在文件中引用多語言

lang['可提現金額’] //引用

 

從數組中查找一項

排查錯誤方法：

try {

                var self = this;

                var _url = api.createGame();

                var sid = localStorage.getItem('sid');

                var shareTitle = '真心話大冒險';

                var shareIcon = global.gameIcon ;

                var shareUrl =location.href;

                var shareText = "";

                var arrShare=["討厭ヽ(≧Д≦)ノ人家就想和你玩這個！","點進來的都是真愛！"];

                var shareText=arrShare[ new Date().getTime() % arrShare.length];

            } catch (e) {

                alert(e.message);

            }

 

 

 

 

 jQuery.axjsonp=function(url, data, successfn) {         data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;                $.ajax({         //提交數據的類型 POST GET         type: "POST",         //async:false,          //提交的網址         url: url,         //提交的數據         data: data,         //返回數據的格式         dataType: "jsonp",//"xml", "html", "script", "json", "jsonp", "text".             jsonp: "callbackparam",//傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名(默認爲:callback)             jsonpCallback:"success_jsonpCallback",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名             //在請求以前調用的函數             beforeSend: function () { $("#btn_loading").css('display', '');},             //成功返回以後調用的函數                          success: function (data) {                 successfn(data);             },             //調用執行後調用的函數             complete: function (XMLHttpRequest, textStatus) {                 $("#btn_loading").css('display', 'none');                 //$("#btn_loading").css('display','none');             },             //調用出錯執行的函數             error: function(XMLHttpRequest, textStatus, errorThrown) {                           alert("AJAX請求錯誤：請求狀態碼："+XMLHttpRequest.status+" readyState:"+XMLHttpRequest.readyState+"錯誤："+textStatus);                     }             });     };     

 

 

 

 

<script type="text/javascript"> /* * 智能機瀏覽器版本信息: * */   var browser={     versions:function(){            var u = navigator.userAgent, app = navigator.appVersion;            return {//移動終端瀏覽器版本信息                 trident: u.indexOf('Trident') > -1, //IE內核                 presto: u.indexOf('Presto') > -1, //opera內核                 webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核                 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核                 mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否爲移動終端                 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端                 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器                 iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否爲iPhone或者QQHD瀏覽器                 iPad: u.indexOf('iPad') > -1, //是否iPad                 webApp: u.indexOf('Safari') == -1 //是否web應該程序，沒有頭部與底部             };          }(),          language:(navigator.browserLanguage || navigator.language).toLowerCase() } document.writeln("語言版本: "+browser.language); document.writeln(" 是否爲移動終端: "+browser.versions.mobile); document.writeln(" ios終端: "+browser.versions.ios); document.writeln(" android終端: "+browser.versions.android); document.writeln(" 是否爲iPhone: "+browser.versions.iPhone); document.writeln(" 是否iPad: "+browser.versions.iPad); document.writeln(navigator.userAgent); </script>

 

 

 

 

var arr=[1,2,3,4],a=1;

 

        for (var i = arr.length; i--;) {

            var item=arr[i]

            if (item==a) {

                arr.splice(i,1)

            };

        };

 

從字符串中提取數字

 

var v ="我要提問Dome_8";

s=""

for(i=0;i<v.length;i++)

{

if("0123456789".indexOf(v.substr(i,1))>-1)

s+=v.substr(i,1)

}

alert(s)

     或者

var str = "中華人民共和國04314fdsa";

alert(str.replace(/^[^\d]*(\d+)[^\d]*$/, "$1"));

 

判斷數組中數值大小

 

function compare(value1 , value2){ // 升序

if( value1 < value2 ){

     return -1;

} else if( value1 > value2 ){

     return 1;

} else { return 0; }

};

function compare(value1 , value2){ // 降序

if( value1 < value2 ){

     return -;

} else if( value1 > value2 ){

     return -1;

} else { return 0; }

};

 

示例：

function compare(value1 , value2){

if( value1 < value2 ){

     return -1;

} else if( value1 > value2 ){

     return 1;

} else { return 0; }

};

var values = [0,1,5,10,15];

values.sort(compare);

alert(values);

 

 

排查錯誤方法：

try {

                var self = this;

                var _url = api.createGame();

                var sid = localStorage.getItem('sid');

                var shareTitle = '真心話大冒險';

                var shareIcon = global.gameIcon ;

                var shareUrl =location.href;

                var shareText = "";

                var arrShare=["討厭ヽ(≧Д≦)ノ人家就想和你玩這個！","點進來的都是真愛！"];

                var shareText=arrShare[ new Date().getTime() % arrShare.length];

            } catch (e) {

                alert(e.message);

            }

 

 

 

 

 jQuery.axjsonp=function(url, data, successfn) {         data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;                $.ajax({         //提交數據的類型 POST GET         type: "POST",         //async:false,          //提交的網址         url: url,         //提交的數據         data: data,         //返回數據的格式         dataType: "jsonp",//"xml", "html", "script", "json", "jsonp", "text".             jsonp: "callbackparam",//傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名(默認爲:callback)             jsonpCallback:"success_jsonpCallback",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名             //在請求以前調用的函數             beforeSend: function () { $("#btn_loading").css('display', '');},             //成功返回以後調用的函數                          success: function (data) {                 successfn(data);             },             //調用執行後調用的函數             complete: function (XMLHttpRequest, textStatus) {                 $("#btn_loading").css('display', 'none');                 //$("#btn_loading").css('display','none');             },             //調用出錯執行的函數             error: function(XMLHttpRequest, textStatus, errorThrown) {                           alert("AJAX請求錯誤：請求狀態碼："+XMLHttpRequest.status+" readyState:"+XMLHttpRequest.readyState+"錯誤："+textStatus);                     }             });     };     

 

 

 

智能機瀏覽器版本信息

<script type="text/javascript"> /* * 智能機瀏覽器版本信息: * */   var browser={     versions:function(){            var u = navigator.userAgent, app = navigator.appVersion;            return {//移動終端瀏覽器版本信息                 trident: u.indexOf('Trident') > -1, //IE內核                 presto: u.indexOf('Presto') > -1, //opera內核                 webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核                 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核                 mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否爲移動終端                 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端                 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器                 iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否爲iPhone或者QQHD瀏覽器                 iPad: u.indexOf('iPad') > -1, //是否iPad                 webApp: u.indexOf('Safari') == -1 //是否web應該程序，沒有頭部與底部             };          }(),          language:(navigator.browserLanguage || navigator.language).toLowerCase() } document.writeln("語言版本: "+browser.language); document.writeln(" 是否爲移動終端: "+browser.versions.mobile); document.writeln(" ios終端: "+browser.versions.ios); document.writeln(" android終端: "+browser.versions.android); document.writeln(" 是否爲iPhone: "+browser.versions.iPhone); document.writeln(" 是否iPad: "+browser.versions.iPad); document.writeln(navigator.userAgent); </script>

 

 

移動端自動適應字體

function font(w) {     var w = w || 640,         docEl = document.documentElement,         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',         recalc = function () {             var clientWidth = docEl.clientWidth;             if (!clientWidth) return;             docEl.style.fontSize = 100 * (clientWidth / w) + 'px';         };     if (!document.addEventListener) return;     window.addEventListener(resizeEvt, recalc, false);     document.addEventListener('DOMContentLoaded', recalc, false); } font(); // font(720);