温习js

  • scrollWidth,ClientWidth,OffsetWidth差异

    • scrollWidth 容器内容宽度 ->容器内部的内容最大能把容器撑多大就是它的scroll尺寸,如果没撑开则是容器的宽度
    • ClientWidth 容器的宽度 ->不包含border
    • OffsetWidth 容器样式宽高 ->包括border
    • window.innerWidth 浏览器窗口内显示区的宽度(只读)
  • screenX,pageX,clientX差异

    • 注意pageX,clientX都是以浏览器做参照物的,和父容器没关系。screenX是以屏幕做参照物的。
       function getX(e) {
    

// 距离浏览器左边的距离 包含滚动隐藏的距离
console.log(e.pageX);
// 距离屏幕左边的距离
console.log(e.screenX);
// 距离浏览器左边的距离 不包含滚动隐藏的距离
console.log(e.clientX);
}
```

  • 判断字符串是数字还是字符串

    var str = "abc";
    +abc //NaN
    str = "123"
    +str = 123;

  • 原型角度,vue的双向数据绑定原理

    • 60行代码实现双向绑定
  • 柯里化是什么,用处?

  • 自己实现一个柯里化处理函数

    const currying = function (fn) {
    const argsLen = fn.length;
    const args = [];
    const curryN = function () {
        [].push.apply(args,[].slice.call(arguments));
        if(args.length >= argsLen){
            return fn.apply(null,args.slice(0,argsLen));
        }else{
            return curryN;
        }
    };
    return curryN;
    

};
const g = currying(function (a,b,c) {
console.log(a,b,c);
});
g(2)(3)(4,5); //2,3,4
```
- 用处:
- 延迟计算

    ```javascript
    const g = currying(function (a,b,c) {
        return a+b+c;
    });
    console.log(g(2)(3)(5));//10
    ```
    
    - 参数复用

    ```javascript
var addEvent = currying(function(window,el,sType,fn,capture){
    if (window.addEventListener) {
        el.addEventListener(sType, function(e) {
            fn.call(el, e);
        }, (capture));
    } else if (window.attachEvent) {
        el.attachEvent("on" + sType, function(e) {
            fn.call(el, e);
        });
    }
});
    //    兼容模式的添加函数
        var addCompatibleEvent = addEvent(window);
        addCompatibleEvent(document.querySelector("#app"),"click",function (e) {
            console.log(e);
        },false);
    ```

柯里化(Currying),又称部分求值(Partial Evaluation),是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。

  • 数组方法
    • push,pop,shift,unshift都是作用在当前数组上的,concat是处理后返回一个新数组.

你可能感兴趣的:(温习js)