再学JavaScript（五）

繁体雲
184 阅读4分钟

41. JSON

JSON 是一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的吗，json是用来传输的）

常用方法

  • JSON.stringify(json); 转换成一个字符串
  • JSON.parse(字符串); 转换成 JSON

42. 异步js加载

  • js加载的缺点

    加载工具方法没必要阻塞文档，过得js加载会影响页面效率，一旦网速不好，那么整个网站等待js加载而不进行后续的渲染工作。

  • 按需加载

    有些工具方法需要按需加载，用到再加载，不用不加载

    工具包(初始化数据，事件绑定)，不修改页面的可以异步加载进来

  • JavaScript 异步加载的三种方案

    1. defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用，也可以将代码写到内部

    2. async 异步加载，加载完就执行，async 只能加载外部脚本，不能把 js 写在 script 标签里

    3. 创建 script，插入到dom中，加载完毕后callback

      function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    if(script.readyState) {
        script.onreadystatechange = function() {
            if(script.readyState == 'complete' || script.readyState == 'loaded') {
                callback();
            }
        }
    } else {
        script.onload = function() {
            callback();
        }
    }
    script.src = url;
    document.head.appendChild(script);
}
loadScript('../test/tools.js', function() {check();});

43. 浏览器加载时间线

  1. 创建document对象，开始解析web页面。解析html元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段 document.readyState = 'loading'。

  2. 遇到link外部css，创建线程加载，并继续解读文档。

  3. 遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。

  4. 遇到script外部js，并设置有async、defer，浏览器创建线程加载，并继续解读文档。对于async属性的脚本，脚本加载完后后立即执行。（异步禁止使用document.write() ）

  5. 遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解读文档。

  6. 当文档解读完成，document.readyState='interactive'。

  7. 当文档解析完成后，所有设置defer的脚本会按照顺序依次执行。（同样禁止document.write()）

  8. document对象触发DOMContentLoaded事件，标志着程序从脚本同步执行阶段，转化为事件驱动阶段。

  9. 当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件

  10. 从此，以异步响应方式处理用户输入、网络事件等。

44. RegExp 正则表达式

匹配特殊字符或有特殊搭配原则的字符的最佳选择。

学前补充(转义字符)

  • 使用反斜杠进行转义，将转义符号后面的单位转义成文本

    var str = "ab\"cd";

  • 更多使用方式

    1. \n : 换行

    2. \r : 行结束

    3. \t : 一个Table间隔

创建方式

1. 字面量

var reg = /abc/;  /* 要匹配的 /规则/  */
var str = 'abcd';
console.log(reg.test(str)); // test() 方法是测试 这个字符串中是否符合这个标准

2. new RegExp() 构造函数;

var reg = new RegExp('规则'); //
  • 两种创建方式的区别

  • 修饰符

    1. i: 忽略大小写

      var reg = /abc/i;
// var reg = /abc/变量；

    2. g: 匹配全局

      var reg = /abc/g;
var str = 'ababab';
log(str.match(reg)); // 这样可以返回匹配到所以符合规则的值

    3. m : 执行多行匹配(匹配的就是开头和结尾)

      var reg = /^a/gm;  // "^a" 表示开头必须是a
var str = 'abdc\na'; // “\n” 是换行
log(str.match(reg)); // ['a'],['a']

3. 方法

  1. reg.test(str);: str字符串中是否符合规则
  2. str.match(reg);: 返回符合规则的值

4. 表达式

5. 元字符

6. 文档链接

45. bind

bind方法用来绑定 this 指向。与call&apply改变this指向有所不同。

call&apply 数据执行时改变this。bind 是先给方法绑定，等到特定的时机执行。

示例
// 单对象编程
var list = {
  init() {
    this.mess = "howie";
    this.dom = document.getElementById('debounce');
    this.bindEvent();
  },
  bindEvent() {
    // this list
    // call apply： 是使用在立即执行时，而 bind 绑定的 this 是需要在特定的时间节点执行，而不是当下
    this.dom.onclick = this.showMessage.bind(this);
  },
  showMessage() {
    log(this.mess);
  }
}

list.init();

46. 防抖 & 节流

1. 防抖

在规定的时间内触发事件处理函数 1 次，如果未到规定时间内多次触发，会将时间清零，重新计算触发事件处理函数的时间，这样做可以避免服务器性能的过度消耗，优化页面请求性能。

示例
const debounce = (fn, delay) => {
  let tiemr = null;
  return (...args) => {
    clearTimeout(tiemr);
    tiemr = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  }
}
let handleClick = () => {
    log(this);
    $.ajax({
      url: './data.json',
      dataType: 'json',
      success(result) {
        log('获取成功!', result);
      },
      error(err) {
        log('获取失败', err);
      }
    })
  }


const oDebounce = debounce(handleClick, 1000);

let debounceBtn = document.getElementById('debounce');
debounceBtn.addEventListener('click', oDebounce, false);

2. 节流

在规定时间内触发事件处理函数 1 次，如果在未到处理时间，执行了多出触发，则忽略此次触发不予执行。优化网络请求性能。

示例
let throttle = (fn, delay) => {
  let flag = true;
  return (...args) => {
    if(!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, args);
      flag = true;
    }, delay);
  }
}

const handleClick = () => {
  $.ajax({
    url: './data.json',
    dataType: 'json',
    success(data) {
      log('数据获取成功', data);
    },
    error(err) {
      log('数据获取失败', err);
    }
  })
}

const oThrottle = throttle(handleClick, 2000);

let throttleBtn = document.getElementById('throttle');
throttleBtn.addEventListener('click', oThrottle, false);

本次分享到这里就结束了，加油！

avatar
文章
阅读
粉丝