JavaScript DOM 编程艺术第二版 读书笔记2

WBOY
リリース: 2016-06-07 15:38:35
オリジナル
983 人が閲覧しました

看了JavaScript DOM 编程艺术的Best Practices那章,才知道我们在制作网页的时候有很多东西需要考虑。 首先,比如我们使用JavaScript来加强我们的网页,但是我们要考虑到,如果用户的浏览器不支持JavaScript,或者用户disable了JavaScript的功能,那我们的网

  看了JavaScript DOM 编程艺术的Best Practices那章,才知道我们在制作网页的时候有很多东西需要考虑。

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

<a href="#" onclick="popUp('http://www.baidu.com') ; return false;"></a>
ログイン後にコピー

其中popUp这个函数是自定义的,新打开一个窗口来限制URL中的网页。但是如果当客户端不支持时,那这个网页就不能正常工作了。所以我们在这样做的使用,也考虑到更多,使用如下的代码就会显得更加合适。
<a href="http://www.baidu.com" onclick="popUp(this.href) ; return false;"></a>
ログイン後にコピー
ログイン後にコピー

  接着,作者以CSS为例子。在我们使用CSS的过程中,我们发现,除了我们使用了把CSS文件给加载进来外,我们没有在我们的网页内容中加入任何css相关的代码,这样就能很好的把structure和style分开了,即我们的css的代码没有侵入我们的主要代码里面。这样就算客户端不知道css,但是我们的主要内容客户还是可以看到的,我们的内容结构也能在客户那里显示出来。所以JavaScript相当于behavior层,css相当于presentation层。JavaScript也能像CSS一样做到没有侵入性。下面是书上的一个例子。
<a href="http://www.baidu.com" onclick="popUp(this.href) ; return false;"></a>
ログイン後にコピー
ログイン後にコピー

上面这段代码已经能保证在客户端不支持JavaScript的情况下仍然可以正常的工作,但是上面的代码中出现了onclick这样的event handler。所以现在我们使用像CSS中的方式来完成我们所要的功能。如下:
<a href="http://www.baidu.com" class="popup"></a>
ログイン後にコピー

这样,我们能在这个页面加载完成的时候,执行window.onload中,来检测哪些是使用了class,然后统一使用popUp的方法。如下代码
var links = document.getElementsByTagName("a");
for (var i=0 ; i<links.length i if links function popup use this in place. because is equals onclick="popUp(this.href)" we cann return false>这样就能更少地侵入我们html代码了。
<p>  最后,作者讲了我们要做到向后兼容和JavaScript的最小化。向后兼容,我们可以使用类似if(document.getElementById)来测试这个方法时候存在,存在了才能使用。JavaScript代码的最小化主要是为了减少JavaScript,这样能加快我们网页的加载。</p>
<p>  下面我在看书的时候碰到不懂的问题,希望大虾们能帮忙解决一下。</p>
<p>   对于<script>应该放在哪里?JavaScript DOM编程艺术中所说的,我们可以把<script>放在</script></p></links.length>
ログイン後にコピー
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート