我所知道的Javascript

javascript到了今天，已经不再是我10多年前所认识的小脚本了。最近我也开始用javascript编写复杂的应用，所以觉得有必要将自己的javascript知识梳理一下。同大家一起分享javascript给我们带来的福利。

索引

• 工具
• 库
• 参考资料
• 技能

工具

Online Javascript interpreter[在线javascript解析器]

可以在线运行javascript代码。这篇文章中的所有代码都在里面运行过。用它来做javascript实验，它是不错的选择。

运行地址：http://math.chapman.edu/~jipsen/js/

Html5 在线运行

地址：W3School在线测试工具 –canvas

JQuery在线运行

地址：W3School在线测试工具-JQuery

Closure Compiler

这是google提供的一款用于编译javascript的工具。所谓编译，是将一般可读的javascript代码编译成紧凑的，短小的javascript代码。其效果类似于jquery-x.min.js。

下载地址：https://developers.google.com/closure/compiler/

运行命令：java -jar compiler.jar --js=..\carports\assets\www\js\dataProxy.js --js_output_file=..\carports\assets\www\js\deploy.js

注意，文件路径中不能包含空格。

参见文档：https://developers.google.com/speed/articles/compressing-javascript

Javascript Performance

这是一款评估javascript应用性能的工具，它整合在google chrome的开发者工具中。在大型的javascript应用中，非常有必要对性能进行评估和跟踪。

使用方法介绍：https://developers.google.com/chrome-developer-tools/docs/cpu-profiling

库

JQuery

地址：http://jquery.com/

如果要跨域调用，那么要使用jsonp

个人推荐jsonp的相关文章：http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/

Angular Js

官方网址：http://angularjs.org

InfoBox

功能：在google地图上实现自定义显示层，是google地图的infoWindow的加强版。

地址：http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/

Json2Html

功能：将json对象转换成html dom对象

地址：https://github.com/moappi/json2html

JQuery

一个应用非常广泛的Javascript库

地址：http://jquery.com

学习插件开发：http://learn.jquery.com/plugins

学习组织代码：http://learn.jquery.com/code-organization/concepts/

JQuery UI

基于JQuery的UI库，里面的拖动，排序等效果足以胜任绝大部分界面的操作要求。

地址：http://jqueryui.com

补充一下。如果你是在移动设备上使用JQuery UI的sortable功能，那你还得引用https://github.com/furf/jquery-ui-touch-punch。注意设置sortable的handle属性，即让其拖动区域限制在一个范围内，否则，如果排序项超过了满屏，那么整个屏幕将不能被上下滑动。

JQuery Mobile

JQuery 的移动开发框架

地址：http://jquerymobile.com/

在移动设备开发上，最好使用tap事件而不是click事件，否则会遇到预想不到的麻烦。

Google Map

官方网址：https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN

注意，在手机设备上，必须指定地图的宽度和高度，否则地图将不会被显示。

Ceaser

官方地址：http://matthewlein.com/ceaser/

一个不错的移动动画效果

参考资料

Javascript 参考: http://www.javascriptkit.com/jsref

Javascript 参考：http://w3schools.com/jsref/default.asp

CSS 参考：http://www.w3school.com.cn/css/

技能

问题：JQuery Mobile中字体显示不清晰

在样式定义中，使用text-shadow:none来移除重影。当然，也可以用text-shadow来加上自己需要的字体阴影。

问题：JQuery Mobile中，tap事件会被执行两次

在事件处理其中，加上e.preventDefault();。代码如下：

$(document).on(“tap”, ".selector”, null, function(e){

    e.preventDefault();

    //code in the handler;

});

问题：Google地图上的线路如何计算

使用google.maps.DirectionsService。

问题：prototype中的this指的是什么对象？

this指的是对象本身。

如：

function fn() { };
fn.prototype.name = "hello";
fn.prototype.do = function () {
                alert(this.name);
};

var f = new fn();

f.name = "hello1";

f.do();//hello1

问题：如何实现列表的拖动排序

使用JQuery UI 提供的sortable()插件。

问题：Javascript中的布尔类型就是true和false吗？

错误，true和false只是布尔类型的字面量，且唯一的两个字面量，Javascript中的所有类型都可以通过Boolean函数，得到布尔类型。因此，准确的说，Javascript中的布尔类型是通过Boolean函数得到的类型。

因此，以下代码是正确的。

window.myObj = window.myObj || {};

var s = “something”;

if(s){

 alert(s);   

}

var n = 3;

if(n)

{

   alert(n);

}

问题：对象多值排序

var gps = [

    [29,106],

    [29.33, 106.5323],

    [29.8890, 106.23321]

];

//以维度和经度进行排序

gps.sort(function(v1, v2){

    var lat = v1[0] – v2[0];

    var lng = v1[1] – v2[1];



    if(lat)

        return lat;

    if(lng)

        return lng;

    return 0;

});

问题：如何判断全局x对象是否为空

if(window[“x”])
{
    console.log(“not null”);
}
else
{
    console.log(“null or not defined”);
}

问题：如何判断变量x是否被定义

typeof(x) === ‘undefined’

问题：如何在JQuery Mobile中监听”按住”事件和“松开”事件

$(document).on(“taphold”, “.selector”, null, function(e){
    //处理按住时的相关事件
});

$(document).on(“vmouseup”, “.selector”, null, function(e){
    //处理手松开后的事件
});

问题：如果有效率地使用jQuery监听事件

虽然从概念上，我们可以用以下代码，使用jQuery来监听元素上触发的事件，但这样做会导致内存开销增加，使事件传递的距离增大从而导致不必要的性能降低。

$(document).on(‘click’, 'selector’, function(e){});

建议在最近的父节点来监听事件，代码如下。

$(‘最近的父节点’).on('click','监听的元素选择器，多个选择器用，号隔开',function(){
    //你的代码});

问题：获取当前jQuery对象下的直接子元素

$(“.selector”).children();

问题：用jQuery Mobile获取设备的宽度和高度

$.mobile.window.width();
$.mobile.window.height();

如果上面这段代码是在浏览器下，那它返回的是浏览器可视部分的宽度和高度。