发表于: 2018-07-23 22:29:49

1 560


今天完成的事情:

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 动态的向指定的元素中添加内容



返回列表 返回列表
评论

    分享到