利用jQuery简单实现低代码平台

序言

最近因项目要求，需要实现一个简单的类似低代码平台，即用户可以自由配置，即可实现活动页，不需要人力来进行开发。局限性是因为项目后台是根据jQuery来写的。所以该功能也是基于jQuery来开发的。（对，2022年了还有人在写jQuery...）

开始接这个需求

开始接这个需求，感觉还是很忐忑的，因为没做过，所以时间排的可能不太合理，就被领导压缩了两周，后面加班赶工，又加了一个前端小伙伴来写h5端，晃晃悠悠也就提交测试了，从刚开始的担心完不成，怕搞砸，到后面得到领导认可，说做的功能已经超过了预期了，心里也就放心了，现在该功能也已经上线了，现在来记录一下。

大概做了些啥

1. 点击按钮，新增对应模块

   注意点： 新增要保证每次新增的id唯一，为下面的第二点做准备

2. 点击对应模块，增加对应模块配置区

   注意点： 保证模块与配置区之间的一一对应关系，所以点击的时候，获取模块区的id，赋值给配置区，然后让对应的配置区显示。

3. 各个模块可支持拖拽，删除操作。 注意点： 这里用的是jquery-gridly插件

核心点和难点

1. 新增和回显编辑要共用一套方法，回显出的模块，点击后也可以显示对应的配置模块。只是新增的时候，数据源取得是默认值，而编辑取得是服务器上存储的值。两者区别只是数据源不同。代码上可以用一套方法。
2. 运用jquery-gridly进行拖拽。

拖拽

运用jquery-gridly这个插件踩了几个坑，下面总结一下。

1. 源码上写的$element.outerWidth()和$element.outerHeight()有些情况会获取不到这个方法，所以改成了$element.width()和$element.height()

2. 拖拽之后的元素，仅仅是改变了该元素对应的top值。数组元素的排列位置还是没有变化的，可根据拖拽后的回调reordered,arguments[0]来获取拖拽后的数组。

   $("#left-container").gridly({
      columns: 1,
      gutter: 60,
      callbacks: {
          reordered: insertContentReordered
      }
   })
   function insertContentReordered(){
      // arguments[0]
   }
   

3. element.gridly()，这个gridly的含义可以理解成，将element元素内部的children()渲染成可拖拽。那么有个问题就是，如果内部children()元素，图片元素过多，则图片渲染完成，并且得到相对应的高度，则需要一定的时间，简而言之，就是加载图片是一个异步的过程，受影响因素为个人的网速原因，等等，所以，如果需要获取图片的高度，则需要等待所有图片加载完成，再去将element进行gridly操作。