非侵入式JavaScript

非侵入式JavaScript是一種將Javascript從HTML結構抽離的設計概念，避免在HTML標籤中夾雜一堆onchange、onclick等屬性去掛載Javascript事件，讓HTML與Javascript分離，依模型-视图-控制器的原則將功能權責清楚區分，使HTML也變得結構化容易閱讀。這個名称并不是正式定义，它的基本原则包括：

• 將网页的行为层和表现层分离开；
• 是解决传统JavaScript编程问题（浏览器呈现不一致，缺乏扩展性）的最佳实践；
• 为可能不支持JavaScript高级特性的用户代理（通常是浏览器）提供渐进增强的支持。

行為與文件標籤的分離

傳統上，JavaScript腳本通常與HTML文件的標籤放在一起。例如，以下是在HTML中註冊JavaScript事件處理程序的典型方法：

<input type="text" name="date" onchange="validateDate()"/>

HTML標籤的目的通常是描述文件的排版結構，而不是網頁操作的程序行為。兩者的結合或許會對網站的可維護性產生負面影響，例如將呈現和內容相結合。在HTML中建立和引用的JavaScript腳本行為，例如在單一元素上設置多個不同事件的處理程序，或在多個元素上設置相同的事件處理程序，或者在使用事件委派時，結果可能難以使用和維護。

非侵入式方案是以編程方式註冊需要的事件處理程序，而不是和網頁元素內嵌在一起。不同於前述那樣添加一個onchange屬性，相關的元素改用簡單的標識，例如以class，id屬性和它們值當成腳本參考的標識，或標記中一些其它的方式：

<input type="text" name="date" id="date" />

當頁面首次加載到瀏覽器中時，執行的腳本可以尋找每個相關元素，並相對應地進行設置：

    window.addEventListener("DOMContentLoaded"，function（event）{
         document.getElementById('date').addEventListener("change"，validateDate);
    });

最佳實務

非侵入式Javascript的本質是增加了分離的行為層概念，而且這範式的提倡者認同一些相關的原則，如下列：

• DOM腳本，即遵循W3C DOM和事件模型，並避免使用某一瀏覽器特定的擴充功能。
• 功能檢測，即在使用特定功能之前先檢查是否支援；對比相反於過去只檢測用戶端使用的瀏覽器(版本)。
• 更一般來說，JavaScript最佳實務通常與其它編程語言（例如封裝和抽象層，避免全局变量，有意義的命名法約定，使用適當的设计模式式和系統測試）平行。這些原則對大規模軟體工程開發非常重要，但過去的JavaScript設計過程中並不受重視。這些原則的採行，使JavaScript被認為是從“玩具”的腳本語言，轉變為正規編程發展工具的重要組成。

参见

• 渐进增强

外部連結

• Unobtrusive Client Validation in ASP.NET MVC 3