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

jiezi

6 年前

改造起点
github L6zt
项目前端与后端紧耦合, 分享信息放在 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);
};

}
case 1.4:
{
api = ‘updateAppMessageShareData|updateTimelineShareData|onMenuShareWeibo’;
jsApiList = api.split(‘|’);
bindEvent = api.split(‘|’);
break;
}
};
return {
jsApiList: jsApiList,
bindEvent: bindEvent
}
};
var wxSupport = findWxSupportApi(wxJsVersion);
var jsApiList = wxSupport.jsApiList;
var bindEvent = wxSupport.bindEvent;
var title = shareData.title;
var desc = shareData.desc;
var link = shareData.link;
var imgUrl = shareData.imgUrl;
wx.config({
appId: baseConfig.appId,
timestamp: baseConfig.timestamp,
nonceStr: baseConfig.nonceStr,
signature: baseConfig.signature,
jsApiList: jsApiList
});
wx.ready(function() {
bindEvent.forEach(function(key) {
console.log(key);
wx[key] && wx[key]({
title,
desc,
link,
imgUrl,
success() {
var fnKey = key + ‘TriggerSuccess’;
var cb = wxShareTriggerCb[fnKey];
cb && cb();
},
error() {
var fnKey = key + ‘TriggerError’;
var cb = wxShareTriggerCb[fnKey];
cb && cb();
}
})
})
})
};