发表于: 2017-03-29 22:10:27
2 621
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
了解到什么是CSS模块化?
了解怎么CSS 模块化?
为什么要CSS 模块化?
查找资料为什么要组件化? 我们该怎么做组件化呢?
明天计划的事情:(一定要写非常细致的内容)
开启任务15:综合性的总结——按照任务12,13学到的规范,重写一遍任务9,不用其他框架,使用less/sass并编译
查找资料了解
1.目前流行的组件库有哪些?css,js各有哪些流行的库?
2.经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
3.Quirks模式是什么?它和Standards模式有什么区别?
4.渐进增强和优雅降级之间有什么不同?
5.HTML5的离线储存怎么使用?
6.知道什么是微格式吗?谈谈理解。在前端构建中应该考虑微格式吗?
7.知道css有个content属性吗?有什么作用?有什么应用?
8.谈谈以前端角度出发做好SEO需要考虑什么?
9.请描述 BFC(Block Formatting Context) 及其如何工作?
遇到的问题:(遇到什么困难,怎么解决的)
前端为什么要做组件化?
前端方面,随着技术的发展,开发的复杂度也越来越高,传统开发模式总是存在着开发效率低,维护成本高等的弊端。传统开发方式效率低以及维护成本高的主要原因在于,很多情况下我们是将一个系统做成了整块应用,而随着业务的增长或者变更,系统的复杂度往往会呈现指数级的增长。经常出现一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。针对此弊端,我们希望一个大且复杂的场景能够被分解成几个小的部分,这些小的部分彼此之间互不干扰,可以单独开发,单独维护,而且他们之间可以随意的进行组合。就拿电脑主机来说,一台整机包括CPU,主板,内存,硬盘等,而这些部件其实都是由不同的公司进行生产的,他们彼此之间根据一套标准分别生产,最后组装在一起。当某个部件出现问题时,不需要将整台主机都进行维修,只需要将坏的部件拿下来,维修之后再将其组合上就可以了。这种化繁为简的思想在前端开发中的体现就是组件化。
随着React,Angular等以组件(指令等)为主的优秀前端框架的出现,前端组件化逐渐成为前端开发的迫切需求,当然这一迫切需求也逐渐成为一种主流,一种共识,它不仅提高了前端的开发效率,同时也降低了维护成本。开发者们不需要再面对一堆复杂且难阅读的代码,转而只需要关注以组件方式存在的代码片段。
收获:(通过今天的学习,学到了什么知识)
什么是CSS模块化?
首先,让我们从官方文档入手:
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. CSS模块是默认情况下,所有类名和动画名称都在本地范围内的CSS文件。
百度词条是这么解释“ 模块化 ”的:模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能,所有的模块按某种方法组装起来,成为一个整体,完成整个系统所要求的功能。模块具有以下几种基本属性:接口、功能、逻辑、状态,功能、状态与接口反映模块的外部特性,逻辑反映它的内部特性。在软件的体系结构中,模块是可组合、分解和更换的单元。
CSS为什么要模块化?
站点内容越来越多、代码越来越臃肿,渐渐影响到了用户体验(主要是打开速度和响应速度),也影响到了程序员维护的效率。
模块化思维可以有效减少代码冗余、提高代码重用率,更重要是可以支持多人维护,降低维护成本。使用模块化也可以在一定程度上降低耦合度,对于BUG的定位也有帮助。所以,我们更应该在站点前期就重视并使用“模块化的思维”编写站点。
了解模块化的优点,认识到模块化对编码的重要意义。
“模块化”提高代码重用,提高开发效率,“模块化”的优点还有很多,我大概列了一下:
1)提高代码重用率
2)提高开发效率、减少沟通成本
3)降低耦合
4)降低发布风险
5)减少Bug定位时间和Fix成本
6)提高页面容错
7)更好的实现快速迭代
8)更好的支持灰度发布
其中最重要的一点,我认为是“提高代码重用率”,这也是模块化最重要的特点之一。
评论