招商加盟网站高效便捷的生成

随着技术的发展，前端开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等的弊端。一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身的局面。针对此弊端，其实业界早就有了一些探索，我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。如同pc一样当某个部件出现问题时，不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。前端组件化逐渐成为前端开发的迫切需求，当然这一迫切需求也逐渐成为一种主流，一种共识，它不仅提高了前端的开发效率，同时也降低了维护成本。开发者们不需要再面对一堆复杂且难阅读的代码，转而只需要关注以组件方式存在的代码片段。

什么是组件化开发

简而言之，就如同乐高积木一样。乐高，众所周知，是全球第四大玩具制造商。乐高积木，由乐高集团生产的塑料积木。一面有凸粒，另一面有可嵌入凸粒的凹槽，形状有1300多种，每一种形状都有12种不同的颜色，以红、黄、蓝、白、黑为主。可以拼插出变化无穷的造型，被称为“魔术塑料积木”。这就是模块化，只要有足够的积木，几乎可以搭建一切。基础的前端开发似乎与乐高积木类似，它本身是模块化，重复的使用标准标签相互组合、相互嵌套，几乎可以使所有标准的招商网页设计稿100%还原，美中不足的就是工作量一直都很大。

当你用最基础的乐高积木搭建一节车厢，同伴搭建一个车头，把两者组合在一起就是一个小火车。按商量好的大小、颜色来搭建更多的车厢、车头或者其它，便可以组成一个更大的世界。如果把单个车头和车厢称为一个组件，这便是组件化，在招商网页的前端开发过程中重复使用、相同、类似的部分都可以写成组件，如页头、页脚、弹窗、翻页、轮播、选项卡、回到顶部等等。

对于单个无需经常修改的静态招商页面，模块化和组件化并没有什么区别。近日快媒商城和36599改版的前端工作，开发过程中，部分使用了组件化。对于这样的中大型招商网站，组件可自由组合、单独开发、单独测试。其中，组件的独立性、完整性，在开发过程中给我们带来了更多的便利。

为什么要使用组件化开发

1、方便查找错误。开发招商网站过程中，多个页面同样使用列表组件，单个页面出现错误，如图文出现混乱，但是其它页面显示正常，那么基本能判断问题所在，这就大大加快了错误排查的速度。或者页面上出现问题，可以找出可能与每个有关的组件，逐个删除，直到恢复正常。这样就能迅速锁定错误发生的位置。

2、便于修改。如果有这样一个需求，所有招商页面中的弹窗都要更改字体颜色和字号。对于前端开发来讲，如果一个一个页面去修改，一个上午的时间可能都不够用。但弹窗要是作为一个组件来开发，可能几分钟的时间就可以修改完毕并上线招商了。

3、便于多人开发协作。开发协作，写让别人看得懂的代码是基本要求，写让别人看得懂的代码可以节省大家的时间、精力。在开发过程中把多个页面相同的部分组件化，同样可以节省大家的时间和精力。多人同时开发多个页面都有翻页组件，这时只需要一位同事开发完成，封装成组件，让其它同事调用就可以了。

4、减少冗余代码。如需要新增一个带有翻页的招商页面，之前可能已经写过，如果新开发需要按照设计图一行行代码写出来，这里面包含了HTML、CSS、JS，一样的代码每个招商页面都有一份，多个页面写了3份、5份、10份..……服务器也需要存储更多的文件。显然直接使用之前的代码更加方便一些。组件可以共用绝大部分代码，开发完成之后如遇到整体修改也更加方便。

5、优化性能。组件可独立使用，按需加载，不包含的组件的CSS、JS可以不用加载。全部加载不仅占用带宽，还浪费了缓存资源。虽然一两个的影响几乎感受不到，但这种情况一多，就会对用户体验产生明显的影响。

组件化如何做

1、从设计开始。一个招商网站，在设计前期就应确定设计指导方向，根据产品特点确定一套规范模板，便于控制质量，提高网页设计效率。如网页宽度、颜色、字体字号、页面布局、网页栅格、间距、留白、按钮等等，除活动专题页外，所有的招商网页都应按照规范来设计。

2、提取产品中的共用部分，设计成通用组件。如页头、页脚、弹窗、翻页、轮播、选项卡、回到顶部等等，都可以单独设计成组件。多位设计师协作，遇到相同组件直接使用，不用再自行设计。不少软件都有类似功能，如Sketch的Symbol功能，可以方便的使用。

3、把每个组件当成完整的产品。把每个产品当成一个独立完整的产品来设计开发，考虑到各种极端状态下的使用，如超长、超高、空状态、禁用状态、交互等，这样设计开发出来的组件，适用网页中的各种环境，也可以单独进行开发、测试。

4、制定组件的组合规范。基于组件化开发的组件要以招商网页形式展现，最终将不可避的出现免组件相互组合，组件的间距、颜色、边框、投影等都需要有相应的规范。

       组件化，基于独立、完整、自由组合，可以为我们带来更多便利。当然，这不一定是最有效的解决方案。目前，前端开发解决的都是重用性与运行效率，而真正要解决的问题是招商网页的开发效率与维护效率，所以，招商网页前端开发组建还有很长的路要走。

文作者：文家齐

文章来源：来源：创业头条（news.8588.cn）