如何封装JS和CSS文件为服务器端控件

JavaScript023

如何封装JS和CSS文件为服务器端控件,第1张

首先:下载一个JS的日期组件,带封装。

然后:建一个日期类文件CalendarBox.cs代码如下:

using System

using System.Collections.Generic

using System.ComponentModel

using System.Text

using System.Web

using System.Drawing

using System.Web.UI

using System.Web.UI.WebControls

using System.Web.UI.HtmlControls

[assembly: WebResource("Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js", "application/x-javascript", PerformSubstitution=true)]

namespace Wisesoft.Web.Control

{

[ToolboxBitmap(typeof(CalenderBox), "Wisesoft.Calendar.CalendarBox.ico")]

public class CalenderBox : TextBox

{

protected override void OnPreRender(EventArgs e)

{

string calendar = CalenderCSS.CSS

calendar = calendar.Replace("$ImaginURL$", this.ImaginURL)

if (!Page.ClientScript.IsClientScriptBlockRegistered("_calendar"))

Page.ClientScript.RegisterClientScriptBlock(typeof(string), "_calendar", calendar)

this.Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete)

this.CssClass = "Wdate"

this.Attributes.Add("onfocus","setday(this)")

this.Attributes.Add("onchange", "checkDate(this.value)")

base.OnPreRender(e)

}

void Page_PreRenderComplete(object sender, EventArgs e)

{

Page.ClientScript.RegisterClientScriptResource(this.GetType(), "Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js")

}

/**//// <summary>

/// 弹出日期控件小图片的地址

/// </summary>

[Bindable(true)]

[Category("图标设置")]

[DefaultValue("imagin/calender.gif")]

[Localizable(true)]

public string ImaginURL

{

get

{

String s = (String)ViewState["ImaginURL"]

return ((s == null) ? "imagin/calender.gif" : s)

}

set

{

ViewState["ImaginURL"] = value

}

}

/**//// <summary>

/// 设置日期,时间的初始格式。

/// </summary>

[Bindable(true)]

[Category("初始化设置")]

[DefaultValue(false)]

[Localizable(true)]

public bool ShowTime

{

get

{

bool s = (bool)ViewState["ShowTime"]

if (ViewState["ShowTime"] != null)

{

return s

}

return false

}

set

{

ViewState["ShowTime"] = value

}

}

/**//// <summary>

/// 注样式文件

/// </summary>

/// <param name="path"></param>

private void RegisterCssFile(string path)

{

HtmlLink link1 = new HtmlLink()

link1.Attributes["type"] = "text/css"

link1.Attributes["rel"] = "stylesheet"

link1.Attributes["href"] = path

this.Page.Header.Controls.Add(link1)

}

}

}

注意:[assembly: WebResource("Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js", "application/x-javascript", PerformSubstitution=true)]是用来封装你的JS文件,要使用你项目的名字加上你JS文件的名字,还需要将你的JS文件做一点设置,点右件,选择属性--->然后选择高级,选择生成操作-->选择嵌入的资源,这样才能将JS文件封装进去,当然如果有图片或者是CSS文件也是一样的。

再看

void Page_PreRenderComplete(object sender, EventArgs e)

{

Page.ClientScript.RegisterClientScriptResource(this.GetType(), "Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js")

}

是在页面呈现之前将你的JS文件注册到页面上。

[Bindable(true)]

[Category("图标设置")]

[DefaultValue("imagin/calender.gif")]

[Localizable(true)]

是利用反射的元数据信息,来设置属性。就是给你的日期控件旁边加上个小图标,把它做成一个属性,可以让程序员自定义设置图片,也可以把它继承进去。

好了,这样就可以把JS文件封装好了,再来看看CSS文件如何封装并写入客户端。

我们可以看见下面有一个方法,

/**//// <summary>

/// 注样式文件

/// </summary>

/// <param name="path"></param>

private void RegisterCssFile(string path)

{

HtmlLink link1 = new HtmlLink()

link1.Attributes["type"] = "text/css"

link1.Attributes["rel"] = "stylesheet"

link1.Attributes["href"] = path

this.Page.Header.Controls.Add(link1)

}

它就是用来注册你的CSS文件的,大家都知道在我们的页面代码里面是<link href="StyleSheet.css" rel="stylesheet" type="text/css" />引入外部样式文件。这个方法就是达到这个目的。那么我们现在还没有样式文件。

因此我们就必须建立一个CSS,然后把它设置一下(和JS的设置方式一样)。再到void Page_PreRenderComplete(object sender, EventArgs e)方法调用就可以了,但是还有其他方法,我们来介绍第二种(对JS文件也可以这样使用),建立一个CalendarCSS.cs文件,代码如下:

using System

using System.Collections.Generic

using System.Text

namespace Wisesoft.Web.Control

{

public class CalenderCSS

{

public static string CSS = @"<style type=""text/css"">

.Wdate{

border:#999 1px solid

height:18px

background:url($ImaginURL$) no-repeat right

}

.WdateFmtErr{

font-weight:bold

color:red

}

</style>"

}

}

这个类其实是将我们的CSS文件,写为一个字符串形式,然后供主函数调用,以注册到客户端使用。

那么我们再看看CalendarBox.cs文件里的这段代码

string calendar = CalenderCSS.CSS

calendar = calendar.Replace("$ImaginURL$", this.ImaginURL)

if (!Page.ClientScript.IsClientScriptBlockRegistered("_calendar"))

Page.ClientScript.RegisterClientScriptBlock(typeof(string), "_calendar", calendar)

它就是将我们已经写好的一段字符串以快的形式注册到客户端(当然还有更多的注册方式,可以在MSDN看看ClientScript类)。

好了,基本上就可以使用了。

1、JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦。通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置。

2、JS封装的方法有函数方式、对象的方式、闭包的方式。

举例

1)函数方式

function kk(a,b){

   内部对a,b怎么处理就不需要关心了

}

2)对象方式

function kk(a,b){

   this.x = a

   this.y = b

}

var k = new kk(1,2)//通过面向对象的方式

alert(k.x)

3)闭包方式

function kk(a,b){

   var k = 1

   return function tt(){

      k++

   }

}

var u = kk(1,2)

u()//闭包实现累加

u()//闭包实现累加

1、定义一个传入占位节点id的组件类

比如这里定义一个组件MyClass

function MyClass(id){//组件模板

}2、在组件内获取节点id

function MyClass(id){//组件模板

var _self = document.getElementById(id)//根据id获取组件

}3、定义类的方法

function MyClass(id){//组件模板

var _self = document.getElementById(id)//根据id获取组件

this.addP=function(){//定义类方法,这里是显示内容为1233

_self.innerHTML ="1233"

}

}4、直接在js中调用使用该组件方法

示例: