# 前端JS梳理

# milo

PC https://ossweb-img.qq.com/images/js/milo_bundle/milo.js Mobile https://ossweb-img.qq.com/images/js/mobile_bundle/milo.js

[1.1] extend 为对象进行扩展属性和方法 @param {object} object 对象 @return {bool} 是/否

let honey={name:'j'}
milo.extend(honey,{age:18});
console.log(honey);
// {name: "j", age: 18}

1
2
3
4

[1.2] extendLess 修改对象已经存在的属性和方法 @param {object} object 对象 @return {bool} 是/否

let honey={name:'j'}
milo.extendLess(honey,{age:18});
console.log(honey);
// {name: "j"}
extendLess(honey,{name:'o'});
console.log(honey);
// {name: "o"}

1
2
3
4
5
6
7

[1.3] extendClass 类式继承（原型链继承）【原型和继承】子类共享父类原型的方法和属性，子类与父类同名属性覆盖 @param {object} subClass 子类 @param {object} superClass 基础类 @return {undefined}

function SuperType(){
  this.color='red';
}
SuperType.prototype.getColor=function(){
    return this.color;
}
function SubType(){}
milo.extendClass(SubType,SuperType);
let instance = new SubType();
console.log(instance.getColor());
// undefined
instance.color='blue';
console.log(instance.getColor());
// blue

1
2
3
4
5
6
7
8
9
10
11
12
13
14

[1.4] cloneClass 克隆对象，深拷贝 @param {object} object 基类 @return {object} 生成的子类

let dog={
    name:'ha',
    age:'1',
    getName:function(){
        return this.name;
    }
}
let newDog=milo.cloneClass(dog);
console.log(newDog.getName());
// ha

1
2
3
4
5
6
7
8
9
10

[1.5] bind 绑定上下文，参考原生bind 【this问题】 @param { function, context } object @return {object}

let test = {
  x: 42,
  getX: function() {
    return this.x;
  }
};
let unbound = module.getX;
console.log(unbound()); // The function gets invoked at the global scope
// undefined
let bound = milo.bind(unbound,module);
console.log(bound());
// 42

1
2
3
4
5
6
7
8
9
10
11
12

[1.6] isUndefined 判断变量是否定义 @param {*} any 变量 @return {bool} 是/否

let name;
console.log(isUndefined(name));
// true
name='j';
console.log(isUndefined(name));
// false

1
2
3
4
5
6

[1.7] isArray 以及 isFunction / isObject / isNumber / isString / isBoolean / isDate / isDom 判断变量是对应类型 @param {*} any变量 @return {bool} 是/否

Object.prototype.toString.call({name:'j'});
// "[object Object]"
Object.prototype.toString.call([]);
// "[object Array]"

1
2
3
4

[1.8] need 加载对象方法，对应模块需有define方法定义，否则返回中无法使用 @param {array} modules 模块名称 @param {function} callback 回调回调方法中的参数为加载模块的返回 @return {undefined} undefined

need("biz.login", function(LoginManager) {
	LoginManager.login();
});

1
2
3

[1.9] include 加载多个脚本，适合进行跨域请求 @param {array} modules 模块名称 @param {function} callback 回调回调方法中的参数为加载模块的返回 @return {undefined} undefined

include(["https://lol.qq.com/act/a20171229personalcenter/tools.js"], function() {
    // do something
});

1
2
3

[1.10] loadScript 加载脚本基础方法（单一文件） @param {string} url 路径 @param {function} callback 回调方法方法参数表明是否加载成功 @return {undefined} undefined

loadScript("https://lol.qq.com/act/a20171229personalcenter/tools.js", function() {
    // do something
});

1
2
3

[1.11] g 获取dom对象 @param {string|dom} dom的id或对象 @return {dom}

g('#domId');

[1.12] toHtml 字符串替换为HTML编码形式 @param {string} str 字符串 @return {string}

let htmlStr='<p>hello world</p>';
milo.toHtml(htmlStr);
// &#60;p&#62;hello&#32;world&#60;&#47;p&#62;

1
2
3

[1.13] isMail 校验邮箱地址 @param {string} str 字符串 @return {bool}

let mailTest='@320.com';
milo.isMail(mailTest);
// false
mailTest='2378913@q.com';
milo.isMail(mailTest);
// true

1
2
3
4
5
6

[1.14] isTel 校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-” @param {string} str 字符串 @return {bool}

let telTest='021-487098';
milo.isTel(telTest);
// true
telTest='2378913@qq.com';
milo.isTel(telTest)
// false

1
2
3
4
5
6

[1.15] isMobile 校验手机号码：必须以数字开头 @param {string} str 字符串 @return {bool}

let mobileTest='021-487098';
console.log(isMobile(mobileTest));
// false
mobileTest='13123212321';
console.log(isMobile(mobileTest))
// true

1
2
3
4
5
6

[1.16] isIDCard 是否身份证号码 @param {string} str 字符串 @return {bool}

let idTest='188434888803129482';
console.log(isIDCard(idTest));
// false
idTest='140434199703129482';
console.log(isIDCard(idTest))
// true

1
2
3
4
5
6

[1.17] isChinese 是否全部是中文 @param {string} str 字符串 @return {bool}

let chTest='dsadsa中文';
console.log(isChinese(chTest));
// false
chTest='这是纯种中文';
console.log(isChinese(chTest))
// true

1
2
3
4
5
6

[1.18] isEnglish 是否全部是英文 @param {string} str 字符串 @return {bool}

let enTest='dsadsa中文';
console.log(isEnglish(enTest));
// false
enTest='pureEnglish';
console.log(isEnglish(enTest))
// true

1
2
3
4
5
6

[1.19] isURL 是否链接地址 @param {string} str 字符串 @return {bool}

let urlTest='ftp://123.com';
console.log(isURL(urlTest));
// false
urlTest='https://ossweb-img.qq.com/images/js/milo/milo.js';
console.log(isURL(urlTest))
// true

1
2
3
4
5
6

[1.20] cookie.set 设置cookie @param {string} sName cookie名 @param {string} sValue cookie值 @param {int} iExpireSec 失效时间（秒） @param {string} sDomain 作用域 @param {string} sPath 作用路径 @param {bool} bSecure 是否加密 @return {undefind}

milo.cookie.set(ids, 'cur', false, 'lol.qq.com', '/')

[1.21] cookie.get 获取cookie @param {string} sName cookie名 @param {string} sValue 默认值 @return {string} cookie值

milo.cookie.get('uin');
//value of uin

1
2

[1.22] cookie.clear 获取cookie @param {string} sName cookie名 @param {string} sDomain 作用域 @param {sPath} sPath 作用路径 @return {undefined}

 milo.cookie.clear("IED_LOG_INFO2", "qq.com", "/");

[1.23] toDateString 获取日期 @param {string} sep 分隔符默认为- @return {string} yyyy-mm-dd

console.log(toDateString());
// 2020-06-04
console.log(toDateString('/'));
// 2020/06/04

1
2
3
4

[1.24] toDateTimeString 获取日期和时间 @param {string} sep 分隔符默认为- @return {string} yyyy-mm-dd hh:ii:ss

 console.log(toDateTimeString());
// 2020-06-04 14:35:40
console.log(toDateTimeString('/'));
// 2020/06/04 14:35:40

1
2
3
4

[1.25] isLeapYear 是否润年 @param {int} year 年份 @return {bool} 是/否

console.log(isLeapYear(2019));
// false
console.log(isLeapYear(2016));
// true

1
2
3
4

[1.26] getSeverDateTime 获取服务器时间 @return {date} Date

console.log(milo.getSeverDateTime());
// Thu Jun 04 2020 14:43:57 GMT+0800 (中国标准时间)

1
2

[1.27] isQQ 是否QQ号码 @param {int} qq qq号 @return {bool}

console.log(milo.isQQ(2453623));
// true

1
2

[1.28] addEvent 为DOM对象增加事件 @param {dom} element dom对象 @param {string} type 事件名称 @param {function} type 事件方法 @return {undefined}

milo.addEvent(g("ptLoginBtn"), "click", function() {
    need("biz.login", function(LoginManager) {
        LoginManager.init({
            needReloadPage: true
        });
        LoginManager.login();
    });
    return false;
});

1
2
3
4
5
6
7
8
9

[1.29] ready DOM ready事件 @param {dom} element dom对象 @param {string} type 事件名称 @param {function} type 事件方法 @return {undefined}

milo.ready(function() {
// do something
})

1
2
3

[1.30] serialize 序列化JSON对象对object转化为url参数字符串，各属性间以&分隔，如a=1&b=2&c=3 对象属性为string 则进行encodeURIComponent编码对象属性为bool 则以0代表false 1代表true 对象属性为对象，则会继续进行递归序列化对象属性为function 则返回function.toString @param {object} jsonObj json对象 @return {string}

console.log(serialize(2453623));
// 2453623
console.log(serialize('hello'));
// hello
console.log(serialize(null));
// ''
console.log(serialize(undefined));
// ''
console.log(serialize([24,53,623]));
// 24|53|623
console.log(serialize({name:'j',age:18,personel:['kind','happy']}));
// name=j&age=18&personel=kind|happy

1
2
3
4
5
6
7
8
9
10
11
12

[1.31] amsInit 获取ams的初始信息 zxxxxxx@param {number} amsActivityId 活动号 @param {number} flowId 流程号 @param {function} callback 回调方法 @return {undefined}

amsInit(214637, 556957,function(){
	// do something
})

1
2
3

[1.32] amsSubmit ams提交流程 @param {number} amsActivityId 活动号 @param {number} flowId 流程号 @return {undefined}

amsInit(214637, 556957)

# 大区

http://gameact.qq.com/comm-htdocs/js/game_area/lol_server_select.js

[2.1] LOLServerSelect.zoneToName(iArea) @param {number} iArea 大区号 @return {string} areaName 大区名称

LOLServerSelect.zoneToName("1");
// 艾欧尼亚  电信

1
2

# 掌盟

http://lol.qq.com/m/public/LOL_App.js 详细版介绍企业管理首页 (opens new window)

[3.1] CommApp_QT.CheckPlat 检查打开web页面的平台（QQ,WX,APP,WEIBO,DJC,LCU,Browser） @sAppTarget APP特有的标记,CF:cfapp,LOL:lolapp @callBack 获取到对应平台后需要执行的方法

CommApp_QT.CheckPlat('lolapp',function(){
	console.log(this.sPlat);
});
// 在掌盟中打开，则打印 'APP'

1
2
3
4

[3.2] CommApp_QT.CheckAppInstallForQQ * 从QQ检查APP的安装状态 @sPackageName 包名，类似于 com.tencent.qt.qtl @sAppIdForQQ 手Q的APPID，类似于 tencent100543809 @callBackInstalled 检查到已经安装APP后执行的方法 @callBackNotInstall 检查到未安装APP后执行的方法
[3.3] CommApp_QT.CheckAppInstallForWX * 从微信检查APP是否安装 @sAppIdForWX APP在微信平台的ID，类似于：wx5a4a8ac0fd48303a @sPackageName APP的包名，类似于：com.tencent.qt.qtl @extInfo 附带信息，类似于：from=webview&type=requestApp&icon=.... @iBaseVersion APP的版本号，低于该版本号，则认为没有安装APP
[3.4] CommApp_QT.LaunchAppFromQQ * 从QQ打开APP sPackageName 包名 sAppIdForQQ APP在手Q上的ID sExtInfo 附加信息，打开APP以后传递给APP的参数 ::qqlanchflags ???::
[3.5] CommApp_QT.LaunchAppFormWX* 从微信打开APP sAppIdForWX APP在微信平台的APPID sMessageExt 附加信息，一般填空 sExtInfo 附加信息，打开APP以后传递给APP的参数
[3.6] init_ZMApp 初始化掌盟

init_ZMApp({ 
'title':"英雄联盟正版手游，敬请关注！", 
'summery':"人气英雄，经典还原，公平竞技，实力至上，经典峡谷，掌心再现！", 
'subtitle' : "英雄联盟正版手游，敬请关注！", 
'img':"http://game.gtimg.cn/images/lolm/m/shareicon.png", 
'url':window.location.href, 
'WXtrigger':function(res){ 
//微信动作回调，捕捉动作 
//console.log(res); 
'WXsuccess':function(res){ 
//微信成功回调 
//console.log(res); 
if(!res) return; 
if(res.errMsg == 'sendAppMessage:ok') { 
//微信分享个人 
PTTSendClick('share','m','分享个人'); 
} else if(res.errMsg == 'shareTimeline:ok') { 
//微信分享朋友圈 
PTTSendClick('share','m','分享朋友圈'); 
}else if(res.errMsg == 'shareQQ:ok'){ 
//微信分享至QQ 
PTTSendClick('share','m','分享QQ'); 
} 
}, 
'WXcancel':function(res){ 
//微信分享取消动作回调 
PTTSendClick('share','m','分享取消'); 
}, 
'WXfail':function(res){ 
//微信分享失败动作回调 
PTTSendClick('share','m','微信分享失败'); 
}, 
'QQtrigger':function(res){ 
//QQ动作回调 
PTTSendClick('share','m','qq分享'); 
}, 
'QQcallback':function(res){ 
//QQ分享成功 
PTTSendClick('share','m','QQ分享成功'); 
}, 
'LOL_APPsuccess':function(res){ 
PTTSendClick('share','m','zm掌盟分享'); 
} 
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

[3.7] CheckApp.Is_Plat 当前所处的平台 CheckApp和CommApp_QT内容有些冗余
[3.8] QTVideoChat 聊天室相关处理

# 售卖

https://lol.qq.com/plugin/business/sell_common.min.js

# 皮肤

原：http://ossweb-img.qq.com/images/lol/hns/RALFSHEN_HEROSKIN.js 新：https://game.gtimg.cn/images/lol/act/img/js/cuSkinList/cuskin_list.js

# 安全（必引）

https://js.aq.qq.com/js/aq_common.js

# 手Q

http://pub.idqqimg.com/qqmobile/qqapi.js?_bid=152 手Q分享以及在手机上拉起掌盟

# 公用方法

https://lol.qq.com/m/public/Activity_Comm.js https://lol.qq.com/act/CGA/CGA.js

(Activity_Comm)

[8.1] GetQueryString @name {string} query 当前url的query参数key @return {string} value 当前url的query参数value

// https://lol.qq.com/m/public/Activity_Comm.js?v=1
GetQueryString('v');
// 1

1
2
3

[8.2] 请求相关 * postFormData postScriptData request requestJSONP postScriptDeferData postGetScirptDeferData postScriptDeferStaticData
[8.3] js_htmlspecialchars_decode* 字符串 ——>html转码
[8.4] GetNowFormatDate 获取当前格式化后的日期

GetNowFormatDate();
// "2020-06-11"

1
2

[8.5] date* PHP日期格式化处理
[8.6] formatSeconds 秒数转分钟
[8.7] CheckStringLength 多余字符应省略号标识 @str {string} 字符串参数 @length {number} 长度 @return {string} 返回字符串

CheckStringLength('hello world',5);
// "hello..."

1
2

[8.8] outNum 处理数量显示 @num {number} 数量值 @return {string} 数量显示

outNum(123000);
// "12W"

1
2

[8.9] ReloadPubdate 处理时间显示 @str {string} 时间 yyyy-mm-dd hh:mm:ss @formatedTime {string} 格式化字符串

ReloadPubdate('2020-06-11 12:02:03');
// '刚刚'

1
2

[8.10] strtotime* 字符串转时间
[8.11] mt_rand 取随机数 @min {number} 最小值 @max {number} 最大值

mt_rand(2,100);
// 6

1
2

[8.12] FormateNum 格式化数字为9,999,999的格式

FormateNum(1289.8932);
// "1,289.8932"

1
2

[8.13] 牛评相关* GetNPComment 获取牛评 CreateCommentIframe QueryLoginUserInfo 获取牛评内头像等信息 QueryLoginUserInfoAPP 获取APP牛评内头像等信息

（https://lol.qq.com/act/CGA/CGA.js）

[8.14] UniversalCheckLogin 通用登录方法

CGA.UniversalCheckLogin(function(data){
  //已登陆处理
 console.log(data)
 $("#userinfo").html(data.uin)
 if(data.is_bind){
     $('#noBind').hide();
     $('#area_info').html("【" + LOLServerSelect.zoneToName(data.roleinfo.area)+"】").show();
     $('#nick_info').html(data.roleinfo.summonerName).show();
     $('#isBind').show();
 }
},function(data){
 //未登录处理
 CGA.UniversalLogin()
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

[8.15] PageShare @iActId {number} AMS活动ID @iTaskId {number} AMS流程ID 分享页面回调函数：alert（结果）
[8.16] DoLottery @iActId {number} AMS活动ID @iTaskId {number} AMS流程ID @iPackageId {number} AMS礼包单ID 抽奖回调函数：alert（结果）
[8.17] DoReceive @iActId {number} AMS活动ID ::@vSerialNo {number} AMS流程ID？？:: 领取回调函数：alert（结果）
[8.18] 邀请好友 * 都依赖页面的 html 结构，不具通用性 InviteList(iActId, iTaskId, inviteType) 好友列表 DoInvite(iActId, iTaskId) 邀请
[8.19] UserPackage * 用户背包 @iActId {number} AMS活动ID 依赖页面html结构
[8.20] BindArea/ChangeArea 绑定大区/更改大区绑定依赖页面结构 @callback {function} 回调函数
[8.21] CheckHeroSkin* 检测皮肤是否拥有
[8.22] LoadJSONData 加载JSON数据 @url {string} 请求地址 @success {function} 成功回调 @error {function} 错误回调

# PC分享

https://ossweb-img.qq.com/images/js/share/share-min.js

# 腾讯视频播放器

https://vm.gtimg.cn/tencentvideo/txp/js/txplayer.js

# 赛事相关

腾讯文档 (opens new window)

Vue开发 →