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);

            /* 点击产品列表的某一项 */
            $.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');
                }, 500);
                // product.getListAll(user.id, function (res) {
                // });

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

                user.getCouponList(user.id);

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

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

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