通常情况下, JavaScript的往往内嵌在HTML文件的元素标签内的。例如,下面是一个典型的JavaScript内嵌在HTML文件的元素标签内:
<input type="text" name="date" onchange="validateDate(this);" />
然而,html主要是用来描述文件的结构,而不是实现行为的。倘若将二者结合在一起会直接影响网站的可维护性,所以不推荐结合和行为相结合。
无侵入的解决方案是必须的注册事件处理程序,而不是html文件的元素标签中内嵌。这是给满足一个特定的CSS选择器的所有内容,添加特定行为的脚本:
<input type="text" name="date" />
window.onload = function(){ //Wait for the page to load.
var inputs = document.getElementsByTagName('input');
for(var i=0,l=inputs.length;i<l;i++){
input = inputs[i];
if(input.name && input.name=='date'){
input.onchange = function(){
validateDate();
}
}
}
};
function validateDate(){
//Do something when the content of the 'input' element
//with the name 'date' is changed.
}
下面是jQuery JavaScript库来实现的脚本:
$(document).ready(function(){ //Wait for the page to load.
$('input[name=date]').bind('change', validateDate);
});
function validateDate(){
//Do something when the content of the 'input' element
//with the name 'date' is changed.
}
由于对象名称属性是用来描述语义的一个组成部分,这种做法符合现代web标准的,同时又不在结构代码中内嵌任何行为代码,我们称之为无侵入的JavaScript(Unobtrusive Javascript)。
分享到:
相关推荐
6. **无侵入式(Unobtrusive)**:提及的"jquery-validation-unobtrusive-master"可能指的是jQuery Validation的无侵入式版本,它与ASP.NET MVC框架结合使用,通过数据注解实现服务器端和客户端验证的一致性。...
在现代Web开发中,前端项目的多样性与日俱增,其中一个有趣的实例是“marker-animate-unobtrusive”项目,它展示了如何在Google Maps上实现无侵入式的动画标记。这个项目的核心在于通过JavaScript和CSS技术,为地图...
无侵入式意味着JavaScript代码不会直接与HTML标记混合,而是通过事件监听器和数据属性来控制行为。这提高了代码的可维护性和可重用性。 排序算法是关键。常见的排序方法有冒泡排序、选择排序、插入排序、快速排序等...
这种通过无侵入式JavaScript(unobtrusive JavaScript)来实现动态效果的方法不仅可以确保向前兼容性,还能在不支持最新技术的老式浏览器上优雅降级(graceful degradation),从而达到良好的用户体验。 #### 二、...
与无侵入式验证紧密关联的是jQuery的无侵入式Ajax插件(jquery.unobtrusive-ajax.min.js)。它扩展了jQuery的Ajax功能,使得页面元素可以通过Ajax方式与服务器进行交互,而无需显式编程。通过data-*属性,开发者可以...
在IT行业中,jQuery Unobtrusive Validation是一种广泛使用的JavaScript库,它与ASP.NET MVC框架紧密集成,用于实现无侵入式验证。这个技术的核心在于它能够帮助开发者在客户端进行表单验证,提供友好的用户体验,...
例如,实现一个无侵入式Ajax链接,只需在标签中添加data-ajax="true"属性。当用户点击这个链接时,浏览器会自动处理Ajax请求,而开发者可以使用data-ajax-update属性指定返回的内容应该插入到哪个元素中。这一切都是...
7. **行为分离**:工具还支持将HTML元素的行为分离到外部JavaScript文件,通过非侵入式事件处理(unobtrusive event handling)来实现,这有助于保持HTML的语义清晰,提高代码可读性和可维护性。 总的来说,...
因此,JavaScript代码应尽量避免侵入到HTML结构中,采用“Unobtrusive JavaScript”原则,通过事件监听和数据绑定来实现页面交互,而不是依赖于内联的`onclick`等属性。 二、模块化和组织结构 为了保持代码的清晰...
jQuery非侵入式验证 jQuery Unobtrusive Validation库通过添加对将验证选项指定为HTML5 data-*元素的支持,对jQuery Validation进行了补充。 该项目是ASP.NET Core的一部分。 您可以在仓库中找到ASP.NET Core的示例...
### Unobtrusive JavaScript(非侵入式JavaScript) Unobtrusive JavaScript是一种编程策略,强调将JavaScript与HTML标记分离,使得页面在JavaScript禁用的情况下仍然可以正常显示和使用。通过这种方式,可以确保...
- **Unobtrusive JavaScript**:为了更好地支持客户端脚本和AJAX,MVC3引入了无侵入式JavaScript,使得JavaScript与HTML标记分离,增强了代码的可读性和可维护性。 - **Entity Framework 4.1 (Code First)**:MVC3...
2. **jQuery和Unobtrusive JavaScript**:内置对jQuery的支持,以及无侵入的JavaScript验证,提高了客户端脚本的易用性。 3. **移动设备支持**:MVC4包含对移动设备的优化,可以自适应不同屏幕尺寸的设备。 4. **...
2. **Unobtrusive JavaScript**:MVC3支持无侵入式JavaScript,使得JavaScript和jQuery的使用更加灵活。这有助于保持前端代码的整洁,提高可维护性。 3. **改进的验证**:MVC3提供了更强大的数据验证功能,包括...
无侵入性(Unobtrusive)在编程中意味着一个特性或组件不会对其他部分造成不必要的干扰或依赖。在plates中,这意味着模板引擎可以与应用程序的其余部分独立工作,使得代码更易于理解和维护。模板引擎通常用于分离...
5. **jQuery和Unobtrusive JavaScript**:默认情况下,MVC3项目包含jQuery库,并采用无侵入式JavaScript(Unobtrusive JavaScript)进行客户端验证,使得JavaScript代码更整洁。 6. **AJAX支持**:通过`Ajax....
- **无侵入式JavaScript**:这一节讨论了如何将JavaScript代码与HTML标记分离,遵循“内容与行为分离”的原则。这样做的好处包括但不限于: - **提高可维护性**:将JS代码独立于HTML之外,使得代码更加模块化,便于...
这款插件以其 Unobtrusive API(非侵入式API)而闻名,允许开发者通过在 HTML 元素上添加数据标签来轻松构建向导。以下将详细介绍 `jQuery Wizard` 的主要特点、使用方法以及如何利用其非侵入式 API 设计向导。 ###...
13. **AJAX与Unobtrusive JavaScript**:Rails支持无侵入式JavaScript,利用UJS(Unobtrusive JavaScript)实现页面部分刷新,提高用户体验。 14. **Heroku部署**:学习如何将Rails应用部署到Heroku云平台,让你的...