js-Answers三

凝雪探世界
• 阅读 1498

编程能力

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

    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, ',');
    }

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Stella981 Stella981
2年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
2年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
凝雪探世界
凝雪探世界
Lv1
女 · 环球巨人科技有限公司 · 前端开发
Talk is cheap. Show me the code.
文章
9
粉丝
2
获赞
9