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

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

上一篇:Javascript:一个屌丝的逆袭


下一篇:《编程珠玑(第2版)》【PDF】下载