我有很多元素，我的一个 JS 小部件需要经常创建这些元素并将其添加到 DOM。他们永远不会改变。
因此，一种选择是将 HTML 本身作为字符串存储在 JS 中，并使用 JQuery 从字符串中创建元素，然后将其附加到文档中:
var elements = "<div><table><tr><td>1</td><td>2</td></tr></table></div>";
function create() {
return $(elements);
}
$("body").append(create());
另一种选择是编写一个函数，多次使用 document.createElement("div") 或 $("
在第一种情况下，我有一个很大的 JS 字符串，它实际上是 HTML。在第二种情况下，我有一段笨重的 JS，它实际上代表 HTML。 其中一个或另一个有(不利)优势吗？有没有我没有想到的更好的解决方案？function create() {
return $("<div>").append($("<table>")......
}
$("body").append(create());
最佳答案
详解3种常见的JS创建DOM方式及最佳方式。
我将提供 3 种创建大型 DOM 的方法及其优缺点，当然还有创建大型 DOM 的最优化方法及其原因。 底线是在 js 中创建 DOM 时，原生 JS 和 DOM 方法是你的 friend ，除非没有其他方法(这不太可能)，否则不要使用 Jquery。
用于比较的测试数据:创建了 400 行和 5 列并附加到 DOM。 testData 是您从后端以 json 形式获取的用于创建表的对象列表。
附上不同浏览器的执行时间测试结果快照
HTML
<div id="employeeListContainer1"></div>
<table id="employeeList2">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Title</th>
<th>ID</th>
<th>Department</th>
</tr>
</thead>
</table>
第一种方式:字符串连接(在跨浏览器性能方面最优化的方式)
var tableElementContainer1 = document.getElementById("employeeListContainer1");
var temptableHolder = '<table><thead><tr><th>First Name</th><th>Last Name</th><th>Title</th><th>ID</th><th>Department</th></tr></thead><tbody>';
for(var i=0,len=testData.length; i<len; i++){
temptableHolder += '<tr><td>' + testData[i].firstName + '</td><td>' + testData[i].lastName + '</td><td>' + testData[i].title
+ '</td><td>' + testData[i].id + '</td><td>' + testData[i].department + '</td></tr>';
}
temptableHolder += '</tbody></table>';
tableElementContainer1.innerHTML = temptableHolder ;
优点:
缺点:
第二种方式:Native Js document.createElement()(就跨浏览器的性能而言，这是第二种最佳方式)
var tableBody = document.createElement('tbody');
var tableElement2 = document.getElementById("employeeList2");
for(var i=0,len=testData.length; i<len; i++){
tableRow = document.createElement("tr");
for(var k in testData[i]){
rowCell = document.createElement("td");
rowCell.appendChild(document.createTextNode(testData[i][k]));
tableRow.appendChild(rowCell);
}
tableBody.appendChild(tableRow);
}
tableElement2.appendChild(tableBody);
优点:
缺点:
第三种方式:使用 Jquery 创建 DOM(我的建议是不要使用它)
var tableBody = $('<tbody></tbody>');
var tableElement2 = document.getElementById("employeeList2");
for(var i=0,len=testData.length; i<len; i++){
tableRow = $("<tr></tr>");
for(var k in testData[i]){
rowCell = $("<td></td>");
rowCell.append(testData[i][k]);
tableRow.append(rowCell);
}
tableBody.append(tableRow);
}
tableElement2.append(tableBody);
优点:
缺点:
关于javascript - 在 JavaScript 中创建大型静态 DOM 元素的最佳方式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9614932/
很好奇，就使用rubyonrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提
我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。 最佳答案
question的一些答案关于redirect_to让我想到了其他一些问题。基本上，我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解)，但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行，然后我尝试添加评论。靠我自己，我设法让它进入了可以从script/console添加评论的阶段，但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作，以添加评论。我的问题是:这是“标准”方式吗？我的另一个问题的答案之一似乎暗示应该有一个CommentsController参
我正在尝试找出如何为我的Ruby项目创建一种“无类DSL”，类似于在Cucumber步骤定义文件中定义步骤定义或在Sinatra应用程序中定义路由。例如，我想要一个文件，其中调用了我的所有DSL函数:#sample.rbwhen_string_matches/hello(.+)/do|name|call_another_method(name)end我认为用我的项目特有的一堆方法污染全局(内核)命名空间是一种不好的做法。因此方法when_string_matches和call_another_method将在我的库中定义，并且sample.rb文件将以某种方式在我的DSL方法的上下文中
查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用
有这些railscast。http://railscasts.com/episodes/218-making-generators-in-rails-3有了这个，你就会知道如何创建样式表和脚手架生成器。http://railscasts.com/episodes/216-generators-in-rails-3通过这个，您可以了解如何添加一些文件来修改脚手架View。我想把两者结合起来。我想创建一个生成器，它也可以创建脚手架View。有点像RyanBates漂亮的生成器或web_app_themegem(https://github.com/pilu/web-app-theme)。我
这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Rubysyntaxquestion:Rational(a,b)andRational.new!(a,b)我正在阅读ruby镐书，我对创建有理数的语法感到困惑。Rational(3,4)*Rational(1,2)产生=>3/8为什么Rational不需要new方法(我还注意到例如我可以在没有new方法的情况下创建字符串)？
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt