前端mutations怎么触发

我们再来看今天的主角，我现在要给大家介绍的就是 c s n g s， 这个是 model， c s c s n g s 呢？我们来一个 button 组件， button 组件是平常同学们用的最多的啊，我们之前其实统计了一下，大概最多的 model 框架是不是自己内部使用的。不是啊，这个这种方案开源的都有啊，非常一个非常成熟的方案， 只要有翻译器能够解决这个问题，解决它的这个啊，内蒙追加啊，或者什么其他问题其实都能够解决，这就是 cs module， 你 或者你可以如果说用的 vt 的 话，你可以用 vt 来搜一下 vt module cs， 然后点进去，这个里面就是 vt 的 一些特性，特性里面你就可以看到 cs module， 那 这里呢？有这么多，有 post， cs， cs module 点进去就是它约定俗成的一种方案，就是要用 mosuo 点 cs 来命名文件啊，它一定要用这个来命名，注意哦， 它这样命名之后它就会给你做一部分翻译啊，你自己在这里面去处理好这个，我们先给大家看到这包括这个 cs 样式呢，预处理，预处理，其实就同学们之前说的什么 s， s， l s 啊这些方案，这个我们现在其实用的不多了，可能同学们用的比较多吧。 好，我们现在再来看到 button， button 呢，可能会有一个入口，这个入口就是 index 点 t s button， 朋友们主要是看思维啊，至于是 react 还是 view， 这个一点都不重要。好，现在就有了一个按钮，按钮呢，你待会儿里面肯定要写东西，写一个什么文字啊之类的，所以我们现在肯定要给它定一个 button props， 好类型呢， children 给它放进去，再然后这里来去接收 props， button props 就 定义好了。好，这个时候呢，其实一般像变体啊，那些呢？那还有很多，这个时候我们需要把变体也给它定义一下，比如说 button types， 或者叫 button variable。 呃，这个 variable 或者 variable 定义一下，它是一个数值，里面有哪些呢？可能有 primary secondary 或者是这个，呃， ghost。 好，这就是同学们平常啊用的比较多的几个形态，比如说主按钮，次按钮和这种阴灵幽灵按钮，对吧？然后呢我们就可以定义它的 button types 了啊， button types 就 等于它 就 ok 了，然后你再把 type 给它放进去啊，这些都是一些技巧啊，都是一些技巧。然后你再来看它是不是 primary secondary ghost， 对 吧？它其实是取自于这个数组，然后数组的类型呢，是从这个里面去把它拿出来的，这样就有个好处，你的这个就相当于是个酶聚酯。 美曲值是可以使用的啊，就跟你写那个美曲是一样的 e number。 primary secondary 和 ghost 跟你写的这个是一样的 e number， 呃，或者叫 button types， 对 吧？一样的啊，一样的效果好，这个是拓展的一点点，我们只像只说到这儿，然后呢，我们在这个里面继续往里面去添加内容， 既然 props 来的有个 children， 我 们就把 children 给它传进去，其他的我们都不需要了啊，其他都不需要，这个呢，我们也给它导出去 export 出去，现在呢就可以使用了，我们在使用的地方引入一下，比如说我们现在要在这儿使用，那就把 button 引入一下，然后呢使用 type primary， 这个时候就能够看到效果了。但是呢，你发现现在看到这个效果 是用我们外面的那些样式影响的，我现在把外面的这些样式呢全部去掉，就比如这个 button button， 我是 绝对不会要它的，还有其他的这个多余的样式呢，我想把它删掉。好，现在就正常了，是一个普通的原始按钮，在这个基础上，我们用 cs ing 的 方案。怎么来解决样式的问题呢？ 大家注意看了 import， 从它里面导进来这个 style。 好， 我不知道前面大家还记不记得我之前给大家讲过一个，就公开课的时候讲过模板语法， 模板语法就是 c s， n g s 的 基础，什么基础呢？接下来我们比如说 const button， 或者叫 s c button， s c 叉 button。 啊，这这个命名是我们的一个，呃，约定啊。 好，这个就是模板语法的方式，模板语法的方式来去定义，定义好之后，这里就会输出一个新的组建，把这个组建往这儿一丢，就完成了，就写完了。你接下来样式呢？全部在这个里面去写，比如说你写什么呢？写 color， blue 或者是 white， 保存过来看一下 color 是 不是变成了 blue。 如果你的 body， 呃，这个 border 不要，那就直接来一个 border long， 它就没有 border 了。好，你如果要给它 padding， 那 就给 padding， padding 八像素十六像素，这就有 padding 了。好，你要有圆角，圆角呢就给个 border radius， 圆角就有了四像素，或者给个八像素。 好，这样就有了，大家可以看到吧。呃，如果说它是这个主按钮的话，那我们一般它的 background color 呢？可能需要给一个黑色，对吧？我们一般一般的黑可能是呃三八三八三八，比如说给个这个颜色， 嗯，这这样，这是有点灰，我们给个零三零三零三吧，零三零三， color 呢，一般肯定就要跟它对应的给成白色 f 灰，白一点点的啊， f 二， f 二， f 二啊，就这个样效果，那这个按钮就 ok 了啊，这个按钮就 ok 了，那你现在可能在他基础上去写一些变体，对吧？要实现一些变体，那些变体呢，你就额外再通过样式去控制就可以了。好，但是这肯定不是完美的方案，为什么呢？这个， 这个这几个它们其实都是颜色值，这个颜色值在最初你定义的时候，就应该在这个里面把它的颜色值的内容呢给它定义好，所以我们冒号 root 下面通常全部用来去定义它的变量， 整个色值体系。我们来给大家看一下啊，假设我现在呢要定义一些这个基础样式的体系值啊， 什么呢？比如说颜色，还有呃间距大小等等，我们一个一个来定义，刚才前面说了，我们有一个 color primary， 给，就给这个颜色，好，这是我们的主题色，大家注意了。然后呢，可能还有 color 杠 b 七杠 primary， 我们就给这个颜色好，我们来试一下啊，当我这两个颜色定义好之后，我现在就可以去那边用它了，就刚才我这里定义的，这其实就是颜色的央视体体系里面方案的混用啊，方案的混用好，颜色朋友们看到吧，就用它，那背景色呢？ 背景色我就用它 color 杠 primary， 杠 bg 啊， bg 杠 primary， ok， 过来看一下，那就是这个效果。那一般情况下呢，其实在这个基础上它还会有更深一层的定义，比如说针对于对应业务或者是对应组建，它会有额外的定义，组建定义的它的设置定义 啊，这些呢全部定在这个下面，包括字体、间距，字体我们就给这个吧。呃，间距呢？刚刚 gap， 这个 gap 给他一个一点五，然后可能还有 margin， 就是 编剧啊，比如说还有其他的编剧 margin 给个零，或者给个正常情况下的设置，比如给个八八吧，八像素， 好， padding， 这个把它变成 padding， 这样来去指定 padding 的 话，我们一般给个四像素，但是 padding 也随着你的本身本体的那个大小来去切换，来去变化的。 好好，这样定义之后呢，我们再来到这边，那其实你的这个 borderless 或者是 petting 这个地方，你就能够更规范地去用你的变量值来解决。变量值怎么解决呢？你的 petting 嘛，对吧？那你这儿就是把它变成两个沃尔，刚刚 petting， 然后呢？刚刚 petting， 呐， 这样来，那来一看就有了。那其实一般情况下啊，你在这里去使用的时候呢啊，我这里写多了， 嗯，好，这个样子就看到。那如果说你在这个基础上想给它把它的大小，或者根据它按钮的大小要能够去切换， 能够去切换。所以你这里呢，可以比如说把它变成 lg 啊，变成叉 s， 变成 lg， 变成叉 l， 变成叉叉 l， 变成叉叉叉 l 等等等啊，这个就随便你自己怎么去定义去约束了啊，所以呢，这几个技术之间它并不是独立的啊，自己有一些方案呢，它可能是需要共同一起来用才能够解决掉某一些问题。那比如说像这个 bug 按钮的问题， 央视体系在设计的时候啊，就需要去考虑到色值相关的内容呢，直接用 cs 变量。所以为什么我前面就说到现在已经不是那么推荐大家用那个，那个， 呃，就 ness 或者是 sass 啊，不太推荐。好吧，就是用这种方案。好，那我们可以看到呢，这个基本定义就完成了啊，一个按钮，如果说你想把它的大小也给它定义一下，比如说这里的 size 来个 size size 给 small， medium， large 这几个呢，同样可以按照它的这个方式来去定义， express， const， uh size， sizes 等于这几个啊，然后呢，你在它的类型定义的时候呢， type， button size 就 直接这样去定义，然后你下面用的时候也直接这样去用 sizes 就 可以了啊，你点上去 small， medium 和 large， 这个时候你里面在用的时候呢，就可以去按看情况，对吧？比如说你现在给他一个 size， 这个 size 呢，他会传过去，传给谁呢？传给他到这儿你来 size 就得到它的大小，那比如说你把这个 size 呢，当然要放在上面一点，把这个放在下面来。好，那你的 size 就是 sizes 得了 sizes 得了 sizes 之后传进去，你给的大小是多少啊？ props 点 size。 那 我现在在外面在用的时候呢，你看它就可以切换了，比如说现在的 size， 我 们给它一个 large， 然后你里面去消费，现在还没有消费啊，消费一下它的大小 怎么消费呢？就直接比如说在这里把代码写进去，这样来去消费，得到结果啊，我们最终呢在外层来包一下，里面的这个呢，写多了好， return css， return css 好，这个里面呢就可以去指定了，你看 finalize 或者是宽高，对吧？宽度呢，你也可以根据你的宽度去加那个 size 来决定，高度呢，也可以用高度跟那个 size， 但是一般情况下这个地方还是由 padding 来决定的。 padding 来决定啊， padding 杠 size， 那 我们现在呢，在那边去指定的时候就可以把 padding 带一个 size， 这是常规的 padding。 如果是针对于大的 padding， 我 们给给它一个 large， 比如说十六，还可以给他一个常规的 small， 给个八，然后再给一个其他的啊， petting charlage， charlage， 我 们就这个就没有了啊， charlage， 这个就没有了。呃，我们再看下这边啊，还有哪几个 small media 和 large， 我 们把 media 给给定一下， petting 杠 media 十二，好，这样来，那我那边呢，你给多少，它就可以来多少，你看现在我给的是 large 吧，那如果说我现在变变化一下，不再是 large， 而是 media media 保存，它变小了吧，它的 padding 变小了啊，这个可能大家看不清，我把颜色给大家重新指定一下。呃，这个颜色呢，我们假设就直接用 零八，零八零八吧。啊，这样就看得更清楚一点。哦，我说错了，是它零八零八零八，然后这个呢，有一个 f 九， f 九这样子，嗯，这个看的就很清楚了，这是 media， 那 如果我是 large 呢？我把它变化一下，把它变成 large， 好，就可以看到了，这个是 large， 如果我现在再切一下，再切一下啊，比如说切成那个 small 啊， small， 你 看它就变得这么小了 啊，就变得这么小了。所以真正你在做这个样式体系设计和组建库，或者组建设计的时候，一定要再用这种思维去考虑啊，一定用这种思维去考虑 set component 是 cs ingest 的 一种解决方案啊，然后这个猫九点 cs 呢，是 cs 猫九的方案哇，这几个呢，是刚才给大家用一个简单例子给大家举例说明的，你正常情况下在自己去架构一个项目的时候呢，就从这些点来去考虑啊。刚才以写一个 header 和写一个按钮给大家演示了 不同的方案是什么样子的啊？好，这个呢，我们就先给大家介绍这么多啊，差不多基本上把这个大致的内容呢，大家都有一个基本印象了啊，都看了一眼，有个基本印象。那我们来看， 我们刚才在编辑这个代码的时候呢，大家可以发现写的 cs 样式啊，这些内容其实还是比较多的，对吧？那能不能够简化，就说我不写 cs 样式，或者我写很简单的 cs 样式就能够实现 这个基本的。呃，常规的这些业务需求和样式呢？当然可以，这个其实就是 tailwind。

好，这节课我们来学习一下安装 vivo clea 与创建项目。 vivo clea 呢是 vivo 官方的脚手架工具，极大简化了项目的初步化开发、构建等过程。那么接下来呢，我们首先来安装一下， 那么如何安装呢？我们通过这样一些命令在 dos 窗口进行安装，那就是这个小黑窗口啊，俗称小黑窗口。嗯，这个窗口的话，我们使用这个命令 npm install 杠 p 复制粘贴到这里就可以进行安装了， 因为我这里已经安装过了，所以就不再安装了。那安装过的同学可以直接输入 view， 然后刚刚 versus 一 样 s l n 好， 回车来查看你的脚手架的一个版本。 好，安装好之后呢，我们就可以来创建自己的 view 三项目了。那如何创建呢？比如说我们要在自己的目录里面 去进行创建，维有三项，好，来进入到 demo 里边，那在这个地址栏这里，我们直接输入 cmd， 打开我们自己的这个项目的窗口， 我们在这里面呢输入 will， 然后空格 create c r e a t e my 杠 will 三杠 app 好， 回车我们就可以看到它，让我们去选择 will 的 版本，对吧？第一个是 will 三，往下是 will 二，那我们回车 等待它去下载 这个时间，嗯，下载的过程呢，就是看你个人的一个网速。好吧，那么下载完成之后呢，我们需要去执行这么两个命令，这里已经标注出来了，第一个呢是 c d， 然后空格慢 杠 vivo 三杠 app 好， 进来之后呢，我们在 n p m run serve 回车， 此时呢就已经启动了我们的项目了。启动项目的话，那我们就可以直接使用这个地址来， 哎，复制一下，打开我们的浏览器，把我们刚才复制的地址粘贴到浏览器里面， 那咱们这个项目呢就打开了，当然这是第一种方法创建，呃， vivo 三项目的方法，同时来咱们把这里退一下，还有另外一种方法可以创建，你比如说像 vivo 空格 ui 回车， 它是给我们打开了一个图形界面，那我们可以点击创建，然后来到 demo 这里去再次创建项目，比如说 my 杠 app， 是 吧？然后把这个关一下，下一步，那我们选择 will 三，好，下一步， 当然我们也可以去创建 vivo 二的项目啊，在这个图形界面，好，稍微耐心等待一下，他在创建项目的时候呢，是根据你本地的呃，网络情况来定的。好吧， 那么进入项目之后，这里咱们关一下，可以看到，哎，咱们这里呢是有插件，对吧？然后运行的依赖，哎，这个 它现在还在安装好，这个是配置，这里呢有一个 server， 我 们可以点击，点击这个 server， 点击 server 之后来咱们放大一下，再点击这一个运行，让它运行一下， 运行成功之后点击启动 app。 那 么同样这个 vivo 三的项目呢就创建好了，和咱们刚才创建的 vivo 三项目呢是一样的。 好吧，这呢是两种创建项目的方法，希望大家都能够灵活的使用。 ok， 那 么咱们这节课呢就说到这里。

好，我们来看这道题， g s 中深浅拷贝有什么区别？分别有什么方法实现？ g s 当中的深拷贝和浅拷贝是两种不同的对象复制方式，它们之间的这个核心区别呢，就是在于如何处理对象内部包含的复杂结构，尤其是嵌套的对象或数值。我们先来说浅拷贝， 哎，前拷贝，前拷贝呢？它就是说，呃，创建一个新对象，并将原对象的所有属性复制过来。但如果原对象的属性值是引用类型，那么新对象对应的属性将仅复制 复制这个引用，而不是复制引用所指向的实际对象。因此，当属性是一个对象的时候，那新旧对象实际上是共享一共享这一对象的引用。这也就意味着新对象中引用类型属性的修改会影响到语言对象。好吧， 嗯，把原对象的所有属性复制过来。 好，那我们怎么实现前拷贝呢？来，写一个 script。 那 来 let 一个 obg 一， 它等于，哎，这里 a a 一， 嗯， b 是 一个对象，那这里有给个 c 吧。好，然后我们来 let 一个 obg 二等 object 点 a c， 让它去呃前拷贝一下 obg 一。 好，那我们来对 obg 二点 b， 点 c， 给它改成三，然后我们再来 ctrl 点 log 打印一下 obg 一 点 b， 点 c。 好， 报错，来，右键打开浏览器检查 控制它是不是三啊，对吧？我们明明改的是二里面的值，但是原对象里面的值也发生了修改，这就是前拷贝。那深拷贝是什么呢？ 哎，深拷贝，它就是创建一个全新的对象，创建 一个全新的对象并异归的复制原对象的所有属性、属性及其引用 引用类型的属性所指向 的对象，那这样的话，即使属性是对象，新旧对象之间也不存在任何共享。引用修改新对象不会影响原来的对象。那怎么实现呢？我们就可以用 jason 点 pass 和 jason 点 string five， 好 吧， jason 点 pass， 然后里面 jason 点 string five， 然后这是我们要拷贝的对象， 这样的话就可以实现深拷贝了。当然他除了呃这种拷贝方法还可以用，还可以用递归的形式来进行深拷贝。 总的来说啊，前拷贝只复制最外层的引用，深拷贝呢，则保证了所有层级的数据能被独立复制，从而实现原始对象和复制对象的完全隔离。那么在实际的开发过程当中，我们要选择合适的拷贝方法 来对应你项目的这个需求。好吧，这个呢，就是深浅拷贝他们的区别以及该怎么去实现。

关于 ui 设计稿转前端代码这个事情，它属于研发提效的其中一部分， 那关于这个事情呢，我们其实一直在努力，我们也相信很多同学都考虑过一这么一个事情，那就是 u e d 这样的设计人员设计出来的设计稿，能不能直接转成前端的代码，那如果能做到这一点的话，很多的活其实是可以交给这个工具去完成，那减少了整个研发的一个冷月。 那当然这里的代码是需要一定的标准，并且符合一定的规范，而且最重要的事情是生成出来的代码是能适用于生产环境，属于企业级的代码的标准，否则生成出来的代码，那就是一堆无用的代码。 现在随着 ai 技术的发展，各个企业各个厂商都在拥抱 ai， 所以呢，在这种大背景下呢，给 ui 设计搞转前端代码这个事情提供了一种可能性。 现在很多的公司他其实都会去使用线上或者说互联网的工具平台去完成设计稿，那比方说 master go 和飞格玛这样的工具，其实很多公司都在使用， 那因为我们公司使用的是 master go 这样的一个平台，所以呢，以此为例，这个方案呢，使用到两个，两个东西，第一个是 ai 的 编码工具，第二个是 master go 的 mcp。 关于 ai 的 编码工具呢，现在市面上太多了，而且模型也很多，那我这边首选的是 q， 为什么？因为它是免费的，可以免费的去使用。 然后呢， costo 是 一个比比雀儿，我认为可能效果更好的一个工具，那后面可能会有一个对比，那首选呢是雀儿，因为它免费， ok， 那 它主要的流程是什么呢？首先第一个呢是获取 mastergo 的 用户的令牌，那这个令牌呢，是为了让我的编码工具去调用 mastergo 的 mcp 的 服务。然后呢 获取了令牌之后呢，在我们的 ai 的 编码工具下去配置我们的 m c p， m c p 的 收尾，那下一步再去获从马斯购上获取我的设计稿的链接，也就是说我要把哪个页面要转化成我的前端的代码， 那配好了 m c p 和有了我的链接之后呢，在我的 id 下输入我的提示词，然后让我的编码工具去生成我的前端的代码。 那这里面的逻辑其实也比较简单，就是在我的 id 下输入我的提示词之后，然后它会通过 id 配置的 mcp server 服务去掉 master go 的 dsl 文件，那关键其实就是这个 dsl 文件，然后它进行一个解析，然后对应的生成前端的页面， ok， 那 这一个需要能完成。这个设的前置条件有一个它是针对于 mas go 的 账号的，也就是说 mas go 必须是团队版级以上，如果它没有，你可能就获取不了它的 m c p 的 接口， 所以说它针对于个人版或者免费版的其实是不支持的，所以说这是一个前置条件，那下面会演示一下获取个人访问令牌的事情。首先第一个去它的一个官网， 然后进入工作台， 然后去个人设置，个人设置这里面有一个安全设置，那这边比如说生成令牌，生成令牌这一个生成令牌之后需要去配置到你的 id 的 工具， 那这边我有相应的一个流程的介绍，那第一步最核心的就是我的 ai 的 编程工具里面去配置我的 m c p， 下一步呢是打开我们的 id， 这边我也那个这样举例，那这边呢，我这边是生成了一个 v u e 的 最基本的一个代码，呃，它只安装了一个 v u 三的一个一个模板，模板的一个工程。那首先呢我们去设置 选择 m c p， 然后从市场添加选择 master， 然后呢点这个加号，然后把我们刚才的那个令牌复制进去，那这边我就随便先写一个，那其实如果说你们是斐格玛的用户，其实也可以进行一个使用，那这边也能进行一个添加，那这边我们主要还是使用我们的马斯勾。 做完这一步之后，下一步选择，这边是选择我的 m c p， 比如的 v s v s m c p， m c p 配完之后呢，下一步就是获取 master go 的 链接地址， 也就是说如果说你是希望把这一个页面，我要去自动去生成我的我的前端代码，那我们现在是要把它选中这一个这一个封面封面，然后复制的是这个东西， 那这里的关键点是我必须要有这一个 nano id， 也就是说我的图层的 id 是 必须得带的，那是因为 mastergo 的 mcp 的 服务，它需要这样一个地址才能定位到这个界面，那所以说我们需要把这个东西复制下来， 那这里我们其实我这边其实已经说明了，说明了这个的注意事项，那下一步呢，其实说白了就是我要在我的界面里面写我的题字词， 就是在我的 id 下去生成我的代码，那这边的是首先第一个是我的 mas 勾的一个地址，就是刚才我复制下来的这个地址，然后呢其实是是根据 mas 勾的设计稿生成一个可单独打开的新的 v o e， 并写入到 ip 点 v o e 这个文件里面使用我的标准的一个主监库，严格按照设计稿百分百还原响应式布局，那这个你可以自己去定义，或者说自己有自己更好的想法的话可以自己去写。那我这边的是是按照这个方式，我直接把它复制过来， 放入我们的 id 一下，然后我这边直接让它去运行，然后我这边可以选择我的 hold， 让它自己去选择最适合的模型发送， 其实我们可以观察一下，就是说它的整个的一个流程，我们发发送了一个信息之后呢，呃，圈儿它这个 build 会去看这一个语义，它会发现有 master go 这样的一个东西的时候，它会去调用 master go 的 mcp， 然后这边这个其实就要去获取它的一个 dsl 文件， 那我们等待一下， 当圈儿给了你一个丁董这样的提示音的时候，说明它的一个任务已经完成了，然后我们可以看一下它的整体的一个内容啊。 首先我们发了一个提示词之后，然后呃雀儿呢发现可能有 m c， 有 mas go 的 上下文，然后呢调用了 mas go 的 m c p 的 一个接口，然后去获取它的 dsl 文件。 呃，然后他获取了马斯克设计稿的 dsl 文件数据之后呢他要去装我的主键，主键依赖，然后呢根据 dsl 数据生成我的 vue 的 页面，然后再写入到 app 点 vue， 那 确实符合我们的现在的一个预期。接下来这个事啊，就是安装主键，主键，然后呢去写我的 app 的 页面， 然后呢最后呢他贴心的帮我也启动了我的呃前端的 server， 然后下面是其实是属于他的一个总结，那我们可以看一下他具体做了什么事。他主要写了，写了可能写了两个文件，第一个是啊，加了，加了依赖， 第二个就是前端页面，然后呢我们去浏览器去打开看一下， 嗯，这个效果还行，至少该有的有。 那这个是我之前的一个测试啊，在马斯格的一个设计稿，然后呢生成的这么一个页面， 然后呢我还可以进行让它，让它调试，也就是说我发现我的页面的还原度不够，然后再帮我进行一个优化，当然了，我们觉得它不 ok， 我 们可以再截图进行一个优化。 最后呢是一个总结啊，就说其实你会发现它并没有百分百的还原设计稿的一个内容。 ok， 那 我这边呃的一个研究发现呢，其实它依赖于三个事情啊，第一个设计稿的标准化，也就是说我设计稿它随便， 因为刚才已经说过了，我们的原理是它获取这个设计稿的 dsl 文件，那 dsl 文件是基于我这一个呃页面的设计稿所生成的， 它有很多的图层，它有很多的结构，比如说我这个设计稿，如果说加了很多无用的图层，就像我 h t m i 同样的页面展示， 但是我写了很多无用的代码之后，它其实的可读性就比较低。那设计稿也一样，如果我们对设计稿它的一个图层，它的一些动效，它的一些样式做了一些精细化的管理，那我们生产的质量就非常高。 第二个是模型的一个差异，就之前也说过 chart 这个呃因为免可能是免费，没有特别好的东西啊，所以说免费的东西确实比不过 coso 的 那个生成的一个质量。之前我也试过用 coso 去写它的一个整体的一个质量，会比 chart 会好很多，有兴趣的同学可以试一下。 那所以说这个是模型的一个差异，那随着我认为随着整个 ai 产业的发展，后面的模型可能越来越强，那这个事可能做的人做的越来越精细化。那第三个是提示词， 那我这边是最简单的一个提示词，我也没有让我的呃模型去参考我的代码的一些结构，我随便找的一个 呃设计稿，而这个设计稿也不是我们公司的，因为可以看到这个页面其实也不算是我们公司的页面，那这个是随便去找的一个呃一个列表的一个页面去让他去生成的，那实际上如果结合一二三，我相信他能生成企业级可运用的前端的代码，减少整个研发的一个周期。

往上爬，第十八题虽然是模仿了多多的加密，但既然比官网加密啊，设置简单了一大截啊，那么像今天我就带大家来搞定这个十八题，从网页分析到代码谱环境都会有完整的章节，来我们看一下十八题， 这十八题有啥难的，模拟大厂加密算法对吧？来我们来看一下啊。首先鼠标右键点击检查，打开它的工具，我们看一下啊，点击第二页， ok， 分 页之后，我们来看一下它加密啊，鼠标右键点击复制里面的 c o l 我 们的背写格式，然后直接快速构建一个 action， 需要更多爬虫逆向学习视频以及啊海量的爬虫项目员吗？可以点击我的主页来进入我的抖音粉丝群来进行获取。然后像在这里我们去新建一个啊，十八题对吧？十八题好像我之前也没讲过 来，刚好今天讲个新的案例啊， demo 十八。然后十八题来新建一个拍摄文件，这个网站我也没有处理过，说实话十八题我也没搞过啊，可能里面会有些慢，但是希望大家理解一下。好吧，带你们看一下真实的用场景是怎么样的，各位，你可以看到我也是没有处理过的 对不对？可能我在做的过程当中，可能我会用到很多的谜句法，一步一步去排错，一步去找你看，就是你们平常如果遇到一个我没有讲过的网站，你们自己要知道该怎么去处理明白，不要学的那么死板。可以，这个很重要啊，来，我们来看，首先我们可以看到在当前他的返回也是 jason 啊，点 jason 九分钟的答案是，反正是。首先我大概看了一眼直接请求，然后小菜鸡，对吧？不好意思，大家骂我小菜鸡是吧？搞他来，我们来看一下这里面首先可以看到有个 m 头部参数，其次有个斜搓， 然后在 cookie 里面有个 s， 还有个微，什么什么，这个我也不知道是不是对不对？我不知道他是不是假名，我只知道这里看这个 m 跟这个应该只有这个 sm 吧，不确定对不对，去分析一波来看一下。首先 先把这种铭文已知的先去找一下来，直接点启动器，点击我们的肾的就是堆栈， 你用 x 段点也可以啊，这个地方我因为刚刚我讲的 x 段点，是吧，我们在这里再用 x 段，你看，我教你们用来直接点击加号， ok， 然后进行分页，然后断点，然后断点之后向上推，没了 ul， 我 们的 id 没了，在这个地方我看一下啊，这个地方我看一下参数入的一个 comfico， comfico 里面是没有我们的请求头的啊各位，没有请求头的我瞄一瞄，看一下这个代码，大概瞄一眼 这个代码的话，可以看到它里面的话是也涉及到了一些混淆，对不对？呃，遇到这种混淆啊，我第一反应先把它还原再说，呵呵，对不对？先把它还原再说，因为还原之后可能我们就能够更加精细化的来看到它里面的一些处理，对不对？来，直接砍去 a， 砍去 c， 当然了，它可能不是这个文件啊，当然是不是我们也不清楚，对吧？直接还原再说，来，还原 好，来，我们还原之后我们大概瞄一眼，瞄一眼的话，其实我们就能够看到他其实在这里是不是在这里？你看，你看还原之后的代码很清晰，一眼就能看出来他在在哪里，对不对？你看都不用调试，你看这就是为什么我平常我喜欢做还原，你如果没有的话，你说实话你还去调试还原点少这种混淆的， 如果你不还原的话，那你就要去调调的话比较麻烦。来我们看一下啊，他是不是在这里比较明显的关键字嘛？点 m 是 吧？点 m， 呃，然后我们再往上看一下，往上看的话有点 ps， 点 ps 在 这里， 然后在下面的话他又有做一些额外的一些叽里呱啦的一大堆东西， ok， 管他处理的什么，对吧？在这里怎么办？ 首先找到核心代码，什么叫核心代码？我们就要去观察，首先我们当前的点 m 在 后面是没有被处理的，这只有在这个地方是有背景处理。我看一下这个方法啊，阿贾克斯。我们在浏览器里面去看一下啊，在浏览器里面找到折叠，折叠，折叠这个吧，在这个里面点 m， 首先 t s 在 这里，点 m 在 这里，对不对？你看打断点 我看一下啊，在这个方法里面我需要去观察当前的 m 在 下面有没有被处理，我看一下当前的结果啊。首先他是做了一个加号，然后这个括号的结尾是在这里，这是一个整体的点 m 的 生成，是他吧？ 哎，这不是模仿的那个之前老板的小红书吗？他在上面是做了一个取值，你看这作为取值，然后后面的话是做了一个执行，对不对？遇到这种代码不要慌，对吧？两种方法，一种直接全勾， 可以接全扣。那么我们现在我们的主体部分，我们先去找一下他的生成，他的生成是在哪里？是在这里，是在这里，然后这个是 t s 的 生成，然后这是一个小列表，这个小列表的结尾是在这里，是不是在这个整体部分？那么我们遇到这种代码的时候怎么办？直接考虑做全扣来找到他的结尾， 结尾，结尾，哎，他结尾到哪去了？发括号到这里，然后这个括号看一下啊？这个括号到这里，对吧？那就是这个部分来，我们把这个主体部分给他扣下来，然后手动的一个个去扣，对吧？这个是最方便的方法， 但他里面可能有些代码扣不了啊？扣不到，扣不了的话，等一下我再教你们处理，好不好？然后我们来看，嗯，这个是不是就是一个处理方法？然后这个方法的主体部分，我看一下它的返回结构是什么样子的啊？朋友们？呃，这个方法的主体返回是基于它， 呃它的，那我们直接打印这个参数就可以了，我们直接打印这个变量， 然后我们等一下再去优化来，我们运行直接报错，然后看一下报错问题，呃，他没有报错，然后他没有报错的话，它里面返回是个列表，对不对？呃，返回是一个列表，那么我们现在首先它要先走第一个逻辑，要先把 ts 给它生成， 对不对？要先生成它，然后 ts 生成之后，然后再来生成它，然后它生成之后再来生成最终的拼接的值， 对不对？那么我们最终把这个代码来进行优化来，我们只留下主体部分，好吧？只留下主体部分。首先第一个，这个是 t s， 是 不是 t s 啊？第二个，这个是用来拼接我们的 m 的 前缀，这个是拼接 m 的 前缀，这个是用来拼接 拼接，嗯，拼接 m 的 前缀。 然后其次我们在后面这里是做了拼接来得到我们的 m 的 值，你看优惠优化代码，你看这个是 m 的 值， 上面这个是。呃，这个 ps 的， 这个 ps 的 应该没问题啊，是这样的结构，但是大家请观察，我发现它在后面这里也有一系列的曲值，但是不知道它取的是什么， 我们要手动去观察一下，看一下这个里面他有没有套路，有没有坑在里面啊朋友们。然后我们看一下下面这个地方他取的是什么？看跟我们就没关系，拍的子头部，然后头部等于我们的。呃，一个 time 和一个 m 没关系，这个是一个拍的子，里面的 这个是版本。什么？这个东西不用管，这地方是固定的，一个固定注册，然后上面这个地方的话应该是取的是我们的 tab， 然后取里面的 ts 的， 然后这个 ts 的 生成，我看一下这个对象里面的 ts， 那 就是它啊，没问题。好，那么这个主体的部分是不是就是这样的？各位， 你看是不是这样的？这是它主体代码，学会拆解代码啊，然后拆解完成之后我们在这里把它直接打印，打印的话这个地方我们要还原一下啊，这个地方我们直接点 m 吧。呃，懒得搞那么麻烦，上面给它进行声明，为一个空对象， 是这样结构吧，来， ok， 完成之后我们现在来看，分别来进行取值，就不要搞那么麻烦了，你看先会报错，因为它报一些方法没被定义，以及它也会没被定义， 那么在这里我们现在开始来做第一个调试，来找到它的开头部分，也就是这里打个断点，一个一个取值，把叉刷断点给删掉了啊？删掉叉刷断点 这十八题应该也很简单，看了一下这个题目，好像不难，来我们看一下。首先前方的取值取的是一个空对象， 各位请看，它是一个空对象，当然了，如果你们为了让你的代码可以写的是一个空对象，当然了，如果你们为了让你的代码复制这个整体的 opcode 也没有关系，你也可以直接取空对象， 明白吗？根据你们的需求来，对吧？但是你如果这样取的话，那么刚刚我们在这个地方啊，你就就就就要把它还原了，不能，不然的话他没有纸了， 明白吗？你们就注意一下，好吧，你可以这样去做，但这样做的话就比较保守一点。然后其次我们再来看一下它里面的方法，来点击它跳转，这是它的主体方法，在它上面， ok， 那 么我们在这里去找到这个方法，来找到还原的代码，去找到它来 ctrl 加点击跳转，跳转之后这是它这个主体部分，好像挺简单， 这个地方不是可以直接全扣吗？啊？李梦同学，你是遇到什么问题？我看了一下这个代码，好像还是没有什么特别难的地方 好，然后报错，报错的话这个地方幺九八三，幺九八三去找到他，幺九八三是一个还原的代码，你看幺九八三其实上是一个还原的代码，我们可以没有必要， 没必要这么去处理。你看这个地方啊，我跟大家讲一下，没有必要去直接这个还原的代码，我们是可以不要，明白吗？可以不要，当然你想要也可以，但是你们要注意像这种他有，你们要去看一下有没有反混小检测。什么叫反混小检测嘞？我给你们找到这个幺九八三，你看这个幺九八三它的最终的赋值的接收的位置是在，你看 它是一个用于还原当前的 js 代码，看一下它是用于还原当前的 js 代码的，那么像这种方法，它里面可能会有个逻辑，会干嘛呢？它里面会有反格式化检测啊，这是第一个，第二个它在本地的执行结果跟浏览器的执行结果会导致不一样， 会有这种问题在里面，明白吗？会有这种问题，那么在这里我们怎么办呢？首先我们找到这个方法啊，这个地方还不对，不是它，我们要找到它最终的复制位置啊，你看幺九八三，在这里啊，幺九八三的声明是在这里， 其实它是一个主体的还原代码，你看，那么在这里你看啊导， 直到是照下来生成，是吧？ ok 啊，那我把它讲完吧。好吧，来我看，那么这个地方你看，我们可以尝试来还原一下这个地方，其实说实话我们可以手动还原啊，可以用手动还原，当然了，因为我们考虑到等下后续可能会有代码处理，然后你看这里会有个列表，对不对？这个地方我们可以看一下，它在浏览器里面同样是有声明的， 第一个没有是吧？倒在这里，那么你看我们正常扣代码是不是就是全扣吧？我们都会这样去扣，对不对？那我跟大家讲一下，这样扣你信不信他有问题？ 当然我也不知道啊，我不知道它有没有问题，有可能没有问题，你看右键执行来报错，报的是 v m o p s 的 问题，哎呀，怎么报这个了？那我们把这个 v m o p s 给拿下来， v m o p s。 搜索找到它的定义位置，在它的定义位置把折叠，折叠是一个列表，直接选 c， 然后放到它的上面，你看好直行，大家请看它在这里会报错，看见没有 打全扣就行了。哦，我不做全扣，全扣，说实话你里面还有其他检测，你看这个地方，你看他会报一个异常，你看报什么？一只 note five x 不是 一个方法，你知道为什么它不是一个方法，因为这个地方在还原的时候就是这个还原代码，会导致它报错， 明白吗？会导致它报错，所以我们在这个地方啊，其实像这种，我给大家讲一下，这种你们知道是为什么吗？因为在浏览器的执行当中，它这种方法其实是为一个整体的时候，我们是没有去执行的， 跟浏览器不一样，所以从而导致我们当前取值，这个地方取的值是不对的，我们可以去调试，可以去看一下，我们可以看一下这个方法，你看我打一个断点右键 bug， 你 看 bug 之后，我们去观察一下当前的取值，你看把这个方法在控制台里面点击输出， 看到没有？它的输出是一个未定义，看没有，可以把它还原吗？你看它是一个一，一是下标啊，然后取这个方法，你看，但是我们在浏览器里面，我们可以看一下，浏览器里面啊，又是一个什么方法？来，我们进入这个模式，进入啊，进入，然后是在这里，你看这个地方，我们把它执行是不一样， 看朋友们是不一样，它前面是一样的，为什么？其实说白了就是我们当前的这个逻辑的问题， 对吧？这个是 nint content， 呃，感觉有点像，我也不清楚，对吧？因为这个题目我也没做过来，那么在这里我们把还原，你看如果遇到这种情况，我们可以直接这样去处理，直接右键复制它最终的结果，这样的话可能会更好，明白吗？这样可能会方便一点，这样的话，那么当前它的得到的值就是正确，明白吗？ 好，那么在这里我们现在可以看到再次报了一个错误，这个错误是在代码的第六十行，我们依次地来找到它六十行这里， 它这个指向是幺九八三，哦，没问题啊，六十行来，那么在这里我们去找到它的还原之后，代码六十行，也就是它吧。点击跳转，里面掉了一个 b 方法，是不是掉了一个 b 方法？ b 方法的话在下面，然后在 b 方法里面会有 int content 的 做了一个 e 部的一个处理。各位， 我不确定这个地方是不是异步，我们可以去看一下，对吧？因为如果他的返回是为 powers， 那 你说实话，我不想这样，对吧？我不喜欢去处理 powers， 我 最喜欢，我比较喜欢直接返回，结果可能好一点，明白吗？呃，没关系，我们先试一下，先把代码跑通先，再去扯其他事情 来，然后在这个里面去进执行，执行会报错，你看报一个 n t 一 直 no 的 com， 没不定。 ok， 那 么这个地方我大概就可以清楚了，它应该就是一个异步，我们来看一下啊。来，首先我们在浏览器里面进入这个方法 app， 呃， apple 载入，呃。然后它的载入的话是调用的，第一个下标是在这个方法里面，是它吧，打断点进去这个方法，然后在 b 里面进去这个方法，然后 n t 在 这里，对不对？你看，我看一下这最终结果，我看一下。返回是不是这个 promise， 呃，不是 promise， 它这个地方应该就是拼多多的那个 n tencent， 应该是拼多多的 n tencent， 只是说它这个地方的话，它没有以 promise 的 形式进行返回，看到没有，它是直接返回注册，它不是 promise， 你 们注意一下。但是拼多多的话是 promise， 它直接返回是 promise， 所以 你们注意一下就可以了。念嘛，好，那么在这里它没有问题，那我们直接去扣这个方法， n t 来投这个 nt， 来找到这个 nt 来点击跳转，找不到这名位置，很尴尬。括号四，大家请看一下。其实当我看到这种格式的时候，我给大家讲一下，你看，我立马我就会思考它是谁？你们觉得它是谁？ 你们觉得它是谁？ ipad 吧，嗯？ 是不是 ypark， 对 不对？这个地方它是不是 ypark 啊？你卡住了，你去找啊。哥们，你这个 ypark 一 看就是加载器啊，对不对？你看这个 nt 是 不是加载器，加载器点过去找到它主体的加载器的部分，这是不是加载器？这是一个整体的 ypark， 你 可以考虑的是把这个整个 ypark 全部给抠下来，当然这也是种方法，它这个地方就是用的拼多多的那个文件，看到没有， 他只是对里面额外的封装了一下，是吧？啊？那你这里怎么会报错嘞？你是哪里搞不定这掉下边不直接掉四吗？哎呀，不多了，来我搜索，我找一下他一二三四， 我把这个地方该折叠起来，我看一下他的结尾部分，稍等一下，因为我怕他里面拼接了一些其他的方法，等下搞得乱七八糟的， 我看一下总体格式，呃，它这就是拼多多的啊，就是拼多多的，那么这个的话我们直接把它全抠啊， 对不对？这个方法我们可以直接全抠啊，我们直接从这个地方把它全抠来， ctrl a， ctrl c， 拷贝，拷贝之后，然后我们在这里我去新建一个 gsl， 把它放在一起来，新建一个 这个拼多多啊，这个比拼多多要简单一点。是的，看起来是的，来扣的，这个是我们的一个。呃，写个 pass 吧，来扣个 pass， 然后在这里把它拿下来，是吧？有同学已经把它做过了，是吧？来，我直接把它全部收起，全部收起之后，我们现在在这个地方啊，我们需要去指向一个值来接收里面的结果， 我们应该在这里它有个 nt 接收了我们的 n 值，我看下 n 值，它有个 nt 接收了，看到没有？我们把 nt 改掉就可以了。把 nt 给改掉，把 nt 改成 word， 点 nt 对 不对？然后 word 没有， word 没有，我们等一下再找它，然后在外面我们就直接把它替换，这个地方我们直接把它替换。 word 点 nt word 点 nt。 没有去声明 word 来把代码折叠，折叠之后然后在上面进行导。 首先声明一个 word， 他 这里好像要补环境，是吧？ a logo， 呃，好久讲同龄好久讲过是这个。呃，同龄。你是做 vip 课程吗？ vip 课程现在是哪个老师在上课？应该是不安吧。啊？是不安，不来，在这里我们通过导播的方式把导入这个地方还是要补环境，是吧？来导入 啊。顾安，那你可以问一下顾安老师维斯盾其实说实话他其实就 q 代码，你把阿卡曼学好了维斯盾就能搞定好，然后导报报错。哦，这个报错一看就是环境问题对吧？你看这个是缺了某个东西。看，没有，这是环境问题。环境问题那么像这种是需要补环境的。 ok， 我 们来上一个环境代理 基础课吗？ west 怎么是基础课？不然现在是接受逆向的老师吧。来，我们来看来上一个环境检测。我首先像这种，我也不确定它里面有原形链吗？啊？李梦同学里面没有原形链是吧？没有原形链我就上简单的了，如果有原形链我就上这个高级的试一下， 没有是吧？呃，没有，那我换一个检测，没有的话我用这个简单的检测，这个简单的检测会好一点。呃，会比较简单一点，大家看的清晰一点。好，来，在这里。首先在你这里是补环境不会补吗？还是咋的？你看补个环境。呃。我们看一下，你看这里它直接会有很多的输出， 你看这个都是要补的环境。看到没有？ document 先补报错，记住就是这种，它有报错的，我们先补报错，明白吗？先补报错，没必要去直接把它全补了，明白吗？我们先把报错给它补了，先补报错好，然后在下面的话我们去进行声明。来 word 点 document 等于我们的 document， 然后这个 document 声明为一个空对象，这个其实就是拼多多的。来，我们在下面的话，其实使用 document 来套一个代理，我给他一个个抠出来，没必要抠，抠那么多干嘛。先补报错，好，然后这个地方是在 windows 里面有个报错，是吧？来，我直接快速的补 来浏览器里面把它输出。呃，把浏览器直接放掉啊，我就不去调了，把断点全部取消，删除。 这个地方我要把它转 jason， 右键复制，找到 ai 工具，通过 ai 工具把它转一下。 jason， 我 用 golo 一个一个的抠，挺厉害的。呃，这个其实我跟大家讲一下，它这个里面这个 bug 它只录到了三个， 就是你没必要全抠，我这是把它全抠的，其实它总体它只用到了三个模块，零一二三四，下边为四，然后还有其他两个模块，它只用到三个模块，你们可以进去试一下。就是你们可以单抠 ipad， 就 没必要像我这样全抠 ipad， 对 吧？进去试一下。好，那么在这里我们现在刚夹哪里来了？ 哎，我刚夹哪里来了？哦哦哦。把它转节省，不好意思，当我把这个数据转变为节省 来把它复制。呃。复制之后，然后我们像在这页面当中里面把它进行替换，转 json。 先补报错嘛，这种地方一般都是先补报错，然后这段看一下是什么，这个是一个方法，像这种题，说实话它如果没有什么特别简单用 json， 你 试一下用 json 看能不能把它 或者直接通过 hook 的 方式把里面的这些 dom 一 boss 全部把它 hook， 然后直接复制粘贴，对吧？它里面没有什么特殊的检测的话，呃。然后这里有个 block 的 检测，这种报错的话我看一下。啊，这种报错我看一下它应该是上面的哪个逻辑里面的检测。呃。没关系，我们去可以调试一下 block 回滚，呃，这个回滚应该是在这里这个里面的，看一下是不是这个里面的啊？啊？看一下。 哦，不是他不是他的话，那我你看像这种我也不知道他是什么，如果不知道的话怎么办？推，这个地方已经补好了，往上推，他上一个是什么？我们一个个推嘛，就是肯定他报错，肯定是跟这几个有关系。未定义本身就是未未定义的，不管他来继续往上推，来把清空。哎，这个还是补环境的来也没啥 来往上推，有东西就补，没东西就直接放掉。来往上推都是未定义。来往上推 也是未定义。来往上推。哎呀，这个地方一个个推吧，来，我们一个个推，有啥补啥，没啥直接放。 补环境一般是从下面往上补啊，这样补的话可能会好一点，就是你防止你到时候补错了，因为有很多时候它有些环境它是由接收码来复制的，它本身刚开始就是未定义，然后由接收码执行之后然后进行复制，像这种的话我们就不要去呃乱补，因为这种补了它会导致你的代码错，这个地方参数为呃二百一十七， 然后这个上面是，呃还是来到了这里，这个地方还是要补， 那么我们把这个地方直接转成我们的 jason， 直接转 jason 编成跳父。呃。不是不是，不要夸我， 相互学习。我只能说大家相互学习，我比你们会的多一点，那我就教你们，我会的多一点，作为先行者，呃。感兴趣遇到问题就问我。呃。然后我们再往上走，呃。上面有个 word 点 let me get， 但是它里面有 object， 最后你们注意一下，发没了。右键执行。 好，我们来看。然后现在的话它报的是什么错误？你看现在报的我们的 lucasoft， 对 不对？现在是 lucasoft， 那 么在这里补嘛？ windows 点 lucasoft， lucasoft 其实是为它的当前的本质一些信息。 这个网站怎么这么多？他不会把拼多多那一套都都都把它摘下来了啊。呃。夏洛是不是把这个都下都把它摘下来。怎么看到有没有圆形的检测？放个代理就可以了，用高级代理，高级代理是可以检测出来的。然后这里面有个方法对不对？哎，我记得拼多多好像没有这个方法哦。有，拼多多也有 啊，这是一个 id 的， 或许。呃。这个是一个 id， 那 么我们补在这个 app 里，然后像这种方法的话，我把它分开补啊，我分开补啊。 ar g s， 然后下在下面打印 document 当前对象， document 点，然后这里我们录一个参数，括号，单引号，然后加号，然后用拼接符双引号，单引号，因为这样的话我就知道它是什么东西，方便取值来。右键执行 好，再次执行之后，然后再次的是一个方法， document 里面的一个方法这种是事件添加这种事件添加的话我们不录的参数也没事。 好像没什么啊朋友这个李峰同学我看一下这里面好像没有什么特别的难题啊就是基本的环境呢它这里面都没有什么东西了好扫。这个好它里面就是环境啊你照着它这个补就好了你是哪里遇到问题吗哪里没补好还是怎么的。嗯 它后面的话报错报了一个方法这个是一个方法看一下 email 那 我就补个 email 补完啦呵呵补完啦然后这下面这个报错就是不是环境问题喽朋友们你们要注意哦这个地方不是环境问题喽这个地方是我们代码的问题哦两百零一行它是做了一个拼接点 t s 没有哎这个地方怎么没有啊我看一下这个地方是干嘛的啊 哎呀我们刚把断点打掉了啊还在这里来我们看来点击分页分页分页。这个地方还原看一下是什么。洛哥我真的服他了呵呵呵。呃可以啦 然后我们这个值是不要的我们这个值是不要的我们只要两个值一个 high 的 值里面的 m 和它和 t s。 呃还有个还有个什么我看一下。没有 base 六四啊 啊一点点喜欢同学你说哪里啊它这个没有 base 六四啊 哪里有 base 六四。它后面直接返回了你看直接这个地方直接返回了返回它了。 我看一下还原之后的代码哦我确定一下好不好我确定一下。呃因为有同学说它里面还有个 base 六四是吧哦哦你是说最开始那里是吧 哦最开始我还以为你是说我已经扣完了，后面还有 base 六四处理。 嗯，参数。然后我们的这个方法是在，这方法是在我直接搜一下，点 m 找不到了，我搜索一下，稍等一下。搜索一下， 这个地方是个落格， 来，我们先用 python 来调一下它啊，稍等一下，来，你直接扣就可以了。明白，这个地方你说白了，没必要去在意那么多，直接把代码给它扣下来就可以。 你说的 base 六是 你说哪个地方有个 c 六十没有？ ok， 我 们在这里我们再来调它吧。好吧，我们再来调它，这个应该是 ok 了吧，来吧，这个点 ok。 哦哦，你是说这个里面，你是说这个？ 那这种的话它是自己这种，这个你不用补啊，它这个在 node js 里面直接可以执行啊。各位，这不就内置的 a p i 吗？是吧？内置的 a p i。 好， 那么我们像在这里，我们直接返回，那把这个代码做一个封装，封装成 effect， 然后直接来做一个返回。呃，但，哦哦哦，不好意思，是我搞错了，我搞错了，我搞错了，我还以为什么呢，我还以为我少偷了东西呢，被你们搞的我懵了。讲，讲的有点久，脑瓜子有点缺氧，不好意思啊，因为讲了差了一个半小时，是吧？脑瓜子有点缺氧， ok， 那 么我们现在 ok 之后，我们现在开始点击调作方法，折叠，折叠来折掉。呃，这个地方我就直接组合写了。好吧，朋友们，我直接组合写了，然后我直接补全，嗯，然后点 com 执行迈一二三，然后使用 print 打印它的参数，把它打印，打印之后我们来看下结果。 哎。哦哦哦，这个写错了，点杠我们的 code 一 点介 s 是 这个吧 code 一 点介 s 慢一二三然后成功返回成功返回之后把 hide 里面的文件替换首先是 m 哎呀我这个拍叉姆的快捷键起冲突了不能直接全选来取到里面的 high 的 值然后是里面的 m 什么所以说补黄金补完了就可以在本地只有三百二十一位网页是四十来之。这长度有啥说法但能解决成功。呃你这个长度应该是你缺了一些黄金没有补 m 然后还有一个呃还有个 ps 啊脑袋有点糊涂了不好意思啊各位因为讲的一点久讲了一点久然后一直在不停的逼逼叨叨不停的逼逼叨叨有点缺氧 ok 呃我们试一下啊来执行请求。 嗯没有 ps。 哦哦这里你看是吧看我们开始犯这种小毛病了 好请求之后我们在这个地方哎你看都是些小毛病对吧把它转成是镜直行行成功没问题啊那么十八题 拼多多的它这个其实应该就是拼多多 intoken 的 但是没有拼多多那么多的检测然后这个地方你们正确做分页。好吧各位这个分页的话我刚刚在第一个题就讲过了看一下各位什么有什么问题没有各位有没有什么问题这个题目的话重点是考验大家的补环境的能力了其实是吧其实补环境也还好就这么点环境 一二三四五六八八个环境简单 so easy 轻松拿捏对吧如果各位你们有需要的话可以买这个原码也可以免费发给你。

我们来看这样一种效果，鼠标移到哪里，按钮就在哪里发光，文字和边框都跟着变色，并且还有 y 发光，这样一种鼠标跟随发光，是不是非常的酷炫？接下来我们就来拆解一下 它是如何实现的。首先是 html 结构非常的简单，三组一样的 button 里面包含了一个 spin， 因为我们要让光标跟着鼠标走，对吧？那肯定得抓取鼠标的坐标，为此我们增加了一段 gs 坐标，然后把它们存到了 c s 变量中。这里还有个 x p 相对位置，数值是零到一之间，待会会用来控制颜色变化。有了坐标，接下来就要画这里的光斑了。我们在根尾元素上定义了这么多 c c 变量，而这几个数值由于我们刚刚的追溯逻辑关系，都会动态更新。关键属性来了， radio gradient， 也就是镜像渐变，这里镜像渐变从 中心向外扩散，颜色由亮到暗再到透明。那光斑怎么跟着鼠标走呢？关键就是这个计算，也就是鼠标坐标减去光斑的尺寸的一半，最终得到了光斑中心的位置。这里 fix 的 作用呢，是让光斑相对整个网页窗口定位，也就是说无论你是否滚动页面，坐标原点都是左上角， 这样计算才准确。另外你们有没有注意到光斑颜色也在变化，鼠标从左往右移，颜色是从绿色变成蓝色，一直到红色，非常的酷炫，其实就是这一行在起作用。这里的杠杠 x p 就是 之前这里的计算逻辑，也就是鼠标 x 坐标的相对位置范围是零到一，所以这里乘以五百就得到了摄像值， 也就是鼠标从左到右，摄像从零度变到五百度，就形成了这种彩虹色的循环。最后按钮是怎么发光的呢？其实是四层叠加， 我们来一层层看一下。首先第一层是边框按钮发光，这里用了多重背景，第一层是按钮内容区的纯色背景，第二层是光斑渐变，用于覆盖整个按钮。最后一层呢是边框区的黑色背景，而且第一层用了 paddingbox， 也就说只覆盖了内容区，所以光斑就透过边框落出来了，这样边框就有了发光效果。 第二种是外发光，使用了 after 元素，在按钮下方画了一层光斑，并且使用了 blow 的 方式强力模糊，这样就形成了按钮周围的外发光效果，看起来像真的在发光一样。然后是按钮表面的内阴影， 这层比较关键，我们使用 before 元素呢，在按钮的最上方盖了一层纯粹背景，用于盖住按钮内容区的光斑，然后使用 box shadow 添加顶部内阴影，用于模拟光照的效果，让按钮看起来更有立体感， 就实现了按钮内容区，它是纯色的，只有边框在发光。假设我们不做这个处理，效果是如何的呢？我们可以看到按钮的内容区也全是这种光，就导致效果没有那么好，我们再恢复一下，看 这个效果对比还是挺明显的。最后是文字的发光，使用的是 background clip， 把背景裁剪成了文字形状，然后把文字本身设置成透明，这样背景就能够透过文字显示出来了，并且它的背景 制作成了光斑渐变加黑色多底，所以文字就能够跟着光斑一起发光，怎么样？是不是非常的酷炫？更多有关于这个效果的实现细节和完整代码，我已放到这份实战小技巧中，有需要的可以免费领取。

好，来吧，徐小丹同学，跟袁老师一起来锻炼锻炼，做个类型体操。这个类型呢，要写这么一个工具， get， 普通，它是个版型，传入一个类型，它能得到啥呢？得到这个类型里边的所有的可选字段，也就说这个得到了新的类型呢，他应该是这个样子，你看把这可选字段挑出来了， 那怎么做呢？对，先把那个能写的先写出来吧。 get， 普通，这里边传一个类型，那接下来咋写啊？那我们先把问题简化，我不得到可选字段，我得到所有字段行不行？那这个就比较好写了， k， t o。 你 不要管那个 ai 提示啊，他是错的，我们先对所有的制断呢进行循环便利，对吧？得到他所有的制断吧，要便利，把每一个制断拿出来，作为我们新的类型的制断，然后制断的类型呢，跟原来类型一致，那就是 t k， 那 么这样子以来的话，就可以保证啊，原来是啥样子，那么新的类型就是啥样子，那我们来看一下啊，你看是不跟我原来的类型完全一致的。好，接下来呢，我们就要搞定的是把那些必填制断呢，给它剔除出去， 那么怎么来剔除呢？这里呢，我们要用到一个技巧，就是对这个字段呢，重命名，原来字段的名字是 k， 对 吧？那么现在呢，我可以对它进行重命名，用二十个关键字，比方说吧，我怎么来重命名？我给他写个模板字母串，前面给他随便加上一个 get 啊，拼接一下子 k， 这里为什么报错呢？是因为它有可能是符号类型啊，所以说把它约束为字母串。 假设啊，我就这样写，看一下吧，看一下这个效果，你看每一个属性前面是不是加了一个 get， 哎，这还是一个场景哦，就是我们基于原来的属性呢，得到一个新的类型，新的类型呢，是原来属性名的一个变体，那如果说还要把那个首字母大写的话，你还可以给他加上一个 capital nice， 然后这样写的过后呢，你看又得到这么一个字短名字了。哎，那这里的重命名跟我们要去掉有啥关系呢？你看着啊，我们可以这样子，如果说这个重命名给它命名的是一个 never 呢？ never 是 啥？不存在，那就意味着这个属性就被干掉了，你看这样的，我就把所有的属性全部干掉了。 哎，那这里是不是可以这样来，来个三步运算，如果说某个条件满足的话，我就把这个属性给你去掉，用 never， 否则的话就把这个属性原封不动的保留下来，就写成这么一种格式了。那么也就是说我接下来要研究的就是什么条件下我要去掉这个属性。所以我们要解决一个问题啊，知识和能力两个层面都必不可少， 没有知识解决问题的视野和角度都非常受限，你不知道从什么角度入手，没有能力的话，也无法把这些知识组合起来解决问题。要拓展知识，培养能力，那就要从我们的大师课开始。大师课是完全免费的啊，来领取完事了，虽然这个课程呢是免费的，但是呢，我可以保证他强过你以往看过的任何付费课程。 而且大师课里面呢，无论是知识层面还是能力层面都触及的是前端最核心、最重要、最能够影响你薪资高地和职业发展的知识， 像什么世界循环有那些在卷带原理框架的原理原貌优化，你说哪一个不是你必须要搞清楚的？还不用说，大师课整个过程当中还穿插了大量的核心笔面试题，以及我对这些笔面试题给予的顶级解读。而且现在已经有不少的面试官看过我们的大师课，他的面试反馈直接就问大师课里边的内容， 先确认一下眼神对不对。所以呢，不管你在什么样的阶段啊，高新就业也好，跳槽涨薪也好，这个课呢，都是你的必修课。关键这个课呢，目前可以免费领啊。怎么领？咱们账号主页点击头像进入账号主页给你提示，领取完事了。好，那么我们现在来写这个玩意吧，条件是啥呢？条件就一定是这个字段，他是 b 田字段，那就要把它去掉，我只保留和田字段嘛。说 b 田字段要去掉，那么我怎么来知道它是一个 b 田字段呢？我们可以这样，在 t s 里边一个工具啊，叫 required， 把类型给它传进去，它会得到什么呢？它会把原来的类型呢，全部变为 b 田字段，得到一个新的类型，你看一下吧。哎， 里边你看全都是 b 田字段。好，然后呢，我现在针对某一个字段，它类型是一个 string， 那 我就看一下 string 它跟车里边的同样的属性，它是不是一样的，这个条件是满足的是吧？ 满足说明啥？说明这个字段呢，就是必填字段，一样的嘛。那如果说是这种字段呢？你看它是 number 或 undefined， 那 么这个对应的字呢？它这边必填的是 number， 那 这就不满足，对吧？都是同一个字段啊，你这边多了一个 undefined， 那 肯定这个条件就不满足，所以说它是必填字的条件是不是就清楚了？就是什么 t， k 就是 这个字段，是不是跟那个 require t 它里边对应的字段是一样的？一样的话就是 b 填的，它就 level， 否则的话，像这种情况，那么这个条件不满足，那就是这个字段本身好，这样子一来的话，你看一下它里边是不是只有选填了？好，那么这个工具就写好了。代码倒是不多啊，主要是解决的过程还是比较巧妙的。

当被前段面试问到如何实现前端都在时，我们要如何回答呢？我们先来看下这两个案例，这个是基于 a t 幺五原声抓杆抓破了 a k， 这个是基于鼠标事件 moscow moscow moscow 的。 首先先来看一下他可以将对应的元素拖拽到方块里面，可以随便拖拽，第二个方块可以在内部随意移动拖拽啊，就这么两个。其实面试官问这个问题是想知道你对实现交互效果的思路，不同基础方案的理解及细节处理能力怎么样。 首先他想知道你熟不熟悉 a 七幺五自带的那套拖拽 api， 其次对基于鼠标事件手动拖拽的理解。 再者就是看你能不能分析出来这两种方法优缺点以及适用的场景。最后细节处理和边界情况的考虑。所以我们在回答面试官问题的时候，要知道面试官问这个问题的目的是什么， 这样才能更有针对性的去回答面试官的问题。回答的解析思路这里主要介绍两种主流方案，第一种 h 幺五原声创创 pro。 第二种基于鼠标事件 moscata mosc 以及 mosc 的 手动实现。 回答时候分别述原理和关键点，对比分析优秀点和适用场景。我们来看一下代码原生专作的 h i 核心概念就是通过给元素设置这个五等于处的属性， 即成为可拖拽元素，然后利用一系列的拖拽事件来控制拖拽行为和数据传递。比如这里的 java 元素可以让这个 dma 可以 被拖动，用 event 被它 transfer 是 一堆场来放被拖拽的元素 a d， 然后设置默认，告诉你容器。我们希望这次拖拽是移动元素，而是复制它。 为了好看，可以让拖的元素在被拖时半透明，用塞车 mod 包一下是个小技巧，能够确保让其先截取了元素原来样子作为凸在图像，然后再让它变透明。当被拖的元素在目标区域上移动时，调用一下 unit， 否则事件不会触发，最后添加到图框区。 好，我们来看第二个鼠标事件 mod。 它的实现原理，核心深度，通过监听鼠标的三个核心事件，几何元素 cs 定位 通常是 position upstate 来改变元素的位置，从而模拟拖拽效果。现在我们来看一下容党的拖拽。一提秒里我们有一个可拖拽的元素，单摇 drag 布，它的意思 position 设置了 upstate， 这样才能通过修改 left 和 top 属性来移动它，并且放在 这个 ctrl 键的另一个一只。查找引开关默认是关的 offset x offset y， 他 们清楚了鼠标点下去的时候，检测到元素内部的哪个位置，计算 offset x 和 offset y。 用鼠标当前窗口坐标减去元素边框的窗口坐标，就能得到元素在鼠标内部的相对位置。 核心操作，在整个 document 上开始监听 mouse 和 mouse 之间，这样即使鼠标拖得飞快，我说元素本身我们也能继续相移，然后阻止一下默认的行为，以防 拖拽时选择文字计算元素新的 left 和 top。 当用当前鼠标的窗口坐标减去鼠标在元素内部的那个片一样， 这样就能保证元素是跟着鼠标指征上我们点住那个点在移动，而是元素左上角突然跳到鼠标指征那里，如果设置了 container， 计算一下，不让元素拖出 container 的 范围。这里会用到 mouse max 和 mouse min 来确保新的 let 和 top 会超出边界。 注意 style let 和 top 是 相对于最近的已定为元素的，所以计算编辑时要考虑这个复元素的坐标。最后把算好的 u let 和 u top 值赋给元素的 style 元素就动起来了。在结束时删除文档时间监听，不然它们会一直在后台运行，非常的消耗性能。

那我们上节课呢，给大家说了，假如说你只是导出模块，对吧？然后你去直接使用它的话，是使用不了的， 所以呢，如果说你要想使用一个模块的导出声明，那你就需要使用 import 语句呢来进行导入它，那导入呢？它也是分为几种方式的，那它对于不同的模块的导出的方式不同，那它导入的时候也不同的。比如说我们对于一个模块的命名模块的一个导出， 命名模块的导出，那我们可以通过其导出时候的名称呢 来导入它。也就是说那像我们上节课那样，我比如说写一个我们的 index 点 t s， 对 吧？那我 export 一个 y a， 等于一二三，对不对？现在呢，假如说我们要使用这个 a， 那 我们就需要给它去用 import 进行导入哈， 导入的时候呢，你这个名称是 a， 对 不对？所以你在导入的时候呢，就写成 a 就 好了。比如说我们 demo 点 t s， 我 们就使用 import， 然后来导出我们这个来导入我们这个 a， 然后呢你再去使用， 那我去 ctrl 点 log a， 那 这个时候你看它就不会报错了，它就是没有问题的了，对不对？那就像我们 呃，比如说当然导出的时候它的列表也是没有问题的，比如说我 lin 一个呃 a， 呃 b 吧，等于个二，那我这再 lin 一个 c 呢？等于三，对不对？然后我使用我们导出列表进行导出的话，比如说我这有一个 b， 然后有一个 c， 对 不对？然后呢？我 那现在呢，它就是 b 和 c 我 都导出了，包括 a， 对 不对？那我导入的时候呢？我也可我就直接这样 b c， 对 吧？全部进行导入就好了。导入之后呢，你就可以正常的进行一个使用了，那这种就是没有问题的了，对吧？ ok。