mominger / blog

Tech blog
45 stars 3 forks source link

自研框架wap.js实践 #8

Open mominger opened 9 years ago

mominger commented 9 years ago

示例

/*群红包*/
define(function(require, exports, module) {
    //基本库
    require('zepto');

    //自启动组件
    require.async('header');
    require.async('footer');

    var Wap = require('wap-sea');
    var InviteFriends = require('invitefriends');
    var ActiveEnd = require('activeend');

    var GetGrouphb = Wap.Service.extend({
        ClassName: 'getgrouphb',

        /**
         * 模板渲染中心
         */
        tpls: {
            'gethbs': 'reqGroupHB renderGroupHB none1',  //可以加errorGroupHB处理链异常
            'none1': 'reqShareInfo renderShareInfo'
        },

        /**
         * 事件分发中心
         */
        events:{
            "click share-btn document": 'shareBtnHandler'
        },

        /**
         * 初始化参数等
         */
        init: function(){
            this.root = $('.get-hbs');
        },

        //请求群红包数据  对应模板配置中心的请求
        reqGroupHB: function(){
            var data =  this.Const.STATUS[this.URL_PARAM.activityFlag];
            data && (data.resData = this.URL_PARAM);
            return data;
        },

        //渲染群红包   对应模板配置中心的渲染, 参数 data,tplRender会自动注入进来,你看不到模板。
        renderGroupHB: function(data,tplRender){
            //解析数据源 、数据异常处理
            if(!data){
               return this.Ext.tipNetError();
            }
            if(data.id == 4){
                return  ActiveEnd();
            }

            //模板渲染
            var dom = tplRender(data);
            this.root.find('>section').append(dom);

            //渲染后处理
            this.root.addClass(data.rootClass).show();
        },

        /**
         * 请求分享信息
         */
        reqShareInfo: function(data){
           if(!data) return;

            var resData = data.resData;
            this.shareParam = {
                activityId: resData.activityId,
                solutionId: resData.solutionId,
                type:  resData.shareInfoType,
                path: this.Const.PRO_PATH + (data.isShareHBs ? this.Const.DO_GET_GROUP_HB : this.Const.DO_GET_HB)
            };
            return this.Dao.queShareInfo({data: this.shareParam});
        },

        /**
         * 渲染分享信息
         */
        renderShareInfo: function(data){
            this.Ext.share($.extend({},this.shareParam,data));
            this.shareParam = null;
        },

        /**
         * 分享按钮事件
         */
        shareBtnHandler: function(e){
            $(e.target).parent().hasClass('data-focus-sn') ? this.Ext.toFocusSN() : InviteFriends({
                status: this.currentStatus
            });
        }
    });

    new GetGrouphb();

    //埋点
    require.async('buriedpoint');
});
  

设计理念

当今几乎所有的产品都是经过流水线生产出来的。 先组装A零件,再组装B零件之类。 如果没有流程,没有对零件的参数规范。每个产品的一致性、生产效率就很低,质量也难以保障。 所以界面也需要框架。需要管理流程,需要规范主要方法的IO。 如果说SPA是一台精细的iphone,界面可以比喻成小米。

架构

wapjs wapjs2

主要功能

/*模板为空的依赖*/
        tpls: {
            'gethbs': 'reqGroupHB renderGroupHB none1',  //可以加errorGroupHB处理链异常
            'none1': 'reqShareInfo renderShareInfo'
        },

        /**
         * 有模板的依赖
         */
        tpls: {
            'gethbs': 'reqGroupHB renderGroupHB getshare',  //可以加errorGroupHB处理链异常
            'getshare': 'reqShareInfo renderShareInfo'
        },

        /**
         * 并行模板链
         */
        tpls: {
            'gethbs,getshare': 'reqGroupHB renderGroupHB getshare'  //可以加errorGroupHB处理链异常
        },

        /**
         * 有显式异常处理的链
         */
        tpls: {
            'gethbs': 'reqGroupHB renderGroupHB errorGroupHB getshare'
        },

        /**
         * 延迟启动链  模板名前加!,表明不会初始化,直到你启动:
         * this.allTpls['gethbs'].once();只会启动一次
         *  this.allTpls['gethbs'].run();启动多次
         */
        tpls: {
            '!gethbs': 'reqGroupHB renderGroupHB errorGroupHB getshare'
        },

        /**
         * 事件分发中心
         */
        events:{
            "click share-btn document": 'shareBtnHandler', //事件绑定到document上,通过自定义属性  share-btn 判断。 class: .开头  id: #开头
            "click .share-btn": 'shareBtnHandler',             //事件绑定到.share-btn
            "click .share-btn .mydiv": 'shareBtnHandler'     //事件绑定到.div
        }

源码