HAI6545的博客

Git在实际工作中，我们会遇到很多无法预料的问题：问题一：频繁改需求。例：项目开发好以后，形成版本v1.0需求改变：在v1.0的基础上添加功能A，形成版本v1.1 - 在上个版本的基础上添加功能A在v1.0的基础上添加功能B,形成版本v1.2 - 在上个版本的基础上删除功能A，添加功能B在v1.1的基础上添加功能C，形成版本v1.3 - 在上个版本的基础上删除功能B，添加功能A，再添加功能C在v1.2的基础上添加功能D，形成版本v1.4 - 上个版本的基础上删除功能A，删除功能C.

gulp引入：项目做好以后，在上线之前还有一些工作需要去做： 压缩css 压缩js 压缩图片 编译sass 合并文件 。。。 等等，在前端工作流出现之前，这些工作都由人力完成，而这些工作往往比写业务本身更加费时，效率非常之低且还容易出错，于是自动化的处理工具也就必然出现了。前端的构建工具常见的有Grunt、Gulp、Webpack三种，Grunt比较老旧，功能少，更新少，插件少。概念：gulp是一个自动化构建工具，主要用来设.

简介css编写时权重难以控制，嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点。sass是世界上最好的css扩展语言。在正常的编写css的基础上，增加了很多变量，函数，循环，判断等类似编程语言的代码模式。极大的提高了编写样式的效率。还有许多的内置函数（如颜色加深，颜色淡化）用于高效的属性设置。使得css也可以用类似脚本的方式进行编写。sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用。初体验html结构：<div id="..

设计模式概念设计模式是为了解决某种问题，而设计的一套最佳解决方案。常见的设计模式： 单例模式 组合模式 观察者模式 命令模式 代理模式 工厂模式 策略模式 。。。 单例模式让一个类创建出来的所有对象，里面的所有属性和方法都一模一样。比如封装一个类，将一些常用的操作函数作为方法放进去，以后每次都使用同一个对象来调用这些方法正常情况，一个类创建出来的每个对象都是不一样的。class Carousel{.

闭包和继承闭包如果让我们去开发一个银行账户的系统，账户的钱应该怎么用程序实现呢？我们首先想到，应该存在变量中。然后我们可以访问到这个变量的值（查询余额）、进行加法运行（存钱）、减法运算（取钱）。。。是很方便，但问题也随之而来：放在全局中的变量，是任何人都能访问到的，那就是任何人都能进行修改，这样对于账户来说是很不安全的。所以我们将这个变量放在局部，局部变量在全局中访问不到，是很安全，要想访问这个局部变量，我们只能将这个局部变量作为函数的返回值，如下：function account()

JQ高级工作中，项目中常用的发送ajax请求的方式： 原生js的ajax 使用jquery的ajax fetch - H5内置的请求函数 axios - 专业发送ajax请求的第三方模块 jquery发送ajax请求get请求语法：$.get('请求地址', 参数, 成功的回调函数, 'json');参数1：请求地址参数2：请求携带的数据，可以是拼接的字符串形式，也可以是对象形式参数3：成功的回调函数，参数为响应回来的的数据参数4：希.

jquery对象==伪数组 元素节点操作创建元素：$("标签和内容") // 创建一个标签并给里面放内容例：var box = $("<div class='box'>div盒子</div>");console.log(box);创建的结果：创建的元素 添加元素给父元素追加子元素：父元素.append(子元素)例：<div> <span>span标签</span>...

<span style="background-color:#f7f7f7"><span style="color:#777777">typora-copy-images-to: media</span></span>jQuery介绍jQuery是js的库。库就是说将很多js的方法封装在了一个文件中。jQuery是前端编程中使用最多的库。曾经风靡前端。原因有三： 强大的选择器机制 优质的隐式迭代(遍历) 无所不能..

node简介node.js是浏览器的js引擎。浏览器中有一个js引擎用来解析js代码，只能解析js代码中的ECMAScript，dom和bom的解析依赖的是浏览器本身。将这个js引擎单独拿出来，就是node了。node.js和js的关系node.js和js的关系 要让这个引擎运行起来，有人将他做成了一个软件，安装在电脑上，js代码就不用依赖浏览器运行了，在电脑的命令行也能运行js代码。为什么要这么做？因为这样的话，js就能写后台了。官网：Node.js中文.

回调函数概念：将一个函数当做参数传入另一个函数的时候，这个函数就叫回调函数。我们之前用过很多次回调函数，比如：数组方法map、filter等；运动函数中处理运动结束传入的函数；分页插件中使用插件的时候执行的函数。。。包括封装的ajax中，请求成功以后执行的success函数。都是回调函数。为什么要使用回调函数？当我们执行一些异步操作的时候，需要在操作完成以后，做另外的一些事情，但是我们又没有办法预知这个异步操作什么时候结束，此时只能使用回调函数的形式来解决这个问题。回调地狱我们在封装

ajax同步异步ajax是可同步可异步的一种技术。在ajax对象调用open方法的时候，其实有第3个参数，值是布尔值，代表是否异步，默认为true。当将第3个参数设置为false的时候，这次请求就变成了同步请求：var xhr = new XMLHttpRequest;// 省略了第三个参数：布尔值 - 代表当前请求是否异步 - 默认是true// xhr.open('get','http://localhost:8888/test/first', true);​xhr.onrea

http为什么要学习http？因为前端和后台进行交互的时候，使用的就是这个协议。HTTP协议，叫超文本传输协议(Hypertext transfer protocol)。是一个规则，规定了浏览器和万维网服务器之间通信的规则。HTTP的请求只能是客户端向服务器发起。第一步：建立连接客户端和服务器进行通信的第一步，就是要有一个连接的状态，也就是要建立一个连接。在建立连接的时候，客户端和服务端分别需要知道一些信息：客户端：知道客户端能发消息知道客户端能收消息知道服务器能收消息

ajax服务器介绍ajax是一个让客户端和服务器进行交互的技术。何谓客户端？直白点说，可以理解为浏览器，我们平常所写的HTML文件，不管使用什么地址打开，一定是使用浏览器的打开的，所以，我们自己写的HTML代码，可以理解为就是客户端代码。何谓服务器？服务器分为两个概念： 远程电脑 我们打开浏览器的百度网址，会在浏览器中展示百度的网页。这个网页没有在我们自己的电脑上，而是从服务器传送过来的，这里的服务器，其实是一台远程电脑。 提供web访问的软件 如果将同桌的电脑理解为

DOM ---- 一套操作html文档的标准 - 操作标签的方法1.获取标签元素/*document.getElementById(id名)document.getElementsByTagName(标签名)document.getElementsByClassName(类名)document.getElementsByName(name属性的值)document.querySelector(css选择器)document.querySelectorAll(css选择器)*/2.属性

放大镜效果分析组成结构分析 一个容器大盒子 - div.box 一个放中等图片的盒子 - div.middleBox 一张中等图片 一个遮罩 - div.shade 一个放小图片的盒子 - div.smallBox 两张小图 一个放大图的盒子 - div.bigBox 布局分析 大盒子box设置相对定位 中等盒子middleBox设置相对定位 遮罩shade设置绝对定位在中等盒子中，隐藏

1.面向对象案例一分页结构分析：<div> <div class="first">首页</div> <div class="prev">上一页</div> <div class="list"> <p>1</p> <p>2</p> <p>3</p> <p>...

面向对象概念什么是面向对象？OOP代表面向对象的英文单词的首拼，单词全拼是Object Oriented Programming。面向对象不是一种语法，是一种编程的思想。面向的意思就是“脸朝向”，表示关注的意思。那面向对象就是脸朝着对象，关注着对象的意思。之前的编程模式：关注每一个元素，然后是他们的顺序，关系。。。这种编程的模式称之为面向过程。之后的编程模式：找一个对象来做这件事情，等待结果即可。这就是面向对象。js中的面向对象编程，就是创建对象，给对象添加属性和方法

ES6es6是ECMAScript的第6个版本，在2015年发布。也有的人将ECMAScript5之后版本，统称为es6。比起之前的语法，es6有很多新语法，让开发者在操作数据和函数的时候，功能既多，操作又简便。数组新增的方法 some - 判断数组中是否至少有一个元素是满足指定条件的，返回布尔值 语法： 布尔值 = 数组.some(function(v,i,a){ return 条件;})// 上面的i和a是可选参数 例：判断所有成绩中是否有不及格的成绩 va

概念： 一个用于规范字符串的表达式。 简单来说，就是写一个规则，然后通过这个规则可以从一个杂乱的字符串中找出符合规则的部分，也就可以用于判断 一个字符串是否符合某个规则。还可以将一个字符串中符合规则的部分进行替换。 初体验var reg = /aaa/; // 写了一个规则，这个规则的意思是说3个a字符连在一起 var str = 'sdafaaaaa123wer'; // 一个杂乱的字符串 var arr = str.m...

事件对象 在事件对象中记录了很多事件的信息。。。 事件类型e.type // 事件的类型 例：<button id="btn">按钮</button><script>btn.onclick=function(e){var e = e || window.event;console.log(e.type); // MouseClick}btn.onmouseover=function(e){var e = e || windo

事件复习 事件三要素：事件源 + 事件名称 + 事件处理程序 事件源 : 谁触发这个事件 (按钮 btn) 事件名称 : 触发了什么事件 (点击click事件) 事件处理程序 : 事件触发后要执行的代码(函数形式)----可以是有名字的函数，要不要加小括号？不加 事件类型 在事件对象中有个一个属性 type 可以获取到当前事件的类型。 window.onload = function(e){var ev = e || window.event;console.log(e

DOM DOM 就是我们 html 结构中一个一个的节点构成的。不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点。 DOM节点分三种：元素节点、文本节点、属性节点。元素节点就是我们获取到的标签元素；标签里面的文本就是文本节点、标签上的属性就是属性节点。 元素节点 就是我们各种获取方法获取到的标签元素 document.getElementById(); document.querySeletor(); docum...

BOM BOM是三个单词的首拼--Browser Object Model，即浏览器对象模型。 既然是对象模型，那么所有内容，都是用对象来描述的。 BOM中最大的对象叫window，是浏览器窗口对象。他包含了很多浏览器的操作。浏览器的信息 浏览器的名称、版本等信息。关于浏览器的信息，window交给了他的子对象navigator去记录console.log(window.navigator.appCodeName); // 返回浏览器的代码名 ...

Math内置对象的常见API圆周率 Math.PI // 3.1415926535生成随机数 Math.random()生成的是0~1之间的随机小数，通常在实际项目中需要获取到一个范围内的随机整数，利用这个随机小数封装一 个获取范围内的随机整数的函数： function getRandom(a,b){ var max = a; var min = b; if(a<b){ max = b; min = a; }return pars...

字符串 字符串的重新认识 字符串定义： var str = ''; var str = ""; var str = new String() 这三种定义方式没有区别。 字符串中字符的个数： 字符串.length 字符串中获取某个字符的时候，可以根据下标来获取： arr.filter(function(值, 下标, 当前数组){return 筛选条件});var str = "abcdef";var s ...

ES5的语法js在产生的时候，年代比较早，当时的web需求比较少，所以刚开始的js功能比较少，语法没有特别严谨。随着时代的发展和web应用的普及，js需要更多的功能，以及更严谨的语法，所以，js会有版本的升级。第一版的js是ECMA一开始统一了标准以后的版本。我们现在的所使用的语法，大多是ECMAScript版本3的语法，简称es3。到目前为止，已经有了es7,8,9,甚至es10 的版本了。近几年，基本每年都会有新的版本更新。每个版本的更新，都需要浏览器支持才能运行，但浏览器不会在js更新之后，立

# 数组对象中可以通过键值对存储多个数据，且数据的类型是没有限制的，所以通常会存储一个商品的信息或一个人的信息但对象在存储同类型数据的时候比较困难，例如，存储一个班级所以人的姓名：var obj = { name1:"张三", name2:"李四", name3:"王五", ...}这种存储方式我们没有办法通过一个人的姓名获取到这个人的编号，也没有办法通过一个编号获取到某个人的姓名。js提供了另外一种对象类型的数据，可以通过编号来存储数据：数组。也是对...

对象01. 对象的概念变量是一个容器，可以存储数据。给多个容器中放入商品，就可以得到很多商品，有很多的商品就可以开超市了。 可是超市中的商品都是放在货架上归类存放的，也就需要一个更大的容器来存放很多商品。在js中也有这样的容器，用来存放很多的小容器 -- 对象。02. 对象的表现形式var arr = []; // 数组var obj = {};var none = null;这三种不同的表现形式指的都是对象。重点学习第二种，使用大括号定义的对象。03. 对象的创建var

onload定义和用法onload 事件在对象被加载后发生。onload 最常用于 <body> 元素中，用于在网页完全加载所有内容（包括图像、脚本文件、CSS 文件等）后执行脚本。onload 事件可用于检查访问者的浏览器类型和浏览器版本，并根据这些信息加载网页的正确版本。onload 事件也可用于处理 cookie语法在 HTML 中：<element onload="myScript"...

函数的定义：函数就是JavaScript的基础模块单元，包含一组语句，用于代码的复用，信息隐藏 和 组合调用。简单点说：函数就是把任意的一段代码放在一个盒子里面，在我想要执行这段代码的时候，直接执行这个盒子里面的代码就行来函数的创建和结构1.函数的创建在JavaScript语言中，可以通过一下三种方式创建：- 函数声明//函数声明式创建函数function f1 ( ) { //需要编写的代码}// function...

JavaScript 流程控制语句JavaScript 语言中 流程控制语句，包括：顺序，选择，和循环三种 控制结构 以及 具体的控制语句，如 if else while 等基本用法默认情况下，JavaScript 解释器依照语句的编写顺序从头到尾，从上到下的依次执行，这种默认执行代码的结构就是顺序结构。选择控制结构JavaScript 中选择控制语句 主要有 单分支（`if`）、双分支（`if...else`）、多分支（`if...else if...`）和多值选择器（`switch`）.

1.JavaScript的简介（1）概述JavaScript是一门动态的、弱类型的解释型高级编程语言。它基于原型，支持面向对象 和函数式编程等多种编程范式。通常称为js（2）作者Brendan Eich（布兰登·艾奇）（3）背景： JavaScript诞生于 1995年，其诞生的初衷是为了减轻服务器的压力，而在客户端提供一种表单验证的功能。最初的名字为：Mocha（摩擦），1995年9月在Netscape navigator 2.0的beta版本中改名为 livescript，同年12月份，Ne

兼容-浏览器内核市面的五大浏览器: 谷歌、火狐、苹果、欧朋、IE1.欧朋浏览器是公认的渲染静态页面最快的浏览器 没有之一- 之前的内核是 Presto (前内核已经废弃 )- -o-- 内核是blink 是和谷歌共同开发的- -blink-2.谷歌浏览器：之前一直使用苹果的webkit内核，但是现在它与苹果内核分道扬镳- 这个内核也在被欧鹏（opera浏览器）共同采用和开发；- -webkit-3.火狐浏览器：...

第三种布局方式第一种方式:媒体查询+rem第二种方式:Vw + rem(推荐第三种方式:flexible.js -阿里淘宝插件-针对于750px的设计图设置-阿里系的软件都使用这种适配方式(自动设置dpr)使用方法-需要把视口标签删除-引入相应的js文件script src-计算方式:物理像素/100 = rem 1:引入flxible.js插件<scrip...

分辨率，PPi,DPI,DPR,物理像素，逻辑像素区别1、屏幕尺寸:指的是屏幕对角线的长度2、分辨率:是指宽度上和高度上最多能显示的物理像素点个数3、点距:像素与像素之间的距离，点距和屏幕尺寸决定了分辨率大小4、PPI:屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素点个数，这里的一英寸还是对角线长度5、DPI:每英寸像素点，印刷行业术语。对于电脑屏幕而言和PPI是一个意思6、设备像素(又称为物理像素):指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那

多列布局1、column-count说明:属性规定元素应该被分隔的列数适用于:除table外的非替换块级元素, table cells, inline-block元素2、column-gap说明:属性规定列之间的间隔大小3、column-rule说明:设置或检索对象的列与列之间的边框。复合属性。column-rule-color规定列之间规则的颜色。column-rule-style规定列之间规则的样式。column-rule-width规定列之间规则的宽度。4、colum

盒模型(content+padding+border+margin) 属性:box-sizing 1.标准盒模型 - 属性值:content-box - 使用padding的时候 padding会把容器的大小撑开 减去相应的paadding值 - 设置border边框 边框是长在盒子的外面的 - 计算方式 - 自身大小 content+border+padding - ...

1：景深 景深效果:远小近大 100~1200px 两种写法 1.添加在父级元素上 perspective: 1200px 2.添加在子级元素上 transform:perspective(1200px) - 常用的是父级写法 子级使用的时候会被覆盖 - 景深效果在旋转中表示远小近大 离浏览器的边框是靠近用户的说明是正值2：3d的实现浏览器默认的空间是2d空间 只有x轴和y轴 是没有z轴...

渐变属性的认识 - 渐变可以使用背景图片实现 但是当浏览器放大的时候 图片会失真 - 渐变属性是css中 css由浏览器解析的 1.线性渐变 2.径向渐变 3.重复渐变 线性渐变的属性:background/background-image 属性值:linear-gradient(参数) - 参数1表示方向 - 参数2表示颜色 - 参数3表示颜色 ...

css3选择器 属性选择器的使用 1.E[attr] 表示选中标签和属性 - E表示标签的名称 - [] 表示标签中的属性 - attr 属性 2.E[attr="value"] 表示选中标签和属性 并规定了属性值 3.E[attr~="value"] 表示选中标签和属性 只要属性值是存在的就可以被选中 4.E[attr^="value"] 表示选中标签和属性 以xx字符开头就可以被选择中 5.E[attr$=...