jQuery函数链接/嵌套的代码约定

时间:2010-09-08 15:16:20

标签: javascript jquery

正如jQuery开发人员所知,jQuery允许像这样轻松创建动态HTML

var d = $('<div/>')
    .append('some text')
    .append(
        $('<ul/>').append(
            $('<li/>').text('list item')
                      .css("color", "blue")
                      .click(function() {
                          // do something
                      })
        )
    );

创建这样的动态HTML有什么好的编码约定可以在任意数量的级别上进行,同时仍然能够识别我在元素层次结构中的位置,并且可以发现我是否已关闭所有括号/括号正常?

请不要指引我到模板库。

2 个答案:

答案 0 :(得分:4)

不要忘记在创建新元素(jQuery 1.4 +)时可以将属性映射作为第二个参数传递:

$("<li/>", {
  text: "list item",
  css: { color: "blue" },
  click: function(){
    // do something
  }
)

请参阅http://api.jquery.com/jQuery/#creating-new-elements

答案 1 :(得分:0)

使用Handlebars或EJS等模板从行为特定代码中分离模板。 把手有一个额外的附加功能,即预编译模板并将其转换为缩小的js。这种缩小的js实际上减少了http调用并加快了页面的加载速度。

在模板中,您可以添加类或ID,以便在常见的css文件中提供样式。