发表于: 2018-07-23 22:29:49
1 561
今天完成的事情:
1.开始任务14;
2.学习组件库;
3.了解js基础知识
明天计划:
1.继续写任务14;
2.了解BFC;
3.巩固前面的知识;
遇到的问题:
今天主要在写整体页面布局,暂无问题;
收获总结:
1.flex布局中容易疏忽的问题:
flex简单实用,但是不注意一些小细节的话在使用的时候容易出现问题;
1.随着flex-direction的改变,其他的一些属性也跟着改变,在应用flex的时候,我们应该要注意一下justify-content,align-content,align-items这些属性是相对于主轴的位置来定义的,flex-direction的属性发生了变化,也就是主轴的位置发生了变化,自然这些属性也发生了改变。
2.flex的子元素不受float的影响;
3.不能在display中嵌套position:absolute、relative,这样会导致布局会失效;
4.flex-wrap的默认值nowrap,我们需要设置才会自动换行;
2.学习组件库与组件化的相关知识:
组件库是有用功能的有组织的集合。典型功能包括处理字符串,日期,HTML DOM元素,事件,Cookie,动画,网络请求等。
组件化是一种化繁为简的思想,当某个部件出现问题时,不需要将整体都进行维修,只需要将坏的部件拿下来,维修之后再将其组合上就可以了。
组件应该遵守的个原则:
标准性 :任何一个组件都应该遵守一套标准,可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。
组合性 :组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合,而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示,肯定是要依赖不同组件之间的组合,嵌套以及通信。
重用性 :任何一个组件应该都是一个可以独立的个体,可以使其应用在不同的场景中。
可维护性 :任何一个组件应该都具有一套自己的完整的稳定的功能,仅包含自身的,与其它组件无关的逻辑,使其更加的容易理解,使其更加的容易理解,同时大大减少发生bug的几率。
CSS,JS各有哪些流行的组件库:
Bootstrap :我们现在接触的最多的就是bootstrap了,bootstrap是一种简洁,直观,强悍的前端开发框架,让web开发更迅速。
Foundation:基金会提供了仅有限的几种元素,其目标是,即使你使用预定义的UI元素,也不应该与大家的网站长得太像。而引导则致力于提供所有定义好的元素,这样使得看起来许多网站都差不多。基础默认不带图标集,它推荐使用开源字体图标。
jQuery :jQuery是最常用的JavaScript库,它革命性的在客户端开发,将CSS选择器引入到DOM节点检索加链接来应用事件处理程序,动画和Ajax调用。
阵营:阵营起源于实的内部项目,因为该公司对市场上所有的JavaScript的MVC框架,都不满意,就决定写自己 一套,用来架设的Instagram的的网站。
3.学习js基础知识:
JS的组成:
- ECMAScript(定义了JS的基本语法,命名规范,操作语句,变量,数据类型等最基础最核心的知识)
- DOM(document object model 文档对象模型) 提供了JS操作页面上元素的常用属性和方法
- BOM(browser object model 浏览器对象模型) 提供了JS操作浏览器的常用属性和方法
JS中的输出方式
1、alert(要输出的内容); 在浏览器中弹出一个框,在框中有我们要输出的内容(不管最后输出什么内容,输出的都是字符串内容)
2、confirm:在浏览器中弹出一个提示确认框(confirm("确定要删除吗?"))
3、console.log(要输出的内容); 按F12在控制台中的console页卡中显示(一般用于调试,不会影响页面中的内容)
4、console.dir:他只是比.log输出的内容更加详细一些
5、console.table:他能把我们需要查看的数据在控制台中以一个表格的形式展示出来
6、document.write(我们要输出的内容); 直接显示在页面中,不停的输出
7、innerHTML/innerText 动态的向指定的元素中添加内容
评论