Summary of UI module design and practical application of agent mode

introduction

Last month mod The editor makes an app store like UI modular , Summed up the experience and lessons to share with you ~
Some key codes are posted in the appendix , Novice friends can refer to .

One . Use the agent mode to control the process

1. What problem does the agent model solve ？

a. What is agent mode ？

Quote the explanation of the rookie tutorial ： In agent mode （Proxy Pattern） in , One class represents the function of another . for instance , Buy tickets on Ctrip , In fact, Ctrip doesn't sell tickets , Just help customers to China Southern Airlines 、 Shandong Airlines and other major airlines buy tickets , And provide some services . It's a class （ Ctrip ） Represents the function of another class （ Airline company ）.

b. What problem does the agent model solve ？

Take buying tickets as an example , Why don't customers buy tickets directly from airlines , And choose Ctrip “ Middlemen earn difference ” Well ？ If the customer buys tickets directly from the airline , You need to check the relevant routes first , Check the nearby airport , I have to go to the airline to buy tickets , Book your own transfer , The hotel … If you use Ctrip , Just enter the origin 、 Destination , Ctrip will help customers calculate the route , The customer just needs to click , Ctrip will help customers buy tickets , Order a pick-up and drop off machine , Book the hotel … Just pay a little more , You can take the opportunity more conveniently and intelligently .
Back to programming , Proxy classes provide services to user classes , Conversely, the relevant processes of user classes are controlled by proxy classes . The main advantage is that it can provide a unified interface for process control , For customers and services （ Airline company ） decoupling , The disadvantage is that there will be more function calls .

2. My practice

a. Ideas

This function module involves a large number of http Requests and related callbacks , And there are some same parameters （parentGameId,languageType…） And the same control operation （ Request interval , Request blocking , Broadcast callback data, etc ）. Therefore, the agent class is adopted UI and http Control and decoupling in the middle layer . Mainly provide the following services ：

1. Add, modify, delete and check the agent request
2. Interval blocking control of proxy requests , It also supports mandatory requests
3. Request failed error log printing
4. Request the embedding point of data
5. Agent event callback

b. Sequence diagram

Two . Data synchronization and interface refresh

For some data that needs to be resident in memory , It is best to adopt unified data memory management . In other words , Is for
There should be no duplicate of the same data . We can set up a data management layer , When the data layer data is updated , Notify listeners （ Here are some display layers ） My data has changed , Let the listener decide whether to update the data or display .

appendix

1. Demand diagram

a. main interface

b. The secondary interface -mod details

c. Three level interface - Author's business card

2. Proxy class key code reference

a. Registration and de registration of proxy request

local DelegateDic = {
    }

function ModAsyncProxy:regDelegateRequest(key,req,backEvent,cb,interval)
    if not (key and req and backEvent and type(req) == "function") then
        Lib.logDebug("!!!ModAsyncProxy param is error")
        return
    end

    if DelegateDic[key] ~= nil then
        Lib.logDebug("!!!ModAsyncProxy this key has reg,key: "..key)
        return
    end

    DelegateDic[key] = {
    
        key = key,
        req = req,
        event = backEvent,
        lastReqTimeStamp = -1,
        isReq = false,
        interval = interval or 0,
        cb = cb
    }
end

function ModAsyncProxy:unRegDelegateRequest(key)
    if not key then
        return
    end
    DelegateDic[key] = nil
end

function ModAsyncProxy:clear()
    for k,v in pairs(DelegateDic) do
        self:unRegDelegateRequest(k)
    end
end

b. Agent request process control

function ModAsyncProxy:request(key,...)
    local info = DelegateDic[key]
    if not info then
        Lib.logDebug("this key not register,key:"..key)
    end

    if info.isReq == true then
        return
    end

    if os.time() - info.lastReqTimeStamp < info.interval then
        return
    end

    self:doRequest(key,...)
end

function ModAsyncProxy:forceRequest(key,...)
    self:doRequest(key,...)
end

function ModAsyncProxy:doRequest(key,...)
    local info = DelegateDic[key]
    info.isReq = true
    info.lastReqTimeStamp = os.time()
    info.req(function(resp,isSuccess,url,param,body)
        self:onResponse(key,resp,isSuccess,url,param,body)
    end,...)
end

c. Proxy request callback processing

local PrintErrorInfo = function(key,code,url,param,body)
    local errorInfo = {
    
        key = key,
        code = code,
        url = url,
        param = param,
        body = body
    }
    Lib.logInfo("=== Mod Request Error info: ",errorInfo)
end

function ModAsyncProxy:onResponse(key,resp,isSuccess,url,param,body)
    local info = DelegateDic[key]
    if not info then
        return
    end

    info.isReq = false

    if not isSuccess then
        PrintErrorInfo(key,resp.code,url,param,body)
        return
    end

    Lib.logInfo("===Receive ModAsync Key:"..key,resp.data)
    if info.event then
        Lib.emitEvent(info.event,resp.data)
    end
    if info.cb then
        info.cb(resp.data)
    end
end

3. Customer key code reference

a. Register and unregister proxy requests

-- Registration request 
[email protected] ModAsyncProxy
local ModAsyncProxy = T(Lib,"ModAsyncProxy")
function WidgetModSearch:init()
	-- ......
	self.reqSearchKey = "ModSearch_Search"
	ModAsyncProxy:regDelegateRequest(self.reqSearchKey,AsyncProcess.GetSearchModGameList,
		Event.EVENT_MOD_RESPONSE_MAP_SEARCH)
		
	self._allEvent[#self._allEvent + 1] = Lib.subscribeEvent(Event.EVENT_MOD_RESPONSE_MAP_SEARCH, function(data)
		self:onResponseSearch(data)
	end)
end

-- Anti registration 
function WidgetModSearch:onDestroy()
	if self._allEvent then
		for k, fun in pairs(self._allEvent) do
			fun()
		end
	end
	
	ModAsyncProxy:unRegDelegateRequest(self.reqSearchKey)
end

b. request

function WidgetModSearch:requestModSearchMap(pageNo)
	local pageNo = pageNo or (self.pageNo + 1)
	local pageSize = Define.ModSearchItemOnceNum
	local keyWord = self.keyWord
	ModAsyncProxy:request(self.reqSearchKey,keyWord,pageNo,pageSize)
end

``