Javascript Object 设计测试例子！

JS文件：

 

/***************************
       obj Tools
****************************/
var g_EListObjects;

function eAddListObj(listId, jsonDESCityList)
{
    if (typeof(g_EListObjects) == "undefined")
        g_EListObjects=new Array();
            
    g_EListObjects[listId]=jsonDESCityList;
}

function eGetListObj(listId)
{
    return g_EListObjects[listId];
}

function setBackIcon(obj,tipType)
{
    if(obj != null)
    {
        if(tipType == "no")
        {
            obj.className = "formline_nomsg";
        }
        else if(tipType == "error")
        {
            obj.className = "formline_errmsg";
        }
        else if(tipType == "right")
        {
            obj.className = "formline_ritmsg";
        }
        else
        {
            obj.className = "formline_msg";
        }
    }
}
    
/***************************
     WebHolderPicker
****************************/
function WebHolderPicker() 
{
    //public property
    this.webHolderPickerId;
    this.webHolderInputId;
    this.webHolderPickerTipId;
    this.webHolders;
    this.pageLanguage;
    this.webStrHolderInputInfo;
    //private property
    var strHoldersOptions;
    
    //init method
    this.InitHolderList = function(strHolders)     
    {
        if(strHolders != null && strHolders != "")
        {
            this.webHolders = strHolders.split(',');
        }
    } 
    
    this.SetHolderPickerTip = function(strTip,tipType)    
    {
        var obj = document.getElementById(this.webHolderPickerTipId);
        if(obj != null)
        {
            obj.innerHTML = strTip;
            setBackIcon(obj,tipType);
        }
    }
    
    this.SetSelectValue = function(strOptions)     
    {
        var obj = document.getElementById(this.webHolderPickerId);
        if(obj != null)
        {
            obj.innerHTML = strOptions;
        }
    }
    
    //public method
    this.CheckHolderName = function()    
    {
        var obj = document.getElementById(this.webHolderInputId);
        var value = "";
        if(obj != null)
        {
            value = obj.value.toLowerCase();
        }

        ISCHECKMOBILEOK = false;
        var checkResult = true;

        if(value == null || value == "")
        {
            checkResult = false;
            this.SetHolderPickerTip(this.webStrHolderInputInfo,"info");
            if(HAVECLICKSUBMIT)
            {
                this.SetHolderPickerTip(submitCardHolderError,"error");
            }
            return;
        }
        else (value.length > 0) 
        {
            var patrn=/^[0-9]{8,16}$/;
            if (!patrn.exec(value))
            {
                checkResult = false;
            }
        }        
        
        if(checkResult)
        {
            this.SetHolderPickerTip(this.strHolderRight,"right");
            ISCHECKMOBILEOK = true;
        }
        else
        {
            this.SetHolderPickerTip(this.strHolderError,"error");
        }
    }
    
    this.SetHolder = function(strHolder)    
    {
        var obj = document.getElementById(this.webHolderInputId);
        if(obj != null)
        {
            obj.value = strHolder;
            this.CheckHolderName();
        }
    }
    
    //display List
    this.ShowHolderList = function()     
    {
        var webHolderSet = this.webHolders;
        if(this.pageLanguage == "en")
        {
            this.strHoldersOptions = '<input type="text" onblur="eGetListObj(\'' + this.webHolderPickerId + '\').CheckHolderName();" onchange="eGetListObj(\'' + this.webHolderPickerId + '\').CheckHolderName();" maxlength="11" name="mobile" value="" id="mobile" />';
        }
        else
        {
            this.strHoldersOptions = '<input type="text" onblur="eGetListObj(\'' + this.webHolderPickerId + '\').CheckHolderName();" onchange="eGetListObj(\'' + this.webHolderPickerId + '\').CheckHolderName();" maxlength="11" name="mobile" value="" id="mobile" />';
        }            

        this.SetSelectValue(this.strHoldersOptions);
        this.SetHolderPickerTip(this.webStrHolderInputInfo,"info");
    }      
}

 

Default.aspx文件：

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jsObject._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript" src="js/jsObject.js"></script>
    <link href="../css/template.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="inputWebHolderPicker"></div>
        <div id="inputWebHolderPicker_Tip"></div>
        <br />
        <input type="button" value="Test" />
    </div>
    </form>
    <script type="text/javascript" language="javascript">
        var HAVECLICKSUBMIT = false;
        var ISCHECKMOBILEOK = false;
        
        var inputWebHolderPicker = new WebHolderPicker();
        inputWebHolderPicker.webHolderPickerId = "inputWebHolderPicker";
        inputWebHolderPicker.webHolderInputId = "mobile";
        inputWebHolderPicker.webHolderPickerTipId = "inputWebHolderPicker_Tip";
        //inputWebHolderPicker.webHolders = "";
        inputWebHolderPicker.pageLanguage = "cn";
        inputWebHolderPicker.webStrHolderInputInfo = "请输入移动电话";
        inputWebHolderPicker.strHolderRight = "OK";
        inputWebHolderPicker.strHolderError = "Error";
    
        eAddListObj(inputWebHolderPicker.webHolderPickerId,inputWebHolderPicker);    
        //eGetListObj(inputWebHolderPicker.webHolderPickerId).InitHolderList(dataStrCardHolders);
        eGetListObj(inputWebHolderPicker.webHolderPickerId).ShowHolderList();
    </script>
</body>
</html>

 

CSS文件：

 

.formline_msg { background-image: url(../images/info.gif); background-repeat:no-repeat; width:265px!important;width:275px; padding-left:18px; margin-top:3px;list-style-position:inside; float:left; color:#666; }
.formline_nomsg { width:265px; padding-left:18px; margin-top:3px;list-style-position:inside; float:left; }
.formline_errmsg { background-image: url(../images/error.gif); background-repeat:no-repeat; width:265px!important;width:275px; padding-left:18px; margin-top:3px;list-style-position:inside; float:left; color:red;}
.formline_ritmsg { background-image: url(../images/right.gif); background-repeat:no-repeat; width:265px!important;width:275px; padding-left:18px; margin-top:3px;list-style-position:inside; float:left;}