前端开发人员的 8 个实用技巧

您可以获得令人惊叹的扩展程序，每天更新令人惊叹的开发新闻

这篇文章分享了一些开发者们不知道的独家秘诀（🤐）。这些技巧将助你事业腾飞，提升你的效率，让你的开发水平更上一层楼。

数据列表标签

<input>您可以使用该标签为元素创建“自动完成”功能<datalist>。使用此功能，您将在输入时创建一个预定义选项的下拉列表。

<input list="cars" name="car" id="car">
<datalist id="cars">
     <option value="BMW">   
     <option value="Mustang">    
     <option value="Sienna">      
     <option value="Avalon">   
     <option value="Fortuner">   
</datalist>

CSS cal() 函数

此函数允许您在指定 CSS 属性值时执行计算。它最有用的功能calc()是混合单位，例如百分比和像素。

width: calc(5px + 100px)
width: calc(6em * 8)
width: calc(100% - 5px)

in 运算符

该in运算符可以检查数组中是否存在索引，并返回 true 或 false。

let cars = ['tesla', 'bentley', 'mustang', 'fortuner', 'Audi', 'BMW']; 

0 in cars // returns true
2 in cars // returns true
9 in cars // returns false

控制台.table()

该工具允许您通过获取数组对象以非常整洁的方式在控制台视图中显示表格。

let actor = {name: 'Leonardo Di Caprio', movie: "Titanic"}
let actor2 = {name: "Shah Rukh Khan", movie: "DDLJ"}
let actor3 = {name: "Robert Downey JR", movie: "Iron Man 2"}

console.table([actor, actor2, actor3]);

写作模式

此技巧允许文本垂直排列。此属性有五个可能的选项。

<p class="nlt">Subscribe to DevWriteUps</p>

<style>
 .nlt {
   writing-mode: vertical-rl;
 }
</style>

法律或 TnC

您可以使用标签在页面底部添加法律文件、引文、条款和条件或其他印刷品<small>。

<p>
  <small>* Please read Terms and Conditions</small>
</p>

数学方程式

在 HTML5 中，利用 MathML 语言嵌入数值问题非常简单。您可以将所有方程式放在<math>标签之间。

<math>
            <mrow>
                <mrow>
                    <msup>
                        <mi>a</mi>
                        <mn>2</mn>
                    </msup>
                    <mo>+</mo>
                    <msup>
                        <mi>b</mi>
                        <mn>2</mn>
                    </msup>
                </mrow>
                <mo>=</mo>
                <msup>
                    <mi>c</mi>
                    <mn>2</mn>
                </msup>
            </mrow>
</math>

直系子女

利用 > 选择组件的直系后代。

#footer > a

这将选择并设置页脚 ID 下所有动态链接组件的样式。它不会选择动态组件以外的任何内容，也不会选择页脚中包含的其他任何内容，例如纯文本。这对于高级路由组件也同样有效。

感谢您的阅读🤩订阅我们的时事通讯，我们会不时发送令人惊奇的新闻、资源和许多东西。

文章来源：https://dev.to/devwriteups/8-unique-and-secret-tricks-front-end-developers-don-t-know-27f7