没有jquery的时候,你看看这个
vjs
1 var br = (function() { 2 var ua = navigator.userAgent.toLowerCase(); 3 browser = { 4 iPhone: /iphone/.test(ua), 5 iPad: /ipad/.test(ua), 6 iPod: /ipod/.test(ua), 7 isLetv: /letv/.test(ua), 8 Android: /android/.test(ua), 9 AndroidPad: /android/.test(ua) && !/mobile/.test(ua), 10 atwin: /win/.test(ua), 11 opera: /opera/.test(ua), 12 msie: /msie/.test(ua), 13 firefox: /firefox/.test(ua), 14 safari: /safari/.test(ua) && !/chrome/.test(ua), 15 wph: /windows phone/.test(ua), 16 ps: /playstation/.test(ua), 17 uc: /ucbrowser|ucweb/.test(ua), 18 xiaomi: /xiaomi/.test(ua), 19 weixin: /MicroMessenger/i.test(ua), 20 isLetvTv: function() { 21 try { 22 return typeof LetvFish.getBrowserType == 'function'; 23 } catch (e) { 24 return false; 25 } 26 } 27 }; 28 29 var rwebkit = /(webkit)[ \/]([\w.]+)/, 30 ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/, 31 rmsie = /(msie) ([\w.]+)/, 32 rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/; 33 34 var match = rwebkit.exec(ua) || 35 ropera.exec(ua) || 36 rmsie.exec(ua) || 37 ua.indexOf("compatible") < 0 && rmozilla.exec(ua) || []; 38 39 browser.version = match[2] || "0"; 40 return browser; 41 })(); 42 var $js = (function() { 43 var undefined, filter = [].filter, 44 slice = [].slice, 45 class2type = {}, 46 classSelectorRE = /^\.([\w-]+)$/, 47 idSelectorRE = /^#([\w-]*)$/, 48 tagSelectorRE = /^[\w-]+$/; 49 50 var browser = br; 51 52 /** 53 * @desc vjs框架入口,实现DOM选择器 54 * 55 */ 56 vjs = function(selector, context) { 57 return new vjs.fn.init(selector, context); 58 } 59 60 vjs.isPC = false; 61 62 var qsa = function(element, selector) { 63 var found 64 try { 65 return (isDocument(element) && idSelectorRE.test(selector)) ? 66 ((found = element.getElementById(RegExp.$1)) ? [found] : []) : 67 (element.nodeType !== 1 && element.nodeType !== 9) ? [] : 68 slice.call( 69 classSelectorRE.test(selector) ? ( 70 element.getElementsByClassName ? element.getElementsByClassName(RegExp.$1) : qsc(element, RegExp.$1)) : 71 tagSelectorRE.test(selector) ? element.getElementsByTagName(selector) : 72 element.querySelectorAll(selector) 73 ) 74 } catch (e) { 75 return [] 76 } 77 } 78 79 var Z = function(me, dom, selector) { 80 dom = dom || [] 81 me.selector = selector || '' 82 me.length = dom.length 83 for (var i = 0, j = dom.length; i < j; i++) { 84 me[i] = dom[i]; 85 } 86 return me 87 } 88 89 var isZ = function(object) { 90 return object instanceof Z 91 } 92 93 var qsc = function(parent, id) { 94 if (parent.getElementsByTagName) { 95 var el = parent.getElementsByTagName('*'); 96 var pattern = new RegExp("(^|\\s)" + id + "(\\s|$)"); 97 for (var i = 0, j = el.length; i < j; i++) { 98 if (pattern.test(el[i].className)) { 99 return [el[i]]; 100 } 101 } 102 } 103 return []; 104 } 105 106 vjs.fn = { 107 init: function(selector, context) { 108 if (!selector) return Z(this); 109 else if (selector.nodeType) return Z(this, [selector]) 110 else { 111 var dom 112 if (isArray(selector)) dom = compact(selector) 113 else if (context !== undefined) return vjs(context).find(selector) 114 else dom = qsa(document, selector) 115 return Z(this, dom, selector); 116 } 117 }, 118 find: function(selector) { 119 var result, me = this; 120 if (typeof selector == 'object') 121 result = vjs(selector).filter(function() { 122 var node = this 123 return [].some.call(me, function(parent) { 124 return vjs.contains(parent, node) 125 }) 126 }) 127 else if (this.length == 1) result = vjs(qsa(this[0], selector)) 128 else result = this.map(function() { 129 return qsa(this, selector) 130 }) 131 return result 132 }, 133 each: function(callback) { 134 if ([].every) { 135 [].every.call(this, function(el, idx) { 136 return callback.call(el, idx, el) !== false 137 }); 138 } else { 139 for (var i = 0, len = this.length; i < len; i++) { 140 callback.call(this[i], i, this[i]); 141 } 142 } 143 144 return this 145 }, 146 hasClass: function(name) { 147 var me = this[0]; 148 return new RegExp('(\\s|^)' + name + '(\\s|$)').test(me.className); 149 }, 150 addClass: function(name) { 151 var classNameArray = (name || '').split(/\s+/); 152 return this.each(function() { 153 var currClassName = this.className; 154 for (var i = 0, len = classNameArray.length; i < len; i++) { 155 if (!vjs(this).hasClass(classNameArray[i])) { 156 currClassName += ' ' + classNameArray[i]; 157 } 158 } 159 this.className = currClassName; 160 }); 161 }, 162 removeClass: function(name) { 163 var classNameArray = (name || '').split(/\s+/); 164 return this.each(function() { 165 var currClassName = this.className; 166 for (var i = 0, len = classNameArray.length; i < len; i++) { 167 var reg = new RegExp('(\\s|^)' + classNameArray[i] + '(\\s|$)'); 168 currClassName = currClassName.replace(reg, ' '); 169 } 170 171 this.className = vjs.trim(currClassName); 172 }) 173 }, 174 on: function(name, callback, context) { 175 return this.each(function(i, element) { 176 var evtDelagate = function(e) { 177 e.target = e.target || e.srcElement; 178 callback.call(context, e) 179 } 180 if (!element['domid']) element['domid'] = String(Math.random()).slice(-4); 181 var guid = name + '_' + element['domid']; 182 callback[guid] = evtDelagate; 183 184 185 if (element.addEventListener) { 186 element.addEventListener(name, evtDelagate, false); 187 } else if (element.attachEvent) { 188 element.attachEvent('on' + name, evtDelagate); 189 } 190 191 }); 192 }, 193 off: function(name, callback, context) { 194 return this.each(function(i, element) { 195 var guid = name + '_' + element['domid'], 196 fn = callback[guid] || callback; 197 198 if (element.removeEventListener) { 199 element.removeEventListener(name, fn, false); 200 } else if (element.detachEvent) { 201 element.detachEvent('on' + name, fn); 202 } 203 }); 204 }, 205 getStyle: function(styleName) { 206 var node = this[0]; 207 if (browser.msie) { 208 switch (styleName) { 209 // 透明度 210 case "opacity": 211 return ((node.filters['DXImageTransform.Microsoft.Alpha'] || 212 node.filters['alpha'] || {}).opacity || 213 100); 214 // 浮动 215 case "float": 216 styleName = "styleFloat"; 217 } 218 return node.style[styleName] || 219 node.currentStyle ? node.currentStyle[styleName] : 0; 220 } else { 221 // 浮动 222 if (styleName == "float") { 223 styleName = "cssFloat"; 224 } 225 return node.style[styleName] || 226 (document.defaultView.getComputedStyle(node, "") ? document.defaultView.getComputedStyle(node, "")[styleName] : null) || 0; 227 } 228 }, 229 setStyle: function(styleName, styleValue) { 230 return this.each(function() { 231 var node = this; 232 if (browser.msie) { 233 switch (styleName) { 234 case "opacity": 235 node.style.filter = "alpha(opacity=" + (styleValue * 100) + ")"; 236 if (!node.currentStyle || !node.currentStyle.hasLayout) { 237 node.style.zoom = 1; 238 } 239 return; 240 case "float": 241 styleName = "styleFloat"; 242 } 243 } else { 244 if (styleName == "float") { 245 styleName = "cssFloat"; 246 } 247 } 248 249 node.style[styleName] = styleValue; 250 }); 251 }, 252 getAttr: function(name) { 253 var node = this[0]; 254 return node.getAttribute(name); 255 }, 256 setAttr: function(name, value) { 257 return this.each(function() { 258 var node = this; 259 node.setAttribute(name, value); 260 }); 261 }, 262 offset: function() { 263 var me = this[0]; 264 var body = document.body, 265 box = me.getBoundingClientRect(); 266 267 return { 268 top: box.top + (window.scrollY || body.parentNode.scrollTop || me.scrollTop) - (document.documentElement.clientTop || body.clientTop || 0), 269 left: box.left + (window.scrollX || body.parentNode.scrollLeft || me.scrollLeft) - (document.documentElement.clientLeft || body.clientLeft || 0) 270 }; 271 }, 272 width: function(num) { 273 if (typeof num == 'undefined') { 274 return this[0].offsetWidth; 275 } 276 this[0].style.width = parseFloat(num) + 'px'; 277 }, 278 height: function(num) { 279 if (typeof num == 'undefined') { 280 return this[0].offsetHeight; 281 } 282 this[0].style.height = parseFloat(num) + 'px'; 283 }, 284 map: function(fn) { 285 return vjs(vjs.map(this, function(el, i) { 286 return fn.call(el, i, el) 287 })) 288 } 289 } 290 291 vjs.fn.init.prototype = vjs.fn; 292 293 294 function type(obj) { 295 return obj == null ? String(obj) : 296 class2type[toString.call(obj)] || "object" 297 } 298 299 function isFunction(value) { 300 return type(value) == "function" 301 } 302 303 function isDocument(obj) { 304 return obj != null && (obj.nodeType == 9 || obj.nodeType == obj.DOCUMENT_NODE) 305 } 306 307 function isArray(value) { 308 return value instanceof Array 309 } 310 311 function likeArray(obj) { 312 return typeof obj.length == 'number' 313 } 314 315 function compact(array) { 316 return filter.call(array, function(item) { 317 return item != null 318 }) 319 } 320 321 function className(node, value) { 322 var klass = node.className, 323 svg = klass && klass.baseVal !== undefined 324 325 if (value === undefined) return svg ? klass.baseVal : klass 326 svg ? (klass.baseVal = value) : (node.className = value) 327 } 328 329 function funcArg(context, arg, idx, payload) { 330 return isFunction(arg) ? arg.call(context, idx, payload) : arg 331 } 332 333 334 vjs.contains = function(parent, node) { 335 return parent !== node && parent.contains(node) 336 } 337 338 vjs.map = function(elements, callback) { 339 var value, values = [], 340 i, key 341 if (likeArray(elements)) 342 for (i = 0; i < elements.length; i++) { 343 value = callback(elements[i], i) 344 if (value != null) values.push(value) 345 } else 346 for (key in elements) { 347 value = callback(elements[key], key) 348 if (value != null) values.push(value) 349 } 350 return values 351 } 352 353 vjs.each = function(elements, callback) { 354 var i, key 355 if (likeArray(elements)) { 356 for (i = 0; i < elements.length; i++) 357 if (callback.call(this, i, elements[i]) === false) return elements 358 } else { 359 for (key in elements) 360 if (callback.call(this, key, elements[key]) === false) return elements 361 } 362 363 return elements 364 } 365 366 vjs.trim = function(str) { 367 return str.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); 368 } 369 370 vjs.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) { 371 class2type["[object " + name + "]"] = name.toLowerCase() 372 }); 373 374 vjs.extend = function(props) { 375 var init, subObj; 376 377 props = props || {}; 378 379 init = props['init'] || props.init || this.prototype['init'] || this.prototype.init || function() {}; 380 381 subObj = function() { 382 init.apply(this, arguments); 383 }; 384 385 subObj.prototype = vjs.create(this.prototype); 386 subObj.prototype.constructor = subObj; 387 388 if (!props.__proto__) props.__proto__ = subObj.prototype; 389 390 subObj.extend = vjs.extend; 391 392 for (var name in props) { 393 if (props.hasOwnProperty(name)) { 394 subObj.prototype[name] = props[name]; 395 } 396 } 397 398 return subObj; 399 } 400 401 vjs.create = function(obj) { 402 function F() {} 403 F.prototype = obj; 404 return new F(); 405 }; 406 407 vjs.getWinWH = function() { 408 var pagerWidth = window.innerWidth, 409 pagerHeight = window.innerHeight; 410 411 if (typeof pagerWidth != 'number') { 412 if (document.compatMode == 'CSS1Compat') { 413 pagerWidth = document.documentElement.clientWidth; 414 pagerHeight = document.documentElement.clientHeight; 415 } else { 416 pagerWidth = document.body.clientWidth; 417 pagerHeight = document.body.clientHeight; 418 } 419 } 420 return { 421 width: pagerWidth, 422 height: pagerHeight 423 } 424 } 425 426 vjs.safari = browser.safari; 427 428 return vjs; 429 })(); 430 var emptyFn = function(){}; 431 var lib = { 432 createElement: function(tagName, attributes) { 433 var el = document.createElement(tagName), 434 attrname; 435 for (attrname in attributes) { 436 if (attributes.hasOwnProperty(attrname)) { 437 if (attrname.indexOf("-") !== -1) { 438 el.setAttribute(attrname, attributes[attrname]); 439 } else { 440 el[attrname] = attributes[attrname]; 441 } 442 } 443 } 444 return el; 445 }, 446 removeElem: function(node) { 447 if (node) { 448 if (node.remove) { 449 return node.remove(); 450 } else { 451 return node.parentNode && node.parentNode.removeChild && node.parentNode.removeChild(node); 452 } 453 } 454 }, 455 el: function(p, n) { 456 var elem = n ? $js(p).find(n)[0] : $js(p)[0]; 457 if (!elem) { 458 elem = { 459 "setAttribute": function() {}, 460 "style": {}, 461 "isnull": true 462 }; 463 } 464 465 return elem; 466 }, 467 //判断是否存在这个元素 468 existEl: function(el) { 469 if (typeof el === 'object') { 470 if (el.isnull) { 471 return false; 472 } else if (el instanceof Array) { 473 return el.length > 0; 474 } else { 475 return true; 476 } 477 } else if (typeof el === 'string') { 478 return arguments.callee(this.el(el)); 479 } 480 return false; 481 }, 482 now: Date.now || function() { 483 return +new Date(); 484 }, 485 merge: function(obj1, obj2, safe) { 486 if (!obj2) { 487 obj2 = {}; 488 }; 489 490 for (var attrname in obj2) { 491 if (obj2.hasOwnProperty(attrname) && (!safe || !obj1.hasOwnProperty(attrname))) { 492 obj1[attrname] = obj2[attrname]; 493 } 494 } 495 return obj1; 496 }, 497 wsLog: function(data) {}, 498 debug: function(msg, prefix, line) { 499 line = line || " "; 500 501 if (H5AD.config.DEBUG == true || adTools.getQuery("arkdebug")) { 502 if (typeof msg == 'object') { 503 if (prefix) { 504 console.log("%c" + prefix, "color:#f0d"); 505 this.wsLog(prefix); 506 } 507 this.wsLog(msg); 508 console.log(msg); 509 } else { 510 if (msg == undefined) { 511 console.log("数据空" + line) 512 return; 513 } 514 this.wsLog(msg); 515 console.log(msg + line); 516 } 517 } 518 }, 519 json: function(data) { 520 try { 521 if (typeof data === "string") { 522 if (JSON && JSON.parse) { 523 return JSON.parse(data); 524 } 525 return eval("(" + data + ")"); 526 } 527 //谨慎使用 528 return JSON.stringify(data); 529 } catch (ex) { 530 return 'error'; 531 } 532 }, 533 // 对象浅复制 534 easyClone: function(raw, target) { 535 for (var prop in target) { 536 if (target.hasOwnProperty(prop) && typeof target[prop] !== 'object') { 537 raw[prop] = target[prop]; 538 } 539 } 540 }, 541 getJSON: function(param) { 542 var url = param.url, 543 data = param.data, 544 success = param.success, 545 fail = param.fail, 546 callback = param.callback || 'callback', 547 timeout = param.timeout || 5000, 548 maxCount = param.maxCount || 2; 549 550 var jsonpCallback, 551 count = -1, 552 delayID = 0, 553 s, 554 self = this, 555 head = document.head || document.getElementsByTagName('head')[0] || document.documentElement; 556 557 var tmp = []; 558 559 if(data) for(var k in data) tmp.push(k + '=' + data[k]); 560 561 if(!/\?/.test(url)){ 562 url += '?' + tmp.join('&'); 563 }else{ 564 url += '&' + tmp.join('&'); 565 } 566 567 var addCb = function(){ 568 var time = self.now(), 569 jsonpCallback = 'vjs_' + time + Math.floor(Math.random()*100); 570 571 window[jsonpCallback] = function(response) { 572 destroy(); 573 574 success.call(this, response,{responseTime: self.now()-time, retryCount: count}); 575 576 window[jsonpCallback] = null; 577 }; 578 579 return jsonpCallback; 580 }; 581 582 var destroy = function(){ 583 if(window[jsonpCallback]) window[jsonpCallback] = emptyFn; 584 clearTimeout(delayID); 585 586 if (s && s.parentNode) { 587 head.removeChild(s); 588 589 s.onload = s.onreadystatechange = null; 590 591 s = undefined; 592 } 593 }; 594 595 var load = function() { 596 destroy(); 597 count++; 598 if (count >= maxCount){ 599 fail && fail.call(this); 600 return; 601 } 602 603 jsonpCallback = addCb(); 604 605 var jsonpUrl = url; 606 607 if(/(\=)\?(&|$)/i.test(jsonpUrl)){ 608 jsonpUrl = jsonpUrl.replace(/(\=)\?(&|$)/i,'$1' + jsonpCallback + '$2'); 609 }else{ 610 jsonpUrl += '&' + callback + '=' + jsonpCallback+'&j='+jsonpCallback; 611 } 612 613 if(param.log) param.log.pushLog('lib getJSON===' + jsonpUrl + '===' + jsonpCallback + '====' + count); 614 s = document.createElement('script'); 615 s.setAttribute('type', 'text/javascript'); 616 s.setAttribute('src', jsonpUrl); 617 618 head.insertBefore(s, head.firstChild); 619 620 delayID = setTimeout(load, timeout); 621 }; 622 623 load(); 624 625 return { 626 destroy : destroy 627 } 628 } 629 }; 630 /** 631 //以下对lib的使用 632 var url = "http://localhost:3000/reso"; 633 lib.getJSON({url:url,success:function(data){ 634 alert("nihao"); 635 }}); 636 //lib createElement的使用 637 var src = "http://i3.letvimg.com/lc06_iscms/201611/09/23/49/7c2767be74d145a4b9e6eb8f648e46a0.jpg"; 638 var img = lib.createElement('img', { 639 src: src 640 }); 641 $js(img).on('load', function() { 642 img = null; 643 }); 644 */ 645 // 646 lib.existEl("box");//这个函数