[深圳|结业弟子]JS-徐炜|2018年05月30日的日报-技能树.IT修真院

发表于： 2018-05-30 22:35:11

1 535

一、今日完成的情况

看了师兄推荐的文章，对组件化、模块化的理解才清晰了很多。选择了bootstrap框架，来拆分为header（页眉）、footer（页脚）、container（内容）、navigation（导航栏）、slideshow（轮播图）五个组件。

二、明天的计划

1、继续任务十四，对拆分的组件进行优，设置样式，并用sass进行编译。

2、学习了JS的基础知识。

三、遇到的问题

1、刚开始拆组件时，分别找到了bootstrap源码里对应的css和less文件进行拆分，结果发现拆分出来的效果有问题，组件在页面显示的效果崩了。

解决办法：折腾了半天，分别拆了一堆没用的文件，后来才发现可以直接拆分完整的bootstrap.css，随机删掉了之前的垃圾文件，重新拆解了bootstrap。css文件。

2、看了师兄推荐的文章后，基本上明白了组件和模块化。有一个疑问就是，按照拆分的组件，分为几个不同的文件夹分别存放各个组件，那最后的页面，link文件是分别引入html文件，还是汇总成一个总的css文件再引入html文件？

四、收获

1、前端工程的三个阶段。

（1）第一阶段：库/框架选型：前端工程建设的第一项任务就是根据项目特征进行技术选型。合理的技术选型可以为项目节省许多工程量。

（2）第二阶段：简单构建优化：选型之后，前端工程进行到第二阶段会选型一种构建工具，对代码进行压缩，校验，之后再以页面为单位进行简单的资源合并，在这一阶段光解决开发效率还不够，必须要兼顾运行性能。

（3）第三阶段：JS/CSS模块化开发：分而治之是软件工程中的重要思想，是复杂系统开发和维护的基石。在解决了基本开发效率运行效率问题之后，前端团队开始思考维护效率，模块化是目前前端最流行的分治手段。

（4）第四阶段：组件化开发与资源管理：一个通用的资源表生成工具 + 基于表的资源加载框架。

2、组件化开发

（1）特点：1>.页面上的每个独立的可视/可交互区域视为一个组件；2>.每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护;3>.由于组件具有独立性，因此组件与组件之间可以自由组合；4>.页面只不过是组件的容器，负责组合组件形成功能完整的界面；5>.当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。

（2）优点：组件化开发具有较高的通用性，无论是前端渲染的单页面应用，还是后端模板渲染的多页面应用，组件化开发的概念都能适用。组件HTML部分根据业务选型的不同，可以是静态的HTML文件，可以是前端模板，也可以是后端模板。

3、模块化开发

（1）JS模块，指的是独立的算法和数据单元。例如：浏览器环境检测(detect)，网络请求(ajax)，应用配置(config)，DOM操作(dom)，工具函数(utils)，以及组件里的JS单元。

（2）CSS模块，指的是独立的功能性样式单元。例如：栅格系统(grid)，字体图标(icon-fonts)，动画样式(animate)，以及组件里的CSS单元。

（3）UI组件，指的是独立的可视/可交互功能单元。例如：页头(header)，页尾(footer)，导航栏(nav)，搜索框(search)。

（4）页面，指的是前端这种GUI软件的界面状态，是UI组件的容器。例如：首页(index)，列表页(list)，用户管理(user)。

（5）应用，指的是整个项目或整个站点被称之为应用，由多个页面组成。

4、学习了JavaScript的注释标签，顺便回顾了HTML和CSS的注释标签。

（1）HTML的注释标签：

（2）CSS的注释标签： /* */

（3）JS的注释标签： /* */（注释代码块）、//（注释单行），需要注意的是，两种注释有各自的使用环境,并且不能相互替代。过多的JavaScript注释会降低JavaScript的执行速度与加载速度，因此应在发布网站时，去掉JavaScript注释。

5、晚上，分院的师兄们各自来了一段自我介绍，说了说自己的学习情况，来修真院的感想。随后泽平大佬和施星大佬也发表了重要讲话，给我们讲了关于任务、复盘项目还有真实项目的情况，着重强调了职业素养，做项目要积极主动，在今后的找工作和工作中需要做些什么准备，需要注意那些问题，收获颇多。