自研框架wap.js實踐

 

示例

     使用分爲3個步驟：

               1， 配置模板渲染中心，方便別人能夠看到你的模板渲染，請求是什麼關係，複雜度怎樣  

               2， 配置事件分發中心  方便觀察事件分發，事件複雜度

               3，寫對應的請求方法、渲染方法。  流程由框架自動串起來。若是還有其餘_開頭的方法(標記私有），均是輔助渲染或事件的。

                     我認爲，界面，存在模板渲染，和事件分發兩大主要業務！這是我創建這兩中心的緣由。

/*羣紅包*/
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，界面能夠比喻成小米。

 

架構

         

            

                  

主要功能       

/*模板爲空的依賴*/
        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
        },

 

源碼

　　github上下載