十三、浏览器中的 JavaScript
原文：JavaScript and the Browser
译者：飞龙
协议：CC BY-NC-SA 4.0
自豪地采用谷歌翻译
部分参考了《JavaScript 编程精解（第 2 版）》
Web 背后的梦想是公共信息空间，其中我们通过共享信息进行交流。 其普遍性至关重要：超文本链接可指向任何东西，无论是个人的，本地的还是全球的，无论是草稿还是高度润色的。
Douglas Crockford，《JavaScript 编程语言》（视频讲座）
本书接下来的章节将会介绍 Web 浏览器。可以说，没有浏览器，就没有 JavaScript。就算有，估计也不会有多少人去关心这门编程语言。
Web 技术自出现伊始，其演变方式和技术上就是以分散的方式发展的。许多浏览器厂商专门为其开发新的功能，有时这些新功能被大众采纳，有时这些功能被其他功能所代替，最终形成了一套标准。
这种发展模式是把双刃剑。一方面，不会有一个集中式的组织来管理技术的演进，取而代之的是一个包含多方利益集团的松散协作架构（偶尔会出现对立）。另一方面，互联网这种无计划的发展方式所开发出来的系统，其内部很难实现一致性。事实上，它的一些部分令人疑惑，并且毫无设计。
网络和 Internet
计算机网络出现在 20 世纪 50 年代。如果在两台或多台计算机之间铺设电缆，那么你可以通过这些电缆互相收发数据，并实现一些神奇的功能。
如果通过连接同一个建筑中的两台机器就可以实现一些神奇的功能，那么如果可以连接全世界的机器，就可以完成更伟大的工作了。20 世纪 80 年代，人们开发了相关技术来实现这个愿景，我们将其产生的网络称为 Internet。而 Internet 的表现名副其实。
计算机可以使用这种网络向其他计算机发送位数据。为了在传输位数据的基础上，实现计算机之间的有效通信，网络两端的机器必须知道这些位所表达的实际含义。对于给定的位序列，其含义完全取决于位序列描述的信息类型与使用的编码机制。
网络协议描述了一种网络通信方式。网络协议非常多，其中包括邮件发送、邮件收取和邮件共享，甚至连病毒软件感染控制计算机都有相应的协议。
例如，HTTP（超文本传输协议，Hypertext Transfer Protocol）是用于检索命名资源（信息块，如网页或图片）的协议。 它指定发出请求的一方应该以这样的一行开始，命名资源和它正在尝试使用的协议的版本。
GET /index.html HTTP/1.1
有很多规则，关于请求者在请求中包含更多信息的方式，以及另一方返回资源并打包其内容的方式。 我们将在第 18 章中更详细地观察 HTTP。
大多数协议都建立在其他协议之上。 HTTP 将网络视为一种流式设备，您可以将位放入这些设备，并使其按正确的顺序到达正确的目的地。 我们在第 11 章]中看到，确保这些事情已经是一个相当困难的问题。
TCP（传输控制协议，Transmission Control Protocol）就可以帮助我们解决该问题。所有连接到互联网的设备都会使用到这种协议，而多数互联网通信都构建在这种协议之上。
TCP 连接的工作方式是一台电脑必须等待或者监听，而另一台电脑则开始与之通信。一台机器为了同时监听不同类型的通信信息，会为每个监听器分配一个与之关联的数字（我们称之为端口）。大多数协议都指定了默认使用的端口。例如，当我们向使用 SMTP 协议发送一封邮件时，我们需要通过一台机器来发送邮件，而发送邮件的机器需要监听端口 25。
随后另一台机器连接到使用了正确端口号的目标机器上。如果可以连接到目标机器，而且目标机器在监听对应端口，则说明连接创建成功。负责监听的计算机名为服务器，而连接服务器的计算机名为客户端。
我们可以将该连接看成双向管道，位可以在其中流动，也就是说两端的机器都可以向连接中写入数据。当成功传输完这些位数据后，双方都可以读取另一端传来的数据。TCP 是一个非常便利的模型。我们可以说TCP就是一种网络的抽象。
Web
万维网（World Wide Web，不要将其与 Internet 混淆）是包含一系列协议和格式的集合，允许我们通过浏览器访问网页。词组中的 Web 指的是这些页面可以轻松地链接其他网页，因此最后可以连接成一张巨大的网，用户可以在网络中浏览。
你只需将一台计算机连接到 Internet 并使用 HTTP 监听 80 端口，就可以成为 Web 的一部分。其他计算机可以通过网络，并使用 HTTP 协议获取其他计算机上的文件。
网络中的每个文件都能通过 URL（统一资源定位符，Universal Resource Locator）访问，如下所示：
http:
| | | |
protocol server path
该地址的第一部分告诉我们 URL 使用的是 HTTP 协议（加密的 HTTP 连接则使用https://来表示）。第二部分指的是获取文件的服务器地址。第三部分是我们想要获取的具体文件（或资源）的路径。
连接到互联网的机器获得一个 IP 地址，该地址是一个数字，可用于将消息发送到该机器的，类似于"149.210.142.219"或"2001:4860:4860::8888"。 但是或多或少的随机数字列表很难记住，而且输入起来很笨拙，所以你可以为一个特定的地址或一组地址注册一个域名。 我注册了eloquentjavascript.net，来指向我控制的机器的 IP 地址，因此可以使用该域名来提供网页。
如果你在浏览器地址栏中输入上面提到的 URL，浏览器会尝试获取并显示该 URL 对应的文档。首先，你的浏览器需要找出域名eloquentjavascript.net指向的地址。然后使用 HTTP 协议，连接到该地址处的服务器，并请求/13_browser.html这个资源。如果一切顺利，服务器会发回一个文档，然后您的浏览器将显示在屏幕上。
HTML
HTML，即超文本标记语言（Hypertext Markup Language），是在网页中得到广泛使用的文档格式。HTML 文档不仅包含文本，还包含了标签，用于说明文本结构，描述了诸如链接、段落、标题之类的元素。
一个简短的 HTML 文档如下所示：
<html>
<head>
<meta charset="utf-8">
<title>My home pagetitle>
head>
<body>
<h1>My home pageh1>
<p>Hello, I am Marijn and this is my home page.p>
<p>I also wrote a book! Read it
<a href="http://eloquentjavascript.net">herea>.p>
body>
html>
标签包裹在尖括号之间（<和>，小于和大于号），提供关于文档结构的信息。其他文本则是纯文本。
文档以
HTML 文档有头部（head）和主体（body）。头部包含了文档信息，而主体则包含文档自身。在本例中，头部将文档标题声明为"My home page"，并使用 UTF-8 编码，它是将 Unicode 文本编码为二进制的方式。文档的主体包含标题（
标签有几种形式。一个元素，比如主体、段落或链接以一个起始标签（比如
）结束。一些起始标签，比如一个链接（
），会包含一些额外信息，其形式是
name="value"这种键值对，我们称之为属性。在本例中，使用属性
href="http://eloquentjavascript.net"指定链接的目标，其中
href表示“超文本链接（Hypertext Reference）”。
某些类型的标签不会包含任何元素，这种标签不需要闭合。元数据标签
译者注：最好还是这样闭合它们：
尽管 HTML 中尖括号有特殊含义，但为了在文档的文本中包含这些符号，可以引入另外一种形式的特殊标记方法。普通文本中的起始尖括号写成<（less than），而闭合尖括号写成>（greater than）。在 HTML 中，我们将一个&字符后跟着一个单词和分号（;）这种写法称为一个实体，浏览器会使用实体编码对应的字符替换它们。
与之类似的是 JavaScript 字符串中反斜杠的使用。由于 HTML 中的实体机制赋予了&特殊含义，因此我们需要使用&来表示一个&字符。在属性的值（包在双引号中）中使用"可以插入实际的引号字符。
HTML 的解析过程容错性非常强。当应有的标签丢失时，浏览器会重新构建这些标签。标签的重新构建已经标准化，你可以认为所有现代浏览器的行为都是一致的。
下面的文件与之前版本显示效果相同：
<meta charset=utf-8>
<title>My home pagetitle>
<h1>My home pageh1>
<p>Hello, I am Marijn and this is my home page.
<p>I also wrote a book! Read it
<a href=http://eloquentjavascript.net>herea>.
</code>属于头部，而<code><h1></code>属于主体。此外，我再也不用明确关闭某个段落，因为新段落开始或文档结束时，浏览器会隐式关闭段落标签。目标链接两边的引号也可以丢弃。</p>
<p>本书的示例通常都会省略<code><html></code>、<code><head></code>和<code><body></code>标签，以保持源代码简短，避免太过杂乱。但我会明确关闭所有标签并在属性两旁包含引号。</p>
<p>本书也会经常忽略<code>doctype</code>和<code>charset</code>声明。这并不是鼓励大家省略它们。当你忘记它们时，浏览器往往会做出荒谬的事情。 您应该认为<code>doctype</code>和<code>charset</code>元数据隐式出现在示例中，即使它们没有实际显示在文本中。</p>
<h2 id="html-和-javascript">HTML 和 JavaScript</h2>
<p>对于本书来说，最重要的一个 HTML 标签是<code><script></code>。该标签允许我们在文档中包含一段 JavaScript 代码。</p>
<pre class="prettyprint"><code class="language-html hljs "><span class="hljs-tag"><<span class="hljs-title">h1</span>></span>Testing alert<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">alert(<span class="hljs-string">"hello!"</span>);</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre>
<p>当浏览器在读取 HTML 时，一旦遇到<code><script></code>标签就会执行该代码。这个页面在打开时会弹出一个对话框 - <code>alert</code>函数类似<code>prompt</code>，因为它弹出一个小窗口，但只显示一条消息而不请求输入。</p>
<p>在 HTML 文档中包含大程序是不切实际的。<code><script></code>标签可以指定一个<code>src</code>属性，从一个 URL 获取脚本文件（包含 JavaScript 程序的文本文件）。</p>
<pre class="prettyprint"><code class="language-html hljs "><span class="hljs-tag"><<span class="hljs-title">h1</span>></span>Testing alert<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"code/hello.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre>
<p>这里包含的文件<code>code/hello.js</code>是和上文中相同的一段程序，<code>alert("hello")</code>。当一个页面将其他 URL 引用为自身的一部分时（比如图像文件或脚本），网页浏览器将会立即获取这些资源并将其包含在页面中。</p>
<p>即使<code>script</code>标签引用了一个文本文件，且并未包含任何代码，你也必须使用<code></script></code>来闭合标签。如果你忘记了这点，浏览器会将剩余的页面会作为脚本的一部分进行解析。</p>
<p>你可以在浏览器中加载ES模块（参见第 10 章），向脚本标签提供<code>type ="module"</code>属性。 这些模块可以依赖于其他模块，通过将相对于自己的 URL 用作<code>import</code>声明中的模块名称。</p>
<p>某些属性也可以包含 JavaScript 程序。下面展示的<code><button></code>标签（显示一个按钮）有一个<code>onclick</code>属性。该属性的值将在点击按钮时运行。</p>
<pre class="prettyprint"><code class="language-html hljs "><span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">"alert('Boom!');"</span>></span>DO NOT PRESS<span class="hljs-tag"></<span class="hljs-title">button</span>></span></code></pre>
<p>需要注意的是，我们在<code>onclick</code>属性的字符串中使用了单引号，这是因为我们在使用了双引号来引用整个属性。我们也可以使用<code>"</code>。</p>
<h2 id="沙箱">沙箱</h2>
<p>直接执行从因特网中下载的程序存在潜在危险。你不了解大多数的网页开发者，他们不一定都心怀善意。一旦运行某些不怀好意的人提供的程序，你的电脑可能会感染病毒，这些程序还会窃取数据会并盗走账号。</p>
<p>但网络的吸引力就在于你可以浏览网站，而不必要信任所有网站。这就是为什么浏览器严重限制了 JavaScript 程序的能力—— JavaScript 无法查看电脑中的任何文件，也无法修改与其所在页面无关的数据。</p>
<p>我们将这种隔离程序运行环境的技术称为沙箱。以该思想编写的程序在沙箱中运行，不会对计算机造成任何伤害。但是你应该想象，这种特殊的沙箱上面有一个厚钢筋笼子，所以在其中运行的程序实际上不会出去。</p>
<p>实现沙箱的难点是：一方面我们要给予程序一定的自由使得程序能有实际用处，但又要限制程序，防止其执行危险的行为。许多实用功能（比如与服务器通信或从剪贴板读取内容）也会存在问题，有些侵入者可以利用这些功能来侵入你的计算机。</p>
<p>时不时会有一些人想到新方法，突破浏览器的限制，并对你的机器造成伤害，从窃取少量的私人信息到掌握执行浏览器的整个机器。浏览器开发者的对策是修补漏洞，然后一切都恢复正常。直到下一次问题被发现并广为传播之前，某些政府或秘密组织可以私下利用这些漏洞。</p>
<h2 id="兼容性与浏览器之争">兼容性与浏览器之争</h2>
<p>在 Web 技术发展的早期，一款名为 Mosaic 的浏览器统治了整个市场。几年之后，这种平衡被 Netscape 公司打破，随后又被微软的 Internet Explorer 排挤出市场。无论什么时候，当一款浏览器统治了整个市场，浏览器供应商就会觉得他们有权利单方面为网络研发新的特性。由于大多数人都使用相同的浏览器，因此网站会开始使用这些独有特性，也就不再考虑其他浏览器的兼容性问题了。</p>
<p>这是兼容性的黑暗时代，我们通常称之为浏览器之争。网络开发者总是为缺乏统一的 Web 标准，而需要去考虑两到三种互不兼容的平台而感到烦恼。让事情变得更糟糕的是 2003 年左右使用的浏览器充满了漏洞，当然不同浏览器的漏洞都不一样。网页编写者的生活颇为艰辛。</p>
<p>Mozilla Firefox，作为 Netscape 浏览器的非盈利性分支，在20世纪初末期开始挑战 Internet Explorer 的霸主地位。因为当时微软并未特别关心与其竞争，导致 Firefox 迅速占领了很大的市场份额。与此同时，Google 发布了它的 Chrome 浏览器，而 Apple 的 Safari 也得到普及，导致现在成为四个主要选手的竞争，而非一家独大。</p>
<p>新的参与者对标准有着更认真的态度，和更好的工程实践，为我们减少了不兼容性和错误。 微软看到其市场份额极速下降，在其 Edge 浏览器中采取了这些态度，取代了 Internet Explorer。 如果您今天开始学习网络开发，请认为自己是幸运的。 主流浏览器的最新版本行为非常一致，并且错误相对较少。</p>
<p>这并不是说就没有问题了。某些使用网络的人，出于惰性或公司政策，被迫使用旧版本的浏览器。直到这些浏览器完全退出市场之前，为旧版本浏览器编写网站仍需要掌握很多不常见的特性，了解旧浏览器的缺陷和特殊之处。本书不会讨论这些特殊的特性，而着眼于介绍现代且健全的网络程序设计风格。</p>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1279919208255209472"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js"></script>
<!-- 文章页-底部 动态广告位 -->
<div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
</div>
<div class="col-md-3">
<div class="row" id="ad">
<!-- 文章页-右侧1 动态广告位 -->
<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_1"> </div>
</div>
<!-- 文章页-右侧2 动态广告位 -->
<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_2"></div>
</div>
<!-- 文章页-右侧3 动态广告位 -->
<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(javascript,JavaScript,编程精解,3e)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1835509897106649088.htm"
title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
<span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
</li>
<li><a href="/article/1835498925755297792.htm"
title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
<span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
<div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
</li>
<li><a href="/article/1835496149843275776.htm"
title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
<span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
<div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
</li>
<li><a href="/article/1835496148601761792.htm"
title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
<span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
</li>
<li><a href="/article/1835492740536823808.htm"
title="node.js学习" target="_blank">node.js学习</a>
<span class="text-muted">小猿L</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
<div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div>
</li>
<li><a href="/article/1835448239864770560.htm"
title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a>
<span class="text-muted">跳房子的前端</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div>
</li>
<li><a href="/article/1835428948339683328.htm"
title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a>
<span class="text-muted">跳房子的前端</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div>
</li>
<li><a href="/article/1835419870070665216.htm"
title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a>
<span class="text-muted">hai40587</span>
<a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
<div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div>
</li>
<li><a href="/article/1835383919906746368.htm"
title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a>
<span class="text-muted">海淀萌狗</span>
<div>-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i</div>
</li>
<li><a href="/article/1835373236217540608.htm"
title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a>
<span class="text-muted">马小蜗</span>
<div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div>
</li>
<li><a href="/article/1835360244646113280.htm"
title="JavaScript中秋快乐！" target="_blank">JavaScript中秋快乐！</a>
<span class="text-muted">Q_w7742</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh</div>
</li>
<li><a href="/article/1835359727924637696.htm"
title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a>
<span class="text-muted">听你讲故事啊</span>
<div>动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin</div>
</li>
<li><a href="/article/1835354700392787968.htm"
title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a>
<span class="text-muted">张某布响丸辣</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
<div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div>
</li>
<li><a href="/article/1835354447627251712.htm"
title="前端知识点" target="_blank">前端知识点</a>
<span class="text-muted">ZhangTao_zata</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div>
</li>
<li><a href="/article/1835331376895848448.htm"
title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</a>
<span class="text-muted">程序员-张师傅</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi</div>
</li>
<li><a href="/article/1835298981362626560.htm"
title="webstorm报错TypeError: this.cliEngine is not a constructor" target="_blank">webstorm报错TypeError: this.cliEngine is not a constructor</a>
<span class="text-muted">Blue_Color</span>
<div>点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:</div>
</li>
<li><a href="/article/1835296397365178368.htm"
title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a>
<span class="text-muted">uthRaman</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
<div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div>
</li>
<li><a href="/article/1835293121953492992.htm"
title="了解 UNPKG：前端开发者的包管理利器" target="_blank">了解 UNPKG：前端开发者的包管理利器</a>
<span class="text-muted">小于负无穷</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
<div>在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n</div>
</li>
<li><a href="/article/1835247344719851520.htm"
title="2019-05-29 vue-router的两种模式的区别" target="_blank">2019-05-29 vue-router的两种模式的区别</a>
<span class="text-muted">Kason晨</span>
<div>1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash</div>
</li>
<li><a href="/article/1835216109297561600.htm"
title="electron多标签页模式更像客户端" target="_blank">electron多标签页模式更像客户端</a>
<span class="text-muted">diygwcom</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser</div>
</li>
<li><a href="/article/1835194426499100672.htm"
title="外卖霸王餐返利外卖会员卡小程序开发" target="_blank">外卖霸王餐返利外卖会员卡小程序开发</a>
<span class="text-muted">闹小艾</span>
<a class="tag" taget="_blank" href="/search/good506070/1.htm">good506070</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
<div>外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账</div>
</li>
<li><a href="/article/1835192531881652224.htm"
title="Axure设计之全屏与退出全屏交互实现" target="_blank">Axure设计之全屏与退出全屏交互实现</a>
<span class="text-muted">招风的黑耳</span>
<a class="tag" taget="_blank" href="/search/Axure/1.htm">Axure</a><a class="tag" taget="_blank" href="/search/axure/1.htm">axure</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a>
<div>在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure</div>
</li>
<li><a href="/article/1835162742533746688.htm"
title="全面指南：用户行为从前端数据采集到实时处理的最佳实践" target="_blank">全面指南：用户行为从前端数据采集到实时处理的最佳实践</a>
<span class="text-muted">数字沉思</span>
<a class="tag" taget="_blank" href="/search/%E8%90%A5%E9%94%80/1.htm">营销</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E9%87%8F%E8%BF%90%E8%90%A5/1.htm">流量运营</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AE%B9%E8%BF%90%E8%90%A5/1.htm">内容运营</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a>
<div>引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信</div>
</li>
<li><a href="/article/1835154546289111040.htm"
title="EcmaScript和JavaScript的区别" target="_blank">EcmaScript和JavaScript的区别</a>
<span class="text-muted">每天吃八顿</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，</div>
</li>
<li><a href="/article/1835137656992919552.htm"
title="javascript添加p元素，html添加文字，appendChild" target="_blank">javascript添加p元素，html添加文字，appendChild</a>
<span class="text-muted">游勇一</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html%E6%B7%BB%E5%8A%A0p/1.htm">html添加p</a><a class="tag" taget="_blank" href="/search/appendChild/1.htm">appendChild</a>
<div>javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}</div>
</li>
<li><a href="/article/1835136018660028416.htm"
title="CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制" target="_blank">CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制</a>
<span class="text-muted">SteveJi666</span>
<a class="tag" taget="_blank" href="/search/WebGL/1.htm">WebGL</a><a class="tag" taget="_blank" href="/search/cesium/1.htm">cesium</a><a class="tag" taget="_blank" href="/search/EarthSDK/1.htm">EarthSDK</a><a class="tag" taget="_blank" href="/search/SuperMap/1.htm">SuperMap</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a>
<div>版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap</div>
</li>
<li><a href="/article/1835131605585326080.htm"
title="html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示" target="_blank">html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示</a>
<span class="text-muted">睿理</span>
<div>html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以</div>
</li>
<li><a href="/article/1835131225128398848.htm"
title="如何在 Python 中声明一个静态属性?" target="_blank">如何在 Python 中声明一个静态属性?</a>
<span class="text-muted">潮易</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla</div>
</li>
<li><a href="/article/1835125415920889856.htm"
title="数据格式：什么是JSON和XML" target="_blank">数据格式：什么是JSON和XML</a>
<span class="text-muted">isNotNullX</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
<div>JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是</div>
</li>
<li><a href="/article/1835118231979913216.htm"
title="HighCharts图表自动化简介" target="_blank">HighCharts图表自动化简介</a>
<span class="text-muted">知识的宝藏</span>
<a class="tag" taget="_blank" href="/search/Selenium%E9%AB%98%E7%BA%A7%E7%AF%87/1.htm">Selenium高级篇</a><a class="tag" taget="_blank" href="/search/Selenium%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">Selenium图表自动化测试</a><a class="tag" taget="_blank" href="/search/highcharts%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">highcharts图表自动化</a><a class="tag" taget="_blank" href="/search/Selenium%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">Selenium图表自动化</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">图表自动化测试</a><a class="tag" taget="_blank" href="/search/highcharts/1.htm">highcharts</a><a class="tag" taget="_blank" href="/search/Selenium/1.htm">Selenium</a>
<div>什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互</div>
</li>
<li><a href="/article/51.htm"
title="mondb入手" target="_blank">mondb入手</a>
<span class="text-muted">木zi_鸣</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
<div>windows 启动mongodb 编写bat文件，
mongod --dbpath D:\software\MongoDBDATA
mongod --help 查询各种配置
配置在mongob
打开批处理，即可启动，27017原生端口，shell操作监控端口 扩展28017，web端操作端口
启动配置文件配置，
数据更灵活 </div>
</li>
<li><a href="/article/178.htm"
title="大型高并发高负载网站的系统架构" target="_blank">大型高并发高负载网站的系统架构</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E9%AB%98%E5%B9%B6%E5%8F%91/1.htm">高并发</a><a class="tag" taget="_blank" href="/search/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/1.htm">负载均衡</a>
<div> 扩展Web应用程序
一.概念
简单的来说，如果一个系统可扩展，那么你可以通过扩展来提供系统的性能。这代表着系统能够容纳更高的负载、更大的数据集，并且系统是可维护的。扩展和语言、某项具体的技术都是无关的。扩展可以分为两种：
1.</div>
</li>
<li><a href="/article/305.htm"
title="DISPLAY变量和xhost(原创)" target="_blank">DISPLAY变量和xhost(原创)</a>
<span class="text-muted">czmmiao</span>
<a class="tag" taget="_blank" href="/search/display/1.htm">display</a>
<div>DISPLAY
在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来启动程序, 图形将显示在本地窗口上, 在终端上输入printenv查看当前环境变量, 输出结果中有如下内容:DISPLAY=:0.0</div>
</li>
<li><a href="/article/432.htm"
title="获取B/S客户端IP" target="_blank">获取B/S客户端IP</a>
<span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a>
<div> 最近想写个B/S架构的聊天系统，因为以前做过C/S架构的QQ聊天系统，所以对于Socket通信编程只是一个巩固。对于C/S架构的聊天系统，由于存在客户端Java应用，所以直接在代码中获取客户端的IP，应用的方法为：
String ip = InetAddress.getLocalHost().getHostAddress();
然而对于WEB</div>
</li>
<li><a href="/article/559.htm"
title="浅谈类和对象" target="_blank">浅谈类和对象</a>
<span class="text-muted">朱辉辉33</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a>
<div> 类是对一类事物的总称，对象是描述一个物体的特征，类是对象的抽象。简单来说，类是抽象的，不占用内存，对象是具体的，
占用存储空间。
类是由属性和方法构成的，基本格式是public class 类名{
//定义属性
private/public 数据类型 属性名；
//定义方法
publ</div>
</li>
<li><a href="/article/686.htm"
title="android activity与viewpager+fragment的生命周期问题" target="_blank">android activity与viewpager+fragment的生命周期问题</a>
<span class="text-muted">肆无忌惮_</span>
<a class="tag" taget="_blank" href="/search/viewpager/1.htm">viewpager</a>
<div>有一个Activity里面是ViewPager，ViewPager里面放了两个Fragment。
第一次进入这个Activity。开启了服务，并在onResume方法中绑定服务后，对Service进行了一定的初始化，其中调用了Fragment中的一个属性。
super.onResume();
bindService(intent, conn, BIND_AUTO_CREATE);
</div>
</li>
<li><a href="/article/813.htm"
title="base64Encode对图片进行编码" target="_blank">base64Encode对图片进行编码</a>
<span class="text-muted">843977358</span>
<a class="tag" taget="_blank" href="/search/base64/1.htm">base64</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E7%89%87/1.htm">图片</a><a class="tag" taget="_blank" href="/search/encoder/1.htm">encoder</a>
<div>/**
* 对图片进行base64encoder编码
*
* @author mrZhang
* @param path
* @return
*/
public static String encodeImage(String path) {
BASE64Encoder encoder = null;
byte[] b = null;
I</div>
</li>
<li><a href="/article/940.htm"
title="Request Header简介" target="_blank">Request Header简介</a>
<span class="text-muted">aigo</span>
<a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a>
<div>当一个客户端(通常是浏览器)向Web服务器发送一个请求是，它要发送一个请求的命令行，一般是GET或POST命令，当发送POST命令时，它还必须向服务器发送一个叫“Content-Length”的请求头(Request Header) 用以指明请求数据的长度，除了Content-Length之外，它还可以向服务器发送其它一些Headers，如： </div>
</li>
<li><a href="/article/1067.htm"
title="HttpClient4.3 创建SSL协议的HttpClient对象" target="_blank">HttpClient4.3 创建SSL协议的HttpClient对象</a>
<span class="text-muted">alleni123</span>
<a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a>
<div>public class HttpClientUtils
{
public static CloseableHttpClient createSSLClientDefault(CookieStore cookies){
SSLContext sslContext=null;
try
{
sslContext=new SSLContextBuilder().l</div>
</li>
<li><a href="/article/1194.htm"
title="java取反 -右移-左移-无符号右移的探讨" target="_blank">java取反 -右移-左移-无符号右移的探讨</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97%E7%AC%A6+%E4%BD%8D%E7%A7%BB/1.htm">位运算符 位移</a>
<div>取反：
在二进制中第一位，1表示符数，0表示正数
byte a = -1;
原码：10000001
反码：11111110
补码：11111111
//异或: 00000000
byte b = -2;
原码：10000010
反码：11111101
补码：11111110
//异或: 00000001
</div>
</li>
<li><a href="/article/1321.htm"
title="java多线程join的作用与用法" target="_blank">java多线程join的作用与用法</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a>
<div> 对于JAVA的join，JDK 是这样说的：join public final void join （long millis ）throws InterruptedException Waits at most millis milliseconds for this thread to die. A timeout of 0 means t</div>
</li>
<li><a href="/article/1448.htm"
title="Java发送http请求(get 与post方法请求)" target="_blank">Java发送http请求(get 与post方法请求)</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
<div>PostRequest.java
package com.bijian.study;
import java.io.BufferedReader;
import java.io.DataOutputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURL</div>
</li>
<li><a href="/article/1575.htm"
title="【Struts2二】struts.xml中package下的action配置项默认值" target="_blank">【Struts2二】struts.xml中package下的action配置项默认值</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/struts.xml/1.htm">struts.xml</a>
<div>在第一部份，定义了struts.xml文件，如下所示：
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts</div>
</li>
<li><a href="/article/1702.htm"
title="【Kafka十三】Kafka Simple Consumer" target="_blank">【Kafka十三】Kafka Simple Consumer</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/simple/1.htm">simple</a>
<div>代码中关于Host和Port是割裂开的，这会导致单机环境下的伪分布式Kafka集群环境下，这个例子没法运行。
实际情况是需要将host和port绑定到一起，
package kafka.examples.lowlevel;
import kafka.api.FetchRequest;
import kafka.api.FetchRequestBuilder;
impo</div>
</li>
<li><a href="/article/1829.htm"
title="nodejs学习api" target="_blank">nodejs学习api</a>
<span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nodejs+api/1.htm">nodejs api</a>
<div>NodeJS基础 什么是NodeJS
JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。
每一种解析器都是一个运行环境，不但允许JS定义各种数据结构，进行各种计算，还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了docum</div>
</li>
<li><a href="/article/1956.htm"
title="java-64.寻找第N个丑数" target="_blank">java-64.寻找第N个丑数</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>
public class UglyNumber {
/**
* 64.查找第N个丑数
具体思路可参考 [url] http://zhedahht.blog.163.com/blog/static/2541117420094245366965/[/url]
*
题目：我们把只包含因子
2、3和5的数称作丑数（Ugly Number）。例如6、8都是丑数，但14</div>
</li>
<li><a href="/article/2083.htm"
title="二维数组（矩阵）对角线输出" target="_blank">二维数组（矩阵）对角线输出</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a>
<div>
/**
二维数组 对角线输出 两个方向
例如对于数组：
{ 1, 2, 3, 4 },
{ 5, 6, 7, 8 },
{ 9, 10, 11, 12 },
{ 13, 14, 15, 16 },
slash方向输出：
1
5 2
9 6 3
13 10 7 4
14 11 8
15 12
16
backslash输出：
4
3</div>
</li>
<li><a href="/article/2210.htm"
title="[JWFD开源工作流设计]工作流跳跃模式开发关键点(今日更新)" target="_blank">[JWFD开源工作流设计]工作流跳跃模式开发关键点(今日更新)</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a>
<div> 既然是做开源软件的,我们的宗旨就是给大家分享设计和代码,那么现在我就用很简单扼要的语言来透露这个跳跃模式的设计原理
大家如果用过JWFD的ARC-自动运行控制器,或者看过代码,应该知道在ARC算法模块中有一个函数叫做SAN(),这个函数就是ARC的核心控制器,要实现跳跃模式,在SAN函数中一定要对LN链表数据结构进行操作,首先写一段代码,把</div>
</li>
<li><a href="/article/2337.htm"
title="redis常见使用" target="_blank">redis常见使用</a>
<span class="text-muted">cuityang</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E5%B8%B8%E8%A7%81%E4%BD%BF%E7%94%A8/1.htm">常见使用</a>
<div>redis 通常被认为是一个数据结构服务器，主要是因为其有着丰富的数据结构 strings、map、 list、sets、 sorted sets
引入jar包 jedis-2.1.0.jar (本文下方提供下载)
package redistest;
import redis.clients.jedis.Jedis;
public class Listtest</div>
</li>
<li><a href="/article/2464.htm"
title="配置多个redis" target="_blank">配置多个redis</a>
<span class="text-muted">dalan_123</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a>
<div>配置多个redis客户端
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi=&quo</div>
</li>
<li><a href="/article/2591.htm"
title="attrib命令" target="_blank">attrib命令</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/attr/1.htm">attr</a>
<div>
attrib指令用于修改文件的属性.文件的常见属性有:只读.存档.隐藏和系统.
只读属性是指文件只可以做读的操作.不能对文件进行写的操作.就是文件的写保护.
存档属性是用来标记文件改动的.即在上一次备份后文件有所改动.一些备份软件在备份的时候会只去备份带有存档属性的文件.
</div>
</li>
<li><a href="/article/2718.htm"
title="Yii使用公共函数" target="_blank">Yii使用公共函数</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a>
<div>在网站项目中，没必要把公用的函数写成一个工具类，有时候面向过程其实更方便。 在入口文件index.php里添加 require_once('protected/function.php'); 即可对其引用，成为公用的函数集合。 function.php如下：
<?php /** * This is the shortcut to D</div>
</li>
<li><a href="/article/2845.htm"
title="linux 系统资源的查看（free、uname、uptime、netstat）" target="_blank">linux 系统资源的查看（free、uname、uptime、netstat）</a>
<span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/netstat/1.htm">netstat</a><a class="tag" taget="_blank" href="/search/linux+uname/1.htm">linux uname</a><a class="tag" taget="_blank" href="/search/linux+uptime/1.htm">linux uptime</a><a class="tag" taget="_blank" href="/search/linux+free/1.htm">linux free</a>
<div>linux 系统资源的查看
转载请出自出处：http://eksliang.iteye.com/blog/2167081
http://eksliang.iteye.com 一、free查看内存的使用情况
语法如下：
free [-b][-k][-m][-g] [-t]
参数含义
-b:直接输入free时，显示的单位是kb我们可以使用b(bytes),m</div>
</li>
<li><a href="/article/2972.htm"
title="JAVA的位操作符" target="_blank">JAVA的位操作符</a>
<span class="text-muted">greemranqq</span>
<a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/JAVA%E4%BD%8D%E7%A7%BB/1.htm">JAVA位移</a><a class="tag" taget="_blank" href="/search/%3C%3C/1.htm"><<</a><a class="tag" taget="_blank" href="/search/%3E%3E%3E/1.htm">>>></a>
<div>最近几种进制，加上各种位操作符，发现都比较模糊，不能完全掌握，这里就再熟悉熟悉。
1.按位操作符 ：
按位操作符是用来操作基本数据类型中的单个bit,即二进制位，会对两个参数执行布尔代数运算，获得结果。
与（&）运算：
1&1 = 1, 1&0 = 0, 0&0 &</div>
</li>
<li><a href="/article/3099.htm"
title="Web前段学习网站" target="_blank">Web前段学习网站</a>
<span class="text-muted">ihuning</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a>
<div>
Web前段学习网站
菜鸟学习：http://www.w3cschool.cc/
JQuery中文网：http://www.jquerycn.cn/
内存溢出：http://outofmemory.cn/#csdn.blog
http://www.icoolxue.com/
http://www.jikexue</div>
</li>
<li><a href="/article/3226.htm"
title="强强联合：FluxBB 作者加盟 Flarum" target="_blank">强强联合：FluxBB 作者加盟 Flarum</a>
<span class="text-muted">justjavac</span>
<a class="tag" taget="_blank" href="/search/r/1.htm">r</a>
<div>原文：FluxBB Joins Forces With Flarum作者：Toby Zerner译文：强强联合：FluxBB 作者加盟 Flarum译者：justjavac
FluxBB 是一个快速、轻量级论坛软件，它的开发者是一名德国的 PHP 天才 Franz Liedke。FluxBB 的下一个版本(2.0)将被完全重写，并已经开发了一段时间。FluxBB 看起来非常有前途的，</div>
</li>
<li><a href="/article/3353.htm"
title="java统计在线人数（session存储信息的）" target="_blank">java统计在线人数（session存储信息的）</a>
<span class="text-muted">macroli</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a>
<div>这篇日志是我写的第三次了 前两次都发布失败！郁闷极了！
由于在web开发中常常用到这一部分所以在此记录一下，呵呵，就到备忘录了！
我对于登录信息时使用session存储的，所以我这里是通过实现HttpSessionAttributeListener这个接口完成的。
1、实现接口类，在web.xml文件中配置监听类，从而可以使该类完成其工作。
public class Ses</div>
</li>
<li><a href="/article/3480.htm"
title="bootstrp carousel初体验 快速构建图片播放" target="_blank">bootstrp carousel初体验 快速构建图片播放</a>
<span class="text-muted">qiaolevip</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a>
<div>img{
border: 1px solid white;
box-shadow: 2px 2px 12px #333;
_width: expression(this.width > 600 ? "600px" : this.width + "px");
_height: expression(this.width &</div>
</li>
<li><a href="/article/3607.htm"
title="SparkSQL读取HBase数据，通过自定义外部数据源" target="_blank">SparkSQL读取HBase数据，通过自定义外部数据源</a>
<span class="text-muted">superlxw1234</span>
<a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a><a class="tag" taget="_blank" href="/search/sparksql/1.htm">sparksql</a><a class="tag" taget="_blank" href="/search/sparksql%E8%AF%BB%E5%8F%96hbase/1.htm">sparksql读取hbase</a><a class="tag" taget="_blank" href="/search/sparksql%E5%A4%96%E9%83%A8%E6%95%B0%E6%8D%AE%E6%BA%90/1.htm">sparksql外部数据源</a>
<div>关键字：SparkSQL读取HBase、SparkSQL自定义外部数据源
前面文章介绍了SparSQL通过Hive操作HBase表。
SparkSQL从1.2开始支持自定义外部数据源(External DataSource)，这样就可以通过API接口来实现自己的外部数据源。这里基于Spark1.4.0，简单介绍SparkSQL自定义外部数据源，访</div>
</li>
<li><a href="/article/3734.htm"
title="Spring Boot 1.3.0.M1发布" target="_blank">Spring Boot 1.3.0.M1发布</a>
<span class="text-muted">wiselyman</span>
<a class="tag" taget="_blank" href="/search/spring+boot/1.htm">spring boot</a>
<div> Spring Boot 1.3.0.M1于6.12日发布，现在可以从Spring milestone repository下载。这个版本是基于Spring Framework 4.2.0.RC1,并在Spring Boot 1.2之上提供了大量的新特性improvements and new features。主要包含以下：
1.提供一个新的sprin</div>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="container">
<div class="indexes">
<strong>按字母分类：</strong>
<a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
</div>
</div>
</div>
<footer id="footer" class="mb30 mt30">
<div class="container">
<div class="footBglm">
<a target="_blank" href="/">首页</a> -
<a target="_blank" href="/custom/about.htm">关于我们</a> -
<a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
<a target="_blank" href="/sitemap.txt">Sitemap</a> -
<a target="_blank" href="/custom/delete.htm">侵权投诉</a>
</div>
<div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
</div>
</div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>
</body>
</html>
