Javasrict 知识二

1.跨域问题: 主要是浏览器的同源策略，协议，域名，端口要相同，否则会出现跨域问题；
一是ajax里加dataType: jsonp;
二是ngix代理
参考链接
https://juejin.cn/post/7252589598152458301?searchId=20240722122740114EBE16554164023F69

2.防抖和节流
防抖：高频率情况下，在delay秒内执行一次，delay秒后再触发则重新计时；

let _debounceTimeout = null;
/**
 * 防抖
 * @param {Function} 执行函数
 * @param {Number} delay 延时ms   
 */
export const debounce = (fn, delay=500) => {
	clearTimeout(_debounceTimeout);
	_debounceTimeout = setTimeout(() => {
		fn();
	}, delay);
}

节流：高频率情况下，首先执行一次，然后在固定时间内再可以执行；

let _throttleRunning = false;
/**
 * 节流
 * @param {Function} 执行函数
 * @param {Number} delay 延时ms  
 */
export const throttle = (fn, delay=500) => {
	if(_throttleRunning){
		return;
	}
	_throttleRunning = true;
	fn();
	setTimeout(() => {
	    _throttleRunning = false;
	}, delay);
}

3.闭包和++的使用
闭包：可以理解为某个函数里面的函数
作用：可以读取函数内部的变量，让这些变量始终保存在内存中，不会在父函数调用后被自动清除。
缺点：内存消耗大，造成性能问题，在 IE浏览器中可能会造成内存泄漏，解决是退出函数时，将不使用的函数清除；还会改变父函数内部变量的值；

首先这个函数里面主要有两个知识点，一个是闭包，一个是增量
function Foo(){ 
  var i=0;
  return function(){ 
    document.write(i++); 
  }
}
var f1=Foo(), f2=Foo(); 
f1(); f1(); f2(); //0,1,0

let i = 0;
let t = 0;
console.log(i++)  //0
console.log(++t)  //1
++在后返回的是i,是把i交出去后再实现自增
++在前返回的是先自增后的变量

4.ajax和axios的区别
Axios 在NPM上的描述是：Promise based HTTP client for the browser and node.js，是一种基于Promise封装的HTTP客户端。
AJAX完整是 Asynchronous Javascript And XML . 异步js和xml，是一种异步请求的技术。
区别
Axios是通过Promise实现XHR封装，其中Promise是控制手段，XHR是实际发送Http请求的客户端。就像$.ajax是通过callback+XHR实现一样，你也可以造个轮子叫XXX的，都是AJAX技术的一种具体实现。

5.页面路由栈获取

/**
 * 获取页面栈
 * @param {Number} preIndex为1时获取上一页
 * @return {Object} 
 */
export const prePage = (preIndex = 1) => {
  const pages = getCurrentPages();
  const prePage = pages[pages.length - (preIndex + 1)];
  return prePage.$vm;
}

6.计算经纬度距离

function getFlatternDistance (lat1, lng1, lat2, lng2) {
    console.log(lat1, lng1, lat2, lng2)
    const PI = Math.PI
    const EARTH_RADIUS = 6378137.0
    function getRad (d) {
        return d * PI / 180.0
    }
    let f = getRad((lat1*1 + lat2*1) / 2)
    let g = getRad((lat1*1 - lat2*1) / 2)
    let l = getRad((lng1*1 - lng2*1) / 2)
    let sg = Math.sin(g)
    let sl = Math.sin(l)
    let sf = Math.sin(f)

    let s, c, w, r, d, h1, h2
    let a = EARTH_RADIUS
    let fl = 1 / 298.257

    sg = sg * sg
    sl = sl * sl
    sf = sf * sf

    s = sg * (1 - sl) + (1 - sf) * sl
    c = (1 - sg) * (1 - sl) + sf * sl

    w = Math.atan(Math.sqrt(s / c))
    r = Math.sqrt(s * c) / w
    d = 2 * w * a
    h1 = (3 * r - 1) / 2 / c
    h2 = (3 * r + 1) / 2 / s
	
    // return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg))
	
	let m = d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg))
	
	if(m<1000) {
		return Math.round(m) + 'm'
	} else {
		return (m / 1000).toFixed(1) + 'km'
	}
}

7.保留两位小数点

function formatNumber(val) {
   if(val) {
  	let d = val;
  	d=Math.round(d*100)/100;
  	const price = (d + "").split(".");
  	price[1] = price[1] ? `${(price[1] + "000").substring(0, 2)}` : "00";
  	d = price.join(".");
  	return d
   } else {
  	return '0.00'
   }
}

8.prototype和__proto__的区别
prototype：是函数特有的，函数也是对象，所以也有__proto__，存在实现继承，节省内存空间；
作用是：就是让该函数所实例化的对象们都可以找到公用的属性和方法
proto：是对象特有的，隐性原型，就是提供一个查找机制，一个方向，但是它是一个非标准的属性，实际开发中不可以使用这个属性；
作用是：访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会沿着它的proto属性所指向的那个对象（父对象）里面找，也就是原型链

9.computed和watch的区别
computed：
是计算属性，默认第一加载的时候就监听，不支持异步，有异步操作时是不支持监听数据变化的。
可以进行缓存值，为何说是有缓存值呢，事实上computed会有自己的watcher，内部有一个属性dirty开关决定computed的值是需要重新计算还是直接复用之前的值（要响应式property）。
watch：
是一个监听器，当该值发生变化时，通知数据更新。
默认第一次加载的时候不进行监听，支持异步操作。
deep：true，这个为深度监听，监听的原理是对该值属性进行递归的访问，在过程中不断发生依赖收集，当对象发生变化时也会通知数据更新。
深度监听也会对性能上有损耗一些问题。

未完...