js代碼整潔隨筆,js代碼整理

本文目錄一覽：

• 1、如何在頁面讓JavaScript代碼原樣顯示，用標籤不起用，js照常運行。請看問題補充
• 2、怎麼讓JS文件代碼對齊
• 3、怎麼樣格式化javascript，怎麼樣格式化js
• 4、為什麼一些js特效里引用的js文件代碼密密麻麻的，不像是手寫的代碼
• 5、打開此js文件後看到很多的function(xxxxxxxxx)

如何在頁面讓JavaScript代碼原樣顯示，用標籤不起用，js照常運行。請看問題補充

把用戶輸入的內容用下面的函數進行HTML編碼後再顯示到頁面上就行了：

// HTML轉義函數

function encodeHtml(s){

    return s.replace(

        /”||’|||[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g,

        function($0){

            var c = $0.charCodeAt(0);

            switch(c){

            case 13: return “br /”;

            case 32: return “#160;”;

            default: return “#”+c+”;”;

            }

        }

    );

};

我已經測試過了

怎麼讓JS文件代碼對齊

下載插件：打開Notepad++ ，然後 插件 — Plugin Manager — Show Plugin Manager

安裝插件：找到 JsTool ，選中，然後點擊Install按鈕，自動下載安裝，重啟Notepad++

使用插件：在插件選項裡面會多出一個JSTool選項，選擇JSFormat就可以格式化對齊了！效果還不錯。

怎麼樣格式化javascript，怎麼樣格式化js

格式化的話感覺可以使用firefox來實現，在firefox的開發者工具中有一個選項，叫美化原代碼， 這樣就直接格式化了js代碼

美化後

為什麼一些js特效里引用的js文件代碼密密麻麻的，不像是手寫的代碼

特效效果看着雖然不複雜，而且你每天上網看的很多布局雖然很簡潔，沒什麼，但簡單的往往不簡單，比如你看一些3D圖片，3D動畫很酷，但他未必難，也可能是他的的開發工具強大，所以很簡單就做出強大的效果。HTML5+CSS3，JS這些沒有什麼強大工具的支持，如果要寫複雜的功能都要手寫的，別看一個網頁簡簡單單的布局，特效，但是你看一下代碼，真是特別多，而且大部分都不是畫畫，設置一下某個選項就生成的

這個JS代碼應該是壓縮後的，要不然老是換行空格的，文件會很大，如果你要看他的代碼，也可以 美化代碼，閱讀會方便些，網上很多這種提供壓縮或美化JS代碼的網站

打開此js文件後看到很多的function(xxxxxxxxx)

script src=”xxxx.js” type=”text/javascript”/script

這個是引入外部js文件，是為了頁面代碼的整潔和增強代碼的可維護性

作用就是把這個js文件的內容加載到頁面中來，所以無論是直接寫在頁面中的，還是從外部引用的，都可以直接調用裡面的方法

說白了，就是把xxxx.js的內容插在頁面中引用的地方！

=======================================

舉個例子

xxxx.js的內容：

var a = ‘test’;

alert(a);

————————————————————————————

例一、

html

!– ….這裡有很多行代碼 —

script src=”xxxx.js” type=”text/javascript”/script

!– 這樣就相當與把 xxxx.js文件中的內容插在這裡！ —

!– ….這裡有很多行代碼 —

/html

————————————————————————————

例二、

html

!– ….這裡有很多行代碼 —

script type=”text/javascript”

var a = ‘test’;

alert(a);

/script

!– ….這裡有很多行代碼 —

/html

=======================================

例一和例二 效果是一樣的，但是例一中，代碼更為簡潔，且要維護js代碼比較方便，只需要編輯xxxx.js就行了。但例一相對於例二的缺點就是需要額外的加載時間，頁面的請求會多點，但一般推薦使用例一引入js文件的方法