优化ajax模式的javascript加载顺序，完成后再加载主体内容

quansitech · Sep 4, 2022 · 40e4189 · 40e4189
1 parent 0c54216
commit 40e4189
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # qscmf-buttontype-modal
+
 ```text
 qscmf 按钮类型组件--modal
 
@@ -12,9 +13,11 @@ composer require quansitech/qscmf-buttontype-modal
 ```
 
 #### 添加按钮
+
 [ModalButtonBuilder使用说明](https://github.com/quansitech/qscmf-buttontype-modal/blob/master/ModalButtonBuilder.md)
 
 + 向列表添加一个顶部按钮
+
   ```php
   public function add(){
     if (IS_POST) {
@@ -31,11 +34,11 @@ composer require quansitech/qscmf-buttontype-modal
             ->addFormItem('pwd', 'password', '密码*')
             ->addFormItem('pwd1', 'password', '重复密码*')
             ->setShowBtn(false);
-
+  
         return $builder->display(true);
     }
   }
-
+  
   public function buildTopModal(){
     return (new \Qs\ModalButton\ModalButtonBuilder())
                 ->setTitle("新增")
@@ -45,7 +48,9 @@ composer require quansitech/qscmf-buttontype-modal
   // 按钮options属性传入ModalButtonBuilder对象 
    (new \Qscmf\Builder\ListBuilder())->addTopButton('modal', ['title' => '新增'],'','',$this->buildTopModal())
   ```
+
 + 向列表添加一个行按钮
+
   ```php
   public function edit($id){
     if (IS_POST) {
@@ -64,7 +69,7 @@ composer require quansitech/qscmf-buttontype-modal
             ->addFormItem('pwd1', 'password', '重复密码*')
             ->setFormData($info)
             ->setShowBtn(false);
-
+  
         return $builder->display(true);
     }
   }
@@ -87,7 +92,9 @@ composer require quansitech/qscmf-buttontype-modal
   ->addRightButton('modal',['title' => '编辑'], '', '', 'list_edit_form')
   ->setTableDataList($data_list)
   ```
+
 + 向表单添加一个按钮
+
   ```php
     public function edit($id){
     if (IS_POST) {
@@ -106,7 +113,7 @@ composer require quansitech/qscmf-buttontype-modal
             ->addFormItem('pwd1', 'password', '重复密码*')
             ->setFormData($info)
             ->setShowBtn(false);
-
+  
         $this->ajaxReturn(['status' => 1, 'info' => $builder->display(true)];
     }
   }
@@ -129,37 +136,39 @@ composer require quansitech/qscmf-buttontype-modal
   ```
 
 + ajax的方式加载内容 (实验性功能)
-> 1. 接口说明
->> + 需要返回JSON数据格式
->> + 若数据正常则设置status为1，否则为0
->> + 将需要返回的内容赋值给info
->
-> 2. 用例
->
-> ```php
-> // 设置Modal 内容请求API
->  protected function buildTopModal(){
->      return (new \Qs\ModalButton\ModalButtonBuilder())
->            ->setTitle("新增")
->            ->setBackdrop(false)
->            ->setKeyboard(false)
->            ->setBodyApiUrl(U("add"));
->  }
->  
->  // ListBuilder对应列配置
->  ->addTopButton('modal', ['title' => '新增'],'','',$this->buildTopModal());
->
-> public function add(){
->    
->    $builder = new FormBuilder();
->    $builder
->        ->addFormItem('title', 'text', '标题')
->        ->addFormItem('summary', 'textarea', '简介')
->        ->addFormItem('cover', 'picture', '封面', '尺寸为214*250px', ['width' => 214, 'height' => 250])
->        ->setFormData($info)
->        ->setShowBtn(false)
->        ->setReadOnly(true);
->
->    $this->ajaxReturn(['status' => 1, 'info' => $builder->build(true)]);
->}
->```
+
+  > 1. 接口说明
+  >    
+  >    > + 需要返回JSON数据格式
+  >    > + 若数据正常则设置status为1，否则为0
+  >    > + 将需要返回的内容赋值给info
+  > 
+  > 2. 用例
+  > 
+  > ```php
+  > // 设置Modal 内容请求API
+  >  protected function buildTopModal(){
+  >      return (new \Qs\ModalButton\ModalButtonBuilder())
+  >            ->setTitle("新增")
+  >            ->setBackdrop(false)
+  >            ->setKeyboard(false)
+  >            ->setBodyApiUrl(U("add"));
+  >  }
+  > 
+  >  // ListBuilder对应列配置
+  >  ->addTopButton('modal', ['title' => '新增'],'','',$this->buildTopModal());
+  > 
+  > public function add(){
+  > 
+  >    $builder = new FormBuilder();
+  >    $builder
+  >        ->addFormItem('title', 'text', '标题')
+  >        ->addFormItem('summary', 'textarea', '简介')
+  >        ->addFormItem('cover', 'picture', '封面', '尺寸为214*250px', ['width' => 214, 'height' => 250])
+  >        ->setFormData($info)
+  >        ->setShowBtn(false)
+  >        ->setReadOnly(true);
+  > 
+  >    $this->ajaxReturn(['status' => 1, 'info' => $builder->build(true)]);
+  > }
+  > ```
diff --git a/asset/button-type-modal.js b/asset/button-type-modal.js
@@ -16,18 +16,44 @@ function renderQsButtonModalBodyContent(modalDom, apiUrl) {
     //     }
     // });
 
-    ajaxPromise(apiUrl).then(res =>{
+    ajaxPromise(apiUrl).then(function(res){
         modalDom.find('.preloader').addClass('hidden');
-        infoDom.html(res.info || '');
+        var mainDom = $("<div>" + res.info + "</div>");
+        var scriptSrcDom = mainDom.find('script[src]');
+
+        return loadedPromise(scriptSrcDom, infoDom, mainDom);
+    }).then(function(dom){
+        infoDom.html(dom.html());
         injectSubmitTargetFormClass(modalDom);
-    }).catch(res =>{
+    }).catch(function(res){
+        console.log(res);
         alert(res.info || '错误，请联系管理员');
         modalDom.modal('hide');
     });
 }
 
-function ajaxPromise(apiUrl){
+function loadedPromise(scripts, infoDom, mainDom){
     return new Promise((resolve, reject) =>{
+        var len = scripts.length;
+        var count = 0;
+
+        for(var i=0; i<scripts.length; i++){
+            var scriptDom = document.createElement("script");
+            scriptDom.onload = function(){
+                count++;
+                if(count === len){
+                    resolve(mainDom);
+                }
+            }
+            scriptDom.src = scripts[i].src;
+            scripts[i].remove();
+            document.body.append(scriptDom);
+        }
+    });
+}
+
+function ajaxPromise(apiUrl){
+    return new Promise(function(resolve, reject){
         $.get(apiUrl, function (res) {
             if (res.status === 1) {
                 resolve(res);