common.js 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894
  1. var comm = {
  2. data: {
  3. baseUrl: ''
  4. },
  5. /* ====================================================================================== */
  6. addEvent: function (ele, ev, fn) { // 添加事件的函数
  7. //针对IE浏览器
  8. if (ele.attachEvent) {
  9. ele.attachEvent('on' + ev, fn)
  10. }
  11. //针对FF与chrome
  12. else {
  13. ele.addEventListener(ev, fn, false)
  14. }
  15. },
  16. ajax: function (options) { // 封装ajax
  17. var _this = this;
  18. //异步请求对象的完成状态
  19. this.done = 0;
  20. this.format = function () {
  21. var now = new String(new Date().getTime());
  22. return now.substr(0, now.length - 3);
  23. }
  24. //格式化参数
  25. this.formatParams = function (data) {
  26. //获取地址参数
  27. var arr = [];
  28. for (var name in data) {
  29. arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
  30. }
  31. arr.push("t=" + _this.format());//按分钟刷一次
  32. return arr.join("&");
  33. }
  34. //传入设置
  35. options = options || {};
  36. //请求方式
  37. options.type = (options.type || "GET").toUpperCase();
  38. options.dataType = options.dataType || "json";
  39. options.async = options.async || true;
  40. options.contentType = options.contentType || 'application/x-www-form-urlencoded';
  41. var params = _this.formatParams(options.data);
  42. if (options.contentType == "application/json;charset=utf-8") {
  43. params = JSON.stringify(options.data)
  44. }
  45. //创建异步请求对象 - 第一步
  46. var xhr;
  47. //w3c标准
  48. if (window.XMLHttpRequest) {
  49. xhr = new XMLHttpRequest();
  50. }
  51. //兼容IE6及以下
  52. else if (window.ActiveObject) {
  53. xhr = new ActiveXObject('Microsoft.XMLHTTP');
  54. }
  55. //连接 和 发送 - 第二步
  56. //判断是那种类型的请求
  57. //若是get请求
  58. if (options.type == "GET") {
  59. //参数拼接
  60. if (options.url.indexOf("?") == -1) sp = "?"; else sp = "&";
  61. //发送请求
  62. xhr.open("GET", options.url + sp + params, options.async);
  63. xhr.send(null);
  64. }
  65. //若是post请求
  66. else if (options.type == "POST") {
  67. //发送请求
  68. xhr.open("POST", options.url, options.async);
  69. //设置表单提交时的内容类型
  70. xhr.setRequestHeader("Content-Type", options.contentType);
  71. //参数配置
  72. xhr.send(params);
  73. }
  74. //接收 - 第三步
  75. xhr.onreadystatechange = function () {
  76. if (xhr.readyState == 4) {
  77. //状态码
  78. var status = xhr.status;
  79. //状态码表示成功时,执行成功回调函数
  80. if (status >= 200 && status < 300 || status == 304) {
  81. //返回数据的格式
  82. //json字符串
  83. if (options.dataType == "json") {
  84. try {
  85. options.success && options.success(eval("(" + xhr.responseText + ")"));
  86. }
  87. catch (err) {
  88. options.success && options.success(JSON.parse(xhr.responseText), xhr.responseXML);
  89. }
  90. }
  91. //普通字符串
  92. else {
  93. options.success && options.success(xhr.responseText, xhr.responseXML);
  94. }
  95. // 改变状态为完成
  96. _this.done = 1;
  97. }
  98. //如果状态码表示失败时调用错误处理回调函数
  99. else {
  100. options.error && options.error(status);
  101. // 改变状态为完成
  102. _this.done = 1;
  103. }
  104. }
  105. }
  106. },
  107. /* ====================================================================================== */
  108. hasClass: function (ele, cls) { // 判断一个类是否存在
  109. return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
  110. },
  111. addClass: function (ele, cls) { // 增加一个类
  112. if (!this.hasClass(ele, cls)) ele.className = ele.className.replace(/(\s*$)/g, "") + " " + cls
  113. },
  114. removeClass: function (ele, cls) { // 删除一个类
  115. if (this.hasClass(ele, cls)) {
  116. var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
  117. ele.className = ele.className.replace(reg, ' ')
  118. }
  119. },
  120. getStyle: function (ele, attr) { // 获取某个元素的样式
  121. var res = '';
  122. if (window.getComputedStyle) {
  123. res = getComputedStyle(ele)[attr];
  124. } else if (ele.currentStyle) {
  125. res = ele.currentStyle[attr];
  126. } else {
  127. res = ele.style[attr];
  128. }
  129. // 这里返回的样式做了调整,返回必须为字符串,有盒子的样式获取像margin-left会返回纯数字(不含单位px),这样不好处理,统一变成字符串后再对返回结果用正则匹配
  130. return res + '';
  131. },
  132. /* ====================================================================================== */
  133. show: function (ele) { // 让一个元素隐藏(display)
  134. ele.style.display = 'block'
  135. },
  136. hide: function (ele) { // 让一个元素显示(display)
  137. ele.style.display = 'none'
  138. },
  139. isShow: function (ele) { // 判断某个元素的是否显示(display,浅)
  140. var getVisibility = ele.style.display;
  141. return getVisibility !== "none";
  142. },
  143. isShowDeel: function (ele) { // 判断某个元素是否显示(display,深)
  144. temp = ele
  145. var getVisibility = this.getStyle(temp, 'display');
  146. if (getVisibility == 'none') {
  147. return false;
  148. } else if (temp.tagName == 'BODY') {
  149. return true;
  150. } else {
  151. return this.isShowDeel(temp.parentNode);
  152. }
  153. },
  154. visible: function (ele) { // 让一个元素隐藏(visibility)
  155. ele.style.visibility = 'visible'
  156. },
  157. hidden: function (ele) { // 让一个元素显示(visibility)
  158. ele.style.visibility = 'hidden'
  159. },
  160. visibleClass: function (cls) { // 让一个类的元素隐藏(visibility)
  161. var arr = document.getElementsByClassName(cls)
  162. for (var i = 0; i < arr.length; i++) {
  163. arr[i].style.visibility = 'visible'
  164. }
  165. },
  166. hiddenClass: function (cls) { // 让一个类的元素显示(visibility)
  167. var arr = document.getElementsByClassName(cls)
  168. for (var i = 0; i < arr.length; i++) {
  169. arr[i].style.visibility = 'hidden'
  170. }
  171. },
  172. /* ====================================================================================== */
  173. addElement: function (ele, tag, cls, data, inner, fn) { // 为一个元素创建一个子元素
  174. // 1、创建新元素
  175. var newEle = document.createElement(tag)
  176. // 2、设置各种属性(图片地址,自定义属性等)
  177. newEle.setAttribute('class', cls);
  178. for (var item in data) {
  179. newEle.setAttribute(item, data[item]);
  180. }
  181. // 3、设置内容(innerhtml)
  182. newEle.innerHTML = inner ? inner : ''
  183. // 4、设置回调函数
  184. fn && fn(newEle)
  185. // 5、将新元素加入到父元素中
  186. ele.appendChild(newEle)
  187. },
  188. // 帧动画(定时器容器(存在一个对象内的一个属性),图片群所在的元素,执行速度(单位:毫秒),是否只执行一次,执行完毕的回调函数)
  189. zhenAnimation: function (interval, ele, speed, once, fn) {
  190. var cont = document.getElementsByClassName('container')[0]
  191. // 清除定时器
  192. clearInterval(cont[interval])
  193. // 获取图片群并全部隐藏
  194. var imgs = ele.getElementsByTagName('img')
  195. for (var i = 0; i < imgs.length; i++) {
  196. imgs[i].style.visibility = 'hidden'
  197. }
  198. // 单独显示第一张图
  199. var i = 0
  200. imgs[i].style.visibility = 'visible'
  201. // 设置定时器
  202. cont[interval] = setInterval(function() {
  203. // 判断是否只执行一次
  204. if (i == imgs.length-1 && once) {
  205. // 每轮执行完成的回调函数
  206. clearInterval(cont[interval])
  207. fn&&fn()
  208. return
  209. }
  210. // 前一张图隐藏、后一张图显现、可循环执行
  211. imgs[i++].style.visibility = 'hidden'
  212. if (i == imgs.length) {i=0; fn&&fn()}
  213. imgs[i].style.visibility = 'visible'
  214. }, speed)
  215. },
  216. // 帧动画加强版,ele格式:<div id="yw1" data-url="图片地址前缀(不包括编号.png)" data-max="个数(帧动画图片数量+1)">
  217. zhenAnimationPro: function (interval, ele, speed, once, fn) {
  218. // 判断是否第一次执行该帧动画,是则加载图片
  219. if (!ele.getAttribute('isload')) {
  220. var src = ele.getAttribute('data-url')
  221. for (var j = ele.getAttribute('data-max'); j >= 0; j--) {
  222. ele.innerHTML = '<img src="' + src + comm.addPreZero(j) + '.png" style="position: absolute;visibility: hidden;">' + ele.innerHTML
  223. }
  224. ele.setAttribute('isload', 1)
  225. }
  226. var cont = document.getElementsByClassName('container')[0]
  227. // 清除定时器
  228. clearInterval(cont[interval])
  229. // 获取图片群并全部隐藏
  230. var imgs = ele.getElementsByTagName('img')
  231. for (var i = 0; i < imgs.length; i++) {
  232. imgs[i].style.visibility = 'hidden'
  233. }
  234. // 单独显示第一张图
  235. var i = 0
  236. imgs[i].style.visibility = 'visible'
  237. // 设置定时器
  238. cont[interval] = setInterval(function() {
  239. // 判断是否只执行一次
  240. if (i == imgs.length-1 && once) {
  241. // 每轮执行完成的回调函数
  242. clearInterval(cont[interval])
  243. fn&&fn()
  244. return
  245. }
  246. // 前一张图隐藏、后一张图显现、可循环执行
  247. imgs[i++].style.visibility = 'hidden'
  248. if (i == imgs.length) {i=0; fn&&fn()}
  249. imgs[i].style.visibility = 'visible'
  250. }, speed)
  251. },
  252. /* ====================================================================================== */
  253. setCookie: function (name, value, t) { // 设置cookie
  254. var hour = t ? t : 8;
  255. var exp = new Date();
  256. exp.setTime(exp.getTime() + hour * 60 * 60 * 1000);
  257. document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
  258. },
  259. getCookie: function (name) { // 获取cookie 存在返回值,不存在返回null
  260. var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  261. if (arr = document.cookie.match(reg)) {
  262. if (arr[2] != "undefined")
  263. return unescape(arr[2]);
  264. else return undefined;
  265. } else {
  266. return null;
  267. }
  268. },
  269. /* ====================================================================================== */
  270. getQueryString: function (name) { // 获取url的某个参数
  271. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  272. var r = window.location.search.substr(1).match(reg);
  273. if (r != null && unescape(r[2]) != "undefined" && unescape(r[2]) != "null") return unescape(r[2]);
  274. return '';
  275. },
  276. urlParam: function (obj) { // 将对象转换为url参数字符串
  277. var _this = this;
  278. var arr = [];
  279. for (var name in obj) {
  280. arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(obj[name]));
  281. }
  282. return arr.join("&");
  283. },
  284. getRandom: function (min, max) { // 获取随机数
  285. return Math.floor(Math.random() * (max - min)) + min;
  286. },
  287. arrRandom: function (arr) { // 使数组随机排序,返回一个新数组
  288. arr.sort(function () {
  289. return 0.5 - Math.random()
  290. })
  291. },
  292. createArr: function (arr, num, content) { // 生成数组,
  293. // 调用举例:comm.createArr(arr, 'num', 'content')
  294. // 输出举例:var arr = [{num: 5, content: {id: 1, imgurl: 'img/1.jpg'}}, {num: 2, content: {id: 2, imgurl: 'img/2.jpg'}}]
  295. var newArr = []
  296. for (var i = 0; i < arr.length; i++) {
  297. for (var j = 0; j < arr[i][num]; j++) {
  298. newArr.push(arr[i][content])
  299. }
  300. }
  301. return newArr
  302. },
  303. /* ====================================================================================== */
  304. isPhone: function (phone) { // 判断是否为有效手机号
  305. if (!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(phone))) {
  306. return false;
  307. } else {
  308. return true
  309. }
  310. },
  311. timestamp: function (time) { // 转换时间格式过滤器
  312. var sec = Math.floor(time % 60)
  313. var min = Math.floor(time / 60 % 60)
  314. var hour = Math.floor(time / 60 / 60)
  315. sec = sec < 10 ? '0' + sec : sec
  316. min = min < 10 ? '0' + min : min
  317. hour = hour < 10 ? '0' + hour : hour
  318. var timeStr = hour + ':' + min + ':' + sec;
  319. return timeStr
  320. },
  321. addPreZero: function (num) { // 帧动画补零过滤器
  322. if (num < 10) {
  323. return '0000' + num;
  324. } else if (num < 100) {
  325. return '000' + num;
  326. } else if (num < 1000) {
  327. return '00' + num;
  328. } else if (num < 10000) {
  329. return '0' + num;
  330. } else {
  331. return num;
  332. }
  333. },
  334. /* ====================================================================================== */
  335. Debuglog: function (text) { // 弹窗,用于测试
  336. if (typeof printWind == "undefined") {
  337. window.printWind = document.createElement("div");
  338. window.inner = document.createElement("div");
  339. inner.style.width = "600px";
  340. inner.style.position = "absolute";
  341. inner.style.right = "0px";
  342. printWind.appendChild(inner);
  343. printWind.style.position = "fixed";
  344. printWind.style.right = "0";
  345. printWind.style.top = "0";
  346. printWind.style.background = "rgba(0,0,0,0.6)";
  347. printWind.style.zIndex = "99999";
  348. printWind.style.padding = "20px";
  349. printWind.style.fontSize = "20px";
  350. printWind.style.width = "600px";
  351. printWind.style.height = "600px";
  352. printWind.style.color = "#0aff08";
  353. document.body.appendChild(printWind);
  354. }
  355. var para = document.createElement("p"); //创建新的<p> 元素
  356. para.innerHTML = text;
  357. para.setAttribute("class", "newLine");
  358. para.style.padding = "5px";
  359. inner.appendChild(para);
  360. var a = inner.clientHeight - 600;
  361. inner.style.top = -a + "px";
  362. },
  363. tips: function (text, time) {
  364. time = time ? time : 1500;
  365. var para = document.createElement("div"); //创建新的<p> 元素
  366. para.innerHTML = text;
  367. para.style.zIndex = 10000;
  368. para.style.borderRadius = '9px'
  369. para.style.backgroundColor = '#287AFF'
  370. para.style.textAlign = 'center'
  371. para.style.color = '#FFF'
  372. para.style.position = 'absolute'
  373. para.style.fontSize = '20px'
  374. para.style.left = '450px'
  375. para.style.top = '250px'
  376. para.style.padding = '7px 27px'
  377. para.style.width = '380px'
  378. para.style.wordBreak = 'break-all'
  379. para.style.display = 'block'
  380. document.body.appendChild(para);
  381. setTimeout(function () {
  382. document.body.removeChild(para);
  383. }, time);
  384. },
  385. /* ====================================================================================== */
  386. STBUtil: {
  387. /**
  388. * 通过键值获取机顶盒对应信息
  389. * @param name [参数名] ex:UserToken--用户token,EPGDomain--EPG域名,areaid--地区编码,templateName--当前用户模板
  390. * @return []
  391. */
  392. getSTBKey: function (name) {
  393. var value = '';
  394. if (typeof (Authentication) === "object") {
  395. if (Authentication.CTCGetConfig) {
  396. value = Authentication.CTCGetConfig(name);
  397. } else if (Authentication.CUGetConfig) {
  398. value = Authentication.CUGetConfig(name);
  399. }
  400. }
  401. return value;
  402. },
  403. /**
  404. * 通过键值设置机顶盒对应信息
  405. * @param name [参数名]
  406. * @param value [参数值]
  407. */
  408. setSTBKey: function (name, value) {
  409. if (typeof (Authentication) === "object") {
  410. Authentication.CTCSetConfig(name, value);
  411. }
  412. },
  413. /**
  414. * 获取机顶盒 用户账号/业务账号
  415. * @return {string}
  416. */
  417. getSTBUserId: function () {
  418. var userId = '';
  419. try{
  420. if (typeof (Authentication) == 'object') {
  421. // 此方法经测试目前可以获取到华为,中兴,创维三款机顶盒型号
  422. userId = Authentication.CTCGetConfig('UserID');
  423. if (!userId){
  424. userId = Authentication.CUGetConfig("UserID");
  425. }
  426. //烽火的机顶盒
  427. if(!userId){
  428. userId =Authentication.CTCGetConfig("device.userid");
  429. }
  430. //中兴老的盒子获取机顶盒型号的方法
  431. if(!userId && typeof(ztebw) == 'object' ){
  432. stbModel = ztebw.ioctlRead("infoZTEHWType");
  433. if(!stbModel) {
  434. stbModel = ztebw.ioctlRead("infoHWProduct");
  435. }
  436. }
  437. }
  438. else{
  439. console.log("不支持Authentication!");
  440. }
  441. }
  442. catch(e){
  443. userId = '';
  444. }
  445. return userId;
  446. },
  447. /**
  448. * 获取机顶盒 设备ID
  449. * @return {string}
  450. */
  451. getSTBId: function () {
  452. var stbId = "";
  453. if (typeof (Authentication) == "object") {
  454. stbId = Authentication.CTCGetConfig("STBID");
  455. if (!stbId) {
  456. stbId = Authentication.CUGetConfig("STBID");
  457. }
  458. if (!stbId) {
  459. stbId = Authentication.CTCGetConfig("device.stbid"); // 烽火的机顶盒
  460. }
  461. }
  462. // 广西广电获取stbId
  463. if (!stbId && typeof (guangxi) === "object") {
  464. stbId = guangxi.getStbNum();
  465. }
  466. return stbId;
  467. },
  468. /**
  469. * 获取机顶盒型号
  470. * @return {string}
  471. */
  472. getSTBModel: function () {
  473. var stbModel = '';
  474. try{
  475. //此方法经测试目前可以获取到华为,中兴,创维三款机顶盒型号
  476. stbModel = Authentication.CTCGetConfig('STBType');
  477. if (!stbModel){
  478. stbModel = Authentication.CUGetConfig("STBType");
  479. }
  480. //烽火的机顶盒
  481. if(!stbModel){
  482. stbModel = Authentication.CTCGetConfig("device.stbmodel");
  483. }
  484. //中兴老的盒子获取机顶盒型号的方法
  485. if(!stbModel && typeof(ztebw) == 'object' ){
  486. stbModel = ztebw.ioctlRead("infoZTEHWType");
  487. if(!stbModel){
  488. stbModel = ztebw.ioctlRead("infoHWProduct");
  489. }
  490. }
  491. }
  492. catch(e){
  493. console.log("不支持获取机顶盒型号!");
  494. }
  495. return stbModel;
  496. },
  497. /**
  498. * 获取机顶盒mac地址
  499. * @return {string}
  500. */
  501. getSTBMac: function () {
  502. if (window.isWinOS) { //Windows操作系统
  503. return "00-00-00-00-00-00";
  504. }
  505. var mac = "";
  506. if (typeof (Authentication) == "object") {
  507. try {
  508. mac = Authentication.CUGetConfig("mac");
  509. if (!mac && typeof (ztebw) == "object") {
  510. var stbId = ztebw.ioctlRead("infoHWSN");
  511. mac = stbId.substring(stbId.length - 12);
  512. }
  513. if (!mac) {
  514. mac = Authentication.CTCGetLocalMAC();
  515. }
  516. } catch (e) { }
  517. }
  518. // 广西广电获取mac
  519. if (!mac && typeof iPanel === "object") {
  520. mac = iPanel.getGlobalVar("MAC_ETH0");
  521. }
  522. // 长虹机顶盒获取mac(四川广电)
  523. if (!mac && typeof (Ethernet) === "object") {
  524. mac = Ethernet.MACAddress;
  525. }
  526. if (mac) {
  527. while (mac.indexOf(":") !== -1) {
  528. mac = mac.replace(":", "");
  529. }
  530. } else {
  531. mac = "00-00-00-00-00-00";
  532. }
  533. return mac;
  534. },
  535. /**
  536. * 获取 EPG大厅地址
  537. * @return {string}
  538. */
  539. getEPGDomain: function () {
  540. var epgDomain = "";
  541. if (typeof (Authentication) == "object") {
  542. epgDomain = Authentication.CTCGetConfig("EPGDomain");
  543. if (!epgDomain) {
  544. epgDomain = Authentication.CUGetConfig("EPGDomain");
  545. }
  546. if (typeof epgDomain === "undefined" || epgDomain == null) {
  547. epgDomain = "";
  548. }
  549. }
  550. return epgDomain;
  551. },
  552. /**
  553. * 获取 UserToken
  554. * @return {string}
  555. */
  556. getUserToken: function () {
  557. var userToken = "";
  558. if (typeof (Authentication) == "object") {
  559. userToken = Authentication.CTCGetConfig("UserToken");
  560. if (!userToken) {
  561. userToken = Authentication.CUGetConfig("UserToken");
  562. }
  563. if (!userToken) {
  564. userToken = Authentication.CTCGetConfig("device.usertoken");
  565. }
  566. }
  567. return userToken;
  568. },
  569. }
  570. };
  571. // promise插件
  572. (function (window) {
  573. // 参考Joe-Xie:https://www.cnblogs.com/XieJunBao/p/9156134.html
  574. // 原生封装promise为了应对低版本浏览器不兼容问题
  575. // 异步串行思路:promise执行then是注册回调函数,then有多个就可以注册多个回调函数,但是若多个回调都是异步执行的,那我们要等上一个异步结束后才执行下一个异步,这是时候就需要上一个异步操作完成后,把这个完成状态告诉下一个回调,这样才可以异步串行。为了解决这个问题我们把异步完成状态托管给promise去管理
  576. // 流程:第一步注册:链式调用then函数,每执行一个then函数,返回一个桥梁promise(then函数中的成功回调和失败回调是写入这个promise的回调列表中的,注意成功回调的功能除了执行本身函数外还要更新下一个promise的状态)
  577. // 第二步执行:第一个promise的异步执行完,开始执行第一个promise的回调函数(回调函数又分两步走:第一步:resolvePromise解析回调返回值(如果是promise则说明是异步,就需要继续解析直到不是promise而是一个具体的值),第二步:当回调返回的值是一个具体值而不是promise时,调用第二个proomise的reslove方法将第二个proomise的状态更新为fulfilled,并将第一个promise的回调的值传入p2的回调函数中去执行)
  578. function MyPromise(fn) {
  579. var self = this;
  580. // 成功回调传的参数
  581. self.value = null;
  582. // 失败回调传的参数
  583. self.error = null;
  584. // 当前promise对象的状态
  585. self.status = "pending";
  586. // 存储成功回调列表
  587. self.onFulfilledCallbacks = [];
  588. // 存储失败回调列表
  589. self.onRejectedCallbacks = [];
  590. // 状态改变并执行回调
  591. // 成功
  592. function resolve(value) {
  593. // 判断传入参数是否由MyPromise构造的对象,若是,注册该函数
  594. if (value instanceof MyPromise) {
  595. return value.then(resolve, reject);
  596. }
  597. // 判断
  598. if (self.status === "pending") {
  599. setTimeout(function () {
  600. self.status = "fulfilled";
  601. self.value = value;
  602. // 执行成功回调
  603. // self.onFulfilledCallbacks.forEach(function(callback){callback(self.value)});
  604. // 向下兼容forEach
  605. for (var i = 0; i < self.onFulfilledCallbacks.length; i++) {
  606. self.onFulfilledCallbacks[i](self.value);
  607. }
  608. }, 0)
  609. }
  610. }
  611. // 失败
  612. function reject(error) {
  613. if (self.status === "pending") {
  614. setTimeout(function () {
  615. self.status = "rejected";
  616. self.error = error;
  617. // self.onRejectedCallbacks.forEach(function(callback){callback(self.error)});
  618. for (var i = 0; i < self.onRejectedCallbacks.length; i++) {
  619. self.onRejectedCallbacks[i](self.error);
  620. }
  621. }, 0)
  622. }
  623. }
  624. try {
  625. fn(resolve, reject);
  626. }
  627. catch (e) {
  628. reject(e);
  629. }
  630. }
  631. // 解析放回值
  632. // 用来解析回调函数的返回值x,x可能是普通值也可能是个promise对象
  633. // 因为回调函数既可能会返回一个异步的promise也可能会返回一个同步结果,所以我们把直接把回调函数的结果托管给bridgePromise,使用resolvePromise方法来解析回调函数的结果,如果回调函数返回一个promise并且状态还是pending,就在这个promise的then方法中继续解析这个promise reslove传过来的值,如果值还是pending状态的promise就继续解析,直到不是一个异步promise,而是一个正常值就使用bridgePromise的reslove方法将bridgePromise的状态改为fulfilled,并调用onFulfilledCallbacks回调数组中的方法,将该值传入,到此异步操作就衔接上了。
  634. function resolvePromise(bridgepromise, x, resolve, reject) {
  635. // bridgepromise是桥梁promise,x是桥梁promise中注册的成功回调的返回值,resolve和reject是桥梁promise的状态改变函数
  636. // 2.3.1规范,避免循环引用
  637. // 如果成功回调的值又是桥梁promise就返回循环传参的错误(死循环)
  638. if (bridgepromise === x) {
  639. return reject(new TypeError('Circular reference'));
  640. }
  641. var called = false;
  642. // // 如果x是一个promise,则通过递归
  643. // if (x instanceof MyPromise) {
  644. // //如果这个promise是pending状态,就在它的then方法里继续执行resolvePromise解析它的结果,直到返回值不是一个pending状态的promise为止(这里使用了递归的方法)
  645. // if (x.status === "pending") {
  646. // x.then(
  647. // function(y){
  648. // resolvePromise(bridgepromise, y, resolve, reject);
  649. // },
  650. // function(error){
  651. // reject(error);
  652. // }
  653. // );
  654. // }
  655. // else {
  656. // x.then(resolve, reject);
  657. // }
  658. // }
  659. // else
  660. // // 如果x是一个promise,则继续解析它的状态
  661. if (x != null && ((typeof x === 'object') || (typeof x === 'function'))) {
  662. try {
  663. var then = x.then;
  664. if (typeof then === 'function') {
  665. // then方法的指向传入的桥梁promise,也就是说该桥梁promise调用了then方法并传入了成功回调和失败回调
  666. then.call(
  667. x,
  668. // 传入then的成功回调
  669. function (y) {
  670. if (called) return;
  671. called = true;
  672. // 这里重新解析当前的桥梁promise,至于成功回调的返回值传空(这里目的是通过递归持续判断当前桥梁promise的状态)
  673. resolvePromise(bridgepromise, y, resolve, reject);
  674. },
  675. //传入then的失败回调
  676. function (error) {
  677. if (called) return;
  678. called = true;
  679. reject(error);
  680. }
  681. )
  682. }
  683. // 如果then不是一个函数,则以x为值改变promise状态并延长成功回调列表
  684. else {
  685. resolve(x);
  686. }
  687. }
  688. // 如果在取x.then值时抛出了异常,则以这个异常做为原因将promise拒绝。
  689. catch (e) {
  690. if (called) return;
  691. called = true;
  692. reject(e);
  693. }
  694. }
  695. // 如过x不是一个promise,则改变bridgePromise的状态改为fulfilled,并调用onFulfilledCallbacks回调数组中的方法,将该值传入
  696. else {
  697. resolve(x);
  698. }
  699. }
  700. // 注册回调函数
  701. MyPromise.prototype.then = function (onFulfilled, onRejected) {
  702. var self = this;
  703. // 搭建桥梁promise(即调用为then方法后重新返回一个新的promise对象)
  704. var bridgePromise;
  705. // 防止使用者不传成功或失败回调函数,所以成功失败回调都给了默认回调函数
  706. onFulfilled = typeof onFulfilled === "function" ? onFulfilled : function (value) { return value };
  707. onRejected = typeof onRejected === "function" ? onRejected : function (error) { throw error };
  708. // 如果当前的promise对象是完成状态
  709. // 返回一个新的桥梁promise
  710. if (self.status === "fulfilled") {
  711. return bridgePromise = new MyPromise(function (resolve, reject) {
  712. setTimeout(function () {
  713. try {
  714. // 获取成功回调函数的返回值
  715. var x = onFulfilled(self.value);
  716. // 解析桥梁promise函数
  717. resolvePromise(bridgePromise, x, resolve, reject);
  718. }
  719. catch (e) {
  720. reject(e);
  721. }
  722. }, 0);
  723. })
  724. }
  725. // 如果当前的promise对象是拒绝状态
  726. if (self.status === "rejected") {
  727. return bridgePromise = new MyPromise(function (resolve, reject) {
  728. setTimeout(function () {
  729. try {
  730. var x = onRejected(self.error);
  731. resolvePromise(bridgePromise, x, resolve, reject);
  732. }
  733. catch (e) {
  734. reject(e);
  735. }
  736. }, 0);
  737. });
  738. }
  739. // 如果当前的promise对象是听候状态,则在当前promise对象的成功回调列表和失败回调列表中注入
  740. if (self.status === "pending") {
  741. return bridgePromise = new MyPromise(function (resolve, reject) {
  742. // 注意回调列表是把整个回调函数和回调解析函数一起注入的!!!!!,所以在执行回调时除运行回调函数还要,解析桥梁promise的状态(有可能桥梁promise中也有promise),解析中改变当前promise的状态,若当前promise的状态为完成状态才继续执行下一个注册好的回调
  743. self.onFulfilledCallbacks.push(function (value) {
  744. try {
  745. var x = onFulfilled(value);
  746. resolvePromise(bridgePromise, x, resolve, reject);
  747. }
  748. catch (e) {
  749. reject(e);
  750. }
  751. });
  752. self.onRejectedCallbacks.push(function (error) {
  753. try {
  754. var x = onRejected(error);
  755. resolvePromise(bridgePromise, x, resolve, reject);
  756. }
  757. catch (e) {
  758. reject(e);
  759. }
  760. });
  761. });
  762. }
  763. }
  764. MyPromise.prototype.MyCatch = function (onRejected) {
  765. return this.then(null, onRejected);
  766. }
  767. MyPromise.all = function (promises) {
  768. return new MyPromise(function (resolve, reject) {
  769. var result = [];
  770. var count = 0;
  771. for (var i = 0; i < promises.length; i++) {
  772. // (function(i){
  773. // return promises[i].then(function(data) {
  774. // result[i] = data;
  775. // if (++count == promises.length) {
  776. // resolve(result);
  777. // }
  778. // }, function(error) {
  779. // reject(error);
  780. // });
  781. // })(i)
  782. function closeTemp(i) {
  783. return promises[i].then(function (data) {
  784. result[i] = data;
  785. if (++count == promises.length) {
  786. resolve(result);
  787. }
  788. }, function (error) {
  789. reject(error);
  790. });
  791. }
  792. closeTemp(i)
  793. }
  794. });
  795. }
  796. MyPromise.race = function (promises) {
  797. return new MyPromise(function (resolve, reject) {
  798. for (var i = 0; i < promises.length; i++) {
  799. promises[i].then(function (data) {
  800. resolve(data);
  801. }, function (error) {
  802. reject(error);
  803. });
  804. }
  805. });
  806. }
  807. MyPromise.resolve = function (value) {
  808. return new MyPromise(function (resolve) {
  809. resolve(value);
  810. });
  811. }
  812. MyPromise.reject = function (error) {
  813. return new MyPromise(function (resolve, reject) {
  814. reject(error);
  815. });
  816. }
  817. MyPromise.promisify = function (fn) {
  818. return function () {
  819. var args = Array.from(arguments);
  820. return new MyPromise(function (resolve, reject) {
  821. fn.apply(null, args.concat(function (err) {
  822. err ? reject(err) : resolve(arguments[1])
  823. }));
  824. })
  825. }
  826. }
  827. window.MyPromise = MyPromise;
  828. })(window);