发表于： 2018-06-18 22:41:33
1 618
今天完成的事情：
做任务14、15
学习组件库
学习CSS模块化开发
明天计划的事情：
继续做任务14、15
遇到的问题：
为什么要做组件库？
提高前端开发效率，降低WEB维护成本
在大型软件系统中，Web应用的前后端已经实现了分离，而随着REST软件架构的发展，后端服务逐步倾向于微服务，简单来说就是将一个大型后端服务，拆分成多个小服务，它们分别部署，降低了开发的复杂性，而且提高了系统的可伸缩性。而前端方面，随着技术的发展，开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等的弊端。
收获：
CSS模块化开发
一个完整的系统，模块与模块之间，尽可能的使其独立存在。也就是说，让每个模块，尽可能的独立完成某个特定的子功能。模块与模块之间的接口，尽量的少而简单。如果某两个模块间的关系比较复杂的话，最好首先考虑进一步的模块划分。这样有利于修改和组合。
组件化并不是一个十分难以理解的词语，他就像我们组装电脑一样，由不同的组件构成，例如显示器，显卡，cpu，风扇，硬盘等，对应着来看可以分为头部，导航栏，侧边栏，底部等一系列的组件，这些组件就像电脑一样，当某个部件出了问题不会影响其他的部件，我们可以很快的确认电脑哪个地方出现了问题，我们还可以升级电脑，同理，我们也可以通过更换修改组件来进行功能拓展。
CSS规范里面就已经提到模块化相关内容了，就是@import语法。
页面不改，我们还是只引用那一个样式，style.css，但是文件内容改成如下样式：
/*xxx页面入口样式文件style.css*/
@import './css/base.css';/*页面基础样式*/
@import './css/index.css';
@import './css/header.css';
@import './css/footer.css';
……
以上为多个模块的样式文件
这里，我们把style.css中混乱的样式划分成了一个一个的子文件，作为模块。可以看到，作为示例，我把页面的一些reset样式以及一些站点公用样式放在了css目录下的base.css中，把页头拆分成header.css，把页面的基础布局都放在了index.css这个文件中，底部的样式放在了footer.css。然后相应的代码就在对应的模块中写，是不是看起来简洁、好维护很多呢？
不光是简洁，使用@import形式的模块化还有下列好处：
1. 浏览器原生支持
2. 方便删除某个模块
3. 便于管理各种日常需求
4. 方便合作开发
5. 方便多人协作
前端为什么要做组件化：
而前端方面，随着技术的发展，开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等的弊端。
传统开发方式效率低以及维护成本高的主要原因在于，很多情况下我们是将一个系统做成了整块应用，而随着业务的增长或者变更，系统的复杂度往往会呈现指数级的增长。经常出现的情况就是，一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。
我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。
这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。
Reset和Normalize的区别
1.保留有用的默认值，不同于许多的CSS重置，直接清零。
2.标准化的样式，使用范围广的元素
3.纠正错误和常见的浏览器的不一致性
4.一些细微的改进，提高了易用性
5.使用详细的注释来解释代码
但我们访问 http://www.jnshu.com 时发生了什么？
1.服务器返回jnshu页面资源，浏览器载入html
2.浏览器开始解析
3.发现link,发送请求载入css文件
4.浏览器渲染页面
5.发现图片，发送请求载入图片，并重新渲染
浏览器：请把修真院首页给我
服务器：index.html
浏览器：对请求回来的html文件 进行解析
浏览器：请把修真院首页之中link的css文件给我
服务器：拿走"index.css"
浏览器：继续渲染页面
浏览器：发现外部资源：图片
浏览器：请把修真院首页之中引入的图片给我
服务器：index.png
浏览器：渲染完成
html5提供一种 应用缓存 机制，使得基于WEB的应用程序可以离线运行
离线浏览
更快的速度
减少服务器负载
若想为网页开启应用缓存，首先你需要在应用页面中的元素上增加manifest属性
<html manifest="jnshu.appcache">
······
</html>
manifest文件是简单的文本文件，他告知浏览器被缓存的内容(以及不缓存的内容)
进度：task14、15
任务开始时间：2018.6.18
预计结束时间：2018.6.20
是否有延期风险：无
禅道：http://task.jnshu.com/zentao/project-task-687.html
返回列表
评论