日常笔记-二

发表于   |   分类于   |  

JavaScript 和事件

1. 监听事件方法：

  • html内联属性
    避免使用，因为与html耦合

    1
    <button onclick="alert('你点击了这个按钮');">点击这个按钮</button>

  • dom属性绑定
    缺点：多次绑定是覆盖，非添加

    1
    2
    3
    element.onclick = function(event){
        alert('你点击了这个按钮');
    };

  • 事件监听函数

1
2
3
4
element.addEventListener(<event-name>, <callback>, <use-capture>);
element.removeEventListener("click",funcName,false)
//ie
element.attachEvent(<event-name>, <callback>);//event-name: on+name


use-capture设为false主要是因为ie不支持捕获阶段的事件响应。所以统一在冒泡阶段处理。

2. 事件代理

需要注意的时，事件触发的目标总是最底层的节点。比如你点击一段文字，你以为你的事件目标节点在 div 上，但实际上触发在p,span等子节点上。

事件代理优点：

  • 减少事件绑定，提升性能。
  • 动态变化的 DOM 结构，仍然可以监听。
1
2
3
4
5
6
7
8
9
//原生
element.addEventListener('click', function(event) {
   // 判断是否是 a 节点
   if ( event.target.tagName == 'A' ) {
       // a 的一些交互操作
   }
}, false);
//jquery
$(parent).on("click","a",function(e){...})

3. 停止冒泡

这个hin有用呀，特别是用于弹窗的交互上，如果希望点击弹窗以外的部分让弹窗消失，就需要给弹窗设置阻止冒泡

1
2
3
4
5
6
7
8
9
10
11
var overlay = document.querySelector('.overlay');
    
    overlay.addEventListener('click', function(event) {
      event.stopPropagation();
    });
    
    // Remove the overlay when a 'click'
    // is heard on the document (<html>) element
    document.addEventListener('click', function(event) {
      overlay.parentNode.removeChild(overlay);
    });

4. 其他注意事项

  • 事件回调函数的作用域问题，详见另一篇楼主的博文日常笔记的第2条this总结。

  • resize事件，相关的timing function: debounce throttle immediate

    总结来说，throttle和debounce都是为了限制在某段时间内大量连续的触发某一事件而进行的优化函数，两者区别在于：

    • 前者只是减少触发频率，比如每隔200ms,500ms触发一次，但还是要执行多次的。如mousemove

    • 而后者是某段时间只需要执行一次，把那些同样的操作认为是一次操作的抖动部分，去抖。等不再进行某项操作时（比如滚动）才会去执行它。eg。keydown->keyup。
      后者的一个栗子就是 百度首页上input框 监听用户的输入，不需要用户回车才发送请求，而是间隔比如500ms才会发送一次。需要体会的是，并不是每隔500ms就发送一次，因此这边用的是debounce。还有一个栗子就是列表滚动的时候，如果交互是等用户停下来再自动加载那么是debounce,如果是在滚动的过程中一直会自动加载下面的内容，那就是throttle
      具体的例子可以看 上一篇文章5.及时搜索。等有空，楼主再仔细看下下面的文章，然后po一个在线demo好了。。之前的项目中有用到，但是不太好放到codepen里面…

      • 忘了还有一个immediate..它其实就是debounce，只是把回调中要执行的操作提出来先进行了。debounce中我们可以看到，是先等啊等，等到delta 时间到了，我们才去执行 比如 fetchKeywordList(),但是immediate是先执行，然后再等啊等。有点类似于while(){}和do{} while()。
        to read :
    1. timing controls
    2. JavaScript 函数节流和函数去抖应用场景辨析
    3. JS魔法堂：函数节流（throttle）与函数去抖（debounce）

    4. Debouncing and Throttling Explained Through Examples

      楼主来更新了，打个小广告，之前说的throtte，最近也做了demo,具体是写cnode列表时想实现无限滚动而做的。具体请戳无限滚动

webpack 全局变量配置

![](http://p1.bpimg.com/567571/b00272bb9e65ec16.png)

因为项目中很多页面都需要发送ajax请求，不可能在每一页都import axios from ‘axios’。因此需要webpack全局配置一下。
补充一下之前开发react项目的几个知识点：

  • 如果只有有限几个import,可以用resolve.alias指定路径，加快搜索速度。
  • 如果想打包的话，但是公用库不想打包进去，可以用externals指定。同时在html里面引用一下外部cdn。
    其他的芝士看前端外刊，以及这个博客

函数声明

日期格式化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function format(time,fmt){
 let dateObj = new Date(parseInt(time));
 var o = {
       "M+": dateObj.getMonth() + 1, //月份
       "d+": dateObj.getDate(), //日
       "h+": dateObj.getHours(), //小时
       "m+": dateObj.getMinutes(), //分
       "s+": dateObj.getSeconds(), //秒
   };
   if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (dateObj.getFullYear() + "").substr(4 - RegExp.$1.length));
   for (let k in o)
   if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
   return fmt;
}