首页 > 教程 > 关键词  > Javascript最新资讯  > 正文

Javascript开发经验谈

2009-04-30 10:45 · 稿源:163Ued

一、简化代码

采用更为简短的写法,不仅可以减少输入的字符数,还可以减少文件大小。大部分采用简单写法的代码,执行效率都有轻微提高。

1.1 简化常用对象定义:

使用 var obj = {}; 代替 var obj = new Object();

使用 var arr = []; 代替 var arr = new Array();

1.2 精简if语句

三元操作符可以有效精简只涉及赋值传值操作的if语句,比如

var score = 60, grade;
if (score < 60) {
grade = “不及格”;
} else {
grade = “及格”;
}
可以精简为:
var score = 60;
var grade = score < 60 ? “不及格” : “及格”;

三元操作符也支持嵌套,但是嵌套的层次太多会影响程序的可读性,这方面要多加斟酌。

1.3 使用JSON

JSON是一种轻量级的数据格式,轻量级首先体现在它的结构定义非常简单。

var obj = {};
obj.p1 = ‘a’;
obj.p2 = ‘b’;
obj.p3 = ‘c’;
可精简为:
var obj = {
p1 : ‘a’,
p2 : ‘b’,
p3 : ‘c’
};

二、使用高效率的代码

网上流传的效率优化文章非常多,一些比较专业的Javascript书籍也谈到了不少,因此,这里就只列出一些很少谈到的。

2.1 精简循环体

循环的效率很大程度上是由循环体决定的,与之相比,用for还是while的差别就太小了。考虑如下的代码,其功能是为某一批元素添加事件:

function addEvent(elems, eventName, handler) {
for (var i = 0, len = elems.length; i < len; i++) {
if (window.attachEvent) {
elems[i].attachEvent(”on” + eventName, handler);
} else if (window.addEventListener) {
elems[i].addEventListener(eventName, handler, false);
}
}
}

循环每执行一次,都会判断window对象的attachEvent或addEventListener是否存在,其实这个仅判断一次也就够了;此外,“”on” + eventName”的字符串拼接也会重复执行。优化如下:

function addEvent(elems, eventName, handler) {
var i = -1, len = elems.length;
if (window.attachEvent) {
eventName = “on” + eventName;
while (++i < len) {
elems[i].attachEvent(eventName, handler);
}
} else if (window.addEventListener) {
while (++i < len) {
elems[i].addEventListener(eventName, handler, false);
}
}
}

2.2 尽量使用原生的函数而不是自定义函数

当你对Javascript的内置类型变量执行某项操作时,你应该先查查这项操作是否有原生的方法。

要生成一个数组的副本,你会怎么做呢?遍历数组元素然后逐个赋值到另一个数组,这似乎是唯一的方法。其实,原生的Array.prototype.slice就可以达到复制的目的。这个方法可以从某个数组返回选定的元素,且不影响原来的数组。如果参数留空,返回的就是全部元素。

Array.prototype.slice还可以对某些不是数组而又能通过数字索引访问的类型进行操作,比如arguments:

arguments:
function test() {
alert(Array.prototype.slice.call(arguments));
}
test(1, 2, 3); // output “1,2,3″

在Firefox下,它甚至可以对HtmlCollection进行操作。可惜在IE下不行。

另一个例子是数组排序,一般情况下,我们不需要另外写排序算法,用原生的Array.prototype.sort就够了。sort方法只有一个参数,该参数是一个函数,决定两个相比较的元素谁在前谁在后,默认是按照字符顺序排序,比如11会排在2之前。要按数字大小排序,可以这样写:

var arr = [11, 2, 0, 12, 33];
arr.sort(
function(a, b) {
return a - b;
}
);
也可以按照对象的某个属性进行排序:
var arr = [
{ id : 11 },
{ id : 0 },
{ id : 22 }
];
arr.sort(
function(a, b) {
return a.id - b.id;
}
);

2.3 数组去重复

Array类型并没有提供去重复的方法,如果要把数组的重复元素干掉,那得自己想办法:

function unique(arr) {
var result = [], isRepeated;
for (var i = 0, len = arr.length; i < len; i++) {
isRepeated = false;
for (var j = 0, len = result.length; j < len; j++) {
if (arr[i] == result[j]) {
isRepeated = true;
break;
}
}
if (!isRepeated) {
result.push(arr[i]);
}
}
return result;
}

总体思路是把数组元素逐个搬运到另一个数组,搬运的过程中检查这个元素是否有重复,如果有就直接丢掉。从嵌套循环就可以看出,这种方法效率极低。我们可以用一个hashtable的结构记录已有的元素,这样就可以避免内层循环。恰好,在Javascript中实现hashtable是极为简单的,改进如下:

function unique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
}

三、使代码更易读、更好维护

无论是在开发中还是开发后,保持代码清晰易读可以更快更准确地修改代码。

3.1 连接HTML字符串

相信做前端开发的朋友都受过这个折磨:连接HTML的时候被可恶的单引号、双引号搞得头昏脑胀。比如:

element.innerHTML = ‘’ + text + ‘’;

这里介绍一个字符串格式化函数:

String.format = function(str) {
var args = arguments, re = new RegExp(”%([1-" + args.length + "])”, “g”);
return String(str).replace(
re,
function($1, $2) {
return args[$2];
}
);
};

调用方法很简单:

element.innerHTML = String.format(’%3’, url, msg, text);

意思就是用第n个参数把%n替换掉。这样一来清晰多了吧。

3.2 为您的程序打造一个Config配置对象

编写Java或者C#程序的时候,我们一般会从XML读取程序的配置信息。在Javascript里面,用XML做配置信息不大划算,一方面要多请求一个XML文件或者把XML字符串转换为XML对象,另一方面XML对象的方法比较复杂冗长。轻量级的JSON是最好的选择。

程序中的常量应该放到Config配置对象中,比如Ajax请求的Url、某个操作的提示等,例如:

var Config = {
ajaxUrl : “test.jsp”,
successTips : “请求完成”
};
如果Config的数量较多,可以根据配置类型多嵌套一层,比如:
var Config = {
url : {
src1 : “test1.jsp”,
src2 : “test2.jsp”,
.
.
},
tips : {
src1Suc : “请求1完成”,
src2Suc: “请求2完成”,
.
.
}
};

Config应放置于程序的最前面,方便查看和修改。

举报

  • 相关推荐
  • 向算而生,自主为羽 | 睿思芯科携灵羽处理器亮相RISC-V中国峰会

    第五届RISC-V中国峰会7月16日在上海张江开幕,睿思芯科展示了中国首款全自研高性能RISC-V服务器处理器"灵羽处理器"。该处理器凭借全栈自主设计、极致扩展与兼容能力、敏捷落地速度三大核心优势引发关注,性能可媲美国际主流架构芯片,标志国产服务器芯片首次突破"高性能、全自研IP、自主SoC"技术壁垒。峰会汇聚全球数百家企业及研究机构,围绕高性能计算、软件与生态系统等热点领域展开讨论。灵羽处理器专为AI大模型等新兴高算力场景设计,已与联想、商汤科技等头部厂商建立深度合作,构建完整生态链,为全球数据中心算力基建提供"中国方案"。

  • 全能旗舰 | KSCAN-E重塑工业计量效率与精度新标杆

    思看科技推出旗舰级KSCAN-E智能无线三维扫描仪,具备0.02mm超高精度和8,290,000点/秒扫描速度,支持6种工作模式。该设备采用嵌入式运算模块和双供电系统,实现无线数据采集,适用于航空航天、汽车制造等工业领域。配备4×27蓝光激光线和高性能相机,支持180fps高速扫描,可精准捕捉复杂表面特征。内置强大计算模块,支持无线传输和双网卡设计,满足户外作业需求。搭配DefinSight计量软件平台,提供全场景三维数字化解决方案,重新定义工业计量效率与精度的新标准。

  • 谭章熹博士出席 RISC-V 中国峰会 详解开源架构全球征程与中国机遇

    2025年7月16日,第五届RISC-V中国峰会在上海张江科学会堂举行。作为中国大陆规格最高、规模最大的RISC-V专业会展,峰会吸引了全球专家与产业领袖参与。RISC-V国际基金会董事谭章熹博士发表主题演讲,回顾了RISC-V从伯克利起步到全球发展的历程,强调其开源、免费、无专利限制的特性推动了技术创新和生态繁荣。他指出,RISC-V基础指令集仅40余条,结构简洁但高度模块化,适用于从嵌入式设备到高性能计算领域。中国正积极建设RISC-V生态,预计2030年中国高性能RISC-V芯片市场规模将达2000-3000亿元,占全球20%-30%。谭博士表示,RISC-V发展重心正向AI加速、数据中心等高性能场景迈进,将与x86、ARM展开竞争,成为数字时代承载国家技术主权与产业升级的重要基础。

  • OpenAI发布ChatGPT Agent智能体:支持写代码、做PPT、分析金融

    OpenAI推出ChatGPT智能体,整合网页交互、数据搜索与多模态协作功能,可完成代码生成、PPT制作、金融分析等复杂任务。该智能体融合Operator的网页自动化操作、Deep Research的数据分析能力及优化后的GPT-4对话引擎三大核心模块。目前面向付费用户开放,Pro版近乎无限使用,其他版本每月限50次任务。OpenAI承认其仍存在金融建模需人工验证、非英语文本解析准确率低等技术局限,并

  • 刚刚,OpenAI通用智能体ChatGPT Agent正式登场

    ​Agent AI 时代,比我们想象中来得要早一些。 北京时间周五凌晨,OpenAI 突然开启了新产品直播。 本次发布的是全新的 ChatGPT Agent,它实现了通用智能体(Agent)能力的关键升级。

  • TECNO发布全球最薄三折概念机PHANTOM Ultimate G Fold

    TECNO发布PHANTOM Ultimate G Fold概念机,采用创新双屏内折设计,配备9.94英寸柔性大屏,折叠状态下厚度仅11.49mm,展开后最薄处3.49mm,刷新三折手机轻薄纪录。其核心创新在于独特的G型三折结构,通过左右双内折实现屏幕完全内藏保护,并配备外屏保证折叠状态下的常规使用体验。该机采用精密双铰链系统,支持多角度悬停,搭配2000MPa高强度钢铰链和0.3mm超薄钛纤维背板,兼顾强度与轻薄。量产版将搭载高性能芯片、多焦段三摄系统和超5000mAh电池,重新定义旗舰折叠屏体验。

  • 三星为何一直领跑折叠屏市场?原因不只是技术和经验

    三星在折叠屏手机领域持续领先,2019年推出首款Galaxy Fold开创先河。最新Galaxy Z Fold7和Z Flip7采用超轻量设计(215g/8.9mm)、增强50%的UTG柔性玻璃和装甲铝铰链结构,实现更耐用折叠体验。搭载骁龙8 Gen3移动平台,支持多模态AI交互,外屏可完成语音指令操作,展开后提供PC级多任务处理。影像系统升级2亿像素主摄和AI增强拍摄功能,配备动态AMOLED屏幕和7年系统更新承诺。凭借先发技术优势、旗舰级硬件配置和长期服务保障,三星折叠屏占据全球40%市场份额,成为行业标杆。

  • AI日报:百度发布“绘想”平台与MuseSteamer;阿里音频驱动全身数字人模型OmniAvatar

    【AI日报】今日AI领域重要动态:1.开源语音大模型Step-Audio-AQAA发布,实现音频到语音的端到端自然转换;2.百度推出"绘想"平台与MuseSteamer,通过AI一键生成专业级视频;3.浙大与阿里联合发布OmniAvatar,音频驱动数字人技术取得突破;4.百度搜索迎十年来最大改版,新增智能框、百看和AI助手功能;5.xAI开发者控制台新增Grok4及Grok4Code引用,预示新一代AI模型即将发布;6.Gemin

  • A日报:Kimi开放平台上线Kimi Playground;OpenAI重磅发布ChatGPT Agent;Suno推人声替换功能

    【AI日报】汇总了近期AI领域重要进展:1)月之暗面推出Kimi Playground平台,实现从对话助手到智能助理的转变;2)OpenAI发布ChatGPT Agent,支持自主执行浏览、购物等任务;3)Suno发布v4.5+版本,新增人声替换等音乐创作功能;4)谷歌Veo3视频生成模型上线,支持文本转视频;5)全球首个直播流扩散模型MirageLSD发布,实现实时视频转换;6)VSCode编程助手Traycer提升大型代码库处理效率;7)ART框架支持Python一键训练AI Agent;8)NVIDIA语音识别模型Canary-Qwen-2.5B词错率创新低;9)Mistral AI推出Le Chat挑战ChatGPT;10)百度小度上线首个支持物理交互的MCP Server;11)Lightricks的LTXV模型实现60秒高质量视频生成;12)开源模型LTX-Video13B支持30倍速高清视频生成。

  • AI日报:12306 MCP Server上线;百度推AI搜索助手Tizzy.ai;ChatGPT录音模式面向Plus用户开放

    【AI日报】今日AI领域重要动态:1)百度推出无广告智能搜索助手Tizzy.ai,整合影视资源与深度思考功能;2)12306开源火车票查询引擎上线,采用FastAPI架构实现秒级响应;3)ChatGPT向Plus用户全面开放录音功能,支持实时记录与内容总结;4)开源SaaS模板FireGEO助力快速构建现代化Web应用;5)国产工具ReadMeX可一键生成高质量GitHub文档;6)百度AI助手新增视频通话功能,支持方言识别;7)Jacky