内容简介：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.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
数据挖掘十大算法
（美）吴信东（Xindong Wu）、（美），库玛尔 ，（Vipin Kumar） / 李文波、吴素研 / 清华大学出版社 / 2013-5 / 39.00元
《世界著名计算机教材精选：数据挖掘十大算法》详细介绍了在实际中用途最广、影响最大的十种数据挖掘算法，这十种算法是数据挖掘领域的顶级专家进行投票筛选的，覆盖了分类、聚类、统计学习、关联分析和链接分析等重要的数据挖掘研究和发展主题。《世界著名计算机教材精选：数据挖掘十大算法》对每一种算法都进行了多个角度的深入剖析，包括算法历史、算法过程、算法特性、软件实现、前沿发展等，此外，在每章最后还给出了丰富的习......一起来看看 《数据挖掘十大算法》 这本书的介绍吧!
