我所知道的前端组件化与模块化

简介: 我所知道的前端组件化与模块化

序言:组件化?模块化?这都是什么鬼?这是最初看到这2个新名词的反应。随着时间的推移,似乎、可能、大概明白了一点,于是想说说自己的理解(仅仅是自己的理解)

一、组件化

忘记什么时候看到这个词的了,由于用过bootstrap的前提下(一下简称BS),当时第一反应是这样的,组件化不就是像BS那样把html拆分为:按钮组、栅格系统、导航组等等N多个组件,用的时候直接用BS提供class不就行了吗?
当然简单可以这么理解,但是跟深层次的理解应该是这样的,如你看到的一个html源码可能是这样的:

<body >
    <top-header></top-header>
    <common-content></common-content>
    <top-footer></top-footer>
</body>

很多人咋一看可能回想,这tm是html标签吗?当然不是,只是自定义的组件标签,通过第三方去处理,好处就是互相不影响,用谁放谁,不用拿走,维护起来和多人协作更方便。

二、模块化

前端模块化更确切的说应该是javascript的模块化,其实就是一些功能以及业务逻辑的封装,比如之前一个小例子:鼠标悬停出现下拉框与鼠标悬停切换(具体参看之前一篇:如何巧妙的用面向对象封装常用效果

复制代码
function Overitem(option){
    this.init(option);
}
Overitem.prototype={
    init:function(option){
        var _self=this;
        _self.btn=document.getElementById(option.btn)||'';
        _self.item=document.getElementById(option.item)||'';
        _self.addclassname=option.addclass;
        //2.0 绑定事件
        _self.btn.onmouseover=_self.showitem.bind(_self);
        _self.btn.onmouseout=_self.hideitem.bind(_self);
    },
    //2.1 定义事件
    showitem:function () {
        //如何让this指向new Overitem;,在调用的时候用bind把this绑定上去
        this.btn.className=this.addclassname;
        this.item.style.display='block';
    },
    hideitem:function () {
        //如何让this指向new Overitem;,在调用的时候用bind把this绑定上去
        this.btn.className='';
        this.item.style.display='none';
    }
};
复制代码
复制代码
function Tabitem(option){
    this.init(option);
}
Tabitem.prototype={
    init:function(option){
        var _self=this;
        _self.btn=document.getElementsByClassName(option.btn)||'';
        _self.item=document.getElementsByClassName(option.item)||'';
        for(var i=0;i<_self.btn.length;i++){
            _self.btn[i].index=i;
            _self.btn[i].onmouseover=function(){
                for(var j=0;j<_self.item.length;j++){
                    _self.btn[j].className=option.btn;
                    _self.item[j].className=option.item;
                }
                _self.btn[this.index].className=option.btn+' '+option.btnaddclass;
                _self.item[this.index].className=option.item+' '+option.itemaddclass;
                //console.log(this);
                //console.log(_self);
            };
        }
    }
};
复制代码

这就是2个简单的功能模块,用谁new谁互不干扰,即使有n多个,与外界的桥梁就是所传的参数。说的不够仔细,但或多或少能理解一点- -

想了解更多请移步:组件化模块化

目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
61 3
|
5月前
|
移动开发 前端开发 测试技术
【Flutter前端技术开发专栏】Flutter中的组件化开发基础
【4月更文挑战第30天】Flutter作为热门的UI框架,以其声明式编程和高效性能深受开发者喜爱。本文聚焦Flutter的组件化开发,阐述组件化开发的代码复用、模块化、团队协作和测试便利等优势。在Flutter中,所有元素几乎都是组件,包括简单按钮到复杂布局。通过继承`StatelessWidget`或`StatefulWidget`创建自定义组件,如示例中的`CustomButton`。组件通过`build`方法构建,并可在其他组件中嵌套使用。理解并掌握组件的样式、布局及使用,对于提升Flutter开发技能至关重要。
116 0
【Flutter前端技术开发专栏】Flutter中的组件化开发基础
|
2月前
|
前端开发 JavaScript
前端必会的JavaScript模块化
【8月更文挑战第3天】JavaScript模块化
23 1
|
3月前
|
前端开发 JavaScript API
现代前端开发中的Web组件化设计与实践
在现代前端开发中,Web组件化已经成为了一个关键的设计思想和实践方法。本文探讨了Web组件化的概念、优势以及如何在实际项目中进行设计和应用。通过分析实例和最佳实践,展示了如何利用组件化开发提升前端开发效率和代码可维护性,同时也解决了在大型项目中常见的代码重用和团队协作问题。
|
4月前
|
前端开发 JavaScript 开发者
现代前端开发中的Web组件化设计
随着Web应用程序复杂性的增加,现代前端开发越来越倾向于采用组件化设计。本文将探讨Web组件化的定义、优势以及实际应用中的最佳实践,帮助开发者更好地理解和应用这一技术。
|
4月前
|
JavaScript 前端开发
必知的技术知识:esm前端模块化
必知的技术知识:esm前端模块化
76 0
|
5月前
|
前端开发 算法 搜索推荐
Web前端开发之面试题全解析 一(1),2024年最新前端组件化面试
Web前端开发之面试题全解析 一(1),2024年最新前端组件化面试
|
5月前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
80 8
|
5月前
|
前端开发 JavaScript 安全
【Web 前端】怎么实现Module模块化?
【5月更文挑战第1天】【Web 前端】怎么实现Module模块化?
|
5月前
|
JavaScript 算法 前端开发
【专栏】前端开发中的slot算法和shadow DOM,两者提供更灵活、高效和模块化的开发方式
【4月更文挑战第29天】本文探讨了前端开发中的slot算法和shadow DOM,两者提供更灵活、高效和模块化的开发方式。slot算法允许在组件中定义插槽位置,实现内容的灵活插入和复用,提高代码可读性和维护性。shadow DOM则通过封装DOM子树,实现样式和事件的隔离,增强组件独立性和安全性。这两种技术常应用于组件开发、页面布局和主题定制,但也面临兼容性、学习曲线和性能优化等挑战。理解并掌握它们能提升开发效率和用户体验。
87 2