使用NPM模块创建一个Meteor应用
与版本0.6.0流星引入了NPM支持。但是完整的NPM支持只适用于流星包。只有流星使用的核心NPM模块才能从流星应用中加载。这意味着如果你需要使用像redis, github或winston这样的NPM模块，你就不走运了。但它是不是不可能。
最近，我想到了一个在流星中使用NPM的更聪明的方式。它被捆绑成一个智能包，非常容易使用。
在本教程中，我将指导您使用以下命令创建Github Issue Search应用程序githubNPM模块。我将一步一步地讲解如何构建它。但我想你应该很了解流星和陨石。
您可以看到实时应用程序http://gh-search.meteor.com代码是托管在github上。
创建应用程序
让我们创建应用程序。
MRT添加引导我们不需要流星自动创建的文件，因此请确保删除以下文件。
高问题-搜索让我们添加NPM支持
对于本教程，我们将使用githubNPM模块，它将被添加如下所示。
安装npm来自大气层的智能包裹。
MRT添加NPM创建packages.json文件放在项目根目录下，并添加以下内容。
{"github": "0.1.10"}packages.json是我们定义要加载的NPM模块的文件。在声明版本时，请确保设置绝对版本号。类似的0.1.x在Meteor中不起作用。
编写Meteor客户端
创建一个文件夹客户端并添加以下HTML和CSS文件。我们不太担心这些文件，因为我们的重点是与NPM模块一起工作。
文件:客户机/ home
Github - Search</ title> </head> <body> {{> home}} <div style="text-align:center;margin-bottom:5px;"><form action="http://www.baidu.com/baidu" target="_blank"><div bgcolor="#FFFFFF" style="text-align:center;"><input name="tn" type="hidden" value="baidu"><a href="http://www.baidu.com/"><img src="http://img.baidu.com/img/logo-80px.gif" width="80px" height="29px" alt="Baidu" align="bottom" border="0"></a><input type="text" name="word" size="30" placeholder="" value=""><input type="submit" value="百度搜索"></div></form></div><div id="so360" style="text-align:center;margin-bottom:5px;"><form action="https://www.so.com/" target="_blank" id="so360form"><img src="http://p1.qhimg.com/d/_onebox/search.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="so360_keyword" placeholder="" value=""> <input type="submit" id="so360_submit" value="360搜索"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div id="sogou" style="text-align:center;margin-bottom:5px;"><form action="https://www.sogou.com/" target="_blank" id="so360form"><img src="https://www.sogou.com/web/index/images/logo_440x140.v.4.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="sogou.com_keyword" placeholder="" value=""> <input type="submit" id="sogou_submit" value="搜 狗"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div></body> <模板名称="home"> <div class= " container ">< h1>Github Issue Search</h1><br> <输入类型="text" id= " user "占位符="Enter repo name "占位符="Enter repo name "值="meteor" b> <输入类型="text" id= " repo "占位符="Enter repo name "值="meteor"> <br> <输入类型="text" id= " keyword "占位符="Enter Search keyword "><br> <button id= " Search " class= " btn btn-info ">现在搜索</button> <hr/> {{> results}} </div> </template> <模板name = '结果' >{{#用错误}}< div class = '警告' >{{原因}}< / div >{{和}}{{#每个结果}}< div class = '结果' > < a href = ' {{html_url}} ' target =‘平等’>{{标题}}< / > < / div >{{/每个}}> < /模板</code></pre>
<h4>文件:客户机/ main.css</h4>
<pre><code>H1 {margin-top: 30px;} .result {padding: 10px 0px 10px 10px;边距:5px 0px 5px 0px;Border-left: 5px solid rgb(200,200,200);字体大小:16 px;｝</code></pre>
<h4>文件:客户机/ helpers.js</h4>
<pre><code>Template.results。helpers({"results": function(){返回Session.get("results") || [];}， "error": function(){返回Session.get('error');}});</code></pre>
<p>搜索结果和错误将通过会话变量呈现在模板中。我们所要做的就是设置会话变量，UI将相应地改变。</p>
<div class="proper-ad-unit">
<div id="proper-ad-sitepoint_content_2" class="sitepoint_content"></div>
</div>
<h2>实现搜索</h2>
<p>这就是我们将如何实现搜索。</p>
<ul>
<li>我们将搜索作为一个Meteor方法来实现。</li>
<li>Npm github模块将用于执行实际搜索。</li>
<li>搜索请求的详细信息(用户、存储库、搜索关键字)将从客户端发送到Meteor方法<code>Meteor.call</code></li>
<li>方法的结果(或错误)将在<code>Meteor.call</code>它将被设置为正确的会话变量。</li>
</ul>
<h3>监听按钮单击事件</h3>
<p>我们将监听按钮点击事件文本字段值将被发送到方法<code>搜索</code>。</p>
<h4>文件:/客户/ events.js</h4>
<pre><code>Template.home。事件({“点击#搜索”:函数(){会话。设置(“错误”,null);会话。设置(“结果”,null);Var user = $('#user').val();Var repo = $('#repo').val();Var keyword = $('#keyword').val();$(" #搜索”). html(“搜索…”);Meteor.call('search', user, repo, keyword, function(err, results) { console.log(results); $('#search').html('Search Now'); if(err) { Session.set('error', err); } else { Session.set('results', results.issues); } }); } });</code></pre>
<h3>使用npm模块</h3>
<p>现在是时候在服务器中实现我们的方法了。让我们创建一个名为<code>服务器</code>并添加我们的方法，如下所示。</p>
<h4>文件:服务器/ methods.js</h4>
<pre><code>### CodeBlock: 1流星。methods({"search": function(user, repo, keyword) {### CodeBlock: 2}});</code></pre>
<blockquote>
<p>标记为的地方<code>CodeBlock: x</code>将被替换为以下代码。</p>
</blockquote>
<p>首先，让我们加载NPM模块。加载NPM模块通常是<code>Npm.require ()</code>。中定义的模块<code>packages.json</code>你需要使用<code>Meteor.require ()</code>代替。</p>
<p>让我们加载Github模块<code>CodeBlock: 1</code></p>
<pre><code>var Github = Meteor.require(' Github ');var github = new github ({version: "3.0.0"});</code></pre>
<h4>让我们使用github npm模块进行搜索</h4>
<p>但是等一下。NPM模块工作<strong>异步</strong>，但是Meteor方法可以工作<strong>同步</strong>。他们在一起玩得不好。</p>
<p>然而,<code>npm</code>Smart package引入了另一个有用的方法<code>Meteor.sync</code>这就解决了问题。让我们看看它是如何工作的。</p>
<p>此代码将添加到<code>CodeBlock: 2</code>。</p>
<pre><code>//这是搜索请求对象(由我们的github npm模块接受)var searchRequest = {user: user, repo: repo, keyword: keyword, state: 'open'};//执行暂停，直到done()回调被调用。var repos = Meteor.sync(函数(完成){github.search。issues(searchRequest, function(err, searchResults) {done(err, searchResults);});});if(rerepository .error){抛出新的流星。错误(401年,repos.error.message);} else{返回rest .result;｝</code></pre>
<p><code>Meteor.sync ()</code>将暂停流星方法的执行，直到<code>(完成)</code>回调被触发。现在我们可以安全地在里面执行任何异步任务了<code>Meteor.sync</code>。</p>
<p>得到结果(或错误)后，可以通过调用<code>完成</code>回调。</p>
<p><code>(完成)</code>接受第一个参数作为错误对象，并接受第二个参数作为结果。然后将这些值作为的返回值发送给Meteor方法<code>Meteor.sync ()</code></p>
<p>返回值被封装到一个对象中，如下所示。</p>
<pre><code>{error: {error: "object"}， result: "resultValue"}</code></pre>
<p>代码的另一部分不言自明。</p>
<p>下面是我们的最终代码。</p>
<pre><code>var Github = Meteor.require(' Github ');var github = new github ({version: "3.0.0"});流星。method ({"search": function(user, repo, keyword) {var searchRequest = {user: user, repo: repo, keyword: keyword, state: 'open'};//执行暂停，直到done()回调被调用。var repos = Meteor.sync(函数(完成){github.search。issues(searchRequest, function(err, searchResults) {done(err, searchResults);});});if(rerepository .error){抛出新的流星。错误(401年,repos.error.message); } else { return repos.result; } } });</code></pre>
<div class="custom-content"></div>
<h2>Showtime</h2>
<p>让我们运行应用程序<code>捷运</code>和<code>http://localhost:3000</code>。托管版本可以在<a href="http://gh-search.meteor.com/">http://gh-search.meteor.com</a>。</p>
<p>如果遇到任何错误，请尝试将其与<a href="https://github.com/arunoda/github-issue-search">github回购</a>。</p>
<div class="proper-ad-unit">
<div id="proper-ad-sitepoint_content_3" class="sitepoint_content"></div>
</div>
<h2>NPM模块并不局限于方法</h2>
<p>我们可以在服务器的任何地方使用npm模块。当然，您可以在出版物、权限以及<code>Meteor.sync</code>。</p>
<p>如果你不需要同步行为，只需要使用没有同步行为的NPM模块<code>Meteor.sync</code>。没人能阻止你这么做。</p>
<p>我个人认为这对Meteor来说是一个很好的机会。从技术上讲，有30,000多个NPM模块等待与Meteor一起使用。</p>
<p>这是很大的潜力。</p>
</div>
<aside class="flex space-x-4">
<h2 class="text-lg my-2 mr-2">分享这篇文章</h2>
<button aria-label="Share Sitepoint on facebook" data-network="facebook" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-primary-700">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="svg-inline--fa fa-facebook-square fa-w-14 fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
<path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path>
</svg></button>
<button aria-label="Share Sitepoint on reddit" data-network="reddit" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-primary-700">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="reddit" class="svg-inline--fa fa-reddit fa-w-16 fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
<path fill="currentColor" d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"></path>
</svg></button>
<button aria-label="Share Sitepoint on twitter" data-network="twitter" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-primary-700">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter-square" class="svg-inline--fa fa-twitter-square fa-w-14 fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
<path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path>
</svg></button>
<button aria-label="Share Sitepoint on linkedin" data-network="linkedin" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-primary-700">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-w-14 fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
<path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path>
</svg></button>
<button aria-label="Share Sitepoint on email" data-network="email" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-primary-700">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16 fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
<path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path>
</svg></button>
</aside>
</section>
<aside class="mx-auto mb-7 w-full space-y-8 sm:px-4">
<div class="border-2 border-gray-200 py-2 px-5 space-y-8">
<address class="flex flex-row space-x-4 my-4 mx-auto not-italic"><a class="flex-shrink-0 h-20 w-20" href="//www.shaoxingby.com/author/asusiripala/"><img class="h-full w-full object-cover rounded-full" src="https://secure.gravatar.com/avatar/ab13df38843556b57f7d2f6fe78003cf?s=96&" alt="Arunoda Susiripala" loading="lazy"></a>
<div>
<a class="font-bold transition-colors text-body hover:text-gray-400" href="//www.shaoxingby.com/author/asusiripala/">Arunoda Susiripala</a>
<p class="mb-0">Arunoda Susiripala是一名NodeJS顾问，在服务器端技术方面经验丰富，最近爱上了Meteor。</p>
<ul class="space-x-4 my-1">
<a href="https://www.facebook.com/arunoda.susiripala" rel="noreferrer noopener" target="_blank" aria-label="Arunoda Susiripala's facebook account" class="text-body">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="svg-inline--fa fa-facebook-square fa-w-14 fa-lg cursor-pointer transform transition duration-200 hover:scale-125" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
<path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path>
</svg></a>
<a href="http://lk.linkedin.com/in/arunoda" rel="noreferrer noopener" target="_blank" aria-label="Arunoda Susiripala's linkedin account" class="text-body">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-w-14 fa-lg cursor-pointer transform transition duration-200 hover:scale-125" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
<path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path>
</svg></a>
<a href="https://twitter.com/arunoda" rel="noreferrer noopener" target="_blank" aria-label="Arunoda Susiripala's twitter account" class="text-body">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter-square" class="svg-inline--fa fa-twitter-square fa-w-14 fa-lg cursor-pointer transform transition duration-200 hover:scale-125" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
<path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path>
</svg></a>
</ul>
</div></address>
</div>
</aside>
</div>
<div aria-label="Article sidebar" class="s27361g">
<div class="flex my-4" id="book_top">
<div class="mx-auto">
<a href="//www.shaoxingby.com/premium/books/javascript-novice-to-ninja-2nd-edition/?from=bookshelf" class="relative">
<div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained rounded h-40 w-32">
<div style="max-width:300px;display:block">
<img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='394' width='300' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static">
</div>
<div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#4e81ae;position:absolute;top:0;left:0;bottom:0;right:0"></div>
<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 300px) 300px, 100vw" decoding="async" loading="lazy" data-src="https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=300&h=394&auto=format" data-srcset="https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=300&h=394&auto=format 300w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,1,1126,1478&w=320&h=420&auto=format 320w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=654&h=859&auto=format 654w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=768&h=1009&auto=format 768w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=1024&h=1345&auto=format 1024w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=1126&h=1479&auto=format 1126w" alt="JavaScript:新手到忍者，第二版">
<noscript>
<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 300px) 300px, 100vw" decoding="async" loading="lazy" src="https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=300&h=394&auto=format" srcSet="https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=300&h=394&auto=format 300w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,1,1126,1478&w=320&h=420&auto=format 320w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=654&h=859&auto=format 654w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=768&h=1009&auto=format 768w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=1024&h=1345&auto=format 1024w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=1126&h=1479&auto=format 1126w" alt="JavaScript:新手到忍者，第二版">
</noscript>
</div></a>
</div>
</div>
<aside data-type="books_new" class="s3srsdt">
<div id="ad_undefined" data-type="books_new" class="proper-ad-unit a19jghoq" style="--a19jghoq-0:250px"></div>
<div></div>
</aside>
<aside data-type="no_fallback" class="s3srsdt">
<div id="ad_undefined" data-type="no_fallback" class="proper-ad-unit a19jghoq" style="--a19jghoq-0:250px"></div>
<div></div>
</aside>
<aside data-type="no_fallback" class="s3srsdt">
<div id="ad_undefined" data-type="no_fallback" class="proper-ad-unit a19jghoq" style="--a19jghoq-0:250px"></div>
<div></div>
</aside>
<aside data-type="no_fallback" class="s3srsdt">
<div id="ad_undefined" data-type="no_fallback" class="proper-ad-unit a19jghoq" style="--a19jghoq-0:250px"></div>
<div></div>
</aside>
<aside data-type="sticky" class="s3srsdt">
<div id="ad_undefined" data-type="sticky" class="proper-ad-unit a19jghoq" style="--a19jghoq-0:0px"></div>
<div></div>
</aside>
<section id="bookshelf" class="sticky top-12 lg:top-14 flex flex-col hidden">
<div class="flex my-4" id="book_0">
<div class="mx-auto">
<a href="//www.shaoxingby.com/premium/books/javascript-novice-to-ninja-2nd-edition/?from=bookshelf" class="relative">
<div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained rounded h-40 w-32">
<div style="max-width:300px;display:block">
<img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='394' width='300' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static">
</div>
<div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#4e81ae;position:absolute;top:0;left:0;bottom:0;right:0"></div>
<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 300px) 300px, 100vw" decoding="async" loading="lazy" data-src="https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=300&h=394&auto=format" data-srcset="https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=300&h=394&auto=format 300w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,1,1126,1478&w=320&h=420&auto=format 320w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=654&h=859&auto=format 654w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=768&h=1009&auto=format 768w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=1024&h=1345&auto=format 1024w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=1126&h=1479&auto=format 1126w" alt="JavaScript:新手到忍者，第二版">
<noscript>
<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 300px) 300px, 100vw" decoding="async" loading="lazy" src="https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=300&h=394&auto=format" srcSet="https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=300&h=394&auto=format 300w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,1,1126,1478&w=320&h=420&auto=format 320w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=654&h=859&auto=format 654w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=768&h=1009&auto=format 768w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=1024&h=1345&auto=format 1024w,https://cdn.sanity.io/images/708bnrs8/production/078f1bf4e5ab1dfc95e5b4b06128c961c8278f06-1126x1480.png?rect=0,0,1126,1479&w=1126&h=1479&auto=format 1126w" alt="JavaScript:新手到忍者，第二版">
</noscript>
</div></a>
</div>
</div>
<div class="flex my-4" id="book_1">
<div class="mx-auto">
<a href="//www.shaoxingby.com/premium/books/javascript-the-new-toys/?from=bookshelf" class="relative">
<div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained rounded h-40 w-32">
<div style="max-width:300px;display:block">
<img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='376' width='300' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static">
</div>
<div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#808080;position:absolute;top:0;left:0;bottom:0;right:0"></div>
<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 300px) 300px, 100vw" decoding="async" loading="lazy" data-src="https://cdn.sanity.io/images/708bnrs8/production/291022b2ff58d8a065fcb1ff7ad016f0ee28e6f9-399x500.jpg?w=300&h=376&auto=format" data-srcset="https://cdn.sanity.io/images/708bnrs8/production/291022b2ff58d8a065fcb1ff7ad016f0ee28e6f9-399x500.jpg?w=300&h=376&auto=format 300w,https://cdn.sanity.io/images/708bnrs8/production/291022b2ff58d8a065fcb1ff7ad016f0ee28e6f9-399x500.jpg?w=320&h=401&auto=format 320w,https://cdn.sanity.io/images/708bnrs8/production/291022b2ff58d8a065fcb1ff7ad016f0ee28e6f9-399x500.jpg?w=399&h=500&auto=format 399w" alt="JavaScript:新玩具">
<noscript>
<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 300px) 300px, 100vw" decoding="async" loading="lazy" src="https://cdn.sanity.io/images/708bnrs8/production/291022b2ff58d8a065fcb1ff7ad016f0ee28e6f9-399x500.jpg?w=300&h=376&auto=format" srcSet="https://cdn.sanity.io/images/708bnrs8/production/291022b2ff58d8a065fcb1ff7ad016f0ee28e6f9-399x500.jpg?w=300&h=376&auto=format 300w,https://cdn.sanity.io/images/708bnrs8/production/291022b2ff58d8a065fcb1ff7ad016f0ee28e6f9-399x500.jpg?w=320&h=401&auto=format 320w,https://cdn.sanity.io/images/708bnrs8/production/291022b2ff58d8a065fcb1ff7ad016f0ee28e6f9-399x500.jpg?w=399&h=500&auto=format 399w" alt="JavaScript:新玩具">
</noscript>
</div></a>
</div>
</div>
<div class="flex my-4" id="book_2">
<div class="mx-auto">
<a href="//www.shaoxingby.com/premium/books/learn-to-code-with-javascript/?from=bookshelf" class="relative">
<div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained rounded h-40 w-32">
<div style="max-width:300px;display:block">
<img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='376' width='300' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static">
</div>
<div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#5c3c7c;position:absolute;top:0;left:0;bottom:0;right:0"></div>
<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 162px) 162px, 100vw" decoding="async" loading="lazy" data-src="https://cdn.sanity.io/images/708bnrs8/production/4222480df58aa70362faeba23b05edff695de1ff-162x203.png?w=162&h=203&auto=format" data-srcset="https://cdn.sanity.io/images/708bnrs8/production/4222480df58aa70362faeba23b05edff695de1ff-162x203.png?w=162&h=203&auto=format 162w" alt="学习使用JavaScript编写代码">
<noscript>
<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 162px) 162px, 100vw" decoding="async" loading="lazy" src="https://cdn.sanity.io/images/708bnrs8/production/4222480df58aa70362faeba23b05edff695de1ff-162x203.png?w=162&h=203&auto=format" srcSet="https://cdn.sanity.io/images/708bnrs8/production/4222480df58aa70362faeba23b05edff695de1ff-162x203.png?w=162&h=203&auto=format 162w" alt="学习使用JavaScript编写代码">
</noscript>
</div></a>
</div>
</div>
</section>
</div>
</div>
</div>
<aside class="mx-6 mb-6">
<h2 class="font-bold text-2xl">下一个</h2>
<div class="grid grid-flow-row gap-4 m-4 md:grid-cols-2 md:grid-rows-3 lg:grid-cols-3 lg:grid-rows-2">
<article class="flex flex-row p-2">
<a class="flex-shrink-0 h-20 w-20" href="//www.shaoxingby.com/npm-guide/"><img class="h-full w-full object-cover" src="https://uploads.sitepoint.com/wp-content/uploads/2019/04/1583709471npm.png" loading="lazy" alt="Node包管理器指南:安装npm +使用命令和模块"></a>
<div class="ml-3 flex flex-col space-y-1">
<a class="text-base font-bold text-black hover:text-gray-400" href="//www.shaoxingby.com/npm-guide/">Node包管理器指南:安装npm +使用命令和模块</a>
<a class="text-sm text-gray-400" href="//www.shaoxingby.com/author/mwanyoike/">Michael Wanyoike, Peter Dierx</a>
</div>
</article>
<article class="flex flex-row p-2">
<a class="flex-shrink-0 h-20 w-20" href="//www.shaoxingby.com/building-multiplayer-tictactoe-game-with-meteor/"><img class="h-full w-full object-cover" src="https://uploads.sitepoint.com/wp-content/uploads/2017/08/1502835854toys-2561392_1280.jpg" loading="lazy" alt="用流星创建多人TicTacToe游戏"></a>
<div class="ml-3 flex flex-col space-y-1">
<a class="text-base font-bold text-black hover:text-gray-400" href="//www.shaoxingby.com/building-multiplayer-tictactoe-game-with-meteor/">用流星创建多人TicTacToe游戏</a>
<a class="text-sm text-gray-400" href="//www.shaoxingby.com/author/porac/">Beardscript</a>
</div>
</article>
<article class="flex flex-row p-2">
<a class="flex-shrink-0 h-20 w-20" href="//www.shaoxingby.com/creating-custom-login-registration-form-with-meteor/"><img class="h-full w-full object-cover" src="https://uploads.sitepoint.com/wp-content/uploads/2016/06/1466567385sp.svg" loading="lazy" alt="使用Meteor创建自定义登录和注册表单"></a>
<div class="ml-3 flex flex-col space-y-1">
<a class="text-base font-bold text-black hover:text-gray-400" href="//www.shaoxingby.com/creating-custom-login-registration-form-with-meteor/">使用Meteor创建自定义登录和注册表单</a>
<a class="text-sm text-gray-400" href="//www.shaoxingby.com/author/dturnbull/">大卫·特恩布尔</a>
</div>
</article>
<article class="flex flex-row p-2">
<a class="flex-shrink-0 h-20 w-20" href="//www.shaoxingby.com/9-ways-meteor-1-0-will-take-world/"><img class="h-full w-full object-cover" src="https://uploads.sitepoint.com/wp-content/uploads/2016/06/1466567385sp.svg" loading="lazy" alt="流星1.0将带你离开这个世界的9种方式"></a>
<div class="ml-3 flex flex-col space-y-1">
<a class="text-base font-bold text-black hover:text-gray-400" href="//www.shaoxingby.com/9-ways-meteor-1-0-will-take-world/">流星1.0将带你离开这个世界的9种方式</a>
<a class="text-sm text-gray-400" href="//www.shaoxingby.com/author/cburkett/">席亚拉事实</a>
</div>
</article>
<article class="flex flex-row p-2">
<a class="flex-shrink-0 h-20 w-20" href="//www.shaoxingby.com/need-know-meteor-1-0/"><img class="h-full w-full object-cover" src="https://uploads.sitepoint.com/wp-content/uploads/2016/06/1466567385sp.svg" loading="lazy" alt="关于Meteor 1.0你需要知道什么"></a>
<div class="ml-3 flex flex-col space-y-1">
<a class="text-base font-bold text-black hover:text-gray-400" href="//www.shaoxingby.com/need-know-meteor-1-0/">关于Meteor 1.0你需要知道什么</a>
<a class="text-sm text-gray-400" href="//www.shaoxingby.com/author/dturnbull/">大卫·特恩布尔</a>
</div>
</article>
<article class="flex flex-row p-2">
<a class="flex-shrink-0 h-20 w-20" href="//www.shaoxingby.com/7-reasons-develop-next-web-app-meteor/"><img class="h-full w-full object-cover" src="https://uploads.sitepoint.com/wp-content/uploads/2016/06/1466567385sp.svg" loading="lazy" alt="使用Meteor开发下一个Web应用的7个原因"></a>
<div class="ml-3 flex flex-col space-y-1">
<a class="text-base font-bold text-black hover:text-gray-400" href="//www.shaoxingby.com/7-reasons-develop-next-web-app-meteor/">使用Meteor开发下一个Web应用的7个原因</a>
<a class="text-sm text-gray-400" href="//www.shaoxingby.com/author/dturnbull/">大卫·特恩布尔</a>
</div>
</article>
</div>
</aside>
</article>
</main>
<footer class="syzew71">
<nav aria-label="Footer navigation">
<div class="crfuex9">
<div class="footer-links">
<ul>
<li><h2>我们做的事情</h2></li>
<li><a href="//www.shaoxingby.com/premium/library/">溢价</a></li>
<li><a href="//www.shaoxingby.com/newsletters/">时事通讯</a></li>
<li><a href="//www.shaoxingby.com/community/">论坛</a></li>
</ul>
<ul>
<li><h2>关于</h2></li>
<li><a href="//www.shaoxingby.com/about-us/">我们的故事</a></li>
<li><a href="//www.shaoxingby.com/legals/">使用条款</a></li>
<li><a href="//www.shaoxingby.com/privacy-policy/">隐私政策</a></li>
<li><a href="https://sitepoint.typeform.com/to/fNY7XG">企业会员</a></li>
</ul>
<ul>
<li><h2>联系</h2></li>
<li><a href="//www.shaoxingby.com/contact-us/">联系我们</a></li>
<li><a href="//www.shaoxingby.com/support/hc/en-us">常见问题解答</a></li>
<li><a href="https://sitepoint.typeform.com/to/HtAXVN">和我们一起出版你的书</a></li>
<li><a href="//www.shaoxingby.com/write-for-us/">为我们写一篇文章</a></li>
<li><a href="//www.shaoxingby.com/advertise/" target="_blank">做广告</a></li>
</ul>
</div>
<div class="s1no14m2"></div>
<div class="footer-extra">
<ul>
<li><h2>连接</h2></li>
<li><a href="https://www.facebook.com/sitepoint" rel="noopener noreferrer" target="_blank" aria-label="See sitepoint facebook account">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="svg-inline--fa fa-facebook-square fa-w-14 fa-lg " role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
<path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path>
</svg></a><a href="https://twitter.com/sitepointdotcom" rel="noopener noreferrer" target="_blank" aria-label="See sitepoint twitter account">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter-square" class="svg-inline--fa fa-twitter-square fa-w-14 fa-lg " role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
<path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path>
</svg></a><a href="//www.shaoxingby.com/feed/" rel="noopener noreferrer" target="_blank" aria-label="See sitepoint RSS feed">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="rss-square" class="svg-inline--fa fa-rss-square fa-w-14 fa-lg " role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
<path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634-5.214-80.05-69.243-143.92-149.123-149.123-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425 110.546 5.974 198.997 94.536 204.964 204.964.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432 167.83 6.025 302.21 141.191 308.205 308.205.232 6.449-4.978 11.787-11.432 11.787z"></path>
</svg></a></li>
</ul>
<div>
<p>©2000 -<!-- -->2023<!-- -->betway必威下载</p>
<p class="recaptcha-branding">本网站受reCAPTCHA和谷歌保护<a href="https://policies.google.com/privacy">隐私政策</a>和<a href="https://policies.google.com/terms">服务条款</a>适用。</p>
</div>
</div>
</div>
</nav>
</footer>
</div>
<div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div>
</div>
<div style="text-align:center;margin-bottom:5px;"><form action="http://www.baidu.com/baidu" target="_blank"><div bgcolor="#FFFFFF" style="text-align:center;"><input name="tn" type="hidden" value="baidu"><a href="http://www.baidu.com/"><img src="http://img.baidu.com/img/logo-80px.gif" width="80px" height="29px" alt="Baidu" align="bottom" border="0"></a><input type="text" name="word" size="30" placeholder="" value=""><input type="submit" value="百度搜索"></div></form></div><div id="so360" style="text-align:center;margin-bottom:5px;"><form action="https://www.so.com/" target="_blank" id="so360form"><img src="http://p1.qhimg.com/d/_onebox/search.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="so360_keyword" placeholder="" value=""> <input type="submit" id="so360_submit" value="360搜索"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div id="sogou" style="text-align:center;margin-bottom:5px;"><form action="https://www.sogou.com/" target="_blank" id="so360form"><img src="https://www.sogou.com/web/index/images/logo_440x140.v.4.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="sogou.com_keyword" placeholder="" value=""> <input type="submit" id="sogou_submit" value="搜 狗"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div></body>
</html>