Question

我有一个可以在页面上多次使用的组件。我想将HTML和组件配置保持在一起。

<div id="myComponent">
   <table>
      <th>c1</th>
      ...
      <th>cX</th> 
   </table> 
</div>
<script>
  var componentApi = new MyModule.MyComponent($('#myComponent')[0]);
  // configure component through componentApi with ajax source and callback render funcions
</script>

但我对此并不满意。首先是因为我不喜欢引用id唯一性（它使模板复杂化），其次，我不喜欢通过所有文档不必要地搜索id。

但我的所有其他想法都不起作用：

我也不想依赖script的id（以前计算）兄弟姐妹），因为同样的原因。
并且.currentScript在IE 11中不起作用。
Div没有onLoad活动......

我们是否有比通过所有文档搜索id更好的解决方案，只要我们需要的是使用HTML层初始化HTML中的组件？

添加：我不确定是否希望将组件的HTML和组件的JS配置放在一起会损害DRY原则。它们都构成了“配置”。其次，使用扁平data-属性配置层次结构并不容易，这就是配置部分为HTML的原因。最后，配置HTML的最简单方法是编写HTML。

添加：其他我认为“流行配置”（完全或部分重用）可以封装到另一个“外部”组件中。只有固定的id值才能阻止封装。当然我了解id可以在创建HTML / DOM的那一刻生成，但我很乐意发现有可能完全逃脱使用id 的引用。

添加：在一个短语中，问题是id是全局的（全局范围，全局搜索）。而且，“影子dom”+“网络组件”将在未来解决这个问题，但也许有人知道Polymer如何填充这个吗？

Answer 1

保留您的代码DRY (don't repeat yourself)，您可以避免使用一堆script元素。

我建议使用class来识别需要初始化的元素，并通过data-属性保持元素的配置。

例如

<div class="component" data-config1="1" data-config2="2"> ... </div>
...
<!-- At end of HTML page -->
<script>
  $(".component").each(function(idx, elem)
  {
     var componentApi = new MyModule.MyComponent(elem);
     var $elem = $(elem);
     componentApi.config1 = $elem.data("config1");
     // etc...
     //configure component through componentApi 
  }
</script>

甚至，如果它对你来说更方便

var myData = function(key){$elem.data(key);};

然后

componentApi.config1 = myData("config1");

如何为javascript组件引用HTML图层？

1 个答案: