胡子大哈
胡子大哈

React.js 小书 Lesson8 - 组件的组合、嵌套和组件树

React.js 小书 Lesson8 - 组件的组合、嵌套和组件树

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson8

转载请注明出处，保留原文链接以及作者信息

在线阅读：http://huziketang.com/books/react

继续拓展前面的例子，现在我们已经有了 Header 组件了。假设我们现在构建一个新的组件叫 Title，它专门负责显示标题。你可以在 Header 里面使用 Title组件：

class Title extends Component {
  render () {
    return (
      
React 小书

    )
  }
}

class Header extends Component {
  render () {
    return (
      

        
      </div>
    )
  }
}</code></pre> 
 <p>我们可以直接在 <code>Header</code> 标签里面直接使用 <code>Title</code> 标签。就像是一个普通的标签一样。React.js 会在 <code><Title /></code> 所在的地方把 <code>Title</code> 组件的 <code>render</code> 方法表示的 JSX 内容渲染出来，也就是说 <code><h1>React 小书</h1></code> 会显示在相应的位置上。如果现在我们在 <code>Header</code> 里面使用三个 <code><Title /></code> ，那么就会有三个 <code><h1 /></code> 显示在页面上。</p> 
 <pre><code class="html"><div>
  <Title />
  <Title />
  <Title />
</div></code></pre> 
 <p>这样可复用性非常强，我们可以把组件的内容封装好，然后灵活在使用在任何组件内。另外这里要注意的是，<em>自定义的组件都必须要用大写字母开头，普通的 HTML 标签都用小写字母开头</em>。</p> 
 <p>现在让组件多起来。我们来构建额外的组件来构建页面，假设页面是由 <code>Header</code> 、<code>Main</code> 、<code>Footer</code> 几个部分组成，由一个 <code>Index</code> 把它们组合起来。</p> 
 <pre><code class="javascript">import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Title extends Component {
  render () {
    return (
      <h1>React 小书</h1>
    )
  }
}

class Header extends Component {
  render () {
    return (
    <div>
      <Title />
      <h2>This is Header</h2>
    </div>
    )
  }
}

class Main extends Component {
  render () {
    return (
    <div>
      <h2>This is main content</h2>
    </div>
    )
  }
}

class Footer extends Component {
  render () {
    return (
    <div>
      <h2>This is footer</h2>
    </div>
    )
  }
}

class Index extends Component {
  render () {
    return (
      <div>
        <Header />
        <Main />
        <Footer />
      </div>
    )
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)</code></pre> 
 <p>最后页面会显示内容：</p> 
 <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/06e392ff9ee6411cb0ecedacac38bfd7.jpg" target="_blank"><img alt="React.js 小书 Lesson8 - 组件的组合、嵌套和组件树_第1张图片" title="示例图片" src="http://img.e-com-net.com/image/info9/06e392ff9ee6411cb0ecedacac38bfd7.jpg" width="600" height="326" style="border:1px solid black;"></a></span></p> 
 <p>组件可以和组件组合在一起，组件内部可以使用别的组件。就像普通的 HTML 标签一样使用就可以。这样的组合嵌套，最后构成一个所谓的组件树，就正如上面的例子那样，<code>Index</code> 用了 <code>Header</code>、<code>Main</code>、<code>Footer</code>，<code>Header</code> 又使用了 <code>Title</code> 。这样用这样的树状结构表示它们之间的关系：</p> 
 <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/10177103abef427590e6aea6efadeb22.jpg" target="_blank"><img alt="React.js 小书 Lesson8 - 组件的组合、嵌套和组件树_第2张图片" title="示例图片" src="http://img.e-com-net.com/image/info9/10177103abef427590e6aea6efadeb22.jpg" width="650" height="430" style="border:1px solid black;"></a></span></p> 
 <p>这里的结构还是比较简单，因为我们的页面结构并不复杂。当页面结构复杂起来，有许多不同的组件嵌套组合的话，组件树会相当的复杂和庞大。理解组件树的概念对后面理解数据是如何在组件树内自上往下流动过程很重要。</p> 
 <p>下一节中我们将介绍《React.js 小书 Lesson9 - 事件监听》。</p> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1175725306661646336"></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">你可能感兴趣的:(react.js,javascript)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1950232820773351424.htm"
                           title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a>
                        <span class="text-muted">good2know</span>

                        <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div>
                    </li>
                    <li><a href="/article/1950194742100815872.htm"
                           title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a>
                        <span class="text-muted"></span>

                        <div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div>
                    </li>
                    <li><a href="/article/1950144218282389504.htm"
                           title="为什么学习Web前端一定要掌握JavaScript？" target="_blank">为什么学习Web前端一定要掌握JavaScript？</a>
                        <span class="text-muted">web前端学习指南</span>

                        <div>为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。</div>
                    </li>
                    <li><a href="/article/1950130692448907264.htm"
                           title="Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录" target="_blank">Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录</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/vue.js/1.htm">vue.js</a>
                        <div>1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非</div>
                    </li>
                    <li><a href="/article/1950114810557427712.htm"
                           title="12. 什么是事件委托" target="_blank">12. 什么是事件委托</a>
                        <span class="text-muted">yqcoder</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>总结事件委托（EventDelegation）是JavaScript中一种重要的事件处理机制，它利用了事件冒泡的特性，将事件的处理程序绑定到父元素或祖先元素上，而不是直接绑定到具体的子元素上。什么是事件委托？事件冒泡：在DOM中，事件通常会从触发元素开始，然后逐级向上冒泡到其父元素、祖先元素，直到window对象。核心思想：事件委托的核心思想是利用事件冒泡机制，在父元素上监听事件，而不是在每个子元</div>
                    </li>
                    <li><a href="/article/1950075480849838080.htm"
                           title="关于前端的性能优化" target="_blank">关于前端的性能优化</a>
                        <span class="text-muted"></span>

                        <div>性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C</div>
                    </li>
                    <li><a href="/article/1950074093608955904.htm"
                           title="时间组件库Day.js那些事" target="_blank">时间组件库Day.js那些事</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%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>一、简介1.什么是Day.jsDay.js是一个轻量级，易于使用的JavaScript日期库，提供了强大的日期和时间处理功能，与Moment.js的API设计相似，但具有更高的性能和更小的体积。Day.js官网https://day.js.org/docs/zh-CN/installation/installation2.优势a.特点轻量级：Dayjs的压缩后大小只有2KB左右，远小于Moment</div>
                    </li>
                    <li><a href="/article/1950071066281963520.htm"
                           title="JavaScript正则表达式去除括号但保留内容与去除括号与内容" target="_blank">JavaScript正则表达式去除括号但保留内容与去除括号与内容</a>
                        <span class="text-muted">Selicens</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a>
                        <div>项目上碰到一个需求，是取多个递增文件的文件名，类似于test(1).txt、test(2).txt，但是不需要括号，只要test1、test2这种格式，最开始想到的办法就是js里的replace替换，先上一个比较笨但是也能实现效果的例子letname="test(1).txt"letdata=name.split('.')[0].replace('(','').replace(')','')con</div>
                    </li>
                    <li><a href="/article/1950042324155297792.htm"
                           title="网络安全第14集" target="_blank">网络安全第14集</a>
                        <span class="text-muted">不灭锦鲤</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a>
                        <div>前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后</div>
                    </li>
                    <li><a href="/article/1950040812469415936.htm"
                           title="25年不倒的“犀牛书“：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？" target="_blank">25年不倒的“犀牛书“：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？</a>
                        <span class="text-muted">阿蒙Armon</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>25年不倒的"犀牛书"：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？当一本技术书能连续畅销25年，历经7次迭代仍稳坐领域第一梯队，它必然藏着超越时代的硬实力。《JavaScript权威指南（原书第7版）》就是这样一部传奇——豆瓣9.4分的封神之作，程序员口中的"犀牛书"，从网景时代到ES2020，它始终是JavaScript开发者的终极参考书。如果你还在为原型链、闭包、异步编</div>
                    </li>
                    <li><a href="/article/1949995914462556160.htm"
                           title="什么是JSON，如何与Java对象转化" target="_blank">什么是JSON，如何与Java对象转化</a>
                        <span class="text-muted">doublez234</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a>
                        <div>JSON概念JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它易于人阅读和编写，同时也易于机器解析和生成。JSON基于JavaScript（ECMAScript（欧洲计算机协会制定的js规范））编程语言的一个子集，但它是一种独立于语言的数据格式，被广泛应用于各种编程语言和平台之间的数据交换。JSON的主要特点：轻量级：JSON格式非常简洁，只包含必要的数据信</div>
                    </li>
                    <li><a href="/article/1949975484238458880.htm"
                           title="APP开发入门：了解主流的编程语言" target="_blank">APP开发入门：了解主流的编程语言</a>
                        <span class="text-muted">agi大模型</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E4%B8%9A%E4%B8%8E%E8%81%8C%E5%9C%BA/1.htm">职业与职场</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/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><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a>
                        <div>前言在过去的几年里，有许多程序员开始学习和使用编程语言。这其中包括C、C++、Java和Python。尽管有许多语言可供选择，但大多数程序员都会选择最容易学习的编程语言。如今，有很多编程语言供选择。程序员们在学习这些语言时可以自由地选择他们喜欢的方式，因为他们的目标是构建任何软件，而不仅仅是创建一个应用程序。你可以在Linux上学习C/C++、Java、Python、C#或JavaScript，你</div>
                    </li>
                    <li><a href="/article/1949928456414359552.htm"
                           title="探秘CommonJS：Node.js模块化核心解析" target="_blank">探秘CommonJS：Node.js模块化核心解析</a>
                        <span class="text-muted"></span>

                        <div>CommonJS是JavaScript的模块化规范，主要应用于服务器端环境（尤其是Node.js），其核心目标是解决代码组织、依赖管理和作用域隔离问题。以下是其核心要点：一、核心特性同步加载模块通过require()同步加载并执行，后续代码需等待模块加载完成后执行，适用于I/O快速的服务器环境（如本地文件读取）。作用域隔离每个文件视为独立模块，模块内定义的变量、函数默认私有（不污染全局作用域），仅</div>
                    </li>
                    <li><a href="/article/1949926944988524544.htm"
                           title="壹脉销客AI电子名片源码核心架构" target="_blank">壹脉销客AI电子名片源码核心架构</a>
                        <span class="text-muted"></span>

                        <div>为什么选择源码部署AI电子名片？在数字化转型浪潮中，越来越多的企业意识到拥有自主可控的电子名片系统的重要性。源码部署相比SaaS服务具有三大核心优势：数据完全自主-客户信息存储在企业自有服务器深度定制自由-可根据业务需求二次开发长期成本优化-一次部署永久使用壹脉销客AI电子名片源码核心架构壹脉销客提供的企业级电子名片解决方案采用前后端分离架构：前端技术栈（小程序端）javascript//小程序a</div>
                    </li>
                    <li><a href="/article/1949918371738873856.htm"
                           title="vue 进入一个页面，然后离开这个页面他就重新加载" target="_blank">vue 进入一个页面，然后离开这个页面他就重新加载</a>
                        <span class="text-muted">Java&Develop</span>
<a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
                        <div>vue进入一个页面，然后离开这个页面他就重新加载这个代码导致的注释即可window.location.reload();window.location.reload()是JavaScript中的一个方法，用于强制刷新当前页面（重新加载页面内容）。其作用类似于用户手动点击浏览器的刷新按钮，但可以通过代码精确触发。核心作用：刷新页面重新加载当前显示的文档（即重新请求当前URL的资源）。可选参数控制缓存</div>
                    </li>
                    <li><a href="/article/1949898570761039872.htm"
                           title="[python][flask]flask静态资源" target="_blank">[python][flask]flask静态资源</a>
                        <span class="text-muted"></span>

                        <div>在Flask中，静态资源（如图片、CSS文件、JavaScript文件等）通常存储在项目的static文件夹中。Flask会自动为静态资源提供服务，使得你可以通过URL访问这些文件。以下是关于Flask中静态资源的使用方法和一些高级配置。1.默认静态文件夹Flask默认会将项目根目录下的static文件夹作为静态资源目录。例如，如果你的项目结构如下：my_flask_app/│├──app.py├</div>
                    </li>
                    <li><a href="/article/1949894278360657920.htm"
                           title="JavaScript对象与Math对象完全指南" target="_blank">JavaScript对象与Math对象完全指南</a>
                        <span class="text-muted">hui函数</span>
<a class="tag" taget="_blank" href="/search/Javascript/1.htm">Javascript</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对象与Math对象完全指南对象基础概念与操作对象是什么？数据集合：包含相关数据和功能的容器结构组成：属性：描述对象特征的变量（名词性）方法：对象可执行的操作（动词性，本质是函数）对象创建与访问//创建对象letperson={ //属性 name:"张三", age:28, profession:"软件工程师",  //方法 introduce(){  return`大家好，我</div>
                    </li>
                    <li><a href="/article/1949892133389398016.htm"
                           title="深入理解JavaScript作用域与编译过程" target="_blank">深入理解JavaScript作用域与编译过程</a>
                        <span class="text-muted">君子心理</span>
<a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F/1.htm">作用域</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%AF%91/1.htm">编译</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8F%98%E9%87%8F%E6%8F%90%E5%8D%87/1.htm">变量提升</a><a class="tag" taget="_blank" href="/search/%E9%97%AD%E5%8C%85/1.htm">闭包</a>
                        <div>背景简介在编程领域，作用域和编译过程是理解语言机制的关键概念。JavaScript作为一种广泛使用的语言，其作用域规则和编译机制尤其值得我们深入探讨。本文将基于《你不懂JS》系列书籍中的相关内容，解析JavaScript的作用域系统、函数闭包以及编译过程，帮助读者获得更深层次的理解。作用域是什么？在JavaScript中，作用域定义了变量和函数的可访问范围。编写程序时，我们会频繁使用变量来存储和操</div>
                    </li>
                    <li><a href="/article/1949892007069544448.htm"
                           title="掌握JavaScript对象与函数：深入理解原型与作用域" target="_blank">掌握JavaScript对象与函数：深入理解原型与作用域</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%AF%B9%E8%B1%A1/1.htm">对象</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E5%9E%8B%E9%93%BE/1.htm">原型链</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F/1.htm">作用域</a>
                        <div>掌握JavaScript对象与函数：深入理解原型与作用域背景简介在探索JavaScript的世界时，我们经常遇到对象和函数这两个核心概念。对象是JavaScript中最为基本的结构之一，而函数则是实现代码复用、封装和模块化的主要工具。本文将基于给定的书籍章节内容，深入探讨对象的更新机制、原型继承以及函数的多样性及其调用模式，同时分享对全局变量使用的思考。更新对象在JavaScript中，对象的属性</div>
                    </li>
                    <li><a href="/article/1949891377278021632.htm"
                           title="JavaScript函数使用模式与作用域的深入解析" target="_blank">JavaScript函数使用模式与作用域的深入解析</a>
                        <span class="text-muted"></span>

                        <div>JavaScript函数使用模式与作用域的深入解析JavaScript作为一门灵活且功能强大的编程语言，其函数的使用和作用域的特性是学习和开发中的关键点。本篇博客将深入解析JavaScript函数的几种使用模式，以及作用域的重要概念。构造器模式在JavaScript中，函数可以作为构造器（constructor）使用，当用new关键字调用时，函数会返回一个新对象。为了区分构造器函数和其他普通函数，</div>
                    </li>
                    <li><a href="/article/1949890620248092672.htm"
                           title="掌握JavaScript函数和作用域：提高代码复用性" target="_blank">掌握JavaScript函数和作用域：提高代码复用性</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%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编程中，函数是一个核心概念，它不仅能帮助我们将代码组织得更加清晰，还能提高代码的复用性。理解函数的定义与调用、掌握作用域的概念，对于编写高效和可维护的代码至关重要。本文将通过创建一个计时器应用的案例，帮助你全面掌握JavaScript中的函数和作用域知识。任务目标通过本教程，你将学习并掌握：函数的声明与调用函数表达式的使用作用域的概念及其在函数中的应用闭包的原理及实践学习内容</div>
                    </li>
                    <li><a href="/article/1949887845539835904.htm"
                           title="JavaScript 函数与作用域" target="_blank">JavaScript 函数与作用域</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/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E4%B8%BA/1.htm">行为</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F/1.htm">作用域</a><a class="tag" taget="_blank" href="/search/%E9%97%AD%E5%8C%85/1.htm">闭包</a><a class="tag" taget="_blank" href="/search/%E9%80%92%E5%BD%92/1.htm">递归</a><a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/1.htm">作用域链</a>
                        <div>Hi，我是布兰妮甜！JavaScript是一种动态类型语言，它支持面向对象编程和函数式编程。函数是JavaScript的核心组成部分之一，而作用域则决定了变量的可见性和生命周期。本文将详细介绍JavaScript中的函数定义、调用、参数传递、闭包、递归以及作用域链的概念。文章目录一、函数基础二、作用域基础三、闭包四、递归五、作用域链六、总结一、函数基础1.定义函数函数声明函数可以通过函数声明的方式</div>
                    </li>
                    <li><a href="/article/1949884694208245760.htm"
                           title="深入理解作用域【JavaScript】" target="_blank">深入理解作用域【JavaScript】</a>
                        <span class="text-muted">陆仟</span>
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">Web前端开发</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>一、作用域的内部原理JavaScript的作用域机制是理解变量如何被访问和存储的重要概念。下面详细介绍作用域的内部原理，包括编译、执行、查询、嵌套和异常处理这五个步骤。1.编译在JavaScript的执行过程中，首要的步骤是编译。尽管JavaScript是解释性语言，但现代JavaScript引擎（如V8）在执行代码前会先进行编译。编译阶段主要完成以下几项工作：词法分析：将源代码分解成语法单元（t</div>
                    </li>
                    <li><a href="/article/1949875239387197440.htm"
                           title="即便你已经在浏览器中启用了 JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由 JavaScript 冲突" target="_blank">即便你已经在浏览器中启用了 JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由 JavaScript 冲突</a>
                        <span class="text-muted"></span>

                        <div>即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干</div>
                    </li>
                    <li><a href="/article/1949872340728868864.htm"
                           title="技术文章大纲：Anaconda插件开发挑战赛引言介绍Anaconda在数据科学和PythonUH开发中的重要性" target="_blank">技术文章大纲：Anaconda插件开发挑战赛引言介绍Anaconda在数据科学和PythonUH开发中的重要性</a>
                        <span class="text-muted">aadwje</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a>
                        <div>即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干</div>
                    </li>
                    <li><a href="/article/1949803748612173824.htm"
                           title="深入分析 Node.js 的 V8 引擎如何在内部处理 JavaScript 代码，包括内存管理和垃圾回收机制。" target="_blank">深入分析 Node.js 的 V8 引擎如何在内部处理 JavaScript 代码，包括内存管理和垃圾回收机制。</a>
                        <span class="text-muted">海派程序猿</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</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>各位观众老爷们，晚上好！今天咱们就来聊聊Node.js的大心脏——V8引擎，看看它到底是怎么把咱们写的JavaScript代码给“消化”掉的。别害怕，今天咱不搞那些生涩难懂的学院派理论，尽量用大白话，外加一些“栗子”，保证让你听得津津有味。V8引擎：JavaScript的超级翻译官首先，简单介绍一下V8。V8是Google开发的高性能JavaScript和WebAssembly引擎，用C++写的。</div>
                    </li>
                    <li><a href="/article/1949801101146517504.htm"
                           title="Tailwind CSS 响应式设计实战指南" target="_blank">Tailwind CSS 响应式设计实战指南</a>
                        <span class="text-muted">qcidyu</span>
<a class="tag" taget="_blank" href="/search/%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C/1.htm">用户体验</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96/1.htm">代码优化</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E4%BC%98%E5%85%88/1.htm">移动优先</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E5%B8%83%E5%B1%80/1.htm">网站布局</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/Tailwind/1.htm">Tailwind</a><a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/1.htm">响应式设计</a>
                        <div>title:TailwindCSS响应式设计实战指南date:2024/6/13updated:2024/6/13author:cmdragonexcerpt:这篇文章介绍了如何运用TailwindCSS框架创建响应式网页设计，涵盖博客、电商网站及企业官网的布局实例，包括头部导航、内容区域、侧边栏、页脚及轮播图等组件的响应式实现。同时，探讨了与JavaScript框架集成、CSS预处理器配合、设计</div>
                    </li>
                    <li><a href="/article/1949765414980481024.htm"
                           title="JavaScript核心概念全解析" target="_blank">JavaScript核心概念全解析</a>
                        <span class="text-muted"></span>

                        <div>目录1.作用域(1)局部作用域(2)全局作用域2.垃圾回收(1)引用计数法(2)标记清除法3.闭包(1)作用(2)风险4.变量提升(1)var(2)let和const(3)const5.函数提升(1)函数声明(2)函数表达式6.函数参数(1)动态参数(2)剩余参数(3)展开运算符7.必须加分号的两种情况(1)立即执行函数(2)使用数组的时候8.箭头函数(1)特点9.Symbol10.生成器函数11</div>
                    </li>
                    <li><a href="/article/1949740580871401472.htm"
                           title="IntelliJ IDEA 高效开发指南：从基础操作到高级技巧" target="_blank">IntelliJ IDEA 高效开发指南：从基础操作到高级技巧</a>
                        <span class="text-muted">zqmgx13291</span>
<a class="tag" taget="_blank" href="/search/intellij-idea/1.htm">intellij-idea</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a>
                        <div>一、IDEA概述与环境配置1.1IDEA的核心优势智能代码辅助：基于上下文的代码补全（Ctrl+Space）、方法参数提示、错误实时检测全栈开发支持：内置Java/Python/JavaScript等20+语言支持，框架集成（SpringBoot/Vue/React）工具链集成：版本控制（Git/SVN）、数据库（MySQL/PostgreSQL）、容器（Docker/K8s）一站式开发性能优化：</div>
                    </li>
                    <li><a href="/article/1949735665474269184.htm"
                           title="【前端】JavaScript 的事件循环 (Event Loop)" target="_blank">【前端】JavaScript 的事件循环 (Event Loop)</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>JavaScript的事件循环(EventLoop)是其实现异步编程的核心机制，即使JS是单线程语言，它也能高效处理I/O、网络请求、计时器等非阻塞操作。以下是其工作原理的精要解析：核心概念单线程执行JS引擎（如V8）只能顺序执行一个任务。异步行为需要靠宿主环境（浏览器/Node.js）提供的事件循环调度。任务队列(TaskQueue)所有异步操作完成后对应的回调函数会进入队列等待执行。队列类型包</div>
                    </li>
                                <li><a href="/article/35.htm"
                                       title="JVM StackMapTable 属性的作用及理解" target="_blank">JVM StackMapTable 属性的作用及理解</a>
                                    <span class="text-muted">lijingyao8206</span>
<a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E7%A0%81/1.htm">字节码</a><a class="tag" taget="_blank" href="/search/Class%E6%96%87%E4%BB%B6/1.htm">Class文件</a><a class="tag" taget="_blank" href="/search/StackMapTable/1.htm">StackMapTable</a>
                                    <div>  
      在Java 6版本之后JVM引入了栈图(Stack Map Table)概念。为了提高验证过程的效率，在字节码规范中添加了Stack Map Table属性，以下简称栈图，其方法的code属性中存储了局部变量和操作数的类型验证以及字节码的偏移量。也就是一个method需要且仅对应一个Stack Map Table。在Java 7版</div>
                                </li>
                                <li><a href="/article/162.htm"
                                       title="回调函数调用方法" target="_blank">回调函数调用方法</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>最近在看大神写的代码时,.发现其中使用了很多的回调 ,以前只是在学习的时候经常用到 ,现在写个笔记 记录一下 
  
代码很简单: 
    
      MainDemo  :调用方法  得到方法的返回结果 
   
     </div>
                                </li>
                                <li><a href="/article/289.htm"
                                       title="[时间机器]制造时间机器需要一些材料" target="_blank">[时间机器]制造时间机器需要一些材料</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E5%88%B6%E9%80%A0/1.htm">制造</a>
                                    <div>      根据我的计算和推测,要完全实现制造一台时间机器,需要某些我们这个世界不存在的物质 
    和材料... 
 
      甚至可以这样说,这种材料和物质,我们在反应堆中也无法获得...... 
 
     </div>
                                </li>
                                <li><a href="/article/416.htm"
                                       title="开口埋怨不如闭口做事" target="_blank">开口埋怨不如闭口做事</a>
                                    <span class="text-muted">邓集海</span>
<a class="tag" taget="_blank" href="/search/%E9%82%93%E9%9B%86%E6%B5%B7+%E5%81%9A%E4%BA%BA+%E5%81%9A%E4%BA%8B+%E5%B7%A5%E4%BD%9C/1.htm">邓集海 做人 做事 工作</a>
                                    <div>“开口埋怨，不如闭口做事。”不是名人名言，而是一个普通父亲对儿子的训导。但是，因为这句训导，这位普通父亲却造就了一个名人儿子。这位普通父亲造就的名人儿子，叫张明正。 　　 　　张明正出身贫寒，读书时成绩差，常挨老师批评。高中毕业，张明正连普通大学的分数线都没上。高考成绩出来后，平时开口怨这怨那的张明正，不从自身找原因，而是不停地埋怨自己家庭条件不好、埋怨父母没有给他创造良好的学习环境。 　　 　　</div>
                                </li>
                                <li><a href="/article/543.htm"
                                       title="jQuery插件开发全解析，类级别与对象级别开发" target="_blank">jQuery插件开发全解析，类级别与对象级别开发</a>
                                    <span class="text-muted">IT独行者</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91/1.htm">开发</a><a class="tag" taget="_blank" href="/search/%E6%8F%92%E4%BB%B6%E3%80%80/1.htm">插件　</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a>
                                    <div>jQuery插件的开发包括两种：   一种是类级别的插件开发，即给 
jQuery添加新的全局函数，相当于给 
jQuery类本身添加方法。 
jQuery的全局函数就是属于 
jQuery命名空间的函数，另一种是对象级别的插件开发，即给 
jQuery对象添加方法。下面就两种函数的开发做详细的说明。  
   
1 
、类级别的插件开发   类级别的插件开发最直接的理解就是给jQuer</div>
                                </li>
                                <li><a href="/article/670.htm"
                                       title="Rome解析Rss" target="_blank">Rome解析Rss</a>
                                    <span class="text-muted">413277409</span>
<a class="tag" taget="_blank" href="/search/Rome%E8%A7%A3%E6%9E%90Rss/1.htm">Rome解析Rss</a>
                                    <div>import java.net.URL;  
import java.util.List;  
  
import org.junit.Test;  
  
import com.sun.syndication.feed.synd.SyndCategory;  
import com.sun.syndication.feed.synd.S</div>
                                </li>
                                <li><a href="/article/797.htm"
                                       title="RSA加密解密" target="_blank">RSA加密解密</a>
                                    <span class="text-muted">无量</span>
<a class="tag" taget="_blank" href="/search/%E5%8A%A0%E5%AF%86/1.htm">加密</a><a class="tag" taget="_blank" href="/search/%E8%A7%A3%E5%AF%86/1.htm">解密</a><a class="tag" taget="_blank" href="/search/rsa/1.htm">rsa</a>
                                    <div>RSA加密解密代码 
 
代码有待整理 
 
 
package com.tongbanjie.commons.util;


import java.security.Key;

import java.security.KeyFactory;

import java.security.KeyPair;

import java.security.KeyPairGenerat</div>
                                </li>
                                <li><a href="/article/924.htm"
                                       title="linux 软件安装遇到的问题" target="_blank">linux 软件安装遇到的问题</a>
                                    <span class="text-muted">aichenglong</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/1.htm">遇到的问题</a><a class="tag" taget="_blank" href="/search/ftp/1.htm">ftp</a>
                                    <div>1 ftp配置中遇到的问题 
   500 OOPS: cannot change directory 
  出现该问题的原因:是SELinux安装机制的问题.只要disable SELinux就可以了 
  修改方法:1 修改/etc/selinux/config 中SELINUX=disabled 
    2 source /etc</div>
                                </li>
                                <li><a href="/article/1051.htm"
                                       title="面试心得" target="_blank">面试心得</a>
                                    <span class="text-muted">alafqq</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                                    <div>最近面试了好几家公司。记录下； 
支付宝，面试我的人胖胖的，看着人挺好的；博彦外包的职位，面试失败； 
阿里金融，面试官人也挺和善，只不过我让他吐血了。。。 
由于印象比较深，记录下； 
1，自我介绍 
2，说下八种基本类型；（算上string。楼主才答了3种，哈哈，string其实不是基本类型，是引用类型） 
3，什么是包装类，包装类的优点； 
4，平时看过什么书？NND，什么书都没看过。。照样</div>
                                </li>
                                <li><a href="/article/1178.htm"
                                       title="java的多态性探讨" target="_blank">java的多态性探讨</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>java的多态性是指main方法在调用属性的时候类可以对这一属性做出反应的情况 
//package 1;
class A{

    public void test(){
       System.out.println("A");
  }
}

class D extends A{

    public void test(){
       S</div>
                                </li>
                                <li><a href="/article/1305.htm"
                                       title="网络编程基础篇之JavaScript-学习笔记" target="_blank">网络编程基础篇之JavaScript-学习笔记</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
                                    <div>1.documentWrite 
<html>
<head>
    <script language="JavaScript">
         document.write("这是电脑网络学校");
         document.close();
    </script>
</h</div>
                                </li>
                                <li><a href="/article/1432.htm"
                                       title="探索JUnit4扩展：深入Rule" target="_blank">探索JUnit4扩展：深入Rule</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/Rule/1.htm">Rule</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a>
                                    <div>        本文将进一步探究Rule的应用，展示如何使用Rule来替代@BeforeClass，@AfterClass，@Before和@After的功能。 
        在上一篇中提到，可以使用Rule替代现有的大部分Runner扩展，而且也不提倡对Runner中的withBefores()，withAfte</div>
                                </li>
                                <li><a href="/article/1559.htm"
                                       title="[CSS]CSS浮动十五条规则" target="_blank">[CSS]CSS浮动十五条规则</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                                    <div>这些浮动规则，主要是参考CSS权威指南关于浮动规则的总结，然后添加一些简单的例子以验证和理解这些规则。 
  
1. 所有的页面元素都可以浮动 2. 一个元素浮动后，会成为块级元素，比如<span>,a, strong等都会变成块级元素 3.一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果这个块级父元素已经有浮动元素停靠了</div>
                                </li>
                                <li><a href="/article/1686.htm"
                                       title="【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景" target="_blank">【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/partition/1.htm">partition</a>
                                    <div>0.Kafka服务器配置 
3个broker 
1个topic，6个partition，副本因子是2 
2个consumer，每个consumer三个线程并发读取 
  1. Producer 
package kafka.examples.multibrokers.producers;

import java.util.Properties;
import java.util.</div>
                                </li>
                                <li><a href="/article/1813.htm"
                                       title="zabbix_agentd.conf配置文件详解" target="_blank">zabbix_agentd.conf配置文件详解</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/zabbix+%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6/1.htm">zabbix 配置文件</a>
                                    <div>Aliaskey的别名，例如 Alias=ttlsa.userid:vfs.file.regexp[/etc/passwd,^ttlsa:.:([0-9]+),,,,\1]， 或者ttlsa的用户ID。你可以使用key：vfs.file.regexp[/etc/passwd,^ttlsa:.: ([0-9]+),,,,\1]，也可以使用ttlsa.userid。备注: 别名不能重复，但是可以有多个</div>
                                </li>
                                <li><a href="/article/1940.htm"
                                       title="java--19.用矩阵求Fibonacci数列的第N项" target="_blank">java--19.用矩阵求Fibonacci数列的第N项</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/fibonacci/1.htm">fibonacci</a>
                                    <div>参考了网上的思路，写了个Java版的： 
 
 



public class Fibonacci {

	final  static int[] A={1,1,1,0};
	
	
	public static void main(String[] args) {
		int n=7;
		for(int i=0;i<=n;i++){
			int f=fibonac</div>
                                </li>
                                <li><a href="/article/2067.htm"
                                       title="Netty源码学习-LengthFieldBasedFrameDecoder" target="_blank">Netty源码学习-LengthFieldBasedFrameDecoder</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a>
                                    <div>先看看LengthFieldBasedFrameDecoder的官方API 
 
http://docs.jboss.org/netty/3.1/api/org/jboss/netty/handler/codec/frame/LengthFieldBasedFrameDecoder.html 
 
API举例说明了LengthFieldBasedFrameDecoder的解析机制，如下： 
 
实</div>
                                </li>
                                <li><a href="/article/2194.htm"
                                       title="AES加密解密" target="_blank">AES加密解密</a>
                                    <span class="text-muted">chicony</span>
<a class="tag" taget="_blank" href="/search/%E5%8A%A0%E5%AF%86%E8%A7%A3%E5%AF%86/1.htm">加密解密</a>
                                    <div>AES加解密算法，使用Base64做转码以及辅助加密： 
package com.wintv.common;

import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;

import sun.misc.BASE64Decod</div>
                                </li>
                                <li><a href="/article/2321.htm"
                                       title="文件编码格式转换" target="_blank">文件编码格式转换</a>
                                    <span class="text-muted">ctrain</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81%E6%A0%BC%E5%BC%8F/1.htm">编码格式</a>
                                    <div>
package com.test;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
</div>
                                </li>
                                <li><a href="/article/2448.htm"
                                       title="mysql 在linux客户端插入数据中文乱码" target="_blank">mysql 在linux客户端插入数据中文乱码</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/1.htm">中文乱码</a>
                                    <div>1、查看系统客户端，数据库，连接层的编码 
 查看方法： http://daizj.iteye.com/blog/2174993 
进入mysql，通过如下命令查看数据库编码方式： mysql>  show variables like 'character_set_%'; +--------------------------+------</div>
                                </li>
                                <li><a href="/article/2575.htm"
                                       title="好代码是廉价的代码" target="_blank">好代码是廉价的代码</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6/1.htm">读书</a>
                                    <div>  
长久以来我一直主张：好代码是廉价的代码。 
当我跟做开发的同事说出这话时，他们的第一反应是一种惊愕，然后是将近一个星期的嘲笑，把它当作一个笑话来讲。 当他们走近看我的表情、知道我是认真的时，才收敛一点。 
当最初的惊愕消退后，他们会用一些这样的话来反驳： “好代码不廉价，好代码是采用经过数十年计算机科学研究和积累得出的最佳实践设计模式和方法论建立起来的精心制作的程序代码。” 
我只</div>
                                </li>
                                <li><a href="/article/2702.htm"
                                       title="Android网络请求库——android-async-http" target="_blank">Android网络请求库——android-async-http</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>在iOS开发中有大名鼎鼎的ASIHttpRequest库，用来处理网络请求操作，今天要介绍的是一个在Android上同样强大的网络请求库android-async-http，目前非常火的应用Instagram和Pinterest的Android版就是用的这个网络请求库。这个网络请求库是基于Apache HttpClient库之上的一个异步网络请求处理库，网络处理均基于Android的非UI线程，通</div>
                                </li>
                                <li><a href="/article/2829.htm"
                                       title="ORACLE 复习笔记之SQL语句的优化" target="_blank">ORACLE 复习笔记之SQL语句的优化</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/SQL%E4%BC%98%E5%8C%96/1.htm">SQL优化</a><a class="tag" taget="_blank" href="/search/Oracle+sql%E8%AF%AD%E5%8F%A5%E4%BC%98%E5%8C%96/1.htm">Oracle sql语句优化</a><a class="tag" taget="_blank" href="/search/SQL%E8%AF%AD%E5%8F%A5%E7%9A%84%E4%BC%98%E5%8C%96/1.htm">SQL语句的优化</a>
                                    <div>转载请出自出处：http://eksliang.iteye.com/blog/2097999 
  SQL语句的优化总结如下 
  
sql语句的优化可以按照如下六个步骤进行： 
 
 合理使用索引 
 避免或者简化排序 
 消除对大表的扫描 
 避免复杂的通配符匹配 
 调整子查询的性能 
 EXISTS和IN运算符 
 
下面我就按照上面这六个步骤分别进行总结： </div>
                                </li>
                                <li><a href="/article/2956.htm"
                                       title="浅析：Android 嵌套滑动机制（NestedScrolling）" target="_blank">浅析：Android 嵌套滑动机制（NestedScrolling）</a>
                                    <span class="text-muted">gg163</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/%E6%BB%91%E5%8A%A8%E6%9C%BA%E5%88%B6/1.htm">滑动机制</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%A5%97/1.htm">嵌套</a>
                                    <div>谷歌在发布安卓 Lollipop版本之后，为了更好的用户体验，Google为Android的滑动机制提供了NestedScrolling特性 
NestedScrolling的特性可以体现在哪里呢？<!--[if !supportLineBreakNewLine]--><!--[endif]--> 
比如你使用了Toolbar，下面一个ScrollView，向上滚</div>
                                </li>
                                <li><a href="/article/3083.htm"
                                       title="使用hovertree菜单作为后台导航" target="_blank">使用hovertree菜单作为后台导航</a>
                                    <span class="text-muted">hvt</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a>
                                    <div>  
hovertree是一个jquery菜单插件，官方网址：http://keleyi.com/jq/hovertree/ ，可以登录该网址体验效果。 
0.1.3版本：http://keleyi.com/jq/hovertree/demo/demo.0.1.3.htm 
hovertree插件包含文件： 
http://keleyi.com/jq/hovertree/css</div>
                                </li>
                                <li><a href="/article/3210.htm"
                                       title="SVG 教程 （二）矩形" target="_blank">SVG 教程 （二）矩形</a>
                                    <span class="text-muted">天梯梦</span>
<a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a>
                                    <div>SVG <rect>   SVG Shapes 
SVG有一些预定义的形状元素，可被开发者使用和操作： 
 
 矩形 <rect> 
 圆形 <circle> 
 椭圆 <ellipse> 
 线 <line> 
 折线 <polyline> 
 多边形 <polygon> 
 路径 <path> 
 </div>
                                </li>
                                <li><a href="/article/3337.htm"
                                       title="一个简单的队列" target="_blank">一个简单的队列</a>
                                    <span class="text-muted">luyulong</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E9%98%9F%E5%88%97/1.htm">队列</a>
                                    <div>
public class MyQueue {
	private long[] arr;

	private int front;

	private int end;
	// 有效数据的大小
	private int elements;

	public MyQueue() {
		arr = new long[10];
		elements = 0;
		front </div>
                                </li>
                                <li><a href="/article/3464.htm"
                                       title="基础数据结构和算法九：Binary Search Tree" target="_blank">基础数据结构和算法九：Binary Search Tree</a>
                                    <span class="text-muted">sunwinner</span>
<a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a>
                                    <div>  
A binary search tree (BST) is a binary tree where each node has a Comparable key (and an associated value) and satisfies the restriction that the key in any node is larger than the keys in all</div>
                                </li>
                                <li><a href="/article/3591.htm"
                                       title="项目出现的一些问题和体会" target="_blank">项目出现的一些问题和体会</a>
                                    <span class="text-muted">Steven-Walker</span>
<a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a>
                                    <div>     第一篇博客不知道要写点什么，就先来点近阶段的感悟吧。 
    这几天学了servlet和数据库等知识，就参照老方的视频写了一个简单的增删改查的，完成了最简单的一些功能，使用了三层架构。 
dao层完成的是对数据库具体的功能实现，service层调用了dao层的实现方法，具体对servlet提供支持。 
 &</div>
                                </li>
                                <li><a href="/article/3718.htm"
                                       title="高手问答：Java老A带你全面提升Java单兵作战能力！" target="_blank">高手问答：Java老A带你全面提升Java单兵作战能力！</a>
                                    <span class="text-muted">ITeye管理员</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>本期特邀《Java特种兵》作者：谢宇，CSDN论坛ID: xieyuooo 针对JAVA问题给予大家解答，欢迎网友积极提问，与专家一起讨论! 
 
 
作者简介： 
 
淘宝网资深Java工程师，CSDN超人气博主，人称“胖哥”。 
 
CSDN博客地址： 
http://blog.csdn.net/xieyuooo 
 
作者在进入大学前是一个不折不扣的计算机白痴，曾经被人笑话过不懂鼠标是什么，</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>