面试题<初级>

INTERVIEW

@code-char:"```"
code:before,code:after{
concent:@code-char;
background:red;
}

• JavaScript的typeof返回的数据类型
  • object number function boolean underfind string typeof isNaN => function

---

• javascript的数据类型
  • 5种基本数据类型: string、number、boolean、null、undefined
  • 1种复杂类型:object (复杂的键控集合) 属性的容器，属性值除undefined
  • object包括: Object、Function、String、Number、Boolean、Array、Regxp、Date、Globle、Math、Error以及宿主环境提供的Object类型

---

• 检测数组的方式
  • Array.isArray(arr); -----// es5

  if(typeof Array.isArray==="undefined"){
    Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]";
    };
  };

  • toString.call(arr); -----// ”[object Array]”
  • arr.constructor; -----// function Array() { [native code] };
  • arr instanceof Array; -----// 判断是不是某个构造函数的实例

---

• 事件流
  • DOM事件流： 事件捕获阶段 =>目标元素阶段=>事件冒泡阶段
    1. 传统事件绑定:不支持事件流;绑定屡次前面的被覆盖
    2. w3c:addEventListener/attachEvent
  • 事件冒泡：事件开始由最具体的元素接受，而后逐级向上传播
  • 事件捕捉：事件由最不具体的节点先接收，而后逐级向下，一直到最具体的

---

• Javascript建立对象的几种方式
  • 1.对象字面量、Object构造函数
  • 2.纯构造函数
  • 3.空构造函数+原型
  • 4.混合构造函数+原型
  • 5.动态原型
  • 6.寄生构造函数
  • 7.Object.create() -----// ES5 ie9+

寄生构造函数[^1]
[^1]:——实际上是工厂模式的变种，只不过是放在其余构造函数中建立对象

function SpecialArray(){
    var values = [];
    values.push.apply(values, arguments);
    values.toPipedString = function(){
        return this.join("|");
    };
    return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString());  //"red|blue|green"

---

• 构造函数继承和原型链继承有什么区别
  • 在原型中的方法消耗的内存更小，由于在内存中原型只有一个，其中的方法能够被全部的实例共享，实例化的时候并不会在内存中在复制一份，而构造函数中的方法每次都要再复制一份
  • 构造函数中定义的属性和方法要比原型中的优先级高，若是定义了同名称的属性和方法，构造函数中的方法将会覆盖原型中的方法

---

• 如何阻止事件冒泡和默认事件
  • e. stopPropagation(); -----// 标准浏览器阻止事件冒泡
  • event.canceBubble=true; -----// ie9以前

---

• 弹出索引

// 方式1、事件对象
for(var i = 0; i < dom.length; i++) {
  dom[i].onclick = function(e) {
    var e = window.e || e;
    var target = e.target || e.srcElement;
    return target;
  };
};

// 方式2、闭包实现
for(var i = 0; i < dom.length; i++) {
  dom[i].onclick = (function (index) {
    return function () {
      return index;
    };
  })(i);
}

---

• 编写一个数组去重的方法
  • 法1、
    1. 先建立一个空数组，用来保存最终的结果
    2. 循环原数组中的每一个元素
    3. 再对每一个元素进行二次循环，判断是否有与之相同的元素，若是没有，将把这个元素放到新数组中
    4. 返回这个新数组
  • 法2、数组的indexOf()方法返回给定元素能找在数组中找到的第一个索引值，不然返回-1。

var removeMore = function(arr) {
    var newArr = [];
    for(var i = 0; i < arr.length; i++) //遍历当前数组
    {
        //若是当前数组的第i已经保存进了临时数组，那么跳过，
        //不然把当前项push到临时数组里面
        if (newArr.indexOf(arr[i]) === -1) newArr.push(arr[i]);
    }
    return newArr;
};

var arr = [1,3,3,4,6,0,8,6];

//方法1
function unqiue(arr){
    var json = {};
    var result = [];
    for(var i=0;i<arr.length;i++){
        //这里会遍历json的arr[i]属性  由于json为空  理所固然返回undefined
        //因此当if知足！undefined  即为true的时候  给json的arr[i]的属性的值设定为1
        //而后放入结果数组里  因此当arr数组中有重复的值时 if不知足条件  就不会添加到数组了
        if( !json[arr[i]] ){
            json[arr[i]] = 1;
            result.push( arr[i] );
        }
    }
    return result;
}
console.log(unqiue(arr));

//方法2
Array.prototype.unique1 = function() {
    var a = [];var l = this.length;
    for(var i = 0 ;i< l; i++)
    {
        for(var j = i + 1 ;j < l; j++) {
            if (this[i] === this[j]) {j = ++i}
        }
        a.push(this[i]);
    }
    return a;
}
console.log(arr.unique1());


//方法3
Array.prototype.unique3 = function()
{
    var n = []; //一个新的临时数组
    for(var i = 0; i < this.length; i++) //遍历当前数组
    {
        //若是当前数组的第i已经保存进了临时数组，那么跳过，
        //不然把当前项push到临时数组里面
        if (n.indexOf(this[i]) == -1) n.push(this[i]);
    }
    return n;
};

---

• 深度克隆的方法

var json = {a:6,b:4,c:[1,2,3]};
function clone(obj){
    var oNew = new obj.constructor(obj.valueOf());
    if(obj.constructor === Object){
        for(var i in obj){
            oNew[i] = obj[i];
            // 递归调用
            if(typeof(oNew[i]) === 'object'){
                clone(oNew[i]);
            }
        }
    }
    return oNew;
}

---

• 数组嵌套对象的排序

// 将arr按age属性降序排列
var arr = [
  {"name": "wang","age": 18},
  {"name": "liu","age": 34},
  {"name": "wu","age": 57},
  {"name": "qiu","age": 9},
  {"name": "lie","age": 14}
];
// 1.冒泡排序法
function sequence(arr) {
  for(var i = 0; i < arr.length; i++) {
    for(var j = 0; j < arr.length; j++) {
      if(arr[i].age < arr[j].age) {
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
      }
    };
  };
  return arr;
};

// 2.数组的**sort**方法
function sequence(arr) {
  var down = function(x,y) {
    return (x.age < y.age) ? 1 : -1;
  };
  arr.sort(down);
  return arr;
}

// 多属性(键值)排序
var sequence = function(name,minor) {
  return function (o,p) {
    var a,b;
    if(o && p && typeof o === 'object' && typeof p === 'object') {
      a = o[name];
      b = p[name];
      if(a === b) {
        return typeof minor === 'function' ? minor(o,p) : 0;
      }  
      if(typeof a === typeof b) {
        return a < b ? 1 : -1;
      }
      return typeof a < typeof b ? -1 : 1;
    } else {
      throw {
        name : 'error';
      };
    }
  };
};

---

• while方式获取页面中全部的checkbox

var domList = document.getElementsByTagName(‘input’);
var checkBoxList = [];//返回的全部的checkbox
var len = domList.length;　　//缓存到局部变量
while (len--) {　　
　　if (domList[len].type === ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
};

---

• undefined会在如下三种状况下产生：
  • 一个变量定义了却没有被赋值
  • 想要获取一个对象上不存在的属性或者方法
  • 一个数组中没有被赋值的元素

---

• 将字符串提取成json格式内容

var url="http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx";
var str=url.substr(url.indexOf("?")+1);
var arr=str.split('&');
var obj={};
for (var i = 0; i < arr.length; i++) {
    var arri = arr[i];         //a=1
    var i2=arri.split("=");//["a","1"]
    obj[i2[0]]=i2[1];          //obj["a"]="1";
};

---

• 求一个字符串的字节长度

function countByts(str) {
  if(!arguments.length || !s) return null;
  if("" === s) return 0;
  var len = 0;
  for(var i = 0; i < str.length; i++) {
    if(str.charCodeAt(i) > 255) len += 2;
    else len++;
  };
  return len;
}

---

• trim函数

if (!String.prototype.trim) { 
    String.prototype.trim = function() { 
        return this.replace(/^\s+/, "").replace(/\s+$/,"");//\s匹配空白字符：回车、换行、制表符tab 空格
    } 
} 
// test the function 
var str = " \t\n test string ".trim(); 
alert(str == "test string"); // alerts "true"

---

• Javascript中callee和caller的做用？
  • arguments.callee：得到当前函数的引用;callee是返回正在被执行的function函数，也就是所指定的function对象的正文(自定义的函数 fun)。
  • caller是返回一个对函数的引用，该函数调用了当前函数;若是不是由其余函数调用的，那么返回值就是null

function fn(){
    console.log(arguments.callee==fn);      // true
    console.log(fn.caller);                 // fn2
}
function fn2(){
    fn();       //此时fn.caller就指向了fn2这个函数
}
fn2();

---

• 浏览器对象模型BOM里经常使用的至少4个对象，window对象的经常使用方法至少5个
  • 对象：window document location screen history navigator
  • 方法：alert() confirm() prompt() open() close()

---

• 查询字符串
  • window.location.search 返回值：?name=wang&id=mysql (问号后面的字符串)
  • window.location.hash 返回值：#age (锚点及以后的字符串)
  • window.location.reload() 刷新当前页面

---

• BOM对象 window对象
  • window对象，是JS的最顶层对象，其余的BOM对象都是window对象的属性；
  • document对象，文档对象；
  • location对象，浏览器当前URL信息；
  • navigator对象，浏览器自己信息；
  • screen对象，客户端屏幕信息；
  • history对象，浏览器访问历史信息；

---

• bind(), live(), delegate()的区别
  • bind： 绑定事件，对新添加的事件不起做用(不支持动态添加)，方法用于将一个处理程序附加到每一个匹配元素的事件上并返回jQuery对象。
  • live： 方法将一个事件处理程序附加到与当前选择器匹配的全部元素（包含现有的或未来添加的）的指定事件上并返回jQuery对象。
  • delegate： 方法基于一组特定的根元素将处理程序附加到匹配选择器的全部元素（现有的或未来的）的一个或多个事件上。

---

• 简述link和import的区别？
  • link是XHTML标签，除了加载CSS外，还能够定义RSS等其余事务；@import属于CSS范畴，只能加载CSS。
  • link引用CSS时，在页面载入时同时加载；@import须要页面网页彻底载入之后加载。
  • link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  • link支持使用Javascript控制DOM去改变样式；而@import不支持。

---

• 原生方式转换URL的search为json对象

var getJson = function(str) {
    var item;
    var result = [];
    // 只有一个键值对
    if(search.indexOf("&") < 0) {
        item = str.splite('=');
        result[item[0]] = item[1];
    }
    // 多个键值对，以&符分开
    else{
    var splitArr = str.split('&');
        for(var i = 0; i < splitArr.length; i++){
            item = splitArr[i].split('=');
            result[item[0]] = item[1];      
        };
    }
    return result;
}

---

• readyonly和disable的区别
  • readonly只针对input(text / password)和textarea有效，
  • 而disabled对于全部的表单元素都有效，当表单元素在使用了disabled后，当咱们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去

---

• ajax的工做原理
  • Ajax经过XMLHttpRequest对象来向服务器发起异步请求，从服务器获取数据，而后用JavaScript来操做DOM元素而更新页面，也就是JavaScript能够及时向服务器提出请求和处理相应，而不阻塞后续代码的执行，达到无刷新页面就能够请求的效果。XMLHttpRequest是Ajax的核心机制。
  • ajax是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是容许一个互联网浏览器向一个远程页面/服务作异步的http调用，而且用接收的数据来局部更新当前页面
  • ajax交互模型：
    • 同步：脚本会停留并等待服务器响应而后继续

    • 异步：脚本容许页面继续其进程并处理可能的回复

• 同步ajax有什么影响

---

• 异步加载js的方案
  • defer：只支持ie
  • async：
  • 动态加载script标签，加载完了回调

  /* 异步加载script方案 */
  
  function loadSctipt (url,callback) {
    var script = document.createElement('script');
    script.type = "text/Javascript";
    if(script.readyState) {   // 兼容IE浏览器
      script.onreadystatechange = function () {
        if(script.readyState === 'loaded' || script.readyState === 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {    // 其余浏览器
      script.onload = function() {
        callback();
      };
    }
    script.src = url;
    document.body.appendChild(script);
  };

---

• ajax请求(请求和响应)
  • 1.请求行:   xhr.open('get','index.php'); (get能够不设置)
  • 2.请求头:   xhr.setRequestHeader('ContentType',text/html); ===>告诉浏览器以何种方式解析
  • 3.请求主体:   xhr.send(null);
  • 1.获取行状态(包括状态码&状态信息):   xhr.status & xhr.statusText
  • 2.获取响应头
    • 获取指定头信息:   xhr.getRequestHeader('Content-Type');
    • 获取全部响应头信息:   xhr.getAllRequestHeaders();
  • 3.响应主体:   xhr.responseText; || xhr.responseXML;

// 建立一个xhr实例
var xhr = new XMLHttpRequest();
// 发起http请求
xhr.open('get','index.php');
xhr.send(null);
// 接收服务器响应
xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
    // 接收到结果
    var result = xhr.responseText;
  }
};

• javascript的同源策略[^2]
  • 协议：http,ftp https
  • 主机名；localhost 127.0.0.1
  • 端口名：80:
  • http协议的默认端口：80
  • https:协议的默认端口是8083
  • 同源策略带来的麻烦：ajax在不一样域名下的请求没法实现;若是说想要请求其余来源的js文件，或者json数据，那么能够经过jsonp来解决
    [^2]:一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

---

• 跨域解决方案
  • 顶级域名相同的能够经过domain.name来解决,即同时设置domain.name = 顶级域名
  • document.domain + iframe
  • window.name + iframe
  • location.hash + iframe
  • window.postMessage()
    参考资料:(http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html)
  • JSONP　---- JSON with Padding(只能以GET方式请求)
    • 原理:其本质是利用了<script src=""></script>标签具备可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，而且将服务器数据以该函数参数的形式传递过来，此方法须要先后端配合完成。

---

• jsonp跨区解决
  • img等标签:支持数据发送，不能拿到服务端数据
  • link标签:link[ref="stylesheet"]
  • script:

  var script = document.createElement('script');
  script.src = 'http://localhost:3000/?start=1&count=10';  // 服务端地址
  document.body.appendChild(script); // 发送请求
  /* 因为脚本执行完成事后才能拿到数据 */
  // 1.
  script.addEventListener('load',function(){
    result = data;
  });
  // 2.被动的方式
  function callback(data) {
    result = data;
  };

---

• HTTP状态消息
  • 200：请求已成功，请求所但愿的响应头或数据体将随此响应返回。
  • 302：请求的资源临时从不一样的 URI响应请求。因为这样的重定向是临时的，客户端应当继续向原有地址发送之后的请求。只有在Cache-Control或Expires中进行了指定的状况下，这个响应才是可缓存的
  • 304：若是客户端发送了一个带条件的 GET 请求且该请求已被容许，而文档的内容（自上次访问以来或者根据请求的条件）并无改变，则服务器应当返回这个状态码。304响应禁止包含消息体，所以始终以消息头后的第一个空行结尾。
  • 403：服务器已经理解请求，可是拒绝执行它。
  • 404：请求失败，请求所但愿获得的资源未被在服务器上发现。
  • 500：服务器遇到了一个不曾预料的情况，致使了它没法完成对请求的处理。通常来讲，这个问题都会在服务器端的源代码出现错误时出现。

---

• js数组类型中的经常使用方法

方法	描述
concat()	链接两个或更多的数组，并返回结果。
join()	把数组的全部元素放入一个字符串。元素经过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
shift()	删除并返回数组的第一个元素
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
slice()	从某个已有的数组返回选定的元素
reverse()	颠倒数组中元素的顺序。
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
valueOf()	返回数组对象的原始值

---

• Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象

---

• 运算符赶上未定义的变量
  • 若是其中一个数是NaN，则结果就是NaN
  • 若是乘积超过了ECMAScript设定的范围，那么就会返回Infinity、-Infinity
  • 若是参与乘法运算的某个操做数不是数值，js引擎会先调用Number()将这个数变成一个数值类型，

---

• POST请求使用的情形
  • 没法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

---

• 严格模式
  • 全局变量显式声明；静态绑定；禁止使用with语句；eval中定义的变量都是局部变量
  • 禁止this关键字指向全局对象；禁止在函数内部遍历调用栈 arguments.callee
  • 严格模式下没法删除变量。只有configurable设置为true的对象属性，才能被删除
  • 正常模式下，对一个对象的只读属性进行赋值，不会报错，只会默默地失败。严格模式下，将报错。
  • 严格模式下，对一个使用getter方法读取的属性进行赋值，会报错。
  • 严格模式下，对禁止扩展的对象添加新属性，会报错。
  • 严格模式下，删除一个不可删除的属性，会报错。
  • 正常模式下，若是对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。
  • 正常模式下，若是函数有多个重名的参数，能够用arguments[i]读取。严格模式下，这属于语法错误。
  • 正常模式下，整数的第一位若是是0，表示这是八进制数，好比0100等于十进制的64。严格模式禁止这种表示法，整数第一位为0，将报错。
  • 不容许对arguments赋值
  • arguments再也不追踪参数的变化
  • 严格模式只容许在全局做用域或函数做用域的顶层声明函数。也就是说，不容许在非函数的代码块内声明函数；if else while for 没法声明函数
  • 严格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。

---

• new 操做符的做用
  • 一、建立一个空对象，而且 this变量引用该对象，同时还继承了该函数的原型。
  • 二、属性和方法被加入到 this 引用的对象中。
  • 三、新建立的对象由 this 所引用，而且最后隐式的返回 this 。

---

• 模块化开发
  • 模块化开发模式：浏览器端requirejs，seajs；服务器端node.js；ES6模块化；fis、webpack等前端总体模块化解决方案；grunt、gulp等前端工做流的使用

---

• 何检测一个变量是一个String类型
  • typeof str
  • str.constructor
  • toString.call()

---

• 渐进加强和优雅降级之间的不一样
  • 优雅降级: (graceful degradation，一开始就构建站点的完整功能，而后针对浏览器测试和修复)
  • 渐进加强: (progressive enhancement，一开始只构建站点的最少特性，而后不断针对各浏览器追加功能)
  • “优雅降级”和“渐进加强”都关注于同一网站在不一样设备里不一样浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及这种关注如何影响工做的流程。

---

• 什么是FOUC？你如何来避免FOUC？
  • 因为css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html以后致使页面闪烁、花屏,用link加载css文件，放在head标签里面

---

• 前端页面的构成
  • html结构层：为页面搭建框架
  • css样式层：修饰页面
  • js交互层：利用脚本代码为页面增长动态效果与交互

---

• HTML5新添加的标签
  • 音频、视频、拖放、画布、SVG、地理定位、应用缓存、表单元素

<!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> 
<basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite>
 <code> <col> <colgroup> <command> <datalist> <dd> <del> <details> <dfn> <dir> <div> <dl> <dt> 
 <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6>
  <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <keygen> <kbd> <label> 
  <legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> 
  <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> 
  <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table> 
  <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> 
  <ul> <var> <video> <wbr>

---

• position的值
  • absolute:相对于自身原来的位子定位
  • reletive:相对于有定位的父级或以上的盒子定位
  • fixed:相对于body定位

---

• div横向排列的方法
  • 浮动
    • 前面的左浮动，最后的用overflow：hidden
    • 所有左浮动
  • 定位
  • display：inline-block；(可是很差，中间仍是有边隙)

---

• 数据传输类型：GET | | POST
  • 从计算机数据类型传输（即信号传输）的话，分红CRC循环冗余码传输，差错校验等
  • 文件数据类型传输，大多数都是二进制的形式
  • js与后台交互的传输数据类型通常用字符串，数组，但更可能是json来传输数据

---

• 面向对象模式：
  • 就是面向对象编程：
    • 三大做用(封装性、面向对象编程、描述数据)
    • 三大特性（多态、继承、封装）
      1. 封装
      2. 继承:基于原型链的继承(其余都是经过类的形式继承)==>即拿来主义(1.原型式继承;2.组合式继承)

      // 1.组合式继承
      var o = {num : 123};
      var obj = {age : 18};
      for (var k in o) {
        obj[k] = o[k]
      };
      
      //应用
      Object.prototype.extend = function(obj) {
        for(var k in obj) {
          this[k] = obj[k];
        }
      }
      
      // 2.原型继承(不提倡，由于太慢)
      经过修改原型对象来实现继承
      多继承很难维护，提倡单继承

      1. 多态:用设计模式来模拟实现多态;js中由于他的动态特性，自己就支持
    • 原型链
  • 面向对象是对面向过程的封装(咱们仍然作的是面向过程)
  • 对象的本质就是键值对的集合，值类型称之为属性，函数称之为方法
  • 把复杂的东西打包(方便维护，方便代码模块化，错误调试等);在开发大型项目的时候维护的时间会比开发的时候还大
  • 面向过程是用函数来封装的；

---

• 面向对象建立模式：
  • 单例模式
  • 工厂模式
  • 寄生模式
  • 观察者模式

---

• 原型链
  • 对象：foo、obj、Object.prototype（其他为函数对象）
  • 实例对象的 __proto__ 指向相对应的函数原型对象(.prototype)
  • 函数对象
    • __proto__ => Function.prototype
    • prototype => 相应的原型对象
  • 原型对象
    • Foo.prototype.__proto__ => Function.prototype
    • Function.prototype => Object.prototype
    • Object.prototype => null
    • constructor => 各自的构造函数

实例对象	构造函数	原型对象
基于构造函数实例化的对象	自定义构造函数	自定义构造函数原型对象
foo	Foo	Foo.prototype
__proto__	__proto__	__proto__
	prototype	constructor
	内置 函数对象	内置 函数原型对象
	Function	Function.prototype
	__proto__	__proto__
	prototype	constructor
基于Object实例化的对象	内置 对象	内置 对象原型对象
obj	Object	Object.prototype
__proto__	__proto__	__proto__
	prototype	constructor

---

• 代码的优化
  • 代码的重用
  • 对内：模块化；对外：继承
  • 避免全局变量（命名空间，闭包，模块化MVC（数据层、表现层、控制层））
  • 拆分函数，避免函数的臃肿

---

• 闭包
  • 块级做用域:js执行
  • 边解释边执行。脚本语言的特性。在执行的时候预解析已经完了，就提高了变量
  • 定义的变量被函数包裹着，被外界没法访问，就是闭包
  • 在js中闭包要解决的就是如何访问(沙箱模式:把须要的变量挂在到window暴露出去)
  • 无限递归的时候内存不够；由于每次调用都会生成一个新的变量；用闭包解决，将须要的值用函数包裹，只调用一次外界并接收，以后只调用内部函数；缺点:每次只能返回一个值；所以咱们让返回值变成对象，打包将咱们要的值用对象的形式所有返回(比返回数组有优点)
  • 如何解决上述只读的方式，如何写？

  set_key: function(params){
    key = params;
  }

  • 沙箱是一个经典的应用场景
  • 使用闭包完成一些功能的时候能够隐藏一些数据的特性(createCache函数)

---

• **_display:inline解决ie的双边距问题**

---

• 览器的内核
  • IE: trident内核
  • Firefox：gecko内核
  • Safari:webkit内核
  • Opera:之前是presto内核，Opera现已改用Google Chrome的Blink内核
  • Chrome:Blink(基于webkit，Google与Opera Software共同开发)

---

• 利用多个域名来存储网站资源会更有效
  • CDN缓存更方便
  • 突破浏览器并发限制
  • 节约cookie带宽
  • 节约主域名的链接数，优化页面响应速度
  • 防止没必要要的安全问题

---

• 对网页标准和标准制定机构重要性的理解
  • 网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，下降开发难度，开发成本，SEO也会更好作，也不会由于滥用代码致使各类BUG、安全问题，最终提升网站易用性。

---

• cookies，sessionStorage和localStorage的区别
  • sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。
  • Web Storage的概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还须要指定做用域，不能够跨域调用。
  • 除此以外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。可是Cookie也是不能够或缺的：Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

---

• src与href的区别
  • src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
  • src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
  • 当浏览器解析到该元素时，会暂停其余资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，相似于将所指向资源嵌入当前标签内。这也是为何将js脚本放在底部而不是头部。
  • href是Hypertext Reference的缩写，指向网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接，

---

• px和em的区别
  • px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，而且em会继承父级元素的字体大小
  • 浏览器的默认字体高都是16px。因此未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

---

• BFC
  • BFC（块级格式化上下文），一个建立了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题
  • BFC是指浏览器中建立了一个独立的渲染区域，该区域内全部元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起做用

---

• Doctype的做用？严格模式与混杂模式的区别
  • <!DOCTYPE>用于告知浏览器该以何种模式来渲染文档
  • 严格模式下：页面排版及JS解析是以该浏览器支持的最高标准来执行
  • 混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

---

• window.top.document.compatMode查看当前模式

---

• 清除浮动的方式
  • 给父盒子一个高度
  • 在父盒子的下面添加一个一样高度的盒子
  • 在父盒子的下面添加一个没有高度的盒子,并加样式clear:both;
  • 添加一个overflow:hidden;的样式
    • 只 父盒子 添加:上下margin会合并(大的有效:100+20=100)
    • 父盒子 及 中间没有高度的盒子添加:上下margin所有生效(100+20=120)
    • 只给下面的盒子添加该属性: margin不生效;同时该法能够作向右填充的效果
  • 添加一个clearfix的类:伪元素法;

  .clearfix::before,
  .clearfix::after{
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
  }

---

• 让盒子居中的方式
  • 图片居中:
    • 1)父盒子display:table;2)子盒子display:table-cell;vertical-align:middle;
    • 2)图片下加一个行内块级元素(span),设置属性:img{vertical-align;} span{height:100%;display:inline-block;vertical-align: middle;}
  • 盒子居中:
    • 定位:--> 50% --> 负向移动小盒子的50%;

    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    <!-- margin:-100px, 0, 0,-100px; --> <!-- 子盒子大小的一半 -->

---

• 手机端实现0.5px

border: 1px solid red;
transform: scale(0.5) translate(-50%,-50%);

---

• 伪类最经常使用于哪里(::before,::after{content:'';display:block;})

---

• 伪元素最经常使用于哪里(:empty、:target)
  • 样式的控制

---

• 匿名函数常加一个名
  • 方便递归调用
  • 方便在错误信息里面能够看到哪里报错(匿名函数只报行号)

---

• 如何获取一给函数的形参列表

function foo(id,name,age,gender) {

};
var arr = /.+\((.*)\)/.exec(foo.toString);
var newArr = arr[1].split(',');
// newArr里存的是形参的字符
// console对象的时候默认将其打印成tostring的形式

---

• 接口化开发

请求地址即所谓的接口，一般咱们所说的接口化开发，实际上是指一个接口对应一个功能，而且严格约束了请求参数和响应结果的格式，这样先后端在开发过程当中，能够减小没必要要的讨论，从而并行开发，能够极大的提高开发效率，另一个好处，当网站进行改版后，服务端接口只须要进行微调。

---

• 遍历数组
  • every要求每个元素都知足条件
  • some要求某个元素知足条件
    return arr.some(i => i>5) // 条件为真时候返回
  • each
  • forEach
  • 不能在循环中删除或新增数组元素

  // 定义一个空数组
  var newArr = [];
  arr.forEach(i => {
    if(arr[i] !== m){
      newArr.push(arr[i]);
    }
  })

---

• 后台传输的XML和JSON有什么区别？如何解析及优缺点
  • XML使用DTD(document type definition)文档类型定义来组织数据，
    • 优势:格式统一，符合标准；容易与其余系统进行远程交互，数据共享方便
    • 缺点:文件庞大，格式复杂；解析繁琐，不易维护；客户端服务器解析方式不一致
  • JSON轻量级数据交互(javascript object notation)

---

• FF下实现outerHTML

function getOuterHtml(id) {
  var ele = document.getElementById(id);
  var newNode = document.createChild('div');
  document.appendChild(newNode);
  var clone = ele.cloneNode(true);
  newNode.appendChild(clone);
  return newNode.innerHTML;
}

---

• 多浏览器检测经过什么
  • navigator.userAgent //"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.75 Safari/537.36"
  • 不一样浏览器的特性 // addEventListener();

---

• Flash和ajax各自优缺点
  • ajax: 可搜索性；开放性；费用；易用性；易于开发
  • flash: 多媒体处理；兼容性；矢量图形比SVG，canvas优点好；客户资源调度好(麦克，摄像头)

---

• promise与异步回调的方法
  • 必须按照接口规定的严格的方法编写处理代码。也就是说在(then或catch)之外的方法都不可使用。不像回调函数能够自由定义回调的参数。这样能够将复杂的异步处理轻松的模块化。

---

• 怎么注入事件

---

• node的执行机制

---

• 事件代理机制

---

• 不建议给js写扩展方法的缘由

---

• ---

---

• ---

---

• ---

---

• ES5新特性

console.log(Array.prototype);     // Array[0]
console.log(String.prototype);    // String
console.log(Object.prototype)     // Object
console.log(Function)  // none   function Function() { [native code] }
console.log(Number.prototype)     // Number
dom.getElementsByTagName()        // HTMLCollection[3]
dom.querySelectorAll()            // NodeList[3]

var form = document.forms[0];
console.log(form.elements);

/* HTMLFormControlsCollection[2]
    0:input
    1:input
    length:2
    password:input
    username:input
    __proto__:HTMLCollection */