非侵入式JavaScript
2020-06-27 13:53:39
非侵入式JavaScript是一种将Javascript从HTML结构抽离的设计概念，避免在HTML标签中夹杂一堆onchange、onclick等属性去挂载Javascript事件，让HTML与Javascript分离，依模型-视图-控制器的原则将功能权责清楚区分，使HTML也变得结构化容易阅读。这个名称并不是正式定义，它的基本原则包括：
传统上，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应尽量减少将对象添加到运行环境，或全局的名前空间中。其它脚本有可能覆盖掉全局名前空间中，所创建的任何变量或函数；而这将导致发生不预期的结果时，却难以调试的困扰。JavaScript并没有内置明确的名前空间机制，但利用语言设计很容易可产生需求的效果。Flanagan建议以Java编程的开发风格，将开发人员自己的域名反转，作为全球独一的名前空间发布。
var org;if (!org) { org = {};} else if (typeof org != 'object') { throw new Error("org already exists and is not an object.");}if (!org.example) { org.example = {};} else if (typeof org.example != 'object') { throw new Error("org.example already exists and is not an object.");}
虽然如上面的名前空间对象中，可定义各种变量，函数和对象，但是通常建议在名前空间内，使用闭包进一步隔离，作为私有的变量和函数来使用，以共享接口回传每个函数作用的结果。上列代码可依照以下内容，改写为非侵入式：
org.example.Highlight = function() { // Define private data and functions var highlightId = 'x'; function setHighlight(color) { document.getElementById(highlightId).style.color = color; } // Return public pointers to functions or properties // that are to be public. return { goGreen: function() { setHighlight('green'); }, goBlue: function() { setHighlight('blue'); } }}(); // End closure definition and invoke it.从任何其它的模块，可以调用这些共享接口的方法，如下列：
org.example.Highlight.goBlue();var h = org.example.Highlight;h.goGreen();
以这种方式，每个模块－开发人员的代码都包含在私有或唯一的名前空间中，并不会干扰或侵入任何其它代码。
非侵入式Javascript的本质是增加了分离的行为层概念，而且这范式的提倡者认同一些相关的原则，如下列：
