在javascript中实现类似asp.net webcontrol中的render的方法
2011-07-21 11:28
615 查看
在asp.net中的webcontrol开发的时候采用render方法来呈现控件。在javascript中,对于一些html代码的拼接大多数情况下采用字符串相加的方式来处理,这样做有以下弊端:
1.可读性差,易出错,出错后不易发现。
2.在javascript最小化的时候,长长的字符串不能最下化。
于是在项目中我实现了累死render的方法来处理html代码的拼接。
最上面上在javascript中实现了一个stringBuilder类。处理字符串拼接的。用户用的时候采用下面的方法来调用HtmlElement这个类
str得到的结果是
在使用的时候可以将创建textbox以及一些常用的html element封装成方法,这样就能提高代码的重用性,减少代码体积,也便于维护。
1.可读性差,易出错,出错后不易发现。
2.在javascript最小化的时候,长长的字符串不能最下化。
于是在项目中我实现了累死render的方法来处理html代码的拼接。
StringBuilder = function () { var self = this, strs = []; self.append = function (str) { strs.push(str); }; self.toString = function () { return strs.join(""); }; self.dispose = function () { strs = null; }; }, TextElement = function (text) { this.text = text; this.render = function () { return this.text; }; }, HtmlElement = function (tagName, innerText, attributes) { var self = this, halfTags = { br: true, img: true, hr: true, input: true }; self.tagName = tagName || "div"; self.attributes = attributes || {}; self.innerText = innerText || ""; self.children = []; if ($.isPlainObject(innerText)) { self.innerText = ""; self.attributes = innerText; } self._isShortTag = false; if (halfTags[self.tagName] === true) { self._isShortTag = true; } self.render = function () { var sb = new StringBuilder(), html = ""; sb.append(self._renderBeginTag(self.tagName, self.attributes)); if (self.innerText !== "") { sb.append(self.innerText); } if (self.children.length > 0) { $.each(self.children, function (index, ele) { sb.append(ele.render()); }); } sb.append(self._renderEndTag(self.tagName)); html = sb.toString(); sb.dispose(); return html; }; self.add = function (ele) { this.children.push(ele); }; self._renderBeginTag = function (tagName, attributes) { var sb = new StringBuilder(), strRet = ""; sb.append("<"); sb.append(tagName); $.each(attributes, function (key, value) { sb.append(" "); sb.append(key); sb.append("="); sb.append("\""); sb.append(value.toString()); sb.append("\""); }); if (this._isShortTag) { sb.append(" "); } else { sb.append(">"); } strRet = sb.toString(); sb.dispose(); return strRet; }; self._renderEndTag = function (tagName) { var sb = new StringBuilder(), strRet = ""; if (this._isShortTag) { sb.append("/>"); } else { sb.append("</"); sb.append(tagName); sb.append(">"); } strRet = sb.toString(); sb.dispose(); return strRet; }; };
最上面上在javascript中实现了一个stringBuilder类。处理字符串拼接的。用户用的时候采用下面的方法来调用HtmlElement这个类
var div = new HtmlElement("div", {class:"divcss"}); var innertextbox = new HtmlElement("input", {type:"text"}); div.add(innertextbox); var str = div.render();
str得到的结果是
<div class="divcss"> <input type="text" /> </div>
在使用的时候可以将创建textbox以及一些常用的html element封装成方法,这样就能提高代码的重用性,减少代码体积,也便于维护。
相关文章推荐
- Asp.net中使用javaScript实现前后台方法的相互调用
- 基于ASP.NET 2.0 实现WEB打印方法的探讨
- ASP.Net:Javascript 通过PageMethods 调用后端WebMethod方法 + 多线程数据处理 示例
- ASP.NET(C#)AJAX+JAVASCRIPT实现类似QQ,MSN窗口之功能(续)
- DJ--一个实现了jQuery功能的asp.net webcontrol
- 基于ASP.NET 2.0 实现WEB打印方法的探讨
- 用jQuery访问ASP.Net WebControl的ClientID方法
- 菜鸟蔡之Ajax复习第一篇(后台asp.net)(传统的JavaScript方法实现Ajax功能)
- asp.net用类似操纵Sql语句的方式快速实现Excel读写的方法(oleDB 方式)
- ASP.NET2.0中Tabs的简单实现 不用Asp.net Ajax ControlToolKit中的Tabs控件实现Tabs效果的简单实现方法:
- asp.net中倒计时自动跳转页面的实现方法(使用javascript)
- [Web]不同的javascript 在ASP.NET中的注册方法
- 用jQuery访问ASP.Net WebControl丑陋的ClientID方法
- 零起点 Asp.net中使用javaScript实现前后台方法的相互调用
- 基于ASP.NET 2.0 实现WEB打印方法的探讨
- ASP.NET向Javascript传递变量两种实现方法
- 【C#】对异步请求处理程序IHttpAsyncHandler的理解和分享一个易用性封装 【手记】走近科学之为什么明明实现了IEnumerable<T>的类型却不能调用LINQ扩展方法 【手记】手机网页弹出层后屏蔽底层的滑动响应 【手记】ASP.NET提示“未能创建类型”处理 【Web】一个非常简单的移动web消息框 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
- 类似 MSDN CSDN 导航树效果 ASP.Net(C#) + JavaScript 实现!
- ASP.NET jQuery 食谱23 (jQuery AJAX实现调用页面后台方法和web服务定义的方法)