前端组件开发

时间 2019-11-19

标签前端组件开发繁體版

原文原文链接

前言 php

　　如今随着互联网的高速发展，对于电子商务各个环节各个过程的效率也须要高速起来，固然也包括了做为重要信息入口的网站页面；逐步趋于个性化的频道、层出不穷的促销活动页，对于这些页面需求的快速响应与产出也成为了一种必需；而对于这种高速的相应，带来的是人力成本的提高，资源就成为了主要瓶颈，如何让少的资源来完成高效的相应呢？不论是频道仍是活动，在必定场景下他们所用到的元素都是相对固定的，好比咱们的博客编辑页面，它实际上是由头部吊顶、头部导航、左侧功能菜单、主编辑功能区和底部连接块组成。那么咱们能够根据不一样的场景将这些能够共用的东西沉淀出来，用于后续页面的快速产出，因而就引出了页面组件化的概念。 css

组件化概念 html

　　组件化：将一整块业务或者系统，按照其功能的独立性，而拆分红各个独立的功能模块的过程；这些独立的功能模块就是组件。 jquery

　　如今不少的系统都引入了组件化的概念，在进行系统功能设计的时候尽可能将功能模块设计的足够独立，这样对于系统功能的并行开发和功能的扩展性都会有良好的做用；好比不少的工做流系统、资质断定系统，都是将流程上的一个一个模块进行组件化的方式来开发，经过配置的方式将各个组件串联起来，造成一个可插拔式的工做流程，能够很好地响应需求的变动。框架

　　对于一个WEB页面的组件化来讲，也是能够考虑从页面的组成来引入组件化的概念；WEB页面是由必定的布局结构来组成的；而针对于不一样的页面，它所承载的页面结构实际上是有规律可循的，好比咱们的博客编辑页面，它实际上是由头部吊顶、头部导航、左侧功能菜单、主编辑功能区和底部连接块组成，那博客内容展现页面，也是有头部吊顶和导航、底部链接块和功能菜单这几个模块的，那么基于组件化的思想，咱们是否是能够将页面拆分红一个一个小的独立单元来进行开发，而后经过必定的方式来将这些组件按照需求组装成一个编辑页面或者展现页面呢？ jsp

页面组件化 模块化

　　要想知道如何将页面进行独立的模块划分，首先要了解页面是如何组成的；页面是有固定的编码结构的，如：<html><head></head><body></body>< /html>，html + css + js能够实现一个页面的制做，一些动态的页面可能还包括一些动态的元素标签，包括：php/asp/jsp等；那么要将页面进行模块化，页面必需遵循必定的结构，好比栅格化的布局结构组件化

　　将页面布局固定以后，对于填充布局坑位的组件单元，也有必定的约束，由于一个组件单元就包含了必定的代码片断，不仅仅只包括了html，也包括了这个模块的样式和脚本，对于搭建一个页面所使用到的模块，可能一个模块会被屡次使用到一个页面中，那么如何保证每个模块间的脚本只会影响本身模块的操做呢？这就须要必定的脚本框架来进行脚本的初始化工做，保证每个模块的脚本都能进行独立的初始化，互不干扰；这就引来了另外一个问题，对于脚本框架，现在也是各式各样，不一样的业务会使用不一样的脚本框架，如：jquery/kissy/sea-js等，如何来对此进行区分呢？咱们能够对组成页面的组件进行打标，根据不一样的业务页面，其所对应的可以使用组件只能应用到适合的页面中，以保证一个页面中不存在不一样脚本框架的模块。布局

　　总结下来页面组件化所须要作的事情：网站

　　1. 页面布局规范化；

　　2. 定义组件所包含的内容(html代码片断、样式脚本)；

　　3. 组件脚本实例初始化；

　　4. 组件的多框架归类处理；

　　这仅仅是作到了页面的组件化，可是对于这些组件是否能够用在不一样的场景或者页面，单单只作这么一点是不够的，咱们能够想象一个组件能够被用到的某个地方时，哪些是须要修改的，哪些是能够共用的；好比博客编辑页面的左侧功能菜单，他提供了一种菜单的形式和菜单的具体数据，这种菜单形式是不变的，到博客展现页面，只是菜单的具体数据产生了变化，那么，咱们能够把这种菜单的形式作成是一个组件，而这个菜单的具体数据做为这个组件的一种传入参数，最终展现出来的页面实际上是结构与数据结合产生的结果；那么，在定义组件所包含的内容时，须要注意的就是，这个组件作包含的html只是组件的展示结构，具体的数据能够在这个组件使用到某个页面以后产出，而后经过必定的渲染机制来实现最终的代码实现，这个过程须要注意的点包括：

　　1. 组件代码定义模板；

　　2. 数据由应用时提供；

　　3. 模板与数据渲染引擎。

　　由上能够看出，组件实际上是能够分红2个比较独立的部分，模板和数据，其实这两部分都是能够进行组件化的，前面讨论的是模板的组件化，数据的组件化须要基于数据的来源，若是数据已是沉淀在系统中，数据也是能够进行组件化；而后将模板与数据进行必定规则的映射匹配来实现组装；这种模板与数据组件化的思想其实能够代替不少的纯粹作数据加工与展示的应用。