Question

基本上，如果你有一个纯粹的JS应用程序（从socket.io或从带有ajax请求的服务器获取信息），并且你需要在处理它之后显示这些数据，你使用什么技术？

目前我正在使用类似

的代码手动创建元素

var myDiv = new Element('div',{ /* options */);

将其注入我需要制作所有DOM结构的地方。我发现这很难维护，尤其是那些可以编写html代码的设计人员，但他们无法从JS编写html代码。

有什么办法可以改善这个过程吗？从ajax获取html更好吗？或者只是在字符串中创建HTML代码？

我正在寻找最佳的维护和资源。

Answer 1

您正在寻找的是“模板”。

你有一个HTML模板（一些div等），你将它与你在JS中提供的数据绑定。然后，使用您正在使用的任何模板引擎，您都可以获得完整的HTML。

以下是一些模板引擎：

使用板块的代码示例：

var Plates = require('plates'); // specific to node.js, see for client-side use

var html = '<div id="test">Old Value</div>';
var data = { "test": "New Value" };

var output = Plates.bind(html, data); 
console.log( output ); // '<div id="test">New Value</div>'

您可以将模板存储在通过ajax加载的单个文件（“templates.html”）中，也可以将其存储在HTML页面中（不建议用于维护事项）。

如果将它们全部存储在外部文件中，您可以执行以下操作：

templates.html：

<!-- text/html isn't parsed by the browser so we can put anything in it -->
<script type="text/html" id="template1"> 
    <!-- put your template in there
</script>

您可以通过getElementById( 'template1' )获取其内容。

Answer 2

如果项目处于后期阶段，添加类似jQuery.template插件并在单独的文件中创建模板，则最简单的方法。然后，使用后端将这些和平结合在一起，并在DOM Ready上启动客户端应用程序。

如果您的项目处于早期阶段，请使用AngularJs或BackboneJS框架。相信我值得每一分钱:)

Answer 3

我建议你看一下Backbone.js。

Backbone.js通过提供模型为Web应用程序提供结构使用键值绑定和自定义事件，具有丰富API的集合可枚举函数，具有声明性事件处理的视图，以及通过RESTful JSON接口将它全部连接到您现有的API

即使我没有使用RESTful接口，我也会使用骨干网。将结构与行为分开很容易......你可以使用jQuery实现相同的功能，但它不会整洁干净。它是MV *框架之一。你有：

包含交互式数据的模型以及围绕它的大部分逻辑：转换，验证，计算属性和访问控制。
集合是有序的模型集。
观点：一般的想法是将您的界面组织成逻辑视图，由模型支持，每个模型都可以在模型更改时独立更新，而无需重新绘制页面
路由器提供了路由客户端页面并将它们连接到操作和事件的方法

最近引起了人们的关注。使用Backbone创建的应用包括：

FourSquare那种
LinkedIn for Mobile

This是一个很好的资源。

Answer 4

远程模板http://code.google.com/p/distal/：

 <table id="a"> 
   <tr><th>OPINIONS</th></tr> 
   <tr data-qrepeat="m keywords"><td data-qtext="m.name"></td></tr> 
 </table>

然后致电：

distal(document.getElementById("a"), {
  keywords: [
    {name:"Brilliant"}, {name:"Masterpiece"}, {name:"Witty"}
  ]
});

将成为：

 <table> 
   <tr><th>OPINIONS</th></tr> 
   <tr><td>Brilliant</td></tr> 
   <tr><td>Masterpiece</td></tr> 
   <tr><td>Witty</td></tr> 
 </table>

Answer 5

将其注入我需要制作所有DOM结构的地方。我发现这很难维护，尤其是那些可以编写html代码的设计人员，但他们无法从JS编写html代码。

另一个选项是modest。正如您从documentation所看到的，它消除了在javascript中对HTML块的需求。设计人员可以在不需要查看javascript的情况下更改HTML结构，javascript编码器可以使用设计人员定义的参数来填充数据（全部使用javascript）。

这个例子来自自述文件：

HTML：

<div>
  <contact>
    <name>Casey Jones</name>
    <phone>123-456-7890</phone>
  </contact>
</div>

使用Javascript：

var contact = {
  name : "Casey Jones",
  cell : "123-456-7890"
};
var out = modest.render('contact',contact);

什么是最好的架构来展示纯粹的js应用程序的前端？

5 个答案: