bootstrap的用法和机制。

响应式CSS框架
bootstrap 是一个移动优先的网格系统，它是一个基于12列 的布局，有5中响应尺寸（对应不同的屏幕）。支持 Sass mixins 自由调用，并结合自己的预定义CSS Js类 ，用来创建合种形状和尺寸的布局。

用法：

  1. 引入 bootstrap.min.css （Bootstrap的样式表文件）
  2. 然后引入自己写的 css 文件（style.css）
  3. 然后引入 jQuery（javascript 库）
  4. 最后引入 bootstrap.min.js 程序文件

（1）完整的CSS样式插件
（2）丰富的预定义样式表
（3）基于jQuery的插件集
（4）灵活的栅格系统

angularjs的路由机制。

为了解决这个问题我们通常使用hash，监听hashchange事件来进行视图切换，另一个方法是用HTML5的history API，通过pushState()记录操作历史，监听popstate事件来进行视图切换，也有人把这叫pjax技术。

hashchange

onhashchange 事件在当前 URL 的锚部分(以 ‘#’ 号为开始) 发生改变时触发 。
锚部分的实例：指定当前 URL 为
http://www.example.com/test.htm#part2 - 这个 URL 中的锚部分为 #part2。
你可以使用以下方式调用事件:

AngularJS 是一个 JavaScript 框架

AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind** 指令把应用程序数据绑定到 HTML 视图。

AngularJS路由主要有内置的ngRoute和一个基于ngRoute开发的第三方路由模块ui-router，内置的ngRoute有时满足开发需求，使用ui-router可以解决很多原生ngRoute的不足。
AngularJS的路由实际上是一种纯前端的解决方案，它的本质是：当请求一个url时，根据路由配置这个url，然后再请求模板片段，并插入到ng-view中。AngularJS的路由更倾向于通过改变url进行页面的局部刷新。

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页 Web 应用（single page web application，SPA）。
通常我们的 URL 形式为 http://runoob.com/first/page，但在单页 Web 应用中 AngularJS 通过 #! + 标记 实现，

根据该教程可知，路由有三种设置。
第一种，设置在 Module 的 Config 阶段，设置 routeProvider，提供简单的 template 模板字符串，当被该路径模式被请求时，将 template 模板字符串渲染在 ng-view 位置。
$routeProvider.when(‘/‘,{template:’这是首页页面’}).otherwise({redirectTo:’/‘});
第二种，设置 templateUrl，且页面文件中存在 type为text/ng-template 的模板 js 片段，将会搜索 id 等于 templateUrl 的模板 js，并渲染在 ng-view 的位置。

$routeProvider.when(‘/‘,{templateUrl:’a.b’}).otherwise({redirectTo:’/‘});
第三种，设置 templateUrl，如果页面文件中不存在与 tempalteUrl 相匹配的 js 模板，则通过相对路径向服务器请求资源，请求完毕再渲染出来。


前端请求到后端的机制。

  • 浏览器缓存
  • DNS域名解析
  • TCP链接
  • Http请求与响应
  • 前端渲染数据

浏览器缓存机制

浏览器再次向目标URL 发送请求时，在数据不过期的情况下，会直接使用浏览器缓存的数据，而不需要像服务端请求。
强制缓存规则：当浏览器向服务器发送请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control比Expires优先级高，两个同时存在时，Cache-Control优先级高

Cache-Control

在HTTP/1.1中，Cache-Control主要用于控制网页缓存，其主要取值为:

  • public : 所有内容都被缓存 (客户端和代理服务器都可缓存)
  • private： 所有内容只有客户端可以缓存，Cache-Control的默认取值。
  • no-cache: 客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
  • no-store: 所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
  • max-age=xxx (xxx is numeric): 缓存内容将在xxx秒后失效，这里是相对值

浏览器缓存

浏览器缓存分为内存缓存(from memory cache) 和硬盘缓存(from disk cache):

  • 内存缓存(from memory cache):具有两个特点，分别是快速读取和时效性：
    • 快速读取： 内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内部资源，以方便下次运行使用时的快速读取
    • 时效性：一旦进程关闭，则该进程的内存则会清空。
  • 硬盘缓存(from disk cache): 硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。

前端 面试 - 图1

DNS解析

过程：
1- 检查浏览器缓存中是否有这个域名对应的解析过的IP地址

  1. 检查操作系统缓存中是否该域名解析结果
  2. 向本地服务器查询(LDNS)
  3. LDNS没有命中，到Root Server 域名服务器（根域名服务器）请求解析
  4. 根域名服务器返回本地域名服务器一个所查询域的（gTLD Server）主域名服务器地址
  5. 本地域名服务器再向上一步返回的gTLD 服务器发送请求
  6. 接受请求的顶级域名服务器查询并返回域名对应的权威服务器（Name Server）
  7. 权威服务器查询存储的域名和IP的映射关系表并返回
  8. 把解析的结果返回给用户，用户根据TTL值缓存在本地系统缓存中，域名解析结束

查询方式：

  • 递归查询

如果主机所访问的本地域名服务器不知道被查询域名的IP地址，那么本地域名就以DNS客户的身份，替代主机，向其他根域名服务器继续发出查询请求报文，而不是让主机自己进行下一步的查询。

  • 迭代查询

本地域名服务器向根域名服务器的查询通常是采用迭代查询。迭代查询就是：当根域名服务器收到本地域名服务器发出的迭代查询请求报文时，要么给出所要查询的IP地址，要么告诉本地域名服务器下一步应当向哪一个域名服务器查询，然后让本地域名服务器进行后续的查询。

TCP连接

TCP是面向字节流的，
TCP连接建立过程：

  • 建立连接（三次握手）
  • 数据传输
  • 断开连接（四次挥手）


Http请求与响应


以下列举一些常见的状态码：

  • 2XX成功：
    • 200 OK客户端请求被服务器正常处理
    • 204 No Content :请求处理成功，但没有资源可返回
  • 3XX重定向
    • 302Found 临时重定向，请求的资源已被分配到新的URI。希望用户能使用新的URI访问。
    • 304Not Modified:客户端发送附带条件的请求时，服务器允许请求访问资源，但因发生请求后未满足条件的情况下，直接返回304,返回时不包含任何响应的主体部分。
  • 4XX客户端错误
    • 400 Bad Request 请求报文存在语法错误。
    • 401 发送的请求需要有通过HTTP的认证
    • 403 Forbidden 服务器拒绝对请求资源的访问
    • 404 Not Found 服务器上无该资源。网页不存在。
  • 5XX 服务器错误
    • 500：服务器内部出现错误
    • 503：服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。
    • 504：（网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求。

链接：https://juejin.im/post/5b83b0bfe51d4538c63131a8
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

后端如何获取到前端传来的信息。

通过ajax 或者form表单提交数据

前端 面试 - 图2

5、3次握手和4次挥手是什么意思。

TCP连接建立过程：

  • 建立连接（三次握手）

第一次握手：客户端向服务端发起建立TCP连接的请求报文
第二次握手：服务器收到请求报文后，如果同意建立连接，向客户端发送确认消息
第三次握手：客户端收到服务器发送的确认后，再次给服务端给出确认。 客户端进入已连接状态，服务端收到确认后也进入已连接状态

  • 数据传输

  • 断开连接（四次挥手）

第一次挥手：客户端想服务端发送连接释放报文，并停止再发送数据
第二次挥手：服务端收到连接释放报文后，马上发出确认报文。 TCP处于半关闭状态
客户端接收到服务端确认后，进入终止等待状态，等待服务端发出连接释放报文
第三次握手：服务端如果已经没有向客户端发送的数据，应用进程通知服务端释放连接。服务端发送连接释放报文给客户端
第四次挥手：客户端收到服务端连接释放报文后，对此进行确认。 然后进入时间等待状态，最后进入Close状态

前端 面试 - 图3

#

JavaScript

js如何获取html里的信息。

Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

首先假设文本框如下：

1.用js获取文本框的值：(推荐使用方法1)
方法1：var value = document.getElementById(“textId”).value //textId为文的id,此时inputValue为输入框的值
方法2：var value = document.getElementsByClassName(“textClass”).value //注意：值为类名的元素值的集合
方法3：var value = document.getElementsByName(“textName”).value //注意：值为带有指定名称的对象值的集合
方法4：var value = document.getElementsByTagName(“标签名对应值”).value //注意：值为带有指定标签名的对象值的集合
2.用jquery获取文本框的值：(推荐使用方法1)
方法1：var value = $(“#textId”).val()
方法2：var value = $(“.textClass”).val() //注意：值为类名的元素值的集合

闭包

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

使用闭包的注意点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

ES6

// min=300, max=10000: in millisecond
// request: Promise
// @returns Promise
function minMaxWait(min = 300, max = 10000, request = xxxx) {

  1. setTimeout(max.request.reject)

}
var promise = new Promise((resolve,reject) => {
wx.request(
sucess:function(){
resolove
},
fail:function(){
reject
}
)
return promise
})
Promise.race
Promise.all
function r(p1, p2) {
Promise.race
}
await xxxx
then（）
。catch
=-====
t(id, nickname, token[unique])
1.
VARCHAR(100)
2.
INSERT INTO t (nickname, token) VALUES(“小王”, “abcd”);
3.
“小红”, “abcd”