江苏龙网

  1. 主页 > 生活百科 > >

你不可不知的 15 个 JavaScript 小贴士

JavaScript

在掌握如何编写JAVAScript代码之后，那么就进阶到实践——如何真正地解决问题 。我们需要更改JS代码使其更简单、更易于阅读，因为这样的程序更易于团队成员之间紧密协作 。
今天，我们将介绍15个最佳实践技巧，可帮助简化JavaScript代码，易于其他开发人员理解 ， 也使程序更具可读性和可维护性 。
1. 在顶部声明并初始化变量没有什么比延迟声明更能破坏可读性的了 。正如在开始工作之前准备好所有工具可以帮助简化工作，在进入函数的细节之前声明所有变量也可以让程序更简单 。这也方便了我们以后调整变量名称或值 。
至于变量 ， 最佳做法是在创建时初始化变量，以便你和你的团队都可以确定没有undefined的变量 。
【你不可不知的 15 个 JavaScript 小贴士】<script>var x = 5;</script>2. 构建模块化、专业化的函数为了效率和可读性，单个函数走天下是不可行的 。所以我们在设计函数时，应该秉持着一个任务一个函数的原则 。函数命名也应当匹配任务 。
这样做是不是更方便其他人阅读代码了呢？因为只处理一项任务 ， 自然而然函数就会更简单 。甚至以后如果有需要 ， 你和你的团队还可以将此函数应用到其他程序 。
请看下面的示例，改进后的代码只看函数名和变量名，就可以清楚地知道任务目的 。
function table (columns, rows, item){creates table and searches it for the passed item}// compared tofunction createTable (columns, rows){//creates table}function searchTable (table.length, item) {//searches table for the passed item}3. 识别并删除重复代码有时，代码中不可避免地会出现重复的代码行 。在这种情况下，应将重复的代码改写为函数，并在以前所有使用过这些代码的地方改为调用函数 。
这不但减少了视觉混乱，还有助于以后的调试 ， 因为这样一来团队只需要查看函数 ， 而不必一一检查多处代码 。
<script>var x = 5;var y = 6;var x = x*2var y = y*2</script><script>var x = 5;var y = 6;function double (value){return value*2;}double (x);double(y);</script>4. 多注释代码注释是总结代码片段目的的好方法，可以节省其他开发人员靠自己去确定代码所需的时间 。
如果代码未完成注释描述应完成的任务，还能及时捕获可能的错误 。一般来说，最好每个函数都有一条注释 。
不确定应不应该写注释？那就写吧！如果太过杂乱 ， 大不了以后删除罢了 。
//declares and initializes var x<script>var x = 5;</script>5. 谨防过度使用递归注意：递归函数不要嵌套太多层 。虽然说多层嵌套能一次解决许多问题 ， 但我们很难一目了然 。
为避免困惑，尽可能在不产生大量运行时成本的前提下，解放嵌套的递归函数 。如果你有3+层的嵌套函数，那么你的同事可能很难跟上你的思路 。
function1 (a,b){function2{function3{//this is too hard to follow and can likely be solved another way}}}</script>6. 高效使用DOM操作访问DOM对于充分利用程序至关重要，但反复这样做会导致视觉混乱并会减慢程序速度 。
因此，我们最好访问一次并进行缓存，以供稍后在变量中使用 。然后有需要的话，直接访问变量而不是访问DOM 。这个过程在视觉上更干净、更高效 。
注意：最佳做法是使用$符号标记DOM引用 。
function accountInfo(){var emAIl = $("#accounts").find(".email").val();var accountNumber = $("#accounts").find(".accountNumber").val();}// Contents cached to variable "accounts"function accountInfo(){ var $accounts = $("#accounts"); var name = $accounts.find(".email").val(); var age = $accounts.find(".accountNumber").val();}7. 不惜一切代价避免全局变量在JavaScript中，变量具有或全局或局部的作用域 。作用域决定了在代码何处定义和访问变量 。我们可以在程序中的任何位置，甚至函数之外定义全局变量 。而局部变量仅用于定义的函数中 。
如果存在同名的局部变量和全局变量，那么JavaScript将优先考虑局部变量并忽略全局变量 。我们应避免使用全局变量，因为全局变量可能会意外覆盖窗口变量，从而导致错误 。
此外，过多的全局变量会减慢程序速度，因为在窗口关闭之前不会删除全局变量，而局部变量会在函数完成后删除 。
<html><script>var myVar = "my global variable"; // This variable is declared as globalfunction localVariable( ) {var myVar = "my local variable";// This is a locally declared variable</script></body></html>


推荐阅读


上一篇：又出新JS运行时了！JS运行时大盘点

下一篇：你关注的网红博主 可能是“假人”