首页

这些 ECMAScript 模块知识，都是我需要知道的

seo达人

ES 模块是什么？

ECMAScript模块（简称ES模块）是一种JavaScript代码重用的机制，于2015年推出，一经推出就受到前端开发者的喜爱。在2015之年，JavaScript 还没有一个代码重用的标准机制。多年来，人们对这方面的规范进行了很多尝试，导致现在有多种模块化的方式。

你可能听说过AMD模块，UMD，或CommonJS，这些没有孰优孰劣。最后，在ECMAScript 2015中，ES 模块出现了。

我们现在有了一个“正式的”模块系统。

ES 模块无处不在？

理论上，ES 模块应该在所有JavaScript环境中。实际上，ES 模块的主要应用还是在浏览器上。

2020年5月，Node.js v12.17.0 增加了在不使用标记前提下对ECMAScript模块的支持。 这意味着我们现在可以在Node.js中使用import和export ，而无需任何其他命令行标志。

ECMAScript模块要想在任何JavaScript环境通用，可能还需要很长的路要走，但方向是正确的。

ES 模块是什么样的

ES 模块是一个简单的文件，我们可以在其中声明一个或多个导出。以下面utils.js为例: 

// utils.js export function funcA() { return "Hello named export!";
} export default function funcB() { return "Hello default export!";
}

这里有两个导出。

第一个是命名导出，后面是export default，表示为默认导出。

假设我们的项目文件夹中有一个名为utils.js的文件，我们可以将这个模块提供的对象导入到另一个文件中。

如何从 ES模块 导入

假设我们在项目文中还有一个Consumer.js的文件。 要导入utils.js公开的函数，我们可以这样做： 

// consumer.js import { funcA } from "./util.js";

这种对应我们的命名导入方式.

如果我们要导入 utils.js 中的默认导出也就是 funcB 方法，我们可以这样做： 

// consumer.js import { funcA } from "./util.js";

当然，我们可以导入同时导入命名和默认的： 

// consumer.js import funcB, { funcA } from "./util.js";

funcB();
funcA();

我们也可以用星号导入整个模块： 

import * as myModule from './util.js';

myModule.funcA();
myModule.default();

注意，这里要使用默认到处的方法是使用 default() 而不是 funcB()。

从远程模块导入： 

import { createStore } from "https://unpkg.com/redux@4.0.5/es/redux.mjs"; const store = createStore(/* do stuff */)

浏览器中的 ES 模块

现代浏览器支持ES模块，但有一些警告。 要使用模块，需要在 script 标签上添加属性 type， 对应值 为 module。 


    <html lang="en"> <head> <meta charset="UTF-8"> <title>ECMAScript modules in the browser</title> 






    


        

            </head> <body> <p id="el">The result is:
        


        


            

                 </p> </body> <script type="module"> import { appendResult } from "./myModule.js"; const el = document.getElementById("el");
    appendResult(el); 
            

 appendResult(el); 
        

 appendResult(el); 
    

 appendResult(el); 


 appendResult(el); </script> </html>

myModule.js 内容如下： 

export function appendResult(element) { const result = Math.random();
  element.innerText += result;
}

动态导入

ES 模块是静态的，这意味着我们不能在运行时更改导入。随着2020年推出的动态导入(dynamic imports)，我们可以动态加载代码来响应用户交互(webpack早在ECMAScript 2020推出这个特性之前就提供了动态导入)。

考虑下面的代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

<title>Dynamic imports</title> </head> <body> <button id="btn">Load!</button> </body> <script src="loader.js"></script> </html>

再考虑一个带有两个导出的JavaScript模块 

// util.js export function funcA() { console.log("Hello named export!");
} export default function funcB() { console.log("Hello default export!");
}

为了动态导入 util.js 模块，我们可以点击按钮在去导入： 

/ loader.js
const btn = document.getElementById("btn");

btn.addEventListener("click", () => { // loads named export import("./util.js").then(({ funcA }) => {
    funcA();
  });
});

这里使用解构的方式，取出命名导出 funcA 方法： 

({ funcA }) => {}

ES模块实际上是JavaScript对象：我们可以解构它们的属性以及调用它们的任何公开方法。

要使用动态导入的默认方法，可以这样做 

// loader.js const btn = document.getElementById("btn");

btn.addEventListener("click", () => { import("./util.js").then((module) => { module.default();
  });
});

当作为一个整体导入一个模块时，我们可以使用它的所有导出 

// loader.js const btn = document.getElementById("btn"); 


    btn.addEventListener("click", () => 





    { // loads entire module // uses everything import("./util.js").then((module) => { module.funcA(); module.default();


 });
});

还有另一种用于动态导入的常见样式，如下所示： 

const loadUtil = () => import("./util.js"); const btn = document.getElementById("btn");

btn.addEventListener("click", () => { // });

loadUtil返回的是一个 promise，所以我们可以这样操作 

const loadUtil = () => import("./util.js"); const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  loadUtil().then(module => { module.funcA(); module.default();
  })
})

动态导入看起来不错，但是它们有什么用呢？

使用动态导入，我们可以拆分代码，并只在适当的时候加载重要的代码。在 JavaScript 引入动态导入之前，这种模式是webpack(模块绑定器)独有的。

像React和Vue通过动态导入代码拆分来加载响应事件的代码块，比如用户交互或路由更改。

动态导入JSON文件

假设我们项目有一个 person.json 文件，内容如下： 

{ "name": "Jules", "age": 43 }

现在，我们需要动态导入该文件以响应某些用户交互。

因为 JSON 文件不是一个方法，所以我们可以使用默认导出方式： 

const loadPerson = () => import('./person.json'); const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  loadPerson().then(module => { const { name, age } = module.default; console.log(name, age);
  });
});

这里我们使用解构的方式取出 name 和 age : 

const { name, age } = module.default;

动态导入与 async/await

因为 import() 语句返回是一个 Promise，所以我们可以使用 async/await: 

const loadUtil = () => import("./util.js"); const btn = document.getElementById("btn");

btn.addEventListener("click", async () => { const utilsModule = await loadUtil();
  utilsModule.funcA();
  utilsModule.default();
})

动态导入的名字

使用import()导入模块时，可以按照自己的意愿命名它，但要调用的方法名保持一致： 

import("./util.js").then((module) => { module.funcA(); module.default();
  });

或者： 

 import("./util.js").then((utilModule) => {
    utilModule.funcA();
    utilModule.default();
  });

原文：https://www.valentinog.com/bl...

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

评论(0) 浏览(1658)

这些 CSS 伪类，你可能还不知道，可以用起来了！

seo达人

css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。


这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。熟悉 CSS 所提供的一切是实现这一目标的一种方法，另一种方法是实现最佳实践并尽可能多地重用代码。


接下介绍一些大家可能还不熟悉的一些伪类及其用例，希望对大家日后有所帮助。


::first-line | 选择文本的第一行

::first-line 伪元素在某块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。


::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用。在其他的类型中，::first-line 是不起作用的。


用法如下：


p:first-line {

 color: lightcoral;

}

::first-letter | 选择这一行的第一字

CSS 伪元素 ::first-letter会选中某块级元素第一行的第一个字母。用法如下：


<style>

   p::first-letter{

     color: red;

     font-size: 2em;

   }

</style>


<p>前端小智，不断努，终身学习者！</p>

clipboard.png


::selection| 被用户高亮的部分

::selection 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。


div::selection {

     color: #409EFF;

}

clipboard.png


:root | 根元素

:root 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。


在声明全局 CSS 变量时 :root 会很有用：


:root {

 --main-color: hotpink;

 --pane-padding: 5px 42px;

}

:empty | 仅当子项为空时才有作用

:empty 伪类代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）,注释或处理指令都不会产生影响。


div:empty {

 border: 2px solid orange;

 margin-bottom: 10px;

}


<div></div>

<div></div>

<div>

</div>

clipboard.png


只有第一个和第二个div有作用，因为它们确实是空的，第三个 div 没有作用，因为它有一个换行。


:only-child | 只有一个子元素才有作用

:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点。


p:only-child{

 background: #409EFF;

}


<div>

 <p>第一个没有任何兄弟元素的元素</p>

</div>

<div>

 <p>第二个</p>

 <p>第二个</p>

</div>

clipboard.png


:first-of-type | 选择指定类型的第一个子元素

:first-of-type表示一组兄弟元素中其类型的第一个元素。


.innerDiv p:first-of-type {

 color: orangered;

}

上面表示将 .innerDiv 内的第一个元素为 p 的颜色设置为橘色。


<div class="innerDiv">

   <div>Div1</div>

   <p>These are the necessary steps</p>

   <p>hiya</p>

   

   <p>

       Do <em>not</em> push the brake at the same time as the accelerator.

   </p>

   <div>Div2</div>

</div>

clipboard.png


:last-of-type | 选择指定类型的最后一个子元素

:last-of-type CSS 伪类 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。


.innerDiv p:last-of-type {

   color: orangered;

}

上面表示将 .innerDiv 内的的最后一个元素为 p 的颜色设置为橘色。


clipboard.png


nth-of-type() | 选择指定类型的子元素

:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。


.innerDiv p:nth-of-type(1) {

   color: orangered;

}


<div class="innerDiv">

 <div>Div1</div>

 <p>These are the necessary steps</p>

 <p>hiya</p>

 

 <p>

     Do <em>not</em> push the brake at the same time as the accelerator.

 </p>

 <div>Div2</div>

</div>

clipboard.png


:nth-last-of-type() | 在列表末尾选择类型的子元素

:nth-last-of-type(an+b) 这个 CSS 伪类 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处。


.innerDiv p:nth-last-of-type(1) {

   color: orangered;

}

这会选择innerDiv元素中包含的类型为p元素的列表中的最后一个子元素。


<div class="innerDiv">

   <p>These are the necessary steps</p>

   <p>hiya</p>

   <div>Div1</div>

   <p>

       Do the same.

   </p>

   <div>Div2</div>

</div>

clipboard.png


:link | 选择一个未访问的超链接

:link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover选择器，:active选择器，:visited选择器）。


为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。


a:link {

   color: orangered;

}

<a href="/login">Login<a>

clipboard.png


:checked | 选择一个选中的复选框

:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")。


input:checked {

 box-shadow: 0 0 0 3px hotpink;

}


<input type="checkbox" />

clipboard.png


大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。


:valid | 选择一个有效的元素

:valid CSS 伪类表示内容验证正确的<input> 或其他 <form> 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。


input:valid {

 box-shadow: 0 0 0 3px hotpink;

}

clipboard.png


:invalid | 选择一个无效的元素

:invalid CSS 伪类 表示任意内容未通过验证的 <input> 或其他 <form> 元素。


input[type="text"]:invalid {

   border-color: red;

}

:lang() | 通过指定的lang值选择一个元素

:lang() CSS 伪类基于元素语言来匹配页面元素。


/* 选取任意的英文（en)段落 */

p:lang(en) {

 quotes: '\201C' '\201D' '\2018' '\2019';

}

:not() | 用来匹配不符合一组选择器的元素

CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。


来看一个例子：


.innerDiv :not(p) {

   color: lightcoral;

}

<div class="innerDiv">

   <p>Paragraph 1</p>

   <p>Paragraph 2</p>

   <div>Div 1</div>

   <p>Paragraph 3</p>

   <div>Div 2</div>

</div>

clipboard.png


Div 1 和 Div 2会被选中，p 不会被选 中。


原文：https://blog.bitsrc.io/css-ps...


代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。



评论(0) 浏览(1703)

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档