牛客网笔记

请用 HTML5/CSS3 实现一个双栏布局，顶部有导航栏，底部有网站简介。
要求如下：
PC 上，侧边栏在左侧，宽度固定，主内容在右侧，宽度自适应，内容区域高度不定
手机上，所有区域竖排，依次是内容、导航、侧边栏、底部（假定宽度低于 480px 的设备是手机）
答案：
结构： 使用 HTML5 语义标签或者使用体现语义的类名，加分 如下写了 viewport 的 meta，加分

样式： 考虑了内容区域高度不够的情况，加分 使用 grid 实现，加分

  nav { width: 100%; height: 100px; background-color: #588; }
  aside { float: left; width: 200px; height: 400px; background-color: #858; } 
  main { background-color: #885; height: 600px; min-height: calc(100% - 100px - 100px); overflow: hidden; } 
  footer { background-color: #888; height: 100px; } 
  @media (max-width: 480px) {
     body { display: flex; flex-direction: column; } 
     nav { order: 2; }
     aside { order: 3; width: auto; }
     main { order: 1; min-height: auto; }
     footer { order: 4; }
 }

---

typeof()

typeof Symbol() //“symbol”
typeof Number() //“number”
typeof String() //“string”
typeof Function() //“function”
typeof Object() //“object”
typeof Boolean() //“boolean”
typeof null //“object”
typeof undefined //“undefined”

1使用 js 控制 designMode 属性，并设置为 on 使页面整体document处于可编辑状态

2enctype的默认值是application/x-www-form-urlencoded

3form表单method属性一共有两个选项，post 和 get默认为get

4css 如何使用服务端的字体：@font-face

5一个具有n个节点的二叉树可能有几种形态?

/^\w+@[a-z0-9]+.[a-z]{2,4}$/ 邮箱正则

6如果需要匹配包含文本的元素，用下面哪种方法来实现？

text()是jQuery中的方法，可是设置或返回被选元素的文本内容
:contains选择器，选取包含指定字符串的元素，字符串也可以是文本
:input()选择器，选取表单元素

7基本数据类型

Javascript中，由于其变量内容不同，变量被分为基本数据类型变量和引用数据类型变量。基本类型变量用八字节内存，存储基本数据类型(数值、布尔值、null和未定义)的值，引用类型变量则只保存对对象、数组和函数等引用类型的值的引用(即内存地址)

Object.is()

再说Object.is()，其行为与===基本一致，不过有两处不同：
+0不等于-0。
NaN等于自身。

Ajax中浏览器的缓存问题解决方法

我们在做项目中，一般提交请求都会通过ajax来提交，但是测试的时候发现，每次提交后得到的数据都是一样的，调试可以排除后台代码的问题，所以问题肯定是出在前台

每次清除缓存后，就会得到一个新的数据，所以归根到底就是浏览器缓存问题。纠结了很久，终于解决了，在这里总结一下。

我们都知道ajax能提高页面载入的速度主要的原因是通过ajax减少了重复数据的载入，也就是说在载入数据的同时将数据缓存到内存中，一旦数据被加载其中，只要我们没有刷新页面，这些数据就会一直被缓存在内存中，当我们提交 的URL与历史的URL一致时，就不需要提交给服务器，也就是不需要从服务器上面去获取数据，虽然这样降低了服务器的负载提高了用户的体验，但是我们不能获取最新的数据。为了保证我们读取的信息都是最新的，我们就需要禁止他的缓存功能。

解决方案有如下几种：

1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,“0”)。

2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)。

3、在URL后面加上一个随机数： “fresh=” + Math.random();。

4、在URL后面加上时间搓：“nowtime=” + new Date().getTime();。

5、如果是使用jQuery，直接这样就可以了$.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

防抖节流

debounce，去抖动。策略是当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。
throttling，节流的策略是，固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。
debounce和throttling 各有特点，在不同 的场景要根据需求合理的选择策略。如果事件触发是高频但是有停顿时，可以选择debounce； 在事件连续不断高频触发时，只能选择throttling，因为debounce可能会导致动作只被执行一次，界面出现跳跃。

    // 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲，如果在执行中，则直接return
        return;
    }
    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};
 函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。
 如果空闲，则可以正常触发方法执行。
 如果代码正在执行，则取消这次方法执行，直接return。
 
// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
 
    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
};  
 函数防抖的要点，也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
 如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。
 如果计时完毕，没有方法进来访问触发，则执行代码。

mouseover mouseenter

mouseover：鼠标移入监听对象中，或者从监听对象的一个子元素移入另一个子元素中时触发该事件。 mouseenter：鼠标移入监听对象时触发，在监听对象内移动不会触发。
mouseenter不会触发事件冒泡

js深度克隆

function deepClone (obj) {
	if (typeof obj !== 'object') {
		return obj;
	}
	if (!obj) { // obj 是 null的情况
		return obj;
	}
	if (obj instanceof  Date) {
		return new Date(obj);
	} 
	if (obj instanceof  RegExp) {
		return new RegExp(obj);
	} 
	if (obj instanceof  Function) {
		return obj;
	} 
	let newObj；
	if (obj instanceof Array) {
		newObj = [];
		for(let i = 0, len = obj.length; i < len; i++){
               newObj.push(deepClone(obj[i]));//递归操作嵌套对象
         }
         return newObj;
	}
	newObj = {};
	for（let key in obj) {
		if (obj.hasOwnProperty(key)) {
			if (typeof obj[key] !== 'object') {
				newObj[key] = obj[key];
			} else {
				newObj[key] = deepClone(obj[key]);//递归操作嵌套对象
			}
		}
	}
	return newObj;
}

js new的实现原理

例：var obj = new Base();
该步一共做了三件事：即
var obj = {};
obj.proto = Base.prototype;
Base.call(obj);
第一行，我们创建了一个空对象obj
第二行，我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
第三行，我们将Base函数对象的this指针替换成obj。

js是实现sleep

在多线程编程的情况下，sleep使线程进入休眠状态，有三种方式实现sleep的效果：
（1）通过promise

function sleep(ms){
  return new Promise((resolve)=>{setTimeout(resolve,ms)});
}
sleep(500).then(function(){
   console.log(222)
});

(2)使用异步（async）

function sleep(ms){
  return new Promise((resolve)=>setTimeout(resolve,ms));
}
async function test(){
  var temple=await sleep(1000);
  console.log(222);
  return temple
}
test();

(3)通过generate

function* sleep(ms){
   yield new Promise((resolve)=>{setTimeout(resolve,ms);})  
}
sleep(500).next().value.then(function(){console.log(222)});

不直接使用settimeout的原因使sleep实现的使同步进程的挂起，而settimeout是异步的。

事件委托

事件委托利用事件冒泡机制指定一个事件处理程序，用来管理某一类型的所有事件。在操作dom动态添加元素而该元素正好也要绑定事件，那么把该事件绑定在其父元素上通过target获取真实目标，就可以给该元素也绑定上事件，这样做的好处是只在内存中开辟了一块空间，节省资源同时减少了dom操作。

window.onload = function(){
		    　　var oUl = document.getElementById("ul1");
		    　　oUl.onclick = function(ev){
		    	　　　　var ev = ev || window.event;
		   		　　　　var target = ev.target || ev.srcElement;
		        　　　　if(target.nodeName.toLowerCase() == 'li'){
		　　　　　　　           alert(target.innerHTML);//获取到点击的节点
				　　　　}
		    　　}
		}

实现先冒泡后捕获

W3C标准是应先捕获再冒泡。若要实现先冒泡后捕获，给一个元素绑定两个addEventListener，其中一个第三个参数设置为false（即冒泡），另一个第三个参数设置为true（即捕获），调整它们的代码顺序，将设置为false的监听事件放在设置为true的监听事件前面即可。

        function ready() {
            document.getElementsByTagName("button")[0].addEventListener("click", first, false);
            document.getElementsByTagName("div")[0].addEventListener("click", second, true);
            document.getElementsByTagName("div")[0].addEventListener("click", third, false);
        };
        function first() {
            alert("first");
        }
        function second() {
            alert("second");
        }
        function third() {
            alert("third");
        }

<body onload="ready()" >
    <div style="width:200px;height:200px;background-color:silver;">
        <button type="button">Test</button>
    </div>
</body>

事件执行顺序：second,first,third

输出结果

typeof 1; //‘number’
typeof (1);//‘number’
typeof (); //SyntaxError 语法错误
void 0; //undefined
void (0);//undefined
void (); //SyntaxError 语法错误

noscript 元素用来定义在脚本未被执行时的替代内容（文本）。

<body>  
...
  ...

  <script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
  </script><noscript>Your browser does not support JavaScript!</noscript>...
  ...
</body> 

in判断对象是否为数组/对象的元素/属性：

格式：（变量 in 对象）…注意，，，
　　当“对象”为数组时，“变量”指的是数组的**“索引”；不是值**
　　当“对象”为对象是，“变量”指的是对象的“属性”。