7个步骤:让JavaScript变得更好

Dan Odell介绍了他编写的七步写出无瑕代码的计划,是在简化过程中最有用的工具。

  随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加。然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力。 

  开发人员必须使用所有供他们任意使用的工具和技术来提升他们的代码的质量,并有信心确认每次的执行都是可以预见的。这是一个在我心灵深处的话题并且我已经工作多年找到一组开发过程中来遵循的步骤以确保只有最高质量的代码可以被发布。

  您只要按照这七个步骤操作就会大大提高您的JavaScript项目的质量。使用这个工作流程,错误将会减少并且将很多处理优化,让用户拥有一个愉悦的上网浏览体验。

  01.代码

  首先在你的函数里调用ECMAScript5的严格模式和一个“严格模式”的声明,并使用该模块的设计模式,在自执行的函数闭包里,通过沙箱独立的代码模块尽量减少全局变量内的使用,通过任何外部依赖关系以保持全局变量模块清晰,简明。只有使用已建立好的,行之有效的,已通过测试并结果良好的第三方的函数库和框架,并保持你的函数处于小值,从你的模组操作和其他视图层代码里分离出任何业务逻辑或数据。

  有多个开发人员的较大的项目应该遵循一套既定的编码原则,如谷歌的JavaScript的风格指南,并需要更强的代码管理规则,包括通过一个库,如RequireJS,使用软件包管理使用异步模块定义(AMD)进行严格的依赖关系管理,使用Bower或Jam(客户端库管理工具)的包装管理来参考您的依赖项文件的特定版本,并采用结构设计模式,如观察者模式,以方便您不同的代码模块之间的松耦合通信。这也是一个明智的想法:使用一个代码存储库系统体系,如Git或Subversion,通过一些服务如源代码或魔豆,让您的代码在云端备份,提供恢复到以前的版本的能力,并且,对更为先进的项目创建一个代码分支来执行不同的功能,在完成之前把它们合并到一起。

  02.文件

  使用结构化的注释区块格式如YUIDoc或JsDoc到文件的功能,因此任何开发人员可以了解其目的,而不需要研究它的代码,这样可以减少误解。用Markdown语法可以有更丰富,长篇的评论和说明。使用关联的命令行工具来自动生成一个文档的网站:基于这些结构性的意见,它和在您的代码所做的任何修改最新状态一致。

  03.往绩分析 

  定期对您的代码运行一个静态代码分析工具,如JSHint或JSLint。这些对已知的编码缺陷和潜在的错误进行的检查,比如忘记使用严格模式或引用未声明的变量,和缺少括号或分号。纠正任何问题的工具控件,以改善你的代码质量。尝试为您的项目团队设置默认选项,以加强编码标准,如由空格的缩进每一行,在哪里放置花括号,并在整个代码文件中使用单引号或双引号的数目。

  04.测试

  一个单元测试是一小段独立的功能执行的功能之一:执行其中一个来自你特定输入的主代码库的函数以确认它输出一个预期值。为了提高您的信心,代码将像预期的那样,编写使用的框架,如Jasmine或QUnit为每个功能单元测试,使用预期和未预期的输入参数。但是千万不要忘了那些边缘的情况!

  在跨多个操作系统多个浏览器上运行这些测试,通过利用这项服务,如BrowserStack或Sauce Labs,让你可以加速需求中的在云端上地虚拟机地测试。这两个服务提供了一个API,允许你的单元测试能够自动在多个浏览器同时运行,一旦它们完成,就会将结果反馈给你。作为红利,如果你的代码存储在GitHub上,你可以采取BrowserSwarm,这是一个当你提交你的代码会自动运行你的单元测试的工具。

  05.测量 

  代码覆盖工具,如Istanbul测量当你的单元测试对你的函数运行时,哪些代码行数被执行,将它作为该代码行总数的百分比进行报告。对你的单元测试运行一个代码覆盖工具,并增加额外的测试,可以增加你的覆盖率得分至100%,给你对你的代码更大的信心。

  函数的复杂性可以用霍尔斯特德复杂度量测来测量:计算机科学家莫里斯·霍尔斯特德在20世纪70年代设立的方程式,一个函数的复杂性的是根据循环,分支和它所包含的函数调用来量化的:函数的复杂性可以使用Halstead的复杂性措施进行测量。当这种复杂的分数降低时,我们就越容易理解和保持这个函数,减少了出错的可能性。命令行工具柏拉图措施和JavaScript代码复杂性的生成的数据的可视化,帮助确定可以改进的功能,同时存储以前的结果,允许跟随着时间的推移跟踪质量的进步。

  06.自动化

  使用Task runner例如Grunt来自动操作文件编制,分析,测试,覆盖范围和复杂性报告生成的过程,这样就节省了您的时间和精力,并增加解决出现的任何质量问题的机会。大多数的这篇文章中所强调的工具和测试框架都和Grunt有关联,这可以帮助您提高您的工作流程和代码质量并且不必动一根手指。

  07.处理异常 

  不约而同的是,在某些时候,你的代码将在它运行时出现一个错误。使用“try... Catch”语句来适当地处理运行时间的错误和限制您网站上的行为的影响。使用网络服务记录运行时出现的错误。并使用此信息来添加新的单元测试,从而改进你的代码并一个一个地消灭这些错误。

  通向成功的步骤

  这七个步骤,帮我创作 一些在我到目前为止的职业生涯里我最自豪的代码。它们也是未来的一个很好的基础。在您自己的项目里,承诺使用这些步骤,生产出高品质的JavaScript代码,让我们携手共进,改善网络,一步一步通向成功。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,下面是一个简单的使用JavaScript将JSON转换为SQL语句的示例代码: HTML代码: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSON转SQL</title> </head> <body> <h1>JSON转SQL</h1> <label for="jsonInput">JSON输入:</label> <br> <textarea id="jsonInput" cols="80" rows="10"></textarea> <br><br> <button onclick="convertJsonToSql()">转换为SQL语句</button> <br><br> <label for="sqlOutput">SQL输出:</label> <br> <textarea id="sqlOutput" cols="80" rows="10" readonly></textarea> </body> <script src="json-to-sql.js"></script> </html> ``` JavaScript代码(存储在`json-to-sql.js`文件中): ``` function convertJsonToSql() { var jsonInput = document.getElementById("jsonInput").value.trim(); if (jsonInput == "") { alert("请输入JSON数据"); return; } var jsonObj; try { jsonObj = JSON.parse(jsonInput); } catch (e) { alert("输入的数据不是有效的JSON格式"); return; } var tableName = prompt("请输入要插入数据的表名"); if (tableName == null || tableName.trim() == "") { alert("请输入表名"); return; } var fields = ""; var values = ""; for (var key in jsonObj) { if (fields != "") { fields += ", "; } fields += key; if (values != "") { values += ", "; } if (typeof jsonObj[key] === "string") { values += "'" + jsonObj[key].replace(/'/g, "''") + "'"; } else { values += jsonObj[key]; } } var sqlOutput = "INSERT INTO " + tableName + " (" + fields + ") VALUES (" + values + ");"; document.getElementById("sqlOutput").value = sqlOutput; } ``` 这个网页有一个文本框用于输入JSON数据,还有一个按钮用于将JSON数据转换为SQL语句。转换后的SQL语句会显示在另一个文本框中。转换过程会提示输入要插入数据的表名。该示例将JSON对象的属性名作为字段名,将属性值作为字段值插入到指定的表中。如果属性值是字符串类型,它将被转义以避免在SQL语句中引起问题。 ### 回答2: 基于 JavaScript 的将 JSON 转换为 SQL 语句的网页可以如下实现: 首先,我们需要一个包含 JSON 数据和一个按钮的 HTML 页面,按钮用于触发转换操作。我们可以使用 `<textarea>` 元素来输入和显示 JSON 数据,并使用一个 `<button>` 元素来触发转换操作。 HTML 代码如下所示: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JSON to SQL</title> </head> <body> <textarea id="jsonInput" rows="10" cols="50"></textarea><br> <button onclick="convertJSON()">Convert to SQL</button><br> <pre id="sqlOutput"></pre> <script src="script.js"></script> </body> </html> ``` 接下来,在 JavaScript 文件 `script.js` 中,我们可以定义一个处理函数 `convertJSON()`,用于将 JSON 转换为 SQL 语句。该函数的主要步骤如下: 1. 读取 `<textarea>` 中的 JSON 数据,并使用 `JSON.parse()` 方法将其解析为 JavaScript 对象。 2. 创建一个空字符串 `sqlStatement`,用于保存转换后的 SQL 语句。 3. 遍历 JavaScript 对象的属性和值,根据 JSON 对象的结构和需要的数据类型,构建相应的 SQL 语句。 4. 将生成的 SQL 语句拼接到 `sqlStatement` 中。 5. 将最终的 `sqlStatement` 写入 `<pre>` 元素中,显示给用户。 JavaScript 代码如下所示: ```javascript function convertJSON() { var jsonInput = document.getElementById("jsonInput").value; var jsonObject = JSON.parse(jsonInput); var sqlStatement = ""; for (var key in jsonObject) { var value = jsonObject[key]; var sql = "INSERT INTO table_name (column1, column2) VALUES ('" + key + "', '" + value + "');\n"; sqlStatement += sql; } document.getElementById("sqlOutput").textContent = sqlStatement; } ``` 通过以上代码,用户可以在输入框中输入 JSON 数据,点击按钮后,将会在页面上显示生成的 SQL 语句,用于将 JSON 数据转换为 SQL 语句。 请注意,上述代码只是一个简单的示例,实际应用中可能需要根据 JSON 数据的结构和需求进行相应的调整和优化。 ### 回答3: 当下的互联网技术使得前端开发变得越来越重要,JavaScript作为前端开发的重要语言之一,不断涌现出各种应用。其中,将JSON转换为SQL语句的网页是一个常见需求。下面我将简要介绍一种基于JavaScript的实现方式。 首先,我们需要创建一个网页,包含一个输入框用于接收JSON数据,以及一个按钮用于触发转换操作。接着,使用JavaScript编写转换逻辑。 在JavaScript中,可以使用JSON.parse()函数将接收到的JSON数据解析为一个对象。之后,我们可以通过遍历对象的属性和值,并根据需要构造相应的SQL语句。 具体地,我们可以使用for-in循环来遍历对象的属性。在每次循环中,我们可以判断属性的值类型,根据不同的类型来构建SQL语句的相应部分。例如,如果属性值是字符串类型,我们需要使用单引号括起来,而如果是数字类型,则无需括起来。此外,还需要根据具体情况,为每个属性构建INSERT INTO或UPDATE语句的各个部分。 完成以上逻辑后,我们可以通过JavaScript修改网页的DOM元素,将生成的SQL语句显示在网页中的某个区域。用户就可以复制该SQL语句以便在数据库中执行。 除了基本的转换逻辑,我们还可以对该网页进行扩展。例如,我们可以增加一些输入验证,确保输入的JSON数据的合法性;或者为用户提供更多的选项,定制化生成的SQL语句。这些都可以通过JavaScript进行实现。 总之,基于JavaScript的JSON转换为SQL语句的网页可以帮助前端开发者快速生成SQL语句,并提高工作效率。通过合理利用JavaScript的语法和DOM操作,可以实现更加强大和灵活的功能。希望这个简要介绍对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值