组件化开发的思考

1,591 阅读2分钟

经历过很多场面试,以及对自己所做项目的思考与积累。对于组件化的开发有了一点点理解。 其实开发一个项目,就类似与做一个乐高玩具。乐高由不同的积木块拼成,每个积木块可以和不同的积木块连接。 而且积木块与积木块之间没有影响。一个萝卜一个坑,只要这个坑你能填进去,你就适合。 而我们开发一个项目的时候,就要规划好那些功能.在前端来说,就是哪些标签,哪些CSS,哪些JS能够抽象成一个积木块。 在编程开始后,再不断的改进这个积木块所需要用到的数据,事件。积木块之间的影响如何尽量的解耦。 父组件子组件的数据如果传递和更改。

如何实现组件化

组件在spa的实现

  1. 通过jsx或者template,在文件中定义好css,js。
  2. 此组件需要那些属性。属性是通过props由上级传过来,还是直接定义在data,又或者是定义在状态管理中。
  3. 数据是否需要持久化,缓存?因为spa在一次刷新之后,会初始化(根据你写的代码)数据状态,所以我们需要记录这些数据, 这些数据是存在 localstorage还是cookie,使用storage时是否需要考虑到向后兼容。
  4. 数据的改变,是提交至状态管理,还是通过子组件事件提交,父组件监听相应的事件去改变这个数据。
  5. 某个功能是否有必要将它抽象成组件,主要看复用需求,因为转换成组件,往往需要改变很多页面的结构,以及数据,事件。
  6. 组件的可拓展性,如果需要这个组件完成新加的需要,改动最小。

组件在JQuery中的实现

  1. 先写好这个组件的样式,以及功能。
  2. 创建一个构造函数,包含组件实例的创建,将1中的html代码转成字符串进行拼接。或者DocumentFragment对象。
  3. 绑定事件。
  4. 将需要用到的数据,用过事件的参数传递。
  5. 插入到指定的位置,append

面向对象开发

在进行组件化的开发时,其实就已经有面向对象开发的思想,你就能用到构造函数、prototype、继承等面向对象开发的特性。 但是这个步骤不需要强制的使用到所有的场景,因为有时候抽象组件时你花费的时间,以及组件的健壮性都不能让你满意。 按照需求去敲代码,思考。才是最适合开发者的方式。 而且,一种开发思想的建立,是需要代码量,需要自我驱动的思考。