一、以下 jQuery 方法有什么作用？如何使用？给出范例

.append()
.prepend()
.before()
.after()
.remove()
.empty()
.html()
.text()

demo

二、$node.text()和$node.html()有什么区别？

$node.text()只是会将里面的内容都显示出来。
$node.html()若里面有标签则会将其先经行解析之后再显示出来。但有可能会引入xss攻击，若有人页面放入一个script，容易形成漏洞。而text就不会这种问题，可创建一个节点，若是恶数据，只会展示而不会运行。

$('.container1').html('<h1>我是标题</h1>')
$('.container2').text('<h1>我不是是标题</h1>')

三、介绍以下 jQuery 函数的用法，给出范例

.val()
.attr()
.removeAttr()
.prop()
.css()
.addClass()
.removeClass()
.hasClass()
.toggleClass()

demo

四、jQuery 对象和原生 Dom 对象有什么区别？如何相互转换？

是两种不同的对象类型，并且两者的方法不能混用。
jQuery是类数组对象，并不是数组

• this是原生Dom对象，若要用到this则要加入$(this)
• 当判断一个对象存不存在时，会有区别：
  • jQuery仍然会显示出一个对象，可以通过.length是不是0来判断是否存在这个对象。
  • 而原生DOM对象会输出null，来表示不存在。

相互转换

• jQuery对象转换成原生Dom对象：可以在$()的后面加入[index]中括号加数字，来获得其中的相应的原生DOM对象，如
  $('#p1')[0]
• 原生Dom对象转换成jQuery对象：可以在原生DOM对象的外面加$()来获得相应的jQuery对象，如
  $(document.querySelector('#p1'))

五、介绍以下 jQuery 方法的用法，给出范例

.each()
$.extend()
.clone()
.index()
.ready()

$(document).ready(function(){
    //放在开头时，所要执行的代码会等到元素加载完之后才执行。
})

demo

六、window.onload和$(document).ready有什么区别？document.onDOMContentLoaded呢?

执行时间不同

• 当window.onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。
• $(document).ready()时DOM结构绘制完毕后就执行，不必等到加载完毕。
• document.onDOMContentLoaded等html文档被完全加载和解析时触发，而不等待样式表和图像等的加载。

编写个数不同

• window.onload不能同时编写多个，如果有多个则只能执行一个。
• $(document).ready()可以执行多个

七、实现如下效果，点击 icon 后会切换播放和暂停两种状态

demo

#1. 如何异步加载脚本？
用defer或者async

• defer是有顺序的，等文档读取和解析完成之后，再开始解析脚本。

• async是不保证顺序的，读取和解析文档的过程会和解析脚本的过程同时进行。

#2. ES3、ES5、ES6分别指什么？

• 国际标准化组织ECMA（European Computer Manufacturers Association）规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。ES3 就是1999年12月发布的ECMAScript 3.0版，成为JavaScript的通行标准，得到了广泛支持。

• 2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
  2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发（即废除了这个版本），将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1就改名为ECMAScript 5就是 ES5。

• Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6也就是ES6

#3. 解释浏览器的渲染机制
首先先解析HTML中的内容创建一个DOM树，再解析CSS的样式成一个树的形状。
把上述两个树结合起来就得到一个对象，不单有元素还有他的具体位置和关系。这就是渲染树。
然后开始布局计算出每个节点的位置，将每个节点绘制到页面上。

#4. repaint 和 reflow 分别指什么

• reflow当某一处的位置发生变化时，其他地方的位置都需要重新的计算位置并布局。需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置。

• reflow一般都会有repaint，当某元素的尺寸和位置发生变化时，会带动着使其他元素都需要重新绘制repaint。
  但当只需要改变某个元素颜色等就只需要单独重绘。
  浏览器将各自元素的特性都绘制一遍就是repaint

#5. 解释白屏和 FOUC。

• 白屏：就是在加载一个网页时，屏幕是白色的，之后全部样式才呈现。 如果把样式放在文档底部,浏览器会等HTML和CSS完全加载完成之后再绘制到屏幕上去，譬如我们打开某些国外的网站可能出现加载时间过长，页面会出现白屏,而不是内容逐步展现。
  使用 @import 标签，即使 CSS 放入 link, 并且放在头部,也可能出现白屏。

对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。 但在加载 JavaScript 时，会禁用并发，并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.

• FOUC： 就是当加载一个网页时，首先会出现一些内容但是样式并没有完全加载好，过一段时间后样式才发生变换。或者样式时一个个加载并呈现的。
  如果把样式放在底部,对于FireFox浏览器，会逐步加载无样式的内容，等CSS加载完成之后突然展现样式。
         这是由于FireFox的渲染逻辑是解析HTML就会直接画到页面上，这时你会看到没有样式的内容，CSS再通过不断的解析将页面重绘一遍，也就是闪烁一下突然展现样式，这就是FOUC。

#一、如下代码输出多少？如果想输出3，那如何改造代码？

var fnArr = [];
for (var i = 0; i < 10; i ++) {
  fnArr[i] =  function(){
    return i
  };
}
console.log( fnArr[3]() ) 

10

//方法一
var fnArr = []
for(var i = 0; i < 10; i++){
	fnArr[i] = (function(j){
      return function(){
        return j
      }
    })(i)
}
console.log( fnArr[3]() )
//方法二
var fnArr = []
for(var i = 0; i < 10; i++){
  (function(i){
    fnArr[i] = function(){
      return i
    }
  })(i)   
}
console.log( fnArr[3]() )
//方法三
var fnArr = [];
for (let i = 0; i < 10; i ++) {
  fnArr[i] =  function(){
    return i
  };
}
console.log( fnArr[3]() )

#二、封装一个 Car 对象。

var Car = (function(){
   var speed = 0;
   function setSpeed(s){
     speed = s
   }
   function get(){
     return speed
   }
  function speedUp(){
    return speed++
  }
  function speedDown(){
    return speed--
  }
   return {
      setSpeed: setSpeed,
      get: get,
      speedUp: speedUp,
      speedDown: speedDown
   }
})()
Car.setSpeed(30)
console.log(Car.get()) //30
Car.speedUp()
console.log(Car.get()) //31
Car.speedDown()
console.log(Car.get())  //30

#三、如下代码输出多少？如何连续输出 0,1,2,3,4？

for(var i=0; i<5; i++){
  setTimeout(function(){
    console.log('delayer:' + i )
  }, 0)
}

//方法一
for(var i=0; i<5; i++){
  (function(j){
    setTimeout(function(){
    console.log('delayer:' + j )
    }, 0)
  })(i)
}
//方法二
for(var i=0; i<5; i++){
  setTimeout((function(j){
    return function(){
    console.log('delayer:' + j )
    }
  })(i),0)
}

#四、如下代码输出多少？

function makeCounter() {
  var count = 0

  return function() {
    return count++
  };
}

var counter = makeCounter()
var counter2 = makeCounter();

console.log( counter() ) // 0
console.log( counter() ) // 1

console.log( counter2() ) // ?
console.log( counter2() ) // ?

0
1
0
1

有两个不同的作用域，对象是不一样的
#五、补全代码，实现数组按姓名、年纪、任意字段排序。

var users = [
  { name: "John", age: 20, company: "Baidu" },
  { name: "Pete", age: 18, company: "Alibaba" },
  { name: "Ann", age: 19, company: "Tecent" }
]

users.sort(byField('age'))
users.sort(byField('company'))

var users = [
  { name: "John", age: 20, company: "Baidu" },
  { name: "Pete", age: 18, company: "Alibaba" },
  { name: "Ann", age: 19, company: "Tecent" }
]
function byField(field){
  return function(a, b){
    return a[field] > b[field]
  }
}
users.sort(byField('company'))
users.sort(byField('age'))

#六、写一个 sum 函数，实现如下调用方式。

console.log( sum(1)(2) ) // 3
console.log( sum(5)(-1) ) // 4

function sum(a){
    return fuction(b){
        return a + b
    }
}

一，输入URL（统一资源定位符）

• 输入baidu.com

二， 域名解析

• 浏览器缓存——浏览器有百度DNS则会缓存DNS，若没有转至下面。
• 系统缓存——从Host文件中查找对应的百度域名和IP，若没有转至下面。
• 路由器缓存——路由器也会缓存部分DNS，查找是否有百度域名和IP。
• ISP DNS 缓存——例如电信的DNS缓存。
• 以上都没有的情况则向根域名服务器查域名对应IP，根域名服务器将请求转至下一级，直至找到IP。

（DNS 劫持：指的是给了一个假IP但域名却是一样的。）

三，服务器处理

服务器指的是安装系统的机器。web服务器接受用户的请求，并交给网站代码。

四，网站处理

• 模型（model）——视图（view）——控制器（control）
  

五，浏览器处理

HTML字符串被浏览器接受后被一句句读取解析：

• 解析到link 标签后重新发送请求获取css
• 解析到 script标签后发送请求获取 js，并执行代码
• 解析到img 标签后发送请求获取图片资源

六，绘制网页

• 浏览器根据 HTML 和 CSS 计算得到渲染树，绘制到屏幕上js 会被执行

#一、jquery 如何绑定事件？直接绑定和使用事件代理分别如何使用

.on( events [,selector ] [,data ], handler(eventObject) )直接绑定和使用事件代理绑定

1. events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click"。
2. selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
3. data：当一个事件被触发时，要传递给事件处理函数的event.data
4. handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false

直接绑定和使用事件代理分别如何使用

demo

#二、jQuery 如下函数如何使用？演示使用方式
demo
#三、介绍一些函数的用法，给出范例
$.ajax
$.get
$.getJSON
###$.ajax

$.ajax ({
  url: 'http://xxx',//请求的一个接口
  type: 'GET',
  data: {
    username: 'xujinjun',
    password:　'xu123456'
  },
  dataType:　'json'//请求从服务器加载JSON编码的数据
}).done(function(){
  //数据请求成功后执行的操作
}).fail(function(){
  //数据请求失败后执行的操作
}).always(function(){
  //无论成功与否所执行的操作
})

这样就发送了一个GET请求
还有一个更简单的发送GET请求的方式就是$.get
###$.get

$.get('http://api.jirengu.com/weather.php').done(function(ret){
console.log(ret)
})

###$.getJSON

$.getJSON('http://api.jirengu.com/weather.php',function(ret){
console.log(ret)
})

let

let声明的变量只在它所在的代码块中有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined

如果把let换成var，则会出现下面情况：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

因为i是由var所声明的，全局里面只有一个i，所以每次i发生改变就内部的console.log(i)也会发生改变

如果改用let的，则不会出现上面情况

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

i是由let声明的所以只会在本轮循环中有效。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

暂时性死区

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

因此，不能在函数内部重新声明参数。

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

const

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。
const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

#总结
let：

1. 作用域只在最近的{}之间
2. 若let a之前使用a，就会报错
3. 若重复let a ，那么报错

const：
1.2.3 同上
4.只有一次赋值的机会，并且必须在声明的时候立马赋值

1. post 和 get 方式提交数据有什么区别？

• GET - 从指定的资源请求数据。会在URL上显示参数，不安全。传输的参数有长度限制。
• POST - 向指定的资源提交要被处理的数据。不会URL上显示参数。传输的参数没有长度限制。

2. 在input里，name 有什么作用？

name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

3. radio如何分组

表单中的单选框radio，name相同的是一组，比如以下代码：

<form>
    <input type="radio" name="sex" value="male"> 男 <br>
    <input type="radio" name="sex" value="female"> 女<br>
    <input type="radio" name="age" value="adult"> 已成年<br>
    <input type="radio" name="age" value="child"> 未成年
  </form>

4.placeholder 属性有什么作用？

• 提供可描述输入字段预期值的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
• 也就是说能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。

#5. CSRF 攻击是什么？如何防范？
一、跨站请求伪造。攻击者盗用了你的身份，以你的名义发送恶意请求。CRSF能做的事情包括利用你的身份发邮件，发短信，进行交易转账，甚至盗取账号信息。
二、

1. 验证 HTTP Referer 字段
   HTTP头中的Referer字段记录了该 HTTP 请求的来源地址。在通常情况下，访问一个安全受限页面的请求来自于同一个网站，而如果黑客要对其实施 CSRF攻击，他一般只能在他自己的网站构造请求。因此，可以通过验证Referer值来防御CSRF 攻击。
2. 验证码。
   通常情况下，验证码能够很好的遏制CSRF攻击。
3. token
   可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有token或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。
   在POST 上，要在 form 的最后加上 ，这样就把token以参数的形式加入请求了。

6. type=hidden隐藏域有什么作用? 举例说明

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

1. 后端接收前端传来的数据，需要确认前端的身份，是本公司的网页传来的数据，而不是其他黑客知道后端地址后传来的假数据。那么就加一个隐藏域，验证value里的值和数据库里name的值是不是对应的。

2. 有时候一个表单里有多个提交按钮，后端怎么知道用户是点击哪个按钮提交过来的呢？这时候我们只要加隐藏域，对每一个按钮起个名字(value值)，后端接收到数据后，检查value值，就能知道是哪个按钮提交的了。

3. 有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。

7. label 有什么作用？如何使用？

标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

Label标识有两个属性，一个是for，一个是 accesskey。

for属性：
功能：表示这个Lable是为哪个控件服务的，Label标签要绑定了FOR指定HTML元素的ID或name属性，你点击这个标签的时候，所绑定的元素将获取焦点。
用法：姓名
accesskey属性：
功能：定义了访问这个控件的热键。
用法：<label for="InputBox" accesskey＝"N">姓名
局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

8. 以下input有何作用？

<input type="submit" value="提交">  

具有提交表单的功能

引入

var fs = require('fs')

require 的方式来引入组件和自己写的文件

var strApi = require('./stringApi')

stringApi.js中要用到exports方式才可以被引入

function replaceDigit(str) {
  return str.replace(/\d/gm, '')
}
module.exports.replaceDigit = replaceDigit

node中有很多api

fs.readFile('file.txt', 'utf8', function (err, str) {
  if(err) {
    console.log('error...');  
  }else {
    var strAfter = strApi.replaceDigit(str)
    console.log(strAfter)

    fs.writeFile('fileAfter.txt', strAfter, function (err) {
      if(err) throw err;
      console.log('asdfjag')
    })
  }
})

比如readFile writeFile等

1. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明。

i. BFC 即 Box Formatting Context，每个渲染区域用formatting context表示，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
块级格式化上下文，创建了BFC的元素就是一个独立的盒子，盒子里布局不受外部影响，也不影响外部元素的布局。

ii. 1.根元素
2.float的属性不为none
3.position为absolute或fixed
3.display为inline-block，flex或者inline-flex
4.overflow不为visible

iii. 1.解决外边距合并问题。http://js.jirengu.com/maseneyava/1/edit
2.清理浮动。http://js.jirengu.com/cofevimoce/1/edit?html,css,output

2. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？

一，1,相邻元素合并。2.父子合并。3.自己合并。

二， 当两个外边距都是正数时，取两者之中的较大者；当两个外边距都是负数时，取两者之间绝对值较大者；当两个外边距一正一负时，取的是两者的和。

三，1.设置浮动元素float，但添加了浮动的特性，位置发生变化。
2.最好是不要管合并的问题，都统一用magin-top等。

3. 什么是 CSS hack？在哪个网站查看标签(属性)的浏览器兼容情况。

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。

实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

https://caniuse.com/

4. 渐进增强和优雅降级分别是什么意思？

• 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

• 优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

5.以下工具/名词是做什么的？

• 条件注释：(conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。

• IE Hack：主要是针对ie浏览器不同版本的特性，编写适应兼容不同ie浏览器的代码方案

• js 能力检测：测检测浏览器是否支持某种特定的能力，然后给出特定的解决方案。

• html5shiv.js：用于解决ie低版本浏览器对HTML5新增标签不识别导致CSS不起作用的脚本。

• respond.js：模拟css3的媒体查询，主要是解决ie低版本浏览器不支持媒体查询，解决低版本浏览器的响应式问题

• css reset：CSS Reset用来清除所有浏览器默认样式，这样更易于保持各浏览器渲染的一致性。

• normalize.css：对normalize.css进行引用，可以让不同浏览器在渲染的时候样式更加统一，为浏览器的渲染方式提供了高度一致性。
  Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

• Modernizr：Modernizr是一个检测用户浏览器HTML5和CSS3能力的JavaScript库。Modernizr在页面加载时快速运行来检测功能，然后创建一个保存检测结果的JavaScript对象，接着页面中的html标签上添加一系列class属性来接通你的CSS。

• postCSS：一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。PostCSS使CSS变成JavaScript的数据，使它变成可操作。PostCSS是基于JavaScript插件，然后执行代码操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。

字符串模板

传统的JavaScript的输出模板是

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

ES6引入了模板字符串来解决这个问题

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

用反引号（`）来标识

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串，会保留所有的空格和缩进
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量，需要将变量名写在${}之中
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

//模板字符串之中还能调用函数。
function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

什么是算法

• 输入： 一个算法必须有 0 个或以上的输入量
• 输出： 。。。有 1 个或。。。输出量，是算法计算的结果
• 明确性： 算法的描述是无歧义的，来保证结果匹配要求。
• 有限性： 在有限个步骤内完成
• 有效性： 能够实现

什么是数据结构

数据的结构

1. 有一个要解决的问题
2. 分析这个问题，想出对应的数据结构
3. 分析数据结构，想出算法

大分类

• 分治法： 把一个问题区分成多个部分求解
• 动态规划法： 问题的整体最优解就是由局部最优解组成
• 贪婪算法： 近似求解（可能不是最优解，看起来最容易取得的）
• 线性规划法
• 简并法

排序算法

1. 体育委员两两对比法（冒泡排序）
   • 每次摸两人头，高的往右，低的往前，n*（n-1）*（n-2）...

a = {
  '0': 4,
  '1': 6,
  '2': 3,
  '3': 2,
  '4': 1,
  'length': 5
}
轮数 = 1
index


while (轮数 < a['length']) {
  index = 0
  while (index <= a['length'] - 1 - 轮数) {
    if (a[index] < a[index+1]) {
      // 什么也不做
    }else{
      // 交换左右的位置
      t = a[index]
      a[index] = a[index+1]
      a[index+1] = t
    }
    index += 1
  }
}

//////
轮数  index的下标最大值（从0开始）
1       3
2       2
3       1
4       0

2. 体育老师一指禅（选择排序）
   • 每次选出队伍里面最矮的人和第一个换位置n*（n-1）*（n-2）...
3. 起扑克牌法（插入排序）（先在里面开一个空数组）
   • 1+2+...+n 的排序方法，第一次和一张做对比，第二次和两张牌做对比
4. 强迫症收扑克牌法（计数排序）
   • 最快，放到相应的位置，缺点需要相应的空间，若有 13 个种类则要 13 个空间
5. 快排
   • 随便找一个人，比他高的排后面，比他低的排前面。
   • 再以基准的左边或者右边又选一个基准在来排序，分到每堆只剩一个人就完成了
6. 归并排序
7. 堆排序

一、

v-model 其实只是一个语法糖，因为

<input v-model="searchText">
等价于

<input
  v-bind:__A__="searchText"
  v-on:__B____="searchText = _____C______"

请问 A B C 三个空应该分别填入什么（请按照 A B C 的顺序作答，否则可能被判为不通过）
**答案：**value input $event.target.value

二、

v-model 用到自定义组件上时，跟 input 稍有不同

<custom-input v-model="searchText"></custom-input>
等价于

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = ____?_____"
></custom-input>

答案：$event

三、

四、

五、

六、

七、

一、ajax 是什么？有什么作用？

• ajax并不是一项新技术，它是2005年由jesse james garrett创造的一个术语，它描述了一种“新”方法，将多种现有技术结合在一起使用，包括html或xhtml，级联样式表，JavaScript，文档对象模型，xml，xslt，最重要的是xmlhttprequest对象。
  当这些技术结合在ajax模型中时，Web应用程序能够快速，增量更新用户界面，而无需重新加载整个浏览器页面。

• 这使应用程序更快，更响应用户操作。
  尽管ajax中的x代表xml，但json现在使用的不止是xml，因为它具有许多优点，如轻量级和JavaScript的一部分。
  json和xml都用于在ajax模型中打包信息。

• 而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。 实现在页面不刷新的情况下和服务端进行数据交互。

• ajax是一组使用客户端上的许多Web技术创建异步Web应用程序的Web开发技术。
  通过ajax，Web应用程序可以异步（在后台）发送和检索服务器中的数据，而不会干扰现有页面的显示和行为。
  通过将数据交换层与表示层分离，ajax允许网页和扩展Web应用程序动态更改内容，而无需重新加载整个页面。
  在实践中，由于json本身是javascript的优势，所以现代实现通常使用json而不是xml。html和css可以结合使用来标记和样式信息。
  然后可以通过javascript修改网页以动态显示 - 并允许用户与新信息交互。
  JavaScript内置的xmlhttprequest对象通常用于在网页上执行ajax，从而允许网站在不刷新页面的情况下将内容加载到屏幕上。
  ajax也不是一项新技术或另一种不同的语言，只是以新方式使用现有技术。

二、如何 mock 数据？

server-mock

使用 server-mock node工具启动一个能处理静态文件和动态路由的服务器

用githubpages mock数据

• 在git里面创建相应的html和json文件
  html内写

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<script>
  var xhr = new XMLHttpRequest()
  xhr.open('GET','/mock/cate.json',true)
  xhr.send()
  xhr.onload = function(){
    console.log(JSON.parse(xhr.responseText))
  }
</script>
</body>
</html>

在json文件里面写入json格式的内容就可以mock到该数据了

在线上mock数据

例如用Easy mock的网站来mock数据，可以在网站上得到一个URL

三、把GET 和 POST 类型的 ajax 的用法手写一遍，如

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		var xhr = new XMLHttpRequest()
		xhr.open('Get','/login?username=jirengu&password=123',true)
		xhr.send()

		xhr.onreadystatechange = function(){
			if(xhr.readyState === 4 && xhr.status === 200){
				console.log(xhr.responseText)
			}
		}
		//GET的使用
//status 是服务器是否正常
//readystate是交互流程是否结束
//load是readystate是4了

		xhr.addEventListener('readystatechange',function(){
			console.log('readystate:',xhr.readystate)
		})
		xhr.addEventListener('load',function()}{
			console.log(xhr.status)
			if(xhr.status >= 200  && xhr.status < 300 || xhr.status === 304){
				var data = xhr.responseText
				console.log(data)
			}else{
				console.log('error')
			}
		})
		xhr.onerror = function(){
			console.log('error')
		}

//POST 过程

		var xhr = new XMLHttpRequest()
		xhr.open('POST','/login',true)
		xhr.send('username=jirengu&password=123')

		xhr.addEventListener('load',function()}{
			console.log(xhr.status)
			if(xhr.status >= 200  && xhr.status < 300 || xhr.status === 304){
				var data = xhr.responseText
				console.log(data)
			}else{
				console.log('error')
			}
		})
		xhr.onerror = function(){
			console.log('error')
		}
	</script>
</body>
</html>

四、封装一个 ajax 函数，能实现如下方法调用

function ajax(options){
    //补全
}
ajax({
    url: 'http://api.jirengu.com/weather.php',
    data: {
        city: '北京'
    },
    onsuccess: function(ret){
        console.log(ret)
    },
    onerror: function(){
        console.log('服务器异常')
    }
})

//封装一个ajax
function ajax(opts){
	var url = opts.url
	var type = opts.type || 'GET'
	var dataType = opts.dataType || 'json'
	var onsuccess = opts.onsuccess || function(){}
	var onerror = opts.onerror || function(){}
	var data = opts.data || {}

	var dataStr = []
	for(var key in data){
		dataStr.push(key + '=' + data[key])
	}
	dataStr = dataStr.join('&')

	if(type === 'GET'){
		url += '?' + dataStr
	}

	var xhr = new XMLHttpRequest()
	xhr.open(type,url,true)
	xhr.onload = function(){
		if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
			//成功了
			if(dataType === 'json'){
				onsuccess(JSON.parse(xhr.responseText))
			}else{
				onsuccess(xhr.responseText)
			}

	} else{
		xhr.send()
		}
	}

#1. 实现一个两栏布局，右侧固定宽度200px，左侧自适应宽度，附上预览链接。
浮动布局
使用 flex 布局

#2. 实现一个三栏布局，两侧固定宽度200px，中间宽度自适应撑满，附上链接。
浮动布局
flex 布局

#3. css reset 是什么？css 预编译器是什么？ 后编译器(post css)是什么？

• CSS Reset就是之前的样式我不要，a{color: red;}，抛弃默认样式

• CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题

• PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二个就是调用插件来处理 AST 并得到结果。

npm包管理器

如何使用

1. npm install

npm install -g http-server

-g就是全局的意思 后面就是相应的包

npm init

会产生package.json

npm install --save axios
npm install --save-dev webpack

会把文件放到package.json（相关的信息和所需要安装的依赖都会放到这里，相当于种子的功能，告诉你需要下载什么）中

• --save安装的文件会放到
• --save-dev安装的会放到
  dev是测试的功能

2. npm uninstall
卸载

3. 用.gitignore中写node_modules可以使得上传git的时候不上传这个文件夹

4. package.json
   
   

5. 如果速度慢的时候

1. npm install -g xxx --registry=https: //registry.npm.taobao.org

nrm一个快速切换源版本的工具

2. npm install -g nrm
   nrm ls
   nrm use taobao
   nrm use npm

6. n stable 查看最新版本
   sudo n stable
   下载一个最新的版本

7. yarn

npm script

{
  "scripts": {
    "css:autoprefixer": "postcss -u autoprefixer -r dist/css/*",
    "css:compress": "csso in.css --output out.css",
    "js:lint": "eslint src/js",
    "js:uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js",
    "image:imagemin": "app=imagemin-cli npm run check; imagemin src/images dist/images -p",
    "server": "browser-sync start --server --files 'dist/css/*.css, dist/js/*.js'",
    "watch": "onchange 'src/js/*.js' -- npm run css:compress",
    "start": "npm run server"
  }
}

npm run css:autoprefixer
npm start

业务逻辑的处理时机

• created：异步数据适合在created阶段中调用，初始化
• mounted：挂载元素内dom节点的获取。初始数据的dom渲染完毕，可以获取到dom
• nextTick：更新数据后立即操作dom。（某个数据某一个变化就用nextTick）如果想区别不同的数据更新，同时对dom操作，使用nextTick函数处理
• updated：任何数据的更新，如果要做统一的业务逻辑处理。数据更新完毕时 如果对数据更新做统一处理就在updated钩子中处理
• watch：监听具体数据变化，并做相应的处理。对具体某个数据变化作统一处理

调用方式：

<vue-highcharts :options="options" :Highcharts="Highcharts" ref="xxxcharts"></vue-highcharts>

获得统计图

this.$refs.xxxcharts.getChart()

添加数据到统计图可以用addSeries的方式

chart.addSeries()

若有多图的情况

• 可以将相同的options部分写进basicData中，统一调用
• 不同的数据部分可以通过下面方式单独提出

export let xxxdata = {
  name: 'xxx',
  data: [],
}

如果数据有变动还可以通过

xxxcharts.series[0].update({
    name: 'xxx',
    data: [],
})

update的方法是会把之前写的数据全部覆盖，相当于重新写
另外还有一种方法，是setdate但是只支持更新数据，不能更改相应的options

x轴24小时

若公司没有提供一个时间库的话，就只能自己来计算后端给的数据是多少份，然后在24个小时内平分。
x轴的格式有一定的要求。

  xAxis: {
    type: 'datetime',
    // tickAmount: 24,
    // tickInterval: 3600 * 1000,
    // minTickInterval: 3600 * 1000,
    dateTimeLabelFormats: {
      day: '%H:%M'
    }

const startTime = new Date(new Date() - 24 * 3600 * 1000)
const pointStart = Date.UTC(startTime.getFullYear(), 
startTime.getMonth(), startTime.getDate(), startTime.getHours(), startTime.getMinutes())
let pointInterval = 24 * 3600 * 1000 / this.chartData[0].data.length

lineChart.addSeries(Object.assign({}, item, {pointInterval}, {pointStart}))

没有数据时，展示提示

网上有的相关的官方的noData的提示，也引入相关的noData需要的东西，依旧没有显示那个“没有数据”的提示

只好最后，自己加了div来提示“没有数据”，只要自己v-if看是否有数据.length

1. 常见的浏览器有哪些，内核是什么？

可以分这四种：Trident，Gecko，Webkit，Chromium/Bink，Presto。看着都很陌生，那么换个样子：IE，Mozilla FireFox，Safari，Chrome、Opera

2. doctype有什么作用？怎么写？

它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，浏览器才能获知文档类型。

• 确切说doctype告诉浏览器解释器怎么解释文档
  <!DOCTYPE html>

3. 页面出现了乱码，是怎么回事？如何解决？

• 主要是html源代码内中文字内容与html编码不同造成
  html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码

• 在head里设置好格式

4. meta 有哪些常见的值？

1. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   控制页面在移动端不缩小显示
2. <meta name="description" content="">
   这里是网页的描述，是给搜索引擎看的，搜索引擎根据这个描述进行收录排名，一般是网页内的关键字。
3. <meta name="keywords" content="">
   keywords用来告诉搜索引擎你网页的关键字是什么，换句话说就是你的网站主题，从一定意义上来说keywords与description其实它们的作用是一样的（突出网站主题），但他们又有所不同（在搜索结果页的展示）。
4. <meta http-equiv="Refresh" content="2;URL">
   自动刷新并转到新页面。其中的2是指停留2秒钟后自动刷新到URL网址。
5. <meta http-equiv="content-Type" content="text/html; charset=utf-8">
   设定页面使用的字符集。在HTML5中已经简写成<meta charset="utf-8">
6. <meta http-equiv="Expires" Content=0>
   可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

5.如何在html 页面上展示

这几个字符？

<div></div>

6.title 属性和 alt属性分别有什么作用？

• alt属性
  是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。alt属性包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中

• title属性
  为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息，然而这又由制造商来决定如何渲染title文字。
  title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。
  title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。