JS中的同步异步编程

浏览器是多线程的，JS是单线程的（浏览器只分配一个线程来执行JS）
进程大线程小：一个进程中包含多个线程，例如在浏览器中打开一个HTML页面就占用了一个进程，加载页面的时候，浏览器分配一个线程去计算DOM树，分配其它的线程去加载对应的资源文件…再分配一个线程去自上而下执行JS

• 同步：在一个线程上（主栈/主任务队列）同一个时间只能做一件事情，当前事情完成才能进行下一个事情（先把一个任务进栈执行，执行完成，在把下一个任务进栈，上一个任务出栈…）

• 异步：在主栈中执行一个任务，但是发现这个任务是一个异步的操作，我们会把它移除主栈，放到等待任务队列中（此时浏览器会分配其它线程监听异步任务是否到达指定的执行时间）,如果主栈执行完成，监听者会把到达时间的异步任务重新放到主栈中执行…

  宏任务：macro task

  • 定时器
  • 事件绑定
  • ajax
  • 回调函数
  • Node中fs可以进行异步的I/O操作

  微任务：micro task

  • Promise(async/await) => Promise并不是完全的同步，当在Excutor中执行resolve或者reject的时候，此时是异步操作，会先执行then/catch等，当主栈完成后，才会再去调用resolve/reject把存放的方法执行

  • process.nextTick

  • 执行顺序优先级：SYNC => MICRO => MACRO

  所有JS中的异步编程仅仅是根据某些机制来管控任务的执行顺序，不存在同时执行两个任务这一说法

viewport 视口

在PC端，我们开发的HTML页面运行在浏览器中，浏览器有多宽（一般浏览器代表设备的宽度）HTML就有多宽，也就是在浏览器宽度的视口中渲染和呈现我们的页面

移动端和PC端有区别：不管移动端设备(代指打开的浏览器)的宽度是多少，HTML页面的宽度是980(或者1024) =>导致的问题：如果在设备窗口中想把整个页面完全呈现出来（小窗口中完全展示大页面），我们只能把大页面进行缩放，HTML页面缩放了，那么页面中所有内容都缩放了

解决方案

只要让H5页面的宽度和手机设备的宽度保持一致即可，就不会出现手机渲染页面的时候把页面缩放的事情了

1 2 3 4 5 6 7 8 9 10 11

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 此META标签就是在设置VP(视口)的规则 width=device-width：让HTML页面的宽度等于设备的宽度 height=：设置HTML页面的高度（一般不用） initial-scale=1.0：初始缩放比例是1:1（也就是既不放大也不多小） user-scalable=no：禁止用户手动缩放 maximum-scale=1.0 minimum-scale=1.0：设置最大最小的缩放比例1:1(既不放大也不缩小 =>部分安卓机中只设置user-scalable是不起作用的，需要同这两个一起使用) ...

正则应用

1
2
3
4
5
6
7
8

let str = '54389',
    ary = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
str = str.replace(/\d/g, item => {
    //=>item =>arg[0] =>正则每一次捕获的内容 5/4/3/8/9
    //=>把捕获的数字做为索引，到ARY中找到对应的汉字，用找到的结果替换当前捕获的内容
    return ary[item];
});
console.log(str);

1
2
3
4
5
6
7
8
9
10

//30. 在javascript对象上定义一个repeatify函数,这个函数接受一个整数参数,来明确子字符串需要重复几次,这个函数要求字符串重复指定的次数,比如:’abc’.repeatify(3); //=>”abcabcabc”
String.prototype.repeatify = function repeatify(n = 1) {
    //=>this:需要处理的字符串
    let result = '';
    for (let i = 0; i < n; i++) {
        result += this;
    }
    return result;
};
console.log('abc'.repeatify());

js中的this

JS中的THIS汇总

THIS:当前方法执行的主体(谁执行的这个方法,那么THIS就是谁,所以THIS和当前方法在哪创建的或者在哪执行的都没有必然的关系)

1. 给元素的某个事件绑定方法，方法中的THIS都是当前操作的元素本身

   1 2 3

   document.body.onclick = function () { //=>this:body };

2. 函数执行，看函数前面是否有点，有的话，点前面是谁THIS就是谁，没有点，THIS是WINDOW（在JS的严格模式下，没有点THIS是UNDEFINED）

   1 2 3 4 5 6 7 8 9

   let fn = function () { console.log(this.name); }; let obj = { name: '哈哈', fn: fn }; fn();//=>this:window obj.fn();//=>this:obj

正则捕获

把一个字符串中和正则匹配的部分获取到

正则

• exec
• test

字符串

• replace
• split
• match

基于EXEC可以实现正则的捕获

1. 如果当前正则和字符串不匹配，捕获的结果是NULL
2. 如果匹配，捕获的结果是一个数组
   • 0:大正则捕获的内容
   • index:正则捕获的起始索引
   • input:原始操作的字符串
   • …
3. 执行一次EXEC只能捕获到第一个和正则匹配的内容，其余匹配的内容还没有捕获到，而且更恶心的是，我傻傻的执行多次，然而并没啥卵用 =>“正则的捕获有懒惰性”：只能捕获到第一个匹配的内容，剩余的默认捕获不到
4. 解决正则捕获的懒惰性，我们需要加全局修饰符G（这个是唯一的方案，而且不加G不管用什么办法捕获，也都不能把全部匹配的捕获到）
   阅读全文 »