发表于

一、border-box模式

offsetWidth = width

clientWidth = width - border - scrollBar

注：

  • Width:盒子css属性定义的宽度
  • Border:盒子边框的大小
  • scrollBar:盒子滚动条的宽度，默认17px

发表于

一、问题描述

信息流页面是从上往下push渲染的。开始只有头部一些信息加载，此时页面高度有限，没有滚动条；然后，更多内容显示，滚动条出现，占据可用宽度，margin: 0 auto主体元素自然会做偏移——跳动产生。

二、利用calc和vw

1
2
3
4
5
6
7
8
.wrap-outer {
    margin-left: calc(100vw - 100%);
}

/*或者：*/
.wrap-outer {
    padding-left: calc(100vw - 100%);
}

  • 100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！

  • 100%是可用宽度，是不含滚动条的宽度。

三、只利用vw

1
2
3
4
.wrap-outer {
    width: 100vw;
    overflow-x: hidden;
}

发表于

  • 100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！

  • 100%是可用宽度，是不含滚动条的宽度。

发表于

由 ECMA-262 定义的 ECMAScript 与 Web 浏览器没有依赖关系。实际上，这门语言本身并不包含输 入和输出定义。ECMA-262 定义的只是这门语言的基础，而在此基础之上可以构建更完善的脚本语言。

ECMAScript规定了这 门语言的下列组成部分：

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 操作符
  • 对象

ECMAScript 就是对实现该标准规定的各个方面内容的语言的描述。JavaScript 实现了 ECMAScript， Adobe ActionScript 同样也实现了 ECMAScript。

我们常见的 Web 浏览器只是 ECMAScript 实现可能的宿主环境之一。宿主环境不仅提供基本的 ECMAScript 实现，同时也会提供该语言的扩展，以便语言与环境之间对接交互。而这些扩展——如 DOM，则利用 ECMAScript 的核心类型和语法提供更多更具体的功能，以便实现针对环境的操作。其他 宿主环境包括 Node（一种服务端 JavaScript 平台）和 Adobe Flash。

一个完整的 JavaScript 实现应该由下列三 个不同的部分组成

  • 核心（ECMAScript）
  • 文档对象模型（DOM）
  • 浏览器对象模型（BOM）

发表于

一、通过window获取iframe

window.frames是个伪数组，可以通过window.frames[index]或window.frames[name]来获取iframe


二、通过iframe获取window、document

如果想获取iframe里的window或者document，可以使用

  • iframe.contentWindow
  • iframe.contentDocument
注：跨域iframe没有操作权限


三、window获取顶级窗口、父窗口

  • 获取顶级窗口：window.top
  • 获取父级窗口：window.parent

发表于

一、节点类型

节点分为不同的类型：元素节点、属性节点和文本节点等。文档里几乎每一样东西都是一个节点，甚至连空格和换行符都会解释为节点。属性节点和文本节点总是被包含在元素节点的内部。

domTree

style属性只能返回拿些内嵌在HTML内容里面的样式信息。

发表于

一、边界清晰，御敌于国门之外

在模块的边界处，无论别人调用你还是你调用别人，一定要明确约定调用规范，一旦违反规范，立即启用错误处理流程（注意不是防卫流程），不要让错误在自己的模块内部流窜。


二、不给错误做二传手

如果发现错误，让错误到此为止，非必要不接力传递错误码。


三、当断则断，早死早超生

所有程序的正确运行都是依赖于一定的前提条件的，如果你发现外部模块不工作了，遵从系统的错误处理策略，该报异常就报异常，该立即退出就退出，重要的是搜集好现场的证据。一味的容错处理既不能解决问题还会掩盖问题，导致错误扩散，变形，拖延定位问题的时机。


发表于

一、执行环境(Execution Context)

每一个执行环境都关联了一个变量对象(variable Object）或者活动对象（activation object）。环境中定义的所有变量和函数都保存在这个对象中。每个函数运行时都会产生一个执行环境。活动对象是一种特殊的变量对象。


全局执行环境关联的是变量对象，函数执行环境关联的是活动对象。可以将执行环境看作是一个对象：

1
2
3
4
5
EC = {
    VO: { /*执行环境关联的变量对象（variable object）*/ }
    this: {},
    Scope: { /*作用域链*/ }
}


二、执行环境栈

当一个函数被调用时，函数执行环境就被压入一个环境栈中。而在函数执行之后，栈将该函数执行环境弹出，把控制权交给之前的执行环境。 举个例子： 

1
2
3
4
5
6
7
8
9
10
11
12
13
let scope = "global";

function fn1() {
    return scope;
}

function fn2() {
    return scope;
}

fn1();

fn2();

上面代码执行情况演示：

执行环境栈


三、作用域链

当某个函数第一次被调用时，就会创建一个执行环境(execution context)以及相应的作用域链，并把作用域链赋值给一个特殊的内部属性([scope])。然后使用this，arguments和其他命名参数的值来初始化函数的活动对象(activation object)。当前执行环境的变量对象始终在作用域链的第0位。

以上面的代码为例，当第一次调用fn1()时的作用域链如下图所示：

（因为fn2()还没有被调用，所以没有fn2的执行环境）

作用域链1

可以看到fn1活动对象里并没有scope变量，于是沿着作用域链(scope chain)向后寻找，结果在全局变量对象里找到了scope，所以就返回全局变量对象里的scope值。

阅读全文 »

发表于

一、window.onerror

1
window.onerror = function(message, source, lineno, colno, error) { ... }

函数参数：

  • message：错误信息（字符串）。可用于HTML onerror=””处理程序中的event。
  • source：发生错误的脚本URL（字符串）
  • lineno：发生错误的行号（数字）
  • colno：发生错误的列号（数字）
  • error：Error对象（对象）

若该函数返回true，则阻止执行默认事件处理函数。


二、window.addEventListener(‘error’)

1
window.addEventListener('error', function(event) { ... })

**ErrorEvent 类型的event包含有关事件和错误的所有信息。

1
2
3
4
5
6
7
8
9
10
11
window.onerror = function(msg, url, lineNo, columnNo, error) {
    var message = [
        'Message: ' + msg,
        'URL: ' + url,
        'Line: ' + lineNo,
        'Column: ' + columnNo,
        'Error object: ' + JSON.stringify(error)
    ].join(' - ');

    console.log(message);
};

前端代码异常监控曲线示例图

发表于

一、mix-blend-mode

描述了元素的内容应该如何与元素的直接父元素和元素的背景混合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
mix-blend-mode: normal;          //正常
mix-blend-mode: multiply;        //正片叠底
mix-blend-mode: screen;          //滤色
mix-blend-mode: overlay;         //叠加
mix-blend-mode: darken;          //变暗
mix-blend-mode: lighten;         //变亮
mix-blend-mode: color-dodge;     //颜色减淡
mix-blend-mode: color-burn;      //颜色加深
mix-blend-mode: hard-light;      //强光
mix-blend-mode: soft-light;      //柔光
mix-blend-mode: difference;      //差值
mix-blend-mode: exclusion;       //排除
mix-blend-mode: hue;             //色相
mix-blend-mode: saturation;      //饱和度
mix-blend-mode: color;           //颜色
mix-blend-mode: luminosity;      //亮度
mix-blend-mode: initial;         //初始
mix-blend-mode: inherit;         //继承
mix-blend-mode: unset;           //复原


阅读全文 »