Web 前端最佳实践

Web 最佳实践

 

前端

 

选择器

  • 尽量使用ID选择器
  • 基于Id的选择器:先使用ID选择器定位,然后再使用find方法精确查找
 
  1. // Fast:
  2. $( "#container div.robotarm" );
  3. // Super-fast:
  4. $( "#container" ).find( "div.robotarm" );
  • 指定选择的上下文
 
  1. // 劣质的代码:因为需要遍历整个DOM来找到.class
  2. $('.class');
  3. // 高品代码:因为只需在指定容器范围内进行查找
  4. $('.class', '#class-container');

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

  • 多级查找:右边尽量指定得详细点而左边则尽量简单点
 
  1. // Unoptimized:
  2. $( "div.data .gonzalez" );
  3. // Optimized:
  4. $( ".data td.gonzalez" );
  • 避免冗余
 
  1. $( ".data table.attendees td.gonzalez" );
  2. // Better: Drop the middle if possible.
  3. $( ".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.
  3. $( ".category :radio" ); // Implied universal selection.
  4. $( ".category *:radio" ); // Same thing, explicit now.
  5. $( ".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);
      9. var table = $( "#myTable" );
      10. var parent = table.parent();
      11. table.detach();
      12. // ... add lots and lots of rows to table
      13. 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" );
  3. // Much faster:
  4. $( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
  5. .appendTo( "head" );
  6. //预定义css类会更好
  7. // .swedberg_color{color:#0769ad}
  8. $( "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)
      5. //better
      6. var myLink=$("#myLink").addClass("bold");
      7. //stuff
      8. myLink.on("click", myClickHandler)
    • 利用闭包保持代码整洁

      1. //bad
      2. var privateThing = "secret";
      3. var publicThing = "not secret";
      4. var changePrivateThing = function() {
      5. privateThing = "super secret";
      6. };
      7. var sayPrivateThing = function() {
      8. console.log( privateThing );
      9. changePrivateThing();
      10. };
      11. sayPrivateThing();
      12. //better
      13. var feature = (function() {
      14. // Private variables and functions
      15. var privateThing = "secret";
      16. var publicThing = "not secret";
      17. var changePrivateThing = function() {
      18. privateThing = "super secret";
      19. };
      20. var sayPrivateThing = function() {
      21. console.log( privateThing );
      22. changePrivateThing();
      23. };
      24. // Public API
      25. return {
      26. publicThing: publicThing,
      27. sayPrivateThing: sayPrivateThing
      28. };
      29. })();
      30. 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");
  4. //better
  5. // 不错,只调用了一次attr,css函数与此类似
  6. $myLink.attr({
  7. href: "#",
  8. title: "my link",
  9. rel: "external"
  10. });
 

参考

jQuery 优化

+
 
 
上一篇:img图片居中


下一篇:python学习之【第十三篇】:Python中的生成器