今日完成:
开始task14,重构task9代码
从修真院官网上了解:
前端为什么一定要做组件化?
前端方面，随着技术的发展，开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等的弊端。
希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，
在前端开发中的体现就是组件化。
模块化，即开发者把不同模块的或者公共的JS和CSS放在不同的文件中，然后在页面引入并使用
前端组件化的4个原则
标准性
组合性
重用性
可维护性
CSS组件化：Less和Sass
例如;less支持了模块化，可以@import ‘xxx.less’的形式导入其他less文件（模块），方便模块化。
扩展:
CSS规范模块化相关内容，@import语法
Less的@import指令
Less中，可以通过 @import指令来导入外部文件。@import指令可以放在代码中的任何位置，导入文件时的处理方式取决于文件的扩展名：
* 如果扩展名是 .css，文件内容将被原样输出。
* 如果是任何其他扩展名，将作为LESS文件被导入。
* 如果没有扩展名，将给他添加一个 .less 的扩展名，并作为LESS文件被导入。
例如：
1. @import "style"; // 导入 style.less
2. @import "style.less"; // 导入style.less
3. @import "style.php"; // style.php 作为LESS文件被导入
4. @import "style.css"; // 文件内容被原样输出
一个网站常常是有多个模块组成，如果只使用一个 .less 文件，编辑起来非常不便，也不利于分工协作。此时，就可以为每个模块单独创建 .less 文件，然后通过 @import指令将它们合并成一个文件。
假如一个网站包含产品、新闻、BBS三个模块，就可以为每个模块单独创建一个 .less 文件，分别是 product.less、news.less、bbs.less。然后，在 style.less 中，通过 @import指令将它们合并成一个文件：
1. @import "product.less";
2. @import "news.less";
3. @import "bbs.less";
导入外部文件的一个常见应用场景，就是变量共享。通常是在一个 .less 文件中定义一些变量，其他文件只需导入这个 .less 文件，就可以使用这些变量。如，在 base.less 中定义 @color 变量：
1. @color: #fff;
然后，在 styles.less 文件中，只需使用 @import指令导入base.less 文件，就可以使用它的变量 @color，而不必重复定义。代码如下：
1. @import "base.less";
2. .myclass {
3. background-color: @color;
4. }
styles.less 编译后的CSS代码为：
1. .myclass {
2. background-color: #fff;
3. }
为了在将Less文件编译生成CSS文件时，提高对外部文件的操作灵活性，还为@import指令提供了一些配置项。语法为：
1. @import (keyword) "filename";
@import指令的配置项及其含义见表 2‑1。
选项
含义
reference
使用文件，但不会输出其内容（即，文件作为样式库使用）
inline
对文件的内容不作任何处理，直接输出
less
无论文件的扩展名是什么，都将作为LESS文件被输出
css
无论文件的扩展名是什么，都将作为CSS文件被输出
once
文件仅被导入一次 （这也是默认行为）
multiple
文件可以被导入多次
optional
当文件不存在时，继续编译（即，该文件是可选的）
一个@import指令可以使用一个或多个配置项，当使用多个配置项时，各配置项之间用逗号隔开。
ps:
在生产环境单独去用@import，会有较为严重的性能问题，而且不同的浏览器以及不同的用法下也有不同的表现
对比理解模块化;
传统开发:
一般为了页面上比较好的性能，减少创建http请求的消耗，会选择尽量减少link的css文件数量,
如:页面上所有的样式都写在了一个style.css里面,网站越大,这个文件越长,代码越多,假如出现某个bug,或者增该需求,
需要成本就会很大,并且轻易不敢删除css代码
模块化开发:
页面不改，还是只引用那一个样式，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。
然后相应的代码就在对应的模块中，
简洁易维护
优点:
1. 浏览器原生支持(包括ie6)
2. 方便删除某个模块
3. 便于管理各种日常需求
4. 方便合作开发
5. 方便多人协作
以上,CSS模块化，以及如何利用@import形式来组织自己的模块
但是，如果这样开发完直接上线的话，页面会有一些问题:
一些常见的:
1. 因为@import的文件是额外请求的，所以页面加载的时候会有一小会儿的裸体（样式没加载进来），要等这些模块一个一个加载
2. 请求数太多，页面性能不佳，对服务器压力也会相对大一些。
3. 不同的浏览器以及不同的书写形式可能会有不同的加载顺序。
所以，最好的办法就是把模块打包！这和js模块化一样的，模块化开发，然后上线之前打包，线上完美使用。
扩展:什么是打包?什么作用?怎么操作?(暂时用不到,留待以后查询)
注意:
CSS规范中，@import必须放在其他样式之前，比如：
@import "./css/style.css";
@import "./css/style2.css";
body{
margin:0px;
padding:0px;
}
而下面这种写法：
@import "./css/style.css";
body{
margin:0px;
padding:0px;
}
@import "./css/style2.css";
mod2.css是无法被浏览器@import进来的。
所以,最佳实践就是把所有的模块import都放在入口文件的最开始，方便管理。
扩展:@import和link区别?
引入CSS的方法有两种，一种是@import，一种是link
@import url('地址');
<link href="地址" rel="stylesheet" type="text/css" />
现在绝大部分的网站都采用后一种link方式，原因在于
@import先加载HTML，后加载CSS
link先加载CSS，后加载HTML。
所以前者加载网页会出现令浏览者以外的格式，后者则是带格式的加载网页。
注意:只有css样式代码重复的部分要分库,html文件,该重复的代码,还是要重复
开始看task9中重复的需要拆分的库
不用bootstrap写任务9
1.三个页面公共开头
header
梳理需要用到的知识:
.弹性布局:
内容左中右且设置图片shink:0
.图片改为背景填充,减少请求
扩展:用img和backgroud插入图片的优缺点
nav
.css写栅格布局,应用媒体查询
.css书写下拉菜单
2.个页面公共结尾
footer同header没有新的知识点
3.每个页面重复的代码
描述:基本样式相同,基本区别就是插入图片的不同,或者单一的动画效果不同
.应用为less中的匹配模式
遇到问题:
开始以为,库是不同行业面,html文件也要分,如:几个页面公用一个头部和尾部,就把这部分头部和尾部拿出来,分别做一个header.html和footer.html文件,显示头部和尾部,然后在编辑html文件其它部分时,直接调用这部分的文件,像拼图一样把它们调用过来.
结论:这样是不对的,不能直接调用html文件,还是上面例子,分的是公用头部和尾部的样式,调用也是在不同页面编辑css文件时,把它们的样式作为公共样式调用到目标css文件中去.节约的是重复的样式代码,几个相同头部和尾部的页面,在编辑html文件时,头部文件和尾部文件,还是要重复去写的
收获;知道怎么分库,还有less中@import的语法应用
明日计划:完成task14
返回列表
评论