鸭题-03-JavaScript

JavaScript

---

JavaScript的组成

• JavaScript 由以下三部分组成：
  • ECMAScript（核心）：JavaScript 语言基础
  • DOM（文档对象模型）：规定了访问HTML和XML的接口
  • BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法

JS的基本数据类型和引用数据类型

• 基本数据类型：undefined、null、boolean、number、string、symbol
• 引用数据类型：object、array、function

检测浏览器版本版本有哪些方式？

• 根据 navigator.userAgent // UA.toLowerCase().indexOf(‘chrome’)

介绍JS有哪些内置对象？

• 数据封装类对象：Object、Array、Boolean、Number、String
• 其他对象：Function、Arguments、Math、Date、RegExp、Error
• ES6新增对象：Symbol（标识唯一性的ID）、Map、Set、Promises、Proxy、Reflect

如何最小化重绘(repaint)和回流(reflow)？

• 需要要对元素进行复杂的操作时，可以先隐藏(display:“none”)，操作完成后再显示

• 需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document

• 缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流

• 尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流）

Javascript作用链域? （一层向上查找，先找自己，找不到就向上层找）

• 全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节
• 如果当前作用域没有找到属性或方法，会向上层作用域[[Scoped]]查找，直至全局函数，这种形式就是作用域链

dom0 dom2 事件绑定区别

obox.onclick =function(){}
obox.addEventListener('click',function(){

},false) ; // 捕获 冒泡？

数据请求

(1) XHR （利用的是浏览器跟服务器的异步请求ajax 来实现通信方案）

var xhr = new XMLHttpRequest();
xhr.open('get',"www.aaaa.com",true);//异步
xhr.send();
xhr.onreadystatechange = function(){
	//readstate  4
	// status  200-300
	//200 成功 （有可能强缓存策略，cache-control(设置的一个过期时间),expired）
	// 301(永久重定向) 302(暂时重定向) redirect  307 (内部重定向)
	// 304 从缓存读取数据。(协商缓存策略,etag)
	// 404 not found
	// 500 服务器错误(不是所有的500错误都是服务器错误，也可能是后端要的字段，前端没有传对字段)。	

}
  xhr 可以取消？
  xhr.abort();//终止请求。

强缓存策略：强制刷新不使用任何缓存策略，一般静态资源，img ,css,js文件就会使用强缓存策略，在一个时间点内都不会再跟服务器要
协商缓存策略：对于接口的都提供304协商缓存

(2) fetch （w3c）

fetch("url",{
    method:"post",body:"",credencial:'include'
   })
   .then(res=>res.json())
   .then(res=>{console.log(res)})
   // 兼容性问题
   // 发出的请求，默认是不带cookie.  credencial:'include'

(3) jsonp (解决跨域) （动态创建script标签）

  前端需要动态创建script src指向没有跨域限制，  onload

  后端返回的数据格式 一定是， test('["111","222","3333"]');

  前端提前定义好 test这个方法，通过形参就拿到数据了。

  jsonp 可以做get请求， 无法做post请求（缺点）;

  jsonp可以取消吗？不能

(4) 跨域？不符合同源策略 （协议 域名 端口号），浏览器阻止的。

cors (跨域资源共享)  Access-Control-Allow-Origin：*

nginx (前端的反向代理，高性能服务器)

面向对象

(1)构造函数 （new关键字，函数名大写）

function Test(name,age){
    this.name = name;
    this.age =age;
    this.getName= function(){
    	return this.name;
    }
}
// Test();
var obj = new Test("kerwin",100); // 每次new 的时候 属性和方法都会被创建多份，要想只有一份就通过原型

var obj2 =new Test("xiaoming",18)

// es6
class Test extends Component{
    constructor(){
        super()
        this.state = {
            name:"kerwin"
        }
    }
}

//es7
class Test extends Component{
  static state = {
      
  }
}

(2)原型

 //内存只有一份
Test.prototype.getName= function(){

}
//缺点是？

原型容易被覆盖

Array.prototype = {

}

(3)继承

//构造函数继承
function Test2(name,age,location){
    // this.name =name;
    // this.age =age;
    // Test.call(this,name,age);
    Test.apply(this,[name,age])
     this.location = location;
}
var obj = new Test2();

//原型继承
Test2.prototype =Test.prototype
//Test2.prototype =new Test()
Test2.prototype.constructor =Test2;

//混合继承

(4)原型链

原型链的基本原理：任何一个实例，通过原型链，找到它上面的原型，该原型对象中的方法和属性，可以被所有的原型实例共享。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8BF5D9i0-1623680988701)(03-JavaScript.assets/image-20200411192514703.png)]

闭包

// 函数内部返回一个函数被外面所引入，导致这个函数无法释放（导致这个函数不会被垃圾回收机制所回收），构成的闭包。
// 闭包在哪使用：
//1. 函数防抖(搜索查询)==============================
   	inputelement.oninput = (function(){
   		var timer =null;
   		return function(){
               console.log("scroll")
   			if(timer){
   				clearTimeout(timer);
   			}
   			timer = setTimeout(() => {
   			 	console.log("代码执行,ajax"); 
                   
   			}, 500)
   		}
   	})()

// 2. 函数节流（onrize，onscroll）=======================
           window.onscroll = (function(){
               var date = Date.now();
               return function(){

                   if(Date.now()-date>500){
                       date = Date.now();
                       console.log("代码执行echarts resize")

                   }
               }
           })()
   	
// 3. ul li 点击哪个哪个高亮 =================================
   	var oli = document.getElementsByTagName("li");

   	for(var i=0;i<oli.length;i++){
   		oli[i].onclick =(function(index){
               return function(){
                   console.log(index)
               }
           })(i)   
   	}

闭包在哪用过： 搜索框 防抖方案

搜索：<input id="myinput" />

// 搜索框 防抖方案
var input = document.querySelector("#myinput")
input.oninput = (function () {
    var isTime
    return function () {
        // 第一次isTime 没有，不走if 一秒后发ajax，isTime 存在走进if 清除 
        if (isTime) {
            clearTimeout(isTime)
        }
        isTime = setTimeout(() => {
            // 定时器超过一秒钟没有被销毁，会走进这里
            console.log("ajax");
        }, 1000)
    }
})()

数组去重

 var arr = [1,2,3,4,3,4];

 var myset = new Set(arr);
 var mya = Array.from(myset);