使用Kinark版Materialize-stepper开发多表单 按示例编码后布局异常排查

• 使用开源多步骤表单组件Materialize-stepper开发表单功能时，已按项目说明引入所有必要依赖、将组件对应的CSS存储到本地完成引入，但组件布局始终达不到预期效果
• 编写的页面代码结构、交互逻辑和官方提供的演示案例完全一致，无法定位异常原因

• 脚本加载顺序错误：代码中将mstepper.js放在jQuery引入标签之前，该组件强依赖jQuery，脚本执行时找不到全局jQuery对象，会出现功能初始化失败、样式挂载异常的问题
• 缺失基础框架依赖：Materialize-stepper是基于Materialize CSS生态开发的扩展组件，仅引入组件自身的CSS、JS文件无法正常工作，页面中用到的btn、card、input-field、栅格布局row/col xl4等类名，全部依赖Materialize基础框架的样式定义，缺少基础框架时所有布局规则都会失效
• 初始化配置缺失：当前创建MStepper实例时没有传入回调函数映射配置，按钮上data-feedback属性绑定的自定义方法无法被组件识别，会引发交互逻辑异常

• 调整资源加载顺序：
  • 页面头部优先引入Materialize基础框架CSS、本地存储的mstepper.css文件
  • 页面底部依次引入jQuery库、Materialize基础框架JS、本地存储的mstepper.js文件
• 页面DOM加载完成后再执行Stepper初始化逻辑，初始化时传入回调映射参数：

$(document).ready(function () {
  function anyThing(destroyFeedback) {
    setTimeout(function () { destroyFeedback(true); }, 1500);
  }
  function noThing(destroyFeedback) {
    setTimeout(function () { destroyFeedback(true); }, 10000);
  }

  var stepperDiv = document.querySelector('.stepper');
  var stepper = new MStepper(stepperDiv, {
    feedbackFunctions: {
      anyThing: anyThing,
      noThing: noThing
    }
  });
});

内容的提问来源于stack exchange，提问作者Altresi