前端工程化,组件化,模块化,层次化

摘要:
分层前端是指清晰的项目结构目录、树分布、分层、嵌套的多个文件夹、页面、样式、框架、组件、模块、脚本和其他独立分区,以及相互调用。

个人认为:前端发展的导向是前端工程化,智能化,模块化,组件化,层次化。

一个项目的开发逐渐在人工智能+物联网的时代,走向以下的五化

    原因: Web前端页面的开发必然与DOM进行交互操作,前端框架的一次次更新,是从满足目前的业务需求到提升效率的阶段,慢慢走向改善性能的阶段(开发和部署环境优化,代码优化,网站性能优化,数据优化,页面优化等等)。

1.前端工程化。

       前端工程化指的是将软件工程的方法和原理运用在前端开发中, 目的是实现 高效协同,质量开发。

          具体是:

                 a.Node服务,提供数据代理,路由,服务器渲染。

                 b.Web应用开发,专注于web交互体验。

                 c.前端运维:构建,测试,部署,监控。

2.前端模块化(页面模块化开发+基础模块化)。

        (1)基础模块化:

        A.  CommonJS————同步加载、服务器端的模块化规范,采用案列:Node.js

          实现原理:

                 一个单独的文件就是一个模块

      加载模块采用同步方式,加载完成后才能执行后面的操作

      加载模块使用require方法,该方法读取一个文件并执行,最后返回内部的exports对象;

         特点:

              比较适合运用于服务器的编程,加载模块文件通常都存在本地磁盘,加载过程无延迟,无需异步加载

        B.  AMD————异步加载,采用案例:require.js

   实现原理:

      异步模块定义通过一个函数封装所有所需要、所依赖的模块/方法/对象/属性;

      返回一个新函数(模块);推崇依赖前置,依赖的模块提前执行;

      采用依赖注入方式加载模块;注入依赖模块后,执行异步回调函数;

      特点:

                异步加载,不会产生异步阻塞,适合浏览器网络环境

       C. CMD————异步加载、异步执行依赖,案例:Seal.JS

           CMD AMD 类似;都是采用异步加载,

    不同点主要有一下几点:

                - 对依赖模块的执行时机:CMD延迟执行,AMD提前执行

                - 依赖位置:CMD推崇依赖就近,按需加载;AMD推崇依赖前置;

                - API:CMD推崇职责单一,AMD里面require分局部和全局方式;

    (2)页面模块化:

             1.将整个项目前端部分,拆分为单一多个页面

       2.将每个页面划分为多个模块,对每个模块开发,封装组件等(例如:header,nav,centent,persion,footer等)

       3.将每个模块页面组件存放组件库,便于后续各个页面的调用

       4.将每个模块页面引入当前主页面page,组成整个页面。(例如:main主页面由header,nav,centent,persion,footer等多个模块组成,通过项目框架指定的调用方式:$$header)

3.前端层次化。

          前端层次化是指项目结构目录清晰,树状分布,层次化分明,多个文件夹嵌套,页面,样式,框架,组件,模块,脚本等独立划分,相互调用联系。(例如:css样式全部归于css文件夹等等)

4.前端智能化。

          前端智能化是指通过人工智能AI的方式开发前端,将前端与python相结合从项目评估选取最优的模式,框架,库,组件等到项目打包上线应用,形成高效有序,包括语音识别,刷脸支付,智能检测等。在此过程中采用 scrum 敏捷开发模式。

5.前端组件化。

          前端的发展延伸出来很多前端框架和库,例如:Vue,React,Jquery,Angular,Element,Layout,Iview,Ogma,Echarts等等,主要用来封装业务组件,架构项目结构,样式布局,路由通讯等,一个项目由多个组件组成。往往项目经理与架构师,研发工程师商定评估选取最优的方案,进行开发,基于最底层的框架服务,形成了多个框架库的同时引用,相互嵌套实现某些项目的需求,优势互补,高效开发的方式。

总结:前端的开发,一定要规范化,代码规范,分支管理,模块管理,自动化测试,最后部署;规范化有利于以后项目的重构,二次开发,版本迭代,前端上手。

          具体为:1.重命名,对类,接口,方法,属性重命名。

                         2.抽取代码,将方法内代码抽取其他地方调用。

                         3.封装字段,类字段换属性。

                         4.删除参数,重排参数。

备注:源于自身前端的实践经验和自我学习了解,总结的前端概况,如有不当之处,请同行指正,非常感谢,多多交流。

                  

         

免责声明:文章转载自《前端工程化,组件化,模块化,层次化》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇DOS批处理Vue全家桶系列【vue3更新中.....】下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

uni-app 知识点

---【uni-app】:   是一个使用vue。js开发所有前端应用的框架,开发者编写一套代码,可发布到ios,android,H5,以及各种小程序,   (微信/支付宝/百度/头条/QQ/钉钉)等多个平台 ---【环境搭建】:   1,安装APP开发版HBuilderX   2,安装微信开发者工具 ---【使用HBuilderX初始化项目】:   1,...

.Net Core应用框架Util介绍(五)

上篇简要介绍了Util在Angular Ts方面的封装情况,本文介绍Angular封装的另一个部分,即Html的封装。 标准组件与业务组件 对于管理后台这样的表单系统,你通常会使用Angular Material或Ng-Zorro这样的UI组件库,它们提供了标准化的UI组件。 标准组件将Ts封装起来,以特定标签和属性的方式提供使用。 业务组件使用标准组件拼...

我想写一个前端开发工具(一):在npm发布模块

有必要说说我为什么要开始写这个,正文从下面的第一条开始 我最近忙于公司的项目,一直没有抽出时间来写文章。本来想每个月写一片文章,保质保量,无奈上个月没有坚持。 这段时间有点忙,主要是由于公司业务调整,我从原来的广告项目中调整到新业务线的前台页面开发了,和以前一样,还是带着3、4个兄弟姐妹。不同的是以前的项目周期普遍偏长,可以让每个同学有时间从头到尾的把项目...

一沙框架(yishaadmin) 前端引入VUE的实现方法

一沙框架(yishaadmin) 前端引入VUE的实现方法 1、下载vue.js,加入项目中,如下图 2、页面代码如下,注意注释的内容,数据请求的实现方法 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device...

vue cli 3

介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service) 一个开发环境依赖,局部安装在每个 @vue/cli 创建的项目中。 可升...

web 前端优化-戈多编程

大家好,我是戈多,从事web开发工作接近三年了,今天来归纳下web前端优化的解决方案(码农搬砖工,来自各网络汇总) 1、减少Http请求 http请求越多,那么消耗的时间越多,如果在加上网络很糟糕,那么问题就更多了。且如果网页中的图片、css文件、js文件很多甚至有音乐文件时,这势必会造成负担。 (1)图片地图  即多个图片排成一行作为链接到其他页面的按钮...