控件开发：JavaScript的呈现逻辑和方法

      我们在写自定义控件的时候，避免不了不用JavaScript,而怎么在控件中使用并且高效的呈现到客户端，是我们要考虑的问题，所以我在下面结合一个简单的CusterHyperLink控件，来介绍我们的控件怎么去加载并呈现到客户端的过程。

1.  首先我们要实现这个控件，大致要怎样的步骤呢？

当我们开发这样的控件的时候，主要涉及到以下的内容：
     (1)    使用该控件，并封装实现Html和客户端脚本；
     (2)    确定如何将客户端脚本呈现包含在页面中(控件从Control 和WebControl继承，会有不同)
     (3)    控件应该包括一个确定合适呈现脚本的程序逻辑，不必总是呈现客户端脚本
     (4)    当所请求的浏览器不支持客户端能力的时候，允许控件退回执行服务器端代码

2．呈现方式

   2.1 将脚本呈现为Html属性值
        这个比较简单，我们可以考虑这样一个例子，一个超级链接，鼠标移出或移上去，会有不同的背景。
        Html代码1如下：
         <a href="Http://xbf321.cnblogs.com" onmouseover="this.style.backgroundColor='Blue';this.style.color='yellow';this.style.fontSize='xx-large';this.style.fontWeight='bold';" onmouseout="this.style.backgroundColor='White';this.style.color='Blue';this.style.fontSize='small';this.style.fontWeight='normal';" style="background-color:Write;color:Blue;font-size:small;font-weight:normal;">点我</a>
      下面将开发一个自定义控件CustomHyperLinkAttr。该控件可自动完成上述两个步骤。
      因为我们只给链接加上属性，所以我们选择一个现成的.Net 控件HyperLink，作为这个控件的基类，我们重写此控件的AddAttributesToRender方法，该方法呈现包含Html元素的属性，代码2如下：
      我们在页面上，只要使用这个控件的就可以了，而不必写上一大堆的Html代码

Code

<form id="form1" runat="server"> <custom:CustomHyperLinkAttr runat="server" NavigateUrl="Http://xbf321.cnblogs.com" Text="点我"></custom:CustomHyperLinkAttr></form>,
      一定要在页面或Web.Config中引用以下哦，我想这是最基本的，不用我在详细的说了吧。呵呵，可以参考ClingingBoy的http://www.cnblogs.com/Clingingboy/archive/2006/07/30/463471.html

   2.2 在<script></script>中呈现脚本块
       在上面的代码1种，我们的链接包含Css样式属性和Js代码，如果我们的页面上有好多这样的链接，那我们的页面，就会非常的臃肿，维护也是个问题，所以我们把js部分提炼出来用JavaScript来对链接操作，并在元素<a>的onmouseover 和onmouseout属性中调用这两个个函数即可
     代码3

Code


          接下来，我们修改一下上面的那个自定义控件，我们在此控件的Render方法中把这些的JavaScript函数给输出来，而在AddAttributesToRender方法中修改onmouseover和onmouseout二个属性。
        代码4

Code

 注意注释掉的部分
       如上代码所示，该控件重写了Render方法，以便将客户端脚本呈现为一个脚本快，同时还重写了AddAttributesRender方法，将其呈现为包含Html元素<a>的onmouseover和onmouseout 的属性值。
       如果页面开发人员在同一个页面上使用两个或多个这样的控件，会发生什么呢？
       如你所想，页面上就会有多个像代码3这样的脚本快。
       这就意味着自定义控件的每个事例都会调用一次Render方法，所以就会在页面上重复这样的脚本块，那我们怎么才能避免这种问题呢？
       Page类提供了这样一种机制，其允许在包含页面的Render方法中注册并判断是否已经注册脚本块，代码5如下
        Public void RegisterClientScriptBlock(Type type,string key,string script,bool addTag)
       该方法中type和key共同形成关键字，并通过这个关键字来注册脚本快，在呈现的过程中，页面将检查所注册的脚本快内部列表中是否包括该关键字的脚本快，如果包括，则不会创建该脚本块，否则反之。最后的一个参数，让你决定自己呈现像<script>这样的标签，如果false,自己必须写<script>，反之，他们自动对脚本添加上<script>和</script>
       如果控件呈现的Html代码需要访问Javascript,那么就必须使用RegisterClientScriptBlock方法注册，因为只有呈现呈现在脚本快后面的Html才能访问该脚本，如果脚本需要访问Html那么只有使用RegisterStartupScript方法。这两个的参数都是一样的。可以举一反三明白其他的。
       在控件尝试注册脚本快之前，可以调用IsClientScriptBlockRegistered/IsClientStartScriptRegister方法来检测该脚本是否已经注册过，在相同的关键字下，对相同的客户端进行多次注册时允许的，这是因为该操作，并没有将相同脚本的多个副本添加到页面的注册脚本内部列表中。因此控件应该调用IsClientScriptBlockRegistered/IsClientStartScriptRegister方法。那么应该在什么时候调用该方法呢？
       如果控件必须花费大量的时间来生成已注册过的脚本，那么有可能会降低性能，在这种情况下，就首先调用IsClientScriptBlockRegistered/IsClientStartScriptRegister方法，以便脚本是没有经过注册的：
       Public bool IsClientScriptBlockRegisted(String key)
       在内部，该方法会调用以下方法的重写，并将包含页面的System.Type对象和key作为参数传递给该方法：
       Public void RegisterStartupScript(Type type ,string key,string script,bool addScriptTags)
       并和key形成关键字，来确保脚本是否已经注册。
        回顾一下代码4，该代码直接在Render方法中直接呈现控件的脚本快，上面我们说过，该控件不应该直接呈现脚本块，而是应该向包含页面注册脚本块，以便让页面自己呈现脚本块，以下是新版本的CustomHyperLinkAttr控件代码，该控件重写了OnPreRender方法，以便向页面注册客户端脚本代码5

Code

强烈要求读懂下面的文字：
      如以上所示，控件必须在生命周期的预呈现阶段注册脚本块，开发人员不应该在空间的呈现阶段中调用包含页面的ClientScript属性的注册方法(RegisterClientScriptBlock).
      当包含页面进入生命周期的呈现阶段，叶面将在控件树内递归调用每个控件的RenderControl方法，以便呈现每个控件，这意味着页面时在控件呈现之前开始呈现。因此，如果控件在呈现阶段调用注册方法，那么将在页面进入呈现阶段后注册客户端脚本(重要)
   2.3 将控件的脚本打包放在一个单独得js文件中，并在页面上引用作为<script>元素的src属性值

     回顾上面的事例，其中页面开发人员直接将脚本块加入页面，则会造成以下问题
     1，页面杂乱，不易维护
     2，每次更新时，还要确保没有破坏其他东西
     3，不允许浏览器缓存脚本，无法在使用相同脚本的页面重用脚本
     4，对控件本身维护也是个问题
     为了避免以上问题，所以通常把脚本打包为一个.js文件并在页面上引用这个js文件，这中方式具有以下优点
     1，分离Html和js，那么页面开发人员在修改Js文件的同时，不影响Html
     2，允许浏览器缓存js文件，并且在不用的页面上使用它们
     3，由于页面没有包含脚本，所以减小页面大小
如代码6 所示

<head runat="server">

    <title>Untitled Page</title>

    <script src="base.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

   

   <custom:CustomHyperLinkAttr runat="server" NavigateUrl="Http://xbf321.cnblogs.com" Text="点我"></custom:CustomHyperLinkAttr><br />

   <custom:CustomHyperLinkAttr ID="CustomHyperLinkAttr1" runat="server" NavigateUrl="Http://xbf321.cnblogs.com" Text="点我2"></custom:CustomHyperLinkAttr>

    </form>

      注意以上代码的深蓝色部分，页面没有额外的js脚本块，只有对外部js的引用。
        在代码5种，我们是在控件的OnPreRender中把脚本块用RegisterScriptBlock注册页面中，页面直接将客户端代码呈现在Html中，接着发送到请求的浏览器，但是这样是不对的。
       换句话说。在OnPreRender中，不应该把脚本直接注册到页面注册脚本内部列表，而应该使用脚本文件的Url，并生成客户端脚本包含，而后再用RegisterScriptBlock方法，如代码7所示
      代码7

string strJs2 = "<script src=\"base.js\" type=\"text/javascript\"></script>";

            Type type = typeof(CustomHyperLinkAttr);

            if (!Page.ClientScript.IsClientScriptBlockRegistered(type, type.FullName))

            {

                Page.ClientScript.RegisterClientScriptBlock(type, type.FullName, strJs2);

            }

            base.OnPreRender(e);

        Page类的ClientScript属性包括一个RegisterClientScriptInclude方法，该方法封装了代码7种红色部分，从而简化自定义控件的OnPreRender方法，如代码8

protected override void OnPreRender(EventArgs e)

        {Type type = typeof(CustomHyperLinkAttr);

            if(!Page.ClientScript.IsClientScriptIncludeRegistered(type,type.FullName))

            {

                Page.ClientScript.RegisterClientScriptInclude(type.FullName, "base.js");

            }

            base.OnPreRender(e);

        }

        注意：ClientScript中有一系列的方法都是配合来的比如：
        Public void RegisterXXX 和Public bool IsRegisterXXX,这些可以通过MSDN的资料查一下，我在这就不过多的详述了，赫赫

3．部署

   正如以上所述，把脚本放到一个单独得脚本文件中，这样页面可以用页面包含的方式引用，但是这样也是有缺点的，比如必须把脚本部署到客户端，这就造成了自定义脚本部署的困难，特别是当控件2个不同的版本同时在客户端运行的时候。
   自定义控件的其他文件也存在同样的问题，如Css Image.Asp2.0提供了两种部署方案解救这个部署问题，一是将源文件部署到一个共享位置，另一个是将源文件嵌入到程序及中。
     3.1 将源文件部署到一个共享位置
           在Asp.Net 1.1 中我们都只知道在IIS下有一个aspnet_client文件夹，其实这个文件夹就是提供各个Asp.Net程序公用的一个js文件夹，里面有根据版本的问题，设置了几个不同的文件夹，来共Asp.Net 选择，我们可以把js文件放到这个里面，以达到公用的目的，然而这种部署方式也可能导致错误，因为控件和其资源在不同的文件中，每次部署控件都必须确保相应得源文件也被部署，这就造成部署困难，所以，在这我强烈建议你不用这种方式，而选择第二种部署方式。
     3.2 将源文件嵌入程序集中
           用这种方式，不需要部署独立的源文件，由于控件的每个版本包含js文件，所以这又解决了版本问题。
           那如何使用这种部署方式呢？
           首先，我们需要下列两项操作
          1，把js的源文件添加到Vs的控件项目中
          2，把这个源文件属性的BuildAction属性，设置为Embedded Resource.这样可以通知Vs将