Codog

关注微信公众号：Codog代码狗

0%

发表于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 1、利用Set数据结构
let unique = arr => Array.from(new Set(arr))
let unique = arr => [...new Set(arr)]

// 2、索引不是第一个索引，说明是重复值
let unique = arr => arr.filter((item, index) => arr.indexOf(item) === index)

// 3、一次循环，item 即为数组中的每一项
let unique = arr =>  {
    var newArr = [];
    arr.forEach(item => { 
        if(newArr.indexOf(item) === -1) newArr.push(item)
    });
    return newArr;
}

// 4、先排序，检查相邻元素
let unique = arr =>  {
    var newArr = [];                  
    arr.sort();
    arr.forEach((item, index) => {
        if( arr[index] !== arr[index+1]){
            newArr.push(arr[i]);
        }
    })
    return newArr;
}

发表于

这里拖拽分为两种，一种是拖拽元素，实现与某个区域的交互，比如拖拽某张图片到区域中，该区域添加图片元素；第二种是拖动元素到任意位置，比如验证码拖动滑块的效果。

第一个场景主要是HTML5新增的拖拽方法draggable来实现；第二个拖动元素则通过mousedown, mousemove, mouseup来实现

阅读全文 »

发表于

两个方法常见的使用场景：

  • 防抖：输入框搜索值，需要等待停止输入一段时间后再查询，比如停止输入200ms后触发查询操作
  • 节流：窗口resize，需要每间隔一段时间执行某个操作
阅读全文 »

发表于

1(信息类)：表示接收到请求并且继续处理
2(响应成功)：表示动作被成功接收、理解和接受
3(重定向类)：为了完成指定的动作，必须接受进一步处理
4(客户端错误类)：请求包含错误语法或不能正确执行
5**(服务端错误类)：服务器不能正确执行一个正确的请求

阅读全文 »

发表于

自己尝试写的：

1
2
3
4
5
6
7
8
9
10
11
function parser(urlStr, key) {
  const url = new URL(urlStr)
  const map = new Map
  // search字段会返回 '?name=aaa&age=18'
  const paramsArr = url.search.match(/\?(\S+)/)[1].split('&')
  console.log(paramsArr)
  return new Map(paramsArr.map(item => {
    const parts = item.split('=')
    return [parts[0], parts[1]]
  })).get(key)
}

个人认为主要考的是如何用正则取出数据，字符串方法也可以做

解析整个url参数：

1
2
3
4
5
6
7
function query(name) {
  const search = location.search.substr(1)
  const res = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')

  const res = search.match(reg)
  return res[2]
}

或者直接使用URLSearchParams对象

1
2
3
4
5
6
function query(name) {
  const search = location.search
  const p = new URLSearchParams(search)

  return p.get(name)
}

TODO: vue-router的方法

发表于

基本概念：

  • path的作用？

  • httpOnly的作用？

  • same-site有了解吗？

  • 不同url是否共享？

不区分端口

关于cookie于session的区别：

知乎上的回答：

image

简要说就是：不要混淆 session 和 session 实现，session的常见实现要借助cookie来发送sessionID

localStorage与sessionStorage

发表于
  • null是有值，但值是空。undefined是值未定义。
  • typeof null === 'object', typeof undefined === 'undefined。
  • JSON.stringify会忽略undefined值，但会保留null值；
  • 他们都是falsy ，不加!比较，永远是false (Boolean(undefined) ->// false, Boolean(null) ->// false)；

发表于

三大原则

  • 单一数据源

整个应用的state存储在一个对象中，且该对象只存在一个store中

  • State只读

唯一改变state的方式就是触发action

  • 使用纯函数修改

编写reducer，接收之前的state和action，并返回新的state

实现Redux

有时候看代码模拟实现可以更直观的了解内部机制，当然能力足够建议查看redux源码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 简易实现
const createStore = (yourReducer) => {
  let listeners = [];
  let currentState = yourReducer(undefined, {});

  return {
    getState: () => currentState,
    dispatch: (action) => {
      currentState = yourReducer(currentState, action);

      listeners.forEach((listener) => {
        listener();
      });
    },
    subscribe: (newListener) => {
      listeners.push(newListener);

      const unsubscribe = () => {
        listeners = listeners.filter((l) => l !== newListener);
      };

      return unsubscribe;
    }
  };
};

发表于

JSONP经常被用来解决跨域问题，浏览器对JS的请求有同源策略，但对script标签却没有，利用这点可以达到跨域的目的。

实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
  <div id="content"></div>
  <script>
    function processJSON(data) {
      const { title, modified } = data
      document.querySelector('#content').innerText = JSON.stringify({ title, modified })
    }

    const script = document.createElement('script')
    script.src = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=processJSON&tags=monkey&tagmode=any&format=json"
    document.body.appendChild(script)
  </script>
</body>

我们首先定义了processJSON方法，然后将这个方法名当作参数传给服务端用来数据，服务端将我们的方法名和实际数据拼接，返回js代码，浏览器接收并执行。

接口返回内容：

image

JSONP也有缺点：

  • 只支持GET请求
  • 不方便失败处理
  • 安全性问题（XSS，脚本攻击）