文档章节

非侵入式JavaScript理解

李云风
 李云风
发布于 2014/06/14 12:08
字数 474
阅读 81
收藏 0

 

 

在Web的早期阶段,也就是在jQuery出现以前,在同一个文件中混杂JavaScript代码和HTML标记是非常流行的做法。将JavaScript代码作为某个特性的值放入HTML元素中也是再正常不过的了。您可能见过下面这样的onclick处理程序:

<div onclick="javascript:alert('click');">Testing, testing</div>

当时您可能会在标记中嵌入JavaScript代码,因为没有更简单的方法可以用来捕获单击事件。尽管嵌入的JavaScript代码可以实现事件捕获,但是该代码不够整洁。jQuery改变了这种状况,因为jQuery提供了查找元素和捕获单击事件的更好方法。现在可以从HTML特性中移除JavaScript代码了。事实上,可以将JavaScript代码与HTML完全分离。

非侵入式JavaScript(unobtrusive JavaScript)很好地实践了JavaScript代码和标记的分离。可以将所有需要的脚本代码打包到.js文件中。如果查看视图的源代码,您将不会看到有JavaScript代码嵌入在标记中。即使查看视图渲染的HTML标记,也不会看到任何JavaScript代码,脚本留下的唯一痕迹是一个或多个引用JavaScript文件的<script>标签。

您可能已经发现非侵入式JavaScript之所以具有吸引力,主要是因为它遵循了MVC框架设计模式所提倡的关注点分离。它实现了内容显示(由标记实现)和交互行为(由JavaScript实现)的分离。除此之外,非侵入式JavaScript还有其他优势。例如,将所有的脚本代码保存在单独的可下载文件中让浏览器能够在本地缓存脚本文件,从而提高网站的性能。

© 著作权归作者所有

共有 人打赏支持
李云风
粉丝 5
博文 24
码字总数 9450
作品 0
杭州
技术主管
JavaScript入门(一)

本书主要讲述JavaScript脚本语言以及如何在实际开发中使用它。在读完本书之后,你就能够: l 理解JavaScript的语法和结构。 l 创建容易理解和维护的脚本。 l 编写不与其他JavaScript冲突的脚...

晨曦之光
2012/03/09
0
0
用函数式编程对JavaScript进行断舍离

译者按: 当从业20的JavaScript老司机学会函数式编程时,他扔掉了90%的特性,也不用面向对象了,最后发现了真爱啊!!! 原文: How I rediscovered my love for JavaScript after throwing 90...

Fundebug
2017/09/13
0
0
JavaScript中的this指针 理论化this指针的定义

JavaScript现在应用之广泛,远超其他任何语言,只要是一个合格的网站应用,基本上多多少少都会有JS的存在。在JavaScript中,this的指向被不少Coder所不解,但其实JS中的this理解起来也是相当...

superwebmaster
05/29
0
0
javascript的几种声明的位置

当我们在网页设计使用到javascript的时候,都会在html里对js进行一个声明,以便我们能够使用js来对网页的“行为”进行控制。对于刚开始学习js时可能会像我一样纠结过...js都可以放在哪里? ...

无贝赛马
2014/01/26
0
0
JavaScript MVC 开源框架

腾讯Web前端框架库 JX by Tencent AlloyTeam 简介 JX 是模块化的非侵入式Web前端框架,开发于2008年,并于2009年开源于GoogleCode - http://code.google.com/p/j-et/,于2012年切换到Github,...

wewelove
2014/06/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

想用Unity3D引擎软件赚点钱的看过来

前言: 你可以不拥有很多钱 但你一定要有赚钱的能力 目前手上有项目, 需要熟练Unity3D引擎软件的伙伴 有意向的给我发私信

猿神出窍
28分钟前
0
0
Spring Boot全局异常处理

Spring Boot默认的异常处理机制 默认情况下,Spring Boot为两种情况提供了不同的响应方式。 一种是浏览器客户端请求一个不存在的页面或服务端处理发生异常时,一般情况下浏览器默认发送的请求...

狼王黄师傅
55分钟前
7
0
Thinkphp5 优雅配置两个数据库

工作需要需要配置两个数据库,框架5.0的,步骤如下: 1、在database.php同级创建一个database2.php文件 在里面配置第二个数据库信息, 2、在config中配置这个数据库信息: 3、创建第二个表的...

wqzbxh
今天
4
0
Socket网络编程进阶与实战

Socket网络编程进阶与实战 Socket对于每个工程师的重要性不言而喻。本课程将理论结合实践,带你从零开始,系统学习Socket编程技术,让Socket的学习不再那么零散与难以掌握,同时会提炼出Soc...

qq__2304636824
今天
4
0
Android studio常用快捷键

Ctrl +Alt +Space //显示可用参数 Ctrl + Alt +M //抽取方法 Ctrl +Alt + F //提取全局变量 Ctrl +Shift + "+或-" //折叠/展开代码块 Shift + F6 //批量更改变量 Ctrl + Tab //切换器 Ctrl +...

lanyu96
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部