当前位置: 首页 > 编程日记 > 正文

JavaScript初学者应注意的七个细节

  每种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节,与大家分享。

(1)简化代码


 

JavaScript定义对象和数组非常简单,我们想要创建一个对象,一般是这样写的:  

var car = new Object();
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;

下面的写法可以达到同样的效果:

var car = {colour:'red',wheels:4,hubcaps:'spinning',age:4
}

后面的写法要短得多,而且你不需要重复写对象名称。

另外对于数组同样有简洁的写法,过去我们声明数组是这样写的:

var moviesThatNeedBetterWriters = new Array('Transformers','Transformers2','Avatar','Indiana Jones 4'
);

更简洁的写法是: 

var moviesThatNeedBetterWriters = ['Transformers','Transformers2','Avatar','Indiana Jones 4'
];

对于数组,还有关联数组这样一个特别的东西。 你会发现很多代码是这样定义对象的:

var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning';
car['age'] = 4;

这太疯狂了,不要觉得困惑,“关联数组”只是对象的一个别名而已。

另外一个简化代码的方法是使用三元运算符,举个例子:

var direction;
if(x < 200){direction = 1;
} else {direction = -1;
}

我们可以使用如下的代码替换这种写法:

var direction = x < 200 ? 1 : -1;

 

(2)使用JSON作为数据格式   


伟大的Douglas Crockford发明了JSON数据格式来存储数据,你可以使用原生的javascript方法来存储复杂的数据而不需要进行任何额外的转换,例如:

var band = {"name":"The Red Hot Chili Peppers","members":[{"name":"Anthony Kiedis","role":"lead vocals"},{"name":"Michael 'Flea' Balzary","role":"bass guitar, trumpet, backing vocals"},{"name":"Chad Smith","role":"drums,percussion"},{"name":"John Frusciante","role":"Lead Guitar"}],"year":"2009"
}

你可以使用在JavaScript中直接使用JSON,甚至作为API返回的一种格式,在许多的API中被应用,例如:

<div id="delicious"></div><script>
function delicious(o){var out = '<ul>';for(var i=0;i<o.length;i++){out += '<li><a href="' + o[i].u + '">' +o[i].d + '</a></li>';}out += '</ul>';document.getElementById('delicious').innerHTML = out;
}
</script>
<script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"></script>

这里调用delicious Web服务获取最新书签,以JSON格式返回,然后将它们显示成无序列表的形式。

从本质上讲,JSON是用于描述复杂的数据最轻量级的方式,而且直接它运行在浏览器中。 你甚至可以在PHP中调用 json_decode()函数来使用它。

3)尽量使用JavaScript原生函数 


 

要找一组数字中的最大数,我们可能会写一个循环,例如:

var numbers = [3,342,23,22,124];
var max = 0;
for(var i=0;i<numbers.length;i++){if(numbers[i] > max){max = numbers[i];}
}
alert(max);

其实,不用循环可以实现同样的功能:

var numbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);

而最简洁的写法是:

Math.max(12,123,3,2,433,4); // returns 433

你甚至可以使用Math.max来检测浏览器支持哪个属性:

var scrollTop= Math.max(doc.documentElement.scrollTop,doc.body.scrollTop
);

如果你想给一个元素增加class样式,可能原始的写法是这样的:

function addclass(elm,newclass){var c = elm.className;elm.className = (c === '') ? newclass : c+' '+newclass;

而更优雅的写法是:

function addclass(elm,newclass){var classes = elm.className.split(' ');classes.push(newclass);elm.className = classes.join(' ');
}

 

(4)事件委托


事件是JavaScript非常重要的一部分。我们想给一个列表中的链接绑定点击事件,一般的做法是写一个循环,给每个链接对象绑定事件,HTML代码如下:

<h2>Great Web resources</h2>
<ul id="resources"><li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li><li><a href="http://sitepoint.com">Sitepoint</a></li><li><a href="http://alistapart.com">A List Apart</a></li><li><a href="http://yuiblog.com">YUI Blog</a></li><li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li><li><a href="http://oddlyspecific.com">Oddly specific</a></li>
</ul>

脚本如下:

// Classic event handling example
(function(){var resources = document.getElementById('resources');var links = resources.getElementsByTagName('a');var all = links.length;for(var i=0;i<all;i++){// Attach a listener to each linklinks[i].addEventListener('click',handler,false);};function handler(e){var x = e.target; // Get the link that was clickedalert(x);e.preventDefault();};
})();

更合理的写法是只给列表的父对象绑定事件,代码如下:

(function(){var resources = document.getElementById('resources');resources.addEventListener('click',handler,false);function handler(e){var x = e.target; // get the link thaif(x.nodeName.toLowerCase() === 'a'){alert('Event delegation:' + x);e.preventDefault();}};
})();

 

(5)匿名函数


关于JavaScript的最头疼的事情之一是,它的变量没有特定的作用范围。 一般情况下,任何变量,函数,数组或对象都是全局性,这意味着在同一页上的其他脚本可以访问并覆盖它们。解决方法是把变量封装在一个匿名函数中。 例如,下面的定义将产生三个全局变量和和两个全局函数:

var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){// [...]
}
function getMemberDetails(){// [...]
}

封装后如下:

var myApplication = function(){var name = 'Chris';var age = '34';var status = 'single';return{createMember:function(){// [...]},getMemberDetails:function(){// [...]}}
}();
// myApplication.createMember() and
// myApplication.getMemberDetails() now works.

这被称为单体模式,是JavaScript设计模式的一种,这种模式在YUI中用得非常多,改进的写法是:  

var myApplication = function(){var name = 'Chris';var age = '34';var status = 'single';function createMember(){// [...]}function getMemberDetails(){// [...]}return{create:createMember,get:getMemberDetails}
}();
//myApplication.get() and myApplication.create() now work.

  

6)代码可配置


你写的代码如果想让别人更容易进行使用或者修改,则需要可配置,解决方案是在你写的脚本中增加一个配置对象。要点如下: 
 
1、在你的脚本中新增一个叫configuration的对象。

2、在配置对象中存放所有其它人可能想要去改变的东西,例如CSS的ID、class名称、语言等等。

3、返回这个对象,作为公共属性以便其它人可以进行重写。 

 

 

7)代码兼容性


  兼容性是初学者容易忽略的部分,通常学习Javascript的时候都是在某个固定的浏览器中进行测试,而这个浏览器很有可能就是IE,这是非常致命的,因为目前几大主流浏览器中偏偏IE对标准的支持是最差的。最终用户看到的结果也许就是,你写的代码在某个浏览器无法正确运行。你应该把你的代码在主流的浏览器中都测试一下,这也许很费时间,但是应该这样做。  

  

(编译来源:梦想天空  原文来自:Seven JavaScript Things I Wish I Knew Much Earlier In My Career)

相关文章:

开学季,教你用Python画大学教室座位神分区图!网友直呼“中枪”

作者 | 丁彦军转载自恋习Python&#xff08;ID:sldata2017&#xff09;我们上过大学的朋友们都知道&#xff0c;大学没有固定教室也没有固定的座位&#xff0c;所以大家可以随便找个自己喜欢的位置坐下。别看这些不起眼的座位&#xff0c;感觉没什么差别。其实&#xff0c;它们…

【Qt】在ubuntu上打包发布Qt程序,可以不依赖Qt环境

参考博客 https://blog.csdn.net/theArcticOcean/article/details/68069964 https://blog.csdn.net/hjl_1991/article/details/50365927 亲测过程 1、编译处release版本的Qt程序 2、创建打包文件夹 mkdir release 3、进入文件夹&#xff0c;将要打包的程序拷贝到文件中 cd r…

Smart template的控件能否当成普通控件来用

我的同事问过我这个问题&#xff1a; 只要弄清楚Smart control的原理&#xff0c;就能回答这个问题。 答案是: smart control可以像普通的控件一样在xml view中被定义和使用&#xff0c;但是必须结合OData annotation&#xff0c;否则没有意义。以Smart control里的Smart field…

60行代码爬取知乎“神回复”,句句戳中泪点

作者 | shenzhongqiang转载自Python与数据分析&#xff08;ID:PythonML&#xff09;之前的一篇文章《爬了下知乎神回复&#xff0c;笑死人了~》发布后&#xff0c;引发了大家热烈的反响。很多朋友觉得很神奇&#xff0c;在后台问强哥是怎么做到的&#xff0c;有的朋友还表示不太…

IDC行业前景,机遇与挑战并存

中国互联网信息中心(CNNIC)发布了截至2010年6月底中国互联网发展基本情况的报告。在这半年一次的例行报告中&#xff0c;照例有些鼓舞人心的好消息。报告显示中国网民规模达到4.2亿&#xff0c;较09年底增长2.9%&#xff0c;宽带普及率达到98.1%&#xff0c;宽带网民规模为3.64…

【Ubuntu】Ubuntu14.04添加163的源

1、简单的两步 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak sudo wget -O /etc/apt/sources.list http://mirrors.163.com/.help/sources.list.trusty sudo apt update2、注意 这是更改Ubuntu14.04的源&#xff0c;针对ubuntu其它版本参见博客 【Ubuntu】将Ub…

用模板实现单例模式(线程安全)、模板方式实现动态创建对象

一、用模板实现单例模式 在前面的文章中&#xff0c;用过多种方法实现单例模式&#xff0c;现在用模板方式来实现&#xff1a; 为了实现线程安全&#xff0c;需要在linux 下使用pthread_mutex_t 加锁&#xff0c;请使用g 编译并需要链接 -lpthread 使用的是double-check lock&a…

推荐系统召回四模型之全能的FM模型

作者 | 张俊林作者简介&#xff1a;中国中文信息学会理事&#xff0c;中科院软件所博士。目前在新浪微博 AI Lab 担任资深算法专家。在此之前&#xff0c;张俊林曾经在阿里巴巴任资深技术专家并负责新技术团队&#xff0c;以及在百度和用友担任技术经理及技术总监等职务。同时他…

MIDP2.0引入了Push注册机制

PushMIDP2.0引入了Push注册机制&#xff0c;作为一种允许应用被自动启动的方法&#xff0c;由预先设置的警告或者经inbound连接收到的消息。 通过这种方法&#xff0c;MIDlets可以用来设置处理规则事件&#xff0c;如定时从服务器上同步数据&#xff0c;或者非规则事件如一个突…

【OpenCV】cv::Mat和std::vector之间的相互转换

Mat转换成Vector 以vector 为例&#xff0c;其它模型类似 vector getVector(const Mat & a) { Mat b; a.convertTo(b, CV_64F); return (vector)(b.reshape(1, 1)); } Vector转换成Mat 使用Mat的构造函数 std::vector responses; cv::Mat tres; tres Mat(resp…

mysql数据库密码忘记恢复脚本

#!/bin/bashread -p "请输入你要修改的密码&#xff1a;" passwordskipawk /skip-grant-tables/{print $1} /etc/my.cnfif [ ! -n "$skip" ];then ##判断是否有skip-grant-tablessed -i /^[mysqld]/askip-grant-tables /etc/my.cnf ##变量为空就执行插入el…

-16 | 12 等于多少

2019独角兽企业重金招聘Python工程师标准>>> 今天同事问到一个问题 -16 | 12 等于多少&#xff1f; 从教材中知道&#xff0c;二进制数的第一位是符号位&#xff0c;正数为0&#xff0c;负数为1&#xff0c;再根据取反的定义可得到如下算式&#xff08;假设整形是占…

深度学习在自动驾驶感知领域的应用

程序员转行学什么语言&#xff1f; https://edu.csdn.net/topic/ai30?utm_sourcecsdn_bw 本次直播课程是由深度学习资深研究者-杨阳博士从百度Apollo自动驾驶感知技术出发&#xff0c;讲解环境感知中深度学习的实用性与高效性。 课程从Apollo 3.5感知技术介绍、自动驾驶中的目…

【Qt】QObject::moveToThread 总结

原型 void QObject::moveToThread(QThread *targetThread) 功能 将QObject及其孩子移动到 指定线程&#xff08;targetThread&#xff09;中。它的事件将在targetThread线程中处理。 注意事项 1、该对象不能有parent&#xff0c;否则无法移动。 2、如果targetThread为零,…

中国联通备战5G MWC发布《Edge-Cloud平台架构及产业生态白皮书》

2月26日&#xff0d;3月1日&#xff0c;中国联通受邀参加2018MWC世界移动通信大会&#xff0c;作为本次大会GSMA智慧城市展区参展的唯一中国运营商&#xff0c;中国联通提出以服务为驱动的面向5G网络切片的演进思路&#xff0c;为客户提供4G到5G演进阶段的一致性的网络服务&…

转自一个面试者的“提示”

转自CSDN&#xff1a;http://topic.csdn.net/u/20110112/15/FFCBED16-E346-4074-87EE-0D682EF67FE2.html 希望对2011年努力寻找工作的人有帮助。 最近一直在参与公司的面试&#xff0c;为公司招收SE和SA。今天总结发现最近一共面试了二十几份简历&#xff0c;并且都是经过HE和猎…

【OpenCV】读取csv文件

csv简介 逗号分隔值&#xff08;Comma-Separated Values&#xff0c;CSV&#xff0c;有时也称为字符分隔值&#xff0c;因为分隔字符也可以不是逗号&#xff09;&#xff0c;其文件以纯文本形式存储表格数据&#xff08;数字和文本&#xff09;。纯文本意味着该文件是一个字符…

300道Python面试题,备战春招!

作者 | kenwoodjw 责编 | Jane 出品 | Python大本营&#xff08;ID&#xff1a;pythonnews&#xff09; 程序员转行学什么语言&#xff1f; https://edu.csdn.net/topic/ai30?utm_sourcecsdn_bw 过年开工回来到现在&#xff0c;营长每天在地铁里只看到了两家公司的广告&…

稻盛和夫《活法》

以下内容是摘自<稻盛和夫>的《活着》中文翻译版。此生将托付于此书&#xff01; “吾等定此血盟不为私利私欲&#xff0c;但求团结一致&#xff0c;为社会、为世人成就事业。特此聚合诸位同志&#xff0c;血印为誓。”——稻盛和夫 1.人类活着的意义、人生的目的到底是什…

【OpenCV】将图像数据由YUV格式转换成JPG格式直接使用,而不保存成文件

解决方法 使用OpenCV图像编码和解码函数&#xff1a;imencode、imdecode std::vector data_encode; imencode(“.png”, img_encode, data_encode); 参考博客&#xff1a; https://blog.csdn.net/tt_ren/article/details/53227900

一个装作异步的代码段

// 获取当前周期 getCurrentCycle(subDepartmentIdthis.props.subDepartmentId) {let { dispatch } this.propscalculateApi.currentKaoqinCycle({id:subDepartmentId}).then(res>{ if (res.data.id) { //console.log(res.data.name); this.setState({ cycleName: res.data…

拯救老电影——详解爱奇艺ZoomAI视频增强技术的应用

看各种视频节目已经成为当前娱乐休闲的一种方式&#xff0c;技术的进步和网速的升级提升了我们的视觉愉悦感&#xff0c;但是你总会遇到一些情况&#xff0c;比如老电影/电视剧的画面抖动、色彩灰暗&#xff1b;用户带宽受限&#xff0c;选择低码流的模式&#xff1b;UP主上传的…

Android 中文API (94) —— MediaController

前言 本章内容是android.widget.MediaController&#xff0c;版本为Android 2.3 r1&#xff0c;翻译来自"唐明"&#xff0c;再次感谢"唐明" &#xff01;期待你一起参与Android 中文API的翻译&#xff0c;联系我over140gmail.com。 声明 欢迎转载&#xf…

数据分析奥斯卡女神们,谁是你心中的No.1?

作者 | 徐麟转载自数据森麟&#xff08;公众号 ID&#xff1a;shujusenlin&#xff09;前言在开始今天的正文前&#xff0c;首先带来一首经典的由奥黛丽赫本演唱的《Moon River》&#xff0c;也是电影《蒂凡尼的早餐》中的主题曲。一年一度的奥斯卡奖于上月落下了帷幕&#xff…

ansible组件-playbook学习笔记

playbook的基础组件 name 定义playbook或者task的名称 hosts 用于指定要执行指定任务的主机 user 用于指定远程主机上的执行任务的用户 task 任务列表 vars 定义变量 vars_files 定义变量文件 notify 任务执行结果如果是发生更改的则触发定义在handler的任务 handlers 用于当前…

【linux工具】ldconfig:linux配置动态链接库

简介 ldconfig命令的用途主要是在默认搜寻目录/lib和/usr/lib以及动态库配置文件/etc/ld.so.conf内所列的目录下&#xff0c;搜索出可共享的动态链接库&#xff08;格式如lib*.so*&#xff09;,进而创建出动态装入程序(ld.so)所需的连接和缓存文件。 用法 ldconfig [-v|–ve…

T-SQL IN 谓词

T-SQL谓词之一 IN。检查指定(IN谓词前)的值&#xff0c;字段值或标量表达式是否包含在定义的一组元素(放在括弧内)中。这组元素可以有一或多个值&#xff0c;而不同值之间由逗点分开。 创建一个临时表&#xff0c;并插入一些值。 CREATETable#t( Fonts NVARCHAR(10))INSERTI…

vue:虚拟dom的实现

Vitual DOM是一种虚拟dom技术&#xff0c;本质上是基于javascript实现的&#xff0c;相对于dom对象&#xff0c;javascript对象更简单&#xff0c;处理速度更快&#xff0c;dom树的结构&#xff0c;属性信息都可以很容易的用javascript对象来表示&#xff1a; let element{tagN…

【Ubuntu】apt-get命令小结

apt-get install 安装软件包 apt-get remove 删除已安装的软件包&#xff08;保留配置文件&#xff09; apt-get update 更新 apt-get autoremove 自动删除没用的包 apt-get purge 删除包&#xff0c;不保留配置文件 apt-get –purge remove

腾讯58篇论文入选CVPR 2019,两年增长超200%

全球计算机视觉顶级会议 IEEE CVPR 2019(Computer Vision and Pattern Recognition&#xff0c;即IEEE国际计算机视觉与模式识别会议) 即将于6月在美国长滩召开。本届大会总共录取来自全球论文1299篇。中国团队表现不俗&#xff0c;此次&#xff0c;腾讯公司有超过58篇论文被本…