JS中正则表达式要注意lastIndex属性,React中使用collections时key的重要性详解

前言

 说明

这周末在家呆了两天,正好中午闲暇时间继续分享Angularjs相关,今天主要分享Angularjs总体介绍及数据绑定部分内容,下面直接进入主题。

大家应该都知道,在 React 中 render collections 的 items 时, Keys
扮演着重要的角色, 它直接决定接下来的 rendered 和
re-rendered,下面话不多说,来一起看看详细的介绍:

这篇文章,主要和大家聊聊JavaScript中RegExp对象的属性。

1、基本概念:

React 不会 render 重复的 keys

解释

  AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事,通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足。

为了彻底明白这个, 我们来声明一个这样的数组

每个RegExp对象都包含5个属性,source、global、ignoreCase、multiline、lastIndex。

2、版本

const nums = [1, 2, 3, 5, 2]; // 它有两个元素的值是相等的

source:是一个只读的字符串,包含正则表达式的文本。

  angualrjs1.x:目前比较稳定版本。
  angularjs2.x:基于typescript编写,他在1.x基础上改动很大,偏向于移动端的开发,ES6标准编写
  angularjs4.x 最新版本

现在, 我们在 react 中来 render

var reg = /JavaScript/;
reg.source; //返回 JavaScript

目前版本2.x不是在1.x的基础上升级的,基本上说是颠覆性的,目前开始两个版本来维护,2.x开始把1.x版本基本上重新架构,并优化了大量的东西,并更提倡组件化变成,这方面跟Vue,React类似。

<ul>
 {nums.map(num => <li key={num}>{num}</li>)}
</ul>

global:是一个只读的布尔值,看这个正则表达式是否带有修饰符g。

3、核心特性

这小段代码构造出的理想 element 结构, 应该是这样的

修饰符g,是全局匹配的意思,检索字符串中所有的匹配。

MVC(或MVVM)设计思想:

<ul>
 <li key="1">1</li>
 <li key="2">2</li>
 <li key="3">3</li>
 <li key="5">5</li>
 <li key="2">2</li>
</ul>
var str = "JavaScript";
str.match(/JavaScript/); //只能匹配一个JavaScript 
var str = "JavaScript JavaScript";
str.match(/JavaScript/g); //能匹配两个JavaScript 
var reg = /JavaScript/;
reg.global; //返回 false
var reg = /JavaScript/g;
reg.global; //返回 true

      
很多人会想Angularjs是前端MVC框架,我认为MVC只是一个设计思想,我认为可以说有MVVM的影子在里面,因为MVVM是在MVC的基础上升级的,加了数据双向绑定功能,不过这只是我个人意见,请大神们指正。

然而, 实际 DOM 是这样的

ignoreCase:是一个只读的布尔值,看这个正则表达式是否带有修饰符i。

 双向数据绑定:

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>5</li>
</ul>

修饰符i,说明模式匹配是不区分大小写的。

  数据双向绑定不是AngularJs提出的,是很早就有的,有微软的WPF中运用MVVM思想、前端框架Knockoutjs都有数据双向绑定概念。

React 给出了以下warning

var reg = /JavaScript/;
reg.ignoreCase; //返回 false
var reg = /JavaScript/i;
reg.ignoreCase; //返回 true
var reg = /JavaScript/;
reg.test("javascript"); //返回 false
var reg = /JavaScript/i;
reg.test("javascript"); //返回 true

模块化和依赖注入

图片 1 

multiline:是一个只读的布尔值,看这个正则表达式是否带有修饰符m。

  模块化和依赖注入是AngularJs的核心内容,也是Angular的亮点。

意思就是, 你必须为数组中的元素提供唯一的 key 值

修饰符m,用以在多行模式中执行匹配,需要配合^ 和 $</code>
使用,使用<code>^</code> 和 <code>$
除了匹配整个字符串的开始和结尾之外,还能匹配每行的开始和结尾。

指令系统

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图