js-Answers三

凝雪探世界 等级 387 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, ',');
    }

收藏
评论区

相关推荐

php为什么不支持定时器?
常见的定时器有两种:一种周期性定时执行,例如每天的凌晨三点出报表;另一种在指定时间后执行(一次),例如会员登录系统五分钟后发放每日登录奖励。两种情况对应shell中的cron和at命令,与JavaScript中的setInterval和setTimeout函数类似(严格来说setInterval是周期性执行,指定时间点执行需要自行处理)。 image
What the f*ck JavaScript?
What the fck JavaScript? 一个有趣和棘手的 JavaScript 示例列表。 JavaScript 是一种很好的语言。
面试问题总结(持续更新中。。。)
1.let const var 的区别 在JavaScript中,有三个关键字可用于声明一个变量,并且每个关键字都有其不同之处。分别var,let和const。一个简单粗暴的解释:使用const关键字声明的变量不能被重新赋值,let而且var可以。也可以这么说:const只可以声明一个常量(js中一旦被定义就无法再被修改的变量,称之为常量)。 eg:
JavaScript基础加ES6语法
JavaScript 一、什么是JavaScript 当下最流行的脚本语言,在世界上的所有浏览器中都有js的身影,是一门脚本语言,可以用于我们与web站点和web应用程序的交互,还可以用于后台服务器的编写,例如node.js 二、语法特点 基于对象和事件驱动的松散型,解释型语言 单线程异步 三、JavaScript作用 页面的交
JavaScript sourceMap 笔记
js source map 建议打开一个真实的项目的sourceMap对照食用由于前端项目在网络中访问导致为了减少体积进行一系列优化操作,最后导致生产环境出问题无法定位到项目代码中的指定位置,使得调试变成一件很难得事。由此产生了Source Map。 它是个什么东西简单说,sourceMap就是一个文件,里面储存着位置信息。仔细点说,这个
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
js-Answers三
编程能力 手写事件侦听器,并要求兼容浏览器 JavaScript var eventUtil { getEvent: function(event) { return event || window.event; }, getTarget: function(event) { retur
python刷题-杨辉三角形
问题描述杨辉三角形又称Pascal三角形,它的第i1行是(ab)i的展开式的系数。  它的一个重要性质是:三角形中的每个数字等于它两肩上的数字相加。  下面给出了杨辉三角形的前4行: 1 1 1 1 2 11 3 3 1  给出n,输出它的前n行。 输入格式输入包含一个数n。 输出格式输出杨辉三角形的前n行。每一行从这一行的第一个数开始依次
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
JavaScript 是什么?
前言 引用《JavaScript 高级程序设计第四版》中说的话 ——“从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到。它很简单,学会用只要几分钟;它又很复杂,掌握它要很多年。要真正学好用好 JavaScript,理解其本质、历史及局限性是非常重要的”。 面试官:JavaScript 是什么? 我:
Fetch API 教程
Fetch API 教程作者: 日期: fetch()是 XMLHttpRequest 的升级版,用于在 JavaScript 脚本里面发出 HTTP 请求。浏览器原生提供这个对象。本文详细介绍它的用法。一、基本用法fetch()的功能与 XMLHttpRequest 基本相同,但有三个主要的差异。(1)fetc
理解 Javascript 中的 Async / Await
在本文中,我们将探讨async/await,对于每个Javascript开发人员来说,是异步编程的首选工具。如果您不熟悉javascript,请不要担心,本文将帮助您async/await从头开始理解。 介绍async/await 是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为。 定义异步功能要定义一
人工智能数学基础1:三角函数的定义、公式及固定角三角函数值
一、三角函数的定义及名称在直角三角形中,当平面上的三点A、B、C的连线,AB、AC、BC,构成一个直角三角形,其中∠ACB为直角。对∠BAC(在此简称为θ)而言,对边(opposite)aBC、斜边(hypotenuse)cAB、邻边(adjacent)bAC,则三角函数定义如下:二、三角函数的变化趋势及图像  正弦值在 \[2kππ/2,2kπ+π/2
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask): setTimeOut 、 setInterval 、 setImmediate 、 I/O 、 各种callback、 UI渲染 、messageCh
了解什么是 TypeScript
内容纲要 了解什么是 TypeScript TypeScript 基本语法 TypeScript 介绍 TypeScript 是什么TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并