Navigation

    云、贵、川、渝IT人的圈子
    • Register
    • Login
    • Search
    • 主页
    • 问答
    • 话题
    • 热门
    • 圈子
    • 招聘
    • 活动
    • 项目

    如何实现前端组件化

    极客生涯
    1
    1
    13
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • 玻
      玻璃 last edited by

      组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程,有多种属性、状态反映其内部特性。 采用模块式开发方式,单个组件包括模板,数据结构,程序,样式四部份。组件的接口表达了由该组件提供的功能和调用它时所需要的参数。组件是可以单独开发、测试。允许多人同时协作,编写及开发、研究不同的功能模块。 高内聚,低耦合是软件工程中的概念,它是判断代码好坏的一个重要指标。高内聚,就是指一个函数尽量只做一件事。低耦合,就是两个模块之间的关联程度低。add()、mul() 一个函数只做一件事,它们之间也没有直接联系。如果要将这两个函数联系在一起,也只能通过传参和返回值来实现。 按照高内聚、低耦合的要求,一个函数应该尽量只做一件事。所以我们可以将函数中的另外两个功能:验证和转换单独提取出来,封装成一个函数。 模块化,就是把一个个文件看成一个模块,它们之间作用域相互隔离,互不干扰。一个模块就是一个功能,它们可以被多次复用。 页面成为了一个容器,组件是这个容器的基本元素。组件与组件之间可以自由切换、多次复用,修改页面只需修改对应的组件即可,大大的提升了开发效率。最理想的情况就是一个页面元素全部由组件构成,这样前端只需要写一些交互逻辑代码。虽然这种情况很难完全实现,但我们要尽量往这个方向上去做,争取实现全面组件化。 自定义元素有四个生命周期:connectedCallback: 当自定义元素第一次被连接到文档 DOM 时被调用。disconnectedCallback: 当自定义元素与文档 DOM 断开连接时被调用。adoptedCallback: 当自定义元素被移动到新文档时被调用。attributeChangedCallback: 当自定义元素的一个属性被增加、移除或更改时被调用。生命周期在触发时会自动调用对应的回调函数89e90b11-3d2e-4464-b83f-6a1e9a64081e-image.png

      1 Reply Last reply Reply Quote 0
      • First post
        Last post
      玻
      社
      8
      玻
      U
      A
      大
      A
      黑
      低
      天
      白
      快
      爱
      白
      美
      此
      荒
      为
      哭
      柳
      无

      社群
      昆明网页设计交流吧
      友情链接
      • Funtask
      • Funtask 社区
      • SUWIS
      • 云南北大青鸟
      ©2019-2020 滇ICP备20006698号