当前位置: 首页 > news >正文

什么是前端开发?

  • 前端开发是什么一种工作?这里以修房子举例:

jquery根据数据去生成对应的html代码。首先得有一个html代码的“房屋构造”,然后根据数据去填充“房屋构造”的“血肉”,最后JavaScript通过事件等方法给一砖一瓦修好的房屋添加“灵魂”、“思想”。

这就是前端工作涉及到的三大组成部分:HTML、css、javaScript;对应分别是:“骨架”、“血肉”、“灵魂”。在写代码的过程中,一砖一瓦就是一个键盘一个键盘敲击出来的“王国”,首先搭建地基,修建房梁,使其有个大概得轮廓,而后用白粉、水泥装饰它,写到这儿是不是就结束了呢?答案是:不是的,前面两步是静态的,房子感觉修好了,但是静态的,这需要源源不断的灵魂、活力注入,所以里面需要住一家人,人可以在里面做各种事情。

说得或许不对,仅代表个人观点。。。 

  • 前端开发需要不断的学习知识

前端变化快,年年变,月月变。你看前端框架都变了好多了?从原生的html、css、javaScript三者分离;到jquery操作dom节点+layui组件的使用;到Vue前端框架、React前端框架、(市面上常用的是这两种),还有其它:Angular、Svelte、Ember.js、Backbone.js等

  • 不同前端框架的介绍 ,以及特点介绍

React:

  • 简介: 由 Facebook 开发和维护的 JavaScript 库,用于构建用户界面,特别是单页应用。
  • 特点:
    • 组件化: UI 被分割成独立的、可复用的组件。
    • 虚拟DOM: 提高性能,通过在内存中维护虚拟DOM来最小化实际DOM操作。
    • 单向数据流: 数据流动方向明确,有利于调试和理解应用。
  • 主要使用场景: 单页应用(SPA),需要高交互性的用户界面。

Vue.js:

  • 简介: 由 Evan You 开发的渐进式 JavaScript 框架,用于构建用户界面。
  • 特点:
    • 渐进式框架: 可以根据需求选择性使用框架功能。
    • 双向数据绑定: 提供类似 Angular 的数据绑定机制。
    • 组件化: 支持组件化开发,简化 UI 组件的开发和管理。
  • 主要使用场景: 中小型项目、需要快速上手的项目。

Angular:

  • 简介: 由 Google 开发和维护的前端框架,用于构建复杂的大型应用。
  • 特点:
    • 完整框架: 提供了从数据绑定、表单处理到路由、依赖注入等一系列功能。
    • 双向数据绑定: 模型和视图自动同步。
    • TypeScript: 使用 TypeScript 编写,提供了静态类型检查和现代 JavaScript 特性。
  • 主要使用场景: 企业级应用,大型复杂项目。

Svelte:

  • 简介: 一种新型的前端框架,区别于其他框架,它在构建时而不是运行时执行大部分工作。
  • 特点:
    • 无虚拟DOM: 编译时转换为高效的原生 JavaScript 代码,直接操作 DOM。
    • 性能优越: 因为编译时完成了大部分工作,运行时性能优于虚拟DOM框架。
    • 更少的代码: 语法简洁,需要编写的代码量少。
  • 主要使用场景: 性能要求高、需要轻量级解决方案的项目。

Ember.js:

  • 简介: 用于构建复杂的单页应用的前端框架。
  • 特点:
    • 约定优于配置: 采用大量的约定,减少开发者的配置和决策。
    • 强大的路由系统: 支持嵌套路由和异步数据加载。
    • 稳定性: 框架的 API 和功能稳定,适合长期维护的项目。
  • 主要使用场景: 需要快速开发、维护成本低的复杂应用。

Backbone.js:

  • 简介: 轻量级的前端 MVC 框架。
  • 特点:
    • 结构简单: 提供最基本的 MVC 组件,易于理解和使用。
    • 灵活性高: 可以与其他库和框架组合使用。
    • 事件驱动: 通过事件系统管理模型和视图的交互。
  • 主要使用场景: 需要灵活性高、简单的应用或与其他库组合使用。
  • 在什么场景下,选择什么样的前端框架? 

 选择合适的前端框架,取决于项目的规模、复杂度、团队的技术栈和具体需求。

  • 架构风格: Angular 是一个全能的框架,提供了完整的解决方案;React 和 Vue 则更专注于视图层,但可以通过生态系统扩展功能;Svelte 在构建时优化,运行时性能优越;Ember 提供约定优于配置的开发方式;Backbone 简单轻量,适合与其他库组合使用。
  • 数据绑定: Angular 和 Vue 提供双向数据绑定;React 和 Svelte 使用单向数据流;Ember 和 Backbone 采用事件驱动模式。
  • 学习曲线: Vue 和 Svelte 相对容易上手;React 和 Angular 需要更多的学习和理解;Ember 和 Backbone 由于其独特的设计理念,学习成本可能较高。
  • 性能: Svelte 通过编译时优化,性能最佳;React 和 Vue 的虚拟 DOM 提高了性能;Angular 和 Ember 由于功能完整,性能相对较差但适用于大型项目。

写在最后,在开发的时候,总会有奇奇怪怪的想法想记录一下。。。 

相关文章:

什么是前端开发?

前端开发是什么一种工作?这里以修房子举例: jquery根据数据去生成对应的html代码。首先得有一个html代码的“房屋构造”,然后根据数据去填充“房屋构造”的“血肉”,最后JavaScript通过事件等方法给一砖一瓦修好的房屋添加“灵魂…...

大数据面试题之Spark(1)

目录 Spark的任务执行流程 Spark的运行流程 Spark的作业运行流程是怎么样的? Spark的特点 Spark源码中的任务调度 Spark作业调度 Spark的架构 Spark的使用场景 Spark on standalone模型、YARN架构模型(画架构图) Spark的yarn-cluster涉及的参数有哪些? Spark提交jo…...

Spring Boot 和 Spring Framework 的区别是什么?

SpringFramework和SpringBoot都是为了解决在Java开发过程中遇到的各种问题而出现的。了解它们之间的差异,能够更好的帮助我们使用它们。 SpringFramework SpringFramework是一个开源的Java平台,它提供了一种全面的架构和基础设施来支持Java应用程序的开…...

JVM原理(四):JVM垃圾收集算法与分代收集理论

从如何判定消亡的角度出发,垃圾收集算法可以划分为“引用计数式垃圾收集”和“追踪式垃圾收集”两大类。 本文主要介绍的是追踪式垃圾收集。 1. 分代收集理论 当代垃圾收集器大多遵循“分代收集”的理论进行设计,它建立在两个假说之上: 弱分…...

1961 Springboot自习室预约系统idea开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot 自习室预约管理系统是一套完善的信息系统,结合springboot框架和bootstrap完成本系统,对理解JSP java编程开发语言有帮助系统采用springboot框架(MVC模式开发),系统具有完整的源代码和数据库…...

前端面试题(12)答案版

1. H5的新特性&#xff1f; 1) 更加语义化的标签,如<header>、<nav>、<article>等,便于网页结构的表达。 2) 新的多媒体标签,如<video>和<audio>,支持本地视频和音频的播放。 3) 本地存储API,如localStorage和sessionStorage,用于在客户端保存数…...

SpringMVC 域对象共享数据

文章目录 1、使用ServletAPI向request域对象共享数据2、使用ModelAndView向request域对象共享数据3、使用Model向request域对象共享数据4、使用map向request域对象共享数据5、使用ModelMap向request域对象共享数据6、Model、ModelMap、Map的关系7、向session域共享数据8、向app…...

每天五分钟深度学习框架pytorch:tensor向量之间常用的运算操作

本文重点 在数学中经常有加减乘除运算,在tensor中也不例外,也有类似的运算,本节课程我们将学习tensor中的运算 常见运算 加法+或者add import torch import numpy as np a=torch.rand(16,3,28,28) b=torch.rand(1,3,28,28) print(a+b) import torch import numpy as np a…...

【数据结构】(C语言):栈

栈&#xff1a; 线性的集合。后进先出&#xff08;LIFO&#xff0c;last in first out&#xff09;。两个指针&#xff1a;指向栈顶和栈底。栈顶指向最后进入且第一个出去的元素。栈底指向第一个进入且最后一个出去的元素。两个操作&#xff1a;入栈&#xff08;往栈尾添加元素…...

c++类成员指针用法

1&#xff09;C入门级小知识&#xff0c;分享给将要学习或者正在学习C开发的同学。 2&#xff09;内容属于原创&#xff0c;若转载&#xff0c;请说明出处。 3&#xff09;提供相关问题有偿答疑和支持。 c中新增类成员指针操作&#xff0c;为了访问方便&#xff0c;他是指…...

[240625] Continue -- 开源 Copilot | Web-Check 网站分析工具 | Story of EOL

目录 Continue -- 开源 CopilotWeb-Check 网站分析工具Web-Check 提供全面的网站分析功能Web-Check 支持多种部署方式&#xff1a;配置选项开发环境Web-Check 使用多种数据源进行分析 Story of EOLASCII 文本中的换行符问题 Continue – 开源 Copilot 让 Continue 和 Ollama 成…...

【Mac】Auto Mouse Click for Mac(高效、稳定的鼠标连点器软件)软件介绍

软件介绍 Auto Mouse Click for Mac 是一款专为 macOS 平台设计的自动鼠标点击软件&#xff0c;它可以帮助用户自动化重复的鼠标点击操作&#xff0c;从而提高工作效率。以下是这款软件的主要特点和功能&#xff1a; 1.自动化点击操作&#xff1a;Auto Mouse Click 允许用户录…...

javaSE知识点整理总结(下)、MySQL数据库

目录 一、异常 1.常见异常类型 2.异常体系结构 3.异常处理 &#xff08;1&#xff09;finally &#xff08;2&#xff09;throws 二、JDBC 1.JDBC搭建 2.执行SQL语句两种方法 三、MySQL数据库 1.ddl 2.dml 3.dql &#xff08;1&#xff09;字符函数 &#xff08;…...

Perl入门学习

Perl是一种强大的脚本语言&#xff0c;以其灵活性和文本处理能力而闻名&#xff0c;常用于系统管理、Web开发、生物信息学以及数据处理等领域。以下是Perl语言入门学习的一些关键点&#xff1a; ### 1. Perl简介 - **起源与特点**&#xff1a;Perl由Larry Wall在1987年创建&am…...

2024年7月计划(ue5肉鸽视频完成)

试过重点放在独立游戏上&#xff0c;有个indienova独立游戏团队是全职的&#xff0c;由于他们干了几个月&#xff0c;节奏暂时跟不上&#xff0c;紧张焦虑了。五一时也有点自暴自弃了&#xff0c;实在没必要&#xff0c;按照自己的节奏走即可。精力和时间也有限&#xff0c;放在…...

恢复策略(上)-撤销事务(UNDO)、重做事务(REDO)

一、引言 利用前面所建立的冗余数据&#xff0c;即日志和数据库备份&#xff0c;要将数据库从一个不一致的错误状态恢复到一个一致性状态&#xff0c;还需要相关的恢复策略&#xff0c;不同DBMS的事务处理机制所采用的缓冲区管理策略可能不同&#xff0c;发生故障后的数据库不…...

【鸿蒙学习笔记】位置设置

官方文档&#xff1a;位置设置 目录标题 align&#xff1a;子元素的对齐方式direction&#xff1a;官方文档没懂&#xff0c;看图理解吧 align&#xff1a;子元素的对齐方式 Stack() {Text(TopStart)}.width(90%).height(50).backgroundColor(0xFFE4C4).align(Alignment.TopS…...

41.HOOK引擎设计原理

上一个内容&#xff1a;41.HOOK引擎设计原理 在一个游戏里通过hook来完成各种各样的功能&#xff0c;比如hook点是a、b、c&#xff0c;然后a点会有它自己所需要的hook逻辑&#xff0c;b、c也是有它们自己的hook逻辑&#xff08;hook逻辑指的是hook之后要做的事&#xff09;&am…...

STM32启动流程 和 map文件的作用

一&#xff0c;启动流程 1. 复位/上电 2. 根据 BOOT0/BOOT1 确定程序从哪个存储位置执行 3. 初始化 SP 及 PC 指针 将 0X08000000 位置的栈顶地址存放在 SP 指针中 将 0x08000004 位置存放的向量地址装入 PC 程序计数器 4. 初始化系统时钟 5. 初始化用户堆栈 6. 进入main函数 二…...

深度解析华为仓颉语言

什么是华为仓颉语言&#xff1f; 华为仓颉语言&#xff08;Huawei Cangjie Language&#xff0c;HCL&#xff09;是华为公司推出的一种新型编程语言&#xff0c;旨在解决大规模分布式系统开发中的复杂性问题。仓颉语言以高效、简洁和易用为设计目标&#xff0c;特别适用于云计…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...