我所知道的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();

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