- 博客(29)
- 收藏
- 关注
RSS订阅原创 前端项目打包优化及上线
前端项目优化及上线根据自己项目实际，进行webpack配置，这里只是一个参考，关于上线很多功能作为了解。优化问题项目优化策略步骤及详解安装配置1.生成打包报告=>为了直观发现项目中的问题，共有两种方式2.第三方库启用CDN => 通过externals加载外部CDN资源3.Elemet-ui组件按需加载 =>通过cdn的形式优化Element-ui的打包4.路由懒加载 1.安装@babel/plugin-syntax-dynamic-import包 2.在bab
2022-02-19 16:31:27
2987
1
原创 day22（git的简单使用）
git的简单使用git使一款免费的，开源的分布式 版本控制系统git 使Linus Torvalds 为了linkus免费更新使用1、安装官网下载安装包，通过安装包安装下载安装，检测是否安装成功：git --version//返回版本号就成功或者点击鼠标右键出现git选项也可以检测安装成功2、三个区工作区：自己写的源文件暂存区：将要保存的文件，暂时存放、暂存正在开发的代码历史区(本地仓库)：生成一个版本，只能将暂存区的内容生成版本。上传时只能上传历史区的内容3、git单机操作⭐
2022-01-14 09:23:48
345
原创 day21（元素拖拽小案例）
元素拖拽边缘管理，轨迹及回放知识点：边缘管理：右边和下边需要减去盒子自身的宽高每次获取得坐标值需要存储到数组中点击回放按钮时，需要给数组第一个添加一个0，0的坐标对象，不然不能回到原位当数组为空时，清除定时器，结束回放合理使用各种坐标值和自身宽高的属性数组的删除返回的是删除的那个元素当放开鼠标时，需要清除按下和移动事件，优化代码 <script type="text/javascript"> window.onload = f
2022-01-05 19:57:29
530
原创 day20(php和mysql)
typora-copy-images-to: imgtypora-root-url: img服务器[了解]前言：通俗的讲，能够提供某种服务的机器（计算机）称为服务器服务器软件使计算机具备提供某种服务能力的应用软件，称为服务器软件，通过安装相应的服务软件，然后进行配置后就可以使计算具备了提供某种服务的能力。常见服务器分类: 文件服务器、数据库服务器、邮件服务器、Web服务器等；其中与我们息息相关的是 web服务器, 想让计算机成为 web 服务器, 就要安装服务器软件, 提供 we.
2021-12-29 20:45:01
193
原创 day19（正则表达式）
正则及表单验证回顾：复习字符的操作：search 查找 返回下标subsring 方法用于提取字符串中介于两个指定下标之间的字符。开始和结束 ，不包括结束位置charAt 获取某个字符串 输入下标split 分割字符串，获得数组replace 替换如：从杂乱的字符串中找数字var str = "asd68asd687as6da78sd123123zcacas";使用正则的方式var arr = str.match(/\d+/g);就可以完成功能一、正
2021-12-28 20:52:52
636
原创 day18（面向对象1）
面向对象一、面向对象[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EKJ2V4Uy-1640590941289)(C:\Users\Administrator\Desktop\lesson\二阶段\JavaScript课程\day16\img\1.jpg)]1、概念面向对象（Object Oriented，OO）是软件开发方法。面向对象的概念和应用已超越了程序设计和软件开发，扩展到如数据库系统，交互式界面，应用结构，应用平台，分布式系统，网络管理结构，CAD技术，人工
2021-12-27 15:43:17
72
原创 day17（面向对象）
面向对象一、面向对象1、概念面向对象（Object Oriented，OO）是软件开发方法。面向对象的概念和应用已超越了程序设计和软件开发，扩展到如数据库系统，交互式界面，应用结构，应用平台，分布式系统，网络管理结构，CAD技术，人工智能等领域。面向对象是一种对现实世界理解和抽象的方法，是计算机编程技术发展到一定阶段后到产物，是一种高级的编程思想。2、面向对象和面向过程区别面向过程强调的是功能行为关注的是解决问题需要哪些步骤回想下前面我们完成一个需求的步骤：首先搞清楚我们要
2021-12-22 15:38:54
108
原创 day16(ES5和ES6)
ES5和ES6一、ES5严格模式除了正常运行模式，ECMAscript 5 添加了第二种运行模式：“严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。1、严格模式的特点a、消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;b、消除代码运行的一些不安全之处，保证代码运行的安全；c、提高编译器效率，增加运行速度；d、为未来新版本的Javascript做好铺垫。"严格模式"体现了Javascript更合理、更安全、更
2021-12-20 20:55:39
715
原创 day15(DOM高阶 缓动动画、匀速动画的封装)
DOM高级操作一、运动的原理运动的原理：让某件物品沿着某种方向随着时间的变化改变位置//让页面中的obox元素的left值，每30毫秒，在自身left的基础上增加10像素setInterval(function(){ obox.style.left = obox.offsetLeft+10+"px";},30)为什么是30毫秒呢？因为电影播放每秒24帧，人眼就识别不出卡顿了，但是对于电脑来说，处理速度相对较快，需要每秒30帧以上才会显得流畅二、缓冲运动在变速运动中，曾经用物
2021-12-14 17:01:46
871
原创 day14（事件2）
事件一、浏览器的默认行为浏览器的默认行为，如何阻止? 就是浏览器自己触发的事件。比如：a链接的跳转，form提交时的跳转，鼠标右键菜单。oncontextmenu 鼠标右键事件当触发鼠标的右键事件时，会弹出右键菜单，这就是默认事件情况之一如何阻止默认事件？//阻止a的默认跳转行为var a = document.querySelector("a");a.onclick = function(event){ //兼容写法 var e = event ||
2021-12-13 10:51:43
68
原创 day13（事件1）
事件一、什么是事件1、简单来说事件就是用户在网页上的一系列的操作，比如，鼠标点击、双击、敲击键盘等等。。。事件发生有两个方面：事情来了，然后处理。例如： 电话铃声响起（事件发生）—需要接电话（处理） 学生举手请教问题（有事了）—需要解答（处理） 咱们班有个同学昨天被虐了（出事了）—去给他报仇（处理） 按钮被点击了，然后对应一个函数来处理2、事件触发：当用户点击按钮时，我们就说，触发了按钮的onclick事件。JavaScript 事件是由访问 Web 页面的用户引起的
2021-12-09 20:34:23
326
原创 day12（DOM-2及相关知识点）
DOM一、节点的操作父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称 为同胞（兄弟或姐妹）childNodes 获取当前元素节点的所有子节点firstChild 获取当前元素节点的第一个子节点lastChild 获取当前元素节点的最后一个子节点previousSibling 获取当前节点的前一个同级节点 -(678不支持)nextSibling 获取当前节点的后一个同级节点 -(678不支持)以上五中方
2021-12-08 16:39:39
84
原创 DOM扩展（DOM基本案例）
一，动态创建表格添加信息（带删除按钮）知识点：queryselectorAll 属性选择器，通过字符串标签的形式给innerHTML中添加标签，使用this来访问祖先元素<body> <div id="information"> <div> <input type="text"> <input type="text"> <input type
2021-12-07 11:22:52
117
原创 day11（DOM-1）
DOM一、DOM对象介绍1、DOM Document Object Model ，文档对象模型。我们可以把网页中的所有“东西”看成是“对象”。2、DOM是W3C制定的网页标准或规则，而这个标准，在浏览器中，以“对象”的形式得以实现。3、DOM的官方定义：DOM可以使脚本，动态的访问或操作，网页的内容、网页外观、网页结构。二、DOM的分类1、核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法。2、HTML DOM：针对HTML文档提供的专用的属性方法。3、XML DOM：针对
2021-12-07 11:17:15
84
原创 day10（BOM）
BOM#### 一、BOM介绍：1、BOM（ Browser Object Model）—> 浏览器对象模型。2、BOM 作用：主要提供了访问和操作浏览器各组件的方式。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qIipQhYb-1638790072489)(C:\Users\Mac\Desktop\lesson\二阶段\JavaScript课程\day9\img\bom.png)]window浏览器窗口对象是js中最大的对象。其他所有的对象，都是windo
2021-12-06 19:29:31
558
原创 day09（Math和Date）
Math和Date我们知道之前学习数据类型时，提过对象，说它是引用（复合）数据类型，什么数组，函数都是引用数据类型，它们的最显著特点就是一个变量名可以存多个值。当然对象也是可以存多个值，和数组函数类似的一种东西。人就是一个”对象”,人的特征（属性）有：身高、体重、姓名、性别、年龄。每个人可以有不同的本事(方法)：打游戏、玩打飞机、炒股、开车等都是方法。你们现在只要理解对象是由”属性”和”方法”构成的就行。其实我们学习对象也就是学习它的属性和方法。JS中对象分类：JS内置对象：数组对象、日期对象
2021-12-04 10:36:15
171
原创 day08(ES5和String)
ES5和String#### 一、ES5严格模式1)概念：除了正常运行模式，ECMAscript5添加了第二种运行模式：“严格模式”（strict mode）。顾名思义，这种模式是的Javascript在更严格的条件下运行。2)严格模式的作用：a.消除了JS语法的一些不合理、不严谨之处，减少一些怪异行为；b.消除代码运行的一些不安全之处，保证代码运行的安全；c.提高编译器效率，增加运行速度；d.为未来新版本的JS做好铺垫注意点：同样的代码，在“严格模式”中，可能会有不一样的运行结果，一些在
2021-12-03 11:28:58
107
原创 day07数组扩展
不同排序冒泡排序var arr = [45,62,8,3,64,97,100]var temp;for(var i = 0 ; i <arr.length-1;i++){ for(var j = 0; j < arr.length-1-i;j++){ if(arr[j] > arr[j+1]){ temp = arr[j]; arr[j] = arr[j+1]; arr[j+1]=tem
2021-12-02 09:28:58
187
原创 day07
数组#### 一、数组的概述数组的概念（标准定义）：数组是一个可以存储一组或一系列相关数据的容器。数组的概念（理解定义）: 一组数的集合，称为”数组”。比如说求全班同学年龄的总和的平均数？var age1 = 20；var age2 = 23;var age3 = 26;。。。var age60 = 21;var sum = age1 + age2 + age3 +….+ age60;var n=60;var arr = [10,20,30,40,50];这样很
2021-12-02 09:15:12
491
原创 day06
函数一、作用域1、作用域 什么是作用域，变量在函数内部作用的范围／区域。有函数的地方就有作用域2、全局作用域和局部作用域全局变量:可以在函数内部和函数外部使用的变量，就是"全局变量"。在函数外部定义的变量，就是"全局变量"。"全局变量"即可以在函数外使用，也可以在函数内部使用。"全局变量"在网页关闭时，自动消失(释放空间)。总结：在函数外部定义的变量，就是全局作用域局部变量：只能在函数内部使用的变量，称为"局部变量"。"局部变量"在函数内部定义，在函数内使用。
2021-12-01 09:00:26
128
原创 day05
函数的基础一、认识函数1、函数的概述：函数的概念：什么是函数？对于反复使用的功能代码，对其封装成一个独立的模块，这种功能代码块就是函数。或者说简单点儿就：是将一段公共的代码进行封装，给它起个名字叫"函数"。说通俗点儿函数就是一个功能，就是一个方便的工具。2、函数的好处:重复使用－－－－空调不可能是一次性的，可以重复使用忽略细节－－－－会用空调不一定会生产空调选择执行－－－－夏冬使用，春秋不用3、函数的特点：函数可以一次定义，多次使用。方便代码管理。便于控制程序的执行时间。函数
2021-11-29 20:12:20
69
原创 day04
一、循环1.循环的概念：循环就是重复做一件事循环结构是程序中一种很重要的结构，其特点是在给定条件成立时，反复执行某程序段，直到条件不成立为止2.循环三要素循环起点循环结束的条件步长（步进）while循环 while系统关键字，括号里面放的是循环条件语法：循环开始条件，变量初始化初始化只执行一次，执行多次会把自增的值给你重置var i = 1循环体 条件while（i<=5）{ 要执行的代码 i++步长，变量更新}while循环执行过程 第一次执
2021-11-27 09:27:35
131
原创 day02
day03一、流程控制三大结构1、顺序结构按照程序的书写顺序，一条一条语句执行，不允许跳过任何一条语句2、选择（条件）结构在处理实际问题时，只有顺序结构是不够的，经常会遇到一些条件的判断，流程根据条件是否成立有不同的流向。程序根据给定的条件是否成立而选择执行S2操作或S3操作。这种先根据条件做出判断，再决定执行哪一种操作的结构称为分支结构，也称为选择结构**a、if单分支选择结构：**if条件判断----只判断true，不判断false语法结构：if(条件判断，结果只要两个true或f
2021-11-26 15:10:25
67
原创 day02
day02一、关系运算符JS中的运算符：要进行各种各样的运算，就要使用不同的运算符号。运算时只能进行同类型运算，如果类型不同，将进行类型转换。1、算术运算符：+、—、*、/、%、++、——;2、赋值运算符：=、+=、-=、*=、/=3、比较运算符：>、<、>=、<=、==、!=、===二、关系运算符二、逻辑运算符学习逻辑运算符之前，先声明下逻辑运算符的运算结果有两个：true或false。1、"&&"逻辑与(也可以叫并且)。如果左右两个操作符
2021-11-25 20:38:34
330
原创 day01
day01一、计算机特点是什么 ?1、计算机是一种电器, 所以计算机只能识别两种状态, 一种是通电一种是断电2、正是因为如此, 最初ENIAC的程序是由很多开关和连接电线来完成的。但是这样导致改动一次程序要花很长时间(需要人工重新设置很多开关的状态和连接线)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Aw8G13oH-1637811347052)(C:\Users\Administrator\Desktop\lesson\二阶段\JavaScript课程\day1\
2021-11-25 11:43:14
436
原创 src和href区别
简述一下 src 与 href 的区别。src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放
2021-10-11 12:52:28
112
原创 伪类元素与伪类
伪类和伪元素的区别1.概念上：伪类是一种临时状态，只有状态被触发的时候才会生效。伪元素是一个假的元素，虚拟的DOM节点，例如：：：hover。2.表达上：伪类使用单冒号，伪元素使用双冒号。:after ::after都是伪元素，只是不同版本的不同写法其他伪元素：e::selection{} 给e元素中选中的文字设置样式...
2021-10-08 18:43:08
69
原创 2021-10-07
前端每日面试题描述一下渐进增强和优雅降级之间的不同吗?渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意
2021-10-07 19:33:41
62
原创 HTML基础结构代码
HTML基础结构代码<!DOCTYPE html> <html lang="en"> <!-- 当前页面是否进行翻译，当把en改为cn的时候解除翻译 --><head><!-- 头部描述区域，引入外部文件css、javastript、jq、vue、react --> <meta charset="UTF-8"> <!-- 国际编码，对页面中文进行翻译 --> <meta http-equiv="
2021-10-07 17:25:56
352
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人