用原生JS封装一个Table组件
在写项目的时候,我们经常会用一些组件,比如:模态框、表格、分页等。组件的应用大大减少了项目的开发成本,同时也提高了代码的质量等。所以,封装组件成为了每个人的必须拥有的技能。本篇文章将使用原生JS封装一个Table组件。 组件封装 实现目标 以antd中的Table组件为目标,实现以下功能: 传width值控制表格宽度。 columns与dataSource中的数据相对应,没有对应数据的地方显示为空。 实现columns中的render函数方法。 对columns数据中key值的检查,没有或者重复,给出警告。 columns中width可设置列宽 columns中align值控制内容在表格中所处的位置。 搭建结构 首先,先搭建一下代码的结构 window.Table(function(){ class Table { constructor(options) { // 获取所需要数据 this.columns = options.columns; this.dataSource = options.dataSource; this.width = options.width; this.init(); // 调用初始化函数 } // 初始化 init() { } } return function proxy(options = {}) { options = Object