分类 大前端 下的文章

web中的撤销重做技术


前言

撤销重做功能,我们经常在富文本编辑器中用到。正好最近接了一个思维导图组件,里面有用到这个功能,分享一波实现原理。

PM:"不就是按CTRL+Z CTRL+Y的事情吗,还需要开发?"


算法-计算小数组在大数组中的索引


前言

大数组:[1,2,3,4,5,6]

小数组:[4,5]

我们需要快速得到小数组在大数组中的索引位置,本例中结果是3

算法思路

1. 暴力,嵌套for循环

function match(arr1,arr2){
  var n = arr1.length
  var m = arr2.length
  f1:
  for(var i=0;i<n;i++){
    if(arr1[i]===arr2[0]){
      f2:
      for(var j=1;j<m;j++){
        if(arr1[i+j]!==arr2[j])continue f1;
      }
      return i
    }
  }
  return -1
}


字符串匹配算法介绍及js字符串indexOf源码探究


前言

之前学过的字符串匹配算法,一种是朴素算法,一种是KMP算法。

朴素算法即暴力,两层for循环,算法复杂度O(n*m)

function match(s1,s2){
  var n = s1.length
  var m = s2.length
  f1:
  for(var i=0;i<n;i++){
    if(s1[i]===s2[0]){
      f2:
      for(var j=1;j<m;j++){
        if(s1[i+j]!==s2[j])continue f1;
      }
      return i
    }
  }
  return -1
}

KMP 的实现比较巧妙,下文会提到,我们先来介绍一种新的算法 Rabin-Karp

最近在分析 adblockplus.js 源码的时候了解到的

此外还有 有限自动机算法(Finite Automation)、Boyer-Moore 算法、Simon 算法、Colussi 算法、Galil-Giancarlo 算法、Apostolico-Crochemore 算法、Horspool 算法、Shift-Or 算法和 Sunday 算法


前端监听资源加载错误


前言

页面上有很多资源元素,比如<img>,<iframe>等,我们需要知道其加载情况,根据加载成功与否进行下一步的处理。

常见的做法是给这些元素上设置onload,onerror方法。

比如:<img onerror="errFn()" onload="loadFn()">

支持onload的标签:<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

支持onerror的标签:<img>, <input type="image">, <object>, <script>, <style> , <audio>, <video>

注意IE9.0及以上才支持<audio>, <video>标签

此外几乎所有浏览器都支持onloadonerror,

这种做法的缺点:

  1. 每个要处理的元素都要绑定事件,html和js耦合太深,处理的脚本不能通用化、插件化,比如给另一个页面也能方便使用
  2. Windows 7 下的 Internet Explorer 11 不支持<audio>, <video>的 onerror 事件(我没试过。