`
cyber4cn
  • 浏览: 39165 次
社区版块
存档分类
最新评论

JS 框架使用及迁移(二)

阅读更多
B、方法部分
1、方法调用
Prototype:

$$('.class').invoke('show');
Element.show($("id"));


$("id").invoke("show") 是会出错的,因为$("id") 是 HTML 元素对象,并无 invoke 方法。

jQuery:
$j("#id").show();
$j(".class").show();


2、迭代:
Prototype:
[ 'hello', 'world'].each(function(s, index) {
  alert(index + ': ' + s);
});

可见javascript 的数组对象被扩展,加入了迭代功能。

jQuery:
$j([ 'hello', 'world']).each(function(s) {
  alert(s+":"+this);
});

包装成 jQuery 对象,然后操作,这里值得注意的是,在回调函数中,this 被赋值为当前元素。

3、事件监听
jQuery 相比 Prototype 一个很好的地方,就是 ready() 事件。
$j(document).ready(function(){}); // 或者

$j(function(){});


而 Prototype 早期只能通过
Event.observe(window,'load',function(){})

后来提供了:
document.observe("contentloaded", function() {})

现在改为:
document.observe('dom:loaded',function(){})

值得注意的是,这些方法可以多次调用。并且在事件触发后,能按调用先后的程序执行相关代码。
像 BOM 本身的 window.onload 事件,如果多次赋值,会被覆盖。
function out1()
{
    console.log("output 1");
}
function out2()
{
    console.log("output 2");
}
window.onload = out1;
window.onload = out2;

以上代码,只会输出 "output 2",而以下两段代码都会依次输出 "output 3 "、"output 4":
Prototype:
document.observe('dom:loaded',function(){
	console.log("output 3");
});
document.observe('dom:loaded',function(){
	console.log("output 4");
});

jQuery:
$j(function() {
	console.log("output 3");

});

$j(function() {
	console.log("output 4");

});

Prototype:
Event.observe('btnok', 'click', btnHandler);

或者
$('btnok').observe('click', btnHandler);

值得注意的是,对于同一个元素的同一个事件,注册同一个 handler ,Prototype 只注册一次。

也就是说,如下两次调用 observe 注册
Prototype
function btnHandler()
{
	console.log("btn clicked!");
}
Event.observe('btnok', 'click', btnHandler);
$('btnok').observe('click', btnHandler);

但是对于同一个元素、同一个事件,用不同的 handler ,可以注册多次。
function btnHandler()
{
	console.log("btn clicked!");
}
function btnHandler1()
{
	console.log("btn clicked  1!");
}
Event.observe('btnok', 'click', btnHandler);
$('btnok').observe('click', btnHandler1);

移除事件绑定处理过程 btnHandler 用如下语句:
$('btnok').stopObserving('click', btnHandler);



jQuery 则为:
$j('#btnok').bind('click', btnHandler);

或者更灵活简洁的方法:
$j('#btnok').click(btnHandler);

值得注意的是,对于同一个元素的同一个事件,注册同一个 handler ,jQuery 可注册多次。
function btnHandler()
{
	console.log("btn clicked!");
}
$j('#btnok').bind('click', btnHandler);
$j('#btnok').click(btnHandler);

在点击了元素 btnok 后,如上代码会有连续两次输出。

对于同一个元素、同一个事件,用不同的 handler ,当然可以注册多次。
function btnHandler()
{
	console.log("btn clicked!");
}
function btnHandler1()
{
	console.log("btn clicked 1!");
}
$j('#btnok').bind('click', btnHandler);
$j('#btnok').click(btnHandler1);

移除事件绑定处理过程 btnHandler 用如下语句:
$j('#btnok').unbind('click', btnHandler);

4、事件冒泡
使用场景,比如有时候,需要对链接进行点击事件处理,并且不想让它进入链接 href 属性指的目标页面,而是想让它有别的操作。
Protoype
$('link').observe('click', function(event){
	console.log(this);  //输出 link 元素
	console.log(this.readAttribute('href'));
	event.stop();
});

jQuery:
$j('#link').click(function(event){
	console.log(this);  //输出空, event.target 才是 html 元素对象
	console.log($j(event.target).attr('href')); //用 $j 转化成为 jQuery 对象才能调用 attr 方法
	event.preventDefault();
});

在如上代码中,点击了链接之后,不会被重定向到目标页面。而是执行完输出之后直接停止。
分享到:
评论

相关推荐

    mongration-一个Node.js的MongoDB迁移框架

    mongration就是这样一款专门针对Node.js和MongoDB的迁移框架,它帮助开发者在数据库版本控制和数据迁移过程中保持代码的整洁和高效。 mongration的核心功能是提供了一套简单的API和命令行工具,用于创建、应用和...

    带有ORM迁移和向量的JavaScript API框架.zip

    JavaScript API框架是一个用于构建Web应用的强大工具,它允许开发者通过JavaScript与服务器进行数据交互,创建动态和交互式的用户界面。ORM(对象关系映射)和向量技术是这个框架中的两个重要概念,它们大大增强了...

    angular.js开发框架

    AngularJS是一款由Google维护的JavaScript框架,用于构建前端Web应用。它以其强大的数据绑定和依赖注入机制而闻名,极大地简化了HTML页面与JavaScript代码之间的交互,使得开发动态、交互丰富的Web应用变得更加简单...

    前端框架对比

    #### 二、JavaScript框架概览 ##### 1. 什么是JavaScript框架? JavaScript框架是一种预先编写好的软件结构,旨在帮助开发者更快、更高效地构建Web应用程序。这些框架通常包含了一系列预先定义好的类和函数,可以...

    Total.js是一个采用纯JavaScript开发用于Node.js平台的框架.zip

    Total.js是一个专为Node.js平台设计的全栈框架,它完全使用JavaScript编写,这使得开发者在前后端都能保持一致的编程语言,提高了开发效率和代码的可维护性。JavaScript作为客户端和服务端通用的语言,使得Total.js...

    框架(要学习框架知识的朋友请下载,一本很好的讲述框架的书)

    此外,随着技术的发展,框架的更新迭代速度很快,学习如何评估和迁移框架,以及保持对新技术的关注,也是提升专业能力的重要部分。 总之,框架的学习是一个持续的过程,涉及到众多的实践和理论知识。这本书可能涵盖...

    Node.js-Lift是一个功能强大的数据库结构迁移工具

    Node.js 是一个基于Chrome V8引擎的JavaScript运行环境,它让开发者可以在服务器端使用JavaScript进行编程,极大地扩展了JavaScript的应用范围。在这个环境中,Lift工具是针对数据库结构管理的一个重要组件,尤其...

    EasyMock线上项目迁移工具

    在JavaScript世界里,有类似的模拟库如Sinon.js和Jest,它们也提供了创建模拟对象和控制其行为的功能。 "migrate2local-master"这一压缩包文件名暗示了这是一个用于将线上项目迁移至本地的主分支或主版本。通常,...

    Go-Grabant是一个用go语言开发用javascript语法书写规则的爬虫框架

    Go-Grabant是一个基于Go语言实现的Web爬虫框架,其独特之处在于它允许开发者使用JavaScript语法来编写爬虫规则。这一设计灵感来源于神箭手爬虫框架,旨在为已经熟悉JavaScript语法的开发者提供一个更加便捷和高效的...

    基于VGG的图像风格迁移算法实现及系统应用实现

    2.图像风格迁移技术的Web应用  2.1基于Flask的Web应用 ...jQuery是一个JavaScript框架,提供了一个强大的"$"符号,可以轻松地操作HTML的DOM结构,同时也方便地发起AJAX请求,有助于加快开发进度。

    Node.js-caitou-基于node.js的轻量级高效便捷的web开发框架

    学习和使用Caitou框架,你需要熟悉Node.js的基础知识,理解JavaScript面向对象编程,以及HTTP协议的工作原理。通过阅读源码、官方文档和示例项目,你可以快速上手并利用Caitou构建自己的Web应用。在实际开发过程中,...

    快速搭建web项目框架

    1. **选择合适的框架**:市面上有许多流行的Web框架,例如Python的Django和Flask,Java的Spring Boot,JavaScript的Express.js等。根据你的技术背景和项目需求,选择最适合的框架。 2. **安装和设置**:在选定框架...

    NFine快速开发框架C#源码完全开源版 基于ASP.NET MVC+EF6+Bootstrap框架等

    通过EF6,NFine框架可以方便地实现数据的增删改查,以及复杂的查询操作,同时提供了事务支持和数据库迁移功能。 Bootstrap是Twitter推出的一个开源的前端框架,用于构建响应式和移动优先的Web应用。它包含了一系列...

    NFine-MVC快速开发框架

    在NFine-MVC框架中,Bootstrap的应用确保了界面的现代感和跨设备兼容性,使得开发者可以轻松创建美观且用户友好的界面,无需花费大量时间在CSS和JavaScript上。 NFine框架还可能包含了其他实用功能,如权限管理、...

    Node.js-Adonis.js--优雅贴心靠谱的Node.js开发框架

    Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它让JavaScript能够在服务器端运行,打破了JavaScript只能在浏览器中执行的传统。Node.js利用非阻塞I/O模型,使其在处理高并发请求时表现出色,特别适合构建...

    VueNative是一个使用JavaScript构建跨平台原生移动应用程序的框架

    Vue.js是一个轻量级的前端JavaScript框架,以其响应式的数据绑定和声明式渲染而闻名。VueNative则将这些优点继承并拓展到了移动应用开发中。通过Vue Native,开发者可以使用Vue.js的模板语法、指令、组件以及Vuex...

    若依框架集成达梦数据库完整源码

    若依框架(RuoYi)是一款基于Spring Boot、Vue.js等技术构建的企业级快速开发平台,它提供了丰富的功能组件,旨在简化企业级应用的开发流程,提高开发效率。达梦数据库(Dameng Database System,简称DMS)则是一款...

    若依基础框架(springboot,maven,redis,mysql)

    Vue.js 是一个轻量级的前端JavaScript框架,用于构建用户界面。在"若依基础框架"中,Vue可能被用来开发前端界面,与后端SpringBoot服务进行API通信,实现前后端分离的开发模式。 以上就是标题和描述中提到的技术栈...

    移动WebApp开发框架Clouda.zip

    Clouda是基于node.js的Webapp开发框架,在使用Clouda时需要安装node.js和MongoDB。 Clouda 是百度推出的一款面向资深开发者的WebApp开发框架。在Clouda中开发app,可以在多终端下实现数据同步、任务迁移。并且Clouda...

Global site tag (gtag.js) - Google Analytics