今天完成的事：
1.开始了任务十四学习
2.学习了sass组件化、模块化
3.了解了glup自动化构建
明天的计划：
1.完成任务十四的组件化拆分
2.学习bootstrap源码
3.轮播图重构
遇到的问题：
无
收获：
1.对于我们前端为什么要学习组件化、模块化，以及glup自动化构建有了进一步的认识
现在前端工程可以分为三个阶段
第一阶段：库/框架的选择
基本上现在没有人会出去完全从0开始做网站，我们会选择jQuery、Vue、React、Angular等，合理的选择框架和库，可以给我们减少很多工程量
第二阶段：简单构建优化
当我们选择好整体使用的框架和库之后，就开始敲代码了，不过光用框架来解决开发效率还不够，必须还要兼顾运行性能。这时候，到了第二阶段，我们会选择一种构建工具，对代码进行压缩，校验，之后再以页面为单位进行简单的资源和并。
但是现在前端开发工程化的程度很低，至少在除了BAT之外是这样的（作者的观点），很多公司对于”前端开发工程化“的认知仅仅停留在”压缩、校验、合并“这种程度 【所以说更高一层次的认知是什么样的呢？】
第三阶段：JS/CSS模块化开发
作者提出一个观点”分而治之“，这是软件工程的重要思想，是复杂系统开发和维护的基石，我们在解决了开发效率、运行效率之后，就应该开始思考维护效率，模块化就是目前前端最流行的分治手段。（作者强调：很多人觉得模块化开发的工程意义是复用，我不太认可这种看法，模块化开发的最大价值应该是分治，分治，分治！ 不管将来是否要复用某段代码，我们都有充分的理由将其分治未一个模块）。
CSS模块化开发基本就是sass / less / stylus等与处理器的import / mixin特性支持下实现的。
【毫不夸张的说，在业界里绝大多数团队的工程化落后程度之高，能达到前面这三项的团队已经属于高端行列，基本具备了开发维护一般规模Web应用的能力】
第四阶段：
前端是一种技术问题较少，但是工程问题较多的软件开发领域。
当我们要开发一款完整的Web应用的时候，会面临很多的工程问题，比如：
大体量：多功能、多页面、多状态、多系统；
大规模：多人甚至多团队开发
高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送
…… so，这是一系列严肃的系统工程问题
所以到了第四阶段，我们只需要做好两件事就能大幅提升前端开发效率，并且兼顾运行性能
————组件化开发、 ”智能“静态资源管理
（1）组件化开发
这就是前面提到的非常重要的工程优化手段——分治。前端作为GUI软件（Graphical User Interface 软件图形用户界面），光有JS/CSS的模块肯定不够的，对于UI组件的分治也同样非常需要
上图，就是我所信仰的前端组件化开发理念，简单解读一下：
（1）页面上的每个独立的可视/可交互区域视为一个组件
（2）每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护
（3）由于组件具有独立性，因此组件与组件之间可以自由组合
（4）页面只不过是组件的容器，负责组件与组件形成 功能完成的页面
（5）当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换
其中（2）描述的就近维护，是最具有工程价值的地方，它为前端提供了很好的分治策略，每个开发者都清楚的知道，自己所开发和维护的功能单元，其代码必然存在于相应的组件目录中，在那个目录下，我们可以找到所有关于这个功能单元的内部逻辑，样式也好，JS也好，页面结构也好，都在那里。
组件化开发具有较高的通用性，无论是前端渲染的单页面应用，还是后端模块渲染的多页面应用，组件化开发的概念都能适用。组件HTML部分，根据业务选型的不同，可以是静态的HTML文件，可以是前端模块，也可以是后端模块：
——不同的技术选型，决定了不同的组件封装和调用策略
基于这样的工程理念，我们很容易将系统以独立的组件为单元，进行分工划分：
由于系统功能被分治到独立的模块或组件中，粒度比较精细，组织形式松散，开发者之间不会产生开发时序的依赖（不分你先，我后的），大幅提升并行的开发效率。
结合之前提到的模块化开发，整个前端项目可以划分为这么几种开发概念：
以上几种概念以相对较少的规则组成了——前端开发的基本工程结构，基于这些理念，我眼中的前端开发就是这个样子的：
下面是对于一般中小规模的项目，大致可以这样划出结构：
吐槽：我本人非常反对某些前端团队将前端开发划分为“JS开发”和“页面重构”两种岗位，更倾向于组件粒度的开发理念，对GUI软件开发的分工规划应该以功能为单位，而不是开发语言；对开发者的技术要求也应该是掌握完整的端内技术。
第四阶段的第二件事： ”智能“静态资源管理
简单来说就是当用户访问一个功能非常丰富的应用，如果我们按照现在一般的方式实现就是强制加载全部静态资源再展示，但是由于内容太多，加载需要一定时间，这时候很多用户就会失去耐心，从而流失了客户。 静态管理资源就是秉承着”增量原则“，经过精细的规划每个页面，从而达到无论用户想访问哪个页面，都能按需加载资源，没访问过的就不加载，访问过的可以缓存复用，最终带来流畅的应用体验。
但是具体怎么实现的，我还得过段时间再来领悟，现在水平尚浅~
任务十三任务总结：
官网脑图：
技能脑图：
任务十三主要两个重点 1. 进行sass的嵌套，继承，混合器的进一步练习，避免冗余的代码 2.进行组件化，把代码按照功能分类，分而治之
组件化的核心：
（1）页面上的每个独立的可视/可交互区域视为一个组件
（2）每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护
（3）由于组件具有独立性，因此组件与组件之间可以自由组合
（4）页面只不过是组件的容器，负责组件与组件形成 功能完成的页面
（5）当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换
其中（2）描述的就近维护，是最具有工程价值的地方，它为前端提供了很好的分治策略，每个开发者都清楚的知道，自己所开发和维护的功能单元，其代码必然存在于相应的组件目录中，在那个目录下，我们可以找到所有关于这个功能单元的内部逻辑，样式也好，JS也好，页面结构也好，都在那里。
返回列表
评论