新航路师徒学院

 找回密码
 立即注册
搜索
查看: 508|回复: 0

【新航路】JS原生代码封装

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-8-31 12:33:56 | 显示全部楼层 |阅读模式
  1. /**
  2. * Created by liuliqing on 15/12/11.
  3. * 原生js
  4. * 虽然jquery 什么都可以实现,我们同样提供原生js 实现的方式
  5. */
  6. define(function (require, exports, module) {

  7.      var Unit = {};
  8.     /**
  9.      * 原生获取
  10.      * var s = Unit.Q('#box')[0];
  11.      * */
  12.     Unit.Q = function (arg){
  13.         this.aElements = [];
  14.         switch (typeof arg){
  15.             case 'string':
  16.                 switch(arg.charAt(0)){
  17.                     case '#':
  18.                         if(/\s/.test(arg)){
  19.                             var aArg = arg.split(' ');
  20.                             this.aElements = Unit.getEle(aArg[0],aArg[1]);
  21.                         }else{
  22.                             this.aElements.push(document.getElementById(arg.substring(1)));
  23.                         }
  24.                         break;
  25.                     default:
  26.                         this.aElements = Unit.getEle(document,arg);
  27.                         break
  28.                 }
  29.                 break;
  30.             case 'function':
  31.                 Unit.addEvent(window,'load',arg);
  32.                 break;
  33.         }
  34.         return this.aElements;
  35.     }

  36.     Unit.getEle = function (f,s){
  37.         var result = [];
  38.         var elements = null;
  39.         if(s.charAt(0) == '.'){
  40.             if(typeof f === 'string'){
  41.                 var par = document.getElementById(f.substring(1));
  42.                 if(!par){
  43.                     return result;
  44.                 }else{
  45.                     elements = par.getElementsByTagName('*');
  46.                 }
  47.             }else if(typeof f === 'object' && f!=null){
  48.                 elements = f.getElementsByTagName('*');
  49.             }else{
  50.                 elements = [];
  51.             }
  52.             for(var i=0;i<elements.length;i++){
  53.                 if(/\s/.test(elements[i].className)){
  54.                     var names = elements[i].className.split(' ');
  55.                     if(Unit.strComper(s.substring(1),names) === true){
  56.                         result.push(elements[i]);
  57.                     }
  58.                 }else{
  59.                     if(elements[i].className == s.substring(1)){
  60.                         result.push(elements[i]);
  61.                     }
  62.                 }
  63.             }
  64.         }else{
  65.             if(typeof f === 'string'){
  66.                 var par = document.getElementById(f.substring(1));
  67.                 if(!par){
  68.                     return result;
  69.                 }
  70.                 result = document.getElementById(f.substring(1)).getElementsByTagName(s);
  71.             }else if(typeof f === 'object'){
  72.                 result = f.getElementsByTagName(s);
  73.             }
  74.         }
  75.         return result;
  76.     };

  77.     Unit.strComper = function (a,b){
  78.         for(var i=0;i<b.length;i++){
  79.             if(a == b[i]){
  80.                 return true;
  81.                 break;
  82.             }
  83.         }
  84.     };

  85.     Unit.addEvent = function(obj,type,fn){
  86.         if(!obj){return null;}
  87.         if(obj.addEventListener){
  88.             obj.addEventListener(type,function (ev){
  89.                 var rtn=fn.call(obj,ev);
  90.                 if(rtn==false){
  91.                     ev.cancelBubble=true;
  92.                     // ev.stopPropagation ? ev.stopPropagation() : (ev.cancelBubble=true);
  93.                     ev.preventDefault();
  94.                 }
  95.             },false);
  96.         }else{
  97.             obj.attachEvent('on'+type,function (){
  98.                 var rtn=fn.call(obj,event);
  99.                 if(rtn==false){
  100.                     event.cancelBubble=true;
  101.                     return false;
  102.                 }
  103.             })
  104.         }
  105.     };
  106.     /**
  107.      * 包含 与jq 相似
  108.      * 分数组与元素
  109.      * */
  110.     Unit.contains  = function(root, el) {
  111.         // if (root.compareDocumentPosition)
  112.         //  return root === el || !!(root.compareDocumentPosition(el) & 16);
  113.         //  if (root.contains && el.nodeType === 1){
  114.         //      return root.contains(el) && root !== el;
  115.         // }
  116.         // while ((el = el.parentNode))
  117.         // if (el === root) return true;
  118.         // return false;
  119.         if(root.constructor==Array){
  120.             if(root.indexOf(el)>-1){
  121.                 return true;
  122.             }else {
  123.                 return false;
  124.             }
  125.         }else {
  126.             if (root.compareDocumentPosition)
  127.                 return root === el || !!(root.compareDocumentPosition(el) & 16);
  128.             if (root.contains && el.nodeType === 1){
  129.                 return root.contains(el) && root !== el;
  130.             }
  131.             while ((el = el.parentNode))
  132.                 if (el === root) return true;
  133.             return false;
  134.         }
  135.     };

  136.     Unit.css = function(obj,attr,value){
  137.         if(!obj)return null;
  138.         if(arguments.length===2){
  139.             if(typeof attr == 'string'){
  140.                 if(attr == 'float'){
  141.                     if(-[1,]){
  142.                         attr = 'cssFloat';
  143.                     }else {
  144.                         attr = 'styleFloat';
  145.                     }
  146.                 }
  147.                 if(obj.currentStyle){
  148.                     return obj.currentStyle[attr];
  149.                 }else {
  150.                     return getComputedStyle(obj,false)[attr];
  151.                 }
  152.             }else {
  153.                 for(var key in attr){
  154.                     obj.style[key] = attr[key];
  155.                     if(key=='float'){
  156.                         if(-[1,]){
  157.                             key = 'cssFloat';
  158.                             obj.style[key] = attr['float'];
  159.                         }else {
  160.                             key = 'styleFloat';
  161.                             obj.style[key] = attr['float'];
  162.                         }
  163.                     }
  164.                 }
  165.             }
  166.         }else if(arguments.length===3){
  167.             if(attr == 'float'){
  168.                 if(-[1,]){
  169.                     attr = 'cssFloat';
  170.                 }else {
  171.                     attr = 'styleFloat';
  172.                 }
  173.             }
  174.             obj.style[attr] = value;
  175.         }
  176.     }

  177.     Unit.attr = function(obj, attr, value){
  178.         if(!obj){return null;}
  179.         if(attr.toLowerCase()=='class'){
  180.             attr='className';
  181.         }
  182.         if(arguments.length==2){
  183.             if(obj.attributes[attr]){
  184.                 return obj.attributes[attr].nodeValue;
  185.             }else{
  186.                 return null;
  187.             }
  188.         }
  189.         else if(arguments.length==3){
  190.             obj.setAttribute(attr,value);
  191.         }
  192.     };

  193.     Unit.getPos = function(obj,bCurrent){
  194.         var pos = {x:0,y:0};
  195.         if(!obj){
  196.             return pos;
  197.         }
  198.         if(bCurrent){
  199.             pos.x = parseInt(obj.getBoundingClientRect().left);
  200.             pos.y = parseInt(obj.getBoundingClientRect().top);
  201.         }else{
  202.             pos.x = parseInt(obj.getBoundingClientRect().left + (document.documentElement.scrollLeft||document.body.scrollLeft),10);
  203.             pos.y = parseInt(obj.getBoundingClientRect().top + (document.documentElement.scrollTop||document.body.scrollTop));
  204.         }
  205.         return pos;
  206.     }

  207.     Unit.getParents = function(obj,fName){
  208.         if(!obj){return null;}
  209.         var par = obj.parentNode;
  210.         while(par){
  211.             if(Unit.haveName(par,fName)){
  212.                 return par;
  213.             }else{
  214.                 par = par.parentNode;
  215.             }
  216.         }
  217.         return null;
  218.     }

  219.     Unit.addClass = function(obj,name){
  220.         if(!obj || Unit.haveClass(obj,name)){
  221.             return null;
  222.         }
  223.         if(obj.className!==''){
  224.             obj.className += ' ';
  225.             obj.className += name;
  226.         }else{
  227.             obj.className = name;
  228.         }
  229.     }
  230.     Unit.removeClass = function(obj,name){
  231.         if(!obj){return null;}
  232.         var sClass = obj.className;
  233.         var aClass = sClass.split(' ');
  234.         for (var i=0,length=aClass.length;i<length;i++ ){
  235.             if(name == aClass[i]){
  236.                 aClass[i] = aClass[length-1];
  237.                 aClass.pop(aClass[length-1]);
  238.                 break;
  239.             }
  240.         }
  241.         obj.className = aClass.join(' ');
  242.     }
  243.     Unit.haveClass = function(obj,className){
  244.         if(!obj){return false}
  245.         var objClass = obj.className;
  246.         if(!objClass){
  247.             return false;
  248.         }
  249.         var allName = objClass.split(' ');
  250.         var res = false;
  251.         for(var i=0,len = allName.length;i<len;i++){
  252.             if(allName[i] == className){
  253.                 res = true;
  254.                 break;
  255.             }
  256.         }
  257.         return res;
  258.     }

  259.     Unit.haveName = function(obj,name){
  260.         if(!obj || !obj.tagName){return false;}
  261.         if(name.charAt(0) == '.' && Unit.haveClass(obj,name.substring(1))){
  262.             return true;
  263.         }else if(name == obj.tagName.toLowerCase()){
  264.             return true;
  265.         }
  266.         return false;
  267.     }

  268.     Unit.first = function(oParent){
  269.         if(!oParent)return null;
  270.         return oParent.firstElementChild || oParent.firstChild;
  271.     };

  272.     Unit.last = function(oParent){
  273.         if(!oParent)return null;
  274.         return oParent.lastElementChild || oParent.lastChild;
  275.     };

  276.     Unit.prev = function(obj){
  277.         if(!obj)return null;
  278.         return obj.previousElementSibling || obj.previousSibling;
  279.     };

  280.     Unit.next = function(obj){
  281.         if(!obj)return null;
  282.         return obj.nextElementSibling || obj.nextSibling;
  283.     };

  284.     Unit.inArray = function(match,arr,fromIndex){
  285.         var len = arr.length;
  286.         var fromIndex = fromIndex || 0;
  287.         fromIndex = fromIndex<0 ? len+fromIndex : fromIndex;
  288.         for(; fromIndex<len; fromIndex++){
  289.             if(arr[fromIndex] == match){
  290.                 return fromIndex;
  291.             }
  292.         }
  293.         return -1;
  294.     }

  295.     Unit.loadScript = function(url,callback){
  296.         var  script = document.createElement('script');
  297.         if(script.readyState){
  298.             script.onreadystatechange = function(){
  299.                 if(this.readyState == 'loaded' || this.readyState == 'complete'){
  300.                     script.onreadystatechange = null;
  301.                     if(callback){
  302.                         callback();
  303.                     }
  304.                 }
  305.             }
  306.         }else{
  307.             script.onload = function(){
  308.                 if(callback){
  309.                     callback();
  310.                 }
  311.             }
  312.         }
  313.         script.src=url;
  314.         document.getElementsByTagName('head')[0].appendChild(script);
  315.     }

  316.     Unit.getSib = function (obj,name){
  317.         var obj = obj;
  318.         var res = [];
  319.         while(obj.previousSibling){
  320.             obj = obj.previousSibling;
  321.             if(obj.nodeType == 1){
  322.                 if(name){
  323.                     if(Unit.haveName(obj,name)){
  324.                         res.push(obj);
  325.                     }
  326.                 }else{
  327.                     res.push(obj);
  328.                 }
  329.             }
  330.         }
  331.         res.reverse();
  332.         while(obj.nextSibling){
  333.             obj = obj.nextSibling;
  334.             if(obj.nodeType == 1){
  335.                 if(name){
  336.                     if(Unit.haveName(obj,name)){
  337.                         res.push(obj);
  338.                     }
  339.                 }else{
  340.                     res.push(obj);
  341.                 }
  342.             }
  343.         }
  344.         return res;
  345.     }

  346.     Unit.domfn = [];
  347.     Unit.isReady = false;
  348.     Unit.ready = function(fn){
  349.         Unit.initReady();
  350.         for(var i=0,length = arguments.length;i<length;i++){
  351.             if(Unit.isReady){
  352.                 arguments[i]();
  353.             }else{
  354.                 Unit.domfn.push(arguments[i]);
  355.             }
  356.         }
  357.     };
  358.     Unit.fireReady = function(){
  359.         if(Unit.isReady){return;};
  360.         Unit.isReady = true;
  361.         for(var i=0,length = Unit.domfn.length;i<length;i++){
  362.             var fn = Unit.domfn[i];
  363.             fn();
  364.         }
  365.         Unit.domfn.length = 0;
  366.     };
  367.     Unit.initReady = function(){
  368.         if(document.addEventListener){
  369.             document.addEventListener('DOMContentLoaded',function(){
  370.                 document.removeEventListener('DOMContentLoaded',arguments.callee,false);
  371.                 Unit.fireReady();
  372.             },false)
  373.         }else{
  374.             document.write('<script id="ie_ready" defer="defer" src="//:"></script>');
  375.             var script = document.getElementById('ie_ready');
  376.             script.onreadystatechange = function(){
  377.                 if(this.readyState == 'complete' || this.readyState == 'loaded'){
  378.                     setTimeout(function(){
  379.                         Unit.fireReady();
  380.                     },0)
  381.                     this.onreadystatechange = null;
  382.                     if(this.parentNode){
  383.                         this.parentNode.removeChild(this);
  384.                     }
  385.                 }
  386.             }
  387.         }
  388.     };

  389.     Unit.startMove = function(obj,oTarget,fn){
  390.         if(!obj){return null;}
  391.         clearInterval(obj.timer);obj.timer = null;
  392.         obj.timer = setInterval(function(){
  393.             var iCur = 0;
  394.             var attr = '';
  395.             var bStop = true;
  396.             for(attr in oTarget){
  397.                 if(attr == 'opacity'){
  398.                     //iCur = Math.round(_Q.css(obj,'opacity')*100);
  399.                     iCur = parseInt(parseFloat(Unit.css(obj,'opacity')).toFixed(2)*100);
  400.                 }else {
  401.                     iCur = parseInt(Unit.css(obj,attr))
  402.                 }
  403.                 if(isNaN(iCur)){iCur=0;}
  404.                 var iSpeed = (oTarget[attr]-iCur)/9;
  405.                 iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  406.                 iCur+=iSpeed;
  407.                 if(oTarget[attr]!=iCur){bStop=false;}
  408.                 if(attr == 'opacity'){
  409.                     obj.style.filter='alpha(opacity:'+iCur+')';
  410.                     obj.style.opacity=iCur/100;
  411.                 }else {
  412.                     obj.style[attr]=iCur+'px';
  413.                 }
  414.             }
  415.             if(bStop){
  416.                 clearInterval(obj.timer);
  417.                 obj.timer=null;
  418.                 if(fn){fn.call(obj);}
  419.             }
  420.         },30)
  421.     };

  422.     Unit.stopMove = function (obj){
  423.         if(!obj){return null;}
  424.         if(obj.timer){clearInterval(obj.timer);obj.timer = null;}
  425.     };


  426.     // 字符串转json
  427.     Unit.newJson = function(str){
  428.         var json = (new Function("return " + str))();
  429.         return json;
  430.     }
  431.     /**
  432.          ajax({
  433.             type:"post",
  434.             url:"ajax.php",
  435.             data:"username="+ousername.value+"&passwd="+passwd.value,
  436.             dataType:"json",
  437.             success:function(data){
  438.                 otips.innerHTML='返回结果<br />用户名:<b>'+data.username+'</b> 密码:<b>'+data.passwd+'</b>';
  439.             }
  440.         });
  441.      */

  442.     Unit.createAjax = function() {
  443.         var xhr = null;

  444.         //非IE系列浏览器
  445.         if(window.XMLHttpRequest){

  446.             xhr = new XMLHttpRequest();

  447.             //IE系列浏览器
  448.         }else if (window.ActiveXObject) {
  449.             try {
  450.                 xhr = new ActiveXObject("microsoft.xmlhttp");
  451.             } catch (e) {
  452.                 try {
  453.                     xhr = new ActiveXObject("msxml2.XMLHTTP");
  454.                 } catch (e) {
  455.                 }
  456.             }
  457.         }
  458.         return xhr;
  459.     };
  460.     Unit.ajax = function(cfg) {
  461.         //type参数,可选
  462.         var type = cfg.type;
  463.         //url参数,必填
  464.         var url = cfg.url;
  465.         //data参数可选,只有在post请求时需要
  466.         var data = cfg.data;
  467.         //datatype参数可选
  468.         var dataType = cfg.dataType;
  469.         //回调函数可选
  470.         var success = cfg.success;
  471.         if (type == null){
  472.             //type参数可选,默认为get
  473.             type = "get";
  474.         }
  475.         if (dataType == null){
  476.             //dataType参数可选,默认为text
  477.             dataType = "text";
  478.         }
  479.         // 创建ajax引擎对象
  480.         var xhr = Unit.createAjax();

  481.         xhr.onreadystatechange = function() {
  482.             if(xhr.readyState==1){
  483.                 console.log('...')
  484.             }else if(xhr.readyState == 4 && xhr.status == 200) {
  485.                 if(dataType.toUpperCase()=="TEXT") {
  486.                     if (success != null){
  487.                         //普通文本
  488.                         success(xhr.responseText);
  489.                     }

  490.                 }else if(dataType.toUpperCase()=="XML") {
  491.                     if (success != null){
  492.                         //接收xml文档
  493.                         success(xhr.responseXML);
  494.                     }

  495.                 }else if(dataType.toUpperCase()=="JSON") {
  496.                     if (success != null){
  497.                         //将json字符串转换为js对象
  498.                         // success(eval("("+xhr.responseText+")"));
  499.                         success(Unit.newJson(xhr.responseText))
  500.                     }
  501.                 }
  502.                 xhr=null;
  503.             }
  504.         };

  505.         //打开
  506.         xhr.open(type, url, true);

  507.         //发送
  508.         // if(type == "GET" || type == "get") {
  509.         if(type.toUpperCase() == "GET") {
  510.             xhr.send(null);

  511.             // }else if (type == "POST" || type == "post") {
  512.         }else if (type.toUpperCase() == "POST") {
  513.             xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  514.             xhr.send(data);
  515.         }
  516.     };

  517.     return Unit;
  518. })
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-5-23 09:34 , Processed in 0.135176 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表