Web 前端最佳实践

前端

选择器

• 尽量使用ID选择器
• 基于Id的选择器：先使用ID选择器定位，然后再使用find方法精确查找

1. // Fast:
2. $( "#container div.robotarm" );
3. // Super-fast:
4. $( "#container" ).find( "div.robotarm" );

• 指定选择的上下文

1. // 劣质的代码：因为需要遍历整个DOM来找到.class
2. $(‘.class‘);
4. // 高品代码：因为只需在指定容器范围内进行查找
5. $(‘.class‘, ‘#class-container‘);

这一条是否有上一条等同？

• 多级查找：右边尽量指定得详细点而左边则尽量简单点

1. // Unoptimized:
2. $( "div.data .gonzalez" );
4. // Optimized:
5. $( ".data td.gonzalez" );

• 避免冗余

1. $( ".data table.attendees td.gonzalez" );
3. // Better: Drop the middle if possible.
4. $( ".data td.gonzalez" );

• 不要ID与其它选择器混搭 
  ID已经表示唯一了，再加上其它选择符只会加重选择器的负担

1. $(‘#outer #inner‘); // 脏
2. $(‘div#inner‘); // 乱
3. $(‘.outer-container #inner‘); // 差
4. $(‘#inner‘); // 干净利落，后台只需调用document.getElementById()

• 不要使用万能选择器

1. $( ".buttons > *" ); // Extremely expensive.
2. $( ".buttons" ).children(); // Much better.
4. $( ".category :radio" ); // Implied universal selection.
5. $( ".category *:radio" ); // Same thing, explicit now.
6. $( ".category input:radio" ); // Much better.

Dom 操作

• 避免DOM节点频繁流化

  样本代码

  1. $.each( myArray, function( i, item ) {
  2. var newListItem = "<li>" + item + "</li>";
  3. $( "#ballers" ).append( newListItem );
  4. });

  • 方法一： 临时detach

    1. var ballers = $("#ballers");
    2. var parent = ballers.parent();
    3. ballers.detach();
    4. $.each(myArray, function(i, item) {
    5. var newListItem = "<li>" + item + "</li>";
    6. ballers.append(newListItem);
    7. });
    8. parent.append(ballers);
    10. var table = $( "#myTable" );
    11. var parent = table.parent();
    12. table.detach();
    13. // ... add lots and lots of rows to table
    14. parent.append( table );

  • 方法二：创建临时DOM节点

    1. var frag = document.createDocumentFragment();
    2. $.each( myArray, function( i, item ) {
    3. var newListItem = document.createElement( "li" );
    4. var itemText = document.createTextNode( item );
    5. newListItem.appendChild( itemText );
    6. frag.appendChild( newListItem );
    7. });
    8. $( "#ballers" )[ 0 ].appendChild( frag );

  • 方法三：append html

    1. var myHtml = "";
    2. $.each( myArray, function( i, item ) {
    3. myHtml += "<li>" + item + "</li>";
    4. });
    5. $( "#ballers" ).html( myHtml );

• 临时改变多个节点样式

1. // Fine for up to 20 elements, slow after that:
2. $( "a.swedberg" ).css( "color", "#0769ad" );
4. // Much faster:
5. $( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
6. .appendTo( "head" );
8. //预定义css类会更好
9. // .swedberg_color{color:#0769ad}
10. $( "a.swedberg" ).addClass("swedberg_color" );

CSS

JS 编码

• 代码组织

  • 链式写法要换行

    1. $("#myLink")
    2. .addClass("bold")
    3. .on("click", myClickHandler)
    4. .on("mouseover", myMouseOverHandler)
    5. .show();

  • 链式写法中避免使用匿名函数，否则会严重影响代码易读性

  • 使用变量保存选择器结果方便重用

    1. //bad
    2. $("#myLink").addClass("bold");
    3. //stuff
    4. $("#myLink").on("click", myClickHandler)
    6. //better
    7. var myLink=$("#myLink").addClass("bold");
    8. //stuff
    9. myLink.on("click", myClickHandler)

  • 利用闭包保持代码整洁

    1. //bad
    2. var privateThing = "secret";
    3. var publicThing = "not secret";
    4. var changePrivateThing = function() {
    5. privateThing = "super secret";
    6. };
    8. var sayPrivateThing = function() {
    9. console.log( privateThing );
    10. changePrivateThing();
    11. };
    12. sayPrivateThing();
    14. //better
    15. var feature = (function() {
    16. // Private variables and functions
    17. var privateThing = "secret";
    18. var publicThing = "not secret";
    20. var changePrivateThing = function() {
    21. privateThing = "super secret";
    22. };
    24. var sayPrivateThing = function() {
    25. console.log( privateThing );
    26. changePrivateThing();
    27. };
    29. // Public API
    30. return {
    31. publicThing: publicThing,
    32. sayPrivateThing: sayPrivateThing
    33. };
    34. })();
    35. feature.sayPrivateThing();
• 利用“事件冒泡”机制进行事件绑定

1. //bad
2. $(‘ul>li‘).on(‘click‘,clientHandler);
3. //better
4. $(‘ul‘).on(‘click‘,‘li‘,clientHandler);

• 数组循环中不要每次循环都访问数组的长度，应该先缓存长度

1. //好的写法
2. var myLength = myArray.length;
3. for ( var i = 0; i < myLength; i++ ) {
4. // do stuff
5. }
6. //好的写法
7. for ( var i = 0,myLength=myArray.length; i < myLength; i++ ) {
8. // do stuff
9. }
10. //差的写法
11. for ( var i = 0; i < myArray.length; i++ ) {
12. // do stuff
13. }

• 其它

1. //bad
2. // 糟糕：调用了三次attr
3. $myLink.attr("href", "#").attr("title", "my link").attr("rel", "external");
5. //better
6. // 不错，只调用了一次attr,css函数与此类似
7. $myLink.attr({
8. href: "#",
9. title: "my link",
10. rel: "external"
11. });

参考

jQuery 优化