前端编程，对于初学者来说，不仅仅是需要每天去接受新知识，而且要训练你的编码速度和提高你的代码质量。那么要快速高效的编程，我们可能就需要去借助一下工具去辅助我们去开发。下面我分享一些我在编程中经常使用的小技巧。
1.页面布局规划
当我们拿到UI设计稿的时候不要急急忙忙的就去从上往下去码页面，因为这样你到最后会发现你写了很多重复的页面代码和样式；使整个项目的代码看起来很臃肿。所以我们第一步应该去过一遍页面的布局结构；把它的大分类分出来，比如：顶部导航部分、轮播图、侧边栏部分、中间内容区域、底部导航部分。然后去看每个大的分类里面可分的小模块。
如图1导航栏部分可以分出两个大的模块，模块内的内容样式基本一致，这样我们就可以直接用一套代码去编写同一模板的内容了，包括样式也只要一套。又如内容模块1，里面的组成是：顶部定位分类+分类内容；又如内容模块2的电影介绍，里面的组成是：电影图片+左右角的小标签+底部影片介绍（片名、评分、简介）。这样去训练页面编码，对后期去学习页面模块化会有很大的帮助。
2.html快捷语句
使用快捷语句开发，抛开简单语句的复制粘贴，看起来高端大气上档次；哈哈。如图2
使用ul[class="contentUl"]>(li[class="contentLi"][onclick="liClick()"]>text[class="contentTxet"]{内容})*7 加tab键就能出来一套想要的代码
又如图3，使用 Ctrl +鼠标左键选中多个内容批量修改内容
3.编译器插件
我使用的是Sublime Text3编译器，这里我介绍一些我经常用的，个人感觉很不错的小插件.
Autoprefixer:
用css的浏览器兼容书写，自动分析你的css文件，解析出新的css文件，可以配置你要兼容的浏览器，即自动补全兼容写法。如图4
JavaScript Completions：
js最基本的api快查片段。如图5
JSFormat：
可以帮助你自动格式化 JavaScript 和 JSON。很多网站的JS代码都进行了压缩，一行式的甚至混淆压缩，这让我们看起来很吃力。而这个插件能帮我们把原始代码进行格式的整理，包括换行和缩进等等，使代码一目了然。
FileDiffs：
强大的比较代码不同工具。比较当前文件与选中的代码、剪切板中代码、另一文件、未保存文件之间的差别。可配置为显示差别在外部比较工具，精确到行。
插件安装方法：
打开编译器，按下Ctrl+Shift+P调出命令面板
输入install调出 Install Package 选项并回车，然后在列表中选中要安装的插件。
注意：安装插件时保持网络畅通，避免插件由于网络原因奔溃
以上仅个人理解，有什么说的不对的地方，欢迎指正！
多年编程经验，今年1月整理了一批2019年最新WEB前端教学视频，不论是零基础想要学习前端还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流qun：296212562，即可免费获取，学习不怕从零开始，就怕从不开始。
网友评论