Javascript的一些技巧(《Javascript DOM编程艺术》、Javascript语言精粹)
1.什么时候用布尔变量当变量
假设你需要一个这样的变量:我在睡觉——存为一个值;我没在睡觉——存为另一个值。
一般的做法:
var stateOne="睡觉",stateTwo="没睡觉";
更好的做法:
var sleeping="true";
这种做法的本质是利用布尔类型的性质,用一个变量来区分两种状态(睡觉用true,没睡用false)——如果你的目地不是区分状态而是这两个状态代表的值,不能用这个办法。
例子:
1.目地是两个状态代表的值:本文的“2.用对象来存储数据时,书写的代码顺序”里的gender对象,虽然也是要区分两种状态(男或者女),但是目地是要把男/女作为字符串用在其它变量中进行拼接,所以不能用布尔值。
2.目地是区分两个状态:
2.用对象来存储数据时,书写的代码顺序
//记录学生的电话号码、家庭住址、邮箱,并且分男女存放(但经常取出的数据是不需要分男女的)。
var student = {};
student.phone = {};
var gender = {m:"male ",f:"female "};
student.phone.male = {Lei_li:gender.m + "001 ",Ming_wang:gender.m + "010 "};
student.phone.female = {Hong_xiao:gender.f + "001 ",Li_xiao:gender.f + "010 "}
student.address = {};
var country = {cn:"China ",en:"England "}
student.address.male = {Lei_li:gender.m + country.cn + "yunnan ",Ming_wang:gender.m + country.en + "london "};
student.address.female = {Hong_xiao:gender.f + country.cn + "yunnan ",Li_xiao:gender.f + country.en + "london "};
student.mail = {};
var mailType = {qq:"@qq.com ",outLook:"@outlook.com "};
student.mail.male = {Lei_li:gender.m + "liLei" + mailType.qq,Ming_wang:gender.m + "wangMing" + mailType.outLook};
student.mail.female = {Hong_xiao:gender.f + "xiaoHong" + mailType.qq,Li_xiao:gender.f + "xiaoLi" + mailType.outLook};
alert(student.mail.male.Ming_wang);
//思考的时候可以选择自顶向下或自底向上,但写的时候只能是“自底向上”地写。
//用到变量的时候再声明,这有利于阅读。
//如果拼接的字符串之间需要空格,就要在字符串变量最后加个空格(不需要就不加)——同理,最后一个字符串变量也加个空格。
3.形如year = 2010与year = "2010"的区别与应用。
其实是在问,变量要设为数字还是字符串?一般来说设为数字最好:
/*
这里的变量year既可以通过+=操作符变成字符串参与文本显示,又可以用于数值计算——比如根据网络时间,过一年自动进行year + 1,如果year是字符串就没办法做到这一点了。
*/
var year = 2018;
var message = "The year is ";
message += year;
alert(message);
4.从阅读上考虑,什么时候用"<"?什么时候用">"?
//有"&&"的情况下,这样写更接近"1 < test < 5",更易读。
var test = 2;
if(1 < test && test < 5){
alert("Is true");
}
else{
alert("Is false");
}
//有"||"的情况下,把变量放在同一边,可以更直观看出哪个是"小于"哪个是"大于";同时也让数字"-1"和"5"从左到右排列。
var test = -2;
if(test < -1 || test > 5){
alert("Is true");
}
else{
alert("Is false");
}
//数字从左到右、从小到大排列,更易读。
if( !(1 < 2) ){
alert("Is true");
}
else{
alert("Is false");
}
其实这不需要考虑那么多,毕竟这只是简单的逻辑,这都看不懂是不可能的。所以这一条只能说是个人的风格。
4.值为null的变量在转换为布尔值后完全等价于false
var test_items = document.getElementsByTagName("p");
for(var i = 0 ; i < test_items.length ; i++){
var test_title = test_items[i].getAttribute("title");
//对于if判断语句,值为null的在转换为布尔值时就是false,所以这里可以直接写成if(test_title){}
if( test_title != null ){
alert( test_title );
}
}
原文:“当检查某项数据是否是null值时,我们其实是在检查它是否存在.....if(something)与if(something != null)完全等价”
Javascript的一些技巧(《Javascript DOM编程艺术》、Javascript语言精粹)的更多相关文章
- JavaScript DOM 编程艺术 ---> JavaScript语法
二. JavaScript语法目录 2.1 语法 javaScript代码要通过HTML/XHTML文档才能执行.可以有两种方式完成这一点,第一种是将JavaScript代码放到文档<head ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
- 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- JavaScript DOM编程艺术读后感(1)—— 平稳退化
最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- JavaScript DOM编程艺术学习笔记(一)
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术第一章:JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
- 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。
在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...
- 《JavaScript DOM 编程艺术》
前几天京东买了一本书,在豆瓣上好评如潮,买下了啃一啃,书名<JavaScript DOM 编程艺术>,在好好深造一下javaScript.一边啃,一边敲.当然应该要做好笔记.一些简单的就看 ...
- 《JavaScript Dom 编程艺术》读书笔记-第4章
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...
随机推荐
- qiniu
@RestControllerpublic class QiNiuController { private static final Logger logger = LoggerFactory.get ...
- c++命令提示符窗体下打印指定大小的菱形代码
c++命令提示符窗体下打印指定大小的菱形代码 VS2010下,新建空项目.加入源文件,将代码粘贴进去就能够了. 通过改maxRows值的大小,能够控制菱形的大小 #include <stdio. ...
- 机器学习笔记——SVM
SVM(Support Vector Machine).中文名为 支持向量机.就像自己主动机一样.听起来异常神气.最初总是纠结于不是机器怎么能叫"机",后来才知道事实上此处的&qu ...
- Windows 环境下运用Python制作网络爬虫
import webbrowser as web import time import os i = 0 MAXNUM = 1 while i <= MAXNUM: web.open_new_t ...
- Mycat(5):聊天消息表数据库按月分表实践,平滑扩展
本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/47003577 未经博主同意不得转载. 1,业务需求 比方一个社交软件,比方像腾讯 ...
- java struts jxl 导入导出Excel(无模板)
jar包: import javax.servlet.http.HttpServletResponse; import java.io.OutputStream; import java.io.Fil ...
- Codeforces Round #228 (Div. 2) C. Fox and Box Accumulation
C. Fox and Box Accumulation time limit per test 1 second memory limit per test 256 megabytes input s ...
- 在vs2017中创建Node.js项目
https://github.com/Microsoft/nodejstools/wiki/Projects 1. 安装vs2017的时候,需要勾选Node.js 2.新建项目的时候,选择其他语言,然 ...
- 【转载pku】三十分钟掌握STL
三十分钟掌握STL 这是本小人书.原名是<using stl>,不知道是谁写的.不过我倒觉得很有趣,所以化了两个晚上把它翻译出来.我没有对翻译出来的内容校验过.如果你没法在三十分钟内觉得有 ...
- vue 基础知识 随笔
window.localStorage.gettItem("someItem"||[])//如果localStorage中的someItem不存在就返回一个空数组 window.l ...