namespace PatternTest
{
/// <summary>
/// WebService 的摘要说明
/// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ToolboxItem(false)] // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { [WebMethod] public string HelloWorld() { return "Hello World"; } }
}//以下是页面 <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="~/WebService.asmx" /> </Services> </asp:ScriptManager> <div id="divUName"></div> <script> Sys.Application.add_load(WriteStr); function WriteStr() { PatternTest.WebService.HelloWorld(GetStr); } function GetStr(r) { $get("divUName").innerText = r; } </script> </div> </form>2：认识UpdatePanel
//前台代码 <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" /> </ContentTemplate> </asp:UpdatePanel>//后台代码 protected void Button1_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(2000); TextBox1.Text = "赫赫"; }3：测试页面生命周期
<script> window.onload = function() { alert("window loading"); } Sys.Application.add_init(initIt); Sys.Application.add_load(loadIt); function initIt() { alert("init"); } function loadIt() { alert("load"); } </script>4：认识DomElement与DomEvent
<script> //在element节点下按照ID查找页面元素 //Sys.UI.DomElement.getElementById(id,element); //获得页面元素相对于窗体或frame的位置 x,y //Sys.UI.DomElement.getLocation(element); //设置element的位置，此位置跟parent node有关，如果parent node的position设置为absolute或relative，则此位置为相对于parent node的位置，否则为相对于窗体或frame的位置 //Sys.UI.DomElement.setLocation(element,X,Y); //获取元素的边界信息 //var b = Sys.UI.DomElement.getBounds($get("txtUserName")); //var height = b.height; //var width = b.width; //var x = b.x; //var y = b.y; //给element添加css class //Sys.UI.DomElement.addCssClass(element,cssname); //移出元素的CSS //Sys.UI.DomElement.removeCssClass(element,css); //如果element已有该css class则移除，否则添加 //Sys.UI.DomElement.toggleCssClass(element,cssname); //判断element是否有该css class //Sys.UI.DomElement.containsCssClass(element,cssname); // 订阅事件处理函数，传递一个Sys.UI.DomEvent实例参数evt，通过这个evt参数，可以获得触发该事件的若干信息 //Sys.UI.DomEvent.addHandler($get("btnCommit"),"mousedown",btnCommitMouseDown) //function btnCommitMouseDown(evt) //{} //移出事件 //Sys.UI.DomEvent.removeHandler($get("btnCommit"),"mousedown",btnCommitMouseDown); //批量订阅事件 //Sys.UI.DomEvent.addHandlers($get("btnCommit"), {"click":btnCommitClick, "keypress":btnCommitKeyPress}); //function btnCommitClick(evt) { // alert(evt.type); //} //function btnCommitKeyPress(evt) { // alert(evt.type); //} //批量移出事件 //Sys.UI.DomEvent.clearHandlers(element); /* (1) getType 方法 获得一个对象实例的类型 (2) getTypeName 方法 获得一个对象实例的类型名称 UserLogic = function() { this._userName = "guo"; } UserLogic.prototype = { get_userName : function() { return this._userName; } }; UserLogic.registerClass("UserLogic"); var u = new UserLogic(); alert(Object.getTypeName(u); alert(Object.getType(u)); */ /* Array类型 add 方法 增加一个item addRange 方法 增加一个Array到末尾 clear 方法 移除所有元素 clone 方法 将数组克隆 contains 方法 是否包含给定的item dequeue 方法 从开始处移除第一个item enqueue 方法 与add方法功能相同 forEach 方法 遍历数组并订阅一个数组处理函数 indexOf 方法 找到与给定item匹配的元素，并返回它的索引值 insert 方法 在数组中插入一个item parse 方法 将字符串转换为数组，字符串格式必须为："['item1', 'item2', 'item3']" remove 方法 移除与给定item匹配的第一个元素 removeAt 方法 移除给定索引位置的元素 var arr = ["gzj", "jww"]; Array.add(arr, "wen"); alert(arr.join(",")); Array.addRange(arr, ["cc","dd", "cc"]); alert(arr.join(",")); Array.remove(arr, "cc"); alert(arr.join(",")); var arr = ["gzj", "jww"]; this.prefix = "$"; Array.forEach(arr, addPrefix, this); function addPrefix(element, index, array) { alert(element); alert(index); alert(array.toString()); alert(this.prefix); } var s = "['item1', 'item2', 'item3']"; var arr = Array.parse(s); alert(arr.join("|")); */ </script>5：调试
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <textarea id="TraceConsole" cols="50" rows="10"></textarea> <script> //将一个跟踪文本信息在TraceConsole中显示 //Sys.Debug.trace("调试信息"); //将一个对象的所有属性信息（包括值）在TraceConsole中显示 //Sys.Debug.traceDump(Sys.UI.DomElement.getLocation($get("TraceConsole"))); //也就是我们在Unit Test中常见的断言，当condition为false的时候，脚本执行会异常终止，并提示message信息，如果displayCaller为true的话，将显示断言所属的调用者（函数） //Sys.Debug.assert(1>2,"傻瓜",false); //在Error下的几个方法可以帮助我们创建几个常用的内建的异常类型 //try { // throw Error.argumentNull(); // } //catch(e) { // Sys.Debug.traceDump(e); //} //可以通过Error的create自定义异常类型 //var myError = Error.create("myError", {name: " xxx", desc : "my cc"}); //try { // throw myError; //} //catch(e) { // Sys.Debug.traceDump(e); //} </script>6：面向对象
//脚本Type.registerNamespace("Haixia");Haixia.Person = function(name) { this._name = name;}Haixia.Person.prototype = { get_name : function() { return this._name; }, set_name : function(name) { this._name = name; }, sayHello : function() { alert('I am a person, my name is ' + this._name); }}Haixia.Person.registerClass("Haixia.Person");//两个步骤实现继承：// 1) 子类构造函数中调用 initializeBase方法，第一个param为关键字this,第二个参数为构造函数参数组成的Array// 2) 类代码的末尾调用 registerClass方法，标明父类Haixia.Student = function(name) { Haixia.Student.initializeBase(this, [name]);}//重写父类方法Haixia.Student.prototype = { sayHello : function() { alert('I am a student, my name is ' + this._name); }}//调用一下父类的sayHello方法，然后再接着子类自己的逻辑Haixia.Student.prototype = { sayHello : function() { Haixia.Student.callBaseMethod(this, 'sayHello'); alert('actually I am a student'); }, walk : function() { alert('I am walking'); }}//实现步骤：调用callBaseMethod方法，第一参数：this关键字, 第二个参数：要调用的父类的方法名，第三个参数：可选，如果父类的这个方法有参数，则为参数列表组成的Array //定义接口Haixia.IWalkable = function() { throw Error.notImplemented();}Haixia.IWalkable.prototype = { walk : function() { throw Error.notImplemented(); }}Haixia.IWalkable.registerInterface("Tristan.IWalkable");// 1. 方法中都抛异常，避免接口被实例化 2.调用registerInterface方法//子类实现接口Haixia.Student.registerClass("Haixia.Student", Haixia.Person, Haixia.IWalkable);//标明Student类实现Tristan.IWalkable接口，如果要实现多个接口，那么继续往后加参数//不实现接口Haixia.Student.registerClass("Haixia.Student", Haixia.Person);//前台调用 <asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="~/Person.js" /> </Scripts> </asp:ScriptManager> <script> //调用对象 //var p = new Haixia.Person("liang"); //p.sayHello(); var p = new Haixia.Student("liang"); p.sayHello(); </script>7：枚举
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <script> Type.registerNamespace("Haixia"); Haixia.Nationality = function() { throw Error.notImplemented(); } Haixia.Nationality.prototype = { China : 1, USA : 2, UK : 3 } Haixia.Nationality.registerEnum("Haixia.Nationality"); Sys.Application.notifyScriptLoaded(); /* 1) 定义一个名为 Tristan.Nationality的函数 2) 为避免被实例化，在函数被调用的时候抛出 Error.notImplemented()异常 3) 枚举项定义在prototype里，枚举的value必须为int型 4) 通过调用 Tristan.Nationality.registerEnum方法注册枚举 */ var nationality = Haixia.Nationality.USA; Sys.Debug.trace(nationality); //call toString() method to get the enum key Sys.Debug.trace(Tristan.Nationality.toString(nationality)); Sys.Debug.trace(Tristan.Nationality.toString(3)); //call parse() method to get the enum value Sys.Debug.trace(Tristan.Nationality.parse("China")); /* 调用toString()方法，接受一个value，可以取得对应的枚举项的key 调用parse()方法，接受key，可以取得对应的枚举项的value，key参数是大小写敏感的 */ /* 2 USA UK 1 */ </script>