`
tonyruiyu
  • 浏览: 4990 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

新鲜出炉的JavaScriptMVC（tony版）

jQueryXMLMVCAjaxJavaScript 
阅读更多
引用

本来还想多说点什么的，觉得没必要了。

概念上的东西我不想过多争论，如果你认为"V"出现在JS中就不是MVC的话我也没什么好说的。

你认为你把模板代码写载外部HTML中你就能解决困扰你的问题你也可以放在外部。

下面回复中个人感觉最有价值的就是 司徒正美的   大家可以看看他的 我感觉很不错


（这个是下午刚做的，是第一版。主要是为了实现功能，细节没有考虑那么多，先发上来叫大家尝尝鲜，接着我会完善这个东西。）

越来越多的项目中大量JS循环拼接HTML字符串。我看这样的代码很头疼，样式出错不容易调试。所以，我本着对公司对项目负责的态度写下了这个小工具。

先看看怎么使用 

 Foreach.dataSource = [{ a: { aa: "aa1", bb: "a.bb1" }, b: 'b1' },
		 { a: { aa: "aa1", bb: "a.bb1" }, b: 'b1' },
		 { a: { aa: "aa1", bb: "a.bb1" }, b: 'b1' },
		 { a: { aa: "aa1", bb: "a.bb1" }, b: 'b1' },
	  { a: { aa: "aa2", bb: "a.bb2" }, b: 'b2'}
	  
	  ]; //给定数据源
	 
   Foreach.exp = "<div > <#exp:if(index == 0)$>hi<#exp(a.aa)$> <#exp:endif $><#exp:if(a.aa == 'aa1')$>我是aa1 <#exp:endif $><input type='button' value='<#exp(b)$>' /></div>";  //定义需要绑定数据的HTML模板
  
   document.write(Foreach.result()); //得到数据结果

//OUTPUT:
hiaa1 按钮
我是aa1 按钮  
我是aa1 按钮
我是aa1 按钮
我是aa1 按钮

目前实现的功能和介绍：
1.<#exp(a.aa)$> 基本的数据绑定
2.<#exp:if(index == 0)$> <#exp:endif $> IF语句判断 可以支持对象中的属性和index,
index当前行号从0开始
3.<input type='button' value='<#exp(b)$>' />支持HTML混编
4.很抱歉的是  现在暂时不支持在<#exp(index)$>使用index以及对index的相关数学运算
5.还有一个做值转化的功能 是一个为我们项目定做的功能暂时不向大家公开
6.源码会在附件中发布 您有权在任何情况下使用以及修改源代码但是请署名作者 谢谢！
引用

问：支持else标签吗？
答：我本人意见不准备支持 觉得IF就够了
问：支持if标签嵌套吗？
答：目前这个版本不支持，我会在以后的版本中发布可以嵌套的功能
问：性能如何？
答：写这个工具的目的是为了提高开发效率，把视图从JS程序中剥离出去，性能的问题本人测了下在可以接受的范围
分享到：
关闭关闭关闭关闭关闭
评论
10 楼 vb2005xu 2010-12-14  
很无语 "4.本来还以为你是一个XML高手，结果发现您也是用JQUERY来解析XML的，不免有点失望，也就是说为了使用您的简单的功能我还有导入JQUERY，这一点我也不会用。 "

不知道 你 "JQUERY来解析XML" 是什么意思 ...

这一点我真的很无语 ....

我虽然不是高手
9 楼 satanultra 2010-12-14  
tonyruiyu 写道
vb2005xu 写道
无语 这也算MVC,你还不如看看我的模版 http://vb2005xu.iteye.com/blog/373332 
   1. <?xml version="1.0" encoding="UTF-8"?>  
   2. <data>  
   3.     <widget id='QUI.Widget.Alert'>  
   4.     <![CDATA[ 
   5.         <table cellspacing="0" cellpadding="0" width="286" height="88" border="0"> 
   6.             <tr> 
   7.                 <td height="47" align="center" valign="middle">@{string}</td> 
   8.             </tr> 
   9.             <tr> 
  10.                 <td height="47" align="center" valign="middle"> 
  11.                 <div style="width: 50px; height: 22px;"></div> 
  12.                 </td> 
  13.             </tr> 
  14.         </table> 
  15.     ]]>  
  16.     </widget>  
  17.       
  18. </data>  

<?xml version="1.0" encoding="UTF-8"?>
<data>
	<widget id='QUI.Widget.Alert'>
	<![CDATA[
		<table cellspacing="0" cellpadding="0" width="286" height="88" border="0">
			<tr>
				<td height="47" align="center" valign="middle">@{string}</td>
			</tr>
			<tr>
				<td height="47" align="center" valign="middle">
				<div style="width: 50px; height: 22px;"></div>
				</td>
			</tr>
		</table>
	]]>
	</widget>
	
</data>

 qui/Widget/Template.xml 文件

# /** 
#  * 定义对话框对象 
#  */  
# $qui.Class('QUI.Widget.Dialog');  
# var tpla = $qui.tpl.get('QUI.Widget.Alert');  
# tpla.assign('string','小妖');  
# $qui.alert(tpla.display());




你的东西我大致看了    不错， 但是你也不用靠打击别人来证明自己能力？ 你需要么？


然后我来提点意见？
1.你的这个模板 需要AJAX发一遍请求 ，性能上来讲我绝对不用。
2.你这个模板仅仅就是一个XML+replace.没别的什么。没有实现逻辑判断/循环？我没看出来有这方面的实现。
3.另外个人感觉开发起来会很不爽，需要多开发一个XML。
4.本来还以为你是一个XML高手，结果发现您也是用JQUERY来解析XML的，不免有点失望，也就是说为了使用您的简单的功能我还有导入JQUERY，这一点我也不会用。



（谢绝人身攻击。回帖注意素质）

lz我也是用ajax请求模板，但我只会请求一次，除非刷新了页面（即使刷新页面，模板没改动也是读取缓存）。我做的是内部系统，这点请求不算什么，而且觉得这样好维护。但我的模板是html的，我觉得没必要用xml，因为做html模板最好的方式就是用html本身做。lz你把模板写在字符串里（当然可能实际做的时候不这样），还是不好维护，还是等于js html混编，不如写在html文件中。
8 楼 sirxenofex 2010-12-14  
同学你这个标题玩大了。看看真正的Javascript MVC: http://javascriptmvc.com/
7 楼 liuzhiqiangruc 2010-12-14  
js 模板
6 楼 tonyruiyu 2010-12-14  
vb2005xu 写道
无语 这也算MVC,你还不如看看我的模版 http://vb2005xu.iteye.com/blog/373332 
   1. <?xml version="1.0" encoding="UTF-8"?>  
   2. <data>  
   3.     <widget id='QUI.Widget.Alert'>  
   4.     <![CDATA[ 
   5.         <table cellspacing="0" cellpadding="0" width="286" height="88" border="0"> 
   6.             <tr> 
   7.                 <td height="47" align="center" valign="middle">@{string}</td> 
   8.             </tr> 
   9.             <tr> 
  10.                 <td height="47" align="center" valign="middle"> 
  11.                 <div style="width: 50px; height: 22px;"></div> 
  12.                 </td> 
  13.             </tr> 
  14.         </table> 
  15.     ]]>  
  16.     </widget>  
  17.       
  18. </data>  

<?xml version="1.0" encoding="UTF-8"?>
<data>
	<widget id='QUI.Widget.Alert'>
	<![CDATA[
		<table cellspacing="0" cellpadding="0" width="286" height="88" border="0">
			<tr>
				<td height="47" align="center" valign="middle">@{string}</td>
			</tr>
			<tr>
				<td height="47" align="center" valign="middle">
				<div style="width: 50px; height: 22px;"></div>
				</td>
			</tr>
		</table>
	]]>
	</widget>
	
</data>

 qui/Widget/Template.xml 文件

# /** 
#  * 定义对话框对象 
#  */  
# $qui.Class('QUI.Widget.Dialog');  
# var tpla = $qui.tpl.get('QUI.Widget.Alert');  
# tpla.assign('string','小妖');  
# $qui.alert(tpla.display());




你的东西我大致看了    不错， 但是你也不用靠打击别人来证明自己能力？ 你需要么？


然后我来提点意见？
1.你的这个模板 需要AJAX发一遍请求 ，性能上来讲我绝对不用。
2.你这个模板仅仅就是一个XML+replace.没别的什么。没有实现逻辑判断/循环？我没看出来有这方面的实现。
3.另外个人感觉开发起来会很不爽，需要多开发一个XML。
4.本来还以为你是一个XML高手，结果发现您也是用JQUERY来解析XML的，不免有点失望，也就是说为了使用您的简单的功能我还有导入JQUERY，这一点我也不会用。



（谢绝人身攻击。回帖注意素质）
5 楼 vb2005xu 2010-12-14  
无语 这也算MVC,你还不如看看我的模版 http://vb2005xu.iteye.com/blog/373332 
   1. <?xml version="1.0" encoding="UTF-8"?>  
   2. <data>  
   3.     <widget id='QUI.Widget.Alert'>  
   4.     <![CDATA[ 
   5.         <table cellspacing="0" cellpadding="0" width="286" height="88" border="0"> 
   6.             <tr> 
   7.                 <td height="47" align="center" valign="middle">@{string}</td> 
   8.             </tr> 
   9.             <tr> 
  10.                 <td height="47" align="center" valign="middle"> 
  11.                 <div style="width: 50px; height: 22px;"></div> 
  12.                 </td> 
  13.             </tr> 
  14.         </table> 
  15.     ]]>  
  16.     </widget>  
  17.       
  18. </data>  

<?xml version="1.0" encoding="UTF-8"?>
<data>
	<widget id='QUI.Widget.Alert'>
	<![CDATA[
		<table cellspacing="0" cellpadding="0" width="286" height="88" border="0">
			<tr>
				<td height="47" align="center" valign="middle">@{string}</td>
			</tr>
			<tr>
				<td height="47" align="center" valign="middle">
				<div style="width: 50px; height: 22px;"></div>
				</td>
			</tr>
		</table>
	]]>
	</widget>
	
</data>

 qui/Widget/Template.xml 文件

# /** 
#  * 定义对话框对象 
#  */  
# $qui.Class('QUI.Widget.Dialog');  
# var tpla = $qui.tpl.get('QUI.Widget.Alert');  
# tpla.assign('string','小妖');  
# $qui.alert(tpla.display());


4 楼 司徒正美 2010-12-14  
javascript模板，我也做了一套
http://www.cnblogs.com/rubylouvre/archive/2010/10/05/1841933.html
3 楼 littleJava 2010-12-13  
Ext中也有模板引擎……
2 楼 satanultra 2010-12-13  
js模板啊 我一直在用jTemplates 确实解决了js html 混编的问题
顶楼主
1 楼 elementstorm 2010-12-13  
这应该算是js模板引擎吧
跟mvc没啥关系
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascriptmvc3.0.5

    上传了一半的javascriptmvc3.0.5,这个是【下】

    JavaScriptMVC之实战

    NULL 博文链接：https://lyndon-lin.iteye.com/blog/1556095

    javascriptmvc-3.3.zip

    JavaScriptMVC是一个全面的JavaScript应用程序开发框架，专注于构建大型、可维护的前端应用。这个压缩包"javascriptmvc-3.3.zip"包含了该框架的3.3版本。JavaScriptMVC以其模块化、可测试和高性能的特点，深受开发者...

    javascriptmvc-3.2.4.zip

    JavaScriptMVC是一个全面的JavaScript开发框架，专注于构建大型、可维护的前端应用。这个3.2.4版本的压缩包包含了一系列工具和库，旨在帮助开发者遵循Model-View-Controller（MVC）设计模式，提高代码组织和项目管理...

    MVC框架 JavaScriptMVC.zip

    JavaScriptMVC是一个强大的JavaScript MVC（Model-View-Controller）框架，专为构建复杂且高性能的前端Web应用而设计。这个框架旨在提供一套完整的工具集，包括数据管理、视图渲染、路由控制以及测试支持，从而使得...

    javaScriptMVC 开源框架 第一部分

    JavaScriptMVC是一个强大的前端开发框架，它以JavaScript为核心，结合了Model-View-Controller（MVC）设计模式，旨在提供一套完整的解决方案，帮助开发者构建高效、可维护的Web应用程序。这个开源项目是基于jQuery和...

    javascriptmvc

    JavaScript MVC（Model-View-Controller）是一种用于构建前端Web应用程序的架构模式，灵感来源于Java的MVC框架。这种模式在JavaScript开发中广泛采用，旨在提高代码的组织性、可维护性和可扩展性。...

    javascriptmvc-3.0.5最新包

    javascriptmvc3.0.5,文件大于20MB，分成两个卷

    从JavaScriptMVC开始如何完成项目之压缩文件和生成帮助文档

    JavaScriptMVC是一个全面的前端开发框架，旨在简化和优化JavaScript应用程序的构建过程。这个框架提供了一整套工具，包括代码管理、路由、模型、视图、控制器等，以支持大型和复杂的Web应用。在“从JavaScriptMVC...

    JavaScriptMVC框架Mithril.zip

    Mithril.js 是一个客户端的 JavaScript MVC 框架。可将应用分成数据层、UI层和控制层。Mithril 压缩后只有 3kb 左右。API 提供一个模板引擎，带 DOM diff 实现，支持路由和组合。 示例代码： ...

    从JavaScriptMVC开始如何完成项目之创建应用程序

    这篇博客文章“从JavaScriptMVC开始如何完成项目之创建应用程序”可能是指导开发者如何使用特定的JavaScript MVC框架或库来构建一个完整的应用程序。 在JavaScript MVC中： 1. **模型（Model）**：负责处理和管理...

    谈谈JavaScriptMVC模式共3页.pdf.zip

    JavaScript MVC模式是Web开发中的一种架构模式，它用于组织和管理复杂的前端应用。MVC，即Model-View-Controller，是一种设计模式，旨在分离应用程序的数据层（Model）、用户界面层（View）和控制逻辑层（Controller...

    JavascriptMVC代码

    JavaScript MVC（Model-View-Controller）是一种用于构建前端应用程序的架构模式，它借鉴了传统的后端MVC设计模式，以帮助开发者组织和管理复杂的JavaScript应用。在这个架构中，Model负责数据处理，View负责用户...

    javaScriptMVC 开源框架 第二部分

    JavaScript MVC开源框架是一种用于构建富前端应用的框架，它整合了多种JavaScript库和技术，如jQuery，使得开发者可以更高效地组织和管理前端代码，实现Model-View-Controller（MVC）设计模式。...

    JavaScriptMVC:JavaSriptMVC 高级编程课程

    JavaScriptMVC是一个全面的前端开发框架，专注于使用JavaScript进行复杂应用程序的构建。它结合了Model-View-Controller（MVC）的设计模式，提供了一整套工具和服务，旨在提高开发效率和代码可维护性。在这个高级...

    javaScriptMVC 开源框架 第三部分（相关资料和例子）

    在"javascriptMVC 相关资料.docx"文档中，可能会包含以下知识点： 1. **MVC概念**：解释模型（Model）、视图（View）和控制器（Controller）的基本职责。模型处理数据和业务逻辑，视图负责用户界面的展示，而控制器...

    JavaScriptMVC框架PK：Angular、Backbone、CanJS与Ember

    ：选择JavaScriptMVC框架很难。一方面要考虑的因素非常多，另一方面这种框架也非常多，而要从中选择一个合适的，还真得费一番心思。本文对JavaScriptMVC框架Angular、Backbone、CanJS和Ember作了比较，供大家参考。...

    JavaScriptMVC 测试框架 v2.2

    内容索引:脚本资源,Ajax/JavaScript,JavaScriptMVC　JavaScriptMVC 是一个功能强大的 JavaScript framework. 也是一个很棒的JavaScript测试框架，它同样能提高开发的速度。JavaScriptMVC应用了模型-视图-控制器架构...

Magicbox
Global site tag (gtag.js) - Google Analytics