Heim Web-Frontend HTML-Tutorial 前端的认识和看法 - sunshinegirl_7

前端的认识和看法 - sunshinegirl_7

May 22, 2016 pm 05:19 PM

1. 什么是前端 ?

就像一场足球比赛,有人做前锋,有的是中场战将,有的是后卫,有的是候补等等,每个人在不同的位置上都做着不同的事,最终完成一场完美的比赛,前端在这里有点类似前锋,它需要将球最后临门一脚射到球门里。

前端它是一个工作,它的工作领域是浏览器,它即要跟美工、设计打交道又要懂点后台代码,知道ajax怎么从后台拿数据,接口怎么调用,最主要的是把美工的图合成完成的网页呈现在用户面前,需要实现网页的交互效果。

前端处于设计与后台的中间领域,起到承上启下的作用,这也要求前端工程师的知识面在横向上必须要广。服务器技术要懂,产品与交互也要懂。

它需要掌握三个基本的技能:HTML,CSS, javascript。另外还需要懂点PHP或者其他应用在Web上的编程语言。

前端工作师主要面向用户、浏览器、数据接口。

2. 前端工程师的价值主要体现在哪里?

(1)让用户更便捷的获取信息。拿到psd,产出线上的代码,中间有很多细节需要去认真对待。表单的各种交互,页面的不同元素(区域)间的信息交互,都需要依靠自己的技术能力和自己对用户的感知去完成。

(2)让前端更加规范和标准。不断看各种规范,比较不同版本的区别,并思考引入的新特性的意义(技术或商业)。关注这个行业的最新发展,找出创新点,把自己对问题或bug的解决思路或方案总结并分享,为自己的公司、同行以及整个行业贡献自己的力量,推动前端的发展。

深入学习前端,需要做很多,前端各类库与框架的架构设计,w3c各种标准的深入研究,对于javascript语言本身的研究,对浏览器的原理分析,对于网络传输协议的原理分析等等。

3. 需要掌握的技能?

(1)解决浏览器兼容问题。前端需要懂得至少三种浏览器内核的接口,还要面对各种莫名其妙的bug,前端的技术也是日新月异,css3的规范标准什么时候确定还是未知。

(2)横向技能面要广。懂交互设计,懂视觉设计,略懂后台技术,精通http协议,linux操作,shell, vim, git, svn;至少熟练一门后端语言(java, c++, php, python),至少使用过一个MVC开发框架,还有前端的各种开源项目(jquery, requirejs, seajs, bootstrap, yui…);要灵活运用“面向对象”,“面向过程”,“函数式”的编程方法;还要懂设计模式,富客户端应用的常用架构模式。

(3)纵向技能要深。js, css, html5, css3…

(4)关注用户体验,懂得交互设计。帮忙产品经理和交互设计师校验错误是前端工程师的义务和责任。作为页面的实现者,如果不能提前预测出可能存在的问题,后期的错误会越来越多。

4. 应该具备怎样的知识结构?

368e85f1a418d0ade07041dc13a2edb6_r

d96bcca74b4d4a010c3b17366685cc18_r

图片地址:http://www.zhihu.com/question/19588629

 

5. 前端在研发团队的位置?

比较理想的情况是,前端的输入依然是psd稿,如果产品和设计能力不够,还可能需要前端参与交互设计。输出则是一个可以工作的模块或页面。前端直接从服务器模板(php, jsp)开始工作,前后端同学在开始工作前写好页面应该用的变量以及ajax通信的接口,随后独立开发,最后连调测试。这种开始方式,前端可以根据接口和数据结构来设计页面的html结构和css结构,把冗余工作降到最低。这样会让前端发挥更大的主观能动性,也可以让后台更加关注底层算法与数据存储于通信的逻辑。

6. 前端工程师的未来?

前端工程师一般讲有三条路可走,一条向前走,一条向后走,一条一直做前端,深入下去。向前就是往用户体验与交互设计甚至产品设计师上走,这最能体验前端价值,即用户体验。向后走是做web开发,往数据库和后台开始方向走,不再区分前后端,大家深入产品的研发实现,这条路就是与软件工程师融合的路,这时的价值就体现在业务功能的实现上。最后就是一直深入做前端开发,对各种前端类库框架的架构设计,对浏览器原理的研究和js的研究,对网络传输协议原理分析等等,这条路因为要涉及很多原理与根本性的东西,走的人也不是很多。

前端的未来则是:有越来越多的软件开始在浏览器里运行,随着google和火狐的webos的发展,甚至在不久的将来,浏览器的api,会替代操作系统的sdk成为软件开发的标准。随着html5的发展,浏览器里运行的早已不是简单的页面,而是复杂的web应用。前端工程师也早已不是页面制作,而是web应用工程师。而未来究竟是web时代还是app时代仍是一个难以回答的问题。

 

参考:http://blog.tianya.cn/post-5620717-83777702-1.shtml

http://kingzs70.sinaapp.com/2013/05/11/my_view_on_the_career_development_of_web_front_end

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Mar 04, 2025 pm 12:32 PM

Das offizielle Konto -Webseite aktualisiert Cache, dieses Ding ist einfach und einfach und es ist kompliziert genug, um einen Topf davon zu trinken. Sie haben hart gearbeitet, um den offiziellen Account -Artikel zu aktualisieren, aber der Benutzer hat die alte Version immer noch geöffnet. Schauen wir uns in diesem Artikel die Wendungen und Wendungen und wie man dieses Problem anmutig ansehen. Nach dem Lesen können Sie sich leicht mit verschiedenen Caching -Problemen befassen, sodass Ihre Benutzer immer den frischesten Inhalt erleben können. Sprechen wir zuerst über die Grundlagen. Um es unverblümt auszudrücken, speichert der Browser oder Server einige statische Ressourcen (wie Bilder, CSS, JS) oder Seiteninhalte, um die Zugriffsgeschwindigkeit zu verbessern. Wenn Sie das nächste Mal darauf zugreifen, können Sie ihn direkt aus dem Cache abrufen, ohne ihn erneut herunterzuladen, und es ist natürlich schnell. Aber dieses Ding ist auch ein zweischneidiges Schwert. Die neue Version ist online,

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Mar 04, 2025 pm 02:39 PM

Dieser Artikel zeigt einen effizienten PNG -Grenzzusatz zu Webseiten mithilfe von CSS. Es wird argumentiert, dass CSS im Vergleich zu JavaScript oder Bibliotheken eine überlegene Leistung bietet, um zu beschreiben, wie die Randbreite, Stil und Farbe für subtile oder herausragende Effekte angepasst werden können

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Mar 12, 2025 pm 04:05 PM

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

See all articles