内容简介：The browsers are rolling out updates to support more of the latest features of JavaScript defined byUnsurprisingly,
The browsers are rolling out updates to support more of the latest features of JavaScript defined by ECMAScript technical committee 39 . Have you thought about how much can we write today without using an app bundler like Webpack , Rollup.js or Parcel ? Below I will go through a few JavaScript features we can use in today’s modern web browser when building a new web app.
Photo by Tetiana Shadrina on Unsplash
Unsurprisingly, Internet Explorer doesn’t support many of these features, however, Edge seems to do a decent job.
The idea behind this post is to begin to consider whether or not a bundler is really needed, because it has become the norm to use one for lots of JS apps. A bundler is an additional dependency which you may need to configure quite extensively to get the output you need, adding significant complexity before building any app features. I’m not saying we don’t need them, but it could be possible to start a project without a bundler, and add it in at a later stage when you find the need. Perhaps you have a small enough project where it’s not needed: perhaps a Chrome extension for example.
New language features added in the browser
Below are a few new JavaScript features which will work in most modern browsers.
-
letandconstfor declaring variables and destructuring assignment . - Template literals are string literals allowing embedded expressions and can be multiline.
string literal ${expression} - Rest/spread operator
...take remaining values (rest) or apply key/values (spread) to an object or array. - Arrow function expressions
() => {}, is a more compact syntax than the normal function expression and does not have its ownthisbut instead it uses the enclosing lexical scope.
Examples
const letters = ["a", "b", "c", "d", "e"];
const starter = {
hello: "hello",
world: "world"
};
const [a, b, ...rest] = letters;
console.log(a, b); // => a b
console.log(rest); // => ["c", "d", "e"]
const spread = rest;
const numsLetters = [1, 2, ...spread];
console.log(numsLetters); // => [1, 2, "c", "d", "e"]
const { hello } = starter;
console.log(hello); // => hello
let count = 1;
count += 5;
console.log(count) // => 6
console.log(`Template literals ${starter.world}`) // => Template literals world
const arrowLog = (message) => console.log(`->: ${message}`)
arrowLog("point"); // => ->: point
Async/Await and making HTTP requests
You will be pleased to know that async/await is supported in the browser which will make using native fetch API even easier to work with.
async function getRecipe() {
const res = await fetch(
"https://api.github.com/search/repositories?q=tetris+language:assembly&sort=starsℴ=desc"
);
const data = await res.json();
console.log(data);
return data;
}
JavaScript modules and organising your app files
With most applications you will want to separate your app into modules. Typically you will create a new file which will export an object or function that can be imported in another file. This means it would need to support a module system.
Modern browsers do support ECMAScript modules by adding a script tag with the type="module" and here are some points to note about this approach. See module browser support .
- Each module has its own scope which is not the global one
- Strict mode is always ‘on’, even when “use strict” directive is not provided
- The module may import other modules using import directive
- The module may export bindings using export
Another interesting attribute of a module script is it behaves like a defer ed script, in that is will not block the parsing of the HTML and execute after parsing has completed. In the example below you can see the script tag is in the head but our imported module will reference the div tag further along.
Example use of module script tag
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
// index.js
import { startApp } from "./todo-app.js";
startApp();
// todo-app.js
export function startApp() {
const appBox = document.getElementById("app");
appBox.innerHTML += "I was imported";
}
It is also possible to do an inline import, see below:
<script type="module">
import { startApp } from "./todo-app.js";
startApp();
</script>
Read more details about module script tag here.
Potentially you could have a small project or start a new one without the need of a bundler. If you decide to not use a bundler, I’d like to hear what challenges you faced and what you tried to do to solve them? Let me know on, or in the comments below.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
