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

若是上面這段代碼是在瀏覽器下，那它返回的是瀏覽器可視部分的寬度和高度。