前端学习笔记6-优快云博客

本文链接：https://blog.youkuaiyun.com/radation/article/details/105393300

1.面向对象之三个基本特征

封装：封装无非就是其属性和方法封装。
继承：构造函数继承或者原型继承
多态：子类方法覆盖父类，或根据参数的数量或者类型实现方法多态

接口和类的差别

1.类分为抽象类(abstract)、静态类(static)和普通类。
抽象类不应该被实例化，他的存在应当相当于其他类的模板的存在。
静态类不需要实例化，可以直接类名引用静态方法。比如工具类。
类的存在是对对象的描述和对其状态的记录，包含了方法和属性，而接口一般只包含方法，而且不能被实例化，就和静态类差不多

2.表格

<table border="1" cellspacing="0" cellpadding="0">
	<thead>
		<tr>
			<th>zl</th>
			<th>zl</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>wa</td>
			<td>wa</td>
		</tr>
	</tbody>
</table>
<div class="table">
    <div class="row">
        <div class="cell">张三</div>
        <div class="cell">李四</div>
        <div class="cell">王五</div>
    </div>
    <div class="row">
        <div class="cell">张三</div>
        <div class="cell">李四</div>
        <div class="cell">王五</div>
    </div>
</div>

3.前后端分离和前后端不分离的区别

前后端不分离:
后端需要控制前端的展示(渲染页面或重定向)，前端与后端的耦合度很高。
适合纯网页应用，对于App不合适（app需要的是后端数据而不是整个页面）。
前后端分离:后端仅返回前端所需的数据，前端有自己的逻辑，耦合度相对较低，页面部分内容由前端自己获取静态数据不一定从服务器获取
。

4.delete和=null的区别

delete是专门删除对象属性的，其他情况是不能delete的(会返回一个false表示删除失败)，而null的话会通过js的垃圾回收机制(最少引用删除)来移除关联，但是这个对象依然存在指向一个空对象。

5.event的screenX,clientX,pageX,offsetX,pageXoffset的区别

event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。
event.clientX、event.clientY
鼠标相对于浏览器可视区域的X,Y坐标（将参照点改成了浏览器内容区域的左上角），可视区域不包括工具栏和滚动条。
event.pageX、event.pageY
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。。
event.offsetX、event.offsetY 鼠标相对于“触发事件的元素”的位置（鼠标想对于事件源元素的X,Y坐标）。

6.web的三层结构

web项目的三层结构：
视图层,业务逻辑层，持久层
(1)视图层：视图层很好解释你现在看到的网页一些界面都属于表现层的东西可以用一些Html，jsp，Swing来实现
(2)业务逻辑层：业务层用来实现整体的业务逻辑如前台获得了数据，逻辑层去解析这些数据，效验这些数据等操作
(3)持久层：持久层用来固化数据，如常说的DAO层，操作数据库将数据入库

7.CA电子证书作用

SSL为了保证网络通信的安全和数据的完整性，使用了身份认证（安全证书）和数据加密（非对称加密和对称加密）。
CA证书的内容包括

颁发者
使用者
版本
签名算法
签名哈希算法
公钥
指纹
指纹算法

8.CORS

使用额外的 HTTP 头使Web应用被准许访问来自不同源服务器上的指定的资源。
原理，在响应报文中添加Access-Control-Allow-Origin: *
简单请求（不需要预检请求，发送options）：
GET
HEAD
POST
预检请求：对那些可能对服务器数据产生副作用的 HTTP 请求方法，需要用options方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。

9.函数调用模式以及this指向

（1）.函数调用模式

function fn(){
  console.log(this);//指向window
}
fn();

（2）.方法调用模式

var obj = {
  sayHi:function(){
    console.log(this);//在方法调用模式中，this指向调用当前方法的对象。
  }
}
obj.sayHi();//this =>obj

（3）.构造函数调用模式

function Person(){
  console.log(this);
}
Person();//this指向window
var p = new Person();//this指向Person

（4）.上下文调用模式

call、apply、bind

17.原生js获取ScrollTop

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

18.Object.create()

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

19.同步异步和阻塞非阻塞的区别

阻塞会导致代码cpu等待，而同步的话cpu可以先执行其他任务

20.中间件

处理 Web 请求时，我们常常需要进行验证请求来源、检查登录状态、确定是否有足够权限、打印日志等操作，而这些重复的操作如果写在具体的路由处理函数中，明显会导致代码冗余，这个时候，我们就可以将这些通用的流程抽象为中间件函数，减少重复代码。
说一下Koa洋葱模型
一个请求从外到里一层一层地经过中间件，响应时从里到外一层一层地经过中间件。
Koa中间件被存储在middleware数组中，实现洋葱模型关键依赖于koa-compose。compose将多个中间件函数合并成一个大的中间件函数，然后调用这个中间件函数就可以依次执行添加的中间件函数，执行一系列的任务。遇到await next()时就停止当前中间件函数的执行并把执行权交个下一个中间件函数，最后next()执行完返回上一个中间件函数继续执行下面的代码。