27_尚硅谷_谷粒音乐_css组件.wmv原创

我们上午弄到哪了，咱们是不是做了一个2D版本，所以我们说这个2D版本它有什么缺陷啊。对于这个全的操作，这个2D版本我们说不太满意，为什么不太满意，极其容易出错，而且我们每次写的水果的话实在太烦了，每次要同步这个全的X是不是太麻烦了，那我们说最好我们能有一个跟。差不多的东西。是不是你这个全的X不就是代替这个left的吗？我们说能有一个跟left差不多的东西，我们是就会比较满意啊。如果功能比off theleft还要强大。哎，那我们是可以鼓个掌了，是不是啊？哎，那想想这么玩有没有什么思路啊，反正现在就是对全子的一个读取操作，太烦了。好，那我们就直接定一个函数出来，好，我们让这个函数专门来处理这个。

Transform的读取啊，想想我们在这个里面写的话，我们是不是通过变量来的，通过变量来存你这个全的一个状态的。是不是啊，就是实时的去累加的嘛，相当于。是吧，好，那想想我能不能拿个对象来做。变量存储的值是不是比较有限？对象有属性啊，属性可以好多个，我对象能存存储的东西肯定要比你这个变量来的丰富。而且会易于管理，是不是对象行不通的，那速度。数组里面还能透对象是不是啊？可是咱们想想，其实我们只要超出四个变化就行了，所以说我们拿到对象差不多了。是不是啊，OK，那想想比如说这样。好，我先来写一个零七春风。For，好，我们来看这个全功啊，比如说现在我一个div啊。

ID等于test，好，这里来个style。OK，好，Marin等于零，Penny也等于零是吧？我们说这个test你想让它，我们说看是不是有组合变换呢？还记不记得，还记不记得组合变换这件事情。组合变换有没有忘掉变换是可以组合的吧？OK，背景来个pink。好，那想想我们是不是有一个全，我让他trans x100。PX为二好，我问大家，最终他跑了多少？就跑。

反正最终问你跑了多少。跑是跑了100，因为放大了两倍吗。就最终它离这个浏览器的边界多远。是吧？多少放到这，哎50。有没有同学觉得是50的？啊，是50吧，啊，应该是50，我们来看一眼。是不是走了50啊？海量吗？50码。是不是啊，我教过你们怎么看嘛，我说先上来位移肯定不会影响坐标系啊。

先上来，你不要先想哪哪个先直行，肯定是直高度先直行。是不是矩阵怎么算的，你也不要去想了，好不好，你想个半个小时你在干嘛，不一定能算出来。我就会你们怎么看嘛，上来掀开位移100嘛，那就走个100吗，说放放大两倍嘛，你放大不是这两倍要扣的吗。那你不就干嘛挤回去50嘛，那最终便宜不就干嘛50嘛，走其实就走了100吗。你不讲，倒过来就不一样了吧？都过来。知道。知道。100不应该一百五吗。先亏了二倍嘛，坐标系被放大了嘛，你走100相当于走了200嘛。

是不是因为放大了干嘛。漏回去了50吗？不是一百五吗。是不是150。是不是啊？你们过过一个年怎么了？过年已经过去好久了，这个东西得拎一拎了，是不是啊，昨天才15，我让你天天过15，看的好大想，那我现在定一个函数出来啊，我要定一个函数叫CSS函数，这个函数干嘛呢？用来操作圈是form母的一个。啊，就是干嘛对圈子泵。对确分母的值进行。读取操作，好我们说如果csi函数里面有两个参数，好你是不是告诉我哪一个节点啊，你要取它的什么变化变化的值吧，是不是，如果是两个参数的，我们说这是什么读取。

啊，这一个一个是读，一个是取啊读取操作啊，如果是两个字的干嘛是读啊，怎么读取啊，应该读写啊天呐。啊，中午没睡觉，来看看好，如果是三个字呢，写操作设置嘛，就是。懂吗？而且我要规避一个问题。每次不都是覆盖，不应该覆盖，是不是我们这干嘛，我们要规避。覆盖的风险。风险风险险怎么写险？

OK，好啊，这个视频敲了吧。风险都不一定，好好来看一下啊，好，三函数对纯风的一个什么值进行读写操作吧，两个参数读三个参数啊，写各几块剩不下。像不像啊，叫什么叫读写二合一，也叫取负值合体，是不是啊，OK，好，而且要规避一个覆盖的风险，因为我们知道全部覆盖的话风险很大，是不是我们一定要把你上一次的变化带走。认为你讲好，那怎么写，比如说现在我来个方形，就叫三加三好，这个三个函数准准备怎么去设计，然后我这边不会有一个什么。我这边不会有春风的，待会要让这个太产生一模样的效果，那我是不先把这个拿到。

是吧，Y test等于什么多根的点Q加Y嘛，快select嘛，我找到这个什么test嘛，是吧，我给的是一个什么ID吧，是吧，好知test待会怎么待会怎么办，我说你待会这么写，如果CSS调用起来也是这么调用的，首先传test，然后干嘛全是lax，然后我让你走100，那你就待我给我走100。懂不懂，然后我下一把再调用的时候干嘛，我说test你走，放大成原来两倍，最终他走多少。最终最终我想让他走多少啊，就这个顺序它也是有关系的，我想他走50，反过来呢。一百五啊，这是我想实现的一个需求。Ta这个东西应该等于什么？这个东西是什么？Noe身上有没有全部属性了，现在。

没有啊，一个节点上没有这个属性的话，你去取这个属性就是反回去吗。昂迪的呀，是不是，那他包括的是不是就等等于的。是不是，如果你是等等于二点方向，说明你没有这个属性呗，没有这个属性我给你加一个属性。这个属性等一个对象。这个对象我想把它设计成什么样呢？这个对象我想把它设计成这样。我不是待会会有个对象吗？好，你这个对象出来的时候，它是长这样，好你这个对象吗？好对象有属性，第一个属性叫垂直X。好，它有个值value。啊，比如说干嘛随意吧，是吧，再来一个叫什么全。Y，你也有个值啊，这个值随意啊，就是一个属性值嘛，好你还有什么，还有什么变化，SC为什么为一个值，好，我还想一个什么RORO它也为一个值，我问你，我把这个对象设计成这样，是不是这个对象就管理了我的变换呢？

确实，我的四种变化。能理解吗？啊，这里还差一个什么。斜切咱们就不要了啊，不怎么用到，想想那我应该怎么去设计它。手机上来，我是不是得有个对象？是吧，当我每次再调C，我第一次调CS函数的时候，它是上铁定没有全共属性的。第一次掉的时候我就给他绑一个，第二次掉的时候还需要绑吗？就用上一个不就行了吗？那我是不是进来先判断一下干嘛，你有没有这个权号码。是不是如果没有给你加一个，如果有就继续用这个。

能理解吗？然后是不是得去判，得去判断了，我说应付什么。怎么拿到这个时差列表阿？词点认识，如果大于等于三，说明你是不是传了很多参数啊，那我只用前三个行不行？行吧，你后面传的参数干嘛，就当看不见。能不能理解啊好，然后进到这里应该去做，去做一个什么操作。设置操作。是不能跟上。你没看到，我问你这这不明不明白。这个有可能会有同学问，那我为什么不不直接拿这个note点水过呢？有没有这么想的同学？我觉得这样比较简单。看一下你有没有漏着点水。我们。如果有，如果没有。我就进来给你。

加上吧。是不是平常我们都是这么写的，可能记住我们现在在写组件，懂不懂这个要求要高一点，你这么写有有没有可能出问题啊。你看我这么调会不会出问题？我参数我都不传，这么调会不会出问题？看看。不是有没有报错，有为什么，他是什么，你压根没传这个，不是的吗。是不是再来看OK？我说回来这个衣服判断我现在是不是也是这么穿，这个你看我刷一下。这个。呃，07TYPE of no的全部吗？来看一下有装。哎，不是，是不是也报错了，那我首先是不是得判断一下干嘛。你存不存在，那怎么办？

首先什么？我说能，能直接这么写吗？肯定不能直接这么写，你不穿是有可能给你报错的，一旦报错，页面就干嘛卡住了还去渲染吗？下面的GS代码是不是就没有办法去执行了？是不是啊，那我们尽量让这个容错能力稍微高一点，那怎么办？首先得判断什么。他这个note干嘛。是不是等等于什么。呃，都不进是吧。是吧，首先得看一下你这个弄的是不是对象嘛，是不是，如如果是对象是不是再来判断后面这个。是吧，这个时候我这么出，会不会给我报错？说下这样是不是就不会了？有没有讲OK，那是不是得这么写？啊，那这个判断有点长了。

没关系，反正不能像下面这种形式，如这个一般业务逻辑里面就可以这么去写。啊，如果写到组件里面的话，尽量让这个。容错性稍微高一点啊OK，那看那大想现在这个我们可以判断了，那问题现在我需不要去做设置啊，做设置最终我们至少要干嘛。又给noe去报什么点，点什么圈，Form是不是等于什么no的点做一个兼容点。掉点。Web kit杠。Transform看有没有。做个兼容吗？啊，等于一个什么text，我们就看这个text，咱们怎么去控制它哇，一个text等于一个空。好，那大家想想，现在我说如果传三个参数进来的话，肯定是去四是吧，那怎么办呢？我们说noe里面是不是有一个全封嘛，No点什么。

是个对象。对象能有属性啊，对象点什么属性太属性吗？是不是只能用这个中国号，因为你是一个变量吗。是吧，你是什么样的类型就应该等于什么。这个六吗。是不是这样的，这样你每次在掉的时候的话，是不是都是把你干嘛，比如说我现在这么掉，我现在这样搞。每次把掉的时候都可以把这个词塞到这个对象的一个属性里面去的，至于哪一个属性是不是看你拿的是哪一么。太。能理解吗？你看这不是那个对象吗？这不是他对应的一个属性吗？等于一个属性值吗？

是不是每次掉的时候，是不是都可以把一个值塞到这个对象的一个属性里面去的。是不是生完之后怎么办？我是不是要去拼这个T啊？是不是去拼这个。能不能理解怎么拼这个test？我写个for循环视不行。过年你现在拼这个的时候的话，你只能看能只看这个value吗。我是不是从这个对象里面，把你这个属性和你属性所对应的那个值全部取出来，最终给你去拼成一个text，然后付给你的。是不是该这样？能不能理解，那怎么办？是我要不要去循环这个对象，要么这个对象是谁啊。确是不嘛，这不就是我在这边定的这个对象吗？能理解吗？怎办？呼应循环吗？

什么？是不是这个对象，我是不是把你里面的属性干嘛一个一个的拿出来。然后去拼字，不算怎么拿，我能不能用，可不可以啊，SK吗？是不是我这个case用了吗？多来几份。把这个礼服给他干掉好，这里面穿什么？我看一下你从这个对象问你波音循环循环出来的是什么东西啊，属性名啊，属性名是谁啊，1234。是不是啊，那这个icon不就是121这四个属性名吗？好，你属性名不一样，问你拼拼的字符串一样吗？不一样。

好。是不是做不一样的操作？OK，问你这个时候怎么拼T应该等于什么？X等于什么？要加等于还是等于？你下面是不是还要帮T去拼的，因为我们变化是可以组合的，是不是你一定得是什么加等于加等于什么。你是不是要给这个属性的，那你想想那是什么圈X方嘛，全。X。是不是这样的里面比如说100PX，那我应该是不是应该要这样写的。他应该是个字符串吧。OK，好，那这个问你。100怎么了？100怎么了，谁是不是这个，想想是不是这个。

我是去这个对象里面去拿你这个属性跟你的属性值吗。你是不是应该要去拿一遍啊。拿什么，是不是拿他问你，我这边能不写艾，这个确X5能不能写了艾。能不能看懂？能不能看懂，能拿这个value吗？你这个value是一次操作。问你有没有可能问你，你看我第二次掉的时候的话，我有没有可能同样是这样的，我把你这个值给覆盖掉。是不是，可是问你在调第三个的时候的话，这个Y是不是二，可是你这个icon是谁啊，全X啊，你全X所对应的值是不是200，这个200是这个value吗。

这时候这个Y是不是二。你的200在哪，给你塞到这个对象对应的什么？属性上去了，那你是不是对应的要过来干嘛。拿一拿。能不能讲，我问你那。全直X全是的Y单位是不是都是一样的？PX他们俩能不能写在一块？图片。可不可以艾特，不就是什么？而不就是你。命中的这个case吗？可能是求X，可能是求的Y吧。是吧，那你看我这个艾不也是不不是全就是说全Y吗。是不是这个道理啊，你们两个单位都是PX嘛，那我就把你们俩放一摞嘛。

那掉呢？需要单位吗？可是这个括号干嘛，括号还是在这留着。是不是？呃，加上。第一季是不是就可以了？是不是出来了，现在是不是。是不是这样的，OK，那我们来看，那我这边调的时候的话，问你最终这个对象应该长成什么样。我这么调的时候，这个对象应该长成什么样？找到了没有？我就这三个调完，最终这里面那个对象应该长成什么样。他有几个属性。这么调完我这个对象有几个属性值啊，两个，一个是全实的X，一个是是不全实的X值是多少？200肯定被覆盖过一次啊，是不是四个的值为多少为二。

那我们来看一下，那这么一这么一整的话，它应该往下跑多少。走了200吧。是不是就跑200，因为放大了一倍嘛，就200放大一倍嘛，那是一百五啊。识别来我。能不能理解，不理解怎么办？不理解，我教过你们怎么办？干嘛？一个函数你不连解的时候怎么办？打个断点看一下，不理解就放弃是吗？对，打断点看一下，F要进来吗？是吧，做走你。好，你看下我这页面走，你来看一下，好，我是不是在第33方去打个站点。

OK，走，你过来是不是到这点了，到这段时要不要进去看看？要不要进去看看？不要进去看看点打算干嘛，我不要看这个函数嘛。是啊，是不是啊，你们怎么突然那么可爱？看一下，干掉他进去吗？是不是啊，OK，看多。呢全是X呢，100是吧，首先来判断下有它有没有这个，你看这个等于多少，看一下。我不结合是不是，然后他是不是进行进入这个判断，判断它是多少。UN2个方都满足进来吗？进来干嘛，创建一个对象吗？是不是，那我们重点就要看这个对象嘛，好，那把这个对象干嘛监控监控。是我们来看这对首先是不是N，首先是不是个N2方长没问题，一旦过去它就应该是个对象是吧？是，然后看你这个阿根的量是不是三，三是不大，等于三没问题，进来进来给你干嘛。

创建一个文本是吧，这个文本干嘛，我先监控一下是不是空的，OK，然后呢，把这个value给对应的一个。属性是不是这个，这是不是那个对象。你看咱们这个对象吧，对象里面这是是不是就多了一个全全程X值了，一开始这个对象是不是个空对象，你看这边是不是已经多了一个全值，它的值是不是100。是不是啊，好问你OK，那我把这个断点我再过掉，好，这个断点我过掉，我不看了，好到第二次的时候问你，我进来。好，我进去找你，我问你这个判断还要不要紧。我现在你看第三方已经被执行过了，问你这个判断还不走不走，为什么你虽然是个，可是你太no的全，他也是一个，他不等于了，也就说这个对象有被重置掉。

第一次我是不是33号的时候创建过一个对象，这个对象有没有被重置掉。没有，相当于我第34号执行的水果用的还是那个对象，是不是OK，问你这个时候这个对象里面有没有，这有全是X100吗？你刚刚自己设的。是不是问你，那现在这个逻辑是不是一样的，进来进来它干嘛，它是至少这个对象你所对应的垂直X垂直X啊给你换成200是不是，那么你那我到第三十五行，我再进来的时候，那是一个，那是一个什么样的情况？进去走，你走，你看是不是200。你刚设置的吗？问题，现在在走这个，再走这个节点的时候，再走第三三十五行这个代码的时候，他是给你新增一个还是去覆盖属性，新增一个属性，你看十个小时不等于二了吗？相当于我这一个对象管理了几个数据啊。

四个数据。只不过咱们现在用了两。能不能理解，OK，那我们再来好，那问你现在再往下走的时候，因为我这个对象里面数据是不是有两个了，那我是不是for循环，把你这个东西干嘛对应着干嘛。拎出来吧，拎出来时候是不是拼拼到一块啊。能不能理解，而且我问你这个是不是有顺序。我波音循环先循环出来的是什么？是不是全X啊，我们看这个item第一个是谁啊。是不是？因为你求X干嘛是先先写的嘛，那就先先干嘛循环出来的嘛，也就你先写的永远在前面嘛。能不解，那这么一拼走，你是不是找到这个逻辑啊，问你这个里面是不是得去找你节点所对应的那个属性值。

哦，你这个属性所对应的那个属性值你能找白吗。这个是买的多。我是从第三任环进来，问你这个时候概率为多少？二你现在是不是要去把全方把这个艾是谁啊全择的X吧，你把二给全择X靠谱吗？应该把谁给求成了200啊？这个时候value确是确实是二，你这个value应该给给skill的，而且你也不能把这个value给掉，你也应该去拿它的什么属性值给他。懂不懂，OK，那说这这样一来我问你OK，那是不是咱们这个设置就做完了。那么你讲OK，我们还得看你这个复印循环复印出来这个item到底有多少东西。你现在我在这边干嘛？康是有点落吗？

看一下这个I等于多少？盖头。断掉断掉。刷下。四个。来看一下56行。啊，因为它循环过很多次嘛，进来。是不是大家想想这是不是第一次啊，第二次啊，第三次啊。是不是啊，OK，可是我们说风印循环会不会再去循环出来一些其他东西啊，我们来看看看一下这个硬操作符。啊，我们说有有些对象不干净的，记不记得。来看一下风循环。一。只要是用这个硬关键字，我们来看一下，如果指定的属性在指定的对象或者其原信件中，则应预算符返回错。

啊，我们复印里面印也是这个印。啊，他说还有什么。指定的属性在指定的对象或者它的什么圆形链上啊，还有没有学这个圆形链是不是，你要知道波印循环，它能循环出来的东西，不光光是这个对象的直接属性，圆形电上的属性也可以被循环下来。会不会对我们产生影响，我们的这个属性都都叫什么对象的直接属性吗？懂不懂，所以说有可能会出问题，这个艾干嘛，有可能会不干净。懂不懂那怎么办？要不要把圆形电上面给它过滤掉，你说我只拿对象的直接属性。懂不懂，我这边是不是只拿对象的直接属性，我要判断一下你这个it是不是我这个对象的直接属性，如果是直接属性我才用了。怎么办？来看有个API你还不知道。

Has。OPW。OK，好，我们来看下这一点，好，会返回一个布尔值，指示对象自身属性中是否具有指定的属性，也就是说你为处说明这个属性是在它自身属性中的。对吗？现在就有个概念，解S对象的属性，除了自己身上有，能不能放到其他地方可以，可是你还不知道。暂时就当了吗？暂时就当，反正我知道一个对象他的属性有可能不在自己身上，放到他的父亲上面去了。就跟我们世界委托一样的，对物里面的那个事件委托一样的，有些东西，有些事件，我不想在自己身上执行，我放到什么父亲身上，我让你来帮我执行。懂不懂？OK，那这边要干净一点怎么办？

耶，什么什么，如果你这个it。哎，不对，你说这个怎么用的，object.has property吗？是不是，那对象是谁啊，是它吧，它点什么has on什么不点传一个it进来是不是？如果这个item是你这个对象的直接属性，我才让你来执行这些逻辑，如果不是直接属性的话，你干嘛不要执行任何逻辑，好，那到这一步好，我们整个三个参数的。讲这个吗。写完了也就说我们什么。写写操作已经弄完了，而且我们规避了覆盖的风险。这个覆盖的风险我们是怎么规避的？每次我都是复印循环重新给你拼穿的。

看到没有之，之前你设置过的，我都还在我这个对象里面。只要你干嘛设置过一次，我这个对象里面，我就能记住。每次我都是复印循环，重新把你拿出来评的，所以会有覆盖的问题吗？不会，可是我们最终结果是不是去覆盖的？是不是，可是覆盖前你知道我做了一个火影操作。以前的东西我全部保留下来了，所以需要还需要你去关注上一次变化是什么吗？不需要这个对象自己在帮你做处理。能理解吗？啊，能不能感受到编程之美，那再来啊，反正懵了，是不是蒙到底，我们再来看，OK，好，那这个读写做是不是已经做完了，不不，那个设置做完了，OK2是什么，二是什么。

L吧，如果你的参数为两个，这边应该是什么读取操作是吧，那我这边来个什么。如果你的参数干嘛，哎，这边要弄要弄弄好了只有两个是，是不是我要去读取好怎么读取啊。读取的话，最终要不要给你一个东西出来阿吗？是吧，我们称什么。我管你呢，Re UT，行，这个头在这干嘛？画一个去哪拿对象里面拿吗？是吧？是Y1道应该等于什么？对象在哪？不是这个对象吗？去拿什么？去拿什么？你太所对那个值吗？是不是就可以了，好问你我这边是不是新定一个面料。

大家看我这个参数是不是只需要用两个，第三个是不是废了。是不是废物啊，废物要不要利用一下？反正你没用了，能省则省，咱们在写什么？在写库，不是在写业务逻辑。懂不懂一个变量都给我省掉。人则成，不要有废代码懂吗？你刚画你刚刚去画的那一次，很明显就是什么浪费的嘛，因为你第三个参数压压根没有用嘛，这时候我只需只需要你有什么两个参数就行了，那我第三个参数干嘛，废物利用一下。是不是啊，OK，那我们来看一下这里，那我在这边去点rock一下是吧。Test，不去读吧，CTRLCCTRLV问你这个值，我读回来应该是多少？200是不是来我们算一下这里是不是200？

那不讲好，你现在我读这个旋转rota，我读旋LT吧，我没有设置过吧，读回来是什么。昂，范的我能是范的吗？多多少少有个默认值吧，没转过就是没转过，是零啊。你不能是UN范的。那怎么办？什么value等于怎么办？是不是如果你这个等于的话，咱们是不是得做助理啊，Oktl c说什么，如果你of什么你这个value。干嘛等等于什么。

是不是，而且。我问你如果没有设置成缩放，你返回值应该是多少？如果缩放在这边没有设置过，现在的你返回这个缩放应该多少？现在。现在不是已经设置过吗，是不。二码如果没有设置过，应该返回多少一码？不一样的吧，有返回零，有返回一吧，全X的Y返回多零吧，是不是，那是不是得分两波if是吗？什么？或者说这样，这里面能不能写个。可以两个嘛，是不是啊，OK，就是最终这个value值等于得等于多少呗。是不是啊，那我是不是把这个case拿过来就行了。

如果是这两个case应该多少？还得加一个谁。RO是不是这个是不的话，应该多少，Y应该等于多少，是不是OK，然后呢，这个呢是这样。这个应该到。小好，来看看，这个是应该不动，78号怎么了？啊，这你们没有写什么。这里，诶这个是二吧，因为我们是不是设置过好之后，你注脚应该多少。一是吧，什么都没写，看取这个全世界的X0。是不是到这个时候咱们有整个S函数有没有定义完。

啊，你们知道你们用酷用的很爽，知道别人是有多费劲吗？纠结这一个函数就怎么对。啊，写个上万行代码呢。他有成就感，他的成就感就是没头发了，好OK，到这边我们说。三个函数啊，三个参数去设置，两个函，三个参数去设置，两个参数去读写，去读取，规避覆盖的风险，这三个我们有没有实现。有没有时间啊，看不懂，我教我教过你们怎么办断点一个个去打啊，这里面比较注意的几个点，我跟你们说一下，第一个上来这个对象。不能每次都覆盖。每次覆盖的话，上一次记录就没了。懂吗？不能每次不该做判断的第二个。

这边。我们是把value值那一次CSS调取的时候，我们这个value值是不是给了你所对应的看法，可是你在拼这个串的时候，切记一定要去对象里面的。这个是不靠谱的，这个value只是那一次操作，我们要拼算是干嘛要看整个对象呢，所以我们要循环整个对象。而且在循环整个对象的时候一定要切记。这个属性必须得是我们的直接。属性啊，因为对象有些属性不在自己身上。在它的圆形链上。啊，可能会导致一些问题，说我们必须得判断这个ipad是不是你自己的。而不是借的别人。懂不懂，然后进来去平川。懂吗？啊，最终去给这个学生过去赋值得到，那这里面比较重重要的什么这个value。啊，能用就用。懂不懂，能省则省，还有一个就是什么，把你这个默认值的操作分两波零跟一的。

懂不懂？OK，那这是我们定义的CS函数啊，那这个可能会稍微有点难度啊，因为大家第一次去写，去写这种东西啊，是不是没有任何的业务逻辑，你看不出任何的效果的吧？啊，可是这个函数干嘛极其的强大，OK，这我们给来家看看。