前端组件化开发

Thu, 07 Aug 2025 00:00:00 +0800

背景

不知道你有没有遇到过以下场景:

页面逻辑越来越多,代码越来越庞大,写到后面难以 hold 住所有逻辑,很容易牵一发而动全身.
你负责的页面好好的突然出现问题,查到最后是别人代码影响.
同样的逻辑在多个地方重复书写,每次一改要改一批文件

随着前端项目复杂度的急剧增加, 上面列出的几种场景就是传统开发中会出现的问题. 也是前端组件化出现的原因.

项目复杂度增加, 一个页面一个文件需要处理的内容过多.
重复性劳动多, 效率低
质量差, 不可控

组件化初探

正是由于出现了这样的问题, 为了在越来越复杂的前端项目中提高开发效率和保证开发质量, 各路大神们开始通过各种方式来尝试解决问题.

曾经非常火的 jQuery 就基于自己建立了 jQuery 插件机制. 你可以将一些常用逻辑进行封装变成 jQuery 插件, 还可以将插件开源进行共享. 比如纯手写会吐血的日期时间选择器,轮播, 多级菜单等等. 你可以在这里浏览更多jQuery插件.

jQuery 插件的用法通常是:

$(".select").pluginName(config)

除了 jQuery 插件模式, 还有一种常见模式是对象模式. 这种模式现在仍然有很多优秀的库在被我们直接或者间接使用. 比如: swiper

对象模式的写法:

<!-- Slider main container -->
<div class="swiper-container">
 <!-- Additional required wrapper -->
 <div class="swiper-wrapper">
 <!-- Slides -->
 <div class="swiper-slide">Slide 1</div>
 <div class="swiper-slide">Slide 2</div>
 <div class="swiper-slide">Slide 3</div>
 ...
 </div>
</div>

<script src="path/to/swiper.min.js"></script>
<script>
 var mySwiper = new Swiper ('.swiper-container', {
 direction: 'vertical',
 loop: true,
 })
 </script>

对象模式通过配置创建对象, 通常创建对象的参数中有一项是元素/元素选择器, 通过js代码将逻辑与这个元素紧密绑定.

前端组件化开发 on Last Stand

前端组件化开发

背景

组件化初探