开发者学堂课程【高校精品课-上海交通大学 -互联网应用开发技术：Scripting&JavaScript 2】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/76/detail/15743
Scripting&JavaScript 2
内容介绍
一、文本节点与标签
二、动态生成页面内容
三、ECMAScript是什么？
四、React 工程
五、javascript 的框架
六、课程补充
一、文本节点与标签
继续上节课，如图：
push(8)处为何会输出八？它输出三，其实输出的是长度。
举例：
打开浏览器。打开控制台，写刚才的语句。写了两个东西，输出三。三表示这个数组输入 push 进去之后的长度。
不是 push 进去8，就输出8。在浏览器里用这个控制台很方便，一一方面会知道直接输一些东西，它会出结果，像 JavaScript 脚本。会出运行结果，还有一方面：将来真正页面出来之后。如果有错，在这边可以直接看到出错的位置。然后也可以在这边直接发一个请求出去。也可以用 postman 这样的工具。在后面的ppt 里面也写过这些东西。
直接在上面发，它会产生请求，可以看一下请求和响应。
产生请求，然后响应，可以看它的结果。而且发的时候它还可以删，这种证书方式发。我在调大三那门课的作业时。也用到这个工具。这个要用证书，证书以后再说。
二、动态生成页面内容
如图：
这个地方输出实际上是长度，它不是在输出是8。在获取 node 之后。
Id 和 name 都可以，观看下图：
这是一个页面，页面里有一个 h1。id是 myHeader 。如果点击,把获取它的值。调用 getValue 函数。那是真正显示内容。然后在脚本里面定义这个函数，这个函数指按照这个 Id 去查找这个元素。找myheader ,形成对应。意思是弹出一个 alert ，就是一个对话框。
这个对话框会显示。因为把它赋给了 x.innerHTML 。之前写过一个例子，这个是比较简单的，它是弹一个框显示内容。
例子：
<body> 里有一个无序的列表。列表里面有两个东西。两个条目，一个是咖啡，一个是茶。然后底下有一段话叫做插入一个新的 item。就一句话，没有任何东西，然后有一个按钮，叫试一下。然后点击之后去调 myFunction 。脚本处嵌入东西。 myFunction 里面要创建一个新的 element 。创建的新element 仍然是一个 li 。就是列表项。这就是 newltem 。
然后创建一个文本节点 water 。 textNode 是 item 要重建的内容，所以相当于 l1 里面加的内容。把 water 作为 newitem 的一个子节点把它追加进去。就形成了 <li>water</li> 。然后把他插到 Mylist 。所以先按照id去找 Mylist 。然后插一下。插到有位置处。比如让插到某一个元素的前面。
把 newitem 插到指定位置前，插到原来 list 第零个，也就是排序排下来这个coffee这个节点前。效果如下图：
咖啡，茶。然后插入点一下。就会跟在前面。
注意：这是点一下出现的效果。
观看脚本。这个按钮实际上可以不断的按，不断的按每一次都创建了这样的东西。然后每一次都插到 list 里最前面的这一个节点前，所以按照这个脚本。如果再点，就会不断的在前面插入 water 。一个新插入，一个之前插入。所以不停的点下去会出现如图所示结果：
这个例子主要表达：
第一个怎么选择现有的一个标签。
然后是怎么创建新的。
这俩条在说怎么把节点，这种层次关系，给它建立起来，也就是追加儿子或者是插入到某个前面（指定位置）。这两个插入方式不一样，第一条指的默认在最后插入。第二条指在给定位置插入，这个例子涵盖很多的内容。通过这个内容知道页面的内容是怎么样通过javaScript 脚本去动态的生成.这里面实际上就是动态生成。
观看源码：
每点击一下，源码也会发生改变，在动态的改变内容。浏览器可能会有一些差异，但是大同小异！
有开发者试图问显示源码，显示 consure 。显示网络上传递的请求，这些大同小异。只是每个浏览器执行位置可能不太一样，这是一个例子，在动态去生成页面上的内容。
观看下图：
这不是在动态生成页面上内容，是在动态改变页面里面元素的属性。因为刚才都是在按照页面的元素在进行操作，也就是在操作某一个标签儿进行内容的替换或者是追加他儿子，现在要改变里面的内容，它的属性，比如 style “color:red”叫红颜色。
注意：
getElementsByTagName ，myname就是在 h1 里定一个属性 name等于什么什么，ByTagName 是按照 Tag 的名字来进行搜索。除了按照 id，就是逐渐进行唯一标识的这种方式来查找。是返回一个结果。其他的都是返回多个。
h1 是一个 Tag 名字，它默认会返回一个集合。尽管在这个页面里这个集合只有一个元素。它也会返回一个集合。返回这个集合里，我们知道只有一个元素，取出这个元素。把它的属性取出。它的属性的值，就是style里这个属性的值是什么？然后把它这个值替换，变成绿色。这是在动态修改它的值。例子如下图：
代码跟刚才一样，唯一的差异就把 vr 换成了 it 。一开始就是红颜色了然后 try 就变成了绿颜色 。这个例子说明除了操作元素本身还是操作他里面的属性。
那一个页面里到底有什么？
红色标记全部是标签。然后这个标签里可以加入内容。就是刚才看到的改变它的页面（html）。然后还有属性。无论是 I D 的属性，还是start 属性都属于属性，包括 onclick 。即点击事件时要改变哪个函数。仔细看完之后就会发现基本上所有页面里的内容，都可以进行操作。
通过这几个例子看，都可以进行操作。用这样的脚本来进行操作。
脚本本身出现在页面里 java<script>。这一个标签扩括起来。无论是一个线程的标题，javascript的文件，再导入一个完整文件。还是直接把脚本写在这儿，然后把标签括起来。
这就是我们看到的 Javascript 的脚本本身的语法并不复杂。我们现在拿它来是要去操作 HTML 页面里的内容，所以实际上要了解 HTML 中的 dom 对象。关于 dom 对象，这里列了的这些没有把它举全，所以复杂内容。
然后最后说一下这个事件，引用的这个代码不是特别好，先讲它是什么意思，所以最后讲它为什么不是特别好？他说我有一个按钮。
上面内容很长，这个按钮在有鼠标按下。当然也可以写 onclick 。点击之后。他要做的一个动作是调用show_coords(event)。
这里定义的函数, event就是调用所产生的实践。在 event里包了很多东西。
其中有 clientX ，clientY。表示在点击按钮产生这个动作时，那相对于这个屏幕，位置在哪？然后alert 。看效果。
第三个。就是这个脚本。为了要防止它可能有中文等问题，可以编码机制。
这是一个按钮，在靠前处点一下。显示15*20 。也就是相对于这一个页面，就是白颜色的这个页面左上角开始是15*20。靠右边一点显示的是304*20。在捕获鼠标在当前页面在屏幕上相对的位置。就相对于这个页面的70位就是这个白颜色的区域。左上角这个位置的相对位置。
那这个例子为什么不是特别好呢？
大家可以看到，JavaScript 的 DOM 对象演化比较快，这种方式有点过时。写没有问题，任何语言都是相差兼容的。但是这种写法不好，应该换别的。具体换哪个查一下手册。
三、ECMAScript是什么
我们经常讲 JavaScript 支持 ES 几，意思是首先ECMA是欧洲计算机制造商联合会或者协会，就是 association 的意思。这是一个组织，它定义了在浏览器里执行的脚本。
应该符合某一种规则，定义了一个像标准一样的东西，定义在浏览器里脚本机制的语言，不是脚本语言，脚本机制语言包括这个语言用脚本写完以后在浏览器里如何解释等等这一系列的标准，它要制定一个标准。它制定的标准，语言如果要想成为这样一种语言。它的核心的能力应该有哪些？
它就定义这样的标准，它的标准关于它有一个描述。这是个细节。
Script6 大多数现在看到的开发环境里面都支持。这样一个版本。然后它其实从一五年之后，每一年都推一个新版本。今年刚开始他还没推，但是他不断演化版本叫做E X max。它每一个版的意思就是不断的往里面加新东西，底下是它的一个变化。
大家可以看到。我们现在常用的是六。然后七八九十就分别再加一些新的功能进去。
最初加出来的这个东西如果去追溯，是九六年11月份由网景公司，设计的。他提交给了 ECMA 。作为一个组织，他不希望跟一个公司的产品绑定，所以他就推一个标准出来：只要在浏览器里面能执行的脚本就应该有这些核心能力。制定一种标准。凡是能实现这种标准的语言，就都是遵循于 ECMAScript 六七八九这种版本的语言，浏览器，就不要去讲你支持 JavaScript 。或者 actionscript。或者其他。就说支持 ECMAScript 几就可以。
所以 javascript 的指示是实现这个标准的这个产物之一。它是用的最多的一种。其实另外可以看到有一些也实现了这个标准。也可以在浏览器里面去执行，所以像 flax 也可以在浏览器中跑。但是 flax 没有什么前途了，都要分分上抛弃他。
注意：javascript 既然遵循了标准，它为什么会有一个兼容性问题？所谓兼容性问题是怎么产生的？既然是标准，怎么会有兼容性？那么按照标准来说，应该是大家都遵循这个标准，但是大家都能跑！但是一定要注意就所有的标准。我们说它叫三大。
或者叫他standard spectation。标准的东西，它只是个定义核心功能。有一些功能它不是面面俱到，没有定义死，如果定义死大家就没有自己去写的意愿。
如果大作业规定死必须用哪些功能，每一个功能它页面的呈现必须是什么样，然后再写哪个就必须怎样。做的时候将会没有任何激情，没有任何意义，因为你做的东西跟其他人做的一模一样。所以标准里有些东西没有写死，大家就可以自由发挥。这也是另外一方面。
所以 javascript 确实有兼容性问题，所谓兼容性就是指它在不同的浏览器里或者在不同的平台上跑时可能出现的效果会不一样，或者说在有的平台上跑就会出错。它有与平台相关的，有跟浏览器相关的，也有跟语言本身相关的。另外还有可能实践里面本身有 bug 。或者是在语言层面上不兼容，比如说。 javascript 和不支持 javascript 浏览器之间的语言上就不兼容。
这个讲起来比较抽象，举一些例子。
第一个，我们要获取这个页面上的某一个 form 里的内容。可以这样写:
这是一个标准的写法。
但是在 ie 里他就支持这样一种写法:
然后在火狐里它就是这样的写法:
也就是它的写法可以有两种，ie 里面两种都支持,火锅里面只支持这一种？其他浏览器可能就是这种，要怎么写？
找一个大家都支持，比如这个应用就想在火狐和 ie 上跑，就想大家都支持这个。这是个解决方案。
第二种，
用的比较老的语言里。JavaScript 版本里可能有些方法没有。要想用怎么办？
就按最老的去写作量会很大，所以所谓的防范性的编程就是先判断这个函数有没有。这个函数有就用。没有就去调自己写的 split 。即不到万不得已，不要用自己这个，因为自己写的可能不如人家默认的这个提供的时间好。
再往下。刚才反复看到了。要把一个标签中间加的内容给替换掉，用是 innerTest 。但是 innerTest 是大多数浏览器都支持的。有些就不不这么写，会让你写 textContent 。大家写法不一致，怎么办？就是所谓的浏览器不一致。
知道一下浏览器到底是什么？如果是ie我就用 innerTest 。不是ie用 testContent , 所以这也是一种不兼容。所以写代码要想好，要考虑到不兼容性，要判断浏览器是什么？然后有一种方法,把不确定的部分全部推到服务器端去做。不要在浏览器里做。这个不是特别好，还有一种是一压制就忽略，比如可能只是一个很小的一个特性。有没有都无所谓，有就更好看一点，那就忽略这个问题不管。
更重要一点要记住：如果实在不行。记得千万不要在前台抛什么五零零四零零的错误出来。就是一定要捕获抛出来的异常，就是错误。然后要告诉他页面维护。无论是前台的错误，还是后台的错误都要如此。就是一旦抛。异常直接抛给客户端。客户端用户不是这个专业，他看到之后会发懵。如果是语言版本有问题，就是不是浏览器带来的，不用去判断浏览器，可能是因为导入的各种各样的包，里面有的是 javascript 比较老的版本，有的是比较新的版本。
怎么办？应该在写的。或者在引入的包里面，每一个人希望把自己的包给别人用时都应该写清楚底下用的是哪个。是用哪个版本 javascript 来开发的？所以在真正写时，要做测试，如果是 javascript 1.0或1.1，1.2。这个版本 version 等于什么？然后在底下去判断，如果它小于1.1应该怎么办？否则应该怎么办？所以就是要做这样的测试，这些告诉 java 很麻烦。
虽然这个有这个标准。但实际上在应用社会碰到各种各样的兼容性的问题。那么还有一种就是版本的这种错误。压制掉，最后不管。不要管错误，错误可以一直漂。总的来说兼容性肯定存在。
我们着重要解决像版本兼容性可以忽略，因为都是自己来写。但是要考虑浏览器，不同的浏览器可能看到的东西不一样。
在后面看到的：如果要写一个原生的 ajax 应用，要发一个 HTML 一个 Http 的请求出来。就会碰到可能要考虑版本兼容性的问题，因为在不同浏览器发出的方式不一样。尤其别人让你去执行 IE8 ，或者 IE8 以下的浏览系统，这个问题会更突出。这是在浏览器，细节就不说了
四、React 工程
运行 React 工程，这是一个例子。这个例子出现过多次，有最开始的，然后把数据从后台拿到，如果看过应该知道这个例子。
这个例子中可以看到：要求绘制一个app。然后在 index.html 里可以看到它在如图所示地方：
这个默认在页面里面，root 里面什么都没有。然后里面什么都没写。然后也没有引用 javascript 。为什么最后可以跑这个程序？
原因是因为在这个工程里，最后把所有 javascript 脚本给它做了编译的动作。这个动作会产生一个帮助感 J S或者并感 G S 的东西嵌入到页面。
下一个问题，这个语言是解释型的，它怎么会有编译？编译在干什么？实际上这个叫 B 包变音器。
他不是在做机器帮写脚本。把它编译成机器码。不是在做这种动作，它跟其他的编译器，在编译其他编译型语言里看到，到机器的转换不一样，它要做的事情，
这是 b 包，实际上要把 javascript 这个程序里。用到的其他的包全部都可以找到。
然后他以他的方式，它不是把圆程转换成机械码，它是把加速编译成更好的加速，所谓的更好加速就是拿到代码之后。去掉一些可能永远用不到的代码。然后把里面写的不好的地方处理，然后把需要编译，需要依赖的东西拿到一起，最后产生一个完整的在写程序的时，工程生成的 bundle.js 文件,在这个过程中，他还做了其他处理。本质上它生成的仍然是一个 javascript 。他不会生成机器码，机器码可以直接就行。他只是让这个显得更好一些。这里举的例子是在如下图这个网站上。
在这个网站上。可以在线编译。
在线编译上是怎么编译呢？
这是原始的 javascript ，这是编译完之后。显然，注释全部都被干掉。包括这些事件，全部干掉，其次没有必要的空格和回车全部都给删除掉。
大家有一个疑问：这个 javascript 经过编译，形成它。看起来功能一样，很简单，为什么要做一个事情？
因为不要忘了所有 javascript 都需要在浏览器端和服务器端之间传递。当然的 javascript 文件你越小越紧凑越好。传递的就越快，所以大家会看到下载下来一些包的时。比如Recud.js 包，发现它的排列就是如此。没有换行，一行一行写下去，没有换行，就直接写，中间几乎也没有多余的空格。显得非常紧凑，看起来非常累，因为本身就不是给你看。是在机器上来回传在网上来传递的，所以它越紧凑越好。
这件事情自己做不会做，或者丢给这个网站去做不方便怎么办？
有 webpack 这样的工具，
package.josn 工具，这样的文件就是给 webpack 用，帮我们把依赖的东西一起打包。 webpackage 还是比较好用,最紧凑的。
讲到这里，就说一下， webpackage 是在类似于maven 里 pom.xml 文件，把需要的依赖,将来可以执行的脚本放在这里。
看依赖，假设这个程序里需要依赖另外一个包。怎么办？
只要连接到网络，package 很方便。
只要打出：底下引用的所有的包都会出来。比如写 fetch-mock ,然后后面也不知道要引入什么时，它会自动出来。当不清楚现在的版本是哪一个时，可以像上面一样写。就写 react 引入最新的包。
这样在运行 webpack 时，在运行 build 时就会把包的内容下载下来，然后打包到应用里。这是 webpack 方便之处。这个地方的错误是写完后如果把这行删掉，不报错。如果说你错过刚才的选择
再输一下符号。它会自动出来可以使用的所有的版本，可以随便选一个。所以很好用的，它的作用与上文描述的编译类似，就是把工程里写的 js 脚本。包括还要用到的其他的库，包括依赖的库。全部都拿下来编译，马上就上网。并且马上会报新加的东西没有，
直接点run，他就会自动下载到本地的库，然后未来编译时就会去引用。这是我们看到所谓的 b 包编译器，不是在真正把它编成自编码或者机器码，它把所有 javascript 需要用的好东西放到一起。去弄出一个看起来更好的 js ，更好体现在做一些代码的优化。检查错误把需要的依赖自动编译非常重要。
五、javascript 的框架
javascript 的框架有哪些？
前端 Augular , react , value 三个都比较流行。三个里 Augular 是google，google提的这个东西和后面讲 react , value 非常类似，所以可以看到所有的框架基本上都有 Template 的概念，也就是写好的一个页面，页面里面实际上有一些内容将来需要通过 javascript的脚本去替换。去做补充,或者是去生成。把 Template 先写好。
Template 是什么？
就是 HTML 的页面加上框架，自己定义的一些 tag 。这些 tag 未来就可以被脚本替换掉， tag 叫什么，就是用 Directive 方法,
tag 里面有描述，将来这个地方需要被替换，整个系统在开发时都要基于构建，
所谓构建，在我们去写。比如后面 value 做参，所谓构件就是要把代码模块化，去做复用，也就是会开发很多的class。在做系统开发时，总是希望把代码复用一下。所以写了很多class，如果不是要复用代码，没有必要去写class。在class里面他就会去操作，去把需要的数据填入到 Template 。
Augular 是其中一种框架，用的也很多。Google的框架，上课就没有再讲这个，讲一讲 jQuery 。 jQuery 也是一个框架，以前用的很多，其实也经常用，它的 Ajax 封装也比较好。比较容易用，除了jQuery ， 还有 jQuery 之上衍生出来的很多其他框架，比如说jQuery Easy。它可以做一个前端，做好了一个控件，可以直接拿它进行应用，比如它可以直接绑到后台的滴滴。这是它的一个好处，它带了很多的控件，这些控件可以直接用。而且非常漂亮。
然后 Bootstrap 。 Bootstrap 也是一个 js框架，他出来有很多的控件也会显得非常好看，有很多同学喜欢使用。Css 出来的效果看着不错。顺便讲到这里就谈到作业的问题，同学还是在问，就是两个 css啥意思？
实际上，在最后写大作业时，根据以往同学们的经验。有同学引用的Css 不只一个。比如说很多人喜欢 Bootstrap ，因为 Bootstrap 出来的效果比较好看。而且也不需要再做额外的处理，写个原始页面。丢给他，他一渲染就会非常好看。但是往往在完成大作业的过程中。大家可能用的不光是 Bootstrap ，比如说有人会用 Echart 。 Echart 里画图，自然也有一个 Css 。所以页面里可能就会有两个 css 。但是有两个css之后，就会有一个问题，就是这两个css会不会有冲突？有冲突的话，怎么去解决？
所以布置作业的意思是什么呢？
未来就算是在页面只使用一个css。但是这一次交作业，应该交两个css 。然后你在至少有一个页面里应该去应用这两个css。然后去看这两个 css 呈现出来的效果是不是你想要的效果，比如这两个css。对于 h1 都有一个描述。最后想要的是谁？效果是不是这样。我们作业大概实际上想让你做这样的事情。原因是因为在后面有可能会碰上这样的问题。我们在以往空间里看到用 css 的基本上都不是只用了一个，都是用很多个，两个都不一定有。都很少，其他都是用了很多个。很多个放到一起时就要考虑一下在页面里面引用多个的时重复的问题是怎么解决？层叠要是这个层里不是解决这个问题，所以作业只要想让大家看这个东西。
React 是后面上去谈到的。React 用的是一种叫 JSX ,就是 XML
的一种用法，这样的方式来做，下一节课会详细去解释。
这里面这个脚本的意思是他要创建一个元素 div 。里面是 hello ,
这个东西是从调用他时传递下来的参数。所以这个就是所谓的
this .props.name , name：jane 。所以它就会去重建,页面被加载
时，要把它画出来。也就是它会去画出来一个用 HelloMessage 类。
就画出来一个 D I V 里面会显示 hello jane 。
上课给大家讲的例子，改写一下。有几个地方改写，没有用 var
excule = { }默认的去定义，而是明确的定义了一个类。然后去写。
第二就是所有的函数全部改写成了方法表达式，否则会发现。改写成
class之后，可能会报错。报错的原因是因为说 this 找不到，所以
这也是今天为什么反过头来告诉大家。This.script 找不到是this绑
定的问题。所以这是有关React 。当然还有 value ,就没有在写。
然后上课讲 JavaScript 。讲 webpackage 。Happy json。会让你操作起来比较方便，在课件上面还放一个让助教帮忙做了一个webpack介绍的 pdf 。
Webpack. pdf
我们在做前端开发一般都用到 Webpack , Webpack 的意思是写了很多的 js 脚本。写了很多的什么 css 等等，它要通过它这个工具帮你编译一下，帮你整理一下。整理出来以后。最后看到所谓的编译，就是编译出一个单一的 bundle.js 文件。把所有依赖的库和写的东西编译到一起，产生了这样的东西。
他在进行打包时。就是你写的有有各种各样的 JS，他在进行打包编译时。他会按照你给他的配置文件信息。
你说：原文件放在哪里了？编译完以后要在某一个路径里面生成方块里的jS。然后在页面里面就会发现，你不是在直接引用这些东西。是在那个在 index.html 里直接引用编译出来，打包 js 就可以。这就是它的作用。
这里面看到就是要用 Webpack 来管理用到的东西。他会去根据你的依赖，库的依赖情况。帮你把东西拿下来之后编译出来。根据你在前面给它的定义去编译一个或者多个帮助，通常可能就编一个帮助就完了。具体的逻辑在 Webpack 官网上。
大家不需要知道太多，就是其实在代码里，编译之后，可能唯一要用到的就是在 Webpack 里需要增加新的。Web 进来后在这里怎么去增加？其他的东西是在生成这一个工程时。他会自己带。
其中这个 Script 意思是鱼已经 start 。他就是真正跑起来，已经build ，就是在编译当前这个工程。所以在跑时。可以选择要跑哪一个？没有要run，run什么？它底下刚才还写他有 start ，有build 。看你是想让他去编译，还是去 start ？要start ，那他就start ，一跑他就会跑场。它的前端就会跑，整个程序就会跑起来，它就会有响应。
这就是给你们看的工程，在工程里压缩打包时。没有打包node modul，因为这个太大，只打包了其他目录。下来之后你在跑时他会问要不要跑instop ，把那个东西装起。一旦装了，就会下载，内容特别多，因为写就是从网上帮你下载，内容特别多。然后把工程建起来，第一次跑它可能会下来 main ，跑完以后出这个效果。这个东西可以排序。然后点击可以去进行编辑。然后可以写搜索，搜索按谁搜索都可以，一旦输入，它是交互者。他会去把包含你写的东西过滤，比如不包含听的作者就全部过滤。再点击就没了，但实际上第一次大作业要完成的应该也是类似的东西，就是不要求整个所有的功能全部开发出来。但是应该把数据写死的前端的数据的浏览，包括做排序等等，这些功能应该实现，数据在这里是写死的。
六、课程补充
css可以自己写，但是也可以从网上直接引用，而且直接引用的可能会更多一点。自己写，如果你特别感兴趣，去学一些 css脚本写法，想写的好看也可以！
注意：有同学说第一次作业是静态网页不需要用工具，全台工具方便一点。第一次未必要在这个里面写，在 websdom 也可以。
websdom 实际上应该是 webdom 一个超级。如果装了他，实际可以不用。只不过可能轻量级也有时候会用用。系统资源占用少。
css写俩个意见。在引用时可能会引用不同的工具 css，其实真正有很多项目。基本上里面出现的 css 不是一个，是多个。写到最后，会发现肯定是多个，因为在前端像用到react 。但是可能也会用到一些其他的东西，比如实际上这里用的这个book css就不是react 的。而是刚才大家看到的那本书，我说这个来自于那本书，是那本书的作者自己写的。这是不是指我需要至少有两个 css 。
看下图:
这是一个 css ，如果里面想用到其他的一些空间，自然会引用另外一个 css 。所以引用多 css 这种情况肯定会出现的，没有办法避免。所以要清楚两个 css 出现之后，它只能去互相之间，如果产生冲突，出现到底是哪一个效果，应该怎么解决？
一个比较蠢的方法是：把 css 里面重复的地方拿出来看一下，不想要的删掉，保证他们不同。
还有一种做法是靠排列他们的顺序来决定。当有重复时以谁为主。要注意：
今天刚跑的关于兰姆达表达式的例子没有放到给你们上传的工程里。而且我刚才说这个工程实际上非常简单，压三个页面。在开发工具直接去浏览器去看。你可能要建一个外部应用把他拉进去。
