前端工程师怎么提高自己的编码速度
Posted 砌墙的砖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端工程师怎么提高自己的编码速度相关的知识，希望对你有一定的参考价值。
我在这里所说的编码速度不忽略质量，而是保证质量的前提下，怎么提高我们的编码效率。今天我们主要说一下的是前端编辑器中可以安装的一款强大的插件--emmet,无论你使用的是dw还是sublime等等编辑器。
1.首先给自己的编辑器安装emmet插件；
2.掌握emmet语法；
3.多有意识的使用练字（好像说了一句废话？？）
其实只要你掌握基本的css选择器，学起来emmet语法是非常简单的，比如什么#（id选择器），>(子元素选择器)，[](属性选择器)等，前面我们有总结过一篇前端工程师必须掌握的30种选择器，有兴趣的可以去查看。这里我举一些例子，大家自己体验体验，找找感觉。
注释的地方是我们输入的，下边的部分使我们在编辑器中对应生成的代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title> emmet grammar</title> 6 </head> 7 <body> 8 <!-- #page>.logo+#navigation>li*5>a{Item $} --> 9 <div id="page"> 10 <div class="logo"></div> 11 <div id="navigation"> 12 <li><a href="">Item 1</a></li> 13 <li><a href="">Item 2</a></li> 14 <li><a href="">Item 3</a></li> 15 <li><a href="">Item 4</a></li> 16 <li><a href="">Item 5</a></li> 17 </div> 18 </div> 19 20 <!-- div+div>p>span+em^bq --> 21 <div></div> 22 <div> 23 <p><span></span><em></em></p> 24 <blockquote></blockquote> 25 </div> 26 27 <!-- div+div>p>span+em^^bq --> 28 <div></div> 29 <div> 30 <p><span></span><em></em></p> 31 </div> 32 <blockquote></blockquote> 33 34 <!-- div+div>p>span+em^^^bq --> 35 <div></div> 36 <div> 37 <p><span></span><em></em></p> 38 </div> 39 <blockquote></blockquote> 40 41 <!-- div>(header>ul>li*2>a)+footer>p --> 42 <div> 43 <header> 44 <ul> 45 <li><a href=""></a></li> 46 <li><a href=""></a></li> 47 </ul> 48 </header> 49 <footer> 50 <p></p> 51 </footer> 52 </div> 53 54 <!-- div>dl>(dt+dd)*3 --> 55 <div> 56 <dl> 57 <dt></dt> 58 <dd></dd> 59 <dt></dt> 60 <dd></dd> 61 <dt></dt> 62 <dd></dd> 63 </dl> 64 </div> 65 66 <!-- ul>li.item$*5 --> 67 <ul> 68 <li class="item1"></li> 69 <li class="item2"></li> 70 <li class="item3"></li> 71 <li class="item4"></li> 72 <li class="item5"></li> 73 </ul> 74 75 <!-- ul>li.item$$$*5 --> 76 <ul> 77 <li class="item001"></li> 78 <li class="item002"></li> 79 <li class="item003"></li> 80 <li class="item004"></li> 81 <li class="item005"></li> 82 </ul> 83 84 <!-- ul>li>[email protected]*5 --> 85 <ul> 86 <li> 87 <li class="item5"></li> 88 <li class="item4"></li> 89 <li class="item3"></li> 90 <li class="item2"></li> 91 <li class="item1"></li> 92 </li> 93 </ul> 94 95 <!-- ul>[email protected]*5 --> 96 <ul> 97 <li class="item3"></li> 98 <li class="item4"></li> 99 <li class="item5"></li> 100 <li class="item6"></li> 101 <li class="item7"></li> 102 </ul> 103 104 <!-- ul>[email protected]*5 --> 105 <ul> 106 <li class="item7"></li> 107 <li class="item6"></li> 108 <li class="item5"></li> 109 <li class="item4"></li> 110 <li class="item3"></li> 111 </ul> 112 113 <!-- attr[];text{} --> 114 <!-- a[name="link"]{click me} --> 115 <a href="" name="link">click me</a> 116 117 <!-- table>#row$*4>[colspan=2] --> 118 <table> 119 <tr id="row1"> 120 <td colspan="2"></td> 121 </tr> 122 <tr id="row2"> 123 <td colspan="2"></td> 124 </tr> 125 <tr id="row3"> 126 <td colspan="2"></td> 127 </tr> 128 <tr id="row4"> 129 <td colspan="2"></td> 130 </tr> 131 </table> 132 133 <!-- table>tr#row$*4>td[colspan=2] --> 134 <table> 135 <tr id="row1"> 136 <td colspan="2"></td> 137 </tr> 138 <tr id="row2"> 139 <td colspan="2"></td> 140 </tr> 141 <tr id="row3"> 142 <td colspan="2"></td> 143 </tr> 144 <tr id="row4"> 145 <td colspan="2"></td> 146 </tr> 147 </table> 148 </body> 149 </html>
希望这篇文章能够帮助到大家
以上是关于前端工程师怎么提高自己的编码速度的主要内容，如果未能解决你的问题，请参考以下文章