浅谈JS中常见的问题（二）

emoRui77

已于 2023-03-20 19:08:30 修改

阅读量319

点赞数 2

分类专栏：面试题文章标签： javascript 前端

于 2022-10-10 08:14:16 首次发布

本文链接：https://blog.csdn.net/wdRuiRui/article/details/127230482

版权

面试题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

往期文章目录

浅谈JS中常见的问题（一）

JS知识总结

往期文章目录
前言
总结

前言

Life is like a sea ,only the strong will of people ,to reach the other shore.
生活就像海洋，只有意志坚强的人，才能到达彼岸。
------ 卡尔·海因里希·马克思

6.Ajax跨域的方式，及各自的特点

ajax可以让我们实现无刷新进行数据更新的操作，ajax自带的安全防护机制，必须满足同源策略才能访问这一资源，同源策略（协议，域名，端口三者必须完全相同），网站资源如果不是在部署的服务器上就会被ajax的自带安全机制拦截，而大多数的情况下，网站资源跟部署的不会在同一个服务器上，这样可以让网站性能提升，对用户友好，要是想访问不是当前部署服务器上的资源，这就需要跨域操作。

跨域的方式一：CORS（跨域资源共享，常用）
CORS解决方案需要在服务器上配置请求头信息实现跨域。

//固定写法 返回响应头 *是所以都可访问
response.setHeader('Access-Control-Allow-Origin','*');
//请求头信息自定义
response.setHeader('Access-Control-Allow-Headers','*');
//请求方法自定义
response.setHeader('Access-Control-Allow-Method','*');
//单独设置
response.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:9000');

跨域的方式二：服务器代理跨域
把跨域交给服务器来完成，通过后台(ASP、PHP、JAVA、ASP.NET)获取其他域名下的内容，然后再把获得内容返回到前端，这样因为在同一个域名下，所以就不会出现跨域的问题。

实现代码：创建一个AJAX请求（页面地址为：http://localhost/ajax/proxy.html)

var request = null;
    if(window.XMLHttpRequest){
        request = new XMLHttpRequest;
    }else{
        request = new ActiveXObject("Microsoft.XMLHttp");
    }
    request.onreadystatechange = function{
        console.log(this.readyState);
        if(this.readyState===4 && this.status===200){
 var resultObj = eval("("+this.responseText+")");    //将返回的文本数据转换JSON对象
 document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;    //将返回的内容显示在页面中
        }
    }
    request.open("POST","proxy.php",true);
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    request.send("name=zhangsan&sex=男");

proxy.php

header("Content-type:text/html;charset=utf-8");
$url = "http://localhost:63342/ajax/proxy.js";
$contents = file_get_contents($url);
echo $contents;

跨域的方式三：JSONP跨域（不常用，安全性低，只支持GET请求）

就是在远程服务器端把数据装入js文件中，供客户端调用和进一步处理。
jsonp跨域的原理：通过一些标签自带的跨域属性进行跨域访问资源操作，但是jsonp的方式只支持get方式，通过动态创建一个script标签，script的src路径设置成访问资源路径，后面携带回调函数，这个回调函数必须先定义，然后就能接受服务器返回过来的数据。


//声明函数(必须是全局函数，因为私有函数js会有可能拿不到)
handle(res){
//服务器返回的参数
console.log(res)
}
<script src='http:www.hadf.com?callback=handle'></script>

jquey使用jsonp的方法
$ajax({
url:'url',
dataType:'jsonp',//设置为jsonp的请求
//jsonp的回调函数会返回给success函数执行
success:res=>{}
})
//jquery的jsonp请求会帮我们创建一个全局函数并添加到请求上，回调函数在服务器端拿到数据之后传给success函数执行，
//回调函数后面的&是为了防止浏览器缓存所存在的
jquery做的默认事情
第一：默认帮我们创建一个全局函数并添加到请求地址上去
第二：默认帮我们创建一个script标签并把请求地址添加到src上并发送请求
第三：帮我们默认执行全局函数的时候传给success这个函数执行
服务端通过
请求.query能够拿到所有的请求信息

参考内容：文章1 、文章2

7.mvvm和mvc有什么区别

MVC

MVC是包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的；

View 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状态Model 将新的数据发送到 View，用户得到反馈。

MVVM

MVVM包括view视图层、model数据层、viewmodel层。各部分通信都是双向的。

采用双向数据绑定，View的变动，自动反映在 ViewModel，反之亦然。

其中ViewModel层，就是View和Model层的粘合剂，他是一个放置用户输入验证逻辑，视图显示逻辑，发起网络请求和其他各种各样的代码的极好的地方。说白了，就是把原来ViewController层的业务逻辑和页面逻辑等剥离出来放到ViewModel层。

区别

1、MVC 思想：一种将数据层与视图层进行分离的设计思想。

2、MVVM 思想：MVVM 的一个重要特性，双向绑定，意思就是当 M 层数据进行修改时，VM 层会监测到变化，并且通知 V 层进行相应的修改，反之相同 mvc 和 mvvm 都是一种设计思想。主要就是 mvc 中Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

参考内容：文章1，文章2

8.src和href的区别

Src用于替换当前元素，href用于在当前文档和引用资源之间确立联系.。
Src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置，请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片混入frame等元素。

Href是hypertext reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。
如果我们在文档中添加那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

src和href的区别
1、请求资源类型不同
（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

2、作用结果不同
（1）href 用于在当前文档和引用资源之间确立联系；
（2）src 用于替换当前内容；

3、浏览器解析方式不同
（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

（2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

9.原型及原型链

原型

函数都带有一个prototype 属性，这是属性是指向构造函数的原型对象，这个对象包含所有实例共享的属性和方法。
原型对象都有一个constructor 属性，这个属性指向所关联的构造函数。
每个对象都有一个__proto__ 属性[非标准的方法]，这个属性指向构造函数的原型 prototype。

原型链

当访问实例对象的某个属性时，会先在这个对象本身的属性上查找，如果没有找到，则会通过 proto 属性去原型上查找，如果还没有找到则会在构造函数的原型的__ proto__中查找，这样一层层向上查找就会形成一个作用域链，称为原型链。

10.DOM详解

javascript由三个部分组成：
EMCAScript：描述了JS的语法和基本对象。
BOM(浏览器对象)：与浏览器交互的方法和对象。
DOM(文档对象模型)：处理网页内容的方法和接。
根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。

什么是DOM
DOM是文档对象模型，它指的是把文档当作一个对象来对待，这个对象主要定义了处理网页的内容和接口。

DOM的使用标准
DOM是W3C的标准，是所有浏览器公共遵守的标准。

包含关系和属性
BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。
DOM包含：window

Window对象包含属性：document、location、navigator、screen、history、frames
Document根节点包含子节点：forms、location、anchors、images、links
从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。

DOM和BOM的区别
DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。

DOM操作
1).新建节点
document.createElement(“元素名”) // 新建一个元素节点
document.createAttribute(“属性名”) // 新建一个属性节点
document.createTextNode(“文本内容”) // 创建一个文本节点
document.createDocumentFragment() // 新建一个DOM片段
2).添加、移除、替换、插入：
appendChild() // 向节点的子节点末尾添加新的子节点
removerChild() // 移除
parentNode.replaceChild(newChild, oldChild );用新节点替换父节点中已有的子节点
insertBeform() // 在已有的子节点前插入一个新的子节点
3).查找
document.getElementById() // 通过元素id查找,唯一性
document.getElementByClassName() // 通过class名称查找
document.getElementsByTagName() // 通过标签名称查找
document.getElementByName() // 通过元素的Name的属性值查找