知识点总结

最新推荐文章于 2022-08-29 11:40:04 发布

小木子子耳

最新推荐文章于 2022-08-29 11:40:04 发布

阅读量167

点赞数

分类专栏： CSS基础知识

本文链接：https://blog.csdn.net/liyyyyyyyyyyyyyy/article/details/79453282

版权

CSS基础知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

VUEX原理
一个应用可以看作是由上面三部分组成: View, Actions,State,数据的流动也是从View => Actions => State =>View 以此达到数据的单向流动.但是项目较大的, 组件嵌套过多的时候, 多组件共享同一个State会在数据传递时出现很多问题.Vuex就是为了解决这些问题而产生的.

Vuex可以被看作项目中所有组件的数据中心,我们将所有组件中共享的State抽离出来,任何组件都可以访问和操作我们的数据中心.
为什么要存在块级作用域？
ES5只存在全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景
1.内层变量可能会覆盖外层变量
2.用来计数的循环变量泄露为全局变量te
IE兼容性

浏览器默认的margin和padding不同。解决方案是加一个全局*{margin：0；padding：0}来统一
IE6\双边距bug：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大，解决方案是在float的标签样式控制中加入display：inline将其转化为行内属性
- 1.实现两端固定，中间自适应布局的方法：
  分为两大类，一类是利用传统的position方法，另一类是利用CSS弹性盒模型布局实现
  1. 基于传统的position和margin等属性进行布局，分为绝对定位法、圣杯布局、自身浮动法
    基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后，否则右侧会沉在中间内容的下侧

原理：元素浮动后，脱离文档流，后面的元素受浮动影响，设置受影响元素的margin值即可
两边固定宽度，中间宽度自适应。
利用中间元素的margin值控制两边的间距
宽度小于左右部分宽度之和时，右侧部分会被挤下去

基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序
缺点：有顶部对齐问题，需要进行调整，注意中间的高度为整个内容的高度
float和BFC配合圣杯布局
必须将中间部分的HTML结构写在最前面，三个元素均设置向左浮动。两侧元素宽度固定，中间设置为100%；然后利用左侧元素负的margin值进行偏移，覆盖在中间的宽度之上；右侧的元素同样利用负的margin值进行覆盖
存在的问题：不能自适应高度
2. 基于CSS弹性盒模型，利用flex布局
flex布局
flexbox布局最简洁使用，并且没有明显缺陷。

仅需将容器设置为display:flex;，盒内元素两端对其，将中间元素设置为100%宽度即可填充空白，再利用margin值设置边距即可
并且盒内元素的高度撑开容器的高度
总结：
纯float的三栏布局需要将中间的内容放在最后；
绝对定位的三栏布局：元素对其有点问题
圣杯布局：容器内不能撑开高度
flex布局最好，基本没有大的缺点。
2.清除浮动的方法
浮动的父容器
为父元素增加样式
：after伪元素方法
js
1.new操作符
创建一个空的对象，被this引用的对象
属性和方法被加入到this引用的对象中
新创建的·对象由this所引用，并且最后隐式的返回this
2.DOM操作
创建节点
document.createTextNode()
document.createElement()
document.createDocumentFragment()
//添加移除替换插入
appendChild()
removeChild()
replaceChild()
insertChild()
//查找
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
querySelector()
querySelectorAll()
3.Js设置css样式的几种方式
直接设置style样式
直接设置属性element.setAttribute(‘height’,100px)
使用setAttribute设置style属性
使用setProperty设置属性，通过第三个参数设置important
element.style.setProperty()
设置cssText
element.style.cssText=”width:200px;height:70px;display:bolck”;
4.冒泡和捕获
element.addEventListener(event, function, useCapture)
第一个参数是需要绑定的事件
第二个参数是触发事件后要执行的函数
第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。

要兼容旧版本的IE浏览器，可以使用IE的attachEvent函数
object.attachEvent(event, function)
总结
对于非target节点则先执行捕获在执行冒泡
对于target节点则是先执行先注册的事件，无论冒泡还是捕获
5.阻止默认行为
function stopDefault( e ) {
// 阻止默认浏览器动作(W3C)
if ( e && e.preventDefault ) {
e.preventDefault();
} else {
// IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
}
6.阻止冒泡行为
function stopBubble(e) {
// 如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation ) {
// 因此它支持W3C的stopPropagation()方法
e.stopPropagation();
} else {
// 否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
7.数组去重：
https://www.jianshu.com/p/131ca13e7f28
对象数组去重：https://segmentfault.com/a/1190000009045039
8.排序算法https://www.jianshu.com/p/7e6589306a27
9.柯里化：https://www.jianshu.com/p/f02148c64bed
是把接受多个参数的函数变换成接受一个单一参数的函数，并且返回接收余下的函数而且返回结果的新函数的技术
10.闭包特性：
函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制回收
缺点：常驻内存，会增大内存的使用量，使用不当很容易造成内存泄漏
好处
1.希望一个变量长期驻扎在内存中
2.避免全局变量的污染
3.私有成员的存在
11.CSS3新增属性
box-shadow(阴影效果)
box-sizing:控制盒模型的组成模式
border-colors:为边框设置多种颜色
border-image:图片边框
border-radius:圆角边框
text-shadow:文本阴影
text-overflow：文本截断
word-wrap：自动换行
opacity：不透明度
resize：元素缩放
outline：外边框
background：为一个元素指定多个背景
hsl、hsla、rgba
总结：6大方面的新增特性
选择器方面的扩展
属性选择器
结构伪类选择器
UI状态伪类选择器
目标伪类选择器
通用兄弟选择器
否定选择器
页面布局的加强
多列布局方式：column-count和column-width
可变更的盒模型：box-sizing
可伸缩的布局方式：弹性盒模型
元素修饰的加强
RGBA和透明度
圆角的支持
多背景图片支持
渐变效果支持：gradient
阴影和反射效果：
阴影：text-shadow、border-shadow
反射：reflect
开放字体的支持
@font-face
多终端适配
媒体查询（media queries）可以让你为不同设备基于它们的能力定义不同的样式
动画支持
transition：过渡
transform：变换
animation：动画
12. JSON:JSON和XML一样，都是一种数据交换格式，不过JSON是轻量级的。
优点：书写简单，一目了然；符合JS原生语法，可以由解释引擎直接处理，不用另外添加解析代码
JSON对象是JS的原生对象，用来处理JSON格式数据。它有两个静态方法。JSON.stringify()和JSON.parse()
JSON.stringify():用于将一个值转为JSON字符串。该字符串符合JSON格式
JSON.parse()：将JSON字符串转换成对应的值
13.Web性能优化
分为三大部分：加载优化、图片优化、CSS优化、JS优化
加载优化：
减少HTTP的请求次数：合成CSS、JS、CSS；合成图片
缓存：缓存一切可缓存的资源、使用长Cache、外联式引用CSS、JS
压缩CSS、JS、HTML
启用GZip
减少Cache
按需加载
减少重定向
异步加载第三方资源
图片优化：压缩图片
CSS优化：
css写在头部，JS写在尾部或者异步加载
尽量避免在HTML中使用style属性
避免使用CSS样式
避免图片和iframe等的src为空
尽量避免重设图片大小
移除空的CSS规则
正确使用display属性
不滥用float
不滥用Web字体
不声明过多的font-size
值为0时不需要任何单位
标准化各种浏览器前缀
避免让选择符看起来像是正则表达式
JS优化：分为变量查找优化、核心语法优化、DOM优化、动画优化、事件优化、脚本装载优化
变量查找优化：
变量声明使用var
慎用全局变量
缓存重复使用的全局变量
避免使用with
核心语法优化：
使用原型优化方法定义
避免闭包陷阱
使用for代替for…in
使用原始操作方法代替方法调用
避免循环中使用try catch
避免使用属性访问方法
传递方法取代方法字符串
DOM优化：
减少DOM数量
优化css样式转换
优化节点添加
优化节点修改
减少使用元素位置操作
避免遍历大量元素
事件优化：使用事件代理
动画优化：
设置动画元素为absolute或fixed
使用一个timer完成多个元素动画
脚本装载优化：
使用工具精简脚本
启用Gzip压缩
设置Cache-Control和Expires头
异步加载脚本
14、事件代理、事件绑定、事件监听
事件是HTML文档执行某种操作时需要执行的动作，响应事件的函数叫做事件处理程序。
DOM0级事件处理程序
在DOM0级事件处理程序，事件名是以“on”开头
HTML事件处理程序
一个HTML元素支持的事件，可以通过HTML元素的属性来指定：

function showMessage(){
alert(‘itbilu.com’);
}
缺点：HTML和JS代码紧密耦合，对代码的维护和修改都造成了不便
通过JS添加DOM0级事件处理程序
要使用JS指定事件处理程序，首先要获得一个要操作的对象的引用，然后通过其事件处理程序属性指定事件处理程序
var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
alert(‘itbilu.com’);
}
DOM0级事件处理程序可以认为是元素的方法。删除DOM0级事件处理程序，将相应属性值设置为null即可。
btn.onclick = null;
DOM2级事件处理程序
其中的DOM 事件规范定义了两个方法：addEventListener()和removeEventListener()，分别用于添加事件处理程序和删除事件处理程序。
IE事件处理程序
在早期的IE浏览器，如：IE8中，没有实现addEventListener()和removeEventListener()，但提供了两个替代方法attachEvent()和detachEvent()。由于Microsoft当前最新的系统Windows 10中，已放弃IE被edge浏览器替代，所在attachEvent()和detachEvent()已没有意义。
两点注意：使用attachEvent（）方法的情况下，事件处理程序会在全局作用域中运行
为同一按钮添加了两个不同的事件处理程序，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发
事件流
在DOM0级事件中，事件处理只有事件冒泡的过程，在IE8及其早期版本中只支持DOM0级事件。而W2C规范中的DOM2级事件规范中，规定了事件处理分为三个阶段：

事件捕获阶段
事件目标阶段
事件冒泡阶段
事件代理
就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
作用：减少与dom的交互次数，提高代码性能
动态生成DOM元素时，可通过事件代理给新增的元素添加事件函数
事件绑定
要想让JS对用户的操作做出响应，首先要对DOM元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称
https://itbilu.com/javascript/js/Vy1jsXqJg.html
15.说一下页面加载过程，就是输入url到加载出页面
输入地址
浏览器查找域名的IP地址
这一过程包括了DNS具体的查找过程：浏览器缓存->系统缓存->路由器缓存->IPS服务器缓存->根域名服务器缓存->顶级域名服务器缓存->主域名服务器缓存
tcp三次握手
浏览器向服务器发送HTTP请求
服务器的永久重定向响应
浏览器跟踪重定向地址
服务器处理请求
浏览器渲染页面
16.HTTP状态码
17.关于函数的arguments对象
ECMAScript中的参数在内部是用一个数组表示的。函数接收到的永远是一个数组。在函数体内可以通过arguments对象来访问参数数组，从而获取传递给函数的每一个参数。一个重要特点：命名参数只提供便利，但不是必需的。
没有传递值的命名参数将自动赋予undefined值。
它是一个伪数组。转换成真正的数组是Array.prototype.slice.call(arguments)
13.创建对象的方式
工厂模式
function Person（name）{
var o=new Object();
o.name=name;
o.getName=function(){
console.log(this.name)
}
return o;
}
var person1=Person(“Ck”)
优点：完成了返回一个对象的要求
缺点:1.无法通过constructor识别对象，以为都是来自Object，无法得知来自Person
2.每次通过Person创建对象的时候，同一个属性都要重新创建一次，浪费资源
构造函数模式
function Person（name）{
this.name=name;
this.getName=function(){
console.log(this.name)
}
}
var person1=Person(“Ck”)
优点：实例可以识别为一个特定的类型
缺点：每次创建实例时，每个方法都要被创建一次
原型模式
function Person（）{}
Person.prototype.name = ‘keivn’;
Person.prototype.getName = function () {
console.log(this.name);
};
var person1 = new Person();
优点：方法不会重建
缺点：所有的属性和方法都共享；不能初始化参数
组合使用构造函数模式和原型模式
function Person(name) {
this.name = name
this.friends = [‘Shelby’, ‘Court’]
}
Person.prototype.sayName = function() {
console.log(this.name)
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push(‘Van’)
console.log(person1.friends) //[“Shelby”, “Court”, “Van”]
console.log(person2.friends) // [“Shelby”, “Court”]
console.log(person1.friends === person2.friends) //false
优点：该共享的共享，该私有的私有
动态原型模式
使用动态原型模式时，不能用对象字面量重写原型
function Person(name) {
this.name = name;
if (typeof this.getName != “function”) {
Person.prototype = {
constructor: Person,
getName: function () {
console.log(this.name);
}
}
}
}

var person1 = new Person(‘kevin’);
var person2 = new Person(‘daisy’);

// 报错并没有该方法
person1.getName();

// 注释掉上面的代码，这句是可以执行的。
person2.getName();
可以这样
function Person(name) {
this.name = name;
if (typeof this.getName != “function”) {
Person.prototype = {
constructor: Person,
getName: function () {
console.log(this.name);
}
}

    return new Person(name);
}

}

var person1 = new Person(‘kevin’);
var person2 = new Person(‘daisy’);

person1.getName(); // kevin
person2.getName(); // daisy
寄生构造函数模式
稳妥构造函数模式
所谓稳妥对象，指的是没有公共属性，而且其方法也不引用 this 的对象。
与寄生构造函数模式有两点不同：
新创建的实例方法不引用 this
不使用 new 操作符调用构造函数
14.构造函数模式：为了解决从原型对象生成实例的问题，JS提供了一个构造函数模式
构造函数其实就是一个普通函数，但是内部使用了this变量，对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。实例·对象自动含有constructor属性，指向它们的构造函数.每一个实例也有一个constructor属性，默认调用prototype对象的constructor属性。
14.Prototype模式：每一个构造函数都有一个prototype属性，指向另一个对象。这个·属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。这个对象的所有属性和方法，都会被构造函数的实例继承。可以把不变的属性和方法，直接定义在prototype对象上。
15对象继承的5种方式
比如现有一个动物对象的构造函数
function Animal（）{
this.species=”动物”
}
一个猫对象的构造函数
function Cat(name,color){
this.name=name;
this.color=color;
}
构造函数绑定
使用call或apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行
function Cat(name,color){
Animal.apply(this.arguments);
this.name=name;
this.color=color;
}
var cat1 = new Cat(“大毛”,”黄色”);
alert(cat1.species); // 动物
Prototype模式
如果猫的prototype对象，指向Animal的实例，那么所有猫的实例就能继承·Animal了
Cat.prototype=new Animal();
Cat.prototype.constructor=Cat;
var cat1 = new Cat(“大毛”,”黄色”);
alert(cat1.species); // 动物
直接继承Prototype
第三种方法是对第二种方法的改进。由于Animal对象中，不变的属性都可以直接写入Animal.prototype。所以，我们也可以直接跳过Animal（），直接继承Animal.prototype
先将Animal对象改写
function Animal（）{}
Animai.prototype.species=”动物”；
然后将Cat的prototype对象，指向Animal的prototype对象，这样就完成了继承
Cat.prototype=Animal.prototype;
Cat.prototype.constructor=Cat;
var cat1 = new Cat(“大毛”,”黄色”);
alert(cat1.species); // 动物
与前一种方法相比，这样做的效率比较高（不用执行和建立Animal的实例了·）

小木子子耳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
知识点总结

VUEX原理一个应用可以看作是由上面三部分组成: View, Actions,State,数据的流动也是从View =&gt; Actions =&gt; State =&gt;View 以此达到数据的单向流动.但是项目较大的, 组件嵌套过多的时候, 多组件共享同一个State会在数据传递时出现很多问题.Vuex就是为了解决这些问题而产生的.Vuex可以被看作项目中所有组件的数据中心,我们...
复制链接

扫一扫