经典范例：7个JavaScript最佳实践

文共2976字，预计学习时长6分钟

来源：Pexels

1. 编写构造函数时，在 .prototype上添加方法

根据我头两年接触JavaScript的经历，如果你是一名JavaScript新手，可能会对这部分有些陌生。

（请记住，这并不适用于类，因为类已经将方法附加到它们的prototype上。）

以下是构造函数的一个示例：

functionFrog(name, gender)  {

  this.name= name

  this.gender= gender

Frog.prototype.leap=function(feet) {

  console.log(`Leaping ${feet}ft into the  air`)

为什么不像以下示例一样，直接附加leap方法呢？

functionFrog(name, gender)  {

  this.name= name

  this.gender= gender

  this.leap=function(feet) {

    console.log(`Leaping ${feet}ft into the  air`)

当把方法直接添加到prototype时，它们将在构造函数创建的所有实例之间共享。

换句话说，使用上个例子，如果创建三个独立的 Frog (从 this.leap = function() {...})，然后以创建三个独立的副本结束。这是一个问题，因为leap方法总是保持不变，不需要在实例上建立自己的副本。

最终导致本可以避免的性能下降。this.name 和this.gender属性需要在实例上定义，因为现实生活中，frog可能有自己的名字和性别，所以才在实例级别上创建它们。

这里是流行的request 包使用这种方法的一个示例（在GitHub上）。

2. 使用TypeScript

TypeScript不仅能为类型安全提供强大防御，还能帮助预防错误，已经在JavaScript社区中得到了广泛应用。

使用TypeScript能使编译器在代码运行之前对潜在的错误进行监测并显示警告。

但这还远不能解释为什么TypeScript可以适用于任何情况。TypeScript最好的一点是允许在主流浏览器支持之前使用JavaScript中的新特征，因为这些特征被编译成更早期的JavaScript版本，因此能在旧版本的浏览器中运行。

3. 编写测试

如果要认真处理一个项目，必须使用测试，这样应用程序才更能够更加可预测、少出错、并灵活应对未来的变化。换句话说，如果打算做一个经得起时间考验的项目，没有比在整个代码中建立测试更好的方法。在代码中投入的测试越多，将其应用于生产环境后，对它的信心也会越多。

测试最好的部分是什么？是能捕捉错误，使其无从出现——有人不想要那种能力吗？我确定我想要。这就是我在项目中写单元测试的原因。

来源：Pexels

4. 使用JSON.parse或JSON.stringify时，务必考虑使用 try/catch

JavaScript中，当把JSON作为输入传递给JSON.parse时，需要一个正确格式的JSON作为第一个参数。如果格式不正确，会提示JSON解析错误。

来自JSON解析错误的危险是接受无效的JSON会导致应用程序崩溃。最近我们的一个web项目失败了，因为另一个内置程序包没有在try/catch里安装JSON.parse 。最终导致了web页面失效，而且由于JavaScript运行时被破坏，除非内置程序包修复它，否则无法修正错误。

SyntaxError: Unexpected token }in JSON at position 107

不应总是期望有效的JSON输入，因为它会收到如“>”的奇怪字符，这在今天是很常见的。

5. 使用常规的.type属性进行区分

这个方法很棒，得到了广泛使用。React开发人员可能每天都能看到这种做法，特别是使用Redux工作时。

使用类似方法也能使开发流程变得无比简单，因为它甚至可以很好的记录自己。

functioncreateSpecies(type, name,  gender) {

  if (type ==='frog') {

    returncreateFrog(name, gender)

  } elseif (type ==='human') {

    returncreateHuman(name, gender)

  } elseif (type == undefined) {

    thrownewError('Cannot create  a species with an unknown type')

const myNewFrog =createSpecies('frog', 'sally', 'female')

6. 使用工厂函数（factory function）

如果你不知道什么是工厂函数，那么它就是一个返回对象的函数（它既不是类，也不是构造函数）。通过这个简单概念，就可以利用JavaScript及其特征来创建强大健壮的应用程序。

必须知道，当函数被new关键字调用时，该函数就不再是工厂函数了。

为什么要用工厂函数？

使用工厂函数可以轻松的生成对象实例，且无需涉及类或new关键字。

其本质上意味着，它们最终会被当做函数来对待，即可用于组合对象、函数，甚至Promise函数。这表明可以将工厂函数混合搭配，以创建一个升级版工厂函数，然后继续和别的函数或对象组合创建成更强的工厂函数。其可能性是无穷无尽的。

考虑到这一点，将其与好的代码实践相结合，它便开始大放光彩了。

以下是工厂函数的一个简单示例：

functioncreateFrog(name) {

  const children = []

  return {

    addChild(frog) {

      children.push(frog)

},

const mikeTheFrog =createFrog('mike')

当使用足够多的工厂函数后，会意识到工厂函数比类构造函数有更强的可重用性。这减少了代码量，缩短了代码重构时间(因为工厂函数最终会返回任意对象)，缩短了从一个代码到另一个代码的管理时间。

来源：Pexels

7. 使函数尽可能的简单

众所周知，在JavaScript中很可能有同时做很多事情的大型函数。

编程新手可能觉得这是一件好事——之前当我写了很大篇幅可以工作的代码后，我的自我感觉非常好。这对我来说很重要，并给予我很大信心。毕竟它能正常运行，我就把自己的代码有多么冗长这件事抛之脑后了。天哪，当时太幼稚了。

如果想写更易维护的、简单的、少出错的代码，最好使它尽量简洁短小。代码越简洁，单独测试也会越容易。

如果你更喜欢函数式编程范式，这一点尤其重要。函数执行一件事就应该把它做好，这是常识。

希望对你有用，获得更完美的JavaScript的最佳实践。

留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规范

tml叫做超本文标记语言，注意它只是标记语言，不是编程语言。

编写规范：

由标记（html, div, p, h1等）组成
标记成对出现（<html>...</html>），也有例外，比如<img src=""/>、
标记有层级关系

<html>
    <head>
    </head>
    <body>
    </body><html>

标记有内容文本或属性

<title>这是一个标签</title><meta name="" content=""></meta>

注意：

html不区分大小写
建议大家用双引号

当然单引号也可以，但是双引号才是professional的表现

html基本结构

<!DOCTYPE html><html lang="en">    <head>
        <meta charset="UTF-8">
        <title>Title</title>    </head>    <body>    </body></html>

doctype：必须这样写
html：其实不写也可以，为了规范，还是写上吧
head：用来设置网页的信息，比如标题、小图标等
body：网页内容（可视化标签）

特殊符号

空格：【分号是必须写的】

注意，空格这里写一个表示添加了一个空格，写多个也只会有一个空格

好，现在我们新建一个名为index.html的文件，你可以在桌面建一个txt文件，然后修改扩展名为HTML，然后打开方式选择sublime，或者其他编辑器。船长这里是建了一个flask项目，然后在templates文件夹下新建了一个。这里提醒大家的是，以后大家能用英文的地方尽量用英文，比如文件夹名、文件名等，不然会有各种问题等着你。

用pycharm这种IDE的话发现它会帮你写好模板，这里建议大家清空然后自己写一遍加深印象：

<!DOCTYPE html><html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        Hello World!    </body></html>

写了Hello World!你就开始了HTML学习啦~

先和大家说一下什么是可视化标签，一句话：可以在<body>中看到的标签就是可视化标签，比如<p>、<body>、<div>等这些都是可以看到的，所以是可视化标签；而<style>、<meta>等在<body>中不能看到的标签，就是非可视化标签。注意：只有可视化标签，才能用css改变它的样式。

常用的可视化标签

这里只说几个有代表性的，其实所有标签都差不多，就像钢笔和铅笔一样，都是写字用的，只是作用不一样。

<!DOCTYPE html>
<html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>
        <style>
            div{
                border:1px solid green;
            }
            span{
                border:1px solid red;
            }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
    </body>
</html>

上面代码页面没讲的内容大家不要急，后面会讲。显示：

发现上面那个框比较长，下面的和文字长度一样，这是因为有一个display属性，div标签display默认值是block，span标签display默认值是inline，所以如果我把span标签的display值改为block，那么两个显示就会相同了：

<!DOCTYPE html><html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>
        <style>
            div{                border:1px solid green;                                display: block;                        }
            span{                border:1px solid red;                                display: block;                        }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
    </body></html>

显示：

（代码里style标签里的内容就是css修改可视化标签的方式。）

我们再加一个p标签：

<!DOCTYPE html><html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>
        <style>
            div{                border:1px solid green;                                display: block;                        }
            span{                border:1px solid red;                                display: block;                        }
            p{                border: 1px solid palevioletred;                        }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
        <p>This is a p</p>
    </body></html>

发现p标签和上面的内容空了一行，这是因为p标签的margin属性默认值不是0，所以如果想去掉空行，只需要在style中修改p标签margin值为0：

<!DOCTYPE html><html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>
        <style>
            div{                border:1px solid green;                                display: block;                        }
            span{                border:1px solid red;                                display: block;                        }
            p{                border: 1px solid palevioletred;                                margin: 0px;                        }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
        <p>This is a p</p>
    </body></html>

看到页面样式变成了这样：

a标签

a标签因为有一个href属性，才变成了一个超链接，而div标签就没有href属性，以后我们遇到****页面跳转或表单提交的的文字，都用a标签：

<!DOCTYPE html><html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>
        <style>
            div{                border:1px solid green;                                display: block;                        }
            span{                border:1px solid red;                                display: block;                        }
            p{                border: 1px solid palevioletred;                                margin: 0px;                        }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
        <p>This is a p</p>
        <a href="https://www.baidu.com">百度</a>
    </body></html>

这里要注意的是，href属性的地址写的时候必须加协议，就是http或https或file等，如果不加就会页面跳转错误。此外，大家看到这样写页面是在当前页面进行，跳转，很多时候页面跳转需要新开标签页，那么我们就要给a标签增加一个target属性，值为_blank：

<a href="https://www.baidu.com" target="_blank">百度</a>

这个target默认值为_self。

img标签

我们先看一下文档结构：

这里我们文件当前位置就是lesson.html，所以现在我们img属性src给的值要进入imgs文件夹，所以我们可以用相对路径来表示，看代码：

<!DOCTYPE html><html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>

    </head>
    <body>
        <a href="https://www.baidu.com" target="_blank">百度</a>
        <img src="imgs/0.png">
    </body></html>

上面src后面跟的就是相对路径。

页面显示：

src除了用来设置图片路径以外，还用来设置alt属性，alt属性是用来给搜索引擎用的，以便你写的页面可以被搜索引擎搜索到。此外它还有width和height属性，比如刚才的图片比较大，我们现在修改图片的大小，只需要：

<img src="imgs/0.png" width="5%" height="5%">

如果你希望自己的图片是网络上的图片，那只需要粘贴你希望放上去的图片地址，比如，放百度的背景，那么只需要看一下百度的地址：

然后复制这个地址，粘贴到你的src路径里：

<img src="https://www.baidu.com/img/bd_logo1.png" width="50%" height="50%">

但是要注意，如果图片写的是网络上的图片，要必须确定有网，不然图片是不显示的。

ul li标签

这两个标签是列表。

<!DOCTYPE html><html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>

    </head>
    <body>
        <a href="https://www.baidu.com" target="_blank">百度</a>
        <img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">
        <ul>
            <li>第一行</li>
            <li>第二行</li>
            <li>第三行</li>
        </ul>
    </body></html>

显示：

你可能会说除了ul li还有ol li，不用管那么多，记住这个就够了。
记住，只要页面中有固定样式的列表，那就用ul li，比如：

不信大家就去天猫看一下。

table

表格。之前说过了，以今天的为准。tr代表行，td代表列。

<table>
    <tr>
        <td>第1行1列</td>
        <td>第1行2列</td>
    </tr>
    <tr>
        <td>第2行1列</td>
        <td>第2行2列</td>
    </tr></table>

显示：

如果想显示边框，可以加个border属性：

<table border="1">...</table>

还要知道，table已经用的很少了，因为存在浏览器的兼容性，很多时候都被ul li代替了。大家会想到上次还说的tbody现在却没有写，其实即使我们不写浏览器也会帮我们加上：

上图中的tbody就是浏览器默认给我们加上的。此外，如果是表的第一行，需要加粗显示的话，可以将tr改为th：

<table border="1">
    <tr>
        <th>第1行1列</th>
        <th>第1行2列</th>
    </tr>
    <tr>
        <td>第2行1列</td>
        <td>第2行2列</td>
    </tr></table>

th用来做表头，默认字体居中显示。还有caption作为表格的标题：

<table border="1">
    <caption>表格标题</caption>
    <tr>
        <th>第1行1列</th>
        <th>第1行2列</th>
    </tr>
    <tr>
        <td>第2行1列</td>
        <td>第2行2列</td>
    </tr></table>

tbody和caption等这些都不用记。

合并表格：

<table border="1">
    <caption>表格标题</caption>
    <tr>
        <th>第1行1列</th>
        <th>第1行2列</th>
        <th>分数</th>
    </tr>
    <tr>
        <td>第2行1列</td>
        <td>第2行2列</td>
        <td>10</td>
    </tr>
    <tr>
        <td colspan="2">总成绩</td>                        
        <td>20</td>
    </tr></table>

我们给td标签加了colspan="2"，就可以合并两行了：

最后给大家看一个例子，图片来自https://nba.hupu.com/teams：

<!DOCTYPE html><html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>

    </head>
    <body>
        <a href="https://www.baidu.com" target="_blank">百度</a>
        <img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">
        <ul>
            <li>第一行</li>
            <li>第二行</li>
            <li>第三行</li>
        </ul>
        <table border="1">
            <caption>表格标题</caption>
            <tr>
                <th>第1行1列</th>
                <th>第1行2列</th>
                <th>分数</th>
                <th>一整行</th>
            </tr>
            <tr>
                <td><img src="imgs/0.png"></td>
                <td><img src="imgs/1.png"></td>
                <td><img src="imgs/2.png"></td>
                <td rowspan="3"><img src="imgs/logo.png"></td>
            </tr>
            <tr>
                <td><img src="imgs/3.png"></td>
                <td><img src="imgs/4.png"></td>
                <td><img src="imgs/5.png"></td>
            </tr>
            <tr>
                <td><img src="imgs/6.png"></td>
                <td><img src="imgs/7.png"></td>
                <td><img src="imgs/8.png"></td>
            </tr>
        </table>
    </body></html>

显示：

写会了上面这个例子，table这里就没什么问题了。大家想学就得加把劲，自己不努力谁也教不会。

如果对接口、性能、自动化测试、面试经验交流等感兴趣的，可以关注我的头条号，我会不定期的发放免费的资料，这些资料都是从各个技术网站搜集、整理出来的，如果你有好的学习资料可以私聊发我，我会注明出处之后分享给大家。欢迎分享，欢迎评论，欢迎转发。需要资料的同学可以关注小编+转发文章+私信【测试资料】

案例研究演示了如何构建一个完整的 <AppML> 互联网应用程序，具有针对数据库中的若干表进行信息列举、编辑和搜索的功能。

添加 HTML 模板

我们将演示如何向 HTML 页面添加 HTML 模板。

列出客户

HTML - View

<h1>Customers</h1>

<tr>

<th>Customer</th>

<th>Country</th>

</tr>

<td>#CustomerName#</td>

<td>#Country#</td>

</tr>

</table>

var customers

customers=new AppML("appml.php","Models/Customers");

customers.run("List01","Template01");

</script>

在线咨询

上一篇：给机友发福利啦！笔记本游戏优化秘籍
下一篇：静态网页是什么及其优缺点有哪些？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

经典范例：7个JavaScript最佳实践

1. 编写构造函数时，在 .prototype上添加方法

2. 使用TypeScript

3. 编写测试

4. 使用JSON.parse或JSON.stringify时，务必考虑使用 try/catch

5. 使用常规的.type属性进行区分

6. 使用工厂函数（factory function）

7. 使函数尽可能的简单

注意：

html基本结构

特殊符号

常用的可视化标签

您的项目需求