前端模块化开发技术的发展趋势-编程思维

说起模块化开发大家想必都不陌生,特别是随着前端应用复杂化,代码呈倍数增长,我们不得不耗费大量的时间去进行管理,模块化也就逐渐的被大家所接受。

所以具体来讲的话,模块化开发就是指将复杂的应用功能分为多个模块进行开发,这样一来一个模块就是实现特定功能的文件,有了模块,最直接的价值就是我们可以更方便地管理代码,甚至是直接引入使用别人的代码,想要什么功能,就加载什么模块。

 

模块化开发的发展

其实早期 JavaScript 的模块化是基于文件划分的方式去实现的,这是我们 web 当中最原始化的模块系统,当然这个方式下有几个突出的问题,例如命名冲突、全局污染等。

后面我们采用命名空间方式,约定每一个模块只暴露一个全局的对象,所有的模块成员都挂载到这个对象下面,具体做法就是在 JavaScript 的模块化的基础上,将每一个模块包裹成为全局对象的方式去实现,类似于在模块内去为我们的模块一些成员去添加命名空间,但这种方式有一个明显的问题就是没有解决模块之间的依赖性问题。

再到后面也出现了立即执行函数的方式(IIFE),他的原理就是将每一个模块都放到函数私有作用域当中,对于需要暴露的成员,再通过挂载到全局对象的方式去实现,这里也有一个实际的例子:

;(function () {
  var name = 'module1'
  function moduleFn() {
    console.log(name + '---> moduleFn');
  }
  window.module1 = {
    moduleFn: moduleFn
  }
})()

而发展至今,模块化开发又有了新的发展和技术实现方式,特别是在混合应用快速发展的今天,应用功能更加多样,代码更加复杂,模块化开发的重要性似乎成为一项共识。

模块化开发的优点

如果要说模块化开发和传统开发模式最大的区别,个人认为除了实现的方式不一致外,其实模块化开发还能在开发效率、便捷度上面有不小的提升。更为具体来讲,我认为主要体现在以下四个方面:

1、架构灵活,焦点分离

在模块化开发中模块化本身能够根据实际需求和变化进行灵活的调整和扩展,可以将系统划分为不同的层次,如数据访问层、业务逻辑层、表示层等。这种分层设计方式可以降低系统的耦合性,在一定程度上提升系统的扩展能力。

焦点分离上面则表现为可以将关注点分为功能需求和性能需求,然后分别进行开发和测试,从而实现系统复杂性的降低。

2、方便模块间组合、分解

在模块化开发中,组合和分解都很好理解,组合顾名思义就是指将不同的模块按照一定的方式组装起来,这样可以实现更为复杂的功能或场景,而分解反过来就是将一个复杂模块分解为若干个简单的子模块,以便更好地功能实现和维护。

3、方便单个模块功能调试、升级

当我们采用模块化开发后,很多的复杂功能成为单独的一个模块,如果对于某个模块需要进行功能的debug或者升级,那可以很快的针对这个功能模块开展,而不用牵一发而动全身。

4、多人协作互不干扰

这个非常好理解,由于模块化本身就是系统解耦方式实现的,分为多个模块化也就对应着多个代码包,这样一来相互协作不受影响也是提升效率的一种方式。

模块化开发的现状

模块化也是随着技术的发展不断的更新,例如目前受到众多开发者青睐的开发方式就包括依赖打包和依赖加载。

1、依赖加载

目前这种方式是应用较为广泛的,像 require js、sea.js等,除了编写规范不一样,实际都是通过相关require api把模块 chunk 文件拿回来,当加载完成之后再运行逻辑代码。

2、依赖打包

经典代表就 Webpack,其实就是写代码的时候分开模块,但打包的时候按依赖关系找到各个模块,最后打包到同一个文件上,并给每个chunk标识id,运行逻辑代码时将模块引用指向该id,从而实现模块化。

3、小程序化

此外,随着微信、支付宝等App的实践,小程序容器技术也成为模块化的一种选择,他的原理其实就和前面模块化开发的模式一直,将复杂紧耦合的功能应用解耦为一个一个的小模块,但不同的是这些小模块的承载方式都换为了小程序,从开发和管理的角度来看更为简约一些。

 

如果以一个复杂的手机银行app为例,相当于应用小程序容器技术将臃肿的APP功能打散,功能模块互相解耦,每个业务功能都最小化、积木化、乐高化的小程序。

 

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/finbird/p/17681525.html

混合开发模式是否可以在app备案制度下突围-编程思维

网站 ICP 备案已施行了很久,我们也非常清楚必须在进行 ICP 备案后,网站才能在大陆范围合法运营,并且用户可以通过域名正常访问网站。 但是月初出了新规,明年起,国内的 App 也要像网站一样进行备案了。想必大家也是早已经听到过这个刷屏的新闻,随便说一声小程序也是。 在管理日益强化的背景下,开发者也会随之而来面临到一

几种常用到的 hybrid app 技术框架-编程思维

移动操作系统在经历了诸神混战之后,BlackBerry OS、Symbian OS、Windows Phone 等早期的移动操作系统逐渐因失去竞争力而退出。目前,市场上主要只剩下安卓和 iOS 两大阵营,使得 iOS 和安卓工程师成为抢手资源。然而,由于两者系统的差异,开发同一个应用需投入两倍的工作量,不仅增加了人力成

hybrid app 技术路径带动性能的提升-编程思维

说到 Hybrid App(混合应用)大家都不陌生,因为这种开发模式大行其道发展的这些年取代了很多原生和 Web 应用,为什么大家对这种「Native + HTML5」的开发模式额外偏爱呢? 因为一方面在一定程度上兼顾了原生应用的优质体验,另一方面又兼顾到了 HTML5 灵活的开发模式。 这种模式的核心就在于使用了

混合应用的热度逐渐高于原生应用-编程思维

随着移动应用和桌面应用市场的不断发展,开发者们一直在寻找一种能够在多个平台上快速构建应用的方法。 传统上, 原生应用开发被视为性能最佳的选择,纯粹的原生应用通常是一种依赖于平台的GUI程序, 它使用特定操作系统的本地开发语言和GUI框架。 但近年来,跨平台混合应用的崭露头角,逐渐取代了性能优先的原生应用。本文将深入探

当你使用taro时,你需要了解的一些事儿-编程思维

2017 年 1 月 9 日凌晨,万众期待的微信小程序正式上线,前有跳一跳等爆圈小游戏的带动,后有特殊时期下各类健康码小程序的加持,小程序成为了国内技术圈独树一帜的存在。但随着小程序的迅猛发展,其实在小程序发展的过程中,关于小程序的架构就层出不穷,小程序架构的后面也会绑定一个专属 DSL,如类 React 或者类 Vu

flutter开发桌面应用的一些探索-编程思维

引言 在移动应用开发领域,Flutter已经赢得了广泛的认可和采用,成为了跨平台移动应用开发的瑞士军刀。然而,Flutter的魅力并不仅限于移动平台,它还可以用于开发桌面应用程序,为开发人员提供了一种全新的选择。本文将深入探讨Flutter在桌面应用开发中的应用,以及目前国内新颖的跨端开发技术。 桌面应用开发的现状 在

使用cocoapods创建自己的私有库-ios组件化第一步-编程思维

目前iOS组件化常用的解决方案是Pod+路由+持续集成,通常架构设计完成后第一步就是将原来工程里的模块按照架构图分解为一个个独立的pod工程(组件),今天我们就来看看如何创建一个Pod私有库。 新建:pod lib create 假设我们需要创建的库名为TestLib,下面我们使用Pod官方提供的创建模板: 首先进入我

vivo官网app模块化开发方案-modulardevtool-编程思维

作者:vivo 互联网客户端团队- Wang Zhenyu 本文主要讲述了Android客户端模块化开发的痛点及解决方案,详细讲解了方案的实现思路和具体实现方法。 说明:本工具基于vivo互联网客户端团队内部开源的编译管理工具开发。 一、背景 现在客户端的业务越来越多,大部分客户端工程都采用模块化的开发模式,也就

个人文章-编程思维

对上文[《[Vue] 两种配置化加载组件方案分析》](https://segmentfault.com/a/11...)的补充在选择方案1的前提下,有的组件引入方式会导致编译报错。有的组件引入方式会会产生与方案2相同的效果(即没有入口文件,编译产物稀碎)。正确的引入方式是不能偷懒的。下面我来一一说明1、fullComp