浅谈ES6原生Promise

2016/08/28 · JavaScript
· es6,
Promise

原稿出处: samchowgo   

ES6标准出炉以前,二个幽灵,回调的在天有灵,游荡在JavaScript世界。

正所谓:

世界本未有回调,写的人多了,也就有了})})})})})

Promise的起来,是因为异步方法调用中,往往会现身回调函数后生可畏环扣意气风发环的情形。这种景观导致了回调金字塔难题的现身。不独有代码写起来困难又不雅观,而且题目头昏眼花的时候,阅读代码的人也不便精通。
比喻如下:

JavaScript

db.save(data, function(data){ // do something… db.save(data1,
function(data){ // do something… db.save(data2, function(data){ // do
something… done(data3); // 重临数据 }) }); });

1
2
3
4
5
6
7
8
9
10
db.save(data, function(data){
    // do something…
    db.save(data1, function(data){
        // do something…
        db.save(data2, function(data){
            // do something…
            done(data3); // 返回数据
        })
    });
});

举例有三个数据库保存操作,三回倡议须求在多个表中保存三次数据。那么我们的代码就跟上边的代码雷同了。那时候假使在第二个db.save出了难题如何是好?基于那几个思量,大家又须求在每生机勃勃层回调中选用相似try...catch那样的逻辑。那些便是罪行累累的来源,也是node刚初阶广为诟病的少数。

其余一个欠缺就是,若是我们的二次保存之间并从未前后信赖关系,大家照旧须求等待近日的函数试行完成,
技艺进行下一步,而望尘不及多少个保存并行,之后再次回到一个多个保存过后要求的结果。(可能说达成起来需求本事)

噩运的是,在作者刚初步接触node的时候,作者写了大气这么的hell。

用作三个神蹟还动下脑子的程序猿,小编尝试了朴灵大人的eventproxy。后来因为依然写前端代码多一些,作者接触了ES6,发掘了三个消除回调深渊的利器Promise

其实早在ES6的Promise之前,Qwhen.jsbluebird等等库早已依照Promise标准(参考Promise/A+)造出了和谐的promise轮子。
(看过后生可畏篇小说,小编觉着很有道理。里面说,绝不扩充内置的原生对象。这种做法是无法面向现在的。所以这边有三个晋升:使用扩大原生Promise的库时,须要战战栗栗。)

此处仅斟酌原生的Promise

聊风流罗曼蒂克聊原生浏览器中的模块

2018/07/04 · 基本功手艺 ·
浏览器

初稿出处:
记   

自打ES二零一四脱稿以来,大家通过 Babel
等转移工具得以在项目中平素动用【模块】。前端模块化开垦已然是不可改变局面,在
ECMAScript module 早先大家由此
requirejs、seajs、LABjs,以致最初的时候我们通过闭包来落实模块化开采。近些日子有些主流的的浏览器厂家已经在他们新版的浏览器中原生扶持了【模块】,前些天大家就来原生浏览器中的模块到底如何。

当下原生帮衬模块用法的浏览器有:

  • Safari 10.1
  • Chrome 61
  • Firefox 60
  • Edge 16

要动用原生浏览器的模块,你只须求在 script 标签上增加叁个 type=module
属性, 浏览器就能够把那些本子(内联脚本或许外联脚本)当做模块来处理。

JavaScript

<script type=”module”> import {addTextToBody} from ‘./utils.mjs’;
addTextToBody(‘Modules are pretty cool.’); </script>

1
2
3
4
<script type="module">
  import {addTextToBody} from ‘./utils.mjs’;
  addTextToBody(‘Modules are pretty cool.’);
</script>

JavaScript

// utils.mjs export function addTextToBody(text) { const div =
document.createElement(‘div’); div.textContent = text;
document.body.appendChild(div); }

1
2
3
4
5
6
// utils.mjs
export function addTextToBody(text) {
  const div = document.createElement(‘div’);
  div.textContent = text;
  document.body.appendChild(div);
}

在线Demo

webpack 持久化缓存奉行

2018/01/15 · JavaScript
· webpack,
缓存

原著出处: happylindz   

ES6 Promise

不扶植裸导入(无法由此模块名平昔导入)

三个过关的模块标记符必得知足下列标准之后生可畏:

  • 贰个完全的非相对URL。通过 new URL(moduleSpecifier)
    使用时不会报错。
  • / 开头。
  • ./ 开头。
  • ../ 开头。

封存其余申明符供未来应用,如导入内置模块。

JavaScript

// 支持: import {foo} from ”;
import {foo} from ‘/utils/bar.mjs’; import {foo} from ‘./bar.mjs’;
import {foo} from ‘../bar.mjs’; // 不支持: import {foo} from ‘bar.mjs’;
import {foo} from ‘utils/bar.mjs’;

1
2
3
4
5
6
7
8
// 支持:
import {foo} from ‘https://jakearchibald.com/utils/bar.mjs’;
import {foo} from ‘/utils/bar.mjs’;
import {foo} from ‘./bar.mjs’;
import {foo} from ‘../bar.mjs’;
// 不支持:
import {foo} from ‘bar.mjs’;
import {foo} from ‘utils/bar.mjs’;

前言

新近在看 webpack
如何是好持久化缓存的内容,发掘里头照旧有风度翩翩部分坑点的,正好有的时候间就将它们打理计算一下,读完本文你差不离能够领略:

  1. 怎么是持久化缓存,为何做悠久化缓存?
  2. webpack 咋办悠久化缓存?
  3. webpack 做缓存的生龙活虎对注意点。

Promise对象情形

在详解Promise事先,先来点理论:

Promise/A+标准, 规定Promise对象是四个轻松状态机。它多个状态:

  • pending(执行中)
  • fulfilled(成功)
  • reject(拒绝)

中间pending为开首状态,fulfilled和rejected为竣事状态(甘休状态表示promise的生命周期已截止)。

气象转变关系为:

pending->fulfilled,pending->rejected。

1
pending->fulfilled,pending->rejected。

趁着事态的调换将触发种种风浪(如进行成功事件、实践停业事件等)。

通过 nomodule 向后极其

借使当前浏览器帮忙 type=module 标签的话会活动忽略 nomodule
标签。那表示你能够将模块揭发给帮忙模块的浏览器,相同的时间可以给不帮忙模块的浏览器提供宽容方案。

JavaScript

<script type=”module” src=”module.mjs”></script> <script
nomodule src=”fallback.js”></script>

1
2
<script type="module" src="module.mjs"></script>
<script nomodule src="fallback.js"></script>

在线Demo

长久化缓存

率先大家必要去解释一下,什么是悠久化缓存,在当今光景端抽离的接收大行其道的背景下,前端
html,css,js
往往是以往生可畏种静态财富文件的样式存在于服务器,通过接口来获取数据来显示动态内容。那就提到到集团怎样去布署前端代码的难点,所以就涉及到二个更新配备的主题材料,是先安插页面,依然先计划财富?

  1. 先布置页面,再配置财富:在二者铺排的年月间距内,若是有客户访谈页面,就能在新的页面结构中加载旧的能源,並且把那么些旧版本财富作为新本子缓存起来,其结果就是:顾客访谈到一个体制错乱的页面,除非手动去刷新,否则在财富缓存过期以前,页面会一贯处于混乱的气象。
  2. 先陈设能源,再配置页面:在布置时间间距内,有旧版本的财富本地缓存的客户访谈网址,由于要求的页面是旧版本,能源援用未有退换,浏览器将直接行使本地缓存,那样属于常规情况,但还未地面缓存或然缓存过期的顾客在寻访网站的时候,就能产出旧版本页面加载新本子能源的气象,导致页面实践错误。

因而我们供给大器晚成种配备战术来确定保证在更新我们线上的代码的时候,线上顾客也能平滑地联网何况准确展开大家的网站。

引入先看那么些回答:大企业里怎么开垦和配备前端代码?

当您读完下面的回答,大约就能够明白,未来可比早熟的悠久化缓存方案便是在静态财富的名字背后加
hash 值,因为每一趟改善文件生成的 hash
值不风姿罗曼蒂克致,那样做的好处在于增量式发表文件,防止覆盖掉以前文件进而导致线上的顾客访问失效。

因为后生可畏旦产生每一遍公布的静态能源(css, js,
img)的称呼都以当世无双的,那么自个儿就能够:

  • 针对 html 文件:不开启缓存,把 html
    放到自身的服务器上,关闭服务器的缓存,本身的服务器只提供 html
    文件和数据接口
  • 本着静态的 js,css,图片等文件:开启 cdn 和缓存,将静态能源上传到
    cdn
    服务商,大家得以对能源开启长时间缓存,因为种种能源的路子都以头一无二的,所以不会变成能源被隐蔽,保险线上顾客访谈的平稳。
  • 历次发表更新的时候,先将静态财富(js, css, img) 传到 cdn
    服务上,然后再上传 html
    文件,那样既有限支撑了老顾客能或无法符合规律访谈,又能让新顾客见到新的页面。

上边大概介绍了下主流的前端长久化缓存方案,那么咱们为啥要求做长久化缓存呢?

  1. 客户接收浏览器第一遍访谈大家的站点时,该页面引进了美妙绝伦的静态财富,若是我们能变成长久化缓存的话,能够在
    http 响应头加上 Cache-control 或 Expires
    字段来安装缓存,浏览器能够将那一个财富生龙活虎风姿浪漫缓存到地方。
  2. 客户在那起彼伏访谈的时候,如若急需重新恳请同样的静态财富,且静态能源未有过期,那么浏览器可以一贯走地面缓存而不用再通过互联网伏乞财富。

Promise形式

Promise的长相就好像那标准:

JavaScript

var promise = new Promise(function func(resolve, reject){ // do
somthing, maybe async if (success){ return resolve(data); } else {
return reject(data); } }); promise.then(function(data){ // do
something… e.g console.log(data); }, function(err){ // deal the err.
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var promise = new Promise(function func(resolve, reject){
    // do somthing, maybe async
    if (success){
      return resolve(data);
    } else {
      return reject(data);
    }
});
 
promise.then(function(data){
    // do something… e.g
    console.log(data);
}, function(err){
    // deal the err.
})

这里的变量promisePromise本条指标的实例。

promise对象在创设的时候会实践func函数中的逻辑。

逻辑管理达成而且对的误时,resolve其二遍调会将值传递到多个特有的地点。那个奇特的地点在哪呢?就是底下代码中的then,大家应用then中的回调函数来拍卖resolve后的结果。比方上面的代码中,我们将值轻易的输出到调控台。假如有不当,则rejectthen的第二个回调函数中,对错误举办拍卖。

同盟地点的有数状态机的说理,大家领略在Promise构造函数中实践回调函数代码时,状态为pendingresolve尔后情形为fulfilledreject今后情形为reject

暗中认可延迟加载

当互联网情形不好的时候,脚本加载会阻塞浏览器剖析 HTML。平常大家能够透过在
script 标签上行使 defer
属性来消除阻塞难题,可是那也会变成脚本独有在文书档案深入分析完成后才实践,同不经常候还要统筹别的延迟脚本的实行各类。暗许情状下模块脚本的变现形似于
defer — 它不会堵塞 HTML 的解析。

模块脚本的推行队列与使用了 defer 的经常脚本黄金年代致。

JavaScript

<!– 这一个剧本实行滞后于… –> <script type=”module”
src=”1.mjs”></script> <!– …那个本子… –> <script
src=”2.js”></script> <!– …可是早日这几个本子 –>
<script defer src=”3.js”></script>

1
2
3
4
5
6
<!–  这个脚本执行滞后于… –>
<script type="module" src="1.mjs"></script>
<!– …这个脚本… –>
<script src="2.js"></script>
<!– …但是先于这个脚本 –>
<script defer src="3.js"></script>

在线Demo

webpack 如何是好长久化缓存

地点简要介绍完长久化缓存,上边那些才是任重先生而道远,那么大家相应什么在 webpack
中开展长久化缓存的吗,大家必要做到以下两点:

  1. 担保 hash 值的唯大器晚成性,即为各类打包后的能源转移一个并世无两的 hash
    值,只要打包内容不均等,那么 hash 值就不均等。
  2. 管教 hash
    值的和煦,我们必要产生改革有个别模块的时候,唯有受影响的打包后文件
    hash 值改换,与该模块非亲非故的打包文件 hash 值不改变。

hash 文件名是得以完结长久化缓存的率先步,如今 webpack 有三种总计 hash
的主意([hash] 和 [chunkhash])

  • hash 代表每回 webpack 在编写翻译的经过中会生成唯风流倜傥的 hash
    值,在类型中其余二个文本改造后就能够被另行成立,然后 webpack 总计新的
    hash 值。
  • chunkhash 是凭借模块总计出来的 hash
    值,所以某些文件的改进只会潜移默化它本人的 hash 值,不会影响别的文件。

所以借使您只是只是地将全体内容打包成同三个文件,那么 hash
就可见满足你了,固然您的项目事关到拆包,分模块举行加载等等,那么您需求用
chunkhash,来确认保障每一回换代之后唯有相关的公文 hash 值产生转移。

就此大家在生机勃勃份具有长久化缓存的 webpack 配置相应长这么:

module.exports = { entry: __dirname + ‘/src/index.js’, output: { path:
__dirname + ‘/dist’, filename: ‘[name].[chunkhash:8].js’, } }

1
2
3
4
5
6
7
module.exports = {
  entry: __dirname + ‘/src/index.js’,
  output: {
    path: __dirname + ‘/dist’,
    filename: ‘[name].[chunkhash:8].js’,
  }
}

上边代码的意义就是:以 index.js
为进口,将具有的代码全体打包成三个文书取名叫 index.xxxx.js 并置于 dist
目录下,今后我们得以在历次换代项目标时候做到生成新命名的文书了。

只倘使草率收兵简单的场景,那样做就够了,然而在大型多页面使用中,大家屡次须要对页面进行品质优化:

  1. 告别业务代码和第三方的代码:之所以将业务代码和第三方代码抽离出来,是因为业务代码更新频率高,而第三方代码更新换代速度慢,所以大家将第三方代码(库,框架)进行分离,那样能够丰硕利用浏览器的缓存来加载第三方库。
  2. 按需加载:譬如在接收 React-Router
    的时候,当客商要求拜访到有个别路由的时候再去加载对应的机件,那么顾客并不供给在一齐头的时候就将全部的路由组件下载到本地。
  3. 在多页面使用中,大家往往可以将国有模块实行分离,举个例子 header, footer
    等等,那样页面在展开跳转的时候那些公共模块因为存在于缓存里,就足以一贯开展加载了,实际不是再拓宽网络诉求了。

那么怎么样进展拆包,分模块实行加载,那就须要 webpack
内置插件:CommonsChunkPlugin,上边作者将透过三个例子,来讲解 webpack
该怎么样开展布署。

正文的代码放在笔者的 Github 上,有意思味的能够下载来看看:

git clone cd
blog/code/multiple-page-webpack-demo npm install

1
2
3
git clone https://github.com/happylindz/blog.git
cd blog/code/multiple-page-webpack-demo
npm install

翻阅下边包车型客车内容前边笔者刚毅建议你看下笔者事先的篇章:浓重掌握 webpack
文件打包机制,明白 webpack
文件的打包的编写制定推动你越来越好地促成长久化缓存。

事例差少之又少是如此陈述的:它由八个页面组成 pageA 和 pageB

// src/pageA.js import componentA from ‘./common/componentA’; // 使用到
jquery 第三方库,必要分离,制止业务打包文件过大 import $ from ‘jquery’;
// 加载 css 文件,生机勃勃部分为集体样式,意气风发部分为只有体制,必要分离 import
‘./css/common.css’ import ‘./css/pageA.css’; console.log(componentA);
console.log($.trim(‘ do something ‘)); // src/pageB.js // 页面 A 和 B
都用到了公共模块 componentA,须求抽离,防止重新加载 import componentA
from ‘./common/componentA’; import componentB from
‘./common/componentB’; import ‘./css/common.css’ import
‘./css/pageB.css’; console.log(componentA); console.log(componentB); //
用到异步加载模块 asyncComponent,必要分离,加载首屏速度
document.getElementById(‘xxxxx’).addEventListener(‘click’, () => {
import( /* webpackChunkName: “async” */
‘./common/asyncComponent.js’).then((async) => { async(); }) }) //
公共模块基本长那样 export default “component X”;

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
// src/pageA.js
import componentA from ‘./common/componentA’;
 
// 使用到 jquery 第三方库,需要抽离,避免业务打包文件过大
import $ from ‘jquery’;
 
// 加载 css 文件,一部分为公共样式,一部分为独有样式,需要抽离
import ‘./css/common.css’
import ‘./css/pageA.css’;
 
console.log(componentA);
console.log($.trim(‘    do something   ‘));
 
// src/pageB.js
// 页面 A 和 B 都用到了公共模块 componentA,需要抽离,避免重复加载
import componentA from ‘./common/componentA’;
import componentB from ‘./common/componentB’;
import ‘./css/common.css’
import ‘./css/pageB.css’;
 
console.log(componentA);
console.log(componentB);
 
// 用到异步加载模块 asyncComponent,需要抽离,加载首屏速度
document.getElementById(‘xxxxx’).addEventListener(‘click’, () => {
  import( /* webpackChunkName: "async" */
    ‘./common/asyncComponent.js’).then((async) => {
      async();
  })
})
 
// 公共模块基本长这样
export default "component X";

下边包车型客车页面内容基本总结关联到了大家拆分模块的两种格局:拆分公共库,按需加载和拆分公共模块。那么接下去要来配置
webpack:

const path = require(‘path’); const webpack = require(‘webpack’); const
ExtractTextPlugin = require(‘extract-text-webpack-plugin’);
module.exports = { entry: { pageA: [path.resolve(__dirname,
‘./src/pageA.js’)], pageB: path.resolve(__dirname, ‘./src/pageB.js’),
}, output: { path: path.resolve(__dirname, ‘./dist’), filename:
‘js/[name].[chunkhash:8].js’, chunkFilename:
‘js/[name].[chunkhash:8].js’ }, module: { rules: [ { //
用正则去匹配要用该 loader 转变的 CSS 文件 test: /.css$/, use:
ExtractTextPlugin.extract({ fallback: “style-loader”, use:
[“css-loader”] }) } ] }, plugins: [ new
webpack.optimize.CommonsChunkPlugin({ name: ‘common’, minChunks: 2, }),
new webpack.optimize.CommonsChunkPlugin({ name: ‘vendor’, minChunks: ({
resource }) => ( resource && resource.indexOf(‘node_modules’) >=
0 && resource.match(/.js$/) ) }), new ExtractTextPlugin({ filename:
`css/[name].[chunkhash:8].css`, }), ] }

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
const path = require(‘path’);
const webpack = require(‘webpack’);
const ExtractTextPlugin = require(‘extract-text-webpack-plugin’);
module.exports = {
  entry: {
    pageA: [path.resolve(__dirname, ‘./src/pageA.js’)],
    pageB: path.resolve(__dirname, ‘./src/pageB.js’),
  },
  output: {
    path: path.resolve(__dirname, ‘./dist’),
    filename: ‘js/[name].[chunkhash:8].js’,
    chunkFilename: ‘js/[name].[chunkhash:8].js’
  },
  module: {
    rules: [
      {
        // 用正则去匹配要用该 loader 转换的 CSS 文件
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader"]
        })  
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ‘common’,
      minChunks: 2,
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ‘vendor’,
      minChunks: ({ resource }) => (
        resource && resource.indexOf(‘node_modules’) >= 0 && resource.match(/.js$/)
      )
    }),
    new ExtractTextPlugin({
      filename: `css/[name].[chunkhash:8].css`,
    }),
  ]
}

第叁个 CommonsChunkPlugin 用于分离公共模块,也正是是说 webpack
大佬,借使您看看有些模块被加载两回即以上,那么请你帮笔者移到 common chunk
里面,这里 minChunks 为
2,粒度拆解最细,你能够依据自身的实际上情状,看选择是用有个别次模块才将它们分离。

首个 CommonsChunkPlugin
用来领取第三方代码,将它们举行分离,剖断财富是不是来自
node_modules,若是是,则证实是第三方模块,那就将它们分离。约等于是告诉
webpack 大佬,假若您瞧瞧某个模块是出自 node_modules 目录的,而且名字是
.js 结尾的话,麻烦把她们都移到 vendor chunk 里去,纵然 vendor chunk
不设有的话,就创办叁个新的。

如此安插有啥样好处,随着职业的增高,大家依靠的第三方库代码超大概会更加多,即使大家特地布署二个入口来存放第三方代码,那时大家的
webpack.config.js 就能够形成:

// 不便于开展 module.exports = { entry: { app: ‘./src/main.js’, vendor:
[ ‘vue’, ‘axio’, ‘vue-router’, ‘vuex’, // more ], }, }

1
2
3
4
5
6
7
8
9
10
11
12
13
// 不利于拓展
module.exports = {
  entry: {
    app: ‘./src/main.js’,
    vendor: [
      ‘vue’,
      ‘axio’,
      ‘vue-router’,
      ‘vuex’,
      // more
    ],
  },
}

其多个 ExtractTextPlugin 插件用于将 css 从打包好的 js
文件中分离,生成独立的 css
文件,想象一下,当你只是改革了下样式,并不曾改换页面包车型客车效率逻辑,你势必不指望你的
js 文件 hash 值变化,你确定是期待 css 和 js 能够相互分开,且互不影响。

运作 webpack 后可以见见打包之后的功力:

├── css │   ├── common.2beb7387.css │   ├── pageA.d178426d.css │   └──
pageB.33931188.css └── js ├── async.03f28faf.js ├── common.2beb7387.js
├── pageA.d178426d.js ├── pageB.33931188.js └── vendor.22a1d956.js

1
2
3
4
5
6
7
8
9
10
11
├── css
│   ├── common.2beb7387.css
│   ├── pageA.d178426d.css
│   └── pageB.33931188.css
└── js
    ├── async.03f28faf.js
    ├── common.2beb7387.js
    ├── pageA.d178426d.js
    ├── pageB.33931188.js
    └── vendor.22a1d956.js
 

能够看见 css 和 js 已经分手,而且大家对模块举办了拆分,有限支撑了模块 chunk
的唯风度翩翩性,当您每趟换代代码的时候,会转移不平等的 hash 值。

唯生龙活虎性有了,那么大家需求保证 hash
值的安静,试想下这么的光景,你明显不期望您改改某部分的代码(模块,css)导致了文件的
hash 值全变了,那么泾渭明显是不明智的,那么我们去完毕 hash 值变化最小化呢?

换句话说,大家就要找寻 webpack
编写翻译中会导致缓存失效的要素,想艺术去解决或优化它?

潜移暗化 chunkhash 值变化根本由以下多个部分引起的:

  1. 包蕴模块的源代码
  2. webpack 用于运营运维的 runtime 代码
  3. webpack 生成的模块 moduleid(满含包罗模块 id 和被援引的信赖性模块 id)
  4. chunkID

那四局地只要有自由部分发生变化,生成的分块文件就不均等了,缓存也就能够失效,上面就从多少个部分每种介绍:

Promise数据流动

如上是promise的第贰次数据流动景况。

比较funny的是,promise的then艺术如故能够回到四个Promise指标,那样我们就又能用下三个then来做相似的管理。

第一个then中的八个回调函数决定首先个then回去的是多个如何的Promise对象。

  • 若是首个then的首先个回调未有回到一个Promise指标,那么第三个then的调用者照旧原本的Promise对象,只不过其resolve的值产生了第2个then中率先个回调函数的再次来到值。
  • 假定第一个then的第二个回调函数再次回到了多个Promise对象,那么第一个then的调用者形成了这些新的Promise对象,第二个then伺机这一个新的Promise对象resolve或者reject日后实施回调。

话就算饶了一点,可是本身自己以为说的依旧很精通的吗。哈哈~

假定任性地点碰着了错误,则错误之后交给蒙受的首先个带首个回调函数的then的第三个回调函数来拍卖。能够精晓为不当从来向后reject,
直到被管理终结。

另外,Promise目的还应该有一个措施catch,这一个方法选取二个回调函数来管理错误。即:

JavaScript

promise.catch(function(err){ // deal the err. })

1
2
3
promise.catch(function(err){
    // deal the err.
})

借使对不当的管理是近似的,那个主意能够对错误实行集中执会考查总计局意气风发管理。所以任何的then主意就没有必要第3个回调啦~

内联模块也是延迟加载的

唱过脚本会忽视 defer 然则内联模块总是 defer
的,不管它是不是引进了动西。

JavaScript

<!– 那么些剧本施行滞后于… –> <script type=”module”>
addTextToBody(“Inline module executed”); </script> <!– …这个…
–> <script src=”1.js”></script> <!– …还也会有这一个…
–> <script defer> addTextToBody(“Inline script executed”);
</script> <!– …不过早日那一个. –> <script defer
src=”2.js”></script>

1
2
3
4
5
6
7
8
9
10
11
12
<!– 这个脚本执行滞后于… –>
<script type="module">
  addTextToBody("Inline module executed");
</script>
<!– …这个… –>
<script src="1.js"></script>
<!– …还有这个… –>
<script defer>
  addTextToBody("Inline script executed");
</script>
<!– …但是先于这个. –>
<script defer src="2.js"></script>

在线Demo

风流倜傥、源代码变化:

显然不用多说,缓存应当要刷新,不然就有难题了

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章