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

前端的简单介绍

前端核心的分析

  • CSS语法不够强大,比如无法嵌套书写,倒是模块化开发中需要书写很多重复的选择器

  • 没有变量和合理的样式复用机制,使逻辑上相关的属性值必须字面量的心事重复的输出,导致难以维护

  • CSS预处理器,减少代码的笨重,提高样式代码的可维护性,大大提高了前端在样式上的开发效率

  • 简单来说:CSS预处理器用一种专门的编程语言,进行Web页面样式设计,在通过编译器转划为正常的CSS文件,以供项目使用

  • CSS预处理器,LESS: 基于Node.js,通过客户端处理,使用简单,功能 比SASS简单,解析效率也低于SASS,但实际开发中,我们后台人员需要的话,可以使用LESS

  • 原生的JS开发是【ECMAScript】简称ES

  • 现如今ES5,所有浏览器都可以兼容

  • ES6(为当前主流的版本: 可以使用webpack打包成为ES5使浏览器支持)

  • TypeScript是微软的开发编程语言

    javaScript框架

    • jQuery优点是简化了DOM的操作,缺点是DOM的操作太繁琐,影响了前端的性能,兼容ES6、7、8

    • Angular: 增加了模块化开发的理念

    • React: 提出了虚拟DOM,有效的减少了DOM的操作,提高了前端的渲染效率,缺点是还需学习一门JSX语言

    • Vue是Angular和React的结合

    • Vue有自己的计算属性

    • Axios:是前端通信框架也是为了处理DOM,不具备通信的能力,可以使用jQuery中的AJAX来实现通信框架和服务器的交互

    • Ul框架

    • AmazeUl:又叫"妹子Ul"是一款HTML5跨屏前端框架

    • javaScript构建工具

    • Babel: JS编译工具,主要用于浏览器不支持的ES新特性,比如用于编译,微软的TypeScript

    • WebPack:模块打包器,主要作用是打包、压缩、合并及按序加载

      主流的前端框架

    • iview是一个强大的基于Vue的UL库,官网的地址:iview-admin主要的特点是移动端支持的较多

    • ElementUl也是Vue的UL库,官网的地址:vue-element-admin,主要的特点是桌面端支持较多

      更新换代

    • 早期的JSP,PHP可以称为Web1.0时代,

    • 而基于AJAX带来的SPA的单页面应用时代

    • AJAX是连接前后端的通信

  • 到现在的大前端时代

  • 前端以MVVM(异步通信为主):Model 、View 、ViewModel

  • 而MVC(同步的通信为主)堵塞的问题严重,由异步MVVM更替

  • 前后端分开,前端可以脱离后端独立运行,只是他们的侧重点不在相同

  • SEO搜索引擎优化,

相关文章:

前端的简单介绍

前端核心的分析 CSS语法不够强大,比如无法嵌套书写,倒是模块化开发中需要书写很多重复的选择器 没有变量和合理的样式复用机制,使逻辑上相关的属性值必须字面量的心事重复的输出,导致难以维护 CSS预处理器,减少代码的笨重&#…...

云服务器 centos 部署 code-server 并配置 c/c++ 环境

将你的云服务器改为 centos 8 为什么要将云服务器的操作系统改成 centos 8 呢?原因就是 centos 7 里面的配置满足不了 code-server 的需求。如果你使用的是 centos 7 那么就需要你升级一些东西,这个过程比较麻烦。我在 centos 7 上面运行 code-server 的…...

Ubuntu 22.04 安装 Terraform

Ubuntu 22.04 安装 Terraform 安装 Terraform 安装 Terraform sudo apt updatesudo apt install software-properties-common gnupg2 curlcurl https://apt.releases.hashicorp.com/gpg | gpg --dearmor > hashicorp.gpgsudo install -o root -g root -m 644 hashicorp.gpg…...

MLF - 麻辣粉

MLF全称中期借贷便利(Medium-term lending Facility),理解为央行向商业银行、政策银行发放的贷款,但需要符合一定要求才可向央行申请。银行通过MLF向央行借款的时候,需要提供担保品。一般为国债、央行票据、政策性金融债、地方债、…...

Flutter三棵树的创建流程

一、Flutter常见的家族成员 Widget常见的家族成员 Element常见的家族成员 Render常见的家族成员 二、示例代码对应的Flutter Inspector树 示例代码:MyApp->MyHomePage->ErrorWidget,包含了StatelessWidget、StatefulWidget、LeafRenderObjectWid…...

思维训练第二课 独立主格

系列文章目录 文章目录 系列文章目录前言一、独立主格特点 二、独立主格的构成1.名词/人称代词主格现在分词2. 名词/人称代词主格过去分词3. 名词/人称代词主格形容词/副词4. 名词/人称代词主格不定式5. 名词/人称代词主格介词短语6.介词复合宾语 三、独立主格结构的句法功能1、…...

一致性哈希揭秘,深入解析其工作原理

前言 在进行一致性哈希介绍前,先思考2个问题: 什么是Hash一致性Hash和Hash的关系是什么 对于第一个问题Hash的定义 Hash也成散列,基本原理就是把任意长度的输入,通过hash算法变成固定长度的输出。 对于第二个问题&#xff0c…...

前端环境的安装 Node npm yarn

一 node npm 1.下载NodeJS安装包 下载地址:Download | Node.js 2.开始安装 打开安装包后,一直Next即可。当然,建议还是修改一下安装位置,NodeJS默认安装位置为 C:\Program Files 3.验证是否安装成功 打开DOS命令界面&#…...

基于机器视觉的银行卡识别系统 - opencv python 计算机竞赛

1 前言 🔥 优质竞赛项目系列,今天要分享的是 基于深度学习的银行卡识别算法设计 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🧿 更多资料, 项目分享: https://gitee.com/dancheng…...

大数据工具-kafkaUi-lite

1、kafkaUI-lite v1.0 已经发布,此版本更新内容包括: 可以实现 kafak/zookooper/redis 的界面化操作 kafka: 多环境管理、生产消息、消费消息、创建 topic、删除 topiczookeeper: 多环境管理、查看节点、查看节点数据redis: 多环境管理、查询数据2、kafkaUI-lite 介绍 史上…...

Vdue之模版语法指令过滤器计算属性监听属性

模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom, 结合响应系统,V…...

Mysql权限控制语句

1.创建用户 create user ky32localhost IDENTIFIED by 123456 create user:创建用户开头 ky32:用户名 localhost 新建的用户可以在哪些主机上登录 即可以使用ip地址,网段主机名 ky32localhost ky32192.168.233.22 ky32192.168.233.0/2…...

小程序如何导入配送账号

为了提高配送效率和用户体验,可以导入配送账号(包括电子面单快递物流账号、同城外卖配送账号)到小程序中。导入后,可以实现一键发货,无需手动回填单号。而且在小程序中可以查看到物流状态,对于同城配送&…...

ubuntu(18.04) 安装 blast 并在php中调用

1、下载 https://ftp.ncbi.nlm.nih.gov/blast/executables/blast/LATEST/2、解压,配置环境变量 tar zvxf ncbi-blast-2.14.1-x64-linux.tar.gz解压后改名为 blast 配置环境变量,可以不配置 使用的时候直接绝对路径使用(本次使用绝对路径&am…...

UML—时序图是什么

目录 前言: 什么是时序图: 时序图的组成元素: 1. 角色(Actor) 2. 对象(Object) 3. 生命线(LifeLine) 4. 激活期(Activation) 5. 消息类型(Message) 6.组合片段(Combined fragment) 时序图的绘制规则:​ 绘制时序图的3步: 1.划清边界&#xf…...

【每日一题Day364】LC2003每棵子树内缺失的最小基因值 | dfs

每棵子树内缺失的最小基因值【LC2003】 有一棵根节点为 0 的 家族树 ,总共包含 n 个节点,节点编号为 0 到 n - 1 。给你一个下标从 0 开始的整数数组 parents ,其中 parents[i] 是节点 i 的父节点。由于节点 0 是 根 ,所以 parent…...

调试记录 单片机GD32F103C8T6(兆易创新) 程序烧写完成但是没有现象 (自己做的板子)

1. 单片机GD32F103C8T6 的资料 CPU内核:ARM Cortex-M3 CPU最大主频:108MHz 工作电压范围:2.6V~3.6V 程序存储容量:64KB 程序存储器类型:FLASH RAM, 总容量:20KB GPIO端口数量:37 最…...

Leetcode刷题笔记--Hot91--100

1--汉明距离&#xff08;461&#xff09; 主要思路&#xff1a; 按位异或&#xff0c;统计1的个数&#xff1b; #include <iostream> #include <vector>class Solution { public:int hammingDistance(int x, int y) {int z x ^ y; // 按位异或int res 0;while(…...

算法训练一——链表

文章目录 已做...

【JAVA】类与对象的重点解析

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 文章目录 前言类与对象的关系JAVA源文件有关类的重要事项static关键字 前言 Java是一种面向对象编程语言&#xff0c;OOP是Java最重要的概念之一。学习OOP时&#xff0c;学生必须理解面向…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...