前端小记~

一、call、apple、bind的区别

用于重定向this。call和apple会直接执行函数，而bind返回的是一个函数，需要加（）调用，才会执行。

//例子：
var obj={
> 	name: 'she'
>  myfun: function(fm,t){
>   console.log(this.name+' '+fm+' '+t)
>  }
> }
> var bd(){
> name: 'he"
> }
> obj.myfun.call(db,'is','lihua')  //he is lihua
> obj.myfun.apple(db,['is','lihua'])  //he is lihua
> obj.myfun.bind(db,'is','lihua')() //he is lihua
> obj.myfun.bind(db,['is','lihua'])() //he is lihua

call、apple、bind这三个函数的第一个参数是this指向的对象，第二个参数为传入函数的参数。
区别：

• call传入函数的参数用逗号隔开；
  apply只能放在一个数组里一起传入函数中；
  bind两种都可以。
• bind返回是函数
  call、apply是直接执行函数

二、事件流

事件流分为事件冒泡和事件捕获；

• 事件冒泡：是由最内部节点向外传播；
• 事件捕获：是由最外部节点向内传播；

阻止事件冒泡的方法：

• 在函数中添加：e.stoppropagation、window.event.cancalBubble、return false

添加事件捕获
addEventListener（event，func，boolean）其中，

• Boolean默认值为false，表示冒泡触发函数
• Boolean为true，表示捕获触发函数

三、new的实现

function myNew (fun, ...arg) {
    // 创建一个新对象且将其隐式原型指向构造函数原型
    let obj = {
        __proto__: fun.prototype 
    }
    // 执行构造函数
    fun.apply(obj, arg)
    
    // 返回该对象
    return obj
}

function Person (name, age) {
    this.name = name ;
    this.age = age
}

let _person = myNew(Person, 'huang', '21')
console.log(_person)

四、url的组成

• url = 协议+域名+端口号
• 域名：有2个或2个以上构成，“.”号分隔开来，最右边最高级（顶级域名），依次为二级域名、三级域名…
• 常见的顶级域名：
  .COM:：用于商用机构
  .NET：用于网络组织

2021.7.4

域名的组成（主体+后缀）

域名用来表示一个单位、机构或个人在Internet上的确定的名称或位置。一个完整的域名由2个或2个以上的部分组成，各部分之间用英文的句号“.”来分隔，最后一个“.”的右边部分称为顶级域名(TLD，也称为一级域名)，最后一个“.”的左边部分称为二级域名(SLD)，二级域名的左边部分称为三级域名，以此类推，每一级的域名控制它下一级域名的分配。

例如：
https://www.baidu.com
其中https是协议，www为二级域名、baidu.com是顶级域名。
国际通用域名 .com .org .net .gov .edu

域名的后缀	意思
.com	商业
.org	非盈利组织
.net	IT
.edu	教育
.gov	政府
.cn	中国
.tw	台湾
.us	美国

标题空间复杂度和时间复杂度（参考文章）

衡量一个算法的优劣，主要从时间和空间两个维度进行评判。
时间复杂度：指运行当前算法所需要的时间。
空间复杂度：指运行当前算法所需要占多少内存空间。

1. 时间复杂度
   由于不能性能的机器运行同一个算法所用的时长是不一样的，
   所以时间复杂度采用的是算法的渐进时间复杂度T(n) = 0(f(n)) 把执行一行代码的时间定为1颗粒时间。
   常见的时间复杂度有：O(n)、O(n*m)、O(logn)、O(nlogn)
   在下面的例子中，执行第一行是1颗粒时间，第三行和第五行代码是n颗粒时间（因为它执行了n次），
   所以 f(n) = 1+n+n = 1+2n ，当n足够大时，f(n) = n。
   因此这个例子的时间复杂度T(n) = O(n)

for(i=1; i<=n; ++i)
{
   j = i;
   j++;
}

2. 空间复杂度
   空间复杂度是对一个算法在运行过程中临时占用存储空间大小的一个量度，同样反映的是一个趋势，我们用 S(n) 来定义。
   空间复杂度比较常用的有：O(1)、O(n)、O(n²)
   在下面的例子中，尽管出现了循环，但是并没有随着时间的增加占用新的内存。所以S(n) = O(1)

for(i=1; i<=n; ++i)
{
   j = i;
   j++;
}

generator函数（es6新特性【生成器】）

generator不同于普通函数在于，它是异步函数，可以暂停执行。定义时需要要function后面加个*号。例如：function*
text()这就是一个generator函数。
generator函数有三个方法：

• next() 指继续执行
• return() 指遍历终止，类似于for循环的break
• throw() 指执行中断。
  调用generator函数时，并不会返回函数执行结果，而是返回一个指向内部指针状态的一个对象。该函数执行到yield时就会暂停，外部调用next()方法才会继续执行。并且放回一个对象。

function fn(){ // 定义一个Generator函数
yield ‘hello’;
yield ‘world’;
return ‘end’;
}
var f1 =fn(); // 调用Generator函数
console.log(f1); // fn {[[GeneratorStatus]]: “suspended”}
console.log(f1.next()); // {value: “hello”, done: false}
console.log(f1.next()); // {value: “world”, done: false}
console.log(f1.next()); // {value: “end”, done: true}
console.log(f1.next()); // {value: undefined, done: true}

next（）方法还可以传参，传入的参数为var的值。

  function* gen() {
      var val = 100
      while (true) {
          console.log( `before ${val}` )
          val = yield val
          console.log( `return ${val}` )
      }
  }

  var g = gen()
  console.log(g.next(20).value)
  // before 100
  // 100
  console.log(g.next(30).value)
  // return 30
  // before 30
  // 30
  console.log(g.next(40).value)
  // return 40
  // before 40
  // 40

MVVM

MVVM(Model View ModelView)最大的特点就是实现了双向绑定，将前后端分离的更加的清晰。


MVVM的特点：

• 双向数据绑定（参考：剖析Vue原理&实现双向绑定MVVM）
  首先我们需要先了解ES5的一个属性=》Object.defineProperty()；返回值：传入函数的对象。即第一个参数obj；

参数说明
obj	必需。目标对象
prop	必需。需定义或修改的属性的名字
descriptor	必需。目标属性所拥有的特性（接收一个对象）

Object.defineProperty(obj, prop, descriptor)
它是ES5的一个属性，可以增加或修改对象的属性。
通过该方法劫持各个属性的setter和getter在数据变动时发布消息给订阅者，触发相应的监听回调。
给对象的属性添加特性描述，目前提供两种形式：数据描述和存取器描述。

数据描述
value	属性对应的值,可以使任意类型的值，默认为undefined
writable	属性的值是否可以被重写。默认为false。
enumerable	此属性是否可以被枚举（使用for…in或Object.keys()）。默认为false。
configurable	是否可以删除目标属性或是否可以再次修改属性的特性，默认为false
value	属性对应的值,可以使任意类型的值，默认为undefined

存取器描述
get	取属性的值时触发
set	存属性的值时触发

注：当使用了getter或setter方法，不允许使用writable和value这两个属性

思路整理
要实现mvvm的双向绑定，就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者

• 虚拟dom（参考链接：vue核心之虚拟DOM(vdom)）
  真实DOM和其解析流程
  创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

tip:CSS的解析是从右往左逆向解析的(从DOM树的下－上解析比上－下解析效率高)，嵌套标签越多，解析越慢。

• 缺点

浏览器的渲染内核

参考：不同内核浏览器的差异以及浏览器渲染简介

js逻辑运算符&&、||、！执行顺序，判断条件

参考：https://blog.csdn.net/weixin_51109349/article/details/110475748

• && 逻辑与运算符
  当&&判断条件时，如果发现有一个false时，后面条件不会被执行，这种现象为：短路操作
  如果两个条件都为true，以最后一个true为判断
• || 逻辑或运算符
  如果发现有一个true时，后面条件不会被执行，这种现象为：短路操作
• ! —逻辑非运算
  可以隐性转换成布尔值，并有取反功能

2021.7.9

正则表达式

参考链接：最全常用正则表达式大全

元字符	描述
\	将下一个字符标记符、或一个向后引用、或一个八进制转义符。例如，“\n”匹配\n。“\n”匹配换行符。序列“\”匹配“\”而“(”则匹配“(”。即相当于多种编程语言中都有的“转义字符”的概念。
^	匹配输入字行首。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。
$	匹配输入行尾。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置。
*	匹配前面的子表达式任意次。例如，zo*能匹配“z”，也能匹配“zo”以及“zoo”。*等价于{0,}。
+	匹配前面的子表达式一次或多次(大于等于1次）。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。
?	匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“do”或“does”。?等价于{0,1}。
{n}	n是一个非负整数。匹配确定的n次。例如，“o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的两个o。
{n,}	n是一个非负整数。至少匹配n次。例如，“o{2,}”不能匹配“Bob”中的“o”，但能匹配“foooood”中的所有o。“o{1,}”等价于“o+”。“o{0,}”则等价于“o*”.
{n,m}	m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次。例如，“o{1,3}”将匹配“fooooood”中的前三个o为一组，后三个o为一组。“o{0,1}”等价于“o?”。请注意在逗号和两个数之间不能有空格。
?	当该字符紧跟在任何一个其他限制符（*,+,?，{n}，{n,}，{n,m}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少地匹配所搜索的字符串，而默认的贪婪模式则尽可能多地匹配所搜索的字符串。例如，对于字符串“oooo”，“o+”将尽可能多地匹配“o”，得到结果[“oooo”]，而“o+?”将尽可能少地匹配“o”，得到结果 [‘o’, ‘o’, ‘o’, ‘o’]
.点	匹配除“\n”和"\r"之外的任何单个字符。要匹配包括“\n”和"\r"在内的任何字符，请使用像“[\s\S]”的模式。
(pattern)	匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到，在VBScript中使用SubMatches集合，在JScript中则使用$0…$9属性。要匹配圆括号字符，请使用“”或“”。
(?:pattern)	非获取匹配，匹配pattern但不获取匹配结果，不进行存储供以后使用。这在使用或字符“(
(?=pattern)	非获取匹配，正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。例如，“Windows(?=95
(?!pattern)	非获取匹配，正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。例如“Windows(?!95
(?<=pattern)	非获取匹配，反向肯定预查，与正向肯定预查类似，只是方向相反。例如，“(?<=95
(?<!patte_n)	非获取匹配，反向否定预查，与正向否定预查类似，只是方向相反。例如“(?<!95
*	python的正则表达式没有完全按照正则表达式规范实现，所以一些高级特性建议使用其他语言如java、scala等

• x | y ：匹配x或y。例如，“z|food”能匹配“z”或“food”(此处请谨慎)。“[z|f]ood”则匹配“zood”或“food”。
• [xyz]：字符集合。匹配所包含的任意一个字符。例如，“[abc]”可以匹配“plain”中的“a”。
• [ ^ xyz]：负值字符集合。匹配未包含的任意字符。例如，“[^abc]”可以匹配“plain”中的“plin”任一字符。
• [a-z]：字符范围。匹配指定范围内的任意字符。例如，“[a-z]”可以匹配“a”到“z”范围内的任意小写字母字符。

注意:只有连字符在字符组内部时,并且出现在两个字符之间时,才能表示字符的范围; 如果出字符组的开头,则只能表示连字符本身.

• [ ^ a-z]：负值字符范围。匹配任何不在指定范围内的任意字符。例如，“[^a-z]”可以匹配任何不在“a”到“z”范围内的任意字符。
• \b：匹配一个单词的边界，也就是指单词和空格间的位置（即正则表达式的“匹配”有两种概念，一种是匹配字符，一种是匹配位置，这里的\b就是匹配位置的）。例如，“er\b”可以匹配“never”中的“er”，但不能匹配“verb”中的“er”；“\b1_”可以匹配“1_23”中的“1_”，但不能匹配“21_3”中的“1_”。
• \B：匹配非单词边界。“er\B”能匹配“verb”中的“er”，但不能匹配“never”中的“er”。
• \cx：匹配由x指明的控制字符。例如，\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则，将c视为一个原义的“c”字符。
• \d：匹配一个数字字符。等价于[0-9]。grep 要加上-P，perl正则支持
• \D：匹配一个非数字字符。等价于[^0-9]。grep要加上-P，perl正则支持
• \f：匹配一个换页符。等价于\x0c和\cL。
• \n：匹配一个换行符。等价于\x0a和\cJ。
• \r：匹配一个回车符。等价于\x0d和\cM。
• \s：匹配任何不可见字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。
• \S：匹配任何可见字符。等价于[ ^\f\n\r\t\v]。
• \t：匹配一个制表符。等价于\x09和\cI。
• \v：匹配一个垂直制表符。等价于\x0b和\cK。
• \w：匹配包括下划线的任何单词字符。类似但不等价于“[A-Za-z0-9_]”，这里的"单词"字符使用Unicode字符集。
• \W：匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。
• \xn：匹配n，其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，“\x41”匹配“A”。“\x041”则等价于“\x04&1”。正则表达式中可以使用ASCII编码。
• \num：匹配num，其中num是一个正整数。对所获取的匹配的引用。例如，“(.)\1”匹配两个连续的相同字符。
• \n：标识一个八进制转义值或一个向后引用。如果\n之前至少n个获取的子表达式，则n为向后引用。否则，如果n为八进制数字（0-7），则n为一个八进制转义值。
• \nm：标识一个八进制转义值或一个向后引用。如果\nm之前至少有nm个获得子表达式，则nm为向后引用。如果\nm之前至少有n个获取，则n为一个后跟文字m的向后引用。如果前面的条件都不满足，若n和m均为八进制数字（0-7），则\nm将匹配八进制转义值nm。
• \nml：如果n为八进制数字（0-7），且m和l均为八进制数字（0-7），则匹配八进制转义值nml。
• \un：匹配n，其中n是一个用四个十六进制数字表示的Unicode字符。例如，\u00A9匹配版权符号（& copy;）。
• n\p{P}：小写 p 是 property 的意思，表示 Unicode 属性，用于 Unicode 正表达式的前缀。中括号内的“P”表示Unicode 字符集七个字符属性之一：标点字符。

其他六个属性：
L：字母； M：标记符号（一般不会单独出现）；
Z：分隔符（比如空格、换行等）；
S：符号（比如数学符号、货币符号等）；
N：数字（比如阿拉伯数字、罗马数字等）；
C：其他字符。
*注：此语法部分语言不支持，例：javascript。
匹配词（word）的开始（<）和结束（>）。例如正则表达式<the>能够匹配字符串"for the
wise"中的"the"，但是不能匹配字符串"otherwise"中的"the"。注意：这个元字符不是所有的软件都支持的。 ( ) 将( 和
) 之间的表达式定义为“组”（group），并且将匹配这个表达式的字符保存到一个临时区域（一个正则表达式中最多可以保存9个），它们可以用
\1 到\9 的符号来引用。 | 将两个匹配条件进行逻辑“或”（or）运算。例如正则表达式(him|her) 匹配"it belongs
to him"和"it belongs to her"，但是不能匹配"it belongs to
them."。注意：这个元字符不是所有的软件都支持的。

TypeScript中的可选属性和只读属性

• 可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 例如给函数传入的参数对象中只有部分属性赋值了。带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?符号。如下所示：

interface Person {
  name: string;
  age?: number;
  gender?: number;
}

ps：上面的例子中Person对象名字(name)是不可选的，age和gender是可选的。

• 只读属性

顾名思义就是这个属性是不可写的，对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性，如下所示：

interface User {
    readonly loginName: string;
    password: string;
}

ps：上面的例子说明，当完成User对象的初始化后loginName就不可以修改了。

• readonly vs const

最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用const，若做为属性则使用readonly。