web前端
文章平均质量分 58
小光~
平庸之辈
展开
-
Fetch学习
Fetch API 提供了一个 JavaScript接口,用于进行网络操作,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。做前端开发的小伙伴对XMLHttpRequest一定都不陌生,Fetch 可以与XMLHttpRequest相媲美,并且比 XMLHttpRequest提供了更加强大以及灵活的特性。JavaScript 通过XMLHttpRequest(XHR)来执行异步请求,这个方式已经存在了很长一段时间。原创 2023-03-28 16:12:47 · 546 阅读 · 0 评论 -
前端模块化发展历程
1 全局变量+命名空间2 common.js更适合服务器端3 amd定义两个全局变量define和require,使用模块加载工具运行(如require.js)4 umd (Universal Module Definition)可以直接在浏览器中使用,并兼容common.js和amd缺点:使用已构建文件,无法按需加载、难以获得底层依赖模块的bug修复支持)5 es6 module更规范并支持静态分析,还能 treeshaking:把死的叶子给摇下来,清除实际上并没有在给定项目中使用的代码原创 2022-10-25 21:59:03 · 408 阅读 · 0 评论 -
CSS3 动画总结
Animation属性animation-name:关键帧的名字animation-duration:执行的时间,默认为0animation-delay:动画延迟执行的时间,默认为0animation-iteration-count:动画播放次数,默认为1animation-derction:动画执行的方向normal:向前循环reverse:反向运行alternate:交替反向运行alternate-reverse:反向交替,反向开始交替animation-timing-fu原创 2021-06-22 23:25:15 · 1220 阅读 · 1 评论 -
TypeScript总结记录
为什么要使用TypeScript程序更容易理解。js本身是动态类型语言,需要在运行的时候才知道函数的参数或者返回值的类型,而TS直接可以回答。效率更高。可以在不同的代码块和定义中进行跳转,代码自动补全,丰富的接口提升。更少的错误。编译期间就可以发现大部分错误,并且可以杜绝很多低级错误。非常好的包容性。完全兼容JS,第三方库可以单独编写类型文件缺点:增加了一些学习成本短期内增加了一些开发成本基础类型booleannumber、binaryNumberstringundfine原创 2021-06-11 22:02:38 · 185 阅读 · 4 评论 -
React Hooks总结记录
npx避免安装全局模块调用项目内部安装的模块npm run会新建一个shell,并将node_modules加入到系统环境变量,运行完再删除为什么要有React Hook组件很难复用状态逻辑复杂组件难以理解,尤其是生命周期函数React组件一直是函数,使用Hook完全拥抱函数useState会触发组件的renderimport React, {useState} from 'react'const LikeButton: React.FC = () => {原创 2021-06-11 21:56:33 · 180 阅读 · 0 评论 -
CI/CD总结
Docker的优点?缩减部署过程及可移植性 环境标准化 软件升级及版本控制 隔离性k8s是什么?Kubernetes是容器集群管理系统,是一个开源的平台,可以实现容器集群的自动化部署、自动扩缩容、维护等功能。通过Kubernetes可以:快速部署应用 快速扩展应用 无缝对接新的应用功能 节省资源,优化硬件资源的使用k8s中pod是什么?在Kubernetes中,最小的管理元素不是一个个独立的容器,而是Pod。Pod是最小的,管理,创建,计划的最小单元。一个Po..原创 2021-06-11 21:55:17 · 281 阅读 · 0 评论 -
ES6基础
ES6基础1 ES6ECMA Script,Javascript的语言标准提升JS编写大型的复杂的应用程序的能力Babel:ES6 -> ES5的转化器2 let,constlet定义变量,const定义常量不能重复定义块级作用域不存在变量提升2.1 let定义变量,const定义常量let r= 2;r = 4;console.log(r);//4c...原创 2019-01-02 21:03:48 · 231 阅读 · 0 评论 -
React数据管理
React数据管理父子关系的组件:数据传递方式是自顶向下的,一般通过props让子组件拿到父组件的数据非父子关系的组件:依靠状态提升来和兄弟元素进行数据交互通过发布订阅模式做数据交互Redux等数据管理工具1 状态提升方式业务层级很深的话不适合,但扁平化或数据通信都在父子间通信就很适合。2 发布订阅方式当业务量很大的时候,发布订阅方式下的事件是暴露的,容易造成事件之间...原创 2019-01-06 16:30:09 · 601 阅读 · 0 评论 -
Router原理和React-Router
Router原理1 Rouer原理Router指的是浏览器中一种处理访问先后关系的机制,简单点来说就是允许我们在不同页面进行跳转然后记录跳转关系还能原路退回的机制。三个要素:历史:栈的形式跳转:负责不同页面的挑战动作,并且可传递参数事件:打开新页面或退回上一页面触发的逻辑2 常见Router页面RouterHash RouterH5 Router代码演示:// 页面...原创 2019-01-05 21:00:10 · 566 阅读 · 0 评论 -
React的生命周期
React的生命周期1 生命周期生命周期概念(组件从生到死的过程)生命周期的作用2 生命周期节点Mounting:挂载阶段Updating:运行时阶段Unmounting:卸载阶段Error Handling:错误处理(只处理在render方法)3 代码演示import React from 'react';import ReactDOM from 'react-do...原创 2019-01-05 20:33:42 · 362 阅读 · 1 评论 -
WEB本地存储
本地存储(2019/1/2)1 cookie用户端保存请求信息的机制分号分割的多个key-value字段存储在本地的加密文件里域名和路径的限制1.1 常见参数name:cookie名称domain:cookie生效的域名path:cookie生效的路径expires:cookie过期时间HttpOnly:用户端不可更改1.2 代码演示/ 查看cookiedocu...原创 2019-01-03 20:58:09 · 393 阅读 · 0 评论 -
WEB页面加载过程
页面加载过程资源加载过程URL解析->DNS查询->资源请求->浏览器解析1 URL结构http://www.happymmall.com:80/get_data.do?productId=1#title协议 域名+端口 路径 参数 哈希2 DNS(Domain...原创 2019-01-03 20:57:10 · 2311 阅读 · 0 评论 -
三大前端框架对比(慕课网学习记录)
12.29学习记录一、3-1 前端框架的分析What框架中的框就是“约束”,架就是“支撑”,框架会控制我们书写代码时的结构、依赖关系以及交互关系。简单点来说就是我们按照框架的要求来写业务,而与业务无关的一些内容由框架完成,提高开发效率。Why原生JS搞不定了(主要不是技术问题,而是成本、效率问题)。How通过实战开发学会框架的使用二、3-2 前端框架要解决的问题传统的...原创 2018-12-29 16:10:44 · 1265 阅读 · 0 评论 -
Todo总结
Todo总结一、技术选型jQuery:选择器和事件处理Bootstrap:响应式的样式Hogan:Html模版渲染webpack:模块化开发和实时刷新网页二、学到的东西node环境的配置,如何初始化项目。webpack的安装,webpack如何处理js、css、图片以及html模版。jQuery的基本用法。Bootstrap的基本用法。Hogan的基本...原创 2018-12-29 00:47:05 · 604 阅读 · 0 评论 -
(3)认识标签(第二部分)
认识标签(第二部分)标签,制作无序列表。ul:unordered list。 标签来制作有序列表。ol:ordered list。 在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个标签中,这个标签的作用就相当于一个容器。 给div命名,使逻辑更加清晰。table标签,认识网页上的表格。 tbody标签防止那种因网速慢加载一点显示一点的情况,如果把网页加载样原创 2018-01-29 12:16:14 · 293 阅读 · 0 评论 -
(4)认识标签(第三部分)
认识标签(第三部分)使用标签,链接到另一个页面。在新建浏览器窗口中打开链接。 使用mailto在网页中链接Email地址。 注意:如果mailto后面同时有多个参数的话, 第一个参数必须以“?”开头,后面的参数每一个都 以“&”分隔。 下面是一个完整的实例: 使用标签来插入图片。原创 2018-01-29 12:17:55 · 288 阅读 · 0 评论 -
(5)表单标签
表单标签表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。文本输入框、密码输入框。文本域,支持多行文本输入。 注意这两个属性可用css样式的width和height来代替:col用width、row用height来代替。使用单选框、复选框,让用户选择。使用下拉列表框,节省空间。使用下拉列表框进行多选。使原创 2018-01-29 23:12:43 · 334 阅读 · 0 评论 -
(6)认识CSS
认识CSSCSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。 声明原创 2018-01-29 23:14:15 · 289 阅读 · 0 评论 -
(7)CSS样式基本知识
CSS样式基本知识内联式css样式,直接写在现有的HTML标签中。嵌入式css样式,写在当前的文件中。外部式css样式,写在单独的一个文件中。三种方法的优先级:总结来说,就是–就近原则(离被设置元素越近优先级别越高)。原创 2018-01-29 23:15:01 · 287 阅读 · 0 评论 -
(8)CSS选择器
CSS选择器什么是选择器? 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。标签选择器。类选择器。ID选择器。类和ID选择器的区别。 相同点:可以应用于任何元素 不同点:ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用原创 2018-01-29 23:16:26 · 335 阅读 · 0 评论 -
(2)认识标签(第一部分)
认识标签(第一部分)h1-h6标签的默认样式: 表示强调, 表示更强烈的强调。并且在浏览器中 默认用斜体表示, 用粗体表示。 标签是没有语义的,它的作用就是为了设置单独的样式用的。标签,短文本引用,浏览器会对q标签自动添加双引号。标签,长文本引用。浏览器对 标签的解析是缩进样式。使用标签分行显示文本,作用相当于word文档中的回车。在html代码中输入空格、回车原创 2018-01-29 12:21:46 · 283 阅读 · 0 评论 -
政务大数据可视化大屏
1 前言这次的可视化大屏是前段时间的一个项目的demo,借此机会总结一下。2 简介本项目主要基于百度的Echarts框架实现数据的可视化,主要包括饼状图、柱状图、折线图、信息轮播等,背景为黑色,并且css的样式中做了三个宽度的样式做到对宽度的自适应。下面是大屏的展示图:3 项目地址项目已经开源在码云上,地址为:https://gitee.com/shenchuang1997/big_d...原创 2018-11-19 14:56:06 · 8000 阅读 · 5 评论 -
12.25学习记录
12.25学习记录It takes time to get good at coding.学习策略Read the errorSearch GoogleAsk for help覆盖css样式方法:上下优先级覆盖id属性覆盖class属性内联式覆盖指定样式 !important0 是 hex code(十六进制编码)中最小的一个,它代表颜色的完全缺失。F 是 h...原创 2018-12-27 13:58:21 · 246 阅读 · 0 评论 -
12.26学习记录
12.26学习记录$(“document”).ready(function(){}):HTML页面加载完毕后再执行js,另一种写法为$(function(){})选择:$(“button”)$(".btn")$("#target")改变css样式:$("#target").css(“color”, “red”);调整元素属性:$(&原创 2018-12-27 14:01:25 · 231 阅读 · 0 评论 -
(1)Html介绍
(1)Html介绍:标题标签:段落标签:图片html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/。标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:里嵌套,那么必须放在的前面。一个HTML文件是有自己固定的结构的。 称为根标签,所有的网页标签都在中。 标签用于定义文档的头部,它是所有头部元素的容器。在和标签之间的内容是网页的主要内容.原创 2018-01-28 16:57:46 · 329 阅读 · 0 评论