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

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

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

    原因: 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.删除参数,重排参数。

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

         

相关推荐