创业成长系列.前端项目模块化解决方案
来源:互联网 发布:linux 日志重定向 编辑:程序博客网 时间:2024/05/16 11:02
一个完整的前端项目如果想要不断的持续开发下去,一定在最初的时候就要有一个完整的解决方案。在这里我教给大家其中的一种解决方案。以后会放出升级版,这一版是最原始的版本。
前后端分离的开始
首先简单的把前后端分离出来吧。
1.所有资源全都静态化,数据都从后端的接口获取。
2.使用nginx将前端和后端链接在一起,同时将资源和页面分开。
以上部分就显示了分离以及分离之后组成的页面部分。其中前端资源包括css、js、图片等。这部分也可以做cdn加速等操作。
前端模块化
前端模块化也是前端组件化。它是把所有资源看做是一块一块的结果集。你可以认为一堆接口+几个页面+几个针对的js文件就组合成了一个模块。这个模块对应业务或者逻辑上的一个模块。如果再看微服务的同学可能会更理解一些。
1.业务的分离更适合后端的分离。
2.统一的接口代表了统一的变化
3.不同的模块自由组合。可以是模块的组合也可以是js、css的组合
4.前端内部再次分离,更细粒度的控制js、css等资源,最终在构建的时候统一处理,减少重复开发。
一些实现方式
以下就是一些涉及到的技术选择了。
1.css部分。通过less的分离导入功能做到统一部分合并,不同的地方使用不同的样式。
2.js部分。使用requrejs导入不同的js文件在做异步加载,更利于页面的加载速度,更好的模块化方式。
3.页面。使用gulp来出来这些模块化的页面。
以上就是一些简单的模块化选择,当然这只是一个基础,更复杂的是后面的部分。
其他实现
1.基础模块。在所有模块加载之前,有一个基础模块需要先处理,它的优先级非常高。它通常会需要做权限的判断,预设内容的判断,登录状态的管理等等。类似于一个筛选器,将一些不能够看的功能隐藏或者跳转到其他页面等。
2.ajax模块。这个模块隐藏在所有接口文件后面。因为要做一些特殊处理。比如token验证、返回格式验证、报错信息验证提示等。
3.多语言的一部分。对的,你没有看错。多语言涉及到的一部分也在这里。包括不同语言的css文件加载、不同语言的提示文件加载等等。。
4.gulp处理。整个项目的开发都是构建在gulp的基础上的。包括css处理、es6处理、图片处理、httpserver的启动和重启等。除了这些基础的东西外还有多语言的一部分。版本控制、不同环境构建命令等。
这些是使用到的一些插件。
这个是本地开发使用到的命令,下面是动态输出的配置。
对的,还有Nginx。线上会有运维管理。开发环境还是需要自己手动配置的。不同的环境,不同的服务器都需要使用Nginx来连接。至于host的配置就不贴图了,那个没有啥难度。
开发流程
1.首先在git分支上开发。这一步还是原始流程。
2.使用Nginx连接开发服务器测试开发结果,如果有问题甚至可以连接后端同事的电脑做测试。
3.由运维部署到测试环境,并进行统一的测试。这个阶段有测试同学介入。
4.线上测试。这一步基本上是做正式的测试,防止问题发生在线上环境。
5.测试完成,正式上线。
注:可以是使用Jenkins来做各个环境的部署。上面的动态配置可以根据不同的环境生成不同代码。运维同学完全可以一键搞定git管理、代码构建发布。下面是一张项目结构图。
以上就是一个完整的前端解决方案。有问题欢迎问我。
- 创业成长系列.前端项目模块化解决方案
- 模块化前端项目解决方案--带node版
- 前端项目js模块化
- 创业成长系列.搭建基础
- 【ionic】项目应用requireJs前端模块化
- 前端模块化
- 前端模块化
- 前端模块化
- 前端模块化
- 前端模块化
- 前端模块化
- 前端模块化
- 前端模块化
- 前端模块化
- 前端模块化
- 前端模块化
- 前端模块化
- 前端模块化
- 小点
- Node.js模块导出exports 和 module.exports 的区别
- leetCode--- Jump Game II
- Java学习笔记--CSS笔记
- WEBBASIC Unit04&05 JavaScript 概述 、 JavaScript 基础语法 、 流程控制、 JavaScript对象概述 、 常用内置对象一 、 常用内置对象二 、 常用内置
- 创业成长系列.前端项目模块化解决方案
- CentOS下ELK的搭建
- testbench中的显示、打印任务的使用
- VS2015下添加Qt插件及路径配置
- 深入理解Java虚拟机重点
- let 和 const 命令
- H5浏览器播放RTMP直播流
- js实现完美身份证号有效性验证
- mysql 时间加减函数