如何做好前端开发工作

多数做开发的朋友在做前端工作的时候,总会感觉到有一些困难,甚至有时候会不知如何下手。其实,前端工作(我们这里只讨论前端编码工作,并不包含UI设计)也是一种开发行为,与后台编码本质上并无二致,区别只在于所运用的工具和框架不同。本文为对前端感兴趣(或者不得不做些前端工作)的朋友提供一些建议。

image.png

         首先,你需要知道前端工作非常简单,比后台开发要简单的多。因为用到的知识就那么几种(HTML/CSS/JavaScript,再加上几个常用的JS库(比如jQuery),就这么多。而且,你无需对这几种知识都特别精通,只需要知道平时常用的有哪些,就够了,就可以应付大部分的工作了。如果是用现成的前端框架(比如Bootstrap),那就更简单了,按照API组装就是了,甚至都不需要有多少编码工作。之所以觉得难,是因为不了解,接触的不多。

         其次,做前端工作也需要有一定的逻辑思维能力。对于美工给出的一个UI设计图,需要分析其结构、布局(左右、上下结构),根据布局选择块状排版(div)。先完成整体结构(大块),然后再考虑大块里面的小块,包括文字、图片、图标等各种页面元素,无非是div逐层嵌套。至于是用块级元素(比如div),还是用内联元素(比如span),根据便捷性和个人喜好,无硬性规定。这是UI

         再说页面脚本(JavaScript),跟后台编码一样,也是为了实现某种功能而进行的代码设计。对此需要了解JavaScript的基本语法,jQuery的基本使用方法,基本上,就够用了。对于稍有开发经验的程序员来说,了解这些并不难。

         关于前端工作所需要了解和掌握的知识点(HTML元素比如div, span, ulCSS元素比如float, display, position, margin, padding, border, box-shadowJS函数比如click, bind, blur等等),不会不要紧,但是不能不懂。换句话说,对于某个功能,你可以不知道怎么实现,但是必须要知道可以用什么来实现。

举个例子,要实现一个浮动框,不知道该怎么做,但是我知道用position可以实现。那好,百度css position的用法,网上一大堆,看一下就知道了。

再举个例子,有这样一个场景:要实现一个类似开关的功能,即点击一个按钮,实现开的功能,再次点击这个按钮,实现关的功能。按照正常的实现逻辑,需要用到jQueryclick函数,在脚本中设置一个标志位,默认设置为true(或者false也可以),click函数中先判断标志位,如果为true,则关,然后将标志位复位为false;相反如果为false,则开,然后将标志位复位为true,这个逻辑大家都懂。那,我不想设置标志位这个多余的参数,有没有办法实现?我知道有个toggle函数应该可以用,但是不知道具体怎么用。没关系,百度一下jQuery toggle,同样可以搜出很多例子,用一次就知道了。

类似种种,大家可以借助联机学习的方式,对于大篇幅需要记忆的东西,不必要刻意记,把它扔到记事本里面,用的时候查一下,或者网上搜一下,节省时间。

然后,在编码过程中,充分利用可视化的调试工具。比如谷歌浏览器可以使用DevTools(右击选择inspect),火狐可以使用firebug。利用调试工具,可实时查看页面效果,在线修改,提高效率。同时,对于网上写的比较好的案例,也可以查看源码,加以借鉴。

最后,不管是前端还是后台开发,都需要有严谨的态度。边框宽度为1个像素就是1个像素,边距10像素就是10像素,不要“看着差不多就行”。另外,对于代码,最好有“代码洁癖”,不要有多余的代码,格式、缩进、命名都要按照规范来写。

总结一下,不畏难(有信心)、有思路(逻辑思维)、知识储备(联机学习),外加严谨的工作态度,做好前端工作一点都不难。