发表于： 2019-04-03 20:49:48
1 851
今天完成的事情：
今天把任务十三的小问题又改了改，然后优化了一下代码，又了解了一下组件库
常规的组件库里面都会有那些常用的组件存在：颜色、列表、文字、图标、弹层、按钮等等，这些最基本的都是组件库必不可少的组成部分。我们通过Sketch的Symbol功能进行组件设计，利用Libraies进行团队协作。总的来说，组件库就是你自己建一个CSS文件，然后在里面写一大堆东西。最后你要用到的时候，直接把这个CSS文件引出来就OK了
明天计划的事情：明天计划在了解一下组件库，尽量搞懂怎写组件库
遇到的问题：组件库
一、组件库的价值
- 就个人而言，拥有一套自己的组件库，可以让你的开发变得更高效，让你在行业里更有价值。
- 就团队而言，拥有一套团队的组件库，可以让协同开发变得更高效规范，让你的团队在公司更具有影响力。
- 就公司而言，拥有一套公司维护的开源组件库，可以让你的公司在行业里更具有影响力。
二、哪些情况需要整合一套组件库
- 从业务上看，当业务达到一定规模后，很多地方需要复用
- 从设计上看，产品要遵循一定的设计规范来保持统一性
- 从开发上看，对开发效率要求高，需要快速迭代和响应开发需求
- 从维护上看，需要统一代码管理，需要达到更改一处全局响应的高可维护性
三、组件设计应遵循什么原则
- 就近管理
1. 单文件开发
2. 依赖的静态资源放在同级目录
3. 相关联组件也放在同级目录 - 高复用性
1. 页面级别的复用（基础组件）
2. 项目级别的复用- 私有组件库（业务组件）
3. 公司级别的复用- 开源组件库（element-ui、iview） - 分层设计
分层架构分为四个层：展示层(presentation layer)，业务层(business layer)，持久层(persistence layer)和数据库层(database layer)。
由于每一层都是封闭的，所以request必须逐层向下传递。那么为什么每一层都是封闭的呢，因为有个概念叫层隔离。层隔离就是说架构中某一层的改变不会影响到其他层，这些变化的影响范围仅限于当前层。
假如展示层和业务层都能够直接访问持久层，那么当持久层的数据变化时，会直接影响到展示层和业务层，这使得整个应用的耦合度变高了，使得组件之间相互依赖，降低了可维护性。
- 灵活扩展
组件要充分的考虑扩展性，除了提供丰富的props还要提供slot插槽来完成用户的定制化需求。或者提供可利用render函数动态渲染的功能。
收获：今天简单了解了一下组件库，大概搞清楚了组件库是干嘛用的
任务十总结
任务耗时2天
任务总结：任务十主要就是了解一下input按钮，其他的都很简单。还有就是要注意中间部分那个导航栏第二个和第三个用列偏移的话会比较好做。然后就是要注意栅格布局的分配问题，要让每一个盒子的位置都和UI图差不多。
深度思考
1.如何改变默认radio和select的样式？
需要用到的工具如下：
label标签；
:checked 选择器,匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。
兄弟选择器：
1、+ 选择器（相邻兄弟选择器），可选择紧接在另一元素后的元素，且二者有相同父元素。
2、~ 选择器，作用是查找某一个指定元素的后面的所有兄弟结点。
4.2 修改select默认样式
appearance 属性，可以让元素看上去像标准的用户界面元素。
2.自适应小屏幕设备时，该如何布局？
一、"自适应网页设计"的概念
2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如果屏幕宽度在400像素以下，则6张图片分成三行。
mediaqueri.es上面有更多这样的例子。
二、允许网页宽度自动调整
"自适应网页设计"到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要
具体说，CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分比宽度：
width: xx%; 或者 width:auto;
任务十一总结
任务耗时1天
任务总结：这个任务主要就是让你了解一下sass或者lass的嵌套。并用sass或者lass重新做一边之前的任务.然后要记得加上最小宽度和最大宽度就好了，这个任务没有什么难度，了解一下嵌套。基本上没啥问题了
深度思考
1.如何使用less?
2）.深入浅出Node.js（二）：Node.js&NPM的安装与配置（PS：安装最新版本的Node.JS已默认自带了NPM，无需通过GitHub去安装）
我本机的Node.JS默认安装在D:\nodejs\目录下，如图
启动node.js，查看版本
二、安装LESS包
通过npm install -d less命令安装LESS包。
为了将less包安装在nodejs的node_modules目录下，可以先进入d:盘，然后使用该命令
LESS包安装完成后，进入D:\nodejs\node_modules\，该目录下有三个目录，分别为less，npm和.bin（该目录下有lessc编译器），把D:\nodejs\node_modules\.bin添加到环境变量中。
三、编写.less文件并编译它
关于LESS语言的语法本文不做介绍，请参考 http://www.bootcss.com/p/lesscss/。
这是一个简单的测试代码test.less，内容如下
@color: #4D926F; #header { color: @color; }h2 { color: @color; }
该文件位于 E:\Code\VS2013\BootstrapDemo\LessDemo\Less\test.less。
启动node.js控制台，进入test.less文件所在的目录，输入lessc test.less > test.css命令，less文件就会被编译成css文件
打开生成的test.css 文件
2.如何使用sass?
因为Sass依赖于Ruby环境，所以安装Sass前，需要安装Ruby环境，官网下载。
安装时请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境
（安装Ruby时，路径中请勿出现中文，避免后续安装Sass失败）
安装完Ruby环境后，在开始菜单中，找到刚才安装的ruby，打开Start Command Prompt with Ruby
然后直接命令行输入
gem install sass按回车确认，等待一段时间就会提示Sass安装成功，现在因为墙的比较厉害，如果没有安装成功，请参考淘宝的RubyGems镜像安装sass，如果成功则忽略。
$ gem sources --remove https://rubygems.org/$ gem sources -a https://ruby.taobao.org/$ gem sources -l*** CURRENT SOURCES ***
https://ruby.taobao.org# 请确保只有 ruby.taobao.org$ gem install sass
三、编译Sass工具
Sass文件后缀为 .scss，因此要编译成 .css 文件。
1）命令行编译
sass style.scss style.cssSass 提供4种编译风格
# nested：嵌套缩进的css代码，它是默认值。# expanded：没有缩进的、扩展的css代码。# compact：简洁格式的css代码。# compressed：压缩后的css代码。
生产环境当中，一般选择最后一项。
sass --style compressed style.sass style.css也可以监听某个文件或目录，一旦文件发生改变，就自动生成编译后文件
# 单文件监听命令sass --watch input.scss:output.css# 文件夹监听命令sass --watch app/sass:public/stylesheetscss文件转成sass/scss文件（在线转换工具，css2sass）
sass-convert style.css style.sass
sass-convert style.css style.scss2）GUI工具编译
koala , 一个优秀的免费编译器，界面清晰简洁，操作起来也非常简单，详细介绍大家可以移歩到大漠的博客：Less/Sass编译工具，koala使用指南，点击下载 koala简单操作如下图：
3）编辑器编译
某些编辑器就内置了Sass编译，如webstorm等，而sublime text也有相应的插件可以使用：编译，保存即编译。
3.less和sass有什么区别？
Less和Sass的主要不同就是他们的实现方式。
Less是基于JavaScript，是在客户端处理的。
Sass是基于Ruby的，是在服务器端处理的。
关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
返回列表
评论