成人欧美一区二区三区的电影,日韩一级一欧美一级国产,国产成人国拍亚洲精品,无码人妻精品一区二区三区毛片,伊人久久无码大香线蕉综合

各種用法

看看 script 千奇百怪的用法，一定有你沒見過的~~

1、內(nèi)聯(lián)腳本

如文章開頭說的一樣，直接用來寫內(nèi)聯(lián)腳本，本公眾號(hào)大部分文章都是使用內(nèi)聯(lián)腳本的方式所寫：

<script>
  const name = 'hello'
  console.log(name)
</script>

2、引入外部腳本

使用 src 屬性直接引入外部腳本，這是目前大部分前端項(xiàng)目的用法，雖然 vite 直接使用 ES 模塊化打包，但要兼容低版本瀏覽器還是得轉(zhuǎn)成普通的 js 文件引入：

<script src="project/path/script.js"></script>

3、defer 延遲

標(biāo)簽的 defer 屬性可以控制腳本異步加載，并且能讓腳本順序執(zhí)行：

<script defer src="project/path/script1.js"></script>
<script defer src="project/path/script2.js"></script>

以上腳本就算寫在 head 標(biāo)簽中，也不會(huì)阻止 dom 解析，而且 script2.js 一定是在 script1.js 之后執(zhí)行。

4、async 異步

async 也能控制腳本異步加載，但不同的是 async 加載的腳本無法保證腳本執(zhí)行順序。

<script async src="project/path/script1.js"></script>
<script async src="project/path/script2.js"></script>

以上腳本沒辦法保證 script1.js 一定會(huì)先執(zhí)行！??！此屬性一般多用于加載與項(xiàng)目流程無關(guān)的一些 js 文件，比如說：統(tǒng)計(jì)代碼、廣告代碼等等。

5、動(dòng)態(tài)加載腳本

使用 js 創(chuàng)建 script 標(biāo)簽引入 js 文件，即可實(shí)現(xiàn) js 腳本的動(dòng)態(tài)加載：

const script = document.createElement('script');
script.src = 'dynamic.js';
script.onload = function () {
  console.log('dynamic.js 加載成功！');
}
script.onerror = function () {
  console.log('dynamic.js 加載失??！');
}
// 腳本插入到頁面中才會(huì)開始加載
document.head.appendChild(script);

6、資源完整性校驗(yàn)

integrity 屬性能用于校驗(yàn)資源是否被篡改，詳細(xì)算法參考：https://developer.mozilla.org/zh-CN/docs/Web/Security/Subresource_Integrity

<script src="https://cdn.xxx.com/jquery.js" integrity="sha384-...">
</script>

7、跨域控制

crossorigin 屬性用于控制跨域請(qǐng)求的憑據(jù)傳遞：

<script src="https://other-domain.com/script.js" crossorigin="anonymous"></script>

• anonymous：不發(fā)送憑據(jù)（如 Cookies）
• use-credentials：發(fā)送憑據(jù)

8、ES 模塊

使用 type="module" 即可在 script 標(biāo)簽內(nèi)使用 ES 模塊語法，這與瀏覽器的版本有關(guān)，一些低版本可能并不支持！！

<script type="module" src="main.mjs"></script>
<script type="module">
  import { foo } from './foo.js';
</script>

9、nomodule 兼容

nomodule 屬性，用于兼容不支持 ES 模塊的瀏覽器，如果瀏覽器不支持 ES 模塊，則 nomodule 屬性下的腳本會(huì)被執(zhí)行，反之則不會(huì)執(zhí)行。

<script nomodule src="project/path/fallback.js"></script>

10、動(dòng)態(tài)導(dǎo)入

ES 模塊允許在代碼執(zhí)行時(shí)導(dǎo)入模塊，此方式就稱之為 動(dòng)態(tài)導(dǎo)入：

<script type="module">
  const isMobile = navigator.userAgent.match(/mobile/i);
  if (isMobile) {
    import('./project/path/mobile.js').then(module => {
      module.default();
    })
  }
</script>

11、模塊映射

type="importmap" 屬性允許指定 ES 模塊的映射關(guān)系，在后續(xù)書寫時(shí)候就不必再寫完整的模塊路徑，可以只寫模塊名：

<script type="importmap">
{
  "imports": {
    "lodash": "https://cdn.jsdelivr.net/npm/lodash@4.17.21/+esm"
  }
}
</script>
<script type="module">
  import _ from "lodash"; // 實(shí)際加載 CDN 資源
  _.chunk([1, 2, 3], 2);
</script>

12、模版字符串

利用自定義的 type 屬性，可以將一些 HTML 字符串寫在 script 標(biāo)簽中，比如 vue 的模版字符串：

<script type="text/x-template" id="index">
  <div class="index">
    <h3>點(diǎn)擊歷史記錄跳轉(zhuǎn)會(huì)保存滾動(dòng)條位置</h3>
    <p v-for="(item,index) in list" :key="index">
      <template v-if="index % 8 !== 0">
        {{ index }}
      </template>
      <template v-else>
        <p><a href="javascript:;" @click="$router.go(1)">歷史記錄前往下一頁</a></p>
        <router-link :to="{ name: 'details' }">跳轉(zhuǎn)前往詳情頁</router-link>
      </template>
    </p>
  </div>
</script>
<script>
  var list = (new Array(50)).fill('1')
  Vue.component('Index', {
    template: '#index',
    data: function () {
      return {
        list: list
      }
    },
  })
</script>

實(shí)驗(yàn)性屬性

• fetchpriority：允許指定外部腳本的加載優(yōu)先級(jí)。有效值：high/low/auto
• blocking：可以指定在腳本加載時(shí)，瀏覽器中的頁面渲染應(yīng)該被阻斷。有效值：render

轉(zhuǎn)自https://www.cnblogs.com/linx/p/19134600