웹페이지에 스크립트 로드

15505 단어 htmljavascript
기차를 놓쳤고 1시간을 채워야 하므로 웹 페이지에서 스크립트를 로드하는 간단한 것에 대해 이야기해 보겠습니다.

번들로



로드되는 모든 스크립트를 적용하는 아주 쉬운 방법은 모든 스크립트를 하나의 파일로 묶는 것입니다. 그러나 이 방법은 필요한 것만 가져올 수 없기 때문에 비용이 많이 듭니다(바보).

스크립트 문서로



새끼 오리처럼 우리는 웹 페이지를 로드할 때 즉시 가장 먼저 로드되는 스크립트를 문서 헤드에 배치하도록 배웠습니다.

<html>
    <head>
        <title></title>
        <script src="main.js"></script>
        <script src="util.js"></script>
        <script src="events.js"></script>
        <script src="speech.js"></script>
    </head>
    <body>
    <h1>Page Title</h1>
    </body>
</html>

문서 헤드 내부의 스크립트 요소는 스크립트가 로드될 때 대상 요소가 아직 존재하지 않기 때문에 스크립트 뒤에 선언된 HTML 요소에 액세스할 수 없습니다. 즉, 위의 예에서는 main.js에서 h1 요소에 액세스할 수 없습니다. 이것이 종종 새끼 오리가 페이지의 나머지 부분이 이미 로드된 후에 스크립트가 로드되기를 원하는 이유입니다.

본문 끝에 스크립트로



문서가 로드된 후 스크립트를 실행하려면 본문 끝에 넣기만 하면 됩니다.
페이지 로딩 속도를 높일 수 있기 때문에 어느 시점에서 이것을 하는 것이 일반적인 관행이 되었습니다. 이것이 의미하는 바는 페이지 이미지와 스타일시트가 이미 로드되었다는 것입니다. 스크립트 태그는 이를 차단/지연하지 않습니다. 이것은 사용자에게 훨씬 좋습니다.

<html>
    <head>
        <title></title>
    </head>
    <body>
    <h1>Page Title</h1>
    <script src="main.js"></script>
    <script src="util.js"></script>
    <script src="events.js"></script>
    <script src="speech.js"></script>
    </body>
</html>

페이지 헤드에 선언된 스크립트에서 페이지의 요소에 액세스하는 것은 매우 가능하지만 페이지가 로드되었음을 알리는 이벤트를 기다려야 합니다. 예전에는 페이지 본문에 onload 속성을 할당했습니다.

<body onload="method()"></body>

jQuery 사용



다음은 누구나 알고 있습니다.

$(document).ready(function() {
  // the page has finished loading
}

바닐라



이것은 위와 거의 같지만 jQuery가 없습니다.

document.addEventListener('DOMContentLoaded', event => {
  // the page has finished loading
})

프로그래밍 방식으로 주입



스크립트를 머리에 주입하여 일종의 require 함수를 모방할 수 있습니다. 이것은 실제로 들리는 것처럼 무섭지 않습니다.

function importScript(src) {
    let script = document.createElement('script')
    script.setAttribute('src', src)
    document.head.appendChild(script)
}

importScript('main.js')
importScript('util.js')
importScript('events.js')
importScript('speech.js')

비동기 기능으로



어떤 사람들은 여러 약속을 비동기 함수로 래핑해야 한다고 주장합니다.

// imagine the same import function but one that implements a Promise.
document.addEventListener('DOMContentLoaded', async event => {
  window.main = await importScript('main.js')
  window.util= await importScript('util.js')
  window.events= await importScript('events.js')
  window.speech = await importScript('speech.js')
}

모듈로



지금은 2018년이고 오리 새끼는 백조가 되었으며 스크립트 태그에서 추가 속성을 사용할 수 있습니다import modules. 기능적 프로그래머는 이것에 집착하고 있으며 아마도 이것이 Node.js로 확산되는 이유일 것입니다.

<script type="module">
  import * as util from './util.js'
  util.default()
  util.extra()
</script>




<script type="module">
  import { display, extra } from './main.js' // that too
  display.message()
  extra()
</script>

A friend of mine asked why Node doesn't simply use export. This is because Node was there a lot earlier than when the export keyword was introduced. :P



함수로 사용되는 import 키워드는 enable dynamic imports . 스크립트가 내보내는 모든 것을 해결하는 약속을 반환합니다. 이와 같이 가져오기를 사용하면 스크립트 태그의 type="module"속성이 필요하지 않습니다.

import('./util').then(module => window.util = module).catch(console.error)

가져오기는 promises 을 만들기 때문에 이벤트 핸들러 함수가 비동기인 한 DOMContentLoaded 이벤트에서 이를 기다릴 수 있습니다.

document.addEventListener('DOMContentLoaded', async event => {
    window.util = await import('./util')
})

여러 스크립트를 로드하려면 배열을 반복하기만 하면 됩니다.

어떤 이유로 리졸버 함수가 식별자(전체 경로가 아님)로 스크립트를 가져오기를 원할 수 있으며, 이 경우 기본적으로 창으로 설정되는 컨텍스트 개체가 아닌 이유는 무엇입니까? 아래에 보이는 것은 이상적이지는 않지만 요점은 알 수 있습니다.

let libs = ['main', 'utils', 'session']
const init = async (context = window) => libs.forEach(async lib => context[lib] = await import(init.resolve(lib)))
init.resolve = lib => `./js/${lib}.js`


init(window) // libs are now properties of window
init({}) // initialize on empty object
init({
    utils: 'abc'
}) // utils is overwritten

RequireJS 사용



개인적으로 나는 왜 누군가가 이것이 인생에서 필요한 것이라고 생각하는지 이해하지 못했습니다. 그것은 나를 위해 어떤 문제도 해결하지 못했습니다. 그러나 명성 때문에 포함해야 합니다.

requirejs(["util"], util => {
    //This function is called when util.js is loaded.
    window.util = util
})

습득하다



모듈 식별자가 포함된 자체 컨텍스트에서 XMLHttpRequest의 responseText를 평가하는 requirejs의 Asimplification입니다. 당시에는 fetch이 없었습니다. 모듈 스크립트 또는 가져오기/내보내기 키워드가 없습니다. Acquire는 단일 함수 호출로 동기 및 비동기를 모두 지원하지만 동기 XMLHttpRequest는 아마도 가장 많이 사용되지 않는 기간일 것입니다.

If you liked this article then come back here more often on dev.to

nginx 소스 학습 노트 (17) - ngxworker_process_cycle 서브 프로 세 스 실행
[UVA 10881] 전형 적 인 시 뮬 레이 션 문제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage