新瓶舊酒ASP.NET AJAX(7) - 用戶端腳本程式設計（Sys命名空間下的類）

介紹

Sys命名空間是Microsoft AJAX Library的根命名空間。本文主要學習一下其中的Application類、ApplicationLoadEventArgs類、CultureInfo類和StringBuilder類。

關鍵

1、Application Class

·init事件 - 腳本加載完畢，對象建立之前。

·load事件 - 對象被建立和初始化。可以用pageLoad()

·unload事件 - window.unload時。可以用pageUnload()

·notifyScriptLoaded() - 通知ScriptManager某段腳本已經加載完畢

2、ApplicationLoadEventArgs Class

·components - 最後一次觸發load事件時建立的Components

·isPartialLoad - 是否是部分重新整理

3、CultureInfo Class

·CurrentCulture字段 - 目前的Culture，傳回CurrentCulture對象

·name字段 - Culture的名稱

·dateTimeFormat - 獲得dateTimeFormat對象，其内有n多格式化類型

·numberFormat - 獲得numberFormat對象，其内有n多格式化類型

4、StringBuilder Class

·append(text) - 添加指定字元串到StringBuilder對象的結尾

·appendLine() - 添加一個換行符到StringBuilder對象的結尾

·appendLine(text) - 添加指定字元串到StringBuilder對象的結尾并添加一個換行符

·clear() - 清除StringBuilder對象所有内容

·isEmpty() - StringBuilder對象的内容是否為空

·toString() - 将StringBuilder對象的内容轉換為字元串

·toString(separator) - 在StringBuilder對象内的每一個元素的結尾處添加指定字元串

示例

CustomButton.js

Type.registerNamespace("Demo");

Demo.CustomButton = function(element)

{

// 該類繼承自Sys.UI.Control，調用基類構造函數

Demo.CustomButton.initializeBase(this, [element]);

this._clickDelegate = null;

this._hoverDelegate = null;

this._unhoverDelegate = null;

}

Demo.CustomButton.prototype =

// 定義text屬性 - 元素顯示的資訊

get_text: function()

{

// element - Sys.UI.Control的屬性

return this.get_element().innerHTML;

set_text: function(value)

this.get_element().innerHTML = value;

// 添加或移除click事件

add_click: function(handler)

// events - Sys.Component的屬性

this.get_events().addHandler('click', handler);

remove_click: function(handler)

this.get_events().removeHandler('click', handler);

// 添加或移除hover事件

add_hover: function(handler)

this.get_events().addHandler('hover', handler);

remove_hover: function(handler)

this.get_events().removeHandler('hover', handler);

// 添加或移除unhover事件

add_unhover: function(handler)

this.get_events().addHandler('unhover', handler);

remove_unhover: function(handler)

this.get_events().removeHandler('unhover', handler);

// 釋放資源

dispose: function()

var element = this.get_element();

if (this._clickDelegate)

{

// Sys.UI.DomEvent removeHandler()

$removeHandler(element, 'click', this._clickDelegate);

delete this._clickDelegate;

}

if (this._hoverDelegate)

$removeHandler(element, 'focus', this._hoverDelegate);

$removeHandler(element, 'mouseover', this._hoverDelegate);

delete this._hoverDelegate;

if (this._unhoverDelegate)

$removeHandler(element, 'blur', this._unhoverDelegate);

$removeHandler(element, 'mouseout', this._unhoverDelegate);

delete this._unhoverDelegate;

Demo.CustomButton.callBaseMethod(this, 'dispose');

// 初始化

initialize: function()

if (!element.tabIndex) element.tabIndex = 0;

if (this._clickDelegate === null)

// Function.createDelegate用來建立一個調用“this”上下文下的特定函數的委托

this._clickDelegate = Function.createDelegate(this, this._clickHandler);

// Sys.UI.DomEvent addHandler()

$addHandler(element, 'click', this._clickDelegate);

if (this._hoverDelegate === null)

this._hoverDelegate = Function.createDelegate(this, this._hoverHandler);

$addHandler(element, 'mouseover', this._hoverDelegate);

$addHandler(element, 'focus', this._hoverDelegate);

if (this._unhoverDelegate === null)

this._unhoverDelegate = Function.createDelegate(this, this._unhoverHandler);

$addHandler(element, 'mouseout', this._unhoverDelegate);

$addHandler(element, 'blur', this._unhoverDelegate);

Demo.CustomButton.callBaseMethod(this, 'initialize');

// click事件處理器

_clickHandler: function(event)

var h = this.get_events().getHandler('click');

if (h) h(this, Sys.EventArgs.Empty);

// hover事件處理器

_hoverHandler: function(event)

var h = this.get_events().getHandler('hover');

// unhover事件處理器

_unhoverHandler: function(event)

var h = this.get_events().getHandler('unhover');

}

Demo.CustomButton.registerClass('Demo.CustomButton', Sys.UI.Control);

// 通知ScriptManager這段腳本已經加載完畢

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Application.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Application.aspx.cs"

Inherits="ClientScripting_Sys_Application" Title="init Event和load Event和unload Event" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="Server">

<asp:ScriptReference Path="~/ClientScripting/Sys/CustomButton.js" />

</Scripts>

</asp:ScriptManagerProxy>

Sys.Application.add_init(applicationInitHandler);

function applicationInitHandler()

// Sys.Component.create()

$create

(

Demo.CustomButton,

{text: '自定義Button（Button1）'},

{click: doClick, hover: doHover, unhover: doUnhover},

null,

$get('Button1')

);

{text: '自定義Button（Label1）'},

$get('Label1')

function doClick(sender, e)

Sys.Debug.trace("滑鼠點選" + sender.get_id());

function doHover(sender, e)

Sys.Debug.trace("滑鼠經過" + sender.get_id());

function doUnhover(sender, e)

Sys.Debug.trace("滑鼠離開" + sender.get_id());

Sys.Application.add_load(applicationLoadHandler);

function applicationLoadHandler(sender, e)

alert("ApplicationLoad");

// isPartialLoad - 是否是部分重新整理

Sys.Debug.trace('是否是部分重新整理：' + e.get_isPartialLoad());

for (var i=0; i<e.get_components().length; i++)

{

// components - 最後一次觸發load事件時建立的Components

Sys.Debug.trace('最後一次觸發load事件時建立的Component：' + e.get_components()[i].get_id());

}

Sys.Application.add_unload(applicationUnloadHandler);

function applicationUnloadHandler()

alert('ApplicationUnload');

function pageLoad()

// Sys.Application.findComponent() - 根據id查找Component

// Sys.Application.findComponent(id, parent) - parent可選

alert($find('Button1').get_id());

</script>

function listComponents()

// getComponents() - 獲得所有Component（數組）

var c = Sys.Application.getComponents();

for (var i=0; i<c.length; i++)

var id = c[i].get_id();

var type = Object.getTypeName(c[i]);

Sys.Debug.trace('Component：' + i + ': id=' + id + ', type=' + type);

<p>

</button>

</p>

</asp:Content>

運作結果

1、頁面加載

彈出框，資訊：ApplicationLoad

是否是部分重新整理：false

最後一次觸發load事件時建立的Component：Button1

最後一次觸發load事件時建立的Component：Label1

彈出框，資訊：Button1

2、滑鼠點選、經過和離開“自定義Button（Button1）”或“自定義Button（Label1）”

有相應的提示

3、單擊“列舉所有Component”按鈕

Component：0: id=Button1, type=Demo.CustomButton

Component：1: id=Label1, type=Demo.CustomButton

4、關閉浏覽器

彈出框，資訊：ApplicationUnload

CultureInfo.aspx（注：設定ScriptManager的EnableScriptGlobalization="True"）

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="CultureInfo.aspx.cs"

Inherits="ClientScripting_Sys_CultureInfo" Title="CultureInfo" Culture="auto"

UICulture="auto" %>

protected override void InitializeCulture()

string s = Request.QueryString["currentculture"];

if (!String.IsNullOrEmpty(s))

System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo(s);

System.Threading.Thread.CurrentThread.CurrentCulture = System.Globalization.CultureInfo.CreateSpecificCulture(s);

<a href="?currentculture=sq">阿爾巴尼亞語</a>

<div>

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>

</div>

// 建立一個Sys.CultureInfo對象

var cultureObject = Sys.CultureInfo.CurrentCulture;

// 目前Culture的名稱

var cultureName = cultureObject.name;

// 獲得dateTimeFormat對象

var dtfObject = cultureObject.dateTimeFormat;

// 建立一個具有各種格式化類型的數組

var myArray =

[

'AMDesignator',

'Calendar',

'DateSeparator',

'FirstDayOfWeek',

'CalendarWeekRule',

'FullDateTimePattern',

'LongDatePattern',

'LongTimePattern',

'MonthDayPattern',

'PMDesignator',

'RFC1123Pattern',

'ShortDatePattern',

'ShortTimePattern',

'SortableDateTimePattern',

'TimeSeparator',

'UniversalSortableDateTimePattern',

'YearMonthPattern',

'AbbreviatedDayNames',

'ShortestDayNames',

'DayNames',

'AbbreviatedMonthNames',

'MonthNames',

'IsReadOnly',

'NativeCalendarName',

'AbbreviatedMonthGenitiveNames',

'MonthGenitiveNames'

];

var result = '區域名稱：' + cultureName;

for (var i = 0, l = myArray.length; i < l; i++)

var arrayVal = myArray[i];

if (typeof(arrayVal) !== 'undefined')

result += "<tr><td>" + arrayVal + "</td><td>" + eval("dtfObject." + arrayVal) + '</td></tr>';

var resultHeader = "<tr><td><b>格式化類型</b></td><td><b>格式化值</b></td></tr>"

$get('<%= Label1.ClientID %>').innerHTML = "<table border=1>" + resultHeader + result +"</table>";

var d = new Date();

$get('<%= Label2.ClientID %>').innerHTML = "<p/><h3>dateTimeFormat示例：" +

d.localeFormat(Sys.CultureInfo.CurrentCulture.dateTimeFormat.FullDateTimePattern) + "</H3>";

// 獲得numberFormat對象

nfObject = cultureObject.numberFormat;

myArray =

'CurrencyDecimalDigits',

'CurrencyDecimalSeparator',

'IsReadOnly',

'CurrencyGroupSizes',

'NumberGroupSizes',

'PercentGroupSizes',

'CurrencyGroupSeparator',

'CurrencySymbol',

'NaNSymbol',

'CurrencyNegativePattern',

'NumberNegativePattern',

'PercentPositivePattern',

'PercentNegativePattern',

'NegativeInfinitySymbol',

'NegativeSign',

'NumberDecimalDigits',

'NumberDecimalSeparator',

'NumberGroupSeparator',

'CurrencyPositivePattern',

'PositiveInfinitySymbol',

'PositiveSign',

'PercentDecimalDigits',

'PercentDecimalSeparator',

'PercentGroupSeparator',

'PercentSymbol',

'PerMilleSymbol',

'NativeDigits',

'DigitSubstitution'

result = '區域名稱：' + cultureName;

result += "<tr><td>" + arrayVal + "</td><td>" + eval("nfObject." + arrayVal) + '</td></tr>';

$get('<%= Label3.ClientID %>').innerHTML = "<table border=1>" + resultHeader + result + "</table>";

var n = 99.987;

$get('<%= Label4.ClientID %>').innerHTML = "<p/><h3>numberFormat示例：" + n.localeFormat("C") + "<h3>";

區域名稱：zh-CN

格式化類型

格式化值

AMDesignator

上午

Calendar

[object Object]

DateSeparator

FirstDayOfWeek

CalendarWeekRule

FullDateTimePattern

yyyy'年'M'月'd'日' H:mm:ss

LongDatePattern

yyyy'年'M'月'd'日'

LongTimePattern

H:mm:ss

MonthDayPattern

M'月'd'日'

PMDesignator

下午

RFC1123Pattern

ddd, dd MMM yyyy HH':'mm':'ss 'GMT'

ShortDatePattern

yyyy-M-d

ShortTimePattern

H:mm

SortableDateTimePattern

yyyy'-'MM'-'dd'T'HH':'mm':'ss

TimeSeparator

UniversalSortableDateTimePattern

yyyy'-'MM'-'dd HH':'mm':'ss'Z'

YearMonthPattern

yyyy'年'M'月'

AbbreviatedDayNames

日,一,二,三,四,五,六

ShortestDayNames

DayNames

星期日,星期一,星期二,星期三,星期四,星期五,星期六

AbbreviatedMonthNames

一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月,

MonthNames

IsReadOnly

true

NativeCalendarName

公曆

AbbreviatedMonthGenitiveNames

MonthGenitiveNames

CurrencyDecimalDigits

CurrencyDecimalSeparator

CurrencyGroupSizes

NumberGroupSizes

PercentGroupSizes

CurrencyGroupSeparator

CurrencySymbol

￥

NaNSymbol

非數字

CurrencyNegativePattern

NumberNegativePattern

PercentPositivePattern

PercentNegativePattern

NegativeInfinitySymbol

負無窮大

NegativeSign

NumberDecimalDigits

NumberDecimalSeparator

NumberGroupSeparator

CurrencyPositivePattern

PositiveInfinitySymbol

正無窮大

PositiveSign

PercentDecimalDigits

PercentDecimalSeparator

PercentGroupSeparator

PercentSymbol

PerMilleSymbol

‰

NativeDigits

0,1,2,3,4,5,6,7,8,9

DigitSubstitution

StringBuilder.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="StringBuilder.aspx.cs"

Inherits="ClientScripting_Sys_StringBuilder" Title="StringBuilder" %>

function buildString(title)

// 建立一個StringBuilder對象

var sb = new Sys.StringBuilder("aaa");

// toString() - 将StringBuilder對象的内容轉換為字元串

Sys.Debug.trace("StringBuilder：" + sb.toString());

// 添加指定字元串到StringBuilder對象的結尾

sb.append("bbb");

Sys.Debug.trace("StringBuilder：" + sb);

// 添加指定字元串到StringBuilder對象的結尾并添加一個換行符

sb.appendLine("ccc");

// 添加一個換行符到StringBuilder對象的結尾

sb.appendLine();

// toString(separator) - 在StringBuilder對象内的每一個元素的結尾處添加指定字元串

// 然後将StringBuilder對象的内容轉換為字元串

Sys.Debug.trace("StringBuilder：" + sb.toString('xxx'));

// 清除StringBuilder對象所有内容

sb.clear();

// StringBuilder對象的内容是否為空

var bln = sb.isEmpty();

Sys.Debug.trace("StringBuilder：" + bln);

function pageLoad()

buildString();

StringBuilder：aaa

StringBuilder：aaabbb

StringBuilder：aaabbbccc

StringBuilder：aaaxxxbbbxxxccc

xxx

StringBuilder：

StringBuilder：true

本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/344803，如需轉載請自行聯系原作者

新瓶舊酒ASP.NET AJAX(7) - 用戶端腳本程式設計（Sys命名空間下的類）

繼續閱讀

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

七牛雲-C#SDK-上傳-前期準備

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條