js题目小结4.Redux 鼓励数据范式化，减少冗余，Mobx 容许数据冗余，但同样能保持数据一致。 5.Redux更严

事件监听，DOM自定义属性等

题目描述：

网页中有一个元素A，它有个data-href属性，里面存放一个链接地址🔗 实现一个函数，当任意点击时，如果点击的元素就是A或其上层节点中找到A，则进行链接跳转实现思路：

redux 和 mobx 区别

1.Redux 鼓励一个应用只用一个 Store，Mobx 鼓励使用多个 Store； 2.Redux 是函数式编程，而Mobx的模式是面向对象的； 3.Redux 使用“拉”的方式使用数据，这一点和 React是一致的，但 Mobx 使用“推”的方式使用数据； 4.Redux 鼓励数据范式化，减少冗余，Mobx 容许数据冗余，但同样能保持数据一致。 5.Redux更严格，必须调用reducer触发action来改变state， Mobx 最初的一个卖点就是直接修改数据，但是实践中大家还是发现这样无组织无纪律不好，所以后来 Mobx 还是提供了 action 的概念。和 Redux 的 action 有点不同，Mobx 中的 action 其实就是一个函数，不需要做 dispatch。如果想强制要求使用 action，禁止直接修改 observable 数据，使用 Mobx 的 configure，如下：

react的虚拟DOM，简单讲一下diff算法原理

css

div垂直居中的方法

<div class="father">
     <div class="child"></div>
   </div>

1.方案

<style>
      .father {
          width: 300px;
          height: 300px;
          background-color: red;
          position: relative;
        }
      .child {
        width: 100px;
        height: 100px;
        background-color: green; 
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      } 
  </style>

2.方案

  <style>
      .father {
        width: 300px;
        height: 300px;
        background-color: red;
        position: relative;
       
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
      }
 
   </style>

3.方案

<style>
.father {
       width: 300px;
       height: 300px;
       background-color: red;
       display: flex;
       justify-content: center;
       align-items: center;
     }
     .child {
       width: 100px;
       height: 100px;
       background-color: green;
       }
 </style>

尽可能多的方式实现如下三栏布局，要求 .main 在中间显示

1.方案1

 <div class="container">
  <div class="main"></div>
  <div class="sub"></div>
  <div class="extra"></div>
</div>
<style>
 .container {
        width: 100%;
        height: 400px;
        background-color: red;
        box-sizing: border-box;
        position: relative;
      }
      .main {
        width: 33.33%;
        height: 100%;
        background-color: green;
        position: absolute;
        left: 33.33%;
      }
      .sub {
        width: 33.33%;
        height: 100%;
        background-color: blue;
        float: left;
      }
      .extra {
        width: 33.33%;
        height: 100%;
        background-color: yellow;
        float: right;
      }
</style>

2.方案2

<style>
      .container {
        width: 100%;
        height: 400px;
        background-color: red;
        display: flex;
      }
      .main {
        width: 33.33%;
        height: 100%;
        background-color: green;
        order: 1;
      }
      .sub {
        width: 33.33%;
        height: 100%;
        background-color: blue;
        order: 0;
      }
      .extra {
        width: 33.33%;
        height: 100%;
        background-color: yellow;
        order: 2;
      }
    </style>

实现throttle 节流函数

要求用法：

const throFun = () => console.log('hello');
const thro = throttle(throFun, 300);
document.body.onscroll = () => {
  thro();  // 调用至少间隔 300 毫秒才会触发一次
}

/**
- 频率控制，返回函数连续调用时，action 执行频率限定为 1次 / delay
- @param delay  {number}    延迟时间，单位毫秒
- @param action {function}  请求关联函数，实际应用需要调用的函数
- @return {function}    返回客户调用函数 */
function throttle(action, delay) {
  var previous = 0;
  // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
  return function() {
    var _this = this;
    var args = arguments;
    var now = new Date();
    if(now - previous > delay) {
        action.apply(_this, args);
        previous = now;
    }
  }
}

实现debounce 防抖函数

数组去重

var arr = [1,1,2,3,4,5,5,6,6,7,8,9]
//方案1
const getNewArr = () => ([...new Set(arr)])

//方案2
const getNewArr = () => {
	let map = new Map()
    arr.foreach(item =>{
    	if(!map.get(item)){
        	map.set(item,item)
        }
    })
    return [...map.keys()]
}

杂项

fixed 和absolute区别

没有滚动条的情况下没有差异
在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动

http状态 200:请求已成功 204 No Content 301 Moved Permanently被请求的资源已永久移动到新位置 302 Move Temporarily 304 Not Modified 400 Bad Request 401 Unauthorized 403 Forbidden 服务器已经理解请求，但是拒绝执行它。 404 Not Found 405 Method Not Allowed 408 Request Timeout 500 Internal Server Error 501 Not Implemented mine 没有配置 503 Service Unavailable

xss(跨站脚本攻击) csrf(跨站请求伪造)

xss攻击它允许恶意web用户将代码植入到提供给其它用户使用的页面中。比如百度贴吧，如果百度没处理，用户发送的帖子中有javascript代码，那么每个用户进入这个帖子都会执行这段js 。可以进行投票或者ddos攻击等

csfr攻击过程

用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A； 2.在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；
用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；
网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；
浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行。

call apaly 区别和自己实现

方法用途都是在特定作用域中调用函数，实际上等于设置函数体内部的this对象 apply第二个参数是数组和arguments call第二个参数开始必须传入对应的所有参数

单链表循环

快速排序

setInterval

segmentfault.com/a/119000001…

js 获取具体类型的办法

1.typeof 返回对象的数据类型:只有原始数据类型：boolean number string undefined function object

null的数据类型成为了object，现在，null 被认为是对象的占位符，从而解释了这一矛盾。缺陷：对于Array,null,Object对象和其他自定义对象使用typeof一律返回object;

2.instanceof

function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
                     var O = R.prototype;// 取 R 的显示原型
                     L = L.__proto__;// 取 L 的隐式原型
                     while (true) {
                       if (L === null)
                         return false;
                       if (O === L)// 这里重点：当 O 严格等于 L 时，返回 true
                         return true;
                       L = L.__proto__;
                      }
                  }

   github 面试题
   
   https://github.com/georgezouq/interview
   
   https://github.com/georgezouq/interview/blob/master/FE/company/%E8%9A%82%E8%9A%81%E9%87%91%E6%9C%8D.md
   
   https://github.com/wintercn/blog/issues/4
   
   https://github.com/CavsZhouyou/Front-End-Interview-Notebook
   
   https://github.com/qiu-deqing/FE-interview

js题目小结