10 个你需要了解的最佳 javascript 开发实践

阿里云天池大数据长期赛:金融风控-贷款违约预测(含代码) 本次比赛让自己在大数据的处理流程上有了更明确的认知,从数据清洗、特征工程、数据建模,每一个过程都能学到很多经验和知识,值得去历练。 阅读详情

原文:Top 10 “Must Follow” JavaScript Best Practices


Javascript 的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站。

尽管很多的开发人员都乐于颂扬 javascript,但是仍旧有人看到它的阴暗面。

使用很多 javascript 代码的 web 页面会加载很慢,过多的使用 javascript 使得网页丑陋和拖沓。很快如何有效地使用 javascript 成为一个非常火热的话题。

这里让我们列出 10 个最佳 javascript 实践,帮助你有效地使用 javascript。

1. 尽可能的保持代码简洁

可能大家都听到过了N遍这个代码简洁问题了。作为一个开发人员你可能在你的代码开发过程中使用了很多次,但千万不要在 js 开发中忘记这点。

  • 尽量在开发模式中添加注释和空格,这样保持代码的可读性
  • 在发布到产品环境前请将空格和注释都删除,并且尽量缩写变量和方法名
  • 使用第三方工具帮助你实现压缩 javascript。

2. 思考后再修改 prototypes

添加新的属性到对象 prototype 中是导致脚本出错的常见原因。

yourObject.prototype.anotherFunction = ‘Hello’;
yourObject.prototype.anotherMethod = function () { … };

在上面代码中,所有的变量都会被影响,因为他们都继承于 yourObject。这样的使用会导致意想不到的行为。所以建议在使用完后删除类似的修改。

yourObject.prototype.anotherFunction = ‘Hello’;
yourObject.prototype.anotherMethod = function () { … };
test.anotherMethod();
delete yourObject.prototype.anotherFunction = ‘Hello’;
delete yourObject.prototype.anotherMethod = function () { … };

3. Debug Javascript 代码

即使最好的开发人员都会犯错。为了最大化的减少类似错误,请在你的 debugger 中运行你的代码,确认你没有遇到任何细微的错误

4. 避免 Eval

你的 JS 在没有 eval 方法的时候也可以很好的工作。eval 允许访问 javascript 编译器。如果一个字符串作为参数传递到 eval,那么它的结果可以被执行。

这会很大的降低代码的性能。尽量避免在产品环境中使用 eval。

5. 最小化 DOM 访问

DOM 是最复杂的 API,会使得代码执行过程变慢。有时候 web 页面可能没有加载或者加载不完整。最好避免 DOM。

6. 在使用 javascript 类库之前先学习 javascript

互联网充斥着很多的 javascript 类库,很多程序员都往往使用 js 类库而不理解负面影响。强烈建议你在使用第三方类库之前学习基本的 JS 代码,否则,你就准备着倒霉吧。

7. 不要用 "SetTimeOut" 和 "Setinterval" 方法来作为 "Eval" 的备选

setTimeOut( "document.getID('value')", 3000);

在以上代码中 document.getID('value') 在 setTimeOut 方法中被作为字符串来处理。 这类似于 eval 方法,在每个代码执行中来执行一个字符串,因此会降低性能,因此,建议在这些方法中传递一个方法。

setTimeOut(yourFunction, 3000);

8. [] 比 new Array(); 更好

一个常犯的错误在于使用当需要数组的时候使用一个对象或者该使用对象的时候使用一个数组。但是使用原则很简单:

“当属性名称是小的连续整数,你应该使用数组。否则,使用一个对象” - Douglas Crockford, JavaScript: Good Parts 的作者.

建议:

var a = ['1A','2B'];

避免:

var a = new Array();
a[0] = "1A";
a[1] = "2B";

9. 尽量不要多次使用 var

在初始每一个变量的时候,程序员都习惯使用 var 关键字。相反,建议你使用逗号来避免多余的关键字,并且减少代码体积。 如下:

var variableOne = ‘string 1’, 
variableTwo = ‘string 2’, 
variableThree = ‘string 3’;

10. 不要忽略分号 ";"

这往往是大家花费数个小时进行 debug 的原因之一。

我很确信你肯定也在其它的文章中阅读过以上相关的内容,但是大家可能往往都忽略了很多基本的规则。 你是不是也曾经忽略过分号。是不是也遇到过 eval 关键字问题导致性能问题?

希望大家能够喜欢,谢谢!

相关阅读

  1. JavaScript中,{}+{}等于多少?

  2. JavaScript:将所有值都转换成对象

  3. 为什么 ++[[]][+[]]+[+[]] = 10?

相关书籍

【深度学习新浪潮】智能体在图像处理领域的技术突破与实践指南 智能体正在重构图像处理的技术版图:从多智能体分工的"专业化协作",到多模态统一的"极简架构",再到工具增强的"实战能力",技术突破不断降低开发门槛并拓展应用边界。对于开发者而言,2025年的核心机遇在于结合具体场景选择成熟框架(如医疗用IteR-MRL、工业用NVIDIA NIM),通过微调与工具集成快速落地解决方案。随着硬件成本下降与开源生态完善,图像处理智能体将从当前的"高端场景赋能"走向"千行百业普及",真正成为数字世界的"视觉感知与操作核心"。 阅读详情

相关推荐

机器学习——径向基函数(RBF)神经网络

目录 一、什么是基函数 二、什么是径向基函数 三、为什么RBF神经网络使用一个径向基函数作为隐含层的激活函数 四、参数训练 五、RBF网络vs BP网络和 SVM 一、什么是基函数 著名的傅里叶变换是指:n个有参(权值)的正、余弦三角函数基的和式可以等价的表示任意一个周期函数,这里的“基”和我们数学中说的坐标基或向量基含义相同,即坐标空间中任意一个向量都可以用基向量的线性和表示出来。 因此,我们引入函数空间的概念,函数空间中的每个连续函数可以表示为基函数的线性组合,就像向量空间中的每..

CHWB2580的博客 6272

2024年最新前端三剑客:一文入门JavaScript,跟大数据开发初学者分享几点经验

可以通过function来定义函数// 创建函数/函数声明/函数定义function 函数名(形参列表) {函数体return 返回值;函数需要在调用后才会执行函数的定义和调用的先后顺序没有要求(但是变量必须先定义后使用)函数的实参和形参个数可以不相等(如果实参比形参多,多出来的参数不参与运算;如果实参比形参少,此时少的形参值为undefined。也可以通过函数表达式来定义函数i++) {return sum;

2401_84185074的博客 448

从零开始:小鼠Bulk RNA-seq全流程实战指南

本文提供了一份详尽的小鼠Bulk RNA-seq全流程实战指南,涵盖从软件环境搭建、原始数据质控与清洗、序列比对、基因定量到下游差异表达分析与功能富集。内容面向生物信息学新手,通过清晰的代码示例和步骤解析,帮助读者系统掌握Bulk RNA-seq数据分析的核心技能,并产出可靠的生物学洞见。

lake5的博客 717

Java高精度计时最佳实践指南

本文介绍了Java中高精度计时的最佳实践方案。不推荐使用System.currentTimeMillis(),因其精度低且受系统时钟影响。推荐采用System.nanoTime()(纳秒级精度)或Java 8+的Instant/Duration组合。文章提供了基础计时器Stopwatch和高级统计计时器BenchmarkTimer的实现,并演示了多线程环境下的计时方法。最佳实践建议:性能测试用nanoTime(),业务计时用Instant/Duration,复杂场景用专业计时工具类。生产环境推荐使用Micr

油墨香^-^的博客 459

Linux系统搭建OpenClaw(原Clawdbot)全流程指南 最新版

工具定位:开源个人 AI 助手,支持文件读取、命令执行、多渠道交互(Telegram / 本地终端等);系统要求:主流 Linux 发行版(Ubuntu/Debian/CentOS 等),Node.js ≥22(核心依赖);安全提示:OpenClaw 为测试版,具备高权限操作能力,建议使用非主力机,配置权限白名单,避免接触敏感数据。

AI时代老码农的第二春 6560

基于PSINS的INS/NHC/ODO组合导航仿真全解析

组合导航通过多传感器融合克服单一导航系统的局限,是车辆自主定位的关键技术。其中惯性导航(INS)依靠陀螺仪与加速度计积分推算运动状态,但误差随时间累积;GNSS提供绝对位置,却在城市峡谷中易受多径效应和遮挡影响导致定位漂移。卡尔曼滤波作为信息融合核心,将不同量测按统计特性加权,实现优势互补。基于PSINS开源工具箱搭建的SINS/GNSS/ODO/NHC组合导航仿真,能够在GNSS失锁条件下利用非完整约束和里程计抑制惯性误差发散,广泛应用于无人驾驶、物流车辆自主定位等场景。本文围绕PSINS仿真环境,详细拆

weixin_29044713的博客 253

JavaScript 开发经验

function clickButton(e) { var target; var tarid; //获取事件源 if (!e) { e = window.event; } if (e.target) { target = e.target; } else if (e.srcElememt) { ...

ZXYhappiness的博客 255

fanuc机器人KAREL中 函数的应用

本次课程讲解编程的思路。很多的同学都玩过积木,一个一个的模块逐渐累积起来,通过彼此之间的相互联系,最终形成一个完整的整体。其实编程也是这样。 将一个对象根据其特点进行模块化拆分,尤其是一些特点非常相似的内容,将其变成一个模块。然后通过传递参数,实现不同的功能,这就是模块化编程。

haier123888的博客 2744

11个最新的JavaScript开发技巧分享

转自:微点阅读https://www.weidianyuedu.com 导读 JS是前端的核心,但有些使用技巧你还不一定知道。本文梳理了JS的41个技巧,帮助大家提高JS的使用技巧。 Array 数组交集 普通数组 constarr1=[1,2,3,4,5,8,9],arr2=[5,6,7,8,9];const intersection = arr1.filter(function (val) { return arr2.indexO...

ysds20211402的博客 483

【踩坑记录】colmap中的相机位姿的坐标系定义及其可视化结果的隐含转换

1 坐标系定义及转换   首先介绍一下世界坐标系和相机坐标系之间的转换,它们之间是存在一个转换关系的。现假设空间中一点X,它在相机坐标系下的坐标是Xcamera,在世界坐标系下的坐标是Xworld。假设它通过R和t实现从相机坐标系到世界坐标系之间的转换: Xworld = RXcamera + t   那么,由上式,我们可以推得从世界坐标系向相机坐标系的转换关系(RT=R-1,所以通常直接使用RT即可): Xcamera = RTXworld - RTt   所以,两个坐标系之间的转换,需要看其具体

zeeq的博客 2万+

破晓之光:GTK#框架让C# WinForm程序跨平台运行的终极指南

GTK#框架的出现,彻底打破了C# WinForm只能在Windows上运行的桎梏。

墨夶的博客 605

10 个你需要了解的最佳 JavaScript 开发实践

Javascript 的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站。尽管很多的开发人员都乐于颂扬 javascript,但...

web前端开发 166

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

【推荐】10个你需要了解的最佳javascript开发实践

Javascript的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站。 尽管很多的开发人员都乐于颂扬javascript,但是仍旧有人看到它的阴暗面。 使用很多javascript代码的web页面会加载很慢,过多的使用javascript使得网页丑陋和拖沓。很快如何有效地使用javascript成为一个非常火热的话题。 这里让我们列出10个最佳...

flex,javascript,php,dede,织梦 168

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

【Web后端架构】2022年10个最佳Web开发后端框架

这些都是2022年在Java、Ruby、Python、JavaScript、PHP、Scala和Golang中进行web开发的最佳后端开发框架在本文中,我将与您分享创建web应用程序的10个最好的后端框架。Web开发通常分为两类:前端开发和后端开发。后端开发人员负责构建web应用程序的服务器端。当前端部分与用户交互时,后端部分负责内部工作。如果没有后端,前端可能会工作,也...

全网:架构师研究会 1万+

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

js模板引擎_10个最佳开源JavaScript模板引擎

背景目前前端主流的开发框架有Vue、React以及Angular等,但是依然有一部分开发人员并不会去使用这些框架,特别是一些偏向后端的开发者,可能依然在使用类似于jquery+Bootstrap的方式在开发一些项目,而且有些项目可能传统的方式更加合适,因此JavaScript前端模板引擎就能够发会很大作用了,那么今天就介绍10大开源模板引擎,依据不同的场景或者功能特性,可以选择不同的模板引擎应用到...

weixin_39588542的博客 7169

javascript开发技巧训练_10个 JavaScript 开发技巧,前端新手非常有必要掌握

Javascript 的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站。尽管很多的开发人员都乐于颂扬 javascript,但是仍旧有人看到它的阴暗面。使用很多 javascript 代码的 web 页面会加载很慢,过多的使用 javascript 使得网页丑陋和拖沓。很快如何有效地使用 javascript 成为一个非常火热的话题。这里让我们列出 10...

weixin_39517400的博客 111

10个最佳的触控手式的JavaScript框架(转)

由于各种原因移动开发是一项艰难的工作,比如它是非常耗时的、充满压力的任务。最重要的是,作为一个开发人员,你必须保持更新所有最新 的技术和技巧——你必须知道所有最新的趋势,问题和解决方案等。例如跨浏览器支持和兼容性、屏幕分辨率等等曾经是巨大的问题,但尽管已经解决,开发者仍然 面临着这些被要求学习最新的技术来保持更新。 移动开发是一个快速增长的行业,移动网站正在以惊人的速度布局。特别...

weixin_34116110的博客 210

8个最佳的JavaScript移动应用开发框架

8个最佳的JavaScript移动应用开发框架

hffyyg的博客 1449

21 个最佳 Javascript IDE 和代码编辑器 [CSS、HTML、JavaScript]

这是我们挑选的 21 个最佳 JavaScript IDE 和源代码编辑器。 目录 什么是 IDE 选择正确的开发环境时要寻找什么? 免费的最佳 Javascript IDE 最佳高级 Javascript IDE 结论:最佳 JavaScript IDE是哪个? 常见问题解答:最佳 Javascript IDE 如今,Javascript 在前端开发中越来越流行。您可以在常规的“记事本”中...

lzhdim的专栏 1万+

前端最佳开发实践

《web前端开发最佳实践》 高效前端开发综述 前端开发包括前端UI和后端数据的交互都属于前端开发的范畴。 Web前端开发需要具备的技能 \1. 页面标记(HTML) \2. 页面样式 \3. 前端编程(JavaScript) \4. 跨平台,跨浏览器 \5. 前端框架(jQuery) \6. 调试工具 \7. 沟通能力 <div id=...

huiyinimen的博客 1235

CSS、JavaScript开发者必备的10款最佳工具

CSS、JavaScript开发者必备的10款最佳工具 发表于1小时前| 653次阅读| 来源优快云| 2 条评论| 作者季红 CSSJavaScript开发工具 摘要:可以说CSS、JavaScript是网站设计的黄金搭档,本文收集了10款超好用的工具,来帮助你设计出更佳的网站,并且还可以提高你的工作效率。 亲们,想通过使用最新的工具来提升你的网站档次吗?本文搜集了10款好用...

359

10个你需要了解的JavaScript最佳实践

Javascript 的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站。 尽管很多的开发人员都乐于颂扬 javascript,但是仍旧有人看到它的阴暗面。 使用很多 javascript 代码的 web 页面会加载很慢,过多的使用 javascript 使得网页丑陋和拖沓。很快如何有效地使用 javascript 成为一个非常火热的话题。

阳光盛开的夏天 783
上一篇: 基于 canvas 将图片转化成字符画
下一篇: 9 行 javascript 代码获取 QQ 群成员
迷渡
迷渡 领域专家: 前端开发技术领域 领域专家: 前端开发技术领域
博客等级 码龄19年 2405粉丝 124原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值