DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 組織JS代碼的方法
組織JS代碼的方法
編輯：JavaScript基礎知識     
#001 如何組織JS代碼

如何組織JS代碼

有沒有這樣的經歷，在編寫代碼的時候，因為功能簡單，寫的時候比較隨意，所有的JS代碼都放在一個文件裡面，但是隨著功能的增加，發現代碼很亂，不好維護。

簡單的整理了一下，目前對已有項目的結構做了一個分析，主要有以下兩種方式

  1. 按文件類型分類【最簡單，但模塊劃分不清晰】
  2. 按模塊進行分類【實用，但文件夾比較多】

一、對項目目錄結構分類

1. 最簡單的文件類型分類

  1.    css/
  2.    img/
  3.    js/
  4.        app.js
  5.        controllers.js
  6.        directives.js
  7.        filters.js
  8.        services.js
  9.    lib/
  10.    partials/
  11.    index.html

存在問題： 如果有很多 controller.js 或者 services.js 文件，則 JS 文件夾裡面會很亂，當然可以繼續在 JS 文件夾裡面，創建 controllers 文件夾， services 文件夾
繼續創建文件夾進行歸納，則已經有了大概的結構了。

但是 又來了一個問題，如果模塊多了，為了區分 這些文件屬於哪一個模塊，就比較麻煩。

2. 按模塊劃分（推薦）

按模塊進行劃分，可以劃分的細一點。

  1. 可以抽取出模塊共用的部分，放在 根目錄的 common 下
  2. 每個模塊裡面有完整的目錄結構來區分各類文件

優勢： 方便模塊的添加和刪除，刪除模塊只需要在 modules 文件夾，刪除掉 指定的模塊，然後再 routes 文件裡面，刪除相對應的路由，就可以了

  1. common
  2.    imgs
  3.    js
  4.    css
  5.    fonts
  6.    ...
  7. modules
  8.   home
  9.      css
  10.      js         //文件夾裡面可以在根據需要，創建新的文件夾
  11.      imgs
  12.      index.js   //入口文件
  13. index.html

二、單純的JS代碼組織（三個階段）

  1. 初級階段，JS代碼從頭順序寫到尾
    描述： JS代碼 和 HTML代碼 寫在一個文件裡面
    優點： 對單個頁面修改快，不怕影響其他頁面。 適用於：功能簡單，復用少 的頁面
    缺點： 復用性差，代碼只能用在這個頁面。
    例子：
  1. <html>
  2.     <body>
  3.     <input type="text" name="username" id="username" value="" />
  4.     <input type="password" name="password" id="password" value="" />
  5.     <script type="text/javascript">
  6.         if(document.getElementById("username").value == ""){
  7.             alert("用戶名不能為空");
  8.         }
  9.         if(document.getElementById("password").value == ""){
  10.             alert("密碼不能為空");
  11.         }
  12.     </script>
  13.     </body>
  14. </html>
  1. 中級階段，通過JS的function來，組織js代碼
    描述： 抽取出共用的邏輯或者功能，封裝成 function，隨著頁面功能的增加，function 可能越來越多，後期很難維護
    優點： 抽取了共用的方法，有一定的復用能力，多次調用，只需要修改一個地方即可
    缺點： 但是function一多，很難找出代碼在哪裡
    例子：
  1. function check_username() {
  2.     if (document.getElementById("username").value == "") {
  3.         alert("用戶名不能為空");
  4.     }
  5. }
  7. function check_password() {
  8.     if (document.getElementById("password").value == "") {
  9.         alert("密碼不能為空");
  10.     }
  11. }
  1. 高級階段: 通過方法類，域等對function進行分割
    描述： 在抽取function之後，發現如何 function太多，很多找到function 在哪裡，這個時候，如果對function進行分類，則相對比較好找一點
    優點： 對單個頁面修改快，不怕影響其他頁面。 適用於：功能簡單，復用少 的頁面
    缺點： 復用性差，代碼只能用在這個頁面。
    例子：

1.使用類的方法

  1. function register() {
  2.     this.check_username = function () {
  3.         if (document.getElementById("username").value == "") {
  4.             alert("用戶名不能為空");
  5.         }
  6.     }
  7.     this.check_password = function () {
  8.         if (document.getElementById("password").value == "") {
  9.             alert("用戶名不能為空");
  10.         }
  11.     }
  12. }
  13. new register().check_username(); //調用方法

2.使用對象的方法

  1. var register = {
  2.     check_username: function () {
  3.         if (document.getElementById("username").value == "") {
  4.             alert("用戶名不能為空");
  5.         }
  6.     },
  7.     check_password: function () {
  8.         if (document.getElementById("password").value == "") {
  9.             alert("用戶名不能為空");
  10.         }
  11.     }
  12. }
  13. register.check_username(); //調用方法

[top]
參考文章：

  1. 如何組織好js代碼
  2. 如何組織大型JavaScript應用中的代碼？


來自為知筆記(Wiz)

JavaScript基礎知識
JavaScript的學習入門整理篇第1/3頁
<html><head><meta http-equiv=C
js中運算符&& 和 || 的使用記錄
這2個運算符經常用到，總是弄混，記錄下。。。a() && b() :如果執行a()後返回true，則
Javascript基礎知識（三）BOM，DOM總結
window對象：打開和關閉窗口：window.open()三個參數：1.載入新窗口的頁面的URL&

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
javascript對話框使用方法(警告框 javascript確認框 提示框) javascript日期格式化示例分享 JS中處理時間之setUTCMinutes()方法的使用 javascript內存管理詳細解析 關於textarea提交的內容無法換行的解決辦法 javascript的BOM 在頁面關閉或者刷新的時候觸發 onbeforeunload javascript獲取元素CSS樣式代碼示例 JavaScript中操作字符串之localeCompare()方法的使用 setInterval 啟用和停止，見代碼
熱門推薦
14.3 JavaScript鼠標事件 javascript Event對象詳解及使用示例 初學JavaScript第二章 javascript類型轉換示例 json的理解和讀取的js代碼 如何在標題欄顯示框架內頁面的標題 簡單掌握JavaScript中const聲明常量與變量的用法 JS 建立對象的方法 javascript創建引用數組
大家都在看
深入分析Cookie的安全性問題 CSS border屬性邊框用法揭秘(4) Javascript異步編程的4種方法讓你寫出更出色的程序 js 輸出內容到新窗口具體實現代碼 jquery 動態創建元素的方式介紹及應用 js 表格排序(編輯+拖拽+縮放) 加了important標記css樣式的jQuery寫法 Js從頭學起（基本數據類型和引用類型的參數傳遞詳細分析）
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved