资讯专栏INFORMATION COLUMN

懒加载-- 端对端分享功能 --微信钉钉

SoapEye / 1370人阅读

摘要:技术细节对以上问题解决方案,我采用端对端懒加载不同平台的,分享逻辑统一由后端控制即页面里只需要引入一个脚本。总体引用方法放置获取分享信息的入参排除不需要那种分享。。。。。。

改造起点

github L6zt

项目前端与后端紧耦合,分享信息 放在jsp里,例如:

前端还要获取全局变量里的值,初始化分享
2.分享功能没有进行统一的合并,所以每个页面都需要重写分享逻辑,很low低效的很,而且不利于维护。
3.每次都需要 引入 钉钉 和 微信 分享的 sdk js 感觉浪费流量,而且 影响页面加载速度, 这个两个js都需要同时引入。

技术细节
对以上问题解决方案,我采用:
端对端懒加载 不同平台的 sdk, 分享逻辑 统一由后端控制 即 页面里 只需要引入一个js脚本。

总体引用方法

// data-ajax 放置获取分享信息 ajax的入参
//data-exclud 排除 不需要 那种分享

。。。。。。部分代码
公共函数

    var noop = function() {};
    var hasOwnP = function(obj, prop) {
        return Object.hasOwnProperty.call(obj, prop);
    };
    var toString = function(obj) {
        return Object.prototype.toString.call(obj);
    };
    var isHardVar = function(obj) {
        var result = toString(obj);
        return result === "[object Object]" || result === "[object Array]";
    }
    var merge = function() {
        var lg = arguments.length;
        var result = {};
        if (lg < 2) {
            return arguments[0]
        };
        for (var i = 0; i < lg; i++) {
            for (var key in arguments[i]) {
                console.log(hasOwnP(arguments[i], key), key);
                if (hasOwnP(arguments[i], key)) {
                    var value = arguments[i][key];
                    result[key] = value;
                }
            }
        }
        return result;
    };

对异步处理 自己模拟的promise实现

    var JcPromise = (function() {
        function JcPromise(fn) {
            fn = fn || noop;
            var statusList = ["start", "pending", "succeed", "err"];
            var cbStatus = [0, 1];
            var status = statusList[0];
            var data = null;
            var err = null;
            var that = this;
            var successFn = [];
            var errFn = [];

            function resolve(d) {
                data = d;
                that._changeStatus(2);
            };

            function reject(e) {
                err = e;
                that._changeStatus(3);
            };
            this.getData = function() {
                return data;
            };
            this.getErr = function() {
                return err
            };
            this.getStatus = function() {
                return status
            };
            this._changeStatus = function(idx) {
                switch (status) {
                    case statusList[2]:
                    case statusList[3]:
                        {
                            return false
                        }
                };
                status = statusList[idx];
                if (status === statusList[3]) {
                    setTimeout(function() {
                        that._triggerCatch();
                    }, 0)
                }
                if (status === statusList[2]) {
                    setTimeout(function() {
                        that._triggerThen();
                    }, 0)
                }
            };
            this._pushThenCb = function(cb) {
                successFn.push({
                    status: cbStatus[0],
                    cb: cb
                });
                if (status === statusList[2]) {
                    this._triggerThen();
                }
            };
            this._pushCatchCb = function(cb) {
                errFn.push({
                    status: cbStatus[0],
                    cb: cb
                });
                if (status === statusList[3]) {
                    this._triggerCatch();
                }
            };
            this._triggerThen = function() {
                successFn.map(function(item) {
                    if (item.status === cbStatus[0]) {
                        item.cb(data);
                        item.status = cbStatus[1];
                    }
                })
            };
            this._triggerCatch = function() {
                errFn.map(function(item) {
                    if (item.status === cbStatus[0]) {
                        item.cb(err);
                        item.status = cbStatus[1];
                    }
                })
            };
            this._changeStatus(1);
            this.uuid = uuid++;
            try {
                fn(resolve, reject);
            } catch (e) {
                reject(e)
            }
            return this
        };
        JcPromise.fn = JcPromise.prototype;
        // 返回一个promise
        JcPromise.fn.then = function(cb) {
            var promiseR = null;
            var promiseJ = null;
            var result = null;
            var that = this;
            var fn = function() {
                setTimeout(function() {
                    try {
                        var data = that.getData();
                        result = cb(data);
                        if (typeof result === "object" && result !== null && result.constructor === JcPromise) {
                            result.then(function(data) {
                                promiseR(data)
                            }).catch(function(e) {
                                promiseJ(e)
                            })
                        } else {
                            promiseR(result)
                        }
                    } catch (e) {
                        promiseJ(e)
                    }
                }, 0);
            };
            this._pushThenCb(fn);
            // 触发promise
            return new JcPromise(function(r, j) {
                promiseR = r;
                promiseJ = j;
            });
        };
        // 返回一个promise
        JcPromise.fn.catch = function(cb) {
            var promiseR = null;
            var promiseJ = null;
            var result = null;
            var that = this;
            var fn = function() {
                setTimeout(function() {
                    try {
                        var data = that.getErr();
                        result = cb(data);
                        if (typeof result === "object" && result !== null && result.constructor === JcPromise) {
                            result.then(function(data) {
                                promiseR(data)
                            }).catch(function(e) {
                                promiseJ(e)
                            })
                        } else {
                            promiseR(result)
                        }
                    } catch (e) {
                        promiseJ(e)
                    }
                }, 0)
            };
            this._pushCatchCb(fn);
            // 触发promise
            return new JcPromise(function(r, j) {
                promiseR = r;
                promiseJ = j;
            });
        };
        return JcPromise
    })();

懒加载加载js方法

    function loadScript(src) {
        return new JcPromise(function(r, j) {
            var el = document.createElement("script");
            el.onload = function() {
                r(el);
            };
            el.onerror = function() {
                j();
            };
            el.src = src;
            document.body.appendChild(el);
        });
    };

判断 是钉

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108880.html

相关文章

  • Yoshua Bengio最新演讲:Attention 让深度学习取得巨大成功

    摘要:深度学习理论在机器翻译和字幕生成上取得了巨大的成功。在语音识别和视频,特别是如果我们使用深度学习理论来捕捉多样的时标时,会很有用。深度学习理论可用于解决长期的依存问题,让一些状态持续任意长时间。 Yoshua Bengio,电脑科学家,毕业于麦吉尔大学,在MIT和AT&T贝尔实验室做过博士后研究员,自1993年之后就在蒙特利尔大学任教,与 Yann LeCun、 Geoffrey Hinto...

    LMou 评论0 收藏0
  • 吴恩达 NIPS 2016唯一的中文版PPT

    摘要:今日,在第届神经信息处理系统大会中,百度首席科学家吴恩达教授发表演讲利用深度学习开发人工智能应用的基本要点。为了方便读者学习和收藏,雷锋网特地把吴恩达教授的做为中文版。吴恩达先讲述了常见的深度学习模型,然后再着分析端到端学习的具体应用。 今日,在第 30 届神经信息处理系统大会(NIPS 2016)中,百度首席科学家吴恩达教授发表演讲:《利用深度学习开发人工智能应用的基本要点(Nuts an...

    yunhao 评论0 收藏0
  • 选型云ERP中五个不能忽视的问题

    摘要:企业在选择云系统时,尤其如此。云系统中的每个因素都与公司成长模式有关。成本蠕变成本蠕变或许是最普遍也是最容易被负责人忽略的,对云系统的产生的影响也是更为负面的。如果你选择的云服务组合是正确的,云系统的扩张就应该是顺其自然的。 一、在选择过程中忽略重要的云属性企业在购买整合系统时要面对一系列的挑战性,除了要理解公司行为方式和原因以外,还需要有考虑到其他因素。如果忽略了某个流程或要求,那么在这个...

    venmos 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<