php/www/webapp/o2o/js/page/home.js

define(['$', 'template', 'IScroll', 'product', 'user', 'native', 'config', 'address'], function ($, template, IScroll, product, user, native, config, address) {

    /*
     * 先定义一些模块内用到的function
     */
    function back(event) {
        event.preventDefault();
        native.back();
    }

    /*
     * 模块结构：5部分。
     * title:题目。
     * content:不知道是什么，似乎从没用过。
     * 以下可以当作生命周期回调，虽然并不清楚是什么时候回调的……
     * init:根据上一个页面传来的pageData初始化本页数据，生成页面，绑定事件。
     * beforeopen:接收上一个页面传来的数据、有需要的话重置数据
     * afteropen:做一些网络请求。
     * beforeclose：
     */
    return {
        title: '壹管家上门服务',
        body: '',
        init: function (pageData, dtd) {
            /* this是什么？ */
            var $view = this;
            var $doc = $(document);

            /* 定义按钮事件。
             * 为什么不是$(selector).onclick(function)呢？
             */

            //返回
            $.newTouch('.back-button', function (event) {
                back.call(this, event);
            }, $view);

            $view.on('tapBackButton', function (event) {
                back.call(this, event);
            });

            //客服电话
            $.newTouch('.service-telephone', function (event) {
                event.preventDefault();

                native.call('4000328170');
            }, $view);
            //点击banner-1进入充值卡页
            $.newTouch('.btn-banner-recharge', function (event) {
                event.preventDefault();
                $doc.trigger('spa:navigate', {
                    hash: 'recharge',
                    pushData: {
                        needReload: true
                    }
                });
            }, $view);
            //点击banner-2进入充值卡页面
            $.newTouch('.btn-banner-coupon', function (event) {
                event.preventDefault();
                $doc.trigger('spa:navigate', {
                    hash: 'myCoupon',
                    pushData: {
                        needReload: true
                    }
                });
            }, $view);
            /* 点击产品列表的某一项 */
            $.newTouch('.btn-product', function (event) {
                event.preventDefault();
                var type = parseInt($(this).attr('data-product-type'));
                /*
                 * 这个写法是SPA路由框架规定的。
                 * $(selector).trigger(event, params)是jQuery的：触发被选元素上的指定事件
                 */
                $doc.trigger('spa:navigate', {
                    hash: 'placeOrder',
                    pushData: {
                        product: product.allList[type - 1],
                        needReset: true
                    }
                });
            }, $view);

            /* 点击标签
             $.newTouch('.btn-product-group', function (event) {
             event.preventDefault();
             if ($(this).hasClass('global-msg-active')) return;
             $(this).addClass('global-msg-active').siblings().removeClass('global-msg-active');
             var index = $(this).attr('data-group-index');
             switch (index){
             case '0':
             $('#list0').show().siblings().hide();
             break;
             case '1':
             $('#list1').show().siblings().hide();
             break;
             case '2':
             $('#list2').show().siblings().hide();
             break;
             case '3':
             $('#list3').show().siblings().hide();
             break;
             }
             }, $view);  */

            // 点击……不知如何说明……
            $.newTouch('.btn-action-my-order', function (event) {
                event.preventDefault();
                $doc.trigger('spa:navigate', {
                    hash: ''
                });
            }, $view);

            // 个人中心
            $.newTouch('.btn-action-coupon', function (event) {
                event.preventDefault();
                user.checkLogin(function () {
                    $doc.trigger('spa:navigate', {
                        hash: 'mine',
                        pushData: {
                            needReset: true
                        }
                    });
                });
            }, $view);

            /* 招聘
             $.newTouch('.btn-action-hire', function () {
             event.preventDefault();
             $doc.trigger('spa:navigate', {
             hash: 'hire'
             });
             }, $view); */

            /* 不知道什么意思。*/
            dtd.resolve();

            /* 跳转到填写订单页面
             function goProductPage(type) {
             如果没登陆会跳转到登录。这个function参数是登陆成功的回调
             user.checkLogin(function () {
             预期字段不足 先清除本地数据
             if (!user['productVisit'][13]) {
             localStorage.removeItem('user_productVisit');
             localStorage.removeItem('user_productVisit-time');
             user['productVisit'][13] = {
             visited: false
             }
             }
             判断是否是第一次看这个类型。如果不是的话跳转到placeOrder页面
             if (user['productVisit'][type]['visited']) {

             } else {
             如果是的话跳转到product页面
             $doc.trigger('spa:navigate', {
             hash: 'product',
             pushData: {
             type: type,
             needReload: true,
             fromHome: true
             }
             });
             并把这个类别的visit属性设置为true
             user.productVisit[type].visited = true;
             user.setCache('productVisit');
             }
             // });
             } */

            /* 跳转到coming页面。
             function goComing(type) {
             user.checkLogin(function () {
             $doc.trigger('spa:navigate', {
             hash: 'coming',
             pushData: {
             productType: type
             }
             });
             });
             }*/

            /* 不知道这是干什么。离线显示一张图片？
             if (!user.activities['visited_offservice0126']) {
             // showActivity();
             }
             function showActivity() {
             var imgUrl = 'http://wozhua-others.qiniudn.com/20160126-offservice.png';
             var d = new Image();
             d.src = imgUrl;
             d.onload = function () {
             $doc.trigger('spa:openpanel', ['activity', {
             content: imgUrl
             }]);
             }
             } */
        },
        beforeopen: function (pageData, dtd) {
            localStorage.removeItem('cart_products');
            dtd.resolve();
            native.switchPopGesture(true);
        },
        afteropen: function (pageData, dtd) {
            var $view = this;
            var $doc = $(document);

            /* 如果需要重新加载，就请求服务列表。 */
            if (!pageData.pushData.dontNeedReload) {
                $doc.trigger('spa:openloader');

                /*
                 * tmodjs：
                 * 使用模版语法把数据填到html文件，生成一个js文件。
                 * var tpl = template(html文件路径，数据)
                 */
                var tpl = template('home/index', {
                    showNavBar: !config.isWX && !config.isChubao
                });

                /*
                 * jQuery：
                 * 提供一个html元素到js变量的映射，和findViewById一个作用。
                 * $(selector).???(xxx)
                 * 其中selector是选择器，对应html的元素、类、id等
                 * ???是jQuery定义的事件
                 * xxx是参数，具体是什么取决于事件
                 *
                 * 这句的意思是，选取class=".spa-page-body"的元素，把tpl插入其中
                 */
                $('.spa-page-body', $view).html(tpl);

                /* 建立IScroll */
                setTimeout(function () {
                    pageData.scroll = new IScroll('#homeScroll');
                    var swiper = new Swiper('.swiper-container', {
                        autoplay: 2500,
                        pagination: '.swiper-pagination',
                        paginationClickable: true,
                        simulateTouch : false
                    });
                }, 500);

                // 目前的作用只是供后端判断，该用户是否为新用户，所以没有回调。
                product.getListAll(user.id);

                address.getList({
                    request_from: 'weixin',
                    user_id: user.id
                });

                $doc.trigger('spa:closeloader');
            }

            /* 又是这个。不知道什么玩意…… */
            dtd.resolve();

            //强制设置首页的上一页是空的，后面再调整框架
            pageData.prevPage = $('.spa-page-empty');
        },
        beforeclose: function (pageData, dtd) {
            dtd.resolve();
            native.switchPopGesture(false);
        }
    }
})