亚洲必赢登录 > 亚洲必赢app > 姣好美好的加载,落成多行文本的省略号展现

原标题:姣好美好的加载,落成多行文本的省略号展现

浏览次数:113 时间:2019-10-05

Normalize-zh.css 出炉

Normalize-zh.css是根据对Normalize.css的源码分析后,经过学习与整理,将源代码中的英文注释文档翻译为中文版本,方便国内的开发者学习和使用,我深知此版本一定有很多不足,希望能得到大家的理解和支持,同样也很愿意和大家一起完善。

现已将源代码开源至Github

体系地址:

打赏援救自个儿写出更加多好小说,感谢!

图片 1

1 赞 3 收藏 评论

构建 logo 本身

图片 2

一开头大家先完毕 logo 本人, 实际不是最终版本的效率

父级成分 logo, 不一致颜色的正方都以它的子成分

JavaScript

<div class="logo"> <div class="white"></div> <div class="orange"></div> <div class="red"></div> </div>

1
2
3
4
5
<div class="logo">
  <div class="white"></div>
  <div class="orange"></div>
  <div class="red"></div>
</div>

我们用 less 来实现

JavaScript

.logo { position: relative; width: 100px; height: 100px; border: 4px solid black; box-sizing: border-box; background-color: white; & > div { position: absolute; } .red { top: 0; bottom: 0; left: 0; width: 27%; border-right: 4px solid black; background-color: #EA5664; } /* Similar code for div.orange and div.white */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.logo {
  position: relative;
  width: 100px;
  height: 100px;
  border: 4px solid black;
  box-sizing: border-box;
  background-color: white;
 
  & > div {
    position: absolute;
  }
 
  .red {
    top: 0;
    bottom: 0;
    left: 0;
    width: 27%;
    border-right: 4px solid black;
    background-color: #EA5664;
  }
  /* Similar code for div.orange and div.white */
}

logo 的效劳图如下

图片 3

集团你的代码

这段日子,恐怕你焦虑的想要使用那个工具来将您的代码分为八个支行,使其变得通透到底一些。“Hey,浏览器,倘若您鉴定分别Viewport 单位,就实践那一个,不然,实施别的的”。以为很科学,有系统。

CSS

@supports ( height: 100vh ) { // 帮忙 viewport height 的体裁 } @supports not ( height: 100vh ) { // 对于旧浏览器的替代样式 } // 我们期待是好的,但那是一段烂代码

1
2
3
4
5
6
7
@supports ( height: 100vh ) {
    // 支持 viewport height 的样式
}
@supports not ( height: 100vh ) {
    // 对于旧浏览器的替代样式
}
// 我们希望是好的,但这是一段烂代码

这段代码并不好,最少当前线总指挥部的来讲是如此的。开掘标题了吧?

主题素材固然,并非全部的浏览器都协助效率查询,不掌握 @supports 的浏览器会一直跳过两段代码,那只怕就太不佳了。

情趣正是,除非浏览器百分百帮助功能查询,不然大家就无语使用了吗?当然不是,大家一同能够行使效率查询,并且应当利用效果查询,只要不像上边那样写代码就行。

那正是说,怎么办才对吧?其实与行使媒体询问类似,我们在浏览器完全援救媒体询问在此之前就最初使用了不是吗?事实上,效能查询利用起来比媒体询问更简短,只要脑子放聪贝拉米点就行了。

你想要令你的代码知道浏览器是或不是扶助成效查询或然正在测量检验的某些功用,小编来告诉你如何是好。

自然,在以后,浏览器 百分之百 协理效能查询的时候,大家得以大大方方施用 @supports not 来组织我们的代码。

1. 平地风波循环机制详解与推行应用

JavaScript 是出色的单线程单并发语言,即意味着在同期片内其只好试行单个任务照旧部分代码片。换言之,大家得以感到有个别同域浏览器上下中 JavaScript 主线程具备贰个函数调用栈以及一个职分队列(仿效 whatwg 规范);主线程会依次实施代码,当境遇函数时,会先将函数入栈,函数运营完成后再将该函数出栈,直到全部代码推行达成。当函数调用栈为空时,运转时即会依赖事件循环(Event Loop)机制来从义务队列中领到出待施行的回调并实践,实施的进程同样会进展函数帧的入栈出栈操作。每一个线程有谈得来的风云循环,所以各个Web Worker有协和的,所以它技巧够独自实行。然则,全数同属二个 origin 的窗体都分享叁个事变循环,所以它们能够一齐沟通。

Event Loop(事件循环)并不是 JavaScript 中独有的,其普遍应用于各类领域的异步编制程序实现中;所谓的 伊夫nt Loop 便是一两种回调函数的集纳,在实行某些异步函数时,会将其回调压入队列中,JavaScript 引擎会在异步代码实践完毕后开头拍卖其关联的回调。

图片 4

在 Web 开垦中,我们平日会须求管理互连网诉求等相对非常的慢的操作,倘使将那个操作全体以协同阻塞格局运维无疑会大大减弱客户分界面包车型大巴感受。另一方面,大家点击某个开关之后的响应事件或许会变成分界面重渲染,若是因为响应事件的试行而围堵了界面包车型客车渲染,一样会潜濡默化全部质量。实际开采中我们会选拔异步回调来处理那些操作,这种调用者与响应时期的解耦保险了 JavaScript 能够在等候异步操作落成在此以前还能够实行另外的代码。伊夫nt Loop 正是承担施行队列中的回调并且将其压入到函数调用栈中,其基本的代码逻辑如下所示:

JavaScript

while (queue.waitForMessage()) { queue.processNextMessage(); }

1
2
3
while (queue.waitForMessage()) {
  queue.processNextMessage();
}

完整的浏览器中 JavaScript 事件循环机制图解如下:图片 5

在 Web 浏览器中,任何时刻都有不小希望会有事件被触发,而唯有那么些设置了回调的平地风波会将其辅车相依的职务压入到任务队列中。回调函数被调用时即会在函数调用栈中创制开始帧,而停止整个函数调用栈清空此前任何爆发的职责都会被压入到职责队列中延后实行;顺序的联手函数调用则会创制新的栈帧。计算来讲,浏览器中的事件循环机制演说如下:

  • 浏览器内核会在其余线程中进行异步操作,当操作完结后,将操作结果以及先行定义的回调函数放入JavaScript 主线程的天职队列中。
  • JavaScript 主线程会在推行栈清空后,读取职务队列,读取到职务队列中的函数后,将该函数入栈,向来运维直到施行栈清空,再度去读取任务队列,不断循环。
  • 当主线程阻塞时,职责队列还是是能够被推入任务的。那也正是为何当页面包车型大巴JavaScript 进度阻塞时,大家接触的点击等事件,会在经过恢复生机后所有人家推行。

总结

透过四个章节对Normalize.css的源码进行了学习,清晰的了解了它的工作原理,作为传统CSS Reset替代者,它当之无愧,为大家提供一套很完整的跨浏览器解决方案。

可是,你是或不是会有和自己一样的急需,举个例子开辟四个小站,可能三个PC端的系统时,只怕只要求有个别大概的底蕴模块,举例本人只想要简单的体裁重新设置,统一各浏览器的效应就好,并无需HTML5以及CSS3的局地难点修复。

那正是说下一章,我们来介绍,假如制订属于本人的 CSS基础代码库?

1 赞 1 收藏 评论

图片 6

4th 削窄prop元素

现阶段,最左侧包车型地铁prop成分的作用在于让realend成分在文件溢出时处在其正下方,在前几节的示范代码中为了直观的示范,设置prop成分的肥瘦为100px,那么将来为了越来越好的模拟实际的作用,大家缩短逐步压缩prop成分的增长幅度。

JavaScript

<div class="wrap"> <div class="prop">1.prop<br>float:right</div> <div class="main">2.main<br>float:left<br>Fairly short text</div> <div class="realend"> 3.realend<br>position:relative</div> </div> .prop { float: left; width: 5px; height: 200px; background: #F0F; } .main { float: right; width: 300px; margin-left: -5px; background: #AFF; } .realend { float: right; position: relative; top: -50px; left: 300px; width: 100px; margin-left: -100px; padding-right: 5px; background: #FAA; font-size: 14px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="wrap">
  <div class="prop">1.prop<br>float:right</div>
  <div class="main">2.main<br>float:left<br>Fairly short text</div>
  <div class="realend">
  3.realend<br>position:relative</div>
</div>
 
 
.prop {
  float: left;
  width: 5px;
  height: 200px;
  background: #F0F; }
.main {
    float: right;
    width: 300px;
    margin-left: -5px;
    background: #AFF; }
.realend {
    float: right;
        position: relative;
    top: -50px;
        left: 300px;
    width: 100px;
        margin-left: -100px;
    padding-right: 5px;
    background: #FAA; font-size: 14px; }

针对prop成分,收缩宽度为5px,别的属性不改变;

针对main成分,设置margin-left:5px,让main成分左移5px,那样main成分在步长上就全盘占满了父成分;

对于realend成分,top、left和width的值不改变。而设置margin-left: -100pxpadding-right: 5px则是为了让realend成分的盒模型的结尾上涨的幅度总计为5px。

BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth;

1
BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth;

切实可参照我事先的稿子负margin的规律以及选择一文。

鉴于CSS标准规定padding的值不可感觉负数,因而唯有设置margind-left为负值,且等于其上涨的幅度。这样做的最后目标就是确认保证realend成分处在prop成分的江湖,保障在文书溢出的事态下一定正确性:
图片 7

正方动画

最后,大家一同来安装方块的动画

笔者们最大的挑战是爱莫能助连接 keyframes。因为,大家最后想要的动画中种种小方块都有早晚的顺序, 为此, 大家作如下改换

  • 0 to 25%:上边框和左臂框显现
  • 25 to 50%:下面框和左边框显现
  • 50 to 65%:冰雪蓝小方块显现
  • 65 to 80%:士林蓝小方块显现
  • 75 to 90%:宝石蓝小方块显现

革命小方框 keyframe 如下

@keyframes red { 0%, 50% { width: 0; opacity: 0; } 50.01% { opacity: 1; } 65%, 100% { width: 27%; opacity: 1; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@keyframes red {
  0%,
  50% {
    width: 0;
    opacity: 0;
  }
  50.01% {
    opacity: 1;
  }
  65%,
  100% {
    width: 27%;
    opacity: 1;
  }
}

重复地点的代码,就可做到大家整整动画, 是还是不是很周详

在 CSS 中动用效果查询

2016/09/04 · CSS · 效果查询

原作出处: Jen Simmons   译文出处:Erichain_Zain   

在 CSS 里,有一个您也许没有听过的工具,然而它早就面世一段时间了,而且特别庞大。可能,它会形成CSS 中你最欢娱的事物之一。

那正是说,是哪些吧?便是 @support,也正是功能查询。

通过 @support,你能够在 CSS 中运用一小段的测量检验来查看浏览器是还是不是援救叁个特定的 CSS 功效(那个职能能够是 CSS 的某种属性只怕有个别属性的某部值),然后,依照测量试验的结果来支配是或不是要利用某段样式。譬喻:

CSS

@supports ( display: grid ) { // 如若浏览器扶助Grid,这几个中的代码才会试行 }

1
2
3
@supports ( display: grid ) {
    // 如果浏览器支持 Grid,这里面的代码才会执行
}

要是浏览器能够精晓 display: grid,那么,大括号里的代码都会被使用,不然,那些样式就能够被跳过。

现行反革命,对于成效查询是什么样,你可能还也可以有少数猜疑。那并非透过某种额外的印证来分析浏览器是不是早就卓越的达成了有些CSS 属性。要是你要求查阅额外的辨证,能够查看 Test the Web Forward。

效果查询让浏览器自个儿就可见彰显出是还是不是帮助某些 CSS 属性或然 CSS 属性值。然后通过这些结果来判别是还是不是要使用某段 CSS。假使三个浏览器未有正确的(或许完全的)完毕三个 CSS 属性,那么,@supports 就平素不什么样用了。它并非叁个能够让浏览器的 bug 消失的魔杖。

但是,作者一度意识 @supports 是那么出乎意料的有援救。比起在此在此以前未有那性格格的时候,@supports 能够让自家一再的运用新的 CSS 功效。

经年累月的话,开采者们都在使用 Modernizr 来完成效果与利益查询,然而 Modernizr 必要 JavaScript。固然这一部分 JavaScript 不大,不过,CSS 结构中加多了 Modernizr 的话,在 CSS 被利用在此以前,就需求下载 JavaScript 然后等待试行到位。比起使用 CSS,出席了 JavaScript 总是会更加慢。何况,假诺 JavaScript 实施停业了啊?别的,Modernizr 还需求一层额外复杂的、非常多项目都力不可能支通晓的东西。比较之下,效能查询越来越快,功用更有力,使用起来更简便。

您大概注意到了,@supports 的写法和媒体询问很类似,作者觉着她们唯恐便是堂兄弟的涉及。

CSS

@supports ( display: grid ) { main { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }

1
2
3
4
5
6
@supports ( display: grid ) {
    main {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

大部时候,你其实不必要那样的测验。比方,你能够间接那样写:

CSS

aside { border: 1px solid black; border-radius: 1em; }

1
2
3
4
aside {
    border: 1px solid black;
    border-radius: 1em;
}

万一浏览器能够理解 border-radius,那么,在对应的容器上就能利用圆角样式。要是它无法驾驭那本性情,那么,就能够一贯跳过并继续实施下边的言辞。容器的边缘也就保持直角了。完全没须求选取功效查询或然测量检验,CSS 正是如此运营的。那是属于 CSS 中深根固柢设计,渐进巩固的贰个主干的条件。浏览器会直接跳过她们没辙分析的口舌,不会抛出任何错误。

图片 8

大好些个浏览器都会应用 border-radius: 1em;,然后呈现出右侧的效率。可是,在 IE6,7,8 上你却无法观察圆角,你看看的将是左边手的功力。能够看看那几个事例:A Rounded Corner Box。

对此这一个例子,无要求使用功能查询。

那么,曾几何时才要求运用 @supports 呢?功效查询是将 CSS 评释绑定在联合的二个工具,以便于这么些 CSS 法规能够在某种条件下以三个组成的法子运维。当你要求混合使用 CSS 的新法规和旧准绳的时候,何况,仅当 CSS 新职能被协理的时候,就足以应用功效查询了。

翻译注:以下例子中的 initial-letter 属性今后在具备当代浏览器中都不受援助,所以,以下例子中的代码大概都以不行的代码。假设下文中有涉及此属性在某某浏览器中接受帮衬助的话,请忽略。须求明白 initial-letter 详细的认证,可以参见initial-letter | MDN。

来看一个有关选取 initial-letter 的例子。这么些个性告诉浏览器要将特指的丰富成分变得越来越大,仿佛叁个段首大字同样。在此处,大家要做的正是让段落的率先个假名的深浅为四行文字那么大。同一时间,我们再对它举行加粗,在它的左侧设置有些margin,还给它设置叁个高亮的橘色。OK,特别不错了。

CSS

p::first-letter { margin-right: 0.5em; color: #FE742F; font-weight: bold; -webkit-initial-letter: 4; initial-letter: 4; }

1
2
3
4
5
6
7
p::first-letter {
    margin-right: 0.5em;
    color: #FE742F;
    font-weight: bold;
    -webkit-initial-letter: 4;
    initial-letter: 4;
}

图片 9

那是在 Safari 上的效果

让大家看看在其余浏览器上的效果与利益。

图片 10

好吧,简直没办法接受。除了选取 initial-letter 来达到大家想要的作用之外,我们并不想要改造字体的 colormargin,和font-weight。所以,大家要求二个措施来测量试验浏览器是或不是扶助 initial-letter 那几个性子,然后在浏览器扶助那特天性的时候再利用相关的体制。所以,使用效果查询:

CSS

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) { p::first-letter { -webkit-initial-letter: 4; initial-letter: 4; color: #FE742F; font-weight: bold; margin-right: 0.5em; } }

1
2
3
4
5
6
7
8
9
@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
    p::first-letter {
        -webkit-initial-letter: 4;
        initial-letter: 4;
        color: #FE742F;
        font-weight: bold;
        margin-right: 0.5em;
    }
}

瞩目,测量检验的时候供给举办完全的测验,CSS 属性和值都得写上。一最初自己也比较嫌疑,为啥非得测验 initial-letter: 4呢?4 那几个值很关键呢?假如本人写成 17 呢?莫非是急需相称本身将在在运用的 CSS 中的样式吗?

由来是如此的:@supports 在测量试验的时候,供给提供属性和值,因为有的时候测验的是性质,临时候测验的是值。对于 initial-letter ,你输入多少值并不主要。然则,固然是 @suports ( dislay: grid ) 就不等同了,全体浏览器都识别 display,不过,实际不是持有浏览器都识别 display: grid

归来大家的事例,当前的 initial-letter 只在 Safari 9 上受协理,况且须要加前缀。所以,笔者加了前缀,同偶然候,保持着不加前缀的准绳,並且,小编还写了测验来测量检验别的的属性。没有错,在效果与利益查询中,还足以应用 and, or, not 声明。

下边是新的结果。理解 initial-letter 的浏览器会显示三个了不起加粗高亮的段首大字。别的浏览器的行事仿佛这些段首大字不设有同样。当然,纵然越来越多的浏览器支持了那性格情,那么,他们的一言一行也将会是有二个段首大字。

图片 11

3. MacroTask(Task) 与 MicroTask(Job)

在面试中大家平日会遭遇如下的代码题,其重要正是考校 JavaScript 分歧职务的进行前后相继顺序:

JavaScript

姣好美好的加载,落成多行文本的省略号展现。// 测量检验代码 console.log('main1'); // 该函数仅在 Node.js 景况下得以接纳process.nextTick(function() { console.log('process.nextTick1'); }); setTimeout(function() { console.log('setTimeout'); process.nextTick(function() { console.log('process.nextTick2'); }); }, 0); new Promise(function(resolve, reject) { console.log('promise'); resolve(); }).then(function() { console.log('promise then'); }); console.log('main2'); // 施行结果 main1 promise main2 process.nextTick1 promise then setTimeout process.nextTick2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 测试代码
console.log('main1');
 
// 该函数仅在 Node.js 环境下可以使用
process.nextTick(function() {
    console.log('process.nextTick1');
});
 
setTimeout(function() {
    console.log('setTimeout');
    process.nextTick(function() {
        console.log('process.nextTick2');
    });
}, 0);
 
new Promise(function(resolve, reject) {
    console.log('promise');
    resolve();
}).then(function() {
    console.log('promise then');
});
 
console.log('main2');
 
// 执行结果
main1
promise
main2
process.nextTick1
promise then
setTimeout
process.nextTick2

咱俩在前文中曾经介绍过 JavaScript 的主线程在遇到异步调用时,那一个异步调用会立刻回到有些值,进而让主线程不会在此处阻塞。而真的的异步操作会由浏览器施行,主线程则会在清空当前调用栈后,根据先入先出的依次读取义务队列之中的任务。而 JavaScript 中的职分又分为 MacroTask 与 MicroTask 三种,在 ES二零一五 中 MacroTask 即指 Task,而 MicroTask 则是顶替 Job。典型的 MacroTask 包涵了 setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering 等,MicroTask 富含了 process.nextTick, Promises, Object.observe, MutationObserver 等。 二者的关系得以图示如下:图片 12

参考 whatwg 规范 中的描述:贰个平地风波循环(伊芙nt Loop)会有叁个或五个职责队列(Task Queue,又称 Task Source),这里的 Task Queue 便是 MacroTask Queue,而 伊芙nt Loop 唯有三个 MicroTask Queue。每一个 Task Queue 都保险自身依照回调入队的相继依次试行,所以浏览器能够从当中到JS/DOM,保险动作按序发生。而在 Task 的施行之间则会清空已有的 MicroTask 队列,在 MacroTask 只怕MicroTask 中生出的 MicroTask 同样会被压入到 MicroTask 队列中并实践。参谋如下代码:

JavaScript

function foo() { console.log("Start of queue"); bar(); setTimeout(function() { console.log("Middle of queue"); }, 0); Promise.resolve().then(function() { console.log("Promise resolved"); Promise.resolve().then(function() { console.log("Promise resolved again"); }); }); console.log("End of queue"); } function bar() { setTimeout(function() { console.log("Start of next queue"); }, 0); setTimeout(function() { console.log("End of next queue"); }, 0); } foo(); // 输出 Start of queue End of queue Promise resolved Promise resolved again Start of next queue End of next queue Middle of queue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function foo() {
  console.log("Start of queue");
  bar();
  setTimeout(function() {
    console.log("Middle of queue");
  }, 0);
  Promise.resolve().then(function() {
    console.log("Promise resolved");
    Promise.resolve().then(function() {
      console.log("Promise resolved again");
    });
  });
  console.log("End of queue");
}
 
function bar() {
  setTimeout(function() {
    console.log("Start of next queue");
  }, 0);
  setTimeout(function() {
    console.log("End of next queue");
  }, 0);
}
 
foo();
 
// 输出
Start of queue
End of queue
Promise resolved
Promise resolved again
Start of next queue
End of next queue
Middle of queue

上述代码中第1个 TaskQueue 即为 foo(),foo() 又调用了 bar() 营造了新的 TaskQueue,bar() 调用之后 foo() 又发出了 MicroTask 并被压入了独一的 MicroTask 队列。大家最后再一齐下 JavaScript MacroTask 与 MicroTask 的奉行顺序,当实行栈(call stack)为空的时候,开端逐个实践:

《这一段在本身笔记里也放了遥遥在望,不能够分明是还是不是拷贝的。。。固然有哪位发掘请立时告诉。。。(*ฅ́˘ฅ̀*)♡》

  1. 把最初的职分(task A)归入职务队列
  2. 就算 task A 为null (那职务队列就是空),直接跳到第6步
  3. 将 currently running task 设置为 task A
  4. 实践 task A (也便是实行回调函数)
  5. 将 currently running task 设置为 null 并移出 task A
  6. 执行 microtask 队列
  • a: 在 microtask 中选出最初的职责 task X
  • b: 即使 task X 为null (那 microtask 队列就是空),直接跳到 g
  • c: 将 currently running task 设置为 task X
  • d: 执行 task X
  • e: 将 currently running task 设置为 null 并移出 task X
  • f: 在 microtask 中选出最初的天职 , 跳到 b
  • g: 结束 microtask 队列
  1. 跳到第一步

  2. 浅析 Vue.js 中 nextTick 的实现


在 Vue.js 中,其会异步履行 DOM 更新;当阅览到数量变化时,Vue 将开启八个队列,并缓冲在同一事件循环中爆发的有所数据变动。假设同一个watcher 被一再触及,只会三次推入到行列中。这种在缓冲时去除重复数据对于制止不要求的计量和 DOM 操作上十二分首要。然后,在下二个的风浪循环“tick”中,Vue 刷新队列并施行实际(已去重的)职业。Vue 在在那之中尝试对异步队列使用原生的 Promise.then 和 MutationObserver,假诺实行情形不扶助,会使用 setTimeout(fn, 0) 替代。

《因为自个儿失误,原本这里内容拷贝了 https://www.zhihu.com/question/55364497 那个答复,形成了侵害权益,深表歉意,已经删除,后续笔者会在 github 链接上重写本段》

而当我们希望在数据更新之后实践有些 DOM 操作,就须要利用 nextTick 函数来增添回调:

JavaScript

// HTML <div id="example">{{message}}</div> // JS var vm = new Vue({ el: '#example', data: { message: '123' } }) vm.message = 'new message' // 改造数据 vm.$el.textContent === 'new message' // false Vue.nextTick(function () { vm.$el.textContent === 'new message' // true })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// HTML
<div id="example">{{message}}</div>
 
// JS
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

在组件Nelly用 vm.$nextTick() 实例方法极其有益,因为它无需全局 Vue ,何况回调函数中的 this 将活动绑定到这段日子的 Vue 实例上:

JavaScript

Vue.component('example', { template: '<span>{{ message }}</span>', data: function () { return { message: '未有更新' } }, methods: { updateMessage: function () { this.message = '更新达成' console.log(this.$el.textContent) // => '未有立异' this.$nextTick(function () { console.log(this.$el.textContent) // => '更新完结' }) } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

src/core/util/env

JavaScript

/** * 使用 MicroTask 来异步推行批次任务 */ export const nextTick = (function() { // 必要实行的回调列表 const callbacks = []; // 是或不是处于挂起状态 let pending = false; // 时间函数句柄 let timerFunc; // 施行而且清空全部的回调列表 function nextTickHandler() { pending = false; const copies = callbacks.slice(0); callbacks.length = 0; for (let i = 0; i < copies.length; i++) { copies[i](); } } // nextTick 的回调会被投入到 MicroTask 队列中,这里大家最首要通过原生的 Promise 与 MutationObserver 达成 /* istanbul ignore if */ if (typeof Promise !== 'undefined' && isNative(Promise)) { let p = Promise.resolve(); let logError = err => { console.error(err); }; timerFunc = () => { p.then(nextTickHandler).catch(logError); // 在有的 iOS 系统下的 UIWebViews 中,Promise.then 也许并不会被清空,因而大家须求加多额外操作以触发 if (isIOS) setTimeout(noop); }; } else if ( typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) || // PhantomJS and iOS 7.x MutationObserver.toString() === '[object MutationObserverConstructor]') ) { // 当 Promise 不可用时候使用 MutationObserver // e.g. PhantomJS IE11, iOS7, Android 4.4 let counter = 1; let observer = new MutationObserver(nextTickHandler); let textNode = document.createTextNode(String(counter)); observer.observe(textNode, { characterData: true }); timerFunc = () => { counter = (counter + 1) % 2; textNode.data = String(counter); }; } else { // 借使都不设有,则回落使用 setTimeout /* istanbul ignore next */ timerFunc = () => { setTimeout(nextTickHandler, 0); }; } return function queueNextTick(cb?: Function, ctx?: Object) { let _resolve; callbacks.push(() => { if (cb) { try { cb.call(ctx); } catch (e) { handleError(e, ctx, 'nextTick'); } } else if (_resolve) { _resolve(ctx); } }); if (!pending) { pending = true; timerFunc(); } // 若无传来回调,则表示以异步形式调用 if (!cb && typeof Promise !== 'undefined') { return new Promise((resolve, reject) => { _resolve = resolve; }); } }; })();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/**
* 使用 MicroTask 来异步执行批次任务
*/
export const nextTick = (function() {
  // 需要执行的回调列表
  const callbacks = [];
 
  // 是否处于挂起状态
  let pending = false;
 
  // 时间函数句柄
  let timerFunc;
 
  // 执行并且清空所有的回调列表
  function nextTickHandler() {
    pending = false;
    const copies = callbacks.slice(0);
    callbacks.length = 0;
    for (let i = 0; i < copies.length; i++) {
      copies[i]();
    }
  }
 
  // nextTick 的回调会被加入到 MicroTask 队列中,这里我们主要通过原生的 Promise 与 MutationObserver 实现
  /* istanbul ignore if */
  if (typeof Promise !== 'undefined' && isNative(Promise)) {
    let p = Promise.resolve();
    let logError = err => {
      console.error(err);
    };
    timerFunc = () => {
      p.then(nextTickHandler).catch(logError);
 
      // 在部分 iOS 系统下的 UIWebViews 中,Promise.then 可能并不会被清空,因此我们需要添加额外操作以触发
      if (isIOS) setTimeout(noop);
    };
  } else if (
    typeof MutationObserver !== 'undefined' &&
    (isNative(MutationObserver) ||
      // PhantomJS and iOS 7.x
      MutationObserver.toString() === '[object MutationObserverConstructor]')
  ) {
    // 当 Promise 不可用时候使用 MutationObserver
    // e.g. PhantomJS IE11, iOS7, Android 4.4
    let counter = 1;
    let observer = new MutationObserver(nextTickHandler);
    let textNode = document.createTextNode(String(counter));
    observer.observe(textNode, {
      characterData: true
    });
    timerFunc = () => {
      counter = (counter + 1) % 2;
      textNode.data = String(counter);
    };
  } else {
    // 如果都不存在,则回退使用 setTimeout
    /* istanbul ignore next */
    timerFunc = () => {
      setTimeout(nextTickHandler, 0);
    };
  }
 
  return function queueNextTick(cb?: Function, ctx?: Object) {
    let _resolve;
    callbacks.push(() => {
      if (cb) {
        try {
          cb.call(ctx);
        } catch (e) {
          handleError(e, ctx, 'nextTick');
        }
      } else if (_resolve) {
        _resolve(ctx);
      }
    });
    if (!pending) {
      pending = true;
      timerFunc();
    }
 
    // 如果没有传入回调,则表示以异步方式调用
    if (!cb && typeof Promise !== 'undefined') {
      return new Promise((resolve, reject) => {
        _resolve = resolve;
      });
    }
  };
})();

关于CSS Reset那些事(3):架构CSS基础库

2015/08/03 · CSS · CSS Reset

原来的小讲出处: Alsiso   

6th 隐藏

事先的完毕中在文书未溢出的境况下,realend成分会现出在父成分的动手,正如图片 13。化解此主题材料很简短,急必要安装:

.ellipsis{ overflow:hidden; }

1
2
3
.ellipsis{
  overflow:hidden;
}

就能够化解难题。

总结

感激你的开卷,最终附上 装有的源码,但个体建议,不要一向阅读源码,依据上边的提示在 codepen 中自身来二次才是一级实施

1 赞 6 收藏 2 评论

图片 14

功能查询的支撑情状

所以,@supports 未来支撑度什么样了吗?

自从 2013 年中,@supports 就可见在 Firefox,Chrome 和 Opera 中使用了。在 Edge 的依次版本中也受支持。Safari 在 2014年秋天才达成这一个功效。具体的扶助情形,请看下边这张图:

图片 15

您恐怕会以为 IE 不扶助此功用会是一个大难点,可是,其实不是这么的。待会儿就能够告诉你原因。作者深信,最大的几个绊脚石是 Safari 8,我们供给注目的在于那几个浏览器上发出的事情。

让我们来看其他五个例子。要是我们某些布局代码,为了健康运作,要求选拔 object-fit: cover;。对于不支持那性格子的浏览器,大家想要使用区别的体裁。

图片 16

之所以,大家能够这样写:

CSS

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) { p::first-letter { -webkit-initial-letter: 4; initial-letter: 4; color: #FE742F; font-weight: bold; margin-right: 0.5em; } } div { width: 300px; background: yellow; } @supports (object-fit: cover) { img { object-fit: cover; } div { width: auto; background: green; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
    p::first-letter {
        -webkit-initial-letter: 4;
        initial-letter: 4;
        color: #FE742F;
        font-weight: bold;
        margin-right: 0.5em;
    }
}
 
div {
    width: 300px;
    background: yellow;
}
@supports (object-fit: cover) {
    img {
        object-fit: cover;
    }
    div {
        width: auto;
        background: green;
    }
}

会发生什么样啊?@supports 有支撑照旧不协理的情状,object-fit 也是有匡助依旧不支持的气象,所以,就有了四种大概:

功能查询支持情况 属性(或者值)支持情况 会发生什么 是否我们想要的
支持 不支持 CSS 将会被应用
支持 不支持 CSS 不会被应用
不支持 支持 CSS 不会被应用
不支持 不支持 CSS 不会被应用

2. 函数调用栈与任务队列

在变量功能域与进步一节中大家介绍过所谓推行上下文(Execution Context)的概念,在 JavaScript 代码实践进程中,大家兴许会有所贰个大局上下文,三个函数上下文大概块上下文;种种函数调用都会创立新的上下文与一些功效域。而这几个实施上下文堆放就造成了所谓的实施上下文栈(Execution Context Stack),便如上文介绍的 JavaScript 是单线程事件循环机制,同期刻仅会实践单个事件,而任何事件都在所谓的实施栈中排队等候:图片 17

而从 JavaScript 内部存款和储蓄器模型的角度,大家能够将内部存款和储蓄器划分为调用栈(Call Stack)、堆(Heap)以及队列(Queue)等多少个部分:图片 18

个中的调用栈会记录全体的函数调用音信,当大家调用有个别函数时,会将其参数与一些变量等压入栈中;在试行完结后,会弹出栈首的因素。而堆则寄放了大气的非结构化数据,举例程序分配的变量与指标。队列则含有了一多元待管理的新闻与相关联的回调函数,各类JavaScript 运营时都无法不带有二个任务队列。当调用栈为空时,运转时会从队列中抽取有些音讯还要推行其涉嫌的函数(约等于创制栈帧的长河);运维时会递归调用函数并创制调用栈,直到函数调用栈全体清空再从职务队列中抽取新闻。换言之,举个例子开关点击或许HTTP 诉求响应都会作为消息寄放在任务队列中;供给注意的是,仅当那一个事件的回调函数存在时才会被归入职务队列,否则会被直接忽略。

比如说对于如下的代码块:

JavaScript

function fire() { const result = sumSqrt(3, 4) console.log(result); } function sumSqrt(x, y) { const s1 = square(x) const s2 = square(y) const sum = s1 + s2; return Math.sqrt(sum) } function square(x) { return x * x; } fire()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function fire() {
    const result = sumSqrt(3, 4)
    console.log(result);
}
function sumSqrt(x, y) {
    const s1 = square(x)
    const s2 = square(y)
    const sum = s1 + s2;
    return Math.sqrt(sum)
}
function square(x) {
    return x * x;
}
 
fire()

其对应的函数调用图(整理自这里)为:图片 19

此处还值得提的是,Promise.then 是异步推行的,而创办 Promise 实例 (executor) 是同步推行的,例如下述代码:

JavaScript

(function test() { setTimeout(function() {console.log(4)}, 0); new Promise(function executor(resolve) { console.log(1); for( var i=0 ; i<一千0 ; i++ ) { i == 9999 && resolve(); } console.log(2); }).then(function() { console.log(5); }); console.log(3); })() // 输出结果为: // 1 // 2 // 3 // 5 // 4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(function test() {
    setTimeout(function() {console.log(4)}, 0);
    new Promise(function executor(resolve) {
        console.log(1);
        for( var i=0 ; i<10000 ; i++ ) {
            i == 9999 && resolve();
        }
        console.log(2);
    }).then(function() {
        console.log(5);
    });
    console.log(3);
})()
// 输出结果为:
// 1
// 2
// 3
// 5
// 4

大家得以参照他事他说加以考察 Promise 标准中有关于 promise.then 的一对:

JavaScript

promise.then(onFulfilled, onRejected) 2.2.4 onFulfilled or onRejected must not be called until the execution context stack contains only platform code. [3.1]. Here “platform code” means engine, environment, and promise implementation code. In practice, this requirement ensures that onFulfilled and onRejected execute asynchronously, after the event loop turn in which then is called, and with a fresh stack. This can be implemented with either a “macro-task” mechanism such as setTimeout or setImmediate, or with a “micro-task” mechanism such as MutationObserver or process.nextTick. Since the promise implementation is considered platform code, it may itself contain a task-scheduling queue or “trampoline” in which the handlers are called.

1
2
3
4
5
promise.then(onFulfilled, onRejected)
 
2.2.4 onFulfilled or onRejected must not be called until the execution context stack contains only platform code. [3.1].
 
Here “platform code” means engine, environment, and promise implementation code. In practice, this requirement ensures that onFulfilled and onRejected execute asynchronously, after the event loop turn in which then is called, and with a fresh stack. This can be implemented with either a “macro-task” mechanism such as setTimeout or setImmediate, or with a “micro-task” mechanism such as MutationObserver or process.nextTick. Since the promise implementation is considered platform code, it may itself contain a task-scheduling queue or “trampoline” in which the handlers are called.

行业内部须求,onFulfilled 必得在举办上下文栈(Execution Context Stack) 只富含 平台代码(platform code) 后才具实行。平台代码辅导擎,景况,Promise 达成代码等。实践上的话,那个供给保证了 onFulfilled 的异步实施(以全新的栈),在 then 被调用的这一个事件循环之后。

本文由亚洲必赢登录发布于亚洲必赢app,转载请注明出处:姣好美好的加载,落成多行文本的省略号展现

关键词:

上一篇:创作建议和性质优化小结,完美的相对尾巴部分

下一篇:没有了