暑假前端学习总结与心得

75 阅读 0 评论 50 点赞

我是靠谱客的博主自由冷风，最近开发中收集的这篇文章主要介绍暑假前端学习总结与心得，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

通过一个暑假对于前端的学习，我对于前端这一方向有了初步的认识，对于其中的部分专业知识有了浅显的认知。
整个暑假，我通过网络课，完成了html+css、JavaScript、jquerey和部分html5的学习；借助JavaScript高级程序设计一书和w3c手册对于JavaScript这一语言有了较为深刻的理解。但从不断的学习中我愈发觉得自己实在是渺小。在网络课学习中，老师介绍了许多种框架，都是我未曾听闻过的。
学习了html+css（基础的网页设计和排版）
1. 标签：html语言中，html标签随处可见，同时也是最基础的单位。标签的类型又分为成对出现的（如

）和自结束型的，如（）
2. xHTML语法规范：
- html中不区分大小写
- html中的注释不能嵌套
- html标签必须结构完整
- html的标签可以嵌套，但不能交叉嵌套
- html标签中的二属性必须有值，且值必须加引号
3. 内联框架（）：使用内联框架可以引入一个外部的页面。具有的属性有src（用于指向一个外部链接），但内容并不会被搜索引擎搜索到。
4. 外部样式表：将样式表写到外部的css文件中，并在html的head标签中引用。
5. 元素选择：子元素、兄弟元素、后代元素。html中的标签以树为模型，互相之间具有一定关系，在用css调控样式时，需要通过元素选择器精准的选择元素，进行调控。
6. 盒子模型：盒中心为内容（content），由内向外扩散依次为内边距（padding）、边框（border）、外边距（margin）。内边距设置的相当于是内容与边框之间的距离；而外边距设置的则是不同的盒模型边框与边框之间的距离。
7. display：规定了元素应该生成的框的类型属性： - inline：将一个元素作为内联元素先使
-block：将一个元素作为块元素显示
- inline-block：将一个元素转换为行内块元素，既可以设计宽高，又可以不用独占一行
8. overflow：规定了元素中溢出元素框时发生的事情。属性
-hidden：完全隐藏溢出的部分
-visible：默认值，正常显示，超出于文件框外
-scroll：裁剪并滚动条显示

文档流：文档流处在的网页的最底层，代表的是一个页面中的位置，我们的元素就在文档流中
1. 浮动：使用float来使元素浮动，从而脱离文档流。属性：left和right，分别使文档流中的元素脱离文档流，并向左和向右浮动。
2. 相对定位和绝对定位：position中的postive和absolute属性。相对定位中元素可以使用top、right、bottom、left，相对于它自己，来进行移动，且元素不会脱离文档流。而绝对定位中则是相对于其父元素进行定位，而且会脱离文档流，后面的元素会补齐脱离文档流元素的位置，因此会出现重叠等现象。
3. 表单元素：表单元素指的是不同类型的 input 元素，比如输入的文本框、用于提交的确定按钮、多选、全选、全不选。
学习了JavaScript
基础的六种数据类型
- undefined类型：一般而言，在使用var声明变量但未对其加以初始化时，这个变量值的值就是undefined；该类型只有一个值，即特殊的undefined
- null类型：该类型也只有一个值，即null；逻辑角度上来讲，null表示的其实是一个空指针
  - booleam类型：该类型仅有两个字面量：true和false。booleam类型中的字面量区分大小写。
  - number类型：number类型中使用IEEE745格式来表示整数和浮点数值。浮点数值指的是该数值中必须包含一个小数点，且小数点后必须至少有一位数字。 —*NaN：非数值（Not a Number）是一个特殊的数值，用于表示一个本来要返回数值的操作数未返回数值的情况，以此来避免报错的情况出现。NaN具有两个特点：第一，任何NaN的操作都只会返回NaN。第二，NaN与任何数值都不相等，包括他自身。
  - String类型：字符串。ECMAScript中的字符串一旦创建，值就无法在改变。如果需要改变某个变量保存的字符串，首先要销毁原来的字符串，再填充新的值。toString()方法可以将一个值转换为一个字符串，但该方法会改边输出的值。转型函数String()能将任何类型的值转为字符串。
  - Object类型：对象类型其实就是一组数据和功能的集合，该剋行可以通过执行new操作符后跟要创建的对象类型的名称来创建。在ECMAScrpit中，Object类型是所有实例的基础，该类型所具有的任何属性和方法也同样存在于更加具体的对象中。最基本的几个属性有：
  - constructor：指向当前创建对象的函数。
  - hasOwnProperty：用于检查原型函数是否存在
  - isPrototypeOf：用于检测传入的对象是否是当前对象的原型。
2.对象：对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性或者方法。对象又有三种分类：
-内建变量：由ES标准中定义的对象，在任何的ES实例中都可以使用
-宿主对象：由JS运行环境提供的对象，主要指浏览器提供的对象
-自定义对象：由开发人员自己创建的对象
向对象中插入属性：语法：对象.属性名 = 属性值；
读取对象中的属性：对象.属性名；
使用工厂方法创建对象：可以大批量的创建对象

		function createPeople(name, age,){
			var obj = new Object();
			obj.name = name;
			obj.age = age;
			obj.sayName = function(){
				console.log(this.name);
			}
			return obj;
		}
		
		var obj1 = createPerson("zjt",20);

3.对象字面量：使用对象字面量创建对象时可以直接指定创建对象中的属性；语法：{属性名：属性值，属性名：属性值}
4.引用类型：
-Object类型
-Array（数组）类型：数组中的每一项都可以用于保存任意类型的数据
-Date（日期）类型：用于保存日期的数据类型
-RegExp（正则表达式）类型
-Function类型：函数表达式
5.函数：函数的本质实际上是对象，函数名只是一个指向函数对象的指针。定义函数有三种方式，分别为函数表达式、函数声明以及调用Function构造函数。对于前二种方式在浏览器中定义函数，有以下区别：
-对于函数声明，浏览器中的解析器会率先读取，并在执行任意代码前确保函数可以被访问。
-对于函数表达式必须等到解析器执行到当前的代码行，才会被解释和执行，不能被提前引用。
例如：
alert(sum(10,10)); function sum(num1, num2){ return num1 + num2; }
由于这段代码中函数定义方式是函数声明，因此完全可以正常运行。在执行第一行代码前，函数已经被创建且允许引用
但是

```
		alert(sum(10,10));
	    var sum= function (num1, num2){
		  return num1 + num2;
		 }

```

这段代码中在运行期间会产生错误，因为定义函数的方法为函数表达式，不会被提前创建。

函数本身也可以作为一个数值来使用，不仅可以像传递参数一样将一个函数传递给另一个函数，也可以将一个函数作为另一个函数的结果返回。

函数内部具有两个特殊的属性，分别为arguments和this。
-arguments：是一个类数组对象，包含着传入函数中的所有参数。其中有一个属性callee，指向了拥有这个对象的函数，在递归中使用arguments.callee代替函数对于自身的引用，可以避免后河现象的出现。
-this：引用的是函数执行的环境对象——谁引用，this指向谁。以函数的形式调用时，this永远都是window。以方法的形式1调用时，this就是调用的那个对象00

函数的属性与方法：每个函数中都包含了两个基础的属性：length和prototype。length表示了函数接收参数的个数。

prototype属性：prototype保存了对象中的所有实例方法。原型的作用最主要在于共享属性和方法，节省空间。在创建一个新函数的同时，就会为该函数创建一个prototype属性，这个属性指向的是函数的原型对象。而他对应的原型对象中默认获得了constructor属性，该属性指向的是指向它的函数。新创建的函数对象中，自动存有其原型函数中所保存的属性或者方法，而当新创建的函数中出现了同名属性或者方法时，则会覆盖原型函数中提供的属性和方法。原型具有动态性，党重写某个原型函数中的原型对象时，会切断现有原型和之前已存在的对象实例之间的联系。在创建一个新函数的时候，可以组合使用构造函数模式共和原型函数；构造函数模式主要提供定义实例属性，而原型模式主要提供定义原型方法和用于共享的属性。

构造函数：构造函数就是一个普通的函数，创建方式与普通函数没有区别，但命名上习惯首字母大写。构造函数调用时，需要时用new关键字来调用。执行流程可分为 1.创建一个新的对象、2.将新的对象设置为构造函数中的this、3.执行构造函数中的代码、4.将对象作为返回值返回。
function Person(){} vear person = new Person();

6.数组：数组也是对象。创建数组有两种方法，第一种是使用Array构造函数来创建数组，第二种则是使用数组字面量的方式创建。
数组中的元素可以是不同类型的变量，因为数组中的元素也是对象。
数组中的属性和常用方法：
-length：length作为数组的一个属性，并不是只读的，它是可以更改的。通过更改lenght属性可以直接改变数组的长度大小。
-first：访问第一个数组元素
-last：访问最后一个数组元素
-利用for()循环遍历数组
for(i=0;i<array.leagth;i++){}
-push():像数组结尾处添加新的元素
-join():将数组中所有元素结合为一个字符串
-pop()：从数组中删除最后一个元素
-delete():用于删除数组中的指定元素
-splice()：既可以删除，也可以用于添加新的元素

	```
	fruits.splice(2,0,"","");
	```

第一个参数定义了应该添加新元素的位置
第二个参数定义删除元素的数量
剩余参数为需要添加的新元素

-sort()：以字母顺序对数组进行排序
-reverse()：反转数组中原有的元素排序

7.正则表达式：正则表达式事构成搜索模式的字符序列，可以用于执行所有类型的文本搜索和文本替换。
-search()方法：使用表达式来搜索匹配并返回第一个匹配到字符串的位置。
-replace()方法：传入想要替换的字符串和替换的内容并进行对应的替换操作。
正则表达式中的三个修饰符：
-i：不区分大小写
-g：在全局范围下进行匹配操作
-m：多行模式
字面量表达式：/at/g /匹配全局下所有”at“实例/
/[bc]at/i /匹配第一个”bat“或者”cat“且不区分大小写/
/.at/gi /匹配全局下以”at“结尾且长度为3同时不区分大小写的字符串/

通配符：”/“ 用于表达特殊的字符，如标点，换行操作符

8.事件
事件冒泡：事件开始时由最具体的元素接受，并逐级向上传播到较为不具体的节点。
事件捕获：事件流的另外一种，其思想为不太具体的节点应该更早的收到事件，而最具体的节点应该最后收到，与事件冒泡的顺序恰恰相反。
DOM事件流包括了三个阶段：1。事件捕获阶段（由外向内）、2.正处于目标阶段（接收到事件）、3.事件冒泡阶段（由内向外）；

DOM中的事件对象：在触发事件时，浏览器会将一个event对象传入事件处理程序中
事件的类型：
-UI事件：指的是不一定与用户操作有关的事件
-load事件：当页面完全加载时，会触发window上的load事件
-unload事件：与load事件相反，文档完全卸载后会触发
-resize事件
-scroll事件
-焦点事件：在页面元素获得或市区焦点时触发
-blur：失去焦点时触发
-focus：在获得焦点时触发
-鼠标滚轮事件
-click事件：单击鼠标按钮时触发
-dclick：双击鼠标
-mousedown：按下任意鼠标按钮
-mouseenter：鼠标光标从元素外部首次移入
-mouseleave：在位于元素上的光标移出元素范围触发
-mouseup：在释放鼠标按钮时触发
-键盘与文本事件

9.事件的绑定
使用对象.事件 = 函数的形式指定一个绑定响应函数；这一方法只能为同一个元素绑定一个响应函数，若绑定多个，后来的函数会覆盖掉前者
使用addEventListener()也可以为元素绑定一个响应函数；
-该方法中的参数：1.事件的字符串；2.回调函数；3.是否处于捕获阶段触发事件，需要一个布尔值；
-这样绑定的优点在于事件被触发时，响应函数会按照绑定顺序执行，而不会覆盖
bind方法的主要作用是将函数绑定至某个对象
- 需要传入的参数：1.obj 要绑定事件的对象 2.eventStr 事件的字符串 3.callback 回调函数

10.JavaScript中产生随机数的方法
Math.random()方法：返回一个结果为0-1间的随机数
若需要改变区间，则分别设置区间最小min与最大变量max，随机数返回时进行result*max+min的操作，即可取得目的区间范围内想要的数值。
11.立即执行函数
函数定义完，立即被调用。
(function(){ alert("1"); })();//立即被调用

12.包装类
在JS中设置了三个包装类，通过包装可以将基本数据类型转换为对象
-String():将基本数据类型转换为String对象 //var str = new String(“hello”);
-Number()：将基本数据类型转换为Number对象
-Booleam()：将基本数据类型转换为Booleam对象
方法和属性能添加给对象，但不能添加基本的数据类型；浏览器会临时使用包装类将其转换为对象

13.操作内联样式
通过JS修改元素的样式：
语法：元素.style.样式名 = 样式值 //box1.style.wdith = “300px”；（将box1的宽度改为300px
需要注意的时我们通过style属性所设置的样式都是内联样式，相较于其他样式具有较高的优先级，这一点不利于后期的编程和改动。
*但如果在样式中写了！important，则此样式将拥有最高的优先级
getStyle()方法可用于获得目的对象的指定样式，须向其中传入obj和name两个属性；

14.定时器：setInterval()
-定时调用
-可以将一个函数每隔一段时间执行一次
-需要向其中传入回调函数和调用时间间隔（单位为毫秒）两个参数
-返回一个Number类型的值，用于作为定时器的唯一标识

clearInterval():可以用来关闭一个计时器

15.闭包
-闭包的概念：在一个函数的函数体内部使用内部函数，且这些内部函数可以访问它们所在的外部函数中的所有局部变量、参数和其他内部函数。
-闭包的作用：缓存数据，延长作用域链、可以读取函数内部的变量，并让这些变量始终保持在内存中
-闭包的模式：函数模式的闭包、对象模式的闭包

16.沙箱
沙箱像是一个虚拟的系统程序，他创造了一个独立的工作环境，在其内部的程序不会对外部的硬盘产生影响。

```
//大环境中
(function(){
var num = 10;
console.log(num);
})();

//沙箱–小环境中
(function(){
var num = 10;
console.log(num);
}());
```
17.递归函数中调用函数自己，此时就是递归，递归一i定要有结束的条件

	```
function getSum(x){
	if(x==1){
	return 1;
	}
	return x+getSum(x-1);
	}
	console.log(getSum(100));		//求1到100的和
	```

学习了JQuery
JQuery其实就是一个封装了许多方法用于开发的js文件。JQuery并没有过多语法，我们学习的是其中的方法。
在js中我们常常遇到以下问题：
-代码繁琐，多对象需要遍历、嵌套
-找对象的方法较为麻烦
-兼容性问题需要考虑
-难以实现动画效果
-js中注册时间会被覆盖
而jq中有许多方法可以简单的密弥补js的缺陷
1.JQuery对象：jquery对象就是使用了jquery方法获取页面中的元素后返回的对象。dom对象（js对象）是使用js方法获取的元。素返回的对象，jq对象也是dom对象的包装集（集合、伪数组），它是基于dom对象的基础上衍生出来的。dom对象转换为jq对象只需要“花钱”。
```
var $obj = $(domObj); //dom对象转为jq对象

var $li= $("li");		//jq对象转为dom对象
$li[0];
$li.get(0);
```

2.jq的入口函数
使用jq的三个步骤：1.引入iq文件；2.入口函数；3.功能实现

```
$(document).ready(function(){
});

$(function(){});
```

3.jq中的选择器
- $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id"); //id选择器 \dots$ (".class"); //class选择器
- $(" d i v "); / / 获取 d i v （某一类标签）的所有元素 -$ (“div,p,li”) //并集选择器，用逗号分隔
- $(" d i v . r e d C l a s s ") : / / 交集选择器，获取 c l a s s 为 r e d C l a s s 的 d i v 元素 -$ (“ul>li”); //使用>号，获取子层级的元素，子代选择器
-$(“ul li”) //使用空格，代表后代选择器，获取了ul下所有的li元素，包括孙子，后代选择器

4.jq操作样式
css操作：用于设置和修改样式，操作的是style属性
$("#one").css({
“background”:“gray”,
“width”:“400px”
}); //设置多个样式

		$("div").css("backgroung-color");	//获取div的样式

	class操作：用于添加、移出、判断、切换样式

5.jq中的各种方法：
val方法：用于设置和获取表单元素的值
$("#name").val("张三“); //设置值
html方法和text方法：html方法相当于innerHTML，text相当于innerText
$("div").html("<span>这是一段span内容</span>"); //设置内容，可以识别html标签，但是text方法不能时识别字符串中的html标签
width和height方法：设置和获取宽与高
scrollTop与scrollLeft：设置和获取垂直与水平滚动条的位置
offset方法与postion方法：offset用于获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置

6.jq插件：jq中不可能包含所有的功能，我们可以通过插件扩展jq的额外功能
使用插件的步骤：1.引入一jq文件；2.引入插件；3.使用
制作一个插件：jq插件其实是为jq对象新增一个方法，使jq对象拥有新的功能
$fn.pluginName = function(){}; //通过为jq对象$ .fn添加方法就可以扩展

学习了html5中的音视频部分
1.音视频标签
：Html提供的播放视频的标签
属性：src：资源地址
controls：该属性定义是显示或是隐藏用户控制界面
:Html5提供的播放音频的标签
属性：同上
:媒介元素的定义媒介资源，允许规定可替换的视频音频文件供浏览器根据它的类型进行选择
play():媒体播放
pause():媒体暂停
load():重新加载媒体

2.attribute和property:html标签的预定义和自定义属性我们统称为attribute；而js原生对象的直接属性，我们统称为property。
attribute：是html标签上的一个属性，可以自定义
property：是js获取dom对象的属性值，一个js对象中可以有很多property，集合名为properties，properties中有很多property以及attributes，而attributes中包含了许多attribute；通过对象.属性值的方式进行修改，通常来讲，二者的更改相互影响。

3.视频播放器的布局：播放进度条上的各个部分，分割成不同的盒模型，通过css设计完成一个完整的播放器
4.进度条拖拽：拖拽进度条的div进度并使视频实际进度与之同步

整个暑假下来，收获到了一些前端知识，但并不多。一开始需要克服的困难并不是自己学不懂的问题，而是克服自己坐不住，静不下心德问题。慢慢的自己每天能持续的学习状态越来越久，这次才是我整个暑假所收获到的最大的成就。相比暑假前看书浮躁，现在看书反而更能耐得住性子，更会挑着重点去看书。
希望自己能越走越好吧。