JavaScript 七大技巧(二)


Posted in Javascript onDecember 13, 2015

上篇文章给大家介绍了JavaScript 七大技巧(二),写JavaScript代码已经很久了,都记不起是什么年代开始的了。对于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":""

 }

你可以在JavaScript里直接使用JSON,可以把它封装在函数里,甚至作为一个API的返回值形式。

我们把这称作 JSON-P ,很多的API都使用这种形式。

你可以调用一个数据提供源,在script代码里直接返回 JSON-P 数据:

01

12

这是调用 Delicious 网站提供的 Web service 功能,获得JSON格式的最近的无序书签列表。

基本上,JSON是最轻便的描述复杂数据结构的方法,而且它能在浏览器里运行。

你甚至可以在PHP里用 json_decode() 函数来运行它。

JavaScript的自带函数(Math, Array 和 String)

让我感到惊奇的一个事情是,当我研究了JavaScript里的math和String函数后,发现它们能极大的简化我的编程劳动。

使用它们,你可以省去复杂的循环处理和条件判断。

例如,当我需要实现一个功能,找出数字数组里最大的一个数时,我过去是这样写出这个循环的,就像下面:

var numbers =
[,,,,];

 var max = ;

 for(var i=;i

 if(numbers[i]

> max){

 max = numbers[i];

 }

 }

 alert(max);

我们不用循环也能实现: 

var numbers =

[,,,,];

 numbers.sort(function(a,b){return b -

a});

 alert(numbers[]);

需要注意的是,你不能对一个数字字符数组进行 sort() ,因为这种情况下它只会按照字母顺序进行排序。

如果你想知道更多的用法,可以阅读 这篇不错的关于 sort() 的文章。

再有一个有意思的函数就是 Math.max()。

这个函数返回参数里的数字里最大的一个数字:

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

因为这个函数能够校验数字,并返回其中最大的一个,所以你可以用它来测试浏览器对某个特性的支持情况:

var scrollTop=
Math.max(

 doc.documentElement.scrollTop,

 doc.body.scrollTop

 );

这个是用来解决IE问题的。你可以获得当前页面的 scrollTop 值,但是根据页面上 DOCTYPE 的不同,上面这两个属性中只有一个会存放这个值,而另外一个属性会是 undefined,所以你可以通过使用 Math.max() 得到这个数。

阅读这篇文章你会得到更多的关于使用数学函数来简化JavaScript的知识。

另外有一对非常有用的操作字符串的函数是 split() 和 join()。我想最有代表性的例子应该是,写一个功能,用来给页面元素附加CSS样式。

是这样的,当你给页面元素附加一个CSS class时,要么它是这个元素的第一个CSS class,或者是它已经有了一些class

, 需要在已有的class后加上一个空格,然后追加上这个class。而当你要去掉这个class时,你也需要去掉这个class前面的空格(这个在过去非常重要,因为有些老的浏览器不认识后面跟着空格的class)。 

 于是,原始的写法会是这样:

function addclass(elm,newclass){
 var c =

elm.className;

 elm.className = (c === '') ? newclass : c+' '+newclass;

 }
你可以使用 split() 和 join() 函数自动完成这个任务: function addclass(elm,newclass){

 var classes =

elm.className.split(' ');

 classes.push(newclass);

 elm.className = classes.join(' ');

 }

这会确保所有的class都被空格分隔,而且你要追加的class正好放在最后。

是个短视的行为。工具包可以帮你快速的开发,但如果你不深入理解JavaScript,你也会做错事。

用 JSON 形式存储数据

在我发现JSON之前,我使用各种疯狂的方法把数据存贮在JavaScript固有的数据类型里面,例如:数组,字符串,中间夹杂着容易进行拆分的标志符号以及其它的令人讨厌的东西。

Douglas Crockford 发明了JSON 之后,一切全变了。

使用JSON,你可以使用JavaScript自有功能把数据存贮成复杂的格式,而且不需要再做其它的额外转换,直接可以访问使用。

JSON 是 “JavaScript Object Notation” 的缩写,它用到了上面提到的两种简写方法。

以上内容是小编给大家分享的javascript七大技巧,希望大家喜欢。

Javascript 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 Javascript
js自定义回调函数
Dec 13 #Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 #Javascript
分享Javascript实用方法二
Dec 13 #Javascript
JavaScript判断按钮被点击的方法
Dec 13 #Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 #Javascript
JavaScript代码判断点击第几个按钮
Dec 13 #Javascript
JavaScript模块化开发之SeaJS
Dec 13 #Javascript
You might like
PHP strtr() 函数使用说明
2008/11/21 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
JavaScript学习笔记之创建对象
2016/03/25 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
python time模块用法实例详解
2014/09/11 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Python jieba库用法及实例解析
2019/11/04 Python
使用Tkinter制作信息提示框
2020/02/18 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
北京银河万佳Java面试题
2012/03/21 面试题
美术兴趣小组活动总结
2014/07/07 职场文书
年度考核表个人总结
2015/03/06 职场文书
师范生见习自我总结
2015/06/23 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
Python利用capstone实现反汇编
2022/04/06 Python
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis