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

我们以封装一个JS的日期控件为列子 将它和服务器的TextBox结合在一起做成一个服务器控件 以达到直接托上去就可以使用的效果 其实很简单 大家共同学习 先看看效果图

方法   首先 下载一个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>    /// d出日期控件小的地址    /// </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 link = new HtmlLink();    link Attributes[ type ] = text/css ;    link Attributes[ rel ] = stylesheet ;    link Attributes[ href ] = path;    this Page Header Controls Add(link );    }    }   } 

注意 [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 link = new HtmlLink();    link Attributes[ type ] = text/css ;    link Attributes[ rel ] = stylesheet ;    link Attributes[ href ] = path;    this Page Header Controls Add(link );    } 

它就是用来注册你的CSS文件的 大家都知道在我们的页面代码里面是<link 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:# px solid;    height: px;    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类）   好了 基本上就可以使用了 编译一下呢？

lishixinzhi/Article/program/net/201311/13968

是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境。

Nodejs由Nodejs基金会持有和维护，并与Linux基金会有合作关系。Nodejs采用Google开发的V8运行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。这些技术通常用于数据密集的即时应用程序。

Nodejs大部分基本模块都用JavaScript语言编写。在Nodejs出现之前，JavaScript通常作为客户端程序设计语言使用，以JavaScript写出的程序常在用户的浏览器上运行。

Nodejs的出现使JavaScript也能用于服务端编程。Nodejs含有一系列内置模块，使得程序可以脱离Apache >

扩展资料

js的优点

Node作为一个新兴的前端框架，后台语言，有很多吸引人的地方：

RESTful API

单线程

Node可以在不新增额外线程的情况下，依然可以对任务进行并发处理 —— Nodejs是单线程的。它通过事件循环（event loop）来实现并发 *** 作，对此，我们应该要充分利用这一点 —— 尽可能的避免阻塞 *** 作，取而代之，多使用非阻塞 *** 作。

参考资料来源  百度百科-nodejs

首先鼠标点击一个按钮触发JS方法如下：
1
2
3
4
5
6
7
8
9
10

<input type=button value="1" onclick="a('A');b('B');">

<script>
function a(a){
alert(a);
}
function b(b){
alert(b);
}
</script>
2 js触发另一个按钮的方法如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
<title>usually function</title>
</head>
<script>
function load(){
//下面两种方法效果是一样的
documentgetElementById("target")onclick();
documentgetElementById("target")click();
}
function test(){
alert("test");
}
</script>
<body onload="load()">
<button id="target" onclick="test()">test</button>
</body>
<html>
3注释：documentgetElementById("target")获取到目标的ID值，然后再调用onclick或者是click方法，这样就会继续执行令一个按钮的JS代码了。

引用
比如一个在线客服的邀请功能，客服端可以直接发出邀请，调用访客端前台js函数，客户端显示邀请框
按照你的说法 不是跨域的问题。而是服务器客户端的交互问题。你可以采用dwr反推技术把某一段的请求推给另外一个客户端用户，让客户端用户的某个页面（你可以自己定义一个页面）调用js（js可以d出框等等）

Nodejs 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Nodejs 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Nodejs 的包管理器 npm，是全球最大的开源库生态系统。（nodejs官网上的介绍），正如官网上介绍的那样，nodejs确实很牛！怎么个牛法？看看下面的代码就知道了。

//引入>

nodejs 的理念 跟 ruby on rail 估计差不多。

nodejs 你可以编写你的服务器，来运行，使用的JS语言而已，

nodejs基本上=一部分的apache和完整的php功能了。

他使用的语言和前端的语言一样，但是库是不一样的，比如nodejs 应该没有documentwrite之类的语句，但是有其他库的。

nodejs 和 前端的js 使用的语言一样，但是不可混淆使用！

nodejs 是一个服务器平台，使用C/C++语言和JS 进行开发，而运行的真是Javascript语言而已。

1、先准备一个json文件。

2、使用vscode创建一个html文件。

3、开始撰写js方法，使用原生javascript来处理，先处理读取json文件，之后运行这个html。

4、得到的json就是我们indexjson文件中的内容。

5、为了便于查看我们json文件的内容显示在html网页中。

---