一个菜鸟眼中的前端

首先,笔者本身不是大牛级别的程序员,一个入行没多久的菜鸟而已,因此观点难免有所偏差,欢迎指正,不喜勿喷。算是自己工作三年以来的经验之谈吧。

 什么是前端?前端的过去,现状,未来

简单的说前端就是在B/S模式中,处在browser部分的代码,使用的技术主要为javascript ,css,html,html(当然还有actionscript,vbscript等)主要用于内容的展示,css主要用于页面的美化,javascript主要用于行为的控制。然而,前端却不止于此,首先前端代码不一定只适用于B/s模式,比如c/s,移动端,服务端,诸如大家都知道的QQ,YY,还有很多客户端(也不全是组件化的开发模式),我们看到的界面,有很多其实就是我们平时看到的html,只不过是用c++或者类似的方式提供了一个IE的核。phonegap,这个感兴趣的朋友可以自行百度下,一个致力于提供前端开发者一个可以写跨平台移动应用的工具,通过自己底层对前端内容进行解析,可以生成app的工具。至于最近如火如荼的node,更是了得,基于V8引擎提供了诸如文件,进程等操作,让前端工程师可以染指服务端(姑且这么称呼吧)。

在大概七八年前吧,那时候还没有前端这个称呼,html都是静态的,这让我想起了王菲的《寒武纪》,故事从一双玻璃鞋开始...因为表单的验证,js闪亮登场,把部分属于服务端的验证放在浏览器去做,节约了服务的成本,因此迅速风靡一时。网络硬件增强,带宽的增强,让更多的图片,富媒体在网页上的出现提供了良好的条件,html+css迅速兴起,而javascript也不再是当初那个只用于做表单验证的年轻的语言,dom标准的推广,jQuery等一系列优秀插件的出现,javascript能够做的事情越来越多,从最初的验证演变成千变万化的特效,再到如今的项目。

由于个人高度问题,关于前端的现状和未来,仅仅个人观点。就目前来看,前端工程师的需求量和待遇相对过去有很大的提升,互联网的信息共享以及网络服务的兴起,需要大量的前端工程师去实施,而前端的技术也不再是当初简单的只需要html做好内容,css做好展示,js控制行为了。如果一个公司只有不到10个人,那么可能不太需要什么严格的制度,大家可以很开心的和谐的去工作,当在这个公司有天有一万人的时候,我们就必须有一定的制度去管理了,不然就会和混乱,很难协作。同理,如果一个网站只是简单的内容呈现没有太多的业务需求,前端工程师只需要按照设计师的要求完成内容就可以,但是业务很复杂,我们就需要多人协作,就需要模块划分,然后再就是如何去维护。前端框架就出现了,方便复杂的项目更好的管理和协作。所以笔者认为的前端的现状是百花齐放,各种框架,插件层出不穷,例如jq,underscore,arale,requirejs,kissy等等,同时也有各种项目管理工具,grunt  ,gulp,fis(相对于之前的ant,maven等)。前端的未来,肯定是有,眼界问题,不在这里挖坟乱说,欢迎高人讨论。

  如何入门

     前端的入门相对于java,php等相对简单,html,css简单的语法一学就会,js方面需要了解的东西多一点,基本的语法肯定是要的,DOM、BOM、Ajax,事件的要知道,然后就是插件了,在刚开始可以放缓对兼容性的了解,插件会帮去抹去大部分的兼容性问题,我推荐jQuery作为最近基本的插件,当然其他类似的也可以,就jq而言,需要了解选择器,事件绑定,动画,ajax,回调等等。html/css方面本身入门比较简单,恰好本人不善此道,所以不在此多说。然后自己写上一两个网站,基本就知道是怎么回事,算是简单的入门,然后学会使用一些基本的工具,学会使用浏览器调试,然后还需要掌握一些软技能,比如如何跟设计师沟通,如何跟服务端同事描述你需要的接口,跟PM沟通,切图等等,总之,记住,你不光是一个写页面的,设计师,PM,server他们都在为你服务,你的劳动成果是呈现给用户的最终结果。

类似如何入门前端的话题网上不少,总之天道酬勤,不要因为自己现在的处境而找各种借口,动起来,每天改变一点,人生或许会因此不一样。

  性能与维护

  一个好的网站,首先应该快速的响应用户的行为,试想用户用了很长的时间才加载完一个网页,除非有特殊的需要,一般的用户不会有太多的耐心去等待。就如何提升网站性能,YUI的大神们在很早之前就提出14条天条,这个网上能搜到很多,我就不再copy了,总结一下,主要分为以下几方面吧。

1.浏览器资源加载的优化,诸如压缩合并css,脚本文件,合并图片(css  sprite),把脚本文件放在body最后等等,赖加载部分内容(按需加载),使用独立的静态资源服务器(原因可以参考浏览器支持的相同域名并发数字)

2.代码级别的优化,诸如减少dom的操作(笔者建议使用模板来完成),合理的使用正则表达式

关于维护,其实个人也没太多的经验,一方面是晚上必要的文档,另一方面就是模块化,尽量单一职责,还有就是UI的操作跟数据的操作分离,避免因为需求变更导致的需要改动很多东西,所以尽可能在不要把几个功能糅合在一起,这样你在改动的时候会很痛苦。另外,html的结构要尽量的清晰,这个也是我不擅长的,html的结构会很大程度上决定你css修改的难易程度。

  前端的工具

关于工具,实在有太多了,调试工具例如各个浏览的F12,vs等等,还会用到诸如wareshark,fiddle等抓包工具,在这里我想聊得是一些js框架,现在主流的框架大多都遵循commonjs规范,诸如requirejs,seajs,node等等,这些工具让js按照模块定义,加载,运行,封装必要的方法,开放接口,等等,还有模板的使用,尽可能的减少了对dom的操作。这样做的好处一方面是性能,一方面是维护性,开发者很容易找到自己需要实现或者修改的位置。还有就是项目管理工具,诸如grunt,gulp等工具,通过简单的配置文件,就可以完成文件的项目的打包部署等,npm上面有着很丰富的插件库,用来实现各种的功能,诸如压缩合并,css sprite,文件添加MD5等。

  关于轮子

大神们都说不要重复的造轮子,我个人赞同,重复写一个jquery有什么意义,况且你写的也不一定比别人好,但这并不是说,一个简单的功能你为了使用一个轮子而引入一个jqueryUI,首先jqueryUI是支持定制化的引入的,一个基础的功能你完全可以自己去实现,无需引入那么多东西只为了其中的一个功能点。另外,也可以尝试自己去写写插件,这对于自己提升很有帮助的。

时间: 2024-08-05 19:31:47

一个菜鸟眼中的前端的相关文章

谈谈一个菜鸟写了一段时间的静态页面

前端,在公司尤其是在UI的眼里,貌似他们也会写简单的页面,所以很多时候一个菜鸟前端是要被取笑的.. 无妨,毕竟底气不足,也想谈谈作为一个菜鸟,眼中的前端是怎么样的,哪些难以实现. 这段时间收获并不大,因为页面较多,所以很多时候都是抱着完成任务的心态去工作,工作效率就不谈了,写完一个页面,组件类的,之后再有重复的,就是ctr+c 或者ctr+v的工作 技术副总监交了我一些规划似的方法,执行者为我.要组件化框架化,把相同的组件柜类,写样式,然后不同的样式再继续拓展这样前期就会比较难,后期就会比较简单

聊聊java工程师眼中的前端工程师、UED用户体验设计

几年前很多公司都没有专业的前端工程师,时至今日很多公司由于种种原因也没有.现在很多中大型公司前端工程师已经很常见.为什么?  前端工程师的作用: 1. 前端代码质量更加专业 2. 功能更强,用户体验更高 3. 解放java工程师,通过严格的ajax的http接口请求方式与后台java交互,前端后端代码分离,便于维护管理      目前流行的前端: 1. 将多个图片合成一个大图片,利用CSS背景图片的的偏移技术呈现到网页上面,避免多个图片一个个下载 2. js基本min化 3. 充分利用游览器的c

一个重构眼中的“项目管理”

来TID做重构两年多了,眼看着团队像自己一样,从无序到有序,从青涩到成熟,一步步成长起来.从最初的每次例会上轮流抱怨需求变更.需求插单,到现在井然有序的需求排期.项目邮件,这其中的蜕变,看似简单,实则十分不易.前不久支持“XXX”项目时,看到上游的小伙伴们还在混乱中摸爬滚打,故写下此文,希望对这方面有需求的同学有所帮助,也希望这方面有想法的前辈.同学指导.探讨. 开始之前,有几点需要特别声明下: 此处所说的“项目管理”并非专业的项目管理(所以我打了个引号),项目管理这碗水太深,并未做过甚至都没看

我和前端的猿粪,了解一下我眼中的前端。

作为一个自学前端的靓仔(小白),最开始在我的世界中是没有前端这个概念的,相当长一段时间内,我一直把前端称之为「做网站」,是不是有点飘? 1.我眼中的前端 点进来了这篇文章,应该会对前端稍微有那么一点点了解. 高大上一点说:我所见,我所得,皆为前端:大白话:嗯,就是“做网站”的.至于专业的定义,相信搜索引擎的解释更全面,我懒,就不复制了. 前端开发的核心技术:HTML.CSS.JavaScript. 把前端看做一个人,HTML 就是这个人的骨架.血肉.皮毛:而 CSS 决定你穿不穿衣服,穿什么颜色

一个很实用的前端框架Zui

杰哥给我推荐了一个很有用的前端框架-Zui,我看着觉得很神奇的,因为有很多我都不懂.在这里分享总结一下.首先,这是一个中国自己开发的框架,比起很多外国的框架来说,有很详细的API,而且是全中文的,不需要再经过其他人的翻译了.然后,它的内容十分丰富,很系统的分为了:基础,控件,组件,JS插件,视图几大块:而且使用起来,只需要导入js,在适当的地方加上正确的class类就可以了.对于,没有什么js基础的人,也是十分容易上手的.下面我就大体的介绍一下它的各个模块的功能.基础:基础里面我觉得很有用的主要

Flux是一个Facebook团队的前端开发架构

Flux introduction 本文组成: React 官方文档翻译 相关实践心得. 内容上是Flux的介绍,例子将会在以后写出.一旦稍微多了解一点React,很难避免听到Flux这个名词.Flux是一个Facebook团队的前端开发架构.借助单向数据流等其它机制,使得React可以发挥了更加强大的功能.比起其它的框架,Flux更像是一种模式,我们可以投入较少的学习成本,快速上手Flux. Flux应用有三个主要的组成部分:调度者(dispatcher), 仓库(stores),视图(vie

作为一个合格的Web前端工程师,需要具备哪些技能呢?

那么作为一个合格的Web前端工程师,需要具备哪些技能呢? HTML5 HTML是超级文本标记语言,是为"网页创建和其他可在网页浏览器中看到的信息"设计的语言.HTML5是由万维网发布的最新的语言规范,是开放的Web网络平台的奠基石,所以做Web前端,精通HTML5是必须要掌握的一项技能. CSS3 CSS即层叠样式表. 在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,

HBuilder:一个不错的web前端IDE(代码编辑器)

Web前端开发,2000之后基本就是三剑客的天下.到现在DW也是不错的HTMLcoder,如今的前端开发早已是JS的天下.但是DW对于JS方面就弱爆了.DW虽然支持JS语法高亮也支持JQuery JqueryMobile 甚至还支持Phonegap.但是对于JS的支持到了有的程度而已,语法高亮.语法提示仅此而已了.我们需要的是什么呢? 1.高度匹配的语法提示,例如我定义了哪些空间,语法提示至少可以自动提示控件的ID,控件对应的方法函数,自定义函数的语法提示. 2.JS与HTML的大纲导航 3.J

一个开发眼中的运维

在云计算时代,开发和运维的结合变得越来越重要.在 DIFF论坛第一期,前新浪SAE运维主管, 郑志勇,分享了<一个开发眼中的运维>根据自己从开发人员转型运维之后的心得,谈如何把在开发上的运用抽象思维方式运用到运维领域. 1. 运维不是什么? 运维不是打杂的,运维不是客服,运维也不是服务开发的,但要做好合作. 2. 运维是什么? 运维服务于整个产品,保证架构合理,系统稳定.运维只对业务稳定负责,所有的工作都是奔着这个去的. 3. 你如何写程序,写程序的目的是什么? 程序是为了完成特定的功能.为了