uTools-Manuals/docs/javascript/JavaScript_technologies_overview.html
2019-04-21 11:50:48 +08:00

54 lines
8.6 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article id="wikiArticle">
<div></div>
<h2 id="介绍">介绍</h2>
<p>HTML是用来存储网页内容的CSS是用来定义这些内容的显示样式的而JavaScript是用来创造丰富的页面效果或者网页应用的。</p>
<p>但是如果从浏览器的范畴去理解“JavaScript”这个术语它包含了截然不同的两个方面。一个是JavaScript的核心语言ECMAScript另一个是DOM文档对象模型</p>
<h2 id="JavaScript核心语言_(ECMAScript)">JavaScript核心语言 (ECMAScript)</h2>
<p>JavaScript的核心语言是<a href="/zh-CN/docs/JavaScript/Language_Resources" title="en-US/docs/JavaScript/Language_Resources">ECMAScript</a>。ECMAScript是由ECMA TC39委员会进行标准化的一门编程语言其最新版本是<a class="external" href="http://www.ecma-international.org/ecma-262/7.0/" rel="noopener">ECMAScript 7.0</a></p>
<p>核心语言同样可以被用在非浏览器环境中,例如 <a class="external" href="http://nodejs.org/" rel="noopener">node.js</a></p>
<h3 id="哪些内容被纳入ECMAScript范畴中了">哪些内容被纳入ECMAScript范畴中了</h3>
<p><a href="/zh-CN/docs/JavaScript/Language_Resources" title="en-US/docs/JavaScript/Language_Resources">ECMAScript</a> 定义了:</p>
<ul>
<li>语法(解析规则,关键字,流程控制,对象初始化等)</li>
<li>错误处理机制throw try/catch 以及用户自定义错误类型的能力)</li>
<li>类型(布尔值,数字,字符串,函数,对象等)</li>
<li>全局对象。在浏览器环境中,这个全局对象就是 window 对象,但是 ECMAScript 只定义与浏览器无关的 APIs例如parseInt parseFloat decodeURI encodeURI 等)</li>
<li>基于原型的继承机制</li>
<li>内置对象和函数JSONMathArray.prototype 方法Object introspection 方法等)</li>
<li>严格模式</li>
</ul>
<h3 id="浏览器支持">浏览器支持</h3>
<p>截止2014年8月份主流浏览器的最新版本都已经支持ECMAScript 5.1但是旧版本的浏览器大都仅支持ECMAScript 3和ECMAScript 5的部分标准。<a class="external" href="http://kangax.github.com/es5-compat-table/" rel="noopener">这里</a>是一些关于ECMAScript 5的浏览器支持情况的资料。如今主流浏览器的最新版本已经支持 ECMAScript 6 的大部分标准。</p>
<h3 id="未来">未来</h3>
<p>ECMA-262<strong>ECMAScript 4</strong> 或者 <strong>ES4</strong>第4版的提议本应成为自1999年第3版发布以来的一次重要更新但是在2008年8月份ECMAScript第4版被回退到一个代号为<a class="external" href="http://en.wikipedia.org/wiki/ECMAScript#ECMAScript_Harmony" rel="noopener">ECMAScript Harmony</a>的项目,像<code>const</code>关键字以及对象代理等内容都被涵盖其中。你可以在<a class="external" href="http://wiki.ecmascript.org/doku.php" rel="noopener">这里</a>跟踪这个项目的进展。ECMA 委员会已经在 2015年6月17号正式发布了第6版标准。</p>
<h2 id="国际化API">国际化API</h2>
<p>由Ecma TC39进行标准化的<a class="external" href="http://ecma-international.org/ecma-402/1.0/" rel="noopener">ECMAScript国际化API规范</a>是在ECMAScript语言规范之上额外增加的。国际化API为JavaScript提供了规则排序字符串比较数字格式化日期时间格式化等功能能够让应用根据实际需要选择语言或功能。本标准在2012年12月份审批通过可以在<a class="new" href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Intl" rel="nofollow">Intl对象</a>页面查看浏览器的实现情况。</p>
<h2 id="DOM_API">DOM API</h2>
<h3 id="WebIDL">WebIDL</h3>
<p><a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/" rel="noopener">WebIDL</a>定义了ECMAScript和DOM技术之间的交互规范。</p>
<h3 id="DOM核心">DOM核心</h3>
<p>文档对象模型DOM是用来表达HTMLXHTML及XML文档中的对象或与其进行交互的<strong>约定</strong>,它是跨平台的,并且与<strong>编程语言无关</strong>。通过调用DOM树上对象的方法可以操纵这些对象。文档对象模型核心是由W3C进行标准化的它将HTML和XML文档抽象成对象并在其上定义接口以及操纵这些对象的机制这些定义都是与编程语言无关的。</p>
<ul>
<li><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" rel="noopener">DOM核心</a>中定义了文档结构树模型以及DOM事件架构包括Node Element DocumentFragment Document DOMImplementation Event EventTarget等。</li>
<li><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html" rel="noopener">DOM事件</a>中包括DOM事件架构不太严格的定义以及一些特殊事件。</li>
<li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html" rel="noopener">DOM 元素遍历</a> 以及 <a class="external" href="http://html5.org/specs/dom-range.html" rel="noopener" title="http://html5.org/specs/dom-range.html">DOM Range</a> 对象等其它内容。</li>
</ul>
<p>从ECMAScript的角度来看DOM规范中定义的对象被称作“宿主对象”。</p>
<h3 id="HTML_DOM">HTML DOM</h3>
<div><a class="external" href="http://www.whatwg.org/html" rel="noopener">HTML</a>是一种网页标记语言它在DOM核心抽象概念之上还定义了元素的含义比如元素的<code>className</code>属性以及 <a href="/zh-CN/docs/Web/API/Document/body" title="返回当前文档中的&lt;body&gt;元素或者&lt;frameset&gt;元素."><code>document.body</code></a>对象等。</div>
<div> </div>
<div><span style="line-height: inherit;">HTML规范同时还约束了元素之间的关系例如无序列表<code>ul</code>元素中,只能以<code>li</code>元素作为子元素来表达列表项。还有就是禁止使用标准中未定义的元素和属性。</span></div>
<p><span style="line-height: inherit;">想了解更多关于<a href="/zh-CN/docs/DOM/document">Document对象</a><a href="/zh-CN/docs/DOM/window">Window对象</a>以及其他DOM元素的信息请访问<a href="/zh-CN/docs/Gecko_DOM_Reference">Gecko DOM文档</a></span></p>
<h2 id="其他值得关注的API">其他值得关注的API</h2>
<ul>
<li>HTML标准中<a class="external" href="http://www.whatwg.org/html/#window" rel="noopener">Window</a>接口首次对setTimeout和setInterval函数进行定义。</li>
<li><a class="external" href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/" rel="noopener" title="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/">XMLHttpRequest.</a> 用来发起异步HTTP请求的API。</li>
<li><a class="external" href="http://dev.w3.org/csswg/cssom/" rel="noopener">CSS 对象模型</a> 用于将CSS规则抽象成对象。</li>
<li><a class="external" href="http://www.whatwg.org/specs/web-workers/current-work/" rel="noopener">WebWorkers.</a> 是用来并行计算的API。</li>
<li><a class="external" href="http://www.whatwg.org/C/#network" rel="noopener">WebSockets.</a> 是用来实现双向Socket通信的API。</li>
<li><a class="external" href="http://www.whatwg.org/html/#2dcontext" rel="noopener" title="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context.</a> canvas元素的绘图API。</li>
</ul>
<h2 id="浏览器支持_2">浏览器支持</h2>
<div>相信每个Web开发人员都曾经有过“<a class="external" href="http://ejohn.org/blog/the-dom-is-a-mess/" rel="noopener">DOM就是一团糟</a>”的体验因为浏览器对DOM的支持千差万别。造成这种局面的主要原因是在DOM规范中对于很多重要的DOM特性并未清晰定义另外一些浏览器也增加了不兼容的特性例如Intenet Explorer的事件模型。自2011年6月以来W3C特别是WHATWG都在对旧特性进行细节定义以提高互用性。浏览器也基于这些更加详细的规范提升它们的实现方式。</div>
<p><span style="line-height: inherit;">要实现跨浏览器的兼容性一个常见的但可能不是最可靠的方式就是使用JavaScript库。这些库对于DOM特性进行抽象以确保它们所提供的API在不同的浏览器上行为一致。被广泛采用的框架有</span><a class="external" href="http://jquery.com/" rel="noopener" style="line-height: inherit;">jQuery</a><a class="external" href="http://www.prototypejs.org/" rel="noopener" style="line-height: inherit;">prototype</a><span style="line-height: inherit;"></span><a class="external" href="http://developer.yahoo.com/yui/" rel="noopener" style="line-height: inherit;">YUI</a></p>
</article>