未加星标

Loading scripts on your webpage

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

I missed my train and have a hour to fill so let's talk about something simple, loading scripts on a webpage.

As a bundle

A super easy way to enforce all your scripts being loaded is to bundle them all into one single file. This however is expensive (stupid) because you can not import only the ones you need this way.

As scripts document

As little ducklings we were taught to place scripts in the document head as they are loaded first thing immediately when loading the webpage.

<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>

A script element inside the document head can not access HTML elements declared after the script because when the script is being loaded, the target element does not exist yet. In other words, in the above example you can not access the h1 element from main.js . This is why often ducklings want their scripts to be loaded after the rest of the page already has.

As scripts at end of body

If you want to execute your scripts after the document has loaded then simply put them at the end of your body.

It became common practice at some point to do this because it would speed up loading of your page. What they mean by this is that the page images and stylesheets will already have been loaded. The script tags do not block/delay them. This is much better for the user.

<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>

It is very possible to access elements on the page from scripts declared in the page head but you have to wait for an event that tells you the page has loaded. In the old days one assigned an onload attribute to the page body.

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

Everybody knows the following.

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

This is almost the same as above but without jQuery.

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

You can imitate some sort of require function by injecting scripts into your head . This really not as scary as it sounds.

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') With async function

Some people insist on wrapping mutliple promises into an asynchronous function.

// 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') } As modules

It is now 2018, the ducklings have become swans and we can import modules using an extra attribute in our script tags. The functional programmers are bent on this and they are probably the reason it is spreading to Node.

<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

The import keyword used as a function enables dynamic imports . It returns a Promise that resolves whatever the script exports. Using import like this does not require the type="module" attribute of your script tag.

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

Because import makes promises , we can await it in the DOMContentLoaded event as long as our event handler function is async.

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

To load multiple scripts, simply iterate an Array

For some reason you might want a resolver function to import scripts by identifier (not full path) and why not a context object that in this case defaults to window. What you see below is not ideal but you get the point.

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 Using RequireJS

Personally I never understood why anyone would think that this is what they need in life. It never solved any problems for me. However because of its reputation it needs to be included.

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

A simplification of requirejs that evaluates the responseText of a XMLHttpRequest in its own context that contains a module identifier. There was no fetch at the time. There were no module scripts or import/export keywords. Acquire supports both synchronous and asynchronous with a single function call but a synchronous XMLHttpRequest is perhaps the most deprecated thing you can do period.

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Loading scripts on your webpage
本站链接:https://www.codesec.net/view/611097.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(67)