JavaScript需要避免的问题总结

Next.js搜索引擎优化:如何避免Next.js中404页面的SEO问题 Next.js允许开发者自定义404页面。自定义404页面可以提供更友好的用户体验,帮助用户在遇到404页面时迅速找到有用的内容。此外,定制的404页面还可以包含SEO优化元素,如指向其他页面的内链、相关内容推荐、以及适当的错误消息,帮助用户避免离开网站。要自定义404页面,开发者可以在pages目录下创建一个404.js文件,并在其中实现自己的页面内容。 阅读详情

JavaScript需要避免的问题总结

最近看了Douglas Crockford的《JavaScript 语言精粹》,对于JavaScript有了新的了解,本文主要总结一下JavaScript语言特性引起的一些常见问题,以及避免方法。


1.检索

  • JavaScript检索对象包含值的方法有两种,一种是”[]”,另一种是”.”,一般两种方式都可用。但在检索的字符串是一个非法JavaScript标示符或者为保留字时,”.”是不可用的,只能使用name[“first-name”]
    (在对象字面量定义时也是如此,由于“first-name”是非法标示符,所以定义时必须用引号包含——“first-name:”“Joe”)。
    书中建议使用”.”方法检索,也就是name.first_name。所以就需要编码时注意标示符的合法性,以及不要和保留字冲突。

  • 另外一个更重要的问题是,检索一个不存在的成员属性时,将返回undefined,而从undefined中取值会导致TypeError异常,例:age不为name对象的属性,name.age为undefined,name.age.child则会抛出异常。解决方法为 设置默认值var age = name.age || “unknown”, 也可以通过“&&”运算避免错误: name.age&&name.age.child。

2.枚举

for in 语句可以遍历一个对象中所有属性名,但同时还包括函数和原型中的属性。解决方法一就是,过滤掉不需要的属性:

var name;
for(name in names){
  if(names.hasOwnProperty(name) && typeof names[name] !=='function'){
    document.writeln(name + ' : ' + names[name]);
  }
}

其中hasOwnProperty方法检测对象是否有指定属性,且不检查原型链;若属性值为函数,typeof返回’function’类型。
另一种解决方法就是,完全避免使用for in语句,使用常规for语句。
因为for in语句除了上述问题以外,枚举的属性名出现的顺序是不确定的,若要使顺序确定,则可以创建一个数组,以正确的顺序包含属性名,然后用for语句遍历:

var i;
var properties =[
    'first_name',
    'middle_name',
    'last_name'
    ];
for(i=0; i<properties.length; i+=1){
    document.writeln(properties[i] + ':' + names[properties[i]]);
}

这样既保证了顺序,又直接确定了需要的属性。(但这种方法需要自己创建数组,且需要自己确定属性名,虽然书中推荐这种方法,但还要看具体情况)

3.减少全局污染

Douglas Crockford在书中指出,JavaScript对全局变量的依赖是所有糟糕特性中最糟糕的一个,因为全局变量可以被程序的任何部分在任意时间修改,降低了程序的可靠性,且全局变量名称会和子程序变量名称产生冲突,导致程序无法运行且难以调试。
共有3种方式定义全局变量:

  1. 在任何函数之外声明: var foo = value;
  2. 直接给全局对象添加属性: window.foo = value; (window为web浏览器的全局对象)
  3. 直接使用未经声明的变量: foo = value; (即隐式的全局变量)

减少全局污染的方法一:最小化使用全局变量 ,一个应用只创建一个唯一全局变量

var MYAPP = {};
MYAPP.name = {
    ...
};
MYAPP.method={
    ...
};

另一种减少全局污染的方法是,使用函数和“闭包”构建模块来进行信息隐藏:
“内部函数可以访问它们外部函数的参数和变量(除了this和arguments),内部函数拥有比它的外部函数更长的生命周期,内部函数访问外部函数的实际变量而无需复制。”

  • 所谓“闭包”即是函数可以访问它被创建时所处的上下文环境(可以简单理解为内部函数可以访问外部函数定义的变量)。
  • 模块即利用函数作用域和“闭包”构建的只提供接口,隐藏其中状态信息的函数或对象。

这里举书中的一个例子:

var serial_maker = function(){
    var prefix = '';
    var seq = 0;
    return {
        set_prefix: function(p){
            prefix=String(p);
        },
        set_seq: function(s){
            seq = s;
        },
        gensym: function(){
            var result = prefix + seq;
            seq +=1;
            return result;
        }
    };
};

var seqer = serial_maker();
seqer.set_prefix('Q');
seqer.set_seq(1000);
var unique = seqer.gensym();

seqer只提供接口方法set_prefix、set_seq和gensym,由于函数作用域,私有变量对其他程序是不可见的,只能通过这些方法改变prefix 和seq的值。

也可以构造一个对象:

var myObj = (function() {
    var value=0;
    return {
        increment: function(inc){
            value += typeof inc === 'number'?inc:1;
        },
        getValue: function(){
            return value;
        }
    };
}());
myObj.increment(1);
myObj.getValue();

注意“()”,以上返回的是函数运行的结果,即包含两个方法的对象。

模块模式的一般形式为第一种方式:定义了私有变量和函数的函数;利用闭包创建访问私有变量和函数的接口函数;最后返回这个函数,或者放到可以访问的地方。

利用模块模式可以摒弃全局变量的使用。
可参考另外一篇文章JavaScript的几点编码规范提高代码质量

手把手教你用EG2153搭建开关电源:SOP-8封装驱动芯片的5个设计技巧 本文详细介绍了使用EG2153自振荡半桥驱动芯片搭建开关电源的五个核心设计技巧。内容涵盖从深入理解芯片工作机制、频率编程计算误区、SOP-8封装的热管理方案,到死区时间评估与外部保护电路设计,以及实战调试与故障排查指南,旨在帮助工程师实现稳定可靠的小功率电源设计。 阅读详情

相关推荐

文献计量VOSviewer分析知网文献基本操作及实用技巧

本教程旨在为读者提供一个关于VOS viewer的初级使用指南。VOS viewer是一个强大的科学研究可视化工具,主要用于构建和可视化科学地图。它能够处理大规模的科研数据,包括文献引用、共引、共词、共作者等信息。无论你是科研人员,还是数据分析师,甚至是研究生,都能在这个教程中找到使用VOS viewer的有效方法。我们将一步步教你如何使用这个软件,以及如何利用它进行科研数据的可视化。

Jia_n的博客 8766

JavaScript中避免属性访问报错的两种方法

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_33962621的博客 1088

iOS马甲包过审实战:如何用5天时间搞定4.3审核(附完整代码混淆方案)

本文提供了一套为期五天的高效实战方案,专门解决iOS应用因重复或抄袭问题而被App Store的4.3条款拒绝的难题。方案涵盖深度分析、代码混淆、资源翻新及环境隔离等系统性步骤,并附有完整的代码混淆示例,旨在帮助开发者在合规框架内重塑应用,显著提升过审成功率。

weixin_29234239的博客 147

JS判断当前对象是否存在某个属性

因为js中如果当前对象没有这个属性,获取时会报错导致项目无法进行 所以使用 if (_item.hasOwnProperty('f_state')) {} 判断当前对象中是否有这个属性

ArcherSYM的博客 320

ffmpeg 4.4 cenc-aes-ctr 加解密 MP4 工程性质分析

ffmpeg 4.4 cenc-aes-ctr 加解密 MP4 工程性质分析

Dream_Dynasty的博客 3045

清理异常值(MAD:绝对中位差)

清理异常数据: 中位数绝对偏差(MAD):用来描述单变量样本在定量数据中可变的一种标准 在统计学中,绝对中位差是刻画一元数据样本变化的一个鲁棒度量。由公式可以看出,其求解还算简单,给定一个数据样本集,首先求其中位数,然后求原始数据减去中位数的绝对值从而形成一个新的数据样本,再求新的数据样本的中位数即为绝对中位差。比如说有一个数据样本集X={2 3 8 7 9 6 4},这时候数据的中位数是6,原...

spider_man 1万+

1000多个项目中的十大JavaScript错误以及如何避免

本文翻译自:https://dzone.com/articles/top-10-javascript-errors-from-1000-projects-and-ho-1 转载请注明出自:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 通过统计数据库中的1000多个项目,我们发现在 JavaScript 中最常出现的错误有10个。下面会...

447

FAST-LIVO2 源码精读(十八):实时性优化、漂移排查与工程落地

FAST-LIVO2 的工程价值,不在于某一个孤立的技巧,而在于它把"激光的几何精度、惯性的高频预测、视觉的纹理与色彩"用一套简洁的滤波框架紧紧拧在一起,又在实时性、鲁棒性、可扩展性之间取得了难得的平衡。先用内建计时表定位瓶颈,再按降采样、并行、滑窗、编译优化、双频输出逐项加速;遇到漂移先看现象、循诊断树定位根因、回到对应章节取解法。十八篇至此收束。

PX4-SLAM-PNC 216

accounting.js toFixed函数:避免JavaScript浮点数精度问题的终极解决方案

JavaScript开发者在处理金融计算和货币格式化时,经常会遇到一个令人头疼的问题:浮点数精度错误。比如 `(0.615).toFixed(2)` 返回的竟然是 "0.61" 而不是预期的 "0.62"!😱 这就是为什么你需要了解 accounting.js 的 toFixed 函数——这个专门为解决JavaScript浮点数精度问题而生的终极工具。 accounting.js 是一个轻量级

gitblog_00297的博客 1037

【控制模块路径跟踪算法】PID控制算法实现路径跟踪(附C++代码)

认知有限,望大家多多包涵,有什么问题也希望能够与大家多交流,共同成长!本文先对PID控制算法实现路径跟踪–飞思卡尔的方法做个简单的介绍,具体内容后续再更,其他模块可以参考去我其他文章提示:以下是本篇文章正文内容PID属于无模型控制,调节三个环节的参数会产生什么影响根据控制对象的不同也会有很大差别PID形象解释小明接到这样一个任务:有一个水缸点漏水(而且漏水的速度还不一定固定不变),要求水面高度维持在某个位置,一旦发现水面高度低于要求位置,就要往水缸里加水。

qq_35635374的博客 2386

ReAct 智能体 Agent:架构解析与实践拓展

ReAct 智能体 Agent 凭借其推理与行动协同的独特架构,在众多人工智能应用场景中展现出巨大的潜力。从智能办公到教育辅导,从智能家居到工业物联网,ReAct 智能体通过精准推理和高效行动,为用户提供了更加智能、便捷的服务体验。然而,在实际应用过程中,仍面临工具调用安全、模型持续学习、多智能体协作管理以及性能优化等多方面的挑战。通过合理的策略和技术创新,如强化工具审核机制、构建持续学习框架、设计高效协作协议和采用性能优化手段,我们有望逐步克服这些挑战,进一步提升 ReAct 智能体的性能和可靠性。

加入“Super Entity”,与全能开发团队共探AI智能体与数字人项目,开启前沿技术之旅。 1686

第三方模块推荐:JavaScript避免数字精度问题 bignumber.js

一个JavaScript库,用于任意精度的十进制和非十进制算术。bignumber.js说明使用前提优点安装基础用法总结 说明 只是单纯的记录学习过程 npm地址~~~ 使用前提 为何会出现精度问题 EcmaScrpt规范定义Number的类型遵循了IEEE754-2008中的64位浮点数规则定义的小数后的有效位数至多为52位导致计算出现精度丢失问题! 感兴趣的话可以看看以下链接 深度剖析0.1 ...

weixin_39907636的博客 1381

【系统分析师】2025年上半年真题:案例分析-答案及详解(回忆版)

摘要: 试题一考查面向对象分析,涉及用例模型构建的四个阶段(识别参与者、合并需求、细化描述、调整模型),分析CRM系统的参与者与用例,并说明用例间的包含、扩展和泛化关系。 试题二探讨嵌入式Docker,包括容器的轻量性、可移植性及隔离性含义,10项措施与7个规范方面的对应关系,以及优化容器切换时间的三种方法(如无状态连接优化)。 试题三聚焦数据库设计,分析订单表的函数依赖与范式分解(BCNF),讨论分解后是否保持函数依赖及无损性,并针对触发器的性能缺陷提出优化方案。 试题四解析Web开发中的MVC架构与SS

数据知道的博客 6603

【前端】VUE js 获取URL请求的参数 避免乱码问题

this.$route.query

我是Superman丶的博客 2276

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

避免js重复加载的问题

在日常开发中,一个页面加载另一个页面的时候,就会把另一个页面的js也会加载进来,那么如何才能避免被加载页面不再重复加载已经加载过的js呢? 先上代码 动态加载js // 加载js function loadJS(url, callback) { var script = document.createElement('script'), fn = callback || f...

zinbin的博客 5725

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

应当避免的JavaScript编程问题

如果刚开始学习JavaScript,无论完全自己写程序,或者使用一些框架 (jQuery, Mootools, Dojo, YUI) ,下面这几个错误你必须要避免, 它们都是我学习JavaScript的经验之谈。 等价比较(Equality Operator) JavaScript中有两个相等比较操作符.第一个就是两个等于号(==),它只比较值是否相等,而不关心数据类型...

huobengluantiao8 133

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

JS截断小数点,避免浮点类问题

网上搜到的常用的JS截断小数点方式遇到比较特殊的数字,会出现bug,主要是因为JS的浮点计算问题。 常用的JS截断小数点方式如下: function pointNumber(number,length) { return Math.floor(number*Math.pow(10,length))/Math.pow(10,length) } 但是这个 pointNumber(522.18...

weixin_43968658的博客 1307

提升开发效率:避免JavaScript内存问题的5个技巧

痛定思痛,我决定系统地整理一些预防JavaScript内存问题的实用技巧,希望能帮助到同样被内存问题困扰的开发者们。后来发现ES6引入的WeakMap和WeakSet是绝佳的解决方案,它们的键是弱引用,不会阻止垃圾回收。现在我会严格控制全局变量的使用,必要的数据尽量封装在模块内部,通过明确的接口来访问。通过这五个方面的持续优化,我的项目内存使用率下降了近60%,页面卡顿的问题也基本消失了。的实时预览功能特别适合用来验证内存优化的效果。最棒的是,优化后的项目可以直接一键部署,立即看到实际运行时的内存表现。

YellowSun24的博客 735

JavaScript计算加减乘除法,避免精度丢失问题

* 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。** 说明:javascript的减法结果会有误差,在两个浮点数相减的时候会比较明显。** 说明:javascript的乘法结果会有误差,在两个浮点数相乘的时候会比较明显。** 说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。** 返回值:arg1乘以 arg2的精确结果。** 返回值:arg1加上arg2的精确结果。** 返回值:arg1加上arg2的精确结果。

stone_bk的博客 679

javascript处理HTML的Encode(转码)和Decode(解码)总结,避免js脚本注入问题

HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的,在这里总结了使用javascript处理HTML的Encode(转码)和解码(Decode)的常用方式 一、用浏览器内部转换器实现转换 1.1.用浏览器内部转换器实现html转码   首先动态创建一个容器标签元素,如DIV,然后将要转换的字符串设置为这个元素的innerText(ie支持)或者text

遨游大海 4911

前端系列【仅供参考】:引入js文件后,命名重复问题&&多个js中如何避免方法名重复

引入js文件后,命名重复问题&&多个js中如何避免方法名重复

weixin_54626591的博客 945

如何避免Javascript浮点计算精度问题

1 var num1 = 0.1, num2 = 0.2; 2 console.log(num1 + num2) // 0.30000000000000004 由于计算机内部的信息都是由二进制方式表示的,即0和1组成的各种编码,但由于某些浮点数没办法用二进制准确的表示出来。 1 var num1 = 0.1, num2 = 0.2; 2 cons...

weixin_30342827的博客 262

如何避免js赋值后,修改赋值后的数据,导致源数据也被修改的问题

【原因】:数组赋值目测在php/js这两种语言中的赋值都是应用传递(所谓引用传递就是所谓的赋值其就是共享同一个地址),一般的字串整型等数据类型都是值传递所以不存在这类情况 【解决方法】:在进行数组间赋值时,将原来的赋值方式换以下即可,代码如下 [html] view plain copy //例如我有一个js数组   var 

Young_Gao的博客 3758

javascript 避免闭包引发的问题

闭包的功能强大,但如果没有正确理解闭包的概念,其结果往往出乎人的意料。例如,下面是一个较常见的问题 第一个 第二个 第三个 第四个 function test() { var els = document.getElementById(

han8888的专栏 321

Vue.js组件开发-如何避免props双向绑定带来的数据流问题

props: {-- 父组件 ParentComponent.vue -->父组件的值:{{ inputValue }}MyInput},data() {return {

嵌入式毕设/课设资料清单(速查手册·文档模板·题库,持续更新)→ 见最新文章 544
上一篇: jQuery Datatable插件 表格基本初始化
下一篇: JavaScript几点编码规范的说明
sz阿骏
博客等级 码龄15年 9粉丝 14原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值