Question

我想问的问题是，下面的Javascript片段是否格式良好，并且根据Javascript / jQuery语法，可读性和速度进行了结构化。

这段代码的功能是提供一个标签界面，通过点击标签显示内容的不同部分。我当然可以使用插件，但是我想保持简单。它现在的写作方式很好，但我想知道是否有改进，以便学习正确的风格和编码方式。

// Wrap in anonymous function to not pollute the global namespace
(function() {
    // Hide all wrappers. 
    // If javascript is disabled then all wrappers have to be visible.
    $('#main .wrapper').hide();

    // Show selected wrapper. This class is set in the HTML that is loaded.
    // The wrapper has the id of the html, perhaps using href is better?
    var html = $('.nav a.selected').html().toLowerCase();
    $('#main #' + html).show();

    // Show selected wrapper on click event
    $('.nav a').click(function(){
        // Remove selected class all tabs
        $('.nav a').removeClass('selected');

        // Hide all wrappers and remove selected class from all wrappers
        $('#main .wrapper').hide();

        // Add selected class to new tab
        $(this).addClass('selected');

        //Show selected wrapper
        var html = $(this).html().toLowerCase();
        $('#main #' + html).show();

        return false;
    });
}());

我希望你能给我一些正确优雅编码的建议和建议。提前谢谢！

Answer 1

对我来说很好看。但在一个案例中，您有function() {而另一个function(){。

解决这些问题的最佳方法是使用检查器。例如，我使用phpcs进行PHP工作，使用Pear编码标准（稍作修改）

Answer 2

看起来不错。一些事情：

从它的外观来看，链接的文本控制着显示的div？这似乎有点像你需要聪明的情况。我同意href更好。

我认为：

$('.nav a').click(function(){
  $('.nav a').removeClass('selected');

一读时有点混乱。像这样：

$('.nav a').click(function(){
  $(this).siblings('a').removeClass('selected');

有点冗长，但也更具可读性（在我看来）。

请勿使用return false覆盖默认事件行为。请改用.preventDefault()（有关详情，请参阅此处：http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/）
```
$('.nav a').click(function(e){
  //...
  e.preventDefault();
});
```

Answer 3

只是一些建议：

不要使用元素的内部HTML来决定要显示哪个选项卡，当您想要更改选项卡的文本时，或者您需要本地化UI时，将会激活此选项卡。请改用data-属性。 $('#main').find($(this).attr('data-tab-id')).show()
使用事件委派而不是为每个<a>标记附加一个事件。（对于jQuery＆lt; 1.7使用“.delegate”，对于最新的jQuery使用“.on”）
不要在不需要它的元素上调用.removeClass，如果只执行$('.nav a.selected').removeClass('selected');，可以保存一些无用的内部DOM查询，甚至更好地使用.siblings像这样：$(this).siblings('.selected').removeClass('selected')这样你就不需要存储另一个“nav a”的引用，只需让DOM指示要做什么。

Answer 4

没有一个选择器针对速度或缓存进行了优化。随着jQuery的发展，我看到了更糟糕的情况，它可能会正常工作。作为高性能，专业的JavaScript，它会得到一个D - 。

//side comments are not really there in prod code, this is just for example purposes
//this code assumes the DOM nodes in main wrapper have no ids and can not get them, obviously ids make a huge difference
$(function () { //make sure the document is ready, not needed if you place in <script> at the bottom
    //single var statement validates JSLint
    "use strict";
    var doc = document,
        main = doc.getElementById("main"), //faster than sizzle
        $main = $(main), //faster instantiation of jQuery
        $wrapper = $main.children(".wrapper"), //faster than find, use if possible
        $nav = $(".nav"), //cached
        html;
    //initialize
    $wrapper.hide();
    html = $nav.children(".selected").eq(0).html().toLowerCase(); //stop on first
    $(doc.getElementById(html)).show();
    //add handler
    $nav.delegate("a", "click", function () { //delegate outperforms multiple handlers
        var $this = $(this); //cached
        if ($this.is(".selected")) {
            return false; //return early if this is already selected
        }
        $this.siblings(".selected").eq(0).removeClass("selected");  //you shouldn't need to find more than one
        $this.addClass("selected");
        $wrapper.hide();
        //TODO add ids
        $(doc.getElementById($this.html().toLowerCase())).show();
        return false;
    });
});

如果您想要表现，请熟悉Nick Zackas和其他表演专家的工作，他们会做关于这个主题的演讲和写书。尽可能少地使用jQuery。虔诚地使用JSPerf。质疑你写的所有内容，并在你不确定时留下评论，或者认为在未来的实施中可以做得更好。

祝你好运，结果值得一试。

Javascript片段的正确和优雅的格式/语法

4 个答案: