知道也没啥用的前端知识小讲座_前端知道是什么但不会用-CSDN博客

本文链接：https://blog.csdn.net/qq_45272642/article/details/121853667

1、工具提示

<body><p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p><p title="Free Web tutorials">W3Schools</p></body>

向 HTML 元素添加简单的工具提示不需要 CSS 或 JavaScript。

使用 title 属性，您可以轻松添加工具提示以向用户提供额外信息。

2、断字功能

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>

没有人喜欢 HTML 在不应该的地方断词。

使用 <wbr> ，您可以轻松地找到可以打断单词的点（机会）。

当单词太长并且浏览器很可能在不正确的位置打破它时，这很有用。

(译者注：这个功能在英文书写是非常有用，中文中写拼音的时候，也是可以用的，但是汉字书写，不会把一个字拆成两半）

3、基本手风琴

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

您可以使用详细信息和摘要语义元素创建一个非常基本但简单的手风琴。

用 details 元素包裹你的手风琴元素，标题使用 summary 元素。最后，使用 p 段落元素编写手风琴的主要内容。

4、控制上下文菜单和粘贴

<input type="text" onpaste="return false" value="Paste something in here"><div oncontextmenu="myFunction()" contextmenu="mymenu">

您可以监听事件，例如当他们使用右键单击或尝试粘贴内容并使用 oncontextmenu 和 onpaste 属性处理这些事件时。

如果您不希望用户能够粘贴到密码等字段，您可以在该输入字段上写上 οnpaste="return false" 并且用户将无法粘贴到那里。

类似地，只要用户右键单击该元素，就会触发 oncontextmenu。

5、控制台样式

您是否厌倦了使用相同的控制台？现在我们可以设计我们的控制台。

console.log(`%cabc`, 'font-weight:bold;color:red');

6、AND (&&) 运算符

如果我们想避免一个 if 语句，那么这个速记会很有帮助。

//Longhand if (test1) { callMethod(); }//Shorthand test1 && callMethod();

7、短函数调用

我们可以使用三元运算符来实现这些功能。

// Longhandfunction data1() {    console.log('data1');};function data2() {    console.log('data2');};var data3 = 1;if (data3 == 1) {    data1();} else {    data2();} //data1// Shorthand(data3 === 1 ? data1 : data2)(); //data1

8、空运算符

如果左侧为空或未定义，则此运算符返回右侧值。

const data= null ?? 'data';console.log(data);// expected output: "data"const data1 = 1 ?? 4;console.log(data1);// expected output: 1

逻辑 OR (||) 运算符执行相同的操作，但是，当将 0 作为值传递时，它将视为 false，这使得它容易用于数字。

function add(a, b) {    val1 = a || 1;    val2 = b || 1;    sum = val1 + val2;    return sum;}
console.log(add(0, 0)); //output:2

当我们使用 Nullish 运算符时，同样的事情

function add1(a, b) {    val1 = a ?? 1;    val2 = b ?? 1;    sum = val1 + val2;    return sum;}
console.log(add1(0, 0)); //ouput:0

9、Switch 语句优化

如果你想优化你的 switch 语句，那么，这个语句会有所帮助。

// Longhandswitch (data) {    case 1:        data1();        break;    case 2:        data2();        break;    case 3:        data();        break;        // And so on...}// Shorthandvar data = {    1: data1,    2: data2,    3: data};const val = 1data[val]();function data1() {    console.log("data1");}function data2() {    console.log("data2");}function data() {    console.log("data");}

10、对象属性赋值

当我们想从两个字符串创建对象并保持与字符串相同的键时，可以使用这个技巧来完成。

let data1 = 'abcd'; let data2 = 'efgh';//Longhand let data = {data1: data1, data2: data2};//Shorthand let data = {data1, data2};