javascript到了今天,已经不再是我10多年前所认识的小脚本了。最近我也开始用javascript编写复杂的应用,所以觉得有必要将自己的javascript知识梳理一下。同大家一起分享javascript给我们带来的福利。
索引
工具
Online Javascript interpreter[在线javascript解析器]
可以在线运行javascript代码。这篇文章中的所有代码都在里面运行过。用它来做javascript实验,它是不错的选择。
运行地址:http://math.chapman.edu/~jipsen/js/
Html5 在线运行
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
如果要跨域调用,那么要使用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://learn.jquery.com/plugins
学习组织代码:http://learn.jquery.com/code-organization/concepts/
JQuery UI
基于JQuery的UI库,里面的拖动,排序等效果足以胜任绝大部分界面的操作要求。
补充一下。如果你是在移动设备上使用JQuery UI的sortable功能,那你还得引用https://github.com/furf/jquery-ui-touch-punch。注意设置sortable的handle属性,即让其拖动区域限制在一个范围内,否则,如果排序项超过了满屏,那么整个屏幕将不能被上下滑动。
JQuery Mobile
JQuery 的移动开发框架
在移动设备开发上,最好使用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();
如果上面这段代码是在浏览器下,那它返回的是浏览器可视部分的宽度和高度。