• 技术文章 >web前端 >js教程

    JavaScript的事件绑定(方便不支持js的时候)_javascript技巧

    2016-05-16 17:20:57原创653

    首先,比如我们使用JavaScript来加强我们的网页,但是我们要考虑到,如果用户的浏览器不支持JavaScript,或者用户disable了JavaScript的功能,那我们的网页能不能正常显示呢?例如下面的例子,

    复制代码 代码如下:

    其中popUp这个函数是自定义的,新打开一个窗口来限制URL中的网页。但是如果当客户端不支持时,那这个网页就不能正常工作了。所以我们在这样做的使用,也考虑到更多,使用如下的代码就会显得更加合适。

    复制代码 代码如下:

    接着,作者以CSS为例子。在我们使用CSS的过程中,我们发现,除了我们使用了把CSS文件给加载进来外,我们没有在我们的网页内容中加入任何css相关的代码,这样就能很好的把structure和style分开了,即我们的css的代码没有侵入我们的主要代码里面。这样就算客户端不知道css,但是我们的主要内容客户还是可以看到的,我们的内容结构也能在客户那里显示出来。所以JavaScript相当于behavior层,css相当于presentation层。JavaScript也能像CSS一样做到没有侵入性。下面是书上的一个例子。

    复制代码 代码如下:


    上面这段代码已经能保证在客户端不支持JavaScript的情况下仍然可以正常的工作,但是上面的代码中出现了onclick这样的event handler。所以现在我们使用像CSS中的方式来完成我们所要的功能。如下:

    复制代码 代码如下:


    这样,我们能在这个页面加载完成的时候,执行window.onload中,来检测哪些是使用了class,然后统一使用popUp的方法。如下代码

    复制代码 代码如下:

    var links = document.getElementsByTagName("a");
    for (var i=0 ; i if (links[i].getAttribute("class") == "popup") {
    links[i].onclick = function() {
    popUp(this.getAttribute("href")); //Attention use this in this place. Because this is equals onClick = "popUp(this.href)"
    //so we cann't use links[i].
    return false;
    }
    }
    }

    这样就能更少地侵入我们html代码了。

    最后,作者讲了我们要做到向后兼容和JavaScript的最小化。向后兼容,我们可以使用类似if(document.getElementById)来测试这个方法时候存在,存在了才能使用。JavaScript代码的最小化主要是为了减少JavaScript,这样能加快我们网页的加载。

    下面我在看书的时候碰到不懂的问题,希望大虾们能帮忙解决一下。

    对于

    里,这样可以加快我们加载page的速度。不是很理解。

    原文:

    The placement of your scripts in the markup also plays a big part in initial load times. Traditionally,
    we were told to always place scripts in the portion of the document, but there's a problem with
    that. Scripts in the block the browser's ability to download additional files (such as images or
    other scripts) in parallel. In general, the HTTP specification suggests that browsers download no more
    than two items at the same time per hostname. While a script is downloading, however, the browser
    won't start any other downloads, even on different hostnames, so everything must wait until the script
    has finished.
    If you're following the progressive enhancement and unobtrusive methodologies discussed earlier
    in the chapter, then moving your

      相关课程推荐

    • 独孤九贱(3)_JavaScript视频教程

      javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。没有它,你的前端生涯是不完整的。《php.cn独孤九贱(3)-JavaScript视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了javascript知识。

      JavaScript教程141027次播放


    • 独孤九贱(6)_jQuery视频教程

      jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等,是全球最流行的前端开发框架之一。PHP中文网根据最新版本,独家录制jQuery最新视频教程,回馈PHP中文网的新老用户。

      jQuery教程115839次播放


    • jQuery与Ajax基础与实战

      jQuery是最流行的JS函数库,封装了许多实用的功能,其中最引人入胜的就是Ajax。 jQuery中的Ajax操作,语法简单,操作方便,使Ajax从未如此轻松,前端人员从此不再为与服务器异步交互而发愁,本套课程,精选了最常用的几个方法,从基本的语法到每个参数,再到具体实例进行了全面的讲解。

      AJAX教程15486次播放


    • Git教程(60分钟全程无废话版)

      Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 Git 与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不必服务器端软件支持

      JavaScript教程13627次播放


    1/1