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

改造起点

github L6zt

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

<script>
    window.$shareInformation = {
        title: '....',
        desc: '.....',
        link: '.....',
    }
</script>

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

技术细节

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

总体引用方法

// data-ajax 放置获取分享信息 ajax的入参
//data-exclud 排除 不需要 那种分享
<script src="/js/share.js" data-ajax="{'a': '1', 'b': '2'}" data-exclud="['wx', 'dd']" data-slector="share"></script>

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

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);
        });
    };

判断 是钉