1.     
Start with the source code :

Let's look at the source code first 8188 Row to 9525 That's ok :

window.appcan && appcan.define('window',function($,exports,module){
   
    var subscribeGlobslQueue = [];// Subscription queue
   
var bounceCallQueue = [];//
   
var multiPopoverQueue = {};
    var currentOS = '';
    var keyFuncMapper = {};// mapping
   
   
/*
       
Capture android Entity key
        @param String id
Entity key's id
        @param Function callback
The callback function that starts when you click
   
   
    */
   
function monitorKey(id,callback){
        keyFuncMapper[id] = callback;
        uexWindow.setReportKey(id);
        uexWindow.onKeyPressed = function(keyCode){
            keyFuncMapper[keyCode] && keyFuncMapper[keyCode](keyCode);   
        }
    }
   
    /*
   
Open a new window
    @param String name
Name of the new window If it's time to window If it already exists, open it directly
    @param String dataType
data type :0url 1html data 2html and url
    @param String data
Loaded data
    @param Int aniId
Animation id
        0
: No animation
        1:
Push from left to right
        2:
Push from right to left
        3:
Push from top to bottom
        4:
Push from the bottom up
        5:
Fade in and out
        6:
Page left
        7:
Turn right
        8:
Water ripple
        9:
Cut from left to right
        10:
Cut right to left
        11:
From top to bottom
        12:
Cut from the bottom up

13: Cut from left to right
        14:
Cut right to left
        15:
Cut from top to bottom
        16:
Cut from the bottom up
    @param int width
Window width
    @param int height
Height of window
    @param int tpye
The type of window
        0:
Ordinary windows
        1:OAuth
window
        2:
Encrypt the page window
        4:
Forced to refresh
        8:url
Open it in the system browser
        16:view
Opaque
        32:
Hidden winwdow
        64:
wait for popOver After loading, display
        128:
Support gestures
        256:
Mark opn Of window the previous window Don't hide
        512:
Mark open The floating window of UFIDA opens wabapp
    @param animDuration
Animation duration

*/
   
function open(name,data,aniId,type,dataType,width,height,animDuration,extraInfo){
        var argObj = null;
        if(arguments.length === 1 && appcan.isPlainObject(name)){
            argObj = name;
            name = argObj['name'];
            dataType = argObj['dataType'] || 0;
            aniId = argObj['aniId'] || 0;
            width = argObj['width'];
            height = argObj['height'];
            type = argObj['type'] || 0;
            animDuration = argObj['animDuration'];
         extraInfo = argObj['extraInfo'];
            data = argObj['data'];
        }
        dataType = dataType || 0;
        aniId = aniId || 0;
        type = type || 0;
        animDuration = animDuration || 300;
     
      try{
         extraInfo = appcan.isString(extraInfo) ? extraInfo : JSON.stringify(extraInfo);
         extraInfo = JSON.parse(extraInfo);
         if(!extraInfo.extraInfo){
            extraInfo = {extraInfo:extraInfo};
         }
         extraInfo = JSON.stringify(extraInfo);
      }catch(e){
         extraInfo = extraInfo || '';
      }
     
        // Open a new window
       
uexWindow.open(name,dataType,data,aniId,width,height,type,animDuration,extraInfo);
    }

/*
   
close window
    @param String animateId
Window close animation
    @param Int animDuration
Animation duration

*/
   
function close(animId,animDuration){
        var argObj = null;
        if(arguments.length === 1 && appcan.isPlainObject(animId)){
            argObj = animId;
            animId = argObj['animId'];
            animDuration = argObj['animDuration'];
        }
        if(animId){
            animId = parseInt(animId,10);
            if(isNaN(animId) || animId > 16 || animId < 0){
                animId = -1;
            }
        }
        if(animDuration){
            animDuration = parseInt(animDuration,10);
            animDuration = isNaN(animDuration)?'':animDuration;
        }
        animDuration = animDuration || 300;
        uexWindow.close(animId,animDuration);
    }

/*
   
Execute... In the specified window js Script

@param string name The name of the window
    @param string type
Window type
    @param string inscript
Window content

*/
   
function evaluateScript(name,scriptContent,type){
        var argObj = null;
        if(arguments.length === 1 && appcan.isPlainObject(name)){
            argObj = name;
            name = argObj['name'];
            type = argObj['type'] || 0;
            scriptContent = argObj['scriptContent'];
        }
        type = type || 0;
        uexWindow.evaluateScript(name,type,scriptContent);
    }
    /*
   
Execute the script in the specified floating window
    @param String name
The name of the executed window
    @param String popName
Floating window name
    @param String scriptContent
The script content

*/
   
function evaluatePopoverScript(name,popName,scriptContent){
        var argObj = null;
        if(arguments.length === 1 && appcan.isPlainObject(name)){
            argObj = name;
            name = argObj['name'];
            popName = argObj['popName'] || 0;
            scriptContent = argObj['scriptContent'];
        }
        name = name || '';
        if(!appcan.isString(popName) || !popName){
            return;          
        }
        uexWindow.evaluatePopoverScript(name,popName,scriptContent);
    }

/*
   
Set the pull-up of the window , Drop down effect
    @param String bounceType
The type of bounce effect
        0:
No effect
        1:
Color bounce effect
        2:
Set the picture to bounce
    @param Function downEndCall
Pullback to the bottom
    @param Function upEndCall
Pull back to the end
    @param String color
Set the color of the drop-down view
    @param String imgSettings
Set display content
   
   
todo: This method needs to be overridden ,

*/

function setBounce(bounceType,startPullCall,downEndCall,upEndCall,color,imgSettings){
        var argObj = null;
        if(arguments.length === 1 && appcan.isPlainObject(bounceType)){
            argObj = bounceType;
            bounceType = argObj['bounceType'] || 1;
            startPullCall = argObj['startPullCall'];
            downEndCall = argObj['downEndCall'];
            upEndCall = argObj['upEndCall'];
            color = argObj['color'] || 'rgba(255,255,255,0)';
            imgSettings = argObj['imgSettings'] || '{"imagePath":"res://reload.png",'+
            '"textColor":"#530606","pullToReloadText":" Drag to refresh ",'+
            '"releaseToReloadText":" Release refresh ",'+
            '"loadingText":" Loading , One moment please "}';
       
        }
        color = color || 'rgba(255,255,255,0)';
        imgSettings = imgSettings || '{"imagePath":"res://reload.png",'+
        '"textColor":"#530606","pullToReloadText":" Drag to refresh ",'+
        '"releaseToReloadText":" Release refresh ",'+
        '"loadingText":" Loading , One moment please "}';

// if(!bounceType){
            // return;
        // }
       
var startBounce = 1;
        // Binding rebound notification function
       
uexWindow.onBounceStateChange = function (type,status){
            if(status == 0){
                startPullCall
&& startPullCall(type);
            }
            if(status == 1) {
                downEndCall &&
downEndCall(type);
            }
            if(status == 2) {
                upEndCall &&
upEndCall(type);
            }
        };
        uexWindow.setBounce(startBounce);
        // Set the color
       
/*if(bounceType == 1){
           
uexWindow.showBounceView('0',color,'1');
        }
        if(bounceType == 2){
           
uexWindow.setBounceParams('0',imgSettings);
           
uexWindow.showBounceView('0',color,1);
        }*/
        //
Bind pull-down callbacks
       
if(startPullCall || downEndCall ||
upEndCall){
            if(!appcan.isArray(bounceType)){
               
bounceType=[bounceType];
            }
            for(var i=0;i<bounceType.length;i++){
               
uexWindow.notifyBounceEvent(bounceType[i],'1');

setBounceParams(bounceType[i],imgSettings);
               
uexWindow.showBounceView(bounceType[i],color,'1');
               
               
            }
           
        }
    }
  
  
   var bounceStateQueue =[];
            /*
       
Handle the callback to get the bounce state
        @param string msg
The message
   
    */
   
function processGetBounceStateQueue(data,dataType,opId){
        if(bounceStateQueue.length > 0){
            $.each(bounceStateQueue,function(i,v){
                if(v && appcan.isFunction(v)){
                    if(dataType == 2){
                       
v(data,dataType,opId);
                    }
                   
                }
            });
        }
        bounceStateQueue=[];
        return;
    }

/*
       
Get the current bounce state
       
       
    */
   
function getBounceStatus(callback){
        if(arguments.length === 1 && appcan.isPlainObject(callback)){
            callback = callback['callback'];
        }
        if(!appcan.isFunction(callback)){
            return;
        }
        bounceStateQueue.push(callback);
        uexWindow.cbBounceState = function(opId, dataType, data){
            processGetBounceStateQueue(data,dataType,opId);
        };

uexWindow.getBounce();
    }
   
    /*
       
Open up and down sliding rebound
       
       
    */
   
function enableBounce(){
        //1: Turn on the rebound effect
       
uexWindow.setBounce(1);
    }
   
    /*
       
Turn off the rebound effect
   
    */
   
function disableBounce(){
        //0: Disable rebound effect
       
uexWindow.setBounce(0);
    }
   
    /*
       
Set rebound class
        @param String type
Set the type of rebound
        @param String color
Set the color of the rebound display
        @param Int flag
Set whether to add rebound callbacks
        @param Function callback
Callback function of rebound
       
   
    */
   
function setBounceType(type,color,flag,callback){
        if(arguments.length ===1 && appcan.isPlainObject(type)){
            flag = type.flag;
            color = type.color;
            callback = type.callback;
            type = type.type;
        }
        flag = (flag === void 0 ? 1 : flag);
        flag = parseInt(flag,10);
        color = color || 'rgba(0,0,0,0)';
        type = (type === void 0 ? 0 : type);
        callback = callback || function(){};
        // Force open page bounce effect
       
enableBounce();
       
       
uexWindow.showBounceView(type,color,flag);
        if(flag){
            bounceCallQueue.push({type:type,callback:callback});
            uexWindow.onBounceStateChange || (uexWindow.onBounceStateChange = function(backType,status){
                var currCallObj = null;
                for(var i=0,len=bounceCallQueue.length;i<len;i++){
                    currCallObj = bounceCallQueue[i];
                    if(currCallObj){
                        if(backType === currCallObj.type){
                            if(appcan.isFunction(currCallObj.callback)){
                                currCallObj.callback(status,type);
                            }
                        }
                    }
                }
            });
            //1: Receive callback function
           
uexWindow.notifyBounceEvent(type,1);
        }
    }
   
    /*
       
Add parameters to the top and bottom rebounds
        @param String position
Set the type of rebound
        @param Object data
To set the content displayed by rebound json Parameters
        {
            imagePath:'
The path of the image displayed ',
            textColor:'
Set the font color of the rebound content ',
            levelText:'
Set the level of text ',
            pullToReloadText:'
Drop down the content displayed beyond the boundary ',
            releaseToReloadText:'
Drag beyond the refresh boundary to display ',
            loadingText:'
Drag over the refresh threshold and release , And drag '
        }
   
    */
   
function setBounceParams(position,data){
        if(arguments.length ===1 && appcan.isPlainObject(position)){
            data = position.data;
            position = position.position;
        }
        if(appcan.isPlainObject(data)){
            data = JSON.stringify(data);
        }
        uexWindow.setBounceParams(position,data);
    }

/*
   
Show the webpage displayed after the flick
    @param String position 0
Bounce back for the top ,1 Bounce back for the bottom

*/

function resetBounceView(position){
        if(appcan.isPlainObject(position)){
            position = position['position'];
        }
        position = parseInt(position,10);
        if(isNaN(position)){
            position = 0;
        }else{
            position = position;
        }
        position = position || 0;
        uexWindow.resetBounceView(position);
    }

/*
   
Pop up a non modal prompt box
    @param String type
Mode of message prompt box display
        0:
No progress bar
        1:
There is a progress bar
    @param String position
The location of the tip on the phone
        1:left_top
        2:top
        3:right_top
        4:left
        5:middle
        6:right
        7:bottom_left
        8:bottom
        9:right_bottom
    @param String msg
Prompt content
    @param String duration
How long does the prompt box exist , Less than 0 Will not automatically turn off

*/

function openToast(msg,duration,position,type){
        var argObj = null;
        if(arguments.length === 1 && appcan.isPlainObject(msg)){
            argObj = msg;
            msg = argObj['msg'];
            duration = argObj['duration'];
            position = argObj['position'] || 5;
            type = argObj['type'];
        }
        type = type || (duration?0:1);
        duration = duration || 0;
        position = position || 5;
        // Perform jump
       
uexWindow.toast(type,position,msg,duration);
    }

/*
   
Close the prompt box

*/
   
function closeToast(){
        uexWindow.closeToast();
    }

/*
   
Move the floating window position animation
    @param String left
The position from the left border
    @param String top
The location from the upper boundary
    @param Function callback
Callback function for animation completion
    @param Int duration
Moving time of animation

*/

function moveAnim(left,top,callback,duration){
        var argObj = null;
        if(arguments.length === 1 && appcan.isPlainObject(left)){
            argObj = left;
            left = argObj['left'] || 0;
            top = argObj['top'] || 0;
            callback = argObj['callback'];
            duration = argObj['duration'] || 250;
        }
        left = left || 0;
        top = top || 0;
        duration = duration || 250;
        uexWindow.beginAnimition();
       
uexWindow.setAnimitionDuration(duration);
       
uexWindow.setAnimitionRepeatCount('0');
       
uexWindow.setAnimitionAutoReverse('0');
       
uexWindow.makeTranslation(left,top,'0');
        uexWindow.commitAnimition();
        if(appcan.isFunction(callback)) {
            uexWindow.onAnimationFinish = callback;
        }
    }
   
    /*
       
   
    */
       
   
function setWindowFrame(dx,dy,duration,callback){
        if(arguments.length === 1 && appcan.isPlainObject(dx)){
            argObj = dx;
            dx = argObj['dx'] || 0;
            dy = argObj['dy'] || 0;
            duration = argObj['duration'] || 250;
            callback = argObj['callback'] || function(){};
        }
        uexWindow.onSetWindowFrameFinish = callback;
        uexWindow.setWindowFrame(dx,dy,duration);
    }
   
   
    /*
   
Pop up a prompt box according to the specified style
    @param String selector css
Selectors
    @param String url
Loaded data content
    @param String left
On the left
    @param String top
Living distance
    @param String name
Pop up name

*/

function popoverElement(id,url,left,top,name,extraInfo){
        var argObj = null;
        if(arguments.length === 1 && appcan.isPlainObject(id)){
            argObj = id;
            id = argObj['id'] || 0;
            url = argObj['url'];
            top = argObj['top'];
            left = argObj['left'];
         extraInfo = argObj['extraInfo'];
            name = argObj['name'];
        }
        top = top || 0;
        left = left || 0;
        var ele = $('#'+id);
        var width = ele.width();
        var height = ele.height();
        var fontSize = ele.css('font-size');
        top = parseInt(top,10);
        top = isNaN(top)?ele.offset().top:top;// By default, the... Of the element itself is used top
       
left = parseInt(left,10);
        left = isNaN(left)?ele.offset().left:left;// By default, the... Of the element itself is used left
       
name = name?name:id;
       
      extraInfo = extraInfo || '';
     
        //fixed xiaomi 2s bug
       
fontSize = parseInt(fontSize,10);
        fontSize = isNaN(fontSize)? 0 : fontSize;
       
        openPopover(name,0,url,'',left,top,width,height,fontSize,0,0,extraInfo);
    }

/*
   
Open a floating window
    @param String name
Floating window name
    @param String dataType
data type 0:url 1:html 2:url html
    @param String url  url
Address
    @param String data
data
    @param Int left
On the left
    @param Int top
Living distance
    @param Int width
wide
    @param Int height
high
    @param Int fontSize
default font
    @param Int tpye
The type of window
        0:
Ordinary windows
        1:OAuth
window
        2:
Encrypt the page window
        4:
Forced to refresh
        8:url
Open it in the system browser
        16:view
Opaque
        32:
Hidden winwdow
        64:
wait for popOver After loading, display
        128:
Support gestures
        256:
Mark opn Of window the previous window Don't hide
        512:
Mark open The floating window of UFIDA opens wabapp
   
    @param Int bottomMargin
The distance of the floating window from the bottom of the parent window . Is empty or 0 when , The default is 0. It's not equal to 0 when ,inHeight Invalid parameter

*/
   
function openPopover(name,dataType,url,data,left,top,width,height,fontSize,type,bottomMargin,extraInfo){
        var argObj = null;
        if(arguments.length === 1 && appcan.isPlainObject(name)){
            argObj = name;
            name = argObj['name'];
            dataType = argObj['dataType'];
            url = argObj['url'];
            data = argObj['data'];
            left = argObj['left'];
            top = argObj['top'];
            width = argObj['width'];
            height = argObj['height'];
            fontSize = argObj['fontSize'];
            type = argObj['type'];
            bottomMargin = argObj['bottomMargin'];
         extraInfo = argObj['extraInfo'];
        }
        dataType = dataType || 0;
        left = left || 0;
        top = top || 0;
        height = height || 0;
        width = width || 0;
        type = type || 0;
        bottomMargin = bottomMargin || 0;
        fontSize = fontSize || 0;
        data = data || '';
        //fixed xiaomi 2s bug
       
fontSize = parseInt(fontSize,10);
        fontSize = isNaN(fontSize)?0:fontSize;
     
      try{
         extraInfo = appcan.isString(extraInfo) ? extraInfo : JSON.stringify(extraInfo);
         extraInfo = JSON.parse(extraInfo);
         if(!extraInfo.extraInfo){
            extraInfo = {extraInfo:extraInfo};
         }
         extraInfo = JSON.stringify(extraInfo);
      }catch(e){
         extraInfo = extraInfo || '';
      }
     
        //fixed ios bug
       
if(uexWidgetOne.platformName && uexWidgetOne.platformName.toLowerCase().indexOf('ios') > -1){
            var args = ['"'+name+'"',dataType,'"'+url+'"','"'+data+'"',left,top,width,height,fontSize,type,bottomMargin,"'"+extraInfo+"'"];
            var scriptContent = 'uexWindow.openPopover(' + args.join(',') +')';
            evaluateScript('',scriptContent);
            return;
        }
        uexWindow.openPopover(name,dataType,url,data,left,top,width,height,fontSize,type,bottomMargin,extraInfo);
    }

/*
   
Turn off the float button
    @param String name
The name of the floating window

*/

function closePopover(name){
        if(arguments.length === 1 && appcan.isPlainObject(name)){
            name = name['name'];
        }
        uexWindow.closePopover(name);
    }

/*
   
Reset the position and size of the prompt box according to the specified elements
    @param String id
Elements id
    @param String left
Distance to the left
    @param String top
The distance from the top
    @param String name
name , The default is id
    */

function resizePopoverByEle(id,left,top,name){
        var argObj = null;
        if(arguments.length === 1 && appcan.isPlainObject(id)){
            argObj = id;
            id = argObj['id'];
            left = argObj['left'];
            top = argObj['top'];
            name = argObj['name'];
        }
        left = left || 0;
        top = top || 0;
        var ele = $('#'+id);
        var width = ele.width();
        var height = ele.height();
        left = parseInt(left,10);
        left = isNaN(left)?0:left;
        top = parseInt(top,10);
        top = isNaN(top)?0:top;
        name = name?name:id;
       
uexWindow.setPopoverFrame(name,left,top,width,height);
    }

/*
   
Reset the position size of the prompt box
    @param String name popover
name
    @param String left
Distance to the left
    @param String top
The distance from the top
    @param String width
Window width
    @param String height
Window height

*/

function resizePopover(name,left,top,width,height){
        var argObj = null;
        if(arguments.length === 1 && appcan.isPlainObject(name)){
            argObj = name;
            name = argObj['name'];
            left = argObj['left'];
            top = argObj['top'];
            width = argObj['width'];
            height = argObj['height'];
        }
        left = left || 0;
        top = top || 0;
        width = width || 0;
        height = height || 0;

left = parseInt(left,10);
        left = isNaN(left)?0:left;

top = parseInt(top,10);
        top = isNaN(top)?0:top;

width = parseInt(width,10);
        width = isNaN(width)?0:width;

height = parseInt(height,10);
        height = isNaN(height)?0:height;

uexWindow.setPopoverFrame(name,left,top,width,height);
    }

/*
   
Pop up a confirmation box
    @param String title
The title of the dialog
    @param String content
The contents of the dialog
    @param Array buttons
Button text

*/
   
function windowConfirm(title,content,buttons,callback){
        if(arguments.length === 1 && appcan.isPlainObject(title)){
            callback = title['callback'];
            buttons = title['buttons'];
            content = title['content'];
            title = title['title'];
        }
        title = title || ' Tips ';
        buttons = buttons || [' determine '];
        buttons = appcan.isArray(buttons)?buttons:[buttons];
        popConfirm(title,content,buttons,callback);
    }
   
    /*
   
Pop up a warning box
    @param String title
The title of the dialog
    @param String content
The contents of the dialog
    @param Array buttons
Button text

*/
   
function popAlert(title,content,buttons){
        if(arguments.length === 1 && appcan.isPlainObject(title)){
            buttons = title['buttons'];
            content = title['content'];
            title = title['title'];
        }
        buttons = appcan.isArray(buttons)?buttons:[buttons];
        uexWindow.alert(title,content,buttons[0]);
    }
   
    /*
       
Pop up a prompt box
        @param String title
The title of the dialog
        @param String content
The contents of the dialog
        @param Array buttons
Button text
       
       
       
    */
   
function popConfirm(title,content,buttons,callback){
        if(arguments.length === 1 && appcan.isPlainObject(title)){
            callback = title['callback'];
            buttons = title['buttons'];
            content = title['content'];
            title = title['title'];
        }
        buttons = appcan.isArray(buttons)?buttons:[buttons];
        if(appcan.isFunction(callback)){
            uexWindow.cbConfirm = function(optId,dataType,data){
                if(dataType != 2){
                    return callback(new Error('confirm error'));
                }
                callback(null,data,dataType,optId);
            };
        }
       
        uexWindow.confirm(title,content,buttons);
    }
   
    /*
       
A dialog box will pop up to prompt the user for input
        @param String title
The title of the dialog
        @param String content
What the dialog box shows
        @param String defaultValue
Input box default text
        @param Array  buttons
The set of text displayed on the button
        @param Function callback 
Dialog close callback
       
       
    */
   
function popPrompt(title, content, defaultValue,
buttons,callback){
        if(arguments.length === 1 && appcan.isPlainObject(title)){
            callback = title['callback'];
            buttons = title['buttons'];
            content = title['content'];
            defaultValue = title['defaultValue'];
            title = title['title'];
        }
        buttons = appcan.isArray(buttons)?buttons:[buttons];
        if(appcan.isFunction(callback)){
            uexWindow.cbPrompt = function(optId,dataType,data){
                try{
                    var data=JSON.parse(data);
                    callback(null,data,dataType,optId);
                }
                catch(e){
                    callback(e);
                }
            };
        }
       
        uexWindow.prompt(title,content,defaultValue,buttons);
    }
   
    /*
   
Place the specified floating window at the top of all floating windows
    @param String name
The name of the floating window

*/

function bringPopoverToFront(name){
        if(arguments.length === 1 && appcan.isPlainObject(name)){
            name = name['name'];
        }
        uexWindow.bringPopoverToFront(name);
    }
   
    /*
   
Place the specified floating window at the bottom of all floating windows
    @param String name
The name of the floating window

*/
   
   
function sendPopoverToBack(name){
        if(arguments.length === 1 && appcan.isPlainObject(name)){
            name = name['name'];
        }
        uexWindow.sendPopoverToBack(name);
    }
   
    /*
       
Subscribe to a channel message , When a message is published, the callback will call the callback
        @param Int channelId
channel id
        @param Function callback
Callback function
       
    */
   
function subscribe(channelId,callback){
        if(arguments.length === 1 && appcan.isPlainObject(channelId)){
            callback = channelId['callback'];
            channelId = channelId['channelId'];
        }
        if(!appcan.isFunction(callback)){
            return;
        }
        var funName = 'notify_callback_' + appcan.getUID();
        uexWindow[funName] = callback;
       
uexWindow.subscribeChannelNotification(channelId,funName);
    }
   
    /*
       
Post a message
        @param Int channelId :
channel id
        @param String msg :
News to be published
   
    */
   
function publish(channelId,msg){
        if(arguments.length === 1 && appcan.isPlainObject(channelId)){
            msg = channelId['msg'];
            channelId = channelId['channelId'];
        }
        if(appcan.isPlainObject(msg)){
            msg = JSON.stringify(msg);
        }
       
uexWindow.publishChannelNotification(channelId,msg);
    }
   
    /*
       
Send messages to global public channels
        @param String msg
Send a message to the global channel
   
    */
   
   
function publishGlobal(msg){
        if(arguments.length === 1 && appcan.isPlainObject(msg)){
            msg = msg['msg'];
        }
       
uexWindow.postGlobalNotification(msg);
    }
   
    /*
       
Handle global callback subscription messages
        @param string msg
The message
   
    */
   
function processSubscribeGolbalQueue(msg){
        if(subscribeGlobslQueue.length > 0){
            $.each(subscribeGlobslQueue,function(i,v){
                if(v && appcan.isFunction(v)){
                    v(msg);
                }
            });
        }
        return
   
}
   
    /*
       
Subscribe to global channels
        @param Function callback
Callback for subscription
   
    */
   
function subscribeGlobal(callback){
        if(arguments.length === 1 && appcan.isPlainObject(callback)){
            callback = callback['callback'];
        }
        if(!appcan.isFunction(callback)){
            return;
        }
        subscribeGlobslQueue.push(callback);
        uexWindow.onGlobalNotification = function(msg){
            processSubscribeGolbalQueue(msg);
        };
    }
   
    /*
       
Remove global subscription Events
        @param Function callback
: Reference to the callback to remove
   
    */
   
function removeGlobalSubscribe(callback){
        if(arguments.length === 1 && appcan.isPlainObject(callback)){
            callback = callback['callback'];
        }
        if(!appcan.isFunction(callback)){
            return;
        }
        for(var i=0,len=subscribeGlobslQueue.length;i<len;i++){
            if(subscribeGlobslQueue[i] === callback){
                subscribeGlobslQueue.splice(i,1);
                return;
            }
        }
    }
   
    /*
       
Handle multi window sliding callback events
       
    */
   
function processMultiPopover(err,res){
        if(err){
            //todo call error
       
}else{
            if(appcan.isString(res)){
                res = JSON.parse(res);
            }
            if(!res.multiPopName){
                return;
            }
            var multiCalls = multiPopoverQueue[res.multiPopName];
            $.each(multiCalls,function(i,fun){
                if(appcan.isFunction(fun)){
                    fun(null,res);
                }
            });
        }
    }
   
    /*
       
Pop up multi page floating window
        @param String popName:
The name of the pop-up window
        @param String content:
Incoming data
        @param String dataType:
The type of incoming data 0url How to load ;1html Content How to load ;2: both url The way , And then there is html Content mode
        @param Int left:
The distance to the left
        @param Int top:
The distance from the upper boundary
        @param Int width:
The width of the pop-up window
        @param Int height:
The height of the pop-up window
        @param Int fontSize:
font size
        @param Int flag:
Pop up type identification
        @param Int indexSelected:
By default, the selected window
       
   
    */
   
function openMultiPopover(popName,content,dataType, left, top,
width, height,change, fontSize, flag, indexSelected,extraInfo){
        if(arguments.length === 1 && appcan.isPlainObject(popName)){
            indexSelected = popName['indexSelected'];
            flag = popName['flag'];
            fontSize = popName['fontSize'];
            change = popName['change'];
            height = popName['height'];
            width = popName['width'];
            top = popName['top'];
            left = popName['left'];
            dataType = popName['dataType'];
            content = popName['content'];
         extraInfo = popName['extraInfo']
            popName = popName['popName'];
        }
        dataType = dataType || 0;
        flag = flag || 0;
        indexSelected = parseInt(indexSelected,10);
        indexSelected = isNaN(indexSelected)? 0 : indexSelected;
        width = width || 0;
        height = height || 0;
        change = change || function(){};
     
      try{
         extraInfo = appcan.isString(extraInfo) ? extraInfo : JSON.stringify(extraInfo);
         extraInfo = JSON.parse(extraInfo);
         if(!extraInfo.extraInfo){
            extraInfo = {extraInfo:extraInfo};
         }
         extraInfo = JSON.stringify(extraInfo);
      }catch(e){
         extraInfo = extraInfo || '';
      }
       
        //fixed android If you lose any one key will crash bug
       
if(!appcan.isString(content)){
            if(!content.content){
                content={
                    content:content
                };
            }
        }else{
            content = JSON.parse(conent);
            if(!content.content){
                content={
                    content:content
                };
            }
        }
        //check all key
       
var mustKey = ['inPageName','inUrl','inData'];
        var realContent = content.content;
        $.each(realContent,function(i,v){
            $.each(mustKey,function(i1,v1){
                if(!(v1 in v)){
                    v[v1] = '';
                }
            });
        });
        //content
       
content = JSON.stringify(content);
        if(multiPopoverQueue[popName]){
            multiPopoverQueue[popName].push(change);
        }else{
            multiPopoverQueue[popName] = [change];
        }
        uexWindow.openMultiPopover(content,popName,dataType,
left, top, width, height, fontSize, flag, indexSelected,extraInfo);
        uexWindow.cbOpenMultiPopover = function(optId,dataType,res){
            if(optId == 0){
                if(dataType != 1){
                    processMultiPopover(new Error('multi popover error'));
                }else{
                    processMultiPopover(null,res);
                }
            }
        };
        //fixed ios indexed bug
       
setSelectedPopOverInMultiWindow(popName, indexSelected);
    }
   
    /*
       
Close the multi page floating window
        @param String popName:
Multi page pop ups
       
   
    */
   
function closeMultiPopover(popName){
        if(arguments.length === 1 && appcan.isPlainObject(popName)){
            popName = popName['popName'];
        }
        if(!popName){
            return;
        }
       
        uexWindow.closeMultiPopover(popName)
       
    }
   
    /*
       
Set the index of the subpage window to which the multi page floating window jumps
        @param String popName:
The name of the multi window pop-up
       
@param String index:
Index of the page
       
       
    */
   
function setSelectedPopOverInMultiWindow(popName,index){
        if(arguments.length === 1 && appcan.isPlainObject(popName)){
            index = popName['index'];
            popName = popName['popName'];
        }
        if(!popName){
            return;
        }
        index = parseInt(index,10);
        index = isNaN(index)? 0 : index;
        //fixed Simulator does not support MultiPopOver bug
       
uexWindow.setSelectedPopOverInMultiWindow
&& uexWindow.setSelectedPopOverInMultiWindow(popName,index);
       
    }
   
   
   
    var windowStatusCallList = [];
   
    /*
       
       
Handle window callback events
        @param Function state:
Current state
       
       
    */
   
function processWindowStateChange(state){
        $.each(windowStatusCallList,function(i,v){
            if(appcan.isFunction(v)){
                v(state);
            }
        })
    }
   
   
    /*
       
The state of the current window changes
        @param Function callback:
Callback function after window event change
       
   
    */
   
function onStateChange(callback){
        if(!appcan.isFunction(callback)){
            return;
        }
        // Compatible with old usage
       
       
windowStatusCallList.push(callback);
       
        uexWindow.onStateChange = processWindowStateChange;
    }
   
    /*
       
Default state change events
       
   
    */
   
   
function defaultStatusChange(state){
        var tmpResumeCall = null;
        var tmpPauseCall = null;
        if(appcan.window.onResume){
            tmpResumeCall = appcan.window.onResume;
        }
        if(appcan.window.onPause){
            tmpPauseCall = appcan.window.onPause;
        }
       
        if(state === 0){
            appcanWindow.emit('resume');
            tmpResumeCall && tmpResumeCall();
        }
       
        if(state === 1){
            appcanWindow.emit('pause');
            tmpPauseCall && tmpPauseCall();
        }
       
    }
   
   
    /*
   
        swipe
Callback list
       
       
    */
   
var swipeCallbackList = {
        left:[],
        right:[]
    };
   
    function processSwipeLeft(){
       
        $.each(swipeCallbackList.left,function(i,v){
            if(appcan.isFunction(v)){
                v();
            }
        })
       
    }
   
    function processSwipeRight(){
       
        $.each(swipeCallbackList.right,function(i,v){
            if(appcan.isFunction(v)){
                v();
            }
        })
    }
   
    /*
       
When the page slides , The callback method to execute
       
   
    */
   
function onSwipe(direction,callback){
       
        if(direction === 'left'){
            swipeCallbackList[direction].push(callback);
           
            uexWindow.onSwipeLeft = processSwipeLeft;
            return;
        }
        if(direction === 'right'){
            swipeCallbackList[direction].push(callback);
           
            uexWindow.onSwipeRight = processSwipeRight;
            return;
        }
    }
   
    function onSwipeLeft(callback){
        if(!appcan.isFunction(callback)){
            return;
        }
        onSwipe('left',callback);
    }
   
    function onSwipeRight(callback){
        if(!appcan.isFunction(callback)){
            return;
        }
        onSwipe('right',callback);
    }
   
    /*
       
       
Compatible with the original appcan.frame.onSwipeLeft and appcan.window.onSwipeLeft Method
       
   
    */
   
function defaultSwipeLeft(){
        var tmpSwipeLeftCall = null;
        var tmpFrameSLCall = null;
       
        if(appcan.window.onSwipeLeft){
            tmpSwipeLeftCall = appcan.window.onSwipeLeft;
        }
       
        if(appcan.frame.onSwipeLeft){
            tmpFrameSLCall = appcan.frame.onSwipeLeft;
        }
       
        appcanWindow.emit('swipeLeft');
        appcan.frame && appcan.frame.emit && appcan.frame.emit('swipeLeft');
        tmpSwipeLeftCall && tmpSwipeLeftCall();
        tmpFrameSLCall && tmpFrameSLCall();
       
    }
   
   
     /*
       
       
Compatible with the original appcan.frame.onSwipeRight and appcan.window.onSwipeRight Method
       
   
    */
   
function defaultSwipeRight(){
        var tmpSwipeRightCall = null;
        var tmpFrameSRCall = null;
       
        if(appcan.window.onSwipeRight){
            tmpSwipeRightCall = appcan.window.onSwipeRight;
        }
       
        if(appcan.frame.onSwipeRight){
            tmpFrameSRCall = appcan.frame.onSwipeRight;
        }
       
        appcanWindow.emit('swipeRight');
        appcan.frame && appcan.frame.emit && appcan.frame.emit('swipeRight');
        tmpSwipeRightCall && tmpSwipeRightCall();
        tmpFrameSRCall && tmpFrameSRCall();
    }
    /*
       
       
Controls whether the parent component intercepts events from the child component
        @param Int enable
Set whether the parent component intercepts the events of the child component , Parameters for 1 Set the default interception ;0: Can intercept , Subcomponents cannot respond to events properly ;1: Don't intercept , Subcomponents can respond to events normally
    */
   
function setMultilPopoverFlippingEnbaled(enable){
        var enable = parseInt(enable,10);
        enable = isNaN(enable)?0:enable;
        enable = enable!=1?0:enable;
        uexWindow.setMultilPopoverFlippingEnbaled(enable);
    }
   
   
    // Default binding state
   
appcan.ready(function(){
        // Binding default state change events
       
onStateChange(defaultStatusChange);
        // Binding default swipe event
       
onSwipeLeft(defaultSwipeLeft);
        // Binding default swipe event
       
onSwipeRight(defaultSwipeRight);
    });
   
    // Export interface
   
var appcanWindow = module.exports = {
        open:open,
        close:close,
        evaluateScript:evaluateScript,
        evaluatePopoverScript:evaluatePopoverScript,
        setBounce:setBounce,
        setBounceParams:setBounceParams,
        enableBounce:enableBounce,
        disableBounce:disableBounce,
        setBounceType:setBounceType,
        resetBounceView:resetBounceView,
        openToast:openToast,
        closeToast:closeToast,
        moveAnim:moveAnim,
        popoverElement:popoverElement,
        openPopover:openPopover,
        closePopover:closePopover,
        resizePopover:resizePopover,
        resizePopoverByEle:resizePopoverByEle,
        alert:windowConfirm,
        //popAlert:popAlert, Hide the interface , because confirm
       
confirm:popConfirm,
        prompt:popPrompt,
        bringPopoverToFront:bringPopoverToFront,
        sendPopoverToBack:sendPopoverToBack,
        publish:publish,
        subscribe:subscribe,
        //publishGlobal:publishGlobal,
       
//subscribeGlobal:subscribeGlobal,
       
selectMultiPopover:setSelectedPopOverInMultiWindow,
        openMultiPopover:openMultiPopover,
        closeMultiPopover:closeMultiPopover,
        setWindowFrame:setWindowFrame,
        monitorKey:monitorKey,
        stateChange:onStateChange,
        swipeLeft:onSwipeLeft,
        swipeRight:onSwipeRight,
      getBounceStatus:getBounceStatus,
        setMultilPopoverFlippingEnbaled:setMultilPopoverFlippingEnbaled
       
   
};
   
    appcan.extend(appcanWindow,appcan.eventEmitter);

});

You can find , nearly 1000 Lines of code can be roughly divided into 3 part :

  1. appcan&&appcan.define(“modelName”,function($,exports,module){

});

  1. appcan&&appcan.define(“modelName”,function($,exports,module){

function fun1(){};

function fun2(){};

function fun3(){};

……

});

  1. appcan&&appcan.define(“modelName”,function($,exports,module){

function fun1(){};

function fun2(){};

function fun3(){};

……

var
appcanmodel=module.exports={

fun1:fun1,

fun2:fun2,

fun3:fun3,

}

});

Then we can use appcan.window.open And so on .

What can we learn from the source code ?

  1. 2.      Inspiration from the source code

We can also customize the module to achieve JS Modular operation of .

give an example :

Now we're going to do a project , Business module (buiness) All have the function of landing , The function of asking for leave , The function of attendance .

Using common methods, we need to write different methods to be compatible with login , Ask for leave , The function of asking for leave , Or you can write these methods in the same js Inside , Then you can call , This way is going to lead to being on the outside js It can only be carried out with understanding . Otherwise, suddenly a login Method , It can also be a little overwhelming . This way you can use appcan JSSDK To achieve .

First we define a js file : be known as :business.js after , Let's write a piece of code according to the pattern above :

appcan.define('buiness', function($, exports,
module) {

// Landing method

function denglu() {

alert("denglu");

}

// Attendance method

function kaoqin() {

alert("kaoqin");

}

// How to ask for leave

function qingjia() {

alert("qingjia");

}

module.exports = {

exportDenglu : denglu,

exportKaoqin : login,

exportQingjia : qingjia

}

});

after , We are appcan The method of this module can be called from the page .

appcan.button(".btn", "ani-act", function() {

appcan.buiness.exportDenglu();

})

The effect is as follows :

If you don't want to use your own module appcan.XXX.fun The way , I want to define an object myself , So it can be on top of buiness.js Add the following code to :

var tools = appcan.require("buniess");

After that, you can call the method of your own module on the page :

tools.exportDenglu();

The above is the use of appcan JSSDK Define the module and implement the calling process .

  1. 3.      About parameters and selectors

Parameters :

stay JavaScript in , User defined methods have no parameters, but they can also wear parameters , All the parameters are in the arguments in :

for example : stay buiness.js Define a login Method

function denglu() {

alert("denglu");

console.log(arguments);

}

module.exports = {

exportDenglu : denglu

}

Page code

appcan.button(".btn", "ani-act", function() {

appcan.buiness.exportDenglu("zhangsan","123456");

})

This is the time , Open browser developer mode console:

In this way, we can solve the problem that we write modules to pass parameters .

Selectors :

In fact, the selector is also a kind of parameter , So we can use the method of passing parameters to pass selectors .

for example : stay buiness.js Write the following example code in

// Landing method

function denglu() {

var userName=arguments[0];

var pwd=arguments[1];

var selector = arguments[0];

if(userName==="zhangsan"&&pwd==="123456"){

appcan.window.openToast(" Login successful ",2000,5);

}

}

module.exports = {

exportDenglu : denglu,

}

Front page :

appcan.button(".btn", "ani-act", function() {

appcan.buiness.exportDenglu("zhangsan","123456","#divid");

})

Page display effect :

That's about JSSDK Extension of , Hope that through this article can give you what you are doing appcan Developers have some inspiration . Make your own code more quality .

AppCan JSSDK More articles on module extension

  1. nginx/php Of redis Module expansion

    redis Module introduction redis2-nginx-module Can achieve Nginx In a non blocking way to directly prevent the remote Redis service , Powerful Redis Connection pool function , To achieve more connections and faster access ...

  2. php Of imagick Module expansion

    imagick Module introduction       ImageMagick It's a way to see . Open source software package for editing bitmap files and image format conversion . It can read . Edit more than 100 Image formats , Can be used to replace GD library . install In loading mode ...

  3. php Of Memcached Module expansion

    Memcached Module introduction       Memcached Is a high performance distributed memory object caching system , For dynamic Web Application to reduce database load . It reduces the number of database reads by caching data and objects in memory , So as to provide dynamic . ...

  4. 【 Black gold original course 】【FPGA Those things - Driving I 】 Experiment 11 :PS/2 modular ⑤ — Expand the mouse

    Experiment 11 :PS/2 modular ⑤ — Expand the mouse When the ordinary mouse, that is, the three button mouse, can no longer meet the demand , The extended mouse, or wheel mouse, was born , However, the purpose of experiment 11 is to drive the wheel mouse . however , Before entering the whole , Let's take a look at the mouse first ...

  5. Python Learning notes ( iteration 、 Module expansion 、GUI 、 Coding processing, etc )

    PythonIDLE The encoding processing in the http://www.tuicool.com/articles/NbyEBr Original title :Python We've actually got the right Unicode Or some kind of coded character , But it looks like ...

  6. lnmp Next use phpize Dynamic installation PHP modular / Expand ( No need to reload PHP)

    Before the installation It is recommended to execute before installation /usr/local/php/bin/php -m ( This command displays the currently installed PHP modular ) to glance at , Whether the module to be installed is already installed . Then download the current PHP Version of the source code and unzip . This article takes ima ...

  7. PHP Don't recompile , How to add module extensions separately

    php It provides a lot of extensions , such as curl,gmp, mbstring etc. . We are compiling and installing php Not all extensions are installed . Then after installation php after , If you want to install one alone php What about our own expansion ? We use curl Extended mode ...

  8. odoo Development Notes -- The new module expands the original module and adds a menu example

    Scene description : 1. Expanded new modules 2. to want to

  9. by OpenEdx in lms Register module extension fields

    I've been in demand recently , You need to extend the registered fields , For example, new mobile phones mobile Field 1. open register.html file    Path is \edxapp\edx-platform\lms\templates\register ...

Random recommendation

  1. Apache DdlUtils introduction

    Introduction  DdlUtils is a small, easy-to-use component for working with Database Definition (DDL) ...

  2. println And toString()

      public class Test{ public static void main(String[] args) { Mankind mk=new Mankind(); System.out.p ...

  3. Codevs 1010 River crossing pawn

      The time limit : 1 s  Space restriction : 128000 KB  Question level : gold Gold Title Description  Description Pictured ,A There is a river crossing pawn , Need to get to the goal B spot . Pawn walking rules : You can go down . Or to the right . Same as ...

  4. ASP、JSP、PHP Comparison of the three technologies

    at present , The three most commonly used dynamic web languages are ASP(Active Server Pages),JSP(JavaServer Pages),PHP (Hypertext Preprocessor). Jane Medium : A ...

  5. debian+nginx Configuration --php Environmental Science 、 Reverse agent and load balancing

    To configure nginx Of PHP Environmental Science install nginx sudo apt-get install nginx install nginx You can access it through the following address :http://localhost/ install php sudo a ...

  6. char (*p)[] and char *p[] The difference between

    The key to understanding is : 1. [] Has a higher priority than *,(*p)[] Point to an array ,*(p[]) An array of pointers 2. char (*p)[SIZE]: A pointer to a one-dimensional array , One dimensional arrays can only have SIZE Elements char ...

  7. ERROR 2002 (HY000): Can&#39;t connect to local MySQL server through socket &#39;***&#39; (2)

    occasionally , When we use “mysql”.“mysqladmin”.“mysqldump” Wait for the command to manage the database , The server threw an error like this : ERROR (HY000): Can't connect to loca ...

  8. Wan Android Project summary

    Wan Android Project summary The origin of the project I've been studying this project for some time Android A summary and study in the future , The project adopted Kotlin Language ,Api Adopted hongyang The great god WanAndroid ...

  9. React Advanced tutorials (es6)——(1)JSX Deep understanding of grammar

    basically ,JSX Syntax provides a way to create React The grammatical sugar of elements ,JSX Statements can be compiled into : React.createElement(component, props, …children) In the form of , such as : & ...

  10. seaweedFS

    First of all, let's analyze seaweedfs What is it? ?seaweedfs It's a very good one golang Open source project for distributed storage . It's a system for storing files , And it has nothing to do with the language used , It makes it very convenient to store files in the cloud ...