前端项目相关

前端项目发展的四个阶段:

1、库/框架

库:jQuery

框架:vue、React、Angularjs

2、构建优化

选择Gulp, Grunt, Webpack 等构建工具,对代码进行压缩、校验,再以页面为单位进行简单的资源合并。

3、JavaScript和CSS模块化开发

分而治之是软件工程中的重要思想,模块化是目前前端最流行的分治手段。模块化开发的最大价值不是复用,而应该是分治。

1) JavaScript模块化开发:

JavaScript模块化开发的方案有很多,包括:

① AMD规范:用于客户端,RequireJS实现;

② CommonJS规范:用于服务端,Browserify实现;

③ ES6 Module:export和import实现。

2) CSS模块化开发:

CSS模块化开发是在LESS、SASS、Stylus等预处理器的@import导入、@mixin混入特性支持下实现的。

注意:模块化中的模块一般指JavaScript模块。

4、组件化开发与资源管理

1) 组件化开发

组件化开发的最大价值在于复用。

① 页面上的每个独立的可视/可交互区域视为一个组件;

② 每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护;

③ 由于组件具有独立性,因此组件与组件之间可以自由组合;

④ 页面只不过是组件的容器,负责组合组件形成功能完整的界面;

⑤ 当不需要某个组件,或者想要替换组件时,可以整个目录删除/替换。

前端项目的几个开发概念:

概念;说明;实例

JS模块

独立的算法和数据单元

浏览器环境检测,网络请求Ajax,应用配置,DOM操作,工具函数及组件里的JS单元

CSS模块

独立的功能性样式单元

栅格系统,字体图标,动画样式及组件里的CSS单元

UI组件

独立的可视/可交互功能单元。一个组件一个目录,资源就近维护;组件可组合;组件的JS可依赖其他JS模块, 组件的CSS可依赖其他CSS单元

页头,页尾,导航栏,搜索框

页面

UI组件的容器,由UI组件组成

首页,列表页,用户管理

应用

整个项目或整个站点称为应用,由多个页面组成

前端项目的目录结构示例:

组件与模块的异同与联系:

① 相同点:

都是基于功能划分的单位。

② 不同点:

组件,偏向发行的概念,强调复用,作为可以被第三方客户使用的独立工具,组件一般都有独立的封装。

模块,偏向设计的概念,强调分治,一般指JavaScript模块,但也包括CSS模块等,用于在项目中划分相对独立的功能,封装时可以和其他模块混合,发行时可以多个模块合并后一起发行。

③ 联系:

组件与模块没有上下级的包含关系,模块可以引用多个组件,组件也通常由多个模块实现。也就是说,将页面分成一个个组件,各组件互不干扰,分别开发,可随意组合,组件包括HTML、CSS、JS代码,而它的script可以由多个模块组成,JS模块利用命名空间、闭包等方式将想要暴露的属性暴露出来,或使用AMD、CMD、ES6 Module等方式,而CSS模块利用LESS、SASS、Stylus等预处理器的@import导入、@mixin混入特性实现。

架构、框架、模式、模块、组件、插件、控件、中间件等相关概念,它们的含义与区别:

2) 静态资源管理

① 资源加载策略

无论访问哪个页面都能按需加载页面所需资源,没访问过的无需加载,访问过的可以缓存复用。

② 增量加载(增量更新)

在需要更新资源的时候,不需要重新加载所有资源,只需要加载变化的资源(新增的资源),然后合并到当前资源上。

③ 前端优化

l 加载相关的策略:按需加载、延迟加载、预加载、请求合并;

l 缓存相关的方案:缓存利用,缓存更新、缓存共享、非覆盖式发布。

前端高性能:CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送。

④ 静态资源管理系统 = 一个通用的资源表生成工具 + 基于表的资源加载框架

l 资源表:一份数据文件,如JSON,是项目中所有静态资源(主要是JS和CSS)的构建信息记录,通过构建工具扫描项目源码生成,是一种key-value结构的数据,以每个资源的id为key。

l 资源加载框架:提供一些资源引用的API,让开发者根据id来引用资源,替代静态的script/link标签来收集、去重、按需加载资源。调用这些接口时,框架通过查表来查找资源的各项信息,并递归查找其依赖的资源信息,可以在此过程中实现各种性能优化算法来智能地加载资源。

你可能感兴趣的:(前端项目相关)