feat: 定制化组件修改与小说阅读器的双向事件监听的方案 #1259

mipengine · Oct 15, 2018 · 491269a · 491269a
1 parent efc0afe
commit 491269a
Showing 1 changed file with 53 additions and 42 deletions.
diff --git a/src/mip-custom/mip-custom.js b/src/mip-custom/mip-custom.js
@@ -68,13 +68,15 @@ define(function () {
             var currentWindow = getCurrentWindow();
             var isRootPage = currentWindow.MIP.viewer.page.isRootPage;
             var rootWindow = isRootPage ? window : window.parent;
-            if (rootWindow.MIP.mipshellXiaoshuo != null) {
-                // 监听小说shell播放的广告请求的事件
-                window.addEventListener('showAdvertising', handler);
-            }
-            else {
-                this.initElement(dom)
-            }
+            window.addEventListener('mipShellReady', function () {
+                if (window.MIP.mipshellXiaoshuo != null) {
+                    // 监听小说shell播放的广告请求的事件
+                    window.addEventListener('showAdvertising', handler);
+                }
+                else {
+                    this.initElement(dom)
+                }
+            });
         }
         else {
             this.initElement(dom)
@@ -222,6 +224,15 @@ define(function () {
             // dom 渲染
             dom.render(element, tplData, container);
         }
+
+        // 广告插入页面时，增加渐显效果
+        var mipCustomContainers = document.querySelectorAll('[mip-custom-container]');
+        for (var i = mipCustomContainers.length - 1; i >= 0; i--) {
+            var mipCustomContainer = mipCustomContainers[i];
+            mipCustomContainer.classList.add('fadein');
+        }
+        // 移除广告占位符号
+        dom.removePlaceholder.apply(this);
     };
 
     /**
@@ -326,43 +337,10 @@ define(function () {
                 me.element.remove();
                 return;
             }
-
+            // 模板的前端渲染
             callback && callback(data.data, element);
-            // 广告插入页面时，增加渐显效果
-            var mipCustomContainers = document.querySelectorAll('[mip-custom-container]');
-            for (var i = mipCustomContainers.length - 1; i >= 0; i--) {
-                var mipCustomContainer = mipCustomContainers[i];
-                mipCustomContainer.classList.add('fadein');
-            }
-
             // 性能日志：按照流量 1/500 发送日志
-            var random500 = Math.random() * 500;
-            if (random500 < 1) {
-                // 性能日志：emptyTime-广告未显示时间
-                performance.renderEnd = new Date() - 0; // 渲染结束时间戳
-                performance.emptyTime = performance.renderEnd - performance.fetchStart; // 页面空白毫秒数
-                performance.frontendRender = performance.renderEnd - performance.responseEnd;
-
-                // 前端打点时间
-                var frontendData = {
-                    duration: performance.duration,
-                    emptyTime: performance.emptyTime,
-                    frontendRender: performance.frontendRender
-                };
-                // 加入后端打点时间
-                var frontAndServerData;
-                if (data.data.responseTime) {
-                    frontAndServerData = util.fn.extend(frontendData, data.data.responseTime);
-                }
-                else {
-                    frontAndServerData = frontendData;
-                }
-                // 加入默认统计参数
-                performanceData.params.info = JSON.stringify(util.fn.extend(performanceData.params.info, frontAndServerData, 1));
-                log.sendLog(performanceData.host, performanceData.params);
-            }
-
-            dom.removePlaceholder.apply(me);
+            me.setPerformanceLogs(performance);
         }, function (error) {
             log.sendLog(logData.host, util.fn.extend(logData.error, logData.params, errorData));
             me.element.remove();
@@ -373,6 +351,39 @@ define(function () {
         });
     };
 
+    /**
+     * 性能日志：按照流量 1/500 发送日志
+     *
+     * @param {Object} performance 性能参数
+     */
+    customElement.prototype.setPerformanceLogs = function (performance) {
+        var random500 = Math.random() * 500;
+        if (random500 < 1) {
+            // 性能日志：emptyTime-广告未显示时间
+            performance.renderEnd = new Date() - 0; // 渲染结束时间戳
+            performance.emptyTime = performance.renderEnd - performance.fetchStart; // 页面空白毫秒数
+            performance.frontendRender = performance.renderEnd - performance.responseEnd;
+
+            // 前端打点时间
+            var frontendData = {
+                duration: performance.duration,
+                emptyTime: performance.emptyTime,
+                frontendRender: performance.frontendRender
+            };
+            // 加入后端打点时间
+            var frontAndServerData;
+            if (data.data.responseTime) {
+                frontAndServerData = util.fn.extend(frontendData, data.data.responseTime);
+            }
+            else {
+                frontAndServerData = frontendData;
+            }
+            // 加入默认统计参数
+            performanceData.params.info = JSON.stringify(util.fn.extend(performanceData.params.info, frontAndServerData, 1));
+            log.sendLog(performanceData.host, performanceData.params);
+        }
+    };
+
     /**
      * 缓存异步数据
      *