首页 > 教程 > 关键词  > 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应放置于程序的最前面,方便查看和修改。

举报

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

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

  • AI日报:阿里开源3D数字人项目MNN TaoAvatar;MiniMax Agent上线;罗永浩数字人直播再探“AI+IP”带货模式

    本文汇总了AI领域最新动态:1)阿里开源MNN+TaoAvatar技术,实现手机端3D数字人实时交互;2)MiniMax升级AI工具Agent,新增智能图像搜索和多语言支持;3)罗永浩数字人将登陆百度电商直播;4)OpenAI员工套现近30亿美元,软银成最大接盘方;5)ChatGPT推出深度研究和语音模式升级;6)Meta发布V-JEPA2模型,提升机器人环境适应能力;7)AMD与OpenAI合作推出新一代AI芯片;8)Google Gemini集成Imagen4图像生成模型;9)谷歌AI实现10公里级精准天气预报;10)Gartner预测到2028年80%的AI应用开发时间将缩短50%。

  • 从“经验炼钢”到“科技炼钢”, 南京钢铁携手华为云Stack开启AI超级工厂之路

    南京钢铁集团与华为合作推进"AI+钢铁"数字化转型,打造"元冶·钢铁大模型"平台。该平台已覆盖研发设计、生产制造等四大业务方向20个智能场景应用,实现从经验炼钢到科技炼钢的转变。在峰谷发电、碳锰低温钢研发等场景中,AI技术显著提升能效与研发效率,如峰谷发电效益提升4.24倍,吨焦成本降低5-10元。通过"双模智能"融合知识库与数据引擎,南钢实现精准质检与智能问答。2024年成为全国首批数字资产入表上市企业,全年数据资产入表超1000万元。双方构建的工业智能新范式,正引领中国钢铁行业智能化升级。

  • Meta拟重金加码AI赛道,传将斥资超百亿美元投资Scale AI

    Meta 正与人工智能数据服务公司 Scale AI 商讨一项巨额投资,金额可能高达或超过 100 亿美元……

  • 海尔青岛洗衣机互联工厂获国际BSCI认证

    海尔青岛洗衣机互联工厂近日通过国际BSCI认证审核,在员工权益保障、环境保护等社会责任维度获得A级评价。这是继2021年成为全球家电行业首个"碳中和"工厂后,该工厂在可持续发展领域再获国际认可。BSCI认证由欧洲对外贸易协会发起,是进入国际供应链的重要通行证。此次认证将助力海尔拓展欧盟高端市场,提升国际竞争力。未来工厂将以认证为新起点,深化智能制造能力,为全球用户提供更优质产品体验。

  • Meta拟百亿美元投资Scale AI,微美全息(WIMI.US)端侧多模态AI加速开启科技新局

    Meta正与AI初创企业Scale AI洽谈数十亿美元投资,估值或超100亿美元,有望创下私营企业融资纪录。Scale AI为微软、OpenAI等提供数据标注服务,是生成式AI热潮主要受益者。这将是Meta史上最大规模外部AI投资,标志其战略转向。Meta CEO扎克伯格宣布将AI确立为战略重心,2024年将投入650亿美元推进相关项目,重点打造Llama模型成为行业标准。同时,谷歌推出Gemini助手"计划操作"新功能,支持任务自动化管理。科技巨头纷纷重金布局AI,微软向OpenAI注资逾130亿美元,亚马逊投资Anthropic数十亿美元。行业观察认为AI技术普及将推动效率革命,微美全息等企业正通过技术创新赋能产业转型,共同探讨人工智能技术突破新动态。AI正以前所未有的速度重塑全球发展格局。

  • 与 ChatGPT 一起“越陷越深”

    ChatGPT 似乎正在让一些用户走上妄想甚至阴谋论的道路,或者说,至少在某种程度上强化了这类思维模式……

  • 齐鲁起“智”风!销售易AI CRM首秀青岛,助力企业“用上AI、用好AI”

    6月10日,腾讯云城市峰会在青岛举行,腾讯旗下销售易携中国首款AI+CRM产品NeoAgent亮相。该产品基于腾讯混元大模型和DeepSeek开源模型打造,针对制造业产品复杂、销售周期长等特点,助力企业实现从获客到服务的全周期智能化升级。销售易已在山东获得多家龙头企业支持,其AI+CRM解决方案通过实际应用验证,能有效提升企业运营效率和客户体验。未来,销售易将继续深化与腾讯合作,推动AI技术在CRM领域的创新应用,加速行业数字化转型进程。(140字)

  • 40+沪上头部企业走进腾讯,与米其林等共话CRM国产替代新实践

    销售易主办的"Neo企数字营"活动在上海腾讯总部成功举办,聚焦跨国企业如何实现健康增长及本土化运营下的数据合规等议题。活动汇聚40多家世界500强企业,米其林等企业代表分享了与销售易合作的成功经验。销售易CEO史彦泽指出,国产CRM软件已具备替代国际厂商的技术能力,能帮助企业解决数据合规、构建全渠道数字化销售体系等痛点。凭借深耕行业的业务理解和全栈合规安全保障,销售易已助力施耐德电气等众多500强企业完成CRM国产化替代。活动显示,随着数据安全管理加强和本土化需求提升,企业对国产CRM替代方案的关注持续增长。

  • GCDG丨江阴站:AI赋能,开发者技术沙龙圆满举办!

    2025年6月8日,葡萄城开发者社区在江苏举办"AI赋能·开发者技术交流会"。活动汇聚多地开发者,共同探讨AI+低代码创新实践。开发者谷凯展示如何利用GPT-4等AI工具提升开发效率,强调独立开发者"一人也能创造价值"的理念。钟代冬分享家纺电商低代码工程案例,展示活字格平台实现复杂任务自动化运维的能力。技术顾问薛禹坤介绍"All-in-One一站式智能体开发"理念,演示活字格V11.0新版本AI功能。活动促进跨地域、跨领域思维碰撞,为开发者搭建紧密连接平台,推动前沿技术交流与实践经验分享。