粉丝2756获赞9480

我问个问题啊,就是你们写这个眉间查询的时候是不是这样写的啊?你们不觉得这样写很恶心吗?你看哈,我这个样式呢,都还很少, 我就是不同的适口宽度,我给他不同的高度,对吧?我就这么点样式,都要写出这么大一堆代码出来,你不觉得恶心吗?眉间查询不能这样写啊,这个写出来太难阅读了,写起来也恶心,维护起来也恼火, 而且将来呢,这个如果说这个媒体的断点位置需要变化的话,那你要整死人的说,这一块最好怎么做呢?最好是利用那个域编辑器啊,像什么类似啊,萨斯啊这种给你简化代码, 它不仅可以简化代码,而且呢会带来更加容易维护的这么一个效果。好,咱们看一下怎么写啊?我们把这个玩意去掉啊,其实我们最想要的写法是啥呢?就是我这一块呢,一个黑点选择器,是吧?这里呢有个宽度,但是呢,他的某一些样式吧,他会随着市口的变化而变化,那我就希望这样 先把统一的样式写到这,然后有差异性的样式呢?我这样写,比方说手机,对吧?我不需要知道手机的屏幕它到底是多宽到多宽无所谓,反正就是手机啊,移动端,然后它的高度呢是三十,然后呢就是平板,哎,它的高度呢是五十,懂这意思吧?然后呢是 pc, 它的高度呢是七十,懂这意思吧?后边我不写了啊, 如果说能用这种格式来编辑代码的话,是不是非常舒服了,对吧?读起来也好读,而且呢维护起来也很好维护,对吧?这里边不去直接书写这个断点,那这样子写行不行呢?那肯定要报错啊,哪有这种语法呢,但是呢,我们可以把它稍微改造一下就行了。把改造成啥呢?改造成混合啊,我这里是萨斯代码啊,你看萨斯里边是有混合的,可以使用 include 去调用一个混合。比方说 这里我们调用一个叫 response 啊,响应式吗? to 针对这个啊,平板 pad 五十个像素,针对这个 c 啊,是七十个像素,是不也很好读?那这种语法是符合要求的啊,只是呢,你要理解什么叫混合,混合啥意思呢?我随便举个例子啊,比方说这个地方呢,是个弹性盒啊,有这么三行代码啊,弹性盒居中。 如果说你发现啊,这种代码呢,经常会出现的话,那么你就不妨把这个代码呢提出去啊,提到一个公共模块里面去,把它写成一个混合,比方说这里新开个模块啊,我们写个混合,混合的定义呢,是使用一个 mixin 来定义一个混合, 这里给它混合取个名字,比方说弹性和吧 flex, 然后呢,把刚才那三行代码写过来就完事了,就定义这么一个混合了,然后这边要用这个混合的话,非常简单,导入进来啊, 使用 use 导入这个模块好,然后使用的时候就是使用一个叫做 include, 包含一个混合啊,这里呢需要给模块的名字啊,没点儿点儿什么 flex 啊,这个 flex 的 混合名字啊,就完事了,保存你看一下,虽然这里只有两行代码,它翻译出来的结果 是不是就是完整的四 s 代码的话,也非常方便,如果说将来有一天别的地方也要用这个混合的话,也非常方便啊,直接来一个 include 保存,你看一下编辑出来的结果是不是两个都有了?那混合很简单啊,就是你在使用混合的时候,它就会把这个混合的代码呢,直接给它,相当于是复制粘贴过来。那有人说,那这里使用的时候不太灵活,因为有的时候吧,我那个弹性盒呢,它不一定是居中,它可能是靠左靠右,对吧,靠起始,靠结束。那 这一块呢,怎么办呢?你可以给它写参数啊,比方说一个参数 layout, 那 你给我啥布局方式,我就给你放到这个位置,那这边呢,我在使用的时候是不是要传参数了?比方说我这里呢是 start, 下边就是 center, 看到没?呃,然后呢,这里还是有一个混合的用法啊,就是我在用混合的时候呢,我还可以给你传递一个什么玩意呢,这个东西我可以把它叫做叉槽吧,非常类似于 v 的 叉槽,就可以混合传递一段内容,随便传啊,比方说 color, red, 然后下边呢 一个 background 啊,为黑色,你看可以给他传一个内容啊,那么这样子呢,在混合那边啊,他就可以使用这个内容,你给我传啥我就可以用啥,他可以通过一个关键字叫做 content 啊,这类似于 view 的 叉桃是吧?来得到你给我传递的内容,那么我可以把这内容放到任何地方,比方放这吧。好,这里呢,咱们再翻译看一下啊,保存,你看一下翻译结果,是不是这个东西也出来了, 看到没?好,这就是混合的基本用法啊,我跟同学说啊,像这些问题啊,绝对不是八股文哈,这是正儿八经的,会影响到你的开发的。你像域编辑器里边,你说没有公共代码吗?这些东西都是公共代码,做架构,做基建,其实就是处理公共的地方, 对开发者赋能。而事业这层面呢,也是一样啊,整个职业生涯里边都要往上走的话,就必须要严格的去掌握这些东西。这些东西啊,它不是作用于你现在的工作的,你现在工作可能还真用不到, 他是为你以后的工作做储备的,你要跳槽,掌心你要往上走,是不是得学以后需要用到的东西啊?你学现在需要用到的东西有啥意义呢? 对吧?而你要积累这些高价值的东西的话,就好好来看我的大师课。大师课是完全免费的啊,来领取完上了当前段的知识呢,很多啊,你说我几天的大师课能够给你全部讲完吗?那不太现实。所以说我给你们讲的知识都是精挑细选的,哪些东西最能够在短时间内提升你的薪资,哪些东西 可以作用于你整个职业生涯的发展?我把这些前端最重要最核心的知识给你挑选出来,全部放到大师课里边。而且我讲的东西吧,我不会留尾巴的,不会讲一半长一半,绝对不会的,我要讲的给你讲的干干净净,直接给你讲毕业,讲结束,最好是让你一辈子都不用再去碰了。你想象一下,如果说你能把前端最重要最核心的东西给他学毕业,这个效果会有多恐怖? 它作用不仅是马上能够在薪资层面体现出来,同时呢也将服务于你整个职业生涯,所以说无论你是想高新就业还是在职的必修课,都是你的必修课。 有可能目前可以免费领啊,怎么领?在咱们账号主页点击头像进入账号主页,点击提示领取。完事了啊,好了,现在咱们了解了这个混合的基本知识之后啊,我就要达到我们之前的目标了,我要做啥?我要做这么一个东西是吧? response to 这里传上一个缝,然后呢?这里边写上一个高度,下边随便写两个啊? pad 五十。好,现在就是我们需要去搞定这个混合好,把这个混合改一下啊,搞定的是这个混合好,这个参数就是什么呢?就是那个这边传过来的这个设备名字是吧?好,里边东西先放着先不 好?同志们思考一下啊,这个混合里边要干嘛?是不是要生成一个媒鉴查询对不对?你叼一次这个东西,我就给你生成一个媒鉴查询。生成哪一个媒鉴查询呢?看你的设备是不是意思。好,咱们把之前的媒鉴查询那个注呢先拿过来啊, 方便复制,随便复制一个吧。好,拿过来取消注看一下啊。这个媒鉴查询里边哪些地方需要更改?首先这个地方能不能写死?不能啊,这个东西应该写啥?是不是应该来自于这里边传过来的东西是吧?这里就要写啥,是不是?所以说这一块应该写啥呢?是不要写个康天传过来是啥就写啥? 说到将来有一天如果说你再写个选择器啊,那也使用这个混合,那这里呢可能传递的是颜色,比方说随便写一个吧,那这里传递的颜色,那这边是不是也得是颜色,对吧?所以说这里呢用 content 来替换, 然后呢,就这一块需不需要在这里写选择器啊?是不是这里不能写选择器?为啥呢?因为这个混合本身就在选择器里面使用的,看到没,他本身就是写到这个选择器下面的,因此呢,这里你是不需要写这个选择器的时候,你也不知道该怎么写,这个选择器是变化的,有可能是 head, 也有可能是 love, 你 不知道谁在用它。然后这里呢直接不写这个选择器, 咱们先写到这样子,看一下翻译结果啊,咱们保存翻译一下,好,看一下翻译结果。你看这个 knife 是 不是出来了,这个 head 看两种是不是都出来了,对不对?那我们写的时候是不是非常方便,用这种方式来写就舒服多了, 然后完没?还没完啊?现在还有个问题,就是这个地方咋写,你不能写死啊?这个东西要根据什么来定呢?是不是根据它来定?就是不同的设备,它的断点是不一样的,当然你可以在这里边去写各种各样的判断,不过呢比较麻烦,我们可以这样做啊,我们来一个配置,叫做 break point, 在那个萨斯里边呢,是可以写数组和对象的啊,对象呢相当于是个映射,咱们就写个映射啊,比方说这个缝他就对应到两个值,起点三百二, 终点四百八,好, pad 对 应一个,然后下边随便写几个啊,好,你看就写上了一系列段点了啊,对吧?那么这样子写的好处就在于将来呢,是可以随意更改来进行配置的,对吧?而且这里的整个工程里边只会出现这里一次,配置起来非常的方便,这里一改,其他地方全更改了,对吧?写成这么一个配置, 那么这里呢,是不是要根据你的设备去拿到这个配置啊?比如你传的是 phone, 是 不是要拿到这个配置,对不对?你传的是 pad, 要拿到这个配置啊,你传的是 desktop, 要拿到这个配置好,所以说我们这里呢,首先去拿配置啊,拿这个 config 等于啥呢?等于用一个函数叫 maggot, 从一个映射里边去拿东西,相当于是得到一个对象的属性,对吧?传入这个对象就是个映射,整个映射,然后呢,传入这个属性名, 把这里传的是不是属性名,然后去拿到它的配置呢?它有可能有两种情况啊,一种是个数组的情况,有两个值,一种呢是单个值的情况,你分开处理一下呗,判断一下 都给写出来了。通过这个 type 函数的它的类型,如果说是一个例子,表示它是一个数组,数组怎么办呢?那就是得写两个,是吧? mean width 和 max width 适口的最小值等于啥呢?等于这个数值的第一项, 使用 n t h, 把数值的某一个值传入这个数值,然后传入它某一个值啊,这里的下标是从一开始的啊,那么从一到第二个值,对吧?如果它不是个数组呢,就直接使用 mean width 就 可以了啊,就不需要这个 max width 了,那 下面就不要了啊,就写完了,你看,我就做了这么一件简单的事情过后,上面不要了啊,整个代码变得非常好维护,这是一个公共模块,永远不用再去动了,除非你要去改配置,其他的时候不用去动它了啊,你其他地方,任何地方想要用那个眉线查询的时候,直接用就完事了,比方说奈他本身有一些属性,是吧?然后呢,可能会基于不同的市口 啊,或者说不同的设备,然后去写一些特别的样式。那么下面也是一样,你看这里看上去非常舒服,然后编辑出来呢,看下编辑结果就是我们想要的东西,对吧?但是呢,我们现在不用去写这个玩意了,是不舒服多了。

首先我们来听一首歌曲, 成语最美的诗涵,诉不尽的相思之苦,讲不完的动人故, 今天我们就一起来探寻成语的魅力。 从课前的问卷情况来看,不了解成语与中华传统文化的关联, 没有尝试过用。用多媒界来了解成语是我们最大的困惑,所以今天我们这一堂课的主题就是善用多媒界探究中华文化的微缩景观成语。