您的位置:新葡亰496net > 服务器网络 > javascript快速入门22,前端er是否忽略了某些东西

javascript快速入门22,前端er是否忽略了某些东西

发布时间:2019-12-12 08:16编辑:服务器网络浏览(114)

    从今天起,我将陆续将ppkonJavaScript的读书心得发布到这个blog上。ppk是我所景仰的一位web开发者,原因无它,只是因为作为一个JavaScript的开发者来说,他涉及的领域包括web标准,可用性,无障碍等,正是其他开发者所不关注或者故意忽略的。并且,他写了很多案例测试不同的浏览器,总结出JavaScript的接口兼容性,成为JavaScript开发者重要参考资料,几年如一日,这种钻研精神是很多人所缺乏的。 ppk在今年9月出版了他的书,我从去年起就在等的书。今天拿到手,迫不及待地把第一章阅读完毕。果然让人充满惊喜,他的功力非同一般。虽然只是一个初学者,但我认为我已经走在正确的学习道路上。我想,我若能将学习心得分享,能让正在学习的人看到,可以一起交流一起进步,尽管我不敢确保你能从我这里得到什么启发,但我可以确信,我这些笔记会比你拷贝粘贴代码的学习方式更正确。 这本书有十章,章名都简洁明了,分别是:目的,背景,浏览器,准备,核心,BOM,事件,DOM,CSS更改和数据获取。从来没有一本书能如此简洁地明确JavaScript的方方面面,因此学习不会有太大负担。前言不宜过多,下面就开始我的第一章学习笔记。 开篇宗义:JavaScript的目的是,为网页增加特别的一层可用性。听起来很简单,但这条黄金定律经常被人误解。就算编写有用的JavaScript,开发者可能还是没能结合适当的情景:Web标准运动发展下,与当代无障碍的HTML页面的配合。更为不妙的是,有些开发者不是为网页增加一层可用性,而是用整层取代之,后果是,如果浏览器不支持JavaScript,网站就完了。 概念概述 JavaScript是一门由浏览器解释的脚本语言。它通过在客户端而不是服务器端处理某些交互,比如表单验证,创建新菜单来给网站增添可用性。传统的网页交互是,客户端的一举一动都必须经过服务器端的出来才能反馈回来,漫长的等待会让用户崩溃。而JavaScript可以在客户端代替服务器端做某些事情,从而提高用户体验。 随着时代的发展,JavaScript能够处理越来越多的交互。问题出现了,JavaScript能做这么多事情,到底要多用还是少用?这就有了富与瘦的对决。是整个页面都用JavaScript来控制交互还是只增加些许的JavaScript来增强可用性?就是说,尽可能地使用JavaScript还是有所节制,甚至不用? 瘦客户端很大程度上依赖于客户端-服务器的通讯,而富客户端尽可能限制额外的数据通讯。 哪种方式更好?尽管富客户端带来一些可用性益处,但瘦客户端可能是更“标准”的JavaScript用法。Web被认为是文档集合,而不是界面集合。最明显的证据是,浏览器有后退前进的功能让你在文档中跳转而界面会有么?浏览器可以收藏文档而界面可以么?从无障碍来说,瘦客户端也更少出错。 这种非平衡性是很难解决的。富客户端当然也可以在更高级的界面做到前进后退,或者收藏,也可以做到完美的无障碍。这必须需要大量的额外工作,但不是每个项目都有超出预算的时间或金钱。此外,太过专注于可用性而忽略无障碍也是一个问题。 那么JavaScript的目的是为富客户端还是瘦客户端服务?答案是:看情况。得看你的网站,你的受众,你的JavaScript水平。 技术概述 JavaScript分为六个方面,分别是核心,事件,CSS变更和数据获取。 上古时代,NetScape领头之时,NetScape3是事实标准。 当代却没有这么简单。ECMA标准化JavaScriptCore,W3C标准化DOM,而BOM尚在WHAT-WG的标准化中,W3C也刚有了XMLHttpRequest的第一份草稿。今天,BOM依然遵循NetScape3的事实标准,而XMLHttpRequest还是遵照Microsoft的原始规范。 JavaScript的目的在于为网站增加可用性,而不是破坏用户的隐私和安全。因此JavaScript不允许读写用户的文件,采取同源策略,只允许来自相同域的交互。不允许读取历史记录,不能为上传文件的表单设置值,由JavaScript控制的窗口关闭需经用户确认,由JavaScript打开的窗口不能小于100×100的窗口,不能移出屏幕之外。 JavaScript的历史 探寻历史才能让我们知道JavaScript为什么会被误解得如此深。JavaScript的创造者是BrendanEich,首次在NetScape2中实现。它的目的是创建一门足够简单的语言让开发者能容易地为网页增加交互,只要把代码拷贝过来调整一下就可以。这确实令人赞叹,很多JavaScript开发者是从拷贝粘贴开始的。 不幸的是JavaScript生错了名字,也生错了语法。最初它叫LiveScript,但1996年的时候Java炙手可热,NetScape想搭顺风车,于是某产品经理,命令更名,命令BrendanEich让“Javascript像Java”。这让很多人误认为JavaScript是Java的低级版,不能引起严肃程序员的关注。 1996年之时,NetScape3是王,Microsoft只能照抄。这是一个难得的和谐期,当然,那时候浏览器比起现在来“瘦”了,仅限于表单验证,鼠标轮换的一些小花招而已。 接下来就是影响深远的浏览器大战了。为了争夺市场,两家浏览器纷纷实现不同的东西,谁都想成为事实标准。最有名的就是NetScape4的document.layer和IE4的document.all。它们让DHTML流行起来。 1999年Microsoft以推出良好支持CSS和DOM的IE5胜出,NetScape的让位终于有足够的时间让一场革命发生,那就是CSS。WaSP首先从CSS入手,而很多专家也发现/发明了许多浏览器的补救办法,让这场革命成为可能。 2003年,一些先锋们在CSS革命的影响下开始探索新的JavaScript风格,更多地关注无障碍,改观人们对它的坏名声,那就是unobstrusive——把JavaScript从HTML结构层分离出来,遗憾的是,那些在浏览器大战存活下来的程序员可能还没有发现这条新道路。 2005年,Ajax热潮为JavaScript社区注入新的血液。但某些方面,Ajax太像DHTML了,无障碍,是很多Ajax应用的难言之隐。这个热潮趋向于关注技术,而可用性和交互却被低估。最后,各种肿胀的库迅速发展起来。 Ajax依然全速前进,但这会像DHTML一样结果,人们渐渐失去兴趣,它们会土崩瓦解。 JavaScript兴衰史好像有一定的“定律”支配,我们能打破这个怪圈吗?不管如何,JavaScript开发者在寻找各种酷代码和华而不实的框架之外,更应该调整自己的行动,让JavaScript运行在:标准兼容的,无障碍的网页中。

    关于书

    Ajax是什么?

    首先,Ajax是什么?一个很酷的新兴词汇!仅仅是某种早就有了的技术的一种新说法而已! Ajax是指一种创建交互式网页应用的网页开发技术。要谈到网页应用程序,则必须从WEB的历史来讲:

    1.开始的Internet,仅仅是科学家们用来交换研究论文,及一些大学在上面发布一些课程信息的工具,那个时候网页与一幅户外广告没多大区别(相反户外广告才能起来广告的作用).那个时候,只有少部分的公司具有公司网站,而它们的公司网站仅仅是在首页上放置一些联系信息或一些静态的文档!

    2.当Windows出现后(尽管Windows仅仅是给早就有了的操作系统加个外套而已,但这确实上一大进步),及个人电脑的流行,WEB也开始从学院走向群众,人们无法再忍受静态网页的一成不变,于是CGI(Common Gateway Interface)诞生了! CGI其实是用C或Perl编写的程序,当用户请求某个页面时,CGI程序会自动执行,CGI程序可以访问数据库,返回HTML页面.那个时候就可以通过CGI来创建一个在线商城了.然而CGI有很多缺点:首先是其编写很复杂,往往编写CGI的是一些专业的程序员,他们只会关心一些算法问题,而不会理HTML页面是否漂亮! 另一点,由于CGI是经过编译后的程序,虽然作为独立程序运行时效率会很高,但也很危险,因为CGI程序可以访问服务器的系统里的其它与WEB无关的程序及创建文件,虽然一般情况下CGI程序不会这样做,但如果恶意用户将CGI程序放到服务器,那么它就可以为所欲为了!尽管存在这些缺陷,到如今CGI仍在使用。

    3.很多人都知道Sun,知道因特网流行的编程语言JAVA.如上所说CGI具有许多缺点,JAVA便是来弥补这些缺点的.由于Netscape的Navigator支持Java,动态Web页面掀开了新的一页:applet时代到来了。Applet与CGI不同,它是运行在客户端的,Applet就是嵌入在Web页面上的小应用程序. 只要用户使用支持Java的浏览器,就可以在浏览器的Java虚拟机(Java Virtual Machine,JVM)中运行applet。尽管applet可以做很多事情,但它也存在一些限制:通常不允许它读写文件系统,它也不能加载本地库,而且可能无法启动客户端上的程序。除了这些限制外,applet是在一个沙箱安全模型中运行的,这是为了有助于防止用户运行恶意代码。 JAVA最先就是因为Applet出名的,而很多人学JAVA也是从Applet开始的.然而,Applet好景不长,一是由于一个Applet本身加载要很长时间,另一方面,由于更流行的MS的IE开始不支持Applet,它就只好没落了.

    4.与此同时,Netscape创建了一种脚本语言,并最终命名为JavaScript(建立原型时叫做Mocha,正式发布之前曾经改名为LiveWire和LiveScript,不过最后终于确定为JavaScript)。设计JavaScript是为了让不太熟悉Java的Web设计人员和程序员能够更轻松地开发applet(当然,Microsoft也推出了与JavaScript相对应的脚本语言,称为VBScript)。 当然,最初JavaScript是很失败的,由于各个浏览器相互不兼容(然而它们都提供了弹窗,那些烦人的alert),又因为缺乏开发工具,JavaScript很受非议.但尽管如此,JavaScript仍然是一种创建动态Web应用的强大方法。

    5.在Java问世一年左右,Sun引入了servlet。现在Java代码不用再像applet那样在客户端浏览器中运行了,它可以在你控制的一个应用服务器上运行。这样,开发人员就能充分利用现有的业务应用,而且,如果需要升级为最新的Java版本,只需要考虑服务器就行了。Java推崇“一次编写,到处运行”,这一点使得开发人员可以选择最先进的应用服务器和服务器环境,这也是这种新技术的另一个优点。servlet还可以取代CGI脚本。 当然,这个时候的servlet仍然比CGI简单不了多少.MS吸取了Sun的教训,推出了ASP,Sun也很快作出了回应,推出了JSP.JSP和ASP的设计目的都是为了将业务处理与页面外观相分离,从这个意义上讲,二者是相似的。虽然存在一些技术上的差别(Sun也从Microsoft那里学到了教训),但它们有一个最大的共同点,即Web设计人员能够专心设计页面外观,而软件开发人员可以专心开发业务逻辑。 ASP与JSP都没有垄断服务器脚本市场,因为还有其它优秀的服务器脚本,如PHP,ColdFusion及Ruby!

    6.当WEB进化到这里的时候,动态的网站已经很多了.但人们对动态的定义一直很模糊,比如说很多人以为动态是指动画!其实这也没什么可笑的,正是这一理念,将动态WEB从服务器端动态生成HTML进化为富客户端应用程序(当然不是动画). 富客户端应用程序(Rich Internet Applications,富因特网应用程序,RIA)的提出解决了长久以来的"客户体验"问题,用户在使用Windows时已经习惯于那些各色各样的桌面应用程序,而死板的HTML页面往往只能提供一些文档. RIA的出现,目标就是能使WEB页面能像桌面应用程序一样具有很高的交互性及响应率.其实Sun推出的Applet就是一个RIA,当然MS也有其产品,最近推出的SilverLight.并不只有这两家,还有Adobe Flash(它不是做动画的吗?对的,但其不但可以用来做动画,还可以创建一些其它的RIA),利用Flash,设计人员可以创建令人惊叹的动态应用。公司可以在Web上发布高度交互性的应用,几乎与胖客户应用相差无几。不同于applet、servlet和CGI脚本,Flash不需要编程技巧,很容易上手。 像许多解决方案一样,Flash需要客户端软件,由于此限制,很多网站上就多出了"跳过此页"的链接.

    7.主角出场了(其实已经低调出场过一次了),曾经的JavaScript,以及其带来的DHTML,开始了新的历程. 当Microsoft和Netscape发布其各自浏览器的第4版时,Web开发人员有了一个新的选择:动态HTML(Dynamic HTML,DHTML)。与有些人想像的不同DHTML不是一个W3C标准,它更像是一种营销手段。实际上,DHTML结合了HTML、层叠样式表(Cascading Style Sheets,CSS)、JavaScript和DOM。这些技术的结合使得开发人员可以动态地修改Web页面的内容和结构。 最初DHTML的反响很好。不过,它需要的浏览器版本还没有得到广泛采用。尽管IE和Netscape都支持DHTML,但是它们的实现大相径庭,这要求开发人员必须知道他们的客户使用什么浏览器。而这通常意味着需要大量代码来检查浏览器的类型和版本,这就进一步增加了开发的开销。有些人对于尝试这种方法很是迟疑,因为DHTML还没有一个官方的标准。 当DHTML渐渐退出视野之后,我们的JavaScript并没有没落,由于W3C标准的不断推进,给JS带来了福音,现在编写跨浏览器的代码并不像当初那样困难了(尽管也存在一些问题).另外,XML与异步通信(XMLHttpRequest)在WEB上的的流行,浏览器对支持也越来越好,也使得JS可以大展其身手.当你使用JS操纵DOM的时候,就发现实现动态WEB应用程序已经不再有多遥远. 现在又有了XML(数据库)与异步通信的支持,可以使得应用程序在加载完成后,无需跳转,就可以返回给用户所有的内容了!

      “不知道ppk的网站QuirksMode,说明你可能还没有真正成为资深的JavaScript程序员。”

    Ajax是多种技术的并称

    Ajax是Asynchronous JavaScript and XML(异步JavaScript和XML),它其实包含了很多技术,主要是下面所列的:

    • ECMAScript,为什么不是JavaScript?因为JavaScript本身与Ajax一样,包含的也太多了!
    • DOM及相关内容:CSS,XHTML....
    • XML,及XML的一些扩展语言:XSL,SVG,XUL,XAML.....XML的扩展太多了
    • XMLHttpRequest对象,浏览器提供的一个可以用于异步通信的JavaScrip对象
    • 服务器脚本的支持,没有服务器脚本在后台工作,也是没有办法实现"动态"的,之后就知道了...

    ——Roger Johansson,瑞典资深Web专家。

    关于XMLHttpRequest对象

    XMLHttpRequest对象其实最早是由MS提出来的,并在IE5中就提供了支持,当时,在IE5里它是一个ActiveXObject. 原先,XHR对象只在IE中得到支持(因此限制了它的使用),但是从Mozilla 1.0和Safari 1.2开始,对XHR对象的支持开始普及。这个很少使用的对象和相关的基本概念甚至已经出现在W3C标准中:DOM Level 3 加载和保存规约(DOM Level 3 Load and Save Specification)。现在,特别是随着Google Maps、Google Suggest、Gmail、Flickr、Netflix和A9等应用变得越来越炙手可热,XHR也已经成为事实上的标准。 与前面提到的方法不同,Ajax在大多数现代浏览器中都能使用,而且不需要任何专门的软件或硬件。实际上,这种方法的一大优势就是开发人员不需要学习一种新的语言,也不必完全丢掉他们原先掌握的服务器端技术。Ajax是一种客户端方法,可以与J2EE、.NET、PHP、Ruby和CGI脚本交互,它并不关心服务器是什么。尽管存在一些很小的安全限制,你还是可以现在就开始使用Ajax,而且能充分利用你原有的知识。

      ppk是世界级前端技术专家,Web标准的布道者,在《ppk on JavaScript》中,他向读者介绍了JavaScript这门流行语言。

    早期的异步通信实现

    虽然可以使用XHR对象来实现异步通信,但其实早期的开发人员曾经也尝试过使用隐藏帧等方法来实现异步通信!

        //主页面中的JS代码
        function getPages(url) {
            var iframe =document.getElementById("hideIframe");//一个隐藏了的iframe标签
            iframe.src = url;//将帧的src设置为传入的url,就可以将那个页面在后台载入
        }
        window.container = document.getElementById("oDiv");//加载内容的窗口
        getPages("test.php?param=value");//可以通过QS传递参数
        //在隐藏帧中加载的页面中JS代码
        window.onload = function () {//当帧加载完毕后修改父窗口中的内容
            parent.container.innerHTML = document.body.innerHTML;
        }
    

     

    另外还有一种就是使用script标签

        //HTML
        <script type="text/javascript" id="voidScript" src="void(0)"> </script>
        //JS
        function getScript(url) {
            var script = document.getElementById("voidScript");
            script.src =url;//这种方法必须加载JS脚本,并且脚本加载后就会执行
        }
        getScript("test.php?userName=abc");
    

     

      这本书从第五章开始依次介绍了JavaScript Core,BOM,DOM,和Ajax。整本书通读下来后,发现ppk重点关注原生API在各浏览器下的兼容性,但是限于篇幅,《JavaScript高级程序设计》这本书可能做的更加出色。然而与其它书籍不同的是,网站的可访问性被ppk作为重要论点写在了这本书中,这也是它另人印象深刻的原因所在。

    Ajax的问题

    Ajax并不是每个网站都需要的,尽管它有诸多优点:如可与XHTML无缝集成,轻量,无需插件..但其缺点也有不少:依赖JavaScript,影响浏览器默认行为如后退按钮及收藏夹等.另外,它最大的优点也是它最大的缺点: 我们以前总是告诉用户,Web应用是以一种请求/响应模式完成操作的,用户也已经接受了这种思想。但是用了Ajax,就不再有这个限制。我们可以只修改页面的一部分,如果用户没想到这一点,他们会尝试狂点某按钮,或刷新页面,所以要通过一些方法来让用户知道页面正在"异步"与服务器交互!

    重要论点:网站的可访问性

      可访问性是指你的网页对任何人、在任何环境下都是可以可持续访问的。特别是某些用户,他们被迫忍受着一些无法改变的状况,如弱视、浏览器不能(或不充分)支持JavaScript等。

      ppk在书的开端点题,强调网页的可访问性,在结尾甚至一度作出“Ajax炒作必将终结,JavaScript用途将被重新定义”的预言。 可谓是首尾呼应,论点突出啊!

    新葡亰496net,javascript快速入门22,前端er是否忽略了某些东西。  ppk在书中举了一些例子向我们介绍可访问性:

      1.链接必须有href(p33)。

    <a href="#" onclick="showPopup('niceimage.jpg')">Nice Image!</a>
    

      当一个无脚本用户点击这个链接时,什么也不会发生,因此这个页面不具备可访问性。相反,

    <a href="niceimage.jpg" id="nice">Nice Image!</a>
    document.getElementById('nice').onclick=function(){
        showPopup(this.href);       
    }
    

      这样的编写形式不仅进行了行为与结构的分离,还保持了页面的可访问性。

      类似的,当一个超链接并非链接到一个资源,而是为了触发脚本时,很多人会这样写:

    <a href="javascript:void(0)" onclick="doSomething();">Do Something</a>
    或
    <a href="javascript:doSomething()">Do Something</a>
    

      当一个禁用了脚本的用户点击这个链接时,什么事也不会发生。这个时候ppk建议我们使用DOM生成这种超链接,假如用户禁用了脚本,那么他根本不会看到这些链接,也不会带来"为什么我点击了却没反应"这种困惑了。

      总之,对超链接的href来说,要不就让它包含一个URL地址以便那些禁用脚本的用户可以继续访问,要不就由JavaScript来生成这个链接。

      2.用JavaScript隐藏内容(p34)

      以表单提交为例,借助选择性呈现的表单元素,可以提高页面的易用性。根据用户的前一个选择,来决定接下来呈现的表单元素,而不是将所有的元素一股脑地呈现出来。我们的一般思路是将这些选择性呈现的元素用CSS隐藏,然后用脚本监听用户行为,符合操作条件后改变样式,将隐藏元素显示出来。不难想象,一个禁用了脚本的用户将永远无法看到这些隐藏的表单元素。

      ppk建议使用JavaScript隐藏这些选择性呈现的元素,而非CSS。这样当脚本被禁用时,它们就不会隐藏,可访问性被完整地保持下来。

      3.可点击的元素(p36)

      依赖键盘的Tab操作,可以使页面元素切换焦点。浏览器默认的可获得键盘焦点的元素只有链接、表单域和按钮。以下拉菜单为例,它使用mouseover事件来触发下拉菜单,为了保持键盘用户的可访问性,还需要为其添加一个focus事件监听,然后,为了触发focus事件,键盘用户必须可以把焦点落到下拉菜单上。如果做不到这点,那么脚本仍然是不可访问的。ppk建议任何键盘友好的事件或脚本都应该被设置在链接、表单和按钮上。

      注:tabindex用来控制用户使用tab键导航时的顺序,使tabindex等于负值,例如tabindex="-1",可以使div等不能获焦的元素监听和触发onfous事件,但无法使用Tab键获取键盘焦点。使tabindex等于正值,div既可触发onfocus,也可使用tab键导航。

      “JavaScript的目标都围绕着酷炫的技术,而不是可用性”,这是在JavaScript历史中反复出现的情况。DHTML带来铺天盖地的弹窗广告、闪烁而不友好的动画,一度使JavaScript声名狼藉。如今Ajax的盛行再次掀起了人们对技术的追捧,人们往往围绕着如何实现Ajax,如何使用Ajax做一些酷炫的事情,而很少有人关注可用性和交互问题,即为什么要用Ajax?ppk相信,Ajax最终会像DHTML那样终结:人们会完全对它失去兴趣,而它将会原形毕露,只是少量的JavaScript和大量的空话。他希望JavaScript开发者们可以学到很酷的代码、花哨的库或框架背后的东西——使它们的行为都基于脚本运行环境。

    我的看法

      《ppk on JavaScript》这本书写于2006年,那是个Ajax浪潮大爆发的年代,对待一个充满诱惑力的技术,ppk仍然能够不失理智地去剖析其中可能存在的问题,他的钻研和质疑精神无疑是QuirksMode成功的重要原因。"JavaScript用来做什么?“已经没有人去回答了,前端帝国日渐壮大,服务器变为一个“数据源”,JSON和Node.js的诞生加剧了这种变化。前端可以实现的功能越来越多,它的作用作用越来越大,代码量也越来越大,如果不进行模块化,势必会加剧码农编程的痛苦, 于是各种MVC,MVVM框架,各种模块化规范开始盛行。

      我们是否如ppk所说,忽略了网页的可用性?天猫,一个电子商务网站,离开了JavaScript,将无法完成任何一笔订单。一些依赖JS库组装的网站甚至连页面结构都呈现不出来。

      但是,没办法。图片过多,结构过于复杂,DOM树过于庞大,一次加载完用户体验过于的差。当人们发现JavaScript和Ajax可以解决这些矛盾时,自然会拼命抓住这棵救命稻草。至于未来庞大的前端帝国是否会坍塌,JavaScript的用途是否会被重新定义,没人可以预料。然而,并不是说ppk的说法是错的,DOM和Ajax的的确确滥用充斥在互联网中,类似天猫,百度地图这种互联网应用理所当然可以依赖它们,但是像新闻类、门户类、公司主页等网站都盲目跟风,依赖于Ajax来呈现内容,这无疑应该引起深刻思考。

      不管怎么说,如今只会验证个表单,写个DOM操作的程序员已经满足不了时代的需求了,当全世界都在喝咖啡时,你还在考虑为什么大家都喝咖啡,而不是喝可乐,无疑有点可笑了,不过这个碎碎念留在饭后还是不错,万一真理真的掌握在少数人手中呢?比如,ppk。

      最后,附上书的照片一张。

    新葡亰496net 1

      (完)

    本文由新葡亰496net发布于服务器网络,转载请注明出处:javascript快速入门22,前端er是否忽略了某些东西

    关键词: