js-Answers三

凝雪探世界 等级 255 0 0

编程能力

  • 手写事件侦听器,并要求兼容浏览器

    var eventUtil = {
      getEvent: function(event) {
          return event || window.event;
      },
    
      getTarget: function(event) {
          return event.target || event.srcElement;
      },
    
      addListener: function(element, type, hander) {
          if (element.addEventListener) {
              element.addEventListener(type, hander, false);
          } else if (element.attachEvent) {
              element.attachEvent('on' + type, hander);
          } else {
              element['on' + type] = hander;
          }
      },
    
      removeListener: function(element, type, hander) {
          if (element.removeEventListener) {
              element.removeEventListener(type, hander, false);
          } else if (element.deattachEvent) {
              element.detachEvent(type, hander);
          } else {
              element['on' + type] = null;
          }
      },
    
      preventDefault: function(event) {
          if (event.preventDefault) {
              event.preventDefault();
          } else {
              event.returnValue = false;
          }
      },
    
      stopPropagation: function(event) {
          if (event.stopPropagation) {
              event.stopPropagation();
          } else {
              event.cancelBubble = true;
          }
      }
    };
    
      // 调用
      (function() {
        var btn = document.getElementById("btn");
        var link = document.getElementsByTagName("a")[0];
    
        eventUtil.addListener(btn, "click", function(event) {
            var event = eventUtil.getEvent(event);
            var target = eventUtil.getTarget(event);
            alert(event.type);
            alert(target);
            eventUtil.stopPropagation(event);
        });
    
        eventUtil.addListener(link, "click", function(event) {
            alert("prevent default event");
            var event = eventUtil.getEvent(event);
            eventUtil.preventDefault(event);
        });
    
        eventUtil.addListener(document.body, "click", function() {
            alert("click body");
        });
    })();
  • 手写事件模型

    var Event = (function () {
        var list = {}, bind, trigger, remove;
        bind = function (key, fn) {
            if (!list[key]) {
                list[key] = [];
            }
            list[key].push(fn);
        };
        trigger = function () {
            var key = Array.prototype.shift.call(arguments);
            var fns = list[key];
            if (!fns || fns.length === 0) {
                return false;
            }
            for (var i = 0, fn; fn = fns[i++];) {
                fn.apply(this, arguments);
            }
        };
        remove = function (key, fn) {
            var fns = list[key];
            if (!fns) {
                return false;
            }
            if (!fn) {
                fns & (fns.length = 0);
            } else {
                for (var i = fns.length - 1; i >= 0; i--) {
                    var _fn = fns[i];
                    if (_fn === fn) {
                        fns.splice(i, 1);
                    }
                }
            }
        };
        return {
            bind: bind,
            trigger: trigger,
            remove: remove
        }
    })();
    
    // 调用
    Event.bind('Hit', function(){ console.log('bind event'); }); // 绑定事件
    Event.trigger("Hit", function(){ console.log('trigger event'); }); // 触发事件
  • 手写事件代理,并要求兼容浏览器

    function delegateEvent(parentEl, selector, type, fn) {
        var handler = function(e){
              var e = e || window.event;
              var target = e.target || e.srcElement;
              if (matchSelector(target, selector)) {
                  if(fn) {
                      fn.call(target, e);
                  }
              }
        };
        if(parentEl.addEventListener){
            parentEl.addEventListener(type, handler);
        }else{
            parentEl.attachEvent("on" + type, handler);
        }
    }
    /**
     * support #id, tagName, .className
     */
    function matchSelector(ele, selector) {
        // if use id
        if (selector.charAt(0) === "#") {
            return ele.id === selector.slice(1);
        }
        // if use class
        if (selector.charAt(0) === ".") {
            return (" " + ele.className + " ").indexOf(" " + selector.slice(1) + " ") != -1;
        }
        // if use tagName
        return ele.tagName.toLowerCase() === selector.toLowerCase();
    }
    
    // 调用
    var box = document.getElementById("box");
    delegateEvent(box, "a", "click", function(){
        console.log(this.href);
    })
  • 手写事件触发器,并要求兼容浏览器

    var fireEvent = function(element, event){
        if (document.createEventObject){
            var mockEvent = document.createEventObject();
            return element.fireEvent('on' + event, mockEvent)
        }else{
            var mockEvent = document.createEvent('HTMLEvents');
            mockEvent.initEvent(event, true, true);
            return element.dispatchEvent(mockEvent);
        }
    }
  • 手写 Function.bind 函数

    if (!Function.prototype.bind) {
      Function.prototype.bind = function (oThis) {
        if (typeof this !== "function") {
          throw new TypeError("'this' is not function");
        }
    
        // bind's default arguments, array without first element
        // first part arguments for the function
        var aBindArgs = Array.prototype.slice.call(arguments, 1);
        var fToBind = this; // the function will be binding
        var fNOP = function () {};
        var fBound = function () {
              // target this will be binding
              var oThis = this instanceof fNOP ? this : oThis || this;
              // last part arguments for the function
              var aCallArgs = Array.prototype.slice.call(arguments);
              // complete arguments for the function
              var aFuncArgs = aBindArgs.concat(aCallArgs);
              return fToBind.apply(oThis, aFuncArgs);
            };
    
        // fBound extends fToBind
        fNOP.prototype = this.prototype;
        fBound.prototype = new fNOP();
    
        return fBound;
      };
    }
    
    // 调用
    var add = function(a, b, c){ return a + b + c;};
    var newAdd = add.bind(null, 1, 2);
    var result = newAdd(3);
  • 手写数组快速排序

    var quickSort = function(arr) {
        if (arr.length <= 1) { return arr; }
        var pivotIndex = Math.floor(arr.length / 2);
        var pivot = arr.splice(pivotIndex, 1)[0];
        var left = [];
        var right = [];
        for (var i = 0, len = arr.length; i < len; i++){
            if (arr[i] < pivot) {
              left.push(arr[i]);
            } else {
              right.push(arr[i]);
            }
        }
        return quickSort(left).concat([pivot], quickSort(right));
    };
    
    // 调用
    quickSort([9, 4, 2, 8, 1, 5, 3, 7]);
  • 手写数组冒泡排序

    var bubble = function(arr){
        var maxIndex = arr.length - 1, temp, flag;
        for (var i = maxIndex; i > 0; i--) {
            flag = true
            for (var j = 0; j < i; j++) {
                if (arr[j] > arr[j + 1]) {
                    temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                    flag = false;
                }
            }
            if(! flag){
                break;
            }
        }
        return arr;
    }
    // 调用
    var arr = bubble([13, 69, 28, 93, 55, 75, 34]);
  • 手写数组去重

    Array.prototype.unique = function() { return [...new Set(this)];};
    // 调用
    [1, 2, 3, 3, 2, 1].unique();
    
    function unique1(arr){
        var hash = {}, result = [];
        for(var i=0, len=arr.length; i<len; i++){
            if(! hash[arr[i]]){
              result.push(arr[i]);
              hash[arr[i]] = true;
            }
        }
        return result;
    }
    // 调用
    unique1([1, 2, 3, 3, 2, 1]);
    
    Array.prototype.unique2 = function(){
        this.sort();
        var result = [this[0]];
        var len = this.length;
        for(var i = 0; i < len; i++){
            if(this[i] !== result[result.length - 1]){
              result.push(this[i]);
            }
        }
        return result;
    }
    // 调用
    [1, 2, 3, 3, 2, 1].unique2();
    
    function unique3(arr){
        var result = [];
        for(var i=0; i<arr.length; i++){
            if(result.indexOf(arr[i]) == -1){
              result.push(arr[i]);
            }
        }
        return result;
    }
    
    // 调用
    unique3([1, 2, 3, 3, 2, 1]);
  • 将url的查询参数解析成字典对象

    function parseQuery(url) {
      url = url == null ? window.location.href : url;
      var search = url.substring(url.lastIndexOf("?") + 1);
      var hash = {};
      var reg = /([^?&=]+)=([^?&=]*)/g;
      search.replace(reg, function (match, $1, $2) {
          var name = decodeURIComponent($1);
          var val = decodeURIComponent($2);
          hash[name] = String(val);
          return match;
      });
      return hash;
    }
  • 封装函数节流函数

    var throttle = function(fn, delay, mustRunDelay){
      var timer = null;
      var t_start;
      return function(){
        var context = this, args = arguments, t_curr = +new Date();
        clearTimeout(timer);
        if(!t_start){
          t_start = t_curr;
        }
        if(t_curr - t_start >= mustRunDelay){
          fn.apply(context, args);
          t_start = t_curr;
        } else {
          timer = setTimeout(function(){
            fn.apply(context, args);
          }, delay);
        }
      };
    };
    
    // 调用(两次间隔50ms内连续触发不执行,但每累计100ms至少执行一次
    window.onresize = throttle(myFunc, 50, 100);
  • 用JS实现千位分隔符

    function test1(num){
      var str = (+ num) + '';
      var len = str.length;
      if(len <= 3) return str;
      num = '';
      while(len > 3){
          len -= 3;
          num = ',' + str.substr(len, 3) + num;
      }
      return str.substr(0, len) + num;
    }
    
    function test2(num){
      // ?= 正向匹配:匹配位置
      // ?! 正向不匹配:排除位置
      var str = (+num).toString();
      var reg = /(?=(?!\b)(\d{3})+$)/g;
      return str.replace(reg, ',');
    }

收藏
评论区
守株待兔
最新文章
vue-生命周期 2021-03-29 13:56
js-Answers二 2021-03-29 13:53
js-Answers一 2021-03-29 13:51
MySQL 基础知识 2021-02-02 22:36

导读