什么是前端

这次给大家带来什么前端,前端的概念详解,一起来看一下。

过年的时候和表哥聊天,他说以前也用html,js,css写过网页,那现在的前端和那个时候有什么不同,我当时就向他介绍了一下前端。

但是当时我对前端的理解也不是很透彻,所以我自我感觉也没有介绍清楚。

随着我自己学习的深入,我自己觉得有必要总结一篇前端和写网页不同的博文了。同时也为了记录下我现在的见解和认识,等过一段时间回过头来在看,肯定会对自己的提高有很多感悟。

由于知识水平实在有限,如果有什么错误,麻烦在评论区中指出,谢谢!

立即学习“前端免费学习笔记(深入)”;

网页开发时代

那个时候,人们通过html写网页,并且用js,css调整样式。

我们在各种经典书籍《Head First HTML与CSS》《精通CSS:高级Web标准解决方案》《JavaScript高级程序设计》里面学到的,也基本是这方面的东西。慕课网上的大部分视屏,也都仅限于这方面而已。

网页模板时代

随着网页的复杂度加大,程序员为了开发上的便利,于是开发各种网页模板语言。

比如说简化写css的less语言,简化写js的coffeejs,还有很多html和js混写的各种模板。

ajax时代

随着js的发展,XHR的发明使得程序员可以在前端处理数据,分担了一些后端的工作。

很好的例子是表单验证啊,浏览器滑块滑到底部才开始加载图片啊什么的。

SPA时代

SPA=Single Page Application单页面应用。

随着ajax的发展,人们在浏览器端就可以做数据处理,这就意味着前端可以写一整个应用程序,即SPA。

在SPA时代,程序员用js来处理整个前端部分,用户在打开网站的时候就下载所有的js,在以后的打开页面等交互中,就直接在浏览器端用js进行处理,不需要向服务端发送http请求。

这个时候有一个很重要的概念就是路由,由于打开页面不发送http请求,所以对于一个网址,需要浏览器不知道怎么办。这个时候需要有一种机制来指导浏览器对于什么网址打开什么内容,这就是路由。

MVC时代

随着SPA时代的发展,人们为了开发的方便,经常把项目分为各种模块。其中最典型的是MVC,即model,view和control。

这个时代涌现出各种框架,比如backbone框架等。

MVVM时代

由于MVC的control模块一般是由服务端处理的,这不属于前端的内容。为了解决这个问题,人们提出了一种解决办法,就是利用view model来代替control,这就是MVVM框架的由来。实现的技术叫做双向绑定。

这个时代就出现了现代前端框架:reactjs,angularjs等。这个时候,前端工程师已经可以开发在浏览器上运行的和应用软件一样的软件了,包括在手机浏览器上运行的。

相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章!

相关阅读:

实现瀑布流布局的俩种方法

详解浏览器渲染流程

overflow的滚动有哪些重要性

HTML中移动端有哪些布局方案

以上就是什么是前端的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545850.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 17:32:43
下一篇 2025年12月20日 06:26:07

相关推荐

  • 什么是前端路由及解释

    什么是前端路由 所谓的前端路由,拥有这样一种能力:客户端浏览器可以不依赖服务端,根据不同的URL渲染不同的视图页面。 前端路由的存在合理性 在Ajax之剑还未亮出,前端仍处于襁褓之中的时候,路由的工作交给了后端。在进行页面切换的时候,浏览器发送不同的url请求;服务器接收到浏览器的请求时,通过解析不…

    好文分享 2025年12月21日
    000
  • div与span有什么区别

    这次给大家带来div与span有什么区别,div与span使用的注意事项有哪些,下面就是实战案例,一起来看一下。 共同点: DIV标签和SPAN标签是将一些内容当成一个整体进行处理,比如,整体隐藏,整体移动。类似一个盒子一样的东西。这样做可以精简代码,提高效率。 不同点: 1、div是将内容放到一个…

    好文分享 2025年12月21日
    000
  • 标注HTML元素时class与id有什么不同

    这次给大家带来标注html元素时class与id有什么不同,标注html元素时class与id的注意事项有哪些,下面就是实战案例,一起来看一下。 在网页中有很复杂的 HTML 结构,如果我们使用 CSS 来定义相关的样式,就需要为这些结构指定相应的标志,然后再编写相应的 CSS 选择器来获取他们赋予…

    好文分享 2025年12月21日
    000
  • 前端的VUE怎么使用

    我用vue做项目也有一段时间了,对于vue来说现在已经比较熟悉了,但是关于vue的入门文章却一直没有写过,那么今天就给大家带来几个案例,好好介绍下vue这种好用的小工具。 相关视频教程推荐:Vue.js 教程推荐:2018最新的5个vue.js视频教程精选 1.本篇文章使用的vue版本是2.4.2,…

    好文分享 2025年12月21日
    000
  • class与id有什么区别

    id与class有什么区别?id是什么意思?class是什么意思?今天我们就给大家介绍清楚这俩种容易混淆的概念 在div、span、p标签、h1、h2等标签中看见id和class使用,id和class是非常常用的标签内属性。 以上是我们常见看见id与class存在于div标签内。“header”和&…

    好文分享 2025年12月21日
    000
  • URL和URI的有什么区别

    初学http协议,就被这两个相似的术语搞蒙了,查了很多资料,总算搞清楚了。(找资料还是英文啊,靠谱。。。)。                                                          一直存在很多技术上的争论,其中最为妙的恐怕就是web地址应该叫什么的问题。通…

    2025年12月21日
    000
  • 好用的67个前端工具、库和资源

    这个列表包含许多种类的资源,所以这里我将它们分组整理。 Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js— 快速实现全屏滚动特性 Typed.j…

    好文分享 2025年12月21日
    000
  • 怎样零基础学习前端开发

    对于很多想转行的朋友来说,最大的担心就是觉得自己对计算机不太懂,最多会打个游戏,更别说计算机语言基础了。担心自己一点基础没有,不会学也学不会。下面我们就以前端开发为例,分享下如何零基础学会前端开发。 1.首先学习前端,必须要学会的就是HTML和CSS。 有关HTML和CSS的相关基础知识点,可以在P…

    好文分享 2025年12月21日
    000
  • javascript如何实现表单验证_有哪些最佳实践

    JavaScript表单验证核心是提交前快速反馈错误以提升体验,但不可替代后端校验;需结合原生API、解耦规则、无障碍支持及前后端协同。 JavaScript 表单验证的核心目标是:在用户提交前快速反馈错误,提升体验,同时不能替代后端校验。实现上应兼顾即时性、可访问性与健壮性,而非仅靠 onsubm…

    2025年12月21日
    000
  • javascript怎样进行物理模拟?_javascript的物理引擎如何集成?

    JavaScript需借助第三方物理引擎实现物理模拟,推荐Matter.js(2D易用)、Planck.js(高精度2D)、Cannon.js(3D)、Impulse.js(轻量);集成时应隔离物理循环与UI框架,谨慎同步状态以保证稳定性。 JavaScript 本身不内置物理模拟能力,但可以通过第…

    2025年12月21日
    000
  • 如何使用javascript操作DOM_常见方法有哪些?

    JavaScript操作DOM的核心是通过内置API获取、修改、添加或删除页面元素;常用方法包括getElementById、querySelector、innerHTML、classList、createElement、addEventListener等,配合事件委托可高效实现动态交互。 Java…

    2025年12月21日
    000
  • 如何实现JavaScript验证表单_前端验证的最佳实践是什么

    JavaScript表单验证核心是提升体验与保障基础数据质量,但不可替代后端验证;需结合HTML5原生属性与JS增强交互,确保提示清晰可访问,并始终信任后端校验。 JavaScript 表单验证的核心目标是提升用户体验和保障基础数据质量,但它不能替代后端验证。前端验证应快速反馈、友好提示、不干扰正常…

    2025年12月21日
    000
  • JavaScript树形结构数据如何操作?

    JavaScript树形结构操作核心是递归与引用处理:查找需递归匹配id并判空children;添加需先定位父节点并初始化children;删除须从父级children中过滤目标节点;扁平化用DFS递归,还原依赖parent_id分组挂载。 JavaScript树形结构数据操作核心是递归和引用处理,…

    2025年12月21日
    000
  • javascript CSP策略是什么_如何防止跨站脚本攻击?

    CSP是一种浏览器强制执行的白名单式安全策略,通过HTTP头或meta标签限制资源加载以防止XSS。需禁用内联脚本与eval、改用事件监听、显式声明第三方域名,并配合服务端转义等其他防护措施。 JavaScript CSP(Content Security Policy,内容安全策略)是一种浏览器安…

    2025年12月21日
    000
  • JavaScript服务端渲染_javascriptSEO优化

    服务端渲染(SSR)通过在服务器端生成完整HTML,使搜索引擎爬虫无需执行JavaScript即可抓取页面内容,从而提升JavaScript应用的SEO效果。Next.js、Nuxt.js等主流框架提供开箱即用的SSR支持,结合动态title与meta标签、语义化结构、Open Graph标签及si…

    2025年12月21日
    000
  • javascript的SEO优化有哪些方法_如何让单页应用被搜索引擎收录

    单页应用(SPA)需通过服务端渲染(SSR)、预渲染或动态渲染使爬虫获取完整HTML,辅以语义化标签、动态元信息、规范路由及Sitemap等基础SEO实践来提升搜索引擎收录效果。 单页应用(SPA)默认对搜索引擎不友好,因为传统爬虫难以执行 JavaScript 渲染页面内容。要让搜索引擎收录 SP…

    2025年12月21日
    000
  • JavaScript模块化有哪些规范_CommonJS和ES6有何区别?

    JavaScript模块化主流规范有CommonJS和ES6 Module两种广泛落地,前者用于Node.js默认环境,后者获现代浏览器及新版Node原生支持;AMD/CMD已基本淘汰。 JavaScript模块化主要有四种主流规范:CommonJS、AMD、CMD 和 ES6 Module(ESM…

    2025年12月21日
    000
  • javascript的Cookie是什么_如何设置和读取用户信息?

    Cookie是浏览器提供的客户端小型文本存储机制,用于保存登录状态等数据,由服务器通过Set-Cookie设置、浏览器自动回传,具大小限制、作用域控制及HttpOnly等安全属性。 Cookie 是浏览器提供的一种小型文本存储机制,用于在客户端(用户电脑)保存少量数据,比如登录状态、用户偏好或会话标…

    2025年12月21日
    000
  • JavaScript中如何实现模块化_CommonJS和ES6区别

    JavaScript模块化主要有CommonJS和ES6两种方式:前者用require/module.exports,运行时同步加载,Node原生支持;后者用import/export,编译时静态分析,浏览器和新Node版本原生支持;二者长期共存、各司其职。 JavaScript模块化主要靠 Com…

    2025年12月21日
    000
  • javascript的Date对象有哪些坑_如何处理时区和格式化问题

    JavaScript Date对象四大坑:一、字符串构造默认本地时区解析,无偏移ISO串按UTC解析致日期偏差;二、getXXX()方法返回本地时间值,需用getUTCXXX()获取UTC值;三、格式化方法行为不一致且难定制,推荐Intl.DateTimeFormat或专业库;四、Date仅存毫秒数…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信