发表于: 2018-07-06 17:23:02

1 819



今天完成的事情

提交任务十三

查看组件化和模块化





明天的计划

任务十四




遇到的问题





收获

组件化

组件化更多关注的UI部分,页面的每个部件,比如头部,内容区,弹出框甚至确认按钮都可以成为一个组件,每个组件有独立的HTML、css、js代码。

可以根据需要把它放在页面的任意部位,也可以和其他组件一起形成新的组件。一个页面是各个组件的结合,可以根据需要进行组装。



模块化

模块化侧重的功能的封装,主要是针对Javascript代码,隔离、组织复制的javascript代码,将它封装成一个个具有特定功能的的模块。

模块可以通过传递参数的不同修改这个功能的的相关配置,每个模块都是一个单独的作用域,根据需要调用。

一个模块的实现可以依赖其它模块。



组件化和模块化的区别

模块化更一种开发规范,比如cmd  amd 是为了更好的解藕,比如一个网站,按照不同的模块来开发,

比如你有个评论区,a 项目有,b 项目有,如果仅是单纯的模块开发,这个js 文件你就可以单独来回引用,

更比如 ,一个页面 分好多个功能, 这时候你要是都写在一个js 中 会越来越大,而你把他分成不同的模块,

比如评论是一块,分页又是一块,已经上线,或你不做了,后期别人拉手,或你接手别人的项目,这个时候来个需求让你把分页去掉,或修改 你可以清楚的找到对应模块文件 进行修改 或去掉  

模块是自定义的,


组件,更想当于一个通用的东西,有的分功能组件,有的分业务组件

大图切换,这种就是单纯的一个效果展示,只要调用就ok 

一个分页,也是只单纯的调用,

组件更是一个多处都可以使用 ,不需要再单独开发的







任务名称 :css-task-12

成果链接:https://it-xzy.github.io/Task/Web/zhouneng/CSS/css12/zhaohugomg/hugong.html

任务耗时:2018.7.4-2018.7.6(2天)

技能脑图:

官网脑图:

自己脑图:

任务总结:

sass变量

sass使用$符号来标识变量


sass变量的声明和css属性的声明很像

比如$highlight-color:#F90

这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都 可以用作sass的变量值


凡是css属性的标准值可存在的地方,变量就可以使用。css生成时,变量会被它们的值所替代。之后,如果你需要一个不同的值,只需要改变这个变量的值,则所有引用此变量的地方生成的值都会随之改变。


sass的变量名可以与css中的属性名和选择器名称相同,包括中划线和下划线。这完全取决于个人的喜好,有些人喜欢使用中划线来分隔变量中的多个词(如$highlight-color),而有些人喜欢使用下划线(如$highlight_color)。使用中划线的方式更为普遍,这也是compass和本文都用的方式。


不过,sass并不想强迫任何人一定使用中划线或下划线,所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用,反之亦然。这意味着即使compass选择用中划线的命名方式,这并不影响你在使用compass的样式中用下划线的命名方式进行引用:

编译后css文件


嵌套

在sass中,除了CSS选择器,属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕,但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中,你只需敲写一遍border

嵌套属性的规则是这样的:把属性名从中划线-的地方断开,在根属性后边添加一个冒号:,紧跟一个{ }块,把子属性部分写在这个{ }块中。就像css选择器嵌套一样,sass会把你的子属性一一解开,把根属性和子属性部分通过中划线-连接起来

属性和选择器嵌套是非常伟大的特性,因为它们不仅大大减少了你的编写量,而且通过视觉上的缩进使你编写的样式结构更加清晰,更易于阅读和开发。



混合器


混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符,比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式。


通过@include来使用这个混合器,放在你希望的任何地方



注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ,会保留到编译后的文件。

单行注释 // comment,只保留在SASS源文件中,编译后被省略。

在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。



返回列表 返回列表
评论

    分享到