js知识

DOM操作——怎样添加、移除、移动、复制、创建和查找节点

• 创建新节点

createDocumentFragment()//创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

• 添加、移除、替换、插入

appendChild()
removeChild()
replaceChild()
insertBefore() //并没有insertAfter()

• 查找

getElementsByTagName() // 通过标签名称
getElementsByName()//通过元素的name属性值
getElementById() // 通过元素ID，唯一性

ES6的了解说一些

新增模版字符串（为javascript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值 Inputs =>outputs。）、for-of（用来遍历数据—例如数组中的值）、arguments对象可被不定参数和默认参数完美代替。ES6将 promise对象纳入规范，提供了原声的promise对象。增加了let和const命令，用来声明变量。增加了块级作用域。let命令实际上就增加了快级作用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。

如何解决跨域问题？

• JSONP
  原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。
  由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
  优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。
  JSONP:json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里
  例子
• CORS
  服务器对于cors的支持，主要就是通过设置Access-Control-Allow-Origin来进行的，如果浏览器监测到相应的设置，就可以允许Ajax进行跨域的访问。
• 通过修改document.domain来跨子域
  window对象有个name属性，该属性有个特征：即在一个窗口（window）的身影周期内，窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的
• 使用HTML5中新引进的window.postMessage方法来跨域传送数据
  还有flash、在服务器上设置代理页面等跨域方法。个人认为window.name的方法既不复杂，也能兼容到几乎所有浏览器，这真的是极好的一种跨域方法。

XML和JSON的区别？

1.数据体积方面
JSON相对于XML来讲，数据的体积小，传递的速度更快些。
2.数据交互方面
JSON与javascript的交互更加方便，更容易解析处理，更好的数据交互。
3.数据描述方面
JSON对数据的描述性比XML较差
4.JSON的速度要远远快于XML

谈谈你对webpack的看法？

webpack是一个模块打包工具，你可以使用webpack管理你的模块依赖，并编译输出模块们所需的静态文件。它能够很好的管理、打包web开发中所用到的HTML、javascript、css以及各种静态文件（图片、字体等），让开发过程更加高效，对于不同类型的资源，webpack有对应的模块加载器。webpack打包器会分析模块之间的依赖关系，最后生成了优化且合并后的静态资源。
webpack的两大：
1.code splitting（可以自动完成）
2.loader可以处理各种类型的静态文件，并且支持串联操作
webpack是以commonJs的形式来书写脚本的，但对AMD/CMD的支持也很全面，方便旧项目进行代码迁移。
webpack具有requireJs 和browserify的功能，但仍有很多自己但新特性：
1.对CommonJS、AMD、ES6对语法做来兼容
2.对js、css、图片等资源文件都支持打包
3.串联模式加载器以及插件机制，让其具有更好但灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
4.有独立的配置文件webpack.config.js
5.可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
6.支持SourceUrls和SourceMaps,易于调试
7.具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
8.webpack使用异步IO，并具有多级缓存，这使得webpack很快且在增量编译上更加快

说说你对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的

对前端模块化对认识

AMD是RequireJS在推广过程中对模块定义对规范化产出。
CMD是SeaJS在推广过程中对模块定义对规范化产出。
AMD是提前执行，CMD是延迟执行
AMD的风格通过返回一个对象作为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。
CMD模块方式：

define(function(require, exports, module) {

      // 模块代码

    });

javascript垃圾回收方法

• 标记清楚（mark and sweep）
  这是javascript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开的时候（函数执行结束）将其标记为“离开环境”。
  垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量
• 引用计数（reference counting）
  在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。
  引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
  在IE中虽然javascript通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及BOM及DOM就会出现循环引用的问题。

快速排序的思想并实现一个快排？

“快速排序”的思想很简单，整个排序过程只需要三步：
（1）在数据集之中，找一个基准点
（2）建立两个数组，分别存储左边和右边的数组
（3）利用递归进行下次比较

function quickSort(arr){
        if(arr.length<=1){
            return arr;//如果数组只有一个数，就直接返回；
        }

        var num = Math.floor(arr.length/2);//找到中间数的索引值，如果是浮点数，则向下取整

        var numValue = arr.splice(num,1);//找到中间数的值
        var left = [];
        var right = [];

        for(var i=0;i

对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免 全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。
闭包有三个特性：

• 函数嵌套函数
• 函数内部可以引用外部的参数和变量
• 参数和变量不会被垃圾回收机制回收

null和undefined的区别？

null是一个表示“无”的对象，转为数值时为0；undefined是一个表示“无”的原始值，转为数值时为NAN，当声明的变量还未初始化时，变量的默认值为undefined。
null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
undefined表示“缺少值”，就是此处应该有一个值，但是还没有定义。典型的用法是：

1. 变量被声明了，但没有赋值时，就等于undefined。
2. 调用函数时，应该提供的参数没有提供，该参数等于undefined。
3. 对象没有赋值的属性，该属性的值为undefined。
4. 函数没有返回值时，默认返回undefined。

null表示“没有对象”，即该处不应该有值。典型用法是：

1. 作为函数的参数，表示该函数的参数不是对象。
2. 作为对象原型链的终点。

new操作符具体干了什么呢？

1. 创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
2. 属性和方法被加入到this引用的对象中。
3. 新创建的对象由this所引用，并且最后隐式的返回this。

var obj = {};
obj._proto_ = prototype;
base.call(obj)

js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js。

异步加载和延迟加载

1. 异步加载的方案：动态插入script标签

2. 通过ajax去获取js代码，然后通过eval执行

3. script标签上添加defer或者async属性

4. 创建并插入iframe，让它异步执行js页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。

5. 延迟加载：有些js代码并不是

哪些操作会造成内存泄漏？

• 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
  垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
• setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄漏。
• 闭包、控制台日志、循环（在两个对彼此引用且彼此保留时，就会产生一个循环）

javascript对象的几种创建方式？

1. 工厂模式
2. 构造函数模式
3. 原型模式
4. 混合构造函数和原型模式
5. 动态原型模式
6. 寄生构造函数模式
7. 稳妥构造函数模式

javascript继承的6种方法？

1. 原型链继承
2. 借用构造函数继承
3. 组合继承（原型+借用构造）
4. 原型式继承
5. 寄生式继承
6. 寄生组合继承

创建ajax的过程？

1. 创建‘XMLHttpRequest’对象，也就是创建一个异步调用对象。
2. 创建一个新的‘HTTP'请求，并指定该’HTTP‘请求的方法、’URL‘及验证信息。
3. 设置响应’HTTP‘请求状态变化的函数。
4. 发送’HTTP‘请求。
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新

var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function() {
  if(xmlHttp.readyState === 4 & xmlHttp.status === 200) {
  }
}

解释javascript的同源策略？

同源策略是客户端脚本（尤其是javascript）的重要安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。

你如何从浏览器的URL中获取查询字符串参数？

　 var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
//从?之后开始匹配如getQuery(courseid)返回一个数组
//["courseid=8","","8","&",index:0,input:"courseid=8"]
   if (r!=null) return unescape(r[2]); return null;
}