前端网站开发

前端网站开发

2019-11-14

  对于前端网站开发,想必很多的人都是了解的,如今的前端变化也是非常的快的,风格趋势也是不同的,越来越多的样式和js需要实现,才能更好的满足大众的要求,下面随着小编来 看下前端网站开发的知识吧!

  一、零基础起步

  首先,无论学任何一个技术,都是从零基础开始的,前端开发也是一样。做软件开发,是从事编程开发工作,必须先从语法基础开始学习,通过语法组成产品效果。

  前端开发的基础语法,由HTML+CSS+JavaScript组成,这是前端开发最基本的3个语言。

  二、网页布局基础:HTML+CSS

  HTML就是超文本标记语言,组成网页内容的最基本语言。你可以直接说他是网页的骨架,网页的图片、文字、视频、音频、程序都需要他引入到网页中体现。

  光是HTML做网页,只是有了内容,当然是远远不够的。因为只是HTML的话,只能用Table做布局才能勉强做出个成型的网页来。但是从Web2.0时代开始,都是盒子模型布局法了,也就是用DIV+CSS来实现布局了。

  CSS就是层叠样式表。通过样式属性来对标签进行布局规范,在不再使用table布局的时候,只要CSS样式对网页标签进行对应的布局实现才是正确的开发方式了。

  HTML(div)+CSS布局,是基础入门的基本步骤,在这个阶段,你需要学习的内容,包括有:

  1.标签语义化,SEO

  2.页面加载的流程和原理

  3.网页结构

  4.盒子模型(W3C盒子模型和IE盒子模型)

  5.CSS选择器

  6.CSS布局浮动、定位

  在刚刚开始的阶段,大家学习的布局方式基本都是以px为单位的静态布局方法。熟悉好布局方法,先给自己一个小目标,做一个简单的电商网页的基本结构出来,不用特效,不需要交互。

  三、浏览器脚本语言:JavaScript

  JavaScript是我们学习前端开发中非常重要的一个内容,也是一个大家经常掉坑里的难点。JavaScript现在可以说是互联网时代使用率最高的脚本语言了,在网页中,所有的数据渲染,特效的交互都需要利用JavaScript,来影响浏览器的显示。

  JavaScript不只是开发网页特效和渲染数据的重要内容,在学习前端开发的后期,大量使用算法和框架的时候,对JavaScript基础的考验也是很多的。

  在基础阶段,我们学习JavaScript需要注意:

  1.基本关键字指令

  2.基本数据类型、数组

  3.函数

  4.面向对象编程

  5.原型链、闭包

  6.JSON

  7.Ajax

  8.DOM(文档对象模型 原生DOM操作)

  9.事件捕获、冒泡、代理

  10.常用函数方法

  11.ES5、6、7

  在JavaScript部分学习,主要还是要去理解好交互的原理,把原理分析清楚,真的理解语法,那写出多复杂的逻辑也是手到擒来。

  四、JavaScript经典类库jQuery

  说到学习JavaScript,很多小白同学肯定会很头痛他的原生写法。每次逻辑业务都需要手动写,也就是用一次就造一次轮子。觉得很麻烦。如果能简单一点就好了。

  因为JavaScript有可以封装的特性,所以在后面也出现了很多用JavaScript封装的类库、插件。比如说最经典的类库就是jQuery了。

  jQuery类库就是在类库里面封装好了很多JavaScript的事件方法。jQuery通过封装,减轻了遍历、对象选择等等很多的问题。把网页特效的实现变得简单化,通过调用方法就可以了。

  在学习jQuery的时候,需要重点认识的有:

  1.jQuery语法和JavaScript原生语法的差异

  2.Dom对象和jQuery对象

  3.jQuery的入口函数和JavaScript的入口函数的差异

  4.jQuery事件的执行逻辑。

  学习jQuery,最需要达到的效果就是能快速的完成网页的特效,比如说轮播图、手风琴菜单、旋转木马、放大镜等等这些特效。能完成一个电商网站的布局+特效开发是最基本的要求了。

  这些就是零基础学习必备的一些基本内容,在入门前端开发最基本需要掌握的东西,把基础理解好,才能为后面的学习做更多的准备。

  五、多终端进阶学习

  除了基础的PC端,目前移动端可以说是非常火的了。

  比PC端单一的网页不同,在移动端的技术可以应用到WEB-APP,小程序,Hybrid-App等等。

  Web-App

  也就是我们常见的浏览器(以及内置浏览器,比如微信)打开的大型移动端网页。比如我们常见的电商网站,功能性网站,管理网站,在布局和功能上都有APP的效果。

  做好Web-App开发,最基本的很多人肯定会说响应式布局,但是前端开发是又5种布局法的,除了出名的响应式,还有在移动端最重要的弹性布局法,也就是很多人头疼的rem布局。

  除了布局方法之外,在H5新特性和触屏事件和设备兼容性问题也是需要信手拈来。

  六、小程序

  这个也不用多说,现在可以说是非常火的,各大平台都有在做自己的小程序,各种砍价,抢票,电商,游戏都有运用。这个以微信小程序为例,主要是微信团队基于前端基础来做的封装语法,主要的还是ES语法。小程序目前很多公司都是招聘前端开发,目前还没有独立的小程序开发工程师,所以小程序可以说是前端工程师高薪就业的加分技能,换句话说就是成熟开发必备了。

  七、Hybrid-App

  又称混合式APP,可能听说的人很少,但是18年是越来越多人去开发了,这种是能直接产出下载到终端的APP的,在体验感上可以说已经具备传统APP的大部分功能了。这种开发门槛较低,也就是前端开发就可以完成。多数都是大包平台就能做,这个你可以后面了解一下。

  八、前端主流技术框架

  前面的都是基础东西,现在去就业前端开发,不是只靠个基础东西,搞个移动端页面就可以算成熟了。前端3大框架,VUE、Angular、React这3个可以说是现在非常火热的了。

  九、基础语法都可以写的前端,为什么还要框架?

  很多小白朋友是不懂什么是框架的,只听过jQuery这些东西,以为就是框架。或者认为框架就是加速开发,觉得这些库、插件就能完成框架的工作了。

  其实框架的出现,是改变前端地位的重要标志。最重要的表现,就是前后端分离,在前后端分离之前,很多后端开发都是又当爹又当妈的,效果不好效率也不高,我就是在后端出身,深知痛苦。

  现在的前端项目,比以前是更加复杂化、多样化了。项目复杂了,问题也多了。

  十、那框架到底解决了什么问题?

  解决重复引用外部js,以用jQuery开发为例,很多时候都是不能单一完成一个项目的,还需要引用很多的第三方插件和库,导致会一个项目引入很多外部JS文件。

  这样不仅让代码变得杂乱,而且很影响打开速度。但是用框架呢,以VUE为例,一般会和构建工具配合,然后就是一个入口文件就可以完成了,在运行时候就在入口引入一次,一劳永逸。

  使用组件化开发,组件是前端框架里非常强大的功能之一,它可以扩展你的HTML,封装可以重用的代码块,比如你的轮播图、tab切换、页面头部、页面底部等等。

  这种独立的组件具有了结构(html),表现(css)和行为(js)完整的功能,很大程度的节省了代码量,提高了代码的复用性。特别是团队合作的时候,可以很好的提高使用效率。

  减少开发周期,如果你觉得jQuery可以减少开发周期了,那其实框架可以比库更快。比如说使用jQuery开发的时候,很多时候是需要频繁去操作DOM,每次效果都要去查找DOM,这样就显得很繁琐了。使用框架的时候,很多功能都得到了封装,比如说很多指令都有数据绑定,数据格式化这些功能。这样更多时候,我们开发的时候只需要关注数据的逻辑就行了。

  10个知名开发团队

  1.淘宝前端团队(FED)

  阿里巴巴淘宝前端团队网站,一群崇尚极客精神的人正在用技术为体验提供无限可能。在这里,可以涉及“无线”、“全栈”、“工程”、“安全”、“架构”等多方面的技术。

  2.FEX 百度前端研发部

  FEX 是百度「Web 前端研发部」的内部名称,其中 FE 是 Front End 的缩写,X 代表我们不仅关注前端技术,还更重视全端及全栈的能力。

  3. Alloy Team 腾讯Web前端团队

  腾讯Web前端团队 – Alloy Team,源于2008年成立的腾讯WebQQ团队,致力于Web前端技术的研究,热衷HTML5、移动Web技术,用最酷的新技术开发各种有趣的开源项目。

  4.奇舞团

  360奇舞团(奇虎75Team)是 奇虎360公司Web平台部前端工程师 + 部分特约嘉宾 组成的一个前端团队。这里产出很多的开源项目和产品,如 ThinkJS 一款Node.js MVC框架,众成翻译—一款友好的翻译平台等。

  5.凹凸实验室

  凹凸实验室 始建于2015年10月,是一个年轻基情的技术团队。

  O2面向多终端技术体系,致力于构建沉淀与分享包括但不限于交互、页面制作技巧、前端开发、原生APP开发等方面的专业知识及案例。

  6.YMFE 去哪儿大前端技术中心

  去哪儿网大前端技术中心(YMFE)是由 FE,iOS 和 Android 工程师共同组成的,去哪儿最具想象力、创造力和影响力的大前端团队,致力于为业务开发提供一体化的移动开发解决方案,努力提升各个产品线在移动端的开发效率及使用体验。

  7.JDC 京东设计中心

  京东的用户体验设计团队,分享内容涵盖UR用户研究、ID交互设计、VD视觉设计、FD前端开发

  8.饿了么前端

  饿了么前端的网址重定向到了饿了么前端在知乎上的专栏,他们在 github 上也开源了很多好东西。

  9.携程UED

  携程UED团队在体现携程产品设计全局观的基础上建立细致的产品设计规范,通过用户研究,推动设计改进,以优化交互、视觉及产品体验。

  10.美团前端

  美团前端团队近年来快速发展,由原来的前端团队转变成涵盖Web、iOS和Android 而组成美团大前端。

  PS: 更新

  蚂蚁体验科技

  蚂蚁体验科技,让用户体验美好,探索极致用户体验与最佳工程实践,国内前端领域不可忽视的力量。开源了Ant Design,AntV,语雀,云凤蝶等多个优秀项目。

  以上就是小编为大家所介绍的前端网站开发的知识和国内知名的团队了,大家觉得怎么样呢,其实即使自己不太会,只要好好的去学,还是可以的,前端网站开发如今也很吃香的!(图片来自网络,版权归原作者所有!)