其他分享
首页 > 其他分享> > 前端学习:前端基本介绍

前端学习:前端基本介绍

作者:互联网

第一讲:前端基本介绍
学习前端内容,首先我们要知道什么是前端,或者说前端工程师需要做什么。
前端开发是什么?
首先前端开发是由网页制作发展过来的,如果很早就接触互联网不难发现以前网页的内容基本都是静态的(以图片文字为主,没有后台数据库、不含程序和不可交互的网页称为静态网页,比较突出的特点就是改变网页中内容状态,如删除某些内容后,再刷新页面并不会保留我们的操作内容,通俗点讲就是说他的内容是写“死”的,不去改代码是不会变的),静态网页最大的作用是供用户浏览。而随着互联网的发展,很明显只用来展示的网页满足不了我们的需求,用户需要更佳美观,交互效果显著,功能更多更全的网页,因此才进行了前后端的分离,有了现在的前端开发。
为什么要前后端分离
这里可能有人就在想,好端端的为什么要进行前后端分离,专门搞个前端开发,这不是增加了人力成本?其实不然,我们都知道,早期的程序开发是不分前后端的,程序员们既需要进行后端开发,又需要进行前端开发,造成代码各种耦合,服务器压力很大,而且服务器因为请求过多一旦出现问题,就会使得前后台一起崩,用户体验很差;另一方面,从开发上讲,因为前后端内容都在不断发展,客户的需求不断增加,要让程序员同时进行前端和后端开发,需要同时操作多种语言和标准,不仅容易出错,而且同时兼顾逻辑不同的前后台语言,很容易造成多而不精——页面达不到客户想要的’高大上‘效果,功能也极容易出现bug,性能优化也不好,最重要的,开发效率还极低。而进行前后端分离,举个形象的例子,就像使用了流水线工序,大大提高了效率和品质,就像流水线工序一样不仅不会增加人力成本,反而可以大大提高每个人的工作效益和价值。
为什么要进行前后端分离,总结来讲就是三点:
1、不分离时代码耦合严重,用户体验差;
2、不分离容易造成程序开发“多而不精”,”品质“低;
3、不分离开发周期长,效率很低,维护也极为不便;
前端开发应用了那些技术
前端开发的主要技术是指html、css、js技术和一些开发框架的使用。
前端发展经历阶段
我们前面说到,前端并不是一开始就存在的,最开始的编程开发前后端时不分离的,也没有所谓的前端开发,后来随着开发和应用的需求变化,进行了前后端分离,才有了现在的前端开发。整个前端发展过程,可以分为好几个阶段,因为本人也没有经历过前面几个阶段,最多只是在资料和整个学习过程中体验体会那一过程,所以也不完整详细介绍,毕竟很多都是看资料了解的。前端整个发展过程篇幅很多,个人感觉这篇文章把整个发展过程都叙述了,也不再过多介绍,
总结一下,一共经历了这么几个阶段:
1、静态页面:前后端开发是一体的,前端代码是后端代码的一部分:后端收到浏览器的请求—>发送静态页面—>发送到浏览器。采用后端MVC模式:
Model(模型层):提供/保存数据
Controller(控制层):数据处理,实现业务逻辑
View(视图层):展示数据,提供用户界面
前端只是后端MVC的V;
代表技术:JSP、PHP;
2、Web 2.0时代:Web 2.0时代:动态网页,富交互;1998年前后Ajax(Asynchronous Java And XML:异步的Java和XML)出现并逐渐大规模应用,从而促进了Web从1.0的静态网页,纯内容展示向Web 2.0模式迈进:前端不再是后端的模板,而是实现了从“获取数据—>处理数据—>展示数据”的完整业务逻辑;
代表技术:Ajax、jQuery;
3、前端MVC与SPA:前端MVC框架出现。另一些框架提出MVVM模式,用View Model代替Controller。MVVM模式也将前端应用分成三个部分:
Model:读写数据
View:展示数据
View-Model:数据处理
View Model是简化的Controller,所有的数据逻辑都放在这个部分。它的唯一作用就是为View提供处理好的数据,不含其他逻辑。特点是View绑定View Model。如果View Model的数据变了,View(视图层)也跟着变了;反之亦然。
single-page application,单页面应用,指在一张网页(single-page)上,模拟出多页面应用程序(application)。用户的浏览器只需要将网页载入一次,然后所有操作都可以在这张页面上完成,带有迅速的响应和虚拟的页面切换。
代表技术:Angular、React、Vue
以上若有不正确的地方还望指正
关于前端学习
总体来讲,前端相关的技术更新十分迅速,需要不断的学习,之后也会写一写更多相关内容,自己写学习的内容,就像开始说的,是想分享一下自己的学习经历过程,希望能有所借鉴,大家共同成长。

标签:网页,前端,前后,介绍,学习,Model,前端开发,View
来源: https://www.cnblogs.com/bkycnd/p/16674005.html