React设计模式:深入理解React&Redux原理套路

原文地址

本文从属于笔者的React入门与最佳实践系列,推荐阅读GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean

Communication

React组件一个很大的特性在于其拥有自己完整的生命周期,因此我们可以将React组件视作可自运行的小型系统,它拥有自己的内部状态、输入与输出。

Input

对于React组件而言,其输入的来源就是Props,我们会用如下方式向某个React组件传入数据:


// Title.jsx
class Title extends React.Component {
  render() {
    return 

{ this.props.text }

; } }; Title.propTypes = { text: React.PropTypes.string }; Title.defaultProps = { text: 'Hello world' }; // App.jsx class App extends React.Component { render() { return ; } };</code></pre> <p><code>text</code>是<code>Text</code>组件自己的输入域,父组件<code>App</code>在使用子组件<code>Title</code>时候应该提供<code>text</code>属性值。除了标准的属性名之外,我们还会用到如下两个设置:</p> <ul> <li><p>propTypes:用于定义Props的类型,这有助于追踪运行时误设置的Prop值。</p></li> <li><p>defaultProps:定义Props的默认值,这个在开发时很有帮助</p></li> </ul> <p>Props中还有一个特殊的属性<code>props.children</code>可以允许我们使用子组件:</p> <pre><code> class Title extends React.Component { render() { return ( <h1> { this.props.text } { this.props.children } </h1> ); } }; class App extends React.Component { render() { return ( <Title text='Hello React'> <span>community</span> ); } };

注意,如果我们不主动在Title组件的render函数中设置{this.props.children},那么span标签是不会被渲染出来的。除了Props之外,另一个隐性的组件的输入即是context,整个React组件树会拥有一个context对象,它可以被树中挂载的每个组件所访问到,关于此部分更多的内容请参考依赖注入这一章节。

Output

组件最明显的输出就是渲染后的HTML文本,即是React组件渲染结果的可视化展示。当然,部分包含了逻辑的组件也可能发送或者触发某些Action或者Event。


class Title extends React.Component {
  render() {
    return (
      

); } }; class App extends React.Component { render() { return ; } logoClicked() { console.log('logo clicked'); } };</code></pre> <p>在<code>App</code>组件中我们向<code>Title</code>组件传入了可以从<code>Title</code>调用的回调函数,在<code>logoClicked</code>函数中我们可以设置或者修改需要传回父组件的数据。需要注意的是,React并没有提供可以访问子组件状态的API,换言之,我们不能使用<code>this.props.children[0].state</code>或者类似的方法。正确的从子组件中获取数据的方法应该是在Props中传入回调函数,而这种隔离也有助于我们定义更加清晰的API并且促进了所谓单向数据流。</p> <h1>Composition</h1> <p>React最大的特性之一即是其强大的组件的可组合性,实际上除了React之外,笔者并不知道还有哪个框架能够提供如此简单易用的方式来创建与组合各式各样的组件。本章我们会一起讨论些常用的组合技巧,我们以一个简单的例子来进行讲解。假设在我们的应用中有一个页首栏目,并且其中放置了导航栏。我们创建了三个独立的React组件:<code>App</code>,<code>Header</code>以及<code>Navigation</code>。将这三个组件依次嵌套组合,可以得到以下的代码:</p> <pre><code> <App> <Header> <Navigation> ... </Navigation> </Header> </App></code></pre> <p>而在JSX中组合这些组件的方式就是在需要的时候引用它们:</p> <pre><code> // app.jsx import Header from './Header.jsx'; export default class App extends React.Component { render() { return <Header />; } } // Header.jsx import Navigation from './Navigation.jsx'; export default class Header extends React.Component { render() { return <header><Navigation /></header>; } } // Navigation.jsx export default class Navigation extends React.Component { render() { return (<nav> ... </nav>); } }</code></pre> <p>不过这种方式却可能存在以下的问题:</p> <ul> <li><p>我们将<code>App</code>当做各个组件间的连接线,也是整个应用的入口,因此在<code>App</code>中进行各个独立组件的组合是个不错的方法。不过<code>Header</code>元素中可能包含像图标、搜索栏或者Slogan这样的元素。而如果我们需要另一个不包含<code>Navigation</code>功能的<code>Header</code>组件时,像上面这种直接将<code>Navigation</code>组件硬编码进入<code>Header</code>的方式就会难于修改。</p></li> <li><p>这种硬编码的方式会难以测试,如果我们在<code>Header</code>中加入一些自定义的业务逻辑代码,那么在测试的时候当我们要创建<code>Header</code>实例时,因为其依赖于其他组件而导致了这种依赖层次过深(这里不包含Shallow Rendering这种仅渲染父组件而不渲染嵌套的子组件方式)。</p></li> </ul> <h2>使用React的<code>children</code>API</h2> <p>React为我们提供了<code>this.props.children</code>来允许父组件访问其子组件,这种方式有助于保证我们的<code>Header</code>独立并且不需要与其他组件解耦合。</p> <pre><code> // App.jsx export default class App extends React.Component { render() { return ( <Header> <Navigation /> </Header> ); } } // Header.jsx export default class Header extends React.Component { render() { return <header>{ this.props.children }</header>; } };</code></pre> <p>这种方式也有助于测试,我们可以选择输入空白的<code>div</code>元素,从而将要测试的目标元素隔离开来而专注于我们需要测试的部分。</p> <h2>将子组件以属性方式传入</h2> <p>React组件可以接受Props作为输入,我们也可以选择将需要封装的组件以Props方式传入:</p> <pre><code> // App.jsx class App extends React.Component { render() { var title = <h1>Hello there!</h1>; return ( <Header title={ title }> <Navigation /> </Header> ); } }; // Header.jsx export default class Header extends React.Component { render() { return ( <header> { this.props.title } <hr /> { this.props.children } </header> ); } };</code></pre> <p>这种方式在我们需要对传入的待组合组件进行一些修正时非常适用。</p> <h1>Higher-order components</h1> <p>Higher-Order Components模式看上去非常类似于装饰器模式,它会用于包裹某个组件然后为其添加一些新的功能。这里展示一个简单的用于构造Higher-Order Component的函数:</p> <pre><code> var enhanceComponent = (Component) => class Enhance extends React.Component { render() { return ( <Component {...this.state} {...this.props} /> ) } }; export default enhanceComponent;</code></pre> <p>通常情况下我们会构建一个工厂函数,接收原始的组件然后返回一个所谓的增强或者包裹后的版本,譬如:</p> <pre><code> var OriginalComponent = () => <p>Hello world.</p>; class App extends React.Component { render() { return React.createElement(enhanceComponent(OriginalComponent)); } };</code></pre> <p>一般来说,高阶组件的首要工作就是渲染原始的组件,我们经常也会将Props与State传递进去,将这两个属性传递进去会有助于我们建立一个数据代理。HOC模式允许我们控制组件的输入,即将需要传入的数据以Props传递进去。譬如我们需要为原始组件添加一些配置:</p> <pre><code> var config = require('path/to/configuration'); var enhanceComponent = (Component) => class Enhance extends React.Component { render() { return ( <Component {...this.state} {...this.props} title={ config.appTitle } /> ) } };</code></pre> <p>这里对于<code>configuration</code>的细节实现会被隐藏到高阶组件中,原始组件只需要了解从Props中获取到<code>title</code>变量然后渲染到界面上。原始组件并不会关心变量存于何地,从何而来,这种模式最大的优势在于我们能够以独立的模式对该组件进行测试,并且可以非常方便地对该组件进行Mocking。在HOC模式下我们的原始组件会变成这样子:</p> <pre><code> var OriginalComponent = (props) => <p>{ props.title }</p>;</code></pre> <h1>Dependency injection</h1> <p>我们写的大部分组件与模块都会包含一些依赖,合适的依赖管理有助于创建良好可维护的项目结构。而所谓的依赖注入技术正是解决这个问题的常用技巧,无论是在Java还是其他应用程序中,依赖注入都受到了广泛的使用。而React中对于依赖注入的需要也是显而易见的,让我们假设有如下的应用树结构:</p> <pre><code> // Title.jsx export default function Title(props) { return <h1>{ props.title }</h1>; } // Header.jsx import Title from './Title.jsx'; export default function Header() { return ( <header> <Title /> </header> ); } // App.jsx import Header from './Header.jsx'; class App extends React.Component { constructor(props) { super(props); this.state = { title: 'React in patterns' }; } render() { return <Header />; } };</code></pre> <p><code>title</code>这个变量的值是在<code>App</code>组件中被定义好的,我们需要将其传入到<code>Title</code>组件中。最直接的方法就是将其从<code>App</code>组件传入到<code>Header</code>组件,然后再由<code>Header</code>组件传入到<code>Title</code>组件中。这种方法在这里描述的简单的仅有三个组件的应用中还是非常清晰可维护的,不过随着项目功能与复杂度的增加,这种层次化的传值方式会导致很多的组件要去考虑它们并不需要的属性。在上文所讲的HOC模式中我们已经使用了数据注入的方式,这里我们使用同样的技术来注入<code>title</code>变量:</p> <pre><code> // enhance.jsx var title = 'React in patterns'; var enhanceComponent = (Component) => class Enhance extends React.Component { render() { return ( <Component {...this.state} {...this.props} title={ title } /> ) } }; export default enhanceComponent; // Header.jsx import enhance from './enhance.jsx'; import Title from './Title.jsx'; var EnhancedTitle = enhance(Title); export default function Header() { return ( <header> <EnhancedTitle /> </header> ); }</code></pre> <p>在上文这种HOC模式中,<code>title</code>变量被包含在了一个隐藏的中间层中,我们将其作为Props值传入到原始的<code>Title</code>变量中并且得到一个新的组件。这种方式思想是不错,不过还是只解决了部分问题。现在我们可以不去显式地将<code>title</code>变量传递到<code>Title</code>组件中即可以达到同样的<code>enhance.jsx</code>效果。</p> <p>React为我们提供了<code>context</code>的概念,<code>context</code>是贯穿于整个React组件树允许每个组件访问的对象。有点像所谓的Event Bus,一个简单的例子如下所示:</p> <pre><code> // a place where we'll define the context var context = { title: 'React in patterns' }; class App extends React.Component { getChildContext() { return context; } ... }; App.childContextTypes = { title: React.PropTypes.string }; // a place where we need data class Inject extends React.Component { render() { var title = this.context.title; ... } } Inject.contextTypes = { title: React.PropTypes.string };</code></pre> <p>注意,我们要使用context对象必须要通过<code>childContextTypes</code>与<code>contextTypes</code>指明其构成。如果在<code>context</code>对象中未指明这些那么<code>context</code>会被设置为空,这可能会添加些额外的代码。因此我们最好不要将<code>context</code>当做一个简单的object对象而为其设置一些封装方法:</p> <pre><code> // dependencies.js export default { data: {}, get(key) { return this.data[key]; }, register(key, value) { this.data[key] = value; } }</code></pre> <p>这样,我们的<code>App</code>组件会被改造成这样子:</p> <pre><code> import dependencies from './dependencies'; dependencies.register('title', 'React in patterns'); class App extends React.Component { getChildContext() { return dependencies; } render() { return <Header />; } }; App.childContextTypes = { data: React.PropTypes.object, get: React.PropTypes.func, register: React.PropTypes.func };</code></pre> <p>而在<code>Title</code>组件中,我们需要进行如下设置:</p> <pre><code> // Title.jsx export default class Title extends React.Component { render() { return <h1>{ this.context.get('title') }</h1> } } Title.contextTypes = { data: React.PropTypes.object, get: React.PropTypes.func, register: React.PropTypes.func };</code></pre> <p>当然我们不希望在每次要使用<code>contextTypes</code>的时候都需要显式地声明一下,我们可以将这些声明细节包含在一个高阶组件中。</p> <pre><code> // Title.jsx import wire from './wire'; function Title(props) { return <h1>{ props.title }</h1>; } export default wire(Title, ['title'], function resolve(title) { return { title }; });</code></pre> <p>这里的<code>wire</code>函数的第一个参数是React组件对象,第二个参数是一系列需要注入的依赖值,注意,这些依赖值务必已经调用过<code>register</code>函数。最后一个参数则是所谓的映射函数,它接收存储在<code>context</code>中的某个原始值然后返回React Props中需要的值。因为在这个例子里<code>context</code>中存储的值与<code>Title</code>组件中需要的值都是<code>title</code>变量,因此我们直接返回即可。不过在真实的应用中可能是一个数据集合、配置等等。</p> <pre><code> export default function wire(Component, dependencies, mapper) { class Inject extends React.Component { render() { var resolved = dependencies.map(this.context.get.bind(this.context)); var props = mapper(...resolved); return React.createElement(Component, props); } } Inject.contextTypes = { data: React.PropTypes.object, get: React.PropTypes.func, register: React.PropTypes.func }; return Inject; };</code></pre> <p>这里的Inject就是某个可以访问<code>context</code>的高阶组件,而<code>mapper</code>就是用于接收<code>context</code>中的数据并将其转化为组件所需要的Props的函数。实际上现在大部分的依赖注入的解决方案都是基于<code>context</code>,我觉得了解这种方式的底层原理还是很有意义的。譬如现在流行的<code>Redux</code>,其核心的<code>connect</code>函数与<code>Provider</code>组件都是基于<code>context</code>。</p> <h1>One direction data flow</h1> <p>单向数据流是React中主要的数据驱动模式,其核心概念在于组件并不会修改它们接收到的数据,它们只是负责接收新的数据而后重新渲染到界面上或者发出某些Action以触发某些专门的业务代码来修改数据存储中的数据。我们先设置一个包含一个按钮的<code>Switcher</code>组件,当我们点击该按钮时会触发某个<code>flag</code>变量的改变:</p> <pre><code> class Switcher extends React.Component { constructor(props) { super(props); this.state = { flag: false }; this._onButtonClick = e => this.setState({ flag: !this.state.flag }); } render() { return ( <button onClick={ this._onButtonClick }> { this.state.flag ? 'lights on' : 'lights off' } </button> ); } }; // ... and we render it class App extends React.Component { render() { return <Switcher />; } };</code></pre> <p>此时我们将所有的数据放置到组件内,换言之,<code>Switcher</code>是唯一的包含我们<code>flag</code>变量的地方,我们来尝试下将这些数据托管于专门的Store中:</p> <pre><code> var Store = { _flag: false, set: function(value) { this._flag = value; }, get: function() { return this._flag; } }; class Switcher extends React.Component { constructor(props) { super(props); this.state = { flag: false }; this._onButtonClick = e => { this.setState({ flag: !this.state.flag }, () => { this.props.onChange(this.state.flag); }); } } render() { return ( <button onClick={ this._onButtonClick }> { this.state.flag ? 'lights on' : 'lights off' } </button> ); } }; class App extends React.Component { render() { return <Switcher onChange={ Store.set.bind(Store) } />; } };</code></pre> <p>这里的<code>Store</code>对象是一个简单的单例对象,可以帮助我们设置与获取<code>_flag</code>属性值。而通过将<code>getter</code>函数传递到组件内,可以允许我们在<code>Store</code>外部修改这些变量,此时我们的应用工作流大概是这样的:</p> <pre><code> User's input | Switcher -------> Store</code></pre> <p>假设我们已经将<code>flag</code>值保存到某个后端服务中,我们需要为该组件设置一个合适的初始状态。此时就会存在一个问题在于同一份数据保存在了两个地方,对于UI与<code>Store</code>分别保存了各自独立的关于<code>flag</code>的数据状态,我们等于在<code>Store</code>与<code>Switcher</code>之间建立了双向的数据流:<code>Store ---> Switcher</code>与<code>Switcher ---> Store</code></p> <pre><code> // ... in App component <Switcher value={ Store.get() } onChange={ Store.set.bind(Store) } /> // ... in Switcher component constructor(props) { super(props); this.state = { flag: this.props.value }; ...</code></pre> <p>此时我们的数据流向变成了:</p> <pre><code> User's input | Switcher <-------> Store ^ | | | | | | v Service communicating with our backend</code></pre> <p>在这种双向数据流下,如果我们在外部改变了<code>Store</code>中的状态之后,我们需要将改变之后的最新值更新到<code>Switcher</code>中,这样也在无形之间增加了应用的复杂度。而单向数据流则是解决了这个问题,它强制在全局只保留一个状态存储,通常是存放在Store中。在单向数据流下,我们需要添加一些订阅Store中状态改变的响应函数:</p> <pre><code> var Store = { _handlers: [], _flag: '', onChange: function(handler) { this._handlers.push(handler); }, set: function(value) { this._flag = value; this._handlers.forEach(handler => handler()) }, get: function() { return this._flag; } };</code></pre> <p>然后我们在<code>App</code>组件中设置了钩子函数,这样每次<code>Store</code>改变其值的时候我们都会强制重新渲染:</p> <pre><code> class App extends React.Component { constructor(props) { super(props); Store.onChange(this.forceUpdate.bind(this)); } render() { return ( <div> <Switcher value={ Store.get() } onChange={ Store.set.bind(Store) } /> </div> ); } };</code></pre> <p>注意,这里使用的<code>forceUpdate</code>并不是一个推荐的用法,我们通常会使用HOC模式来进行重渲染,这里使用<code>forceUpdate</code>只是用于演示说明。在基于上述的改造,我们就不需要在组件中继续保留内部状态:</p> <pre><code> class Switcher extends React.Component { constructor(props) { super(props); this._onButtonClick = e => { this.props.onChange(!this.props.value); } } render() { return ( <button onClick={ this._onButtonClick }> { this.props.value ? 'lights on' : 'lights off' } </button> ); } };</code></pre> <p>这种模式的优势在于会将我们的组件改造为简单的<code>Store</code>中数据的呈现,此时才是真正无状态的View。我们可以以完全声明式的方式来编写组件,而将应用中复杂的业务逻辑放置到单独的地方。此时我们应用程序的流图变成了:</p> <pre><code> Service communicating with our backend ^ | v Store <----- | | v | Switcher ----> ^ | | User input</code></pre> <p>在这种单向数据流中我们不再需要同步系统中的多个部分,这种单向数据流的概念并不仅仅适用于基于React的应用。</p> <h1>Flux</h1> <blockquote> <p>关于Flux的简单了解可以参考笔者的GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean</p> </blockquote> <p>Flux是用于构建用户交互界面的架构模式,最早由Facebook在f8大会上提出,自此之后,很多的公司开始尝试这种概念并且貌似这是个很不错的构建前端应用的模式。Flux经常和React一起搭配使用,笔者本身在日常的工作中也是使用React+Flux的搭配,给自己带来了很大的遍历。</p> <p><span class="img-wrap"></span></p> <p>Flux中最主要的角色为Dispatcher,它是整个系统中所有的Events的中转站。Dispatcher负责接收我们称之为Actions的消息通知并且将其转发给所有的Stores。每个Store实例本身来决定是否对该Action感兴趣并且是否相应地改变其内部的状态。当我们将Flux与熟知的MVC相比较,你就会发现Store在某些意义上很类似于Model,二者都是用于存放状态与状态中的改变。而在系统中,除了View层的用户交互可能触发Actions之外,其他的类似于Service层也可能触发Actions,譬如在某个HTTP请求完成之后,请求模块也会发出相应类型的Action来触发Store中对于状态的变更。</p> <p>而在Flux中有个最大的陷阱就是对于数据流的破坏,我们可以在Views中访问Store中的数据,但是我们不应该在Views中修改任何Store的内部状态,所有对于状态的修改都应该通过Actions进行。作者在这里介绍了其维护的某个Flux变种的项目fluxiny。</p> <h2>Dispatcher</h2> <p><span class="img-wrap"></span></p> <p>大部分情况下我们在系统中只需要单个的Dispatcher,它是类似于粘合剂的角色将系统的其他部分有机结合在一起。Dispatcher一般而言有两个输入:Actions与Stores。其中Actions需要被直接转发给Stores,因此我们并不需要记录Actions的对象,而Stores的引用则需要保存在Dispatcher中。基于这个考虑,我们可以编写一个简单的Dispatcher:</p> <pre><code> var Dispatcher = function () { return { _stores: [], register: function (store) { this._stores.push({ store: store }); }, dispatch: function (action) { if (this._stores.length > 0) { this._stores.forEach(function (entry) { entry.store.update(action); }); } } } };</code></pre> <p>在上述实现中我们会发现,每个传入的<code>Store</code>对象都应该拥有一个<code>update</code>方法,因此我们在进行Store的注册时也要来检测该方法是否存在:</p> <pre><code> register: function (store) { if (!store || !store.update) { throw new Error('You should provide a store that has an `update` method.'); } else { this._stores.push({ store: store }); } }</code></pre> <p>在完成了对于Store的注册之后,下一步我们就是需要将View与Store关联起来,从而在Store发生改变的时候能够触发View的重渲染:</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info8/974ca9e3b62f4161a57891032a210cca.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/974ca9e3b62f4161a57891032a210cca.jpg" alt="React设计模式:深入理解React&Redux原理套路_第1张图片" title="" width="620" height="245" style="border:1px solid black;"></a></span></p> <p>很多flux的实现中都会使用如下的辅助函数:</p> <pre><code> Framework.attachToStore(view, store);</code></pre> <p>不过作者并不是很喜欢这种方式,这样这样会要求View中需要调用某个具体的API,换言之,在View中就需要了解到Store的实现细节,而使得View与Store又陷入了紧耦合的境地。当开发者打算切换到其他的Flux框架时就不得不修改每个View中的相对应的API,那又会增加项目的复杂度。另一种可选的方式就是使用<code>React mixins</code>:</p> <pre><code> var View = React.createClass({ mixins: [Framework.attachToStore(store)] ... });</code></pre> <p>使用<code>mixin</code>是个不错的修改现有的React 组件而不影响其原有代码的方式,不过这种方式的缺陷在于它不能够以一种Predictable的方式去修改组件,用户的可控性较低。还有一种方式就是使用<code>React context</code>,这种方式允许我们将值跨层次地传递给React组件树中的组件而不需要了解它们处于组件树中的哪个层级。这种方式和mixins可能有相同的问题,开发者并不知道该数据从何而来。</p> <p>作者最终选用的方式即是上面提及到的Higher-Order Components模式,它建立了一个包裹函数来对现有组件进行重新打包处理:</p> <pre><code> function attachToStore(Component, store, consumer) { const Wrapper = React.createClass({ getInitialState() { return consumer(this.props, store); }, componentDidMount() { store.onChangeEvent(this._handleStoreChange); }, componentWillUnmount() { store.offChangeEvent(this._handleStoreChange); }, _handleStoreChange() { if (this.isMounted()) { this.setState(consumer(this.props, store)); } }, render() { return <Component {...this.props} {...this.state} />; } }); return Wrapper; };</code></pre> <p>其中<code>Component</code>代指我们需要附着到<code>Store</code>中的View,而<code>consumer</code>则是应该被传递给View的Store中的部分的状态,简单的用法为:</p> <pre><code> class MyView extends React.Component { ... } ProfilePage = connectToStores(MyView, store, (props, store) => ({ data: store.get('key') }));</code></pre> <p>这种模式的优势在于其有效地分割了各个模块间的职责,在该模式中Store并不需要主动地推送消息给View,而主需要简单地修改数据然后广播说我的状态已经更新了,然后由HOC去主动地抓取数据。那么在作者具体的实现中,就是选用了HOC模式:</p> <pre><code> register: function (store) { if (!store || !store.update) { throw new Error('You should provide a store that has an `update` method.'); } else { var consumers = []; var change = function () { consumers.forEach(function (l) { l(store); }); }; var subscribe = function (consumer) { consumers.push(consumer); }; this._stores.push({ store: store, change: change }); return subscribe; } return false; }, dispatch: function (action) { if (this._stores.length > 0) { this._stores.forEach(function (entry) { entry.store.update(action, entry.change); }); } }</code></pre> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info8/572fc31fdbc647e3ba44983263cf5f6d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/572fc31fdbc647e3ba44983263cf5f6d.jpg" alt="React设计模式:深入理解React&Redux原理套路_第2张图片" title="" width="620" height="212" style="border:1px solid black;"></a></span></p> <p>另一个常见的用户场景就是我们需要为界面提供一些默认的状态,换言之当每个<code>consumer</code>注册的时候需要提供一些初始化的默认数据:</p> <pre><code> var subscribe = function (consumer, noInit) { consumers.push(consumer); !noInit ? consumer(store) : null; };</code></pre> <p>综上所述,最终的Dispatcher函数如下所示:</p> <pre><code> var Dispatcher = function () { return { _stores: [], register: function (store) { if (!store || !store.update) { throw new Error('You should provide a store that has an `update` method.'); } else { var consumers = []; var change = function () { consumers.forEach(function (l) { l(store); }); }; var subscribe = function (consumer, noInit) { consumers.push(consumer); !noInit ? consumer(store) : null; }; this._stores.push({ store: store, change: change }); return subscribe; } return false; }, dispatch: function (action) { if (this._stores.length > 0) { this._stores.forEach(function (entry) { entry.store.update(action, entry.change); }); } } } };</code></pre> <h2>Actions</h2> <p>Actions就是在系统中各个模块之间传递的消息载体,作者觉得应该使用标准的Flux Action模式:</p> <pre><code> { type: 'USER_LOGIN_REQUEST', payload: { username: '...', password: '...' } }</code></pre> <p>其中的<code>type</code>属性表明该Action所代表的操作而<code>payload</code>中包含了相关的数据。另外,在某些情况下Action中没有带有Payload,因此可以使用Partial Application方式来创建标准的Action请求:</p> <pre><code> var createAction = function (type) { if (!type) { throw new Error('Please, provide action\'s type.'); } else { return function (payload) { return dispatcher.dispatch({ type: type, payload: payload }); } } }</code></pre> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info8/5cb55e30ad7a4ca3b56ea27d60c7770f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5cb55e30ad7a4ca3b56ea27d60c7770f.jpg" alt="React设计模式:深入理解React&Redux原理套路_第3张图片" title="" width="620" height="204" style="border:1px solid black;"></a></span></p> <h2>Final Code</h2> <p>上文我们已经了解了核心的Dispatcher与Action的构造过程,那么在这里我们将这二者组合起来:</p> <pre><code> var createSubscriber = function (store) { return dispatcher.register(store); }</code></pre> <p>并且为了不直接暴露dispatcher对象,我们可以允许用户使用<code>createAction</code>与<code>createSubscriber</code>这两个函数:</p> <pre><code> var Dispatcher = function () { return { _stores: [], register: function (store) { if (!store || !store.update) { throw new Error('You should provide a store that has an `update` method.'); } else { var consumers = []; var change = function () { consumers.forEach(function (l) { l(store); }); }; var subscribe = function (consumer, noInit) { consumers.push(consumer); !noInit ? consumer(store) : null; }; this._stores.push({ store: store, change: change }); return subscribe; } return false; }, dispatch: function (action) { if (this._stores.length > 0) { this._stores.forEach(function (entry) { entry.store.update(action, entry.change); }); } } } }; module.exports = { create: function () { var dispatcher = Dispatcher(); return { createAction: function (type) { if (!type) { throw new Error('Please, provide action\'s type.'); } else { return function (payload) { return dispatcher.dispatch({ type: type, payload: payload }); } } }, createSubscriber: function (store) { return dispatcher.register(store); } } } };</code></pre> <p><span class="img-wrap"><img src="http://img.e-com-net.com/image/info8/29df9eb1055a42fe88db86f41996d206.jpg" alt="" title="" width="0" height="0"></span></p> </div> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1305169394015440896"></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设计模式:深入理解React&Redux原理套路)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1902978516962570240.htm" title="文件夹加密原理 [转]" target="_blank">文件夹加密原理 [转]</a> <span class="text-muted">chengg0769</span> <a class="tag" taget="_blank" href="/search/%E5%8A%A0%E5%AF%86/1.htm">加密</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/%E8%A7%A3%E5%AF%86/1.htm">解密</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/dos/1.htm">dos</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>谈文件夹的加密一、文件夹加密的方式有几种?在Windows平台下,文件夹加密的方式归纳起来有两种:一种是简单地对文件夹进行各种方式的隐藏,甚至利用Windows的漏洞进行隐藏,这种软件根本就没有对数据进行任何加密处理,所以才宣称“加密速度极快,上百G的数据仅需1秒钟完成。没有大小限制。”但是,这种文件夹加密方式的加密效果极其脆弱,只能防范一些电脑菜鸟偷看你的资料。因为软件编写者利用了Windows</div> </li> <li><a href="/article/1902971201618243584.htm" title="Docker 存储" target="_blank">Docker 存储</a> <span class="text-muted">Psycho_MrZhang</span> <a class="tag" taget="_blank" href="/search/Docker/1.htm">Docker</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a> <div>目录挂载在执行run时设置参数-v即可实现目录映射,实现原理会在宿主机器创建一个空文件夹#挂载宿主机的/data目录到容器的/app目录dockerrun-d-v/data:/app--namemy-appmy-image#挂载docker内的/usr/share/nginx/html目录到本地机的/app/nghtmldockerrun-d-v/app/nghtml:/usr/share/ngi</div> </li> <li><a href="/article/1902970947133042688.htm" title="vpc网络的原理" target="_blank">vpc网络的原理</a> <span class="text-muted">会探索的小学生</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>一、VPC的基本概念和功能VPC是一个专有的云上私有网络,允许用户在公共云上配置和管理一个逻辑隔离的网络区域。用户可以自定义IP地址范围、创建子网、配置路由表和网络网关。VPC提供了类似于传统数据中心的安全和可配置的私有网络空间,同时又具备云计算的弹性和可扩展性‌二、VPC的关键组件和技术细节vSwitch‌:交换机,组成专有网络的基础网络设备,用于连接不同的云资源。‌vRouter‌:路由器,作</div> </li> <li><a href="/article/1902967417244545024.htm" title="ALO蚁狮优化算法:从背景到实战的全面解析" target="_blank">ALO蚁狮优化算法:从背景到实战的全面解析</a> <span class="text-muted">der丸子吱吱吱</span> <a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E4%BC%98%E5%8C%96%E7%AE%97%E6%B3%95/1.htm">智能优化算法</a><a class="tag" taget="_blank" href="/search/ALO%E7%AE%97%E6%B3%95/1.htm">ALO算法</a> <div>目录引言背景2.1蚁狮优化算法的起源2.2自然启发式算法的背景2.3ALO的发展与应用原理3.1蚁狮的生物行为3.2ALO的数学建模3.3算法流程与关键步骤实战应用4.1函数优化问题4.2工程优化案例4.3组合优化与约束优化代码实现与结果分析5.1Python代码实现5.2实验设计与结果分析5.3性能评估与优化建议学习资源6.1工具推荐6.2网站与文献资源6.3ALO与AI结合的方法结论1.引言在</div> </li> <li><a href="/article/1902961744091869184.htm" title="故事讲解设计模式:观察者模式" target="_blank">故事讲解设计模式:观察者模式</a> <span class="text-muted">yuanpan</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F/1.htm">观察者模式</a> <div>1.故事背景:在一个小镇上,有一家非常受欢迎的报纸店,老板叫老张。这家报纸店每天都会发布最新的新闻,镇上有很多居民都订阅了这家报纸,他们希望能够第一时间收到最新的消息。2.故事发展:老张的报纸店:老张是报纸店的核心,他负责收集新闻、编辑报纸,并在每天早晨发布。问题:老张需要通知所有订阅者,但订阅者数量可能很多,而且可能会随时增加或减少。订阅者们:镇上有几位居民对新闻非常感兴趣,他们是:小李:喜欢体</div> </li> <li><a href="/article/1902956949033512960.htm" title="中高级开发必看!MySQL 面试秘籍助你飞升" target="_blank">中高级开发必看!MySQL 面试秘籍助你飞升</a> <span class="text-muted">七七知享</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/1.htm">学习方法</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>中高级开发必看!MySQL面试秘籍助你飞升想要晋升中高级开发岗位?MySQL面试攻略来助力!这篇CSDN文章堪称你进阶路上的“秘密武器”,从基础概念到高阶优化,全方位覆盖MySQL面试要点,无论是索引原理、查询优化,还是事务处理、主从复制,都有深入解读,助你轻松应对面试官的各类难题,稳稳拿下心仪Offer,向着中高级开发岗位大步迈进!</div> </li> <li><a href="/article/1902954927513202688.htm" title="【人工智能机器学习基础篇】——深入详解无监督学习之降维:PCA与t-SNE的关键概念与核心原理" target="_blank">【人工智能机器学习基础篇】——深入详解无监督学习之降维:PCA与t-SNE的关键概念与核心原理</a> <span class="text-muted">猿享天开</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E6%95%B0%E5%AD%A6%E5%9F%BA%E7%A1%80%E4%B8%93%E8%AE%B2/1.htm">人工智能数学基础专讲</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E7%9B%91%E7%9D%A3%E5%AD%A6%E4%B9%A0/1.htm">无监督学习</a><a class="tag" taget="_blank" href="/search/%E9%99%8D%E7%BB%B4/1.htm">降维</a> <div>深入详解无监督学习之降维:PCA与t-SNE的关键概念与核心原理在当今数据驱动的世界中,数据维度的增多带来了计算复杂性和存储挑战,同时也可能导致模型性能下降,这一现象被称为“维度诅咒”(CurseofDimensionality)。降维作为一种重要的特征提取和数据预处理技术,旨在通过减少数据的维度,保留其主要信息,从而简化数据处理过程,并提升模型的性能。本文将深入探讨两种广泛应用于无监督学习中的降</div> </li> <li><a href="/article/1902948490707791872.htm" title="生成式对抗网络在人工智能艺术创作中的应用与创新研究" target="_blank">生成式对抗网络在人工智能艺术创作中的应用与创新研究</a> <span class="text-muted">辛迎蕌</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>摘要本文深入探究生成式对抗网络(GAN)在人工智能艺术创作领域的应用与创新。通过剖析GAN核心原理,阐述其在图像、音乐、文学等艺术创作中的实践,分析面临的挑战与创新方向,呈现GAN对艺术创作模式的变革,为理解人工智能与艺术融合发展提供全面视角。一、引言在人工智能与艺术深度融合的时代浪潮中,生成式对抗网络(GAN)作为一项突破性技术,为艺术创作带来了全新的可能性。它打破传统创作边界,以独特的对抗学习</div> </li> <li><a href="/article/1902948491613761536.htm" title="知识图谱在人工智能语义理解与推理中的关键作用及发展研究" target="_blank">知识图谱在人工智能语义理解与推理中的关键作用及发展研究</a> <span class="text-muted">@王威&</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>摘要本文聚焦知识图谱,深入剖析其在人工智能语义理解与推理中的核心作用。阐述知识图谱的构建原理、表示方法,分析其在自然语言处理、智能问答系统、推荐系统等多领域助力语义理解与推理的应用,探讨面临的挑战并展望未来发展方向,全面呈现知识图谱对人工智能发展的重要价值与深远影响。一、引言在人工智能追求更精准理解和处理人类语言与知识的进程中,知识图谱成为关键技术。它以结构化形式组织海量知识,揭示实体间复杂关系,</div> </li> <li><a href="/article/1902936630180769792.htm" title="锥面箍接/快拆环突破!拆装效率飙升200%,终结机器人螺丝拆装时代" target="_blank">锥面箍接/快拆环突破!拆装效率飙升200%,终结机器人螺丝拆装时代</a> <span class="text-muted">CodePatentMaster</span> <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E4%BA%BA/1.htm">机器人</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>颠覆性散热革新!宇树科技弹性散热架构让四足机器人稳定性提升40%核心价值杭州宇树科技通过弹性接触式散热仓盖与导流件协同设计,实现计算单元散热效率提升32%且抗冲击性能增强40%,攻克四足机器人高热工况下的核心组件易损难题[1][4]。一、技术原理深度剖析1.痛点定位:高动态场景下的散热与防护两难当前四足机器人的计算单元面临两大挑战:散热瓶颈:传统刚性固定导致接触热阻增加30%以上(见热成像对比数据</div> </li> <li><a href="/article/1902935114485133312.htm" title="-5V、-3V...这种负电压是怎么产生的?附电路详解!" target="_blank">-5V、-3V...这种负电压是怎么产生的?附电路详解!</a> <span class="text-muted">捷配科技</span> <a class="tag" taget="_blank" href="/search/PCB%E5%A4%A7%E5%85%A8/1.htm">PCB大全</a><a class="tag" taget="_blank" href="/search/%E5%88%B6%E9%80%A0/1.htm">制造</a><a class="tag" taget="_blank" href="/search/pcb%E5%B7%A5%E8%89%BA/1.htm">pcb工艺</a><a class="tag" taget="_blank" href="/search/%E6%8D%B7%E9%85%8D/1.htm">捷配</a> <div>在电子电路领域,负电压常常是不可或缺的元素,尤其在运算放大器等应用场景中,为其建立稳定的负电压供电至关重要。以常见的正5V转负5V为例,来探讨负电压产生的电路原理。通常情况下,若要获取负电压,专用的负压产生芯片是首选,如ICL7600、LT1054等,但这些芯片成本相对较高。在单片机电子电路中,有几种常用的负压产生电路,且这些电路往往能巧妙利用单片机的PWM输出功能。很多单片机的PWM输出功能未被</div> </li> <li><a href="/article/1902932832355938304.htm" title="IP归属地查询API:数字世界中的“定位神器”" target="_blank">IP归属地查询API:数字世界中的“定位神器”</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/api/1.htm">api</a> <div>前言在数字时代,IP地址如同网络世界的“身份证”,记录着每个设备的网络足迹。而IP归属地查询API,则是解读这张“身份证”的关键工具,它能够将一串串枯燥的数字转化为具体的地理位置信息,为各行各业提供精准的数据支持。IP归属地查询API:技术原理与应用场景IP归属地查询API的工作原理并不复杂。它通过庞大的IP地址数据库,将IP地址与地理位置信息进行匹配,从而返回查询结果。这些数据库通常由专业的网络</div> </li> <li><a href="/article/1902932713661329408.htm" title="C语言的setjmp和longjmp" target="_blank">C语言的setjmp和longjmp</a> <span class="text-muted">ADM实验室</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>摘要本文描述了C语言中setjmp和longjmp函数的功能和原理,目的是为学习SRS协程原理打下基础。异常处理我们知道,在C++语言中,我们可以通过trycatch机制来捕获函数中的异常,然后从代码正常执行流程突然跳出到catch关键词描述的异常处理代码分支中。在C语言中,没有C++语言这种内置的异常捕获机制,该如何实现类似的功能呢?方法有两个,一是用操作系统提供的异常处理机制,但是这个破坏了C</div> </li> <li><a href="/article/1902930819459117056.htm" title="基于Matlab_simulink仿真相关 控制算法、优化算法相关帮助代做,原理讲解" target="_blank">基于Matlab_simulink仿真相关 控制算法、优化算法相关帮助代做,原理讲解</a> <span class="text-muted">985计算机硕士</span> <a class="tag" taget="_blank" href="/search/%E4%BB%BF%E7%9C%9F%E6%A8%A1%E5%9E%8B/1.htm">仿真模型</a><a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/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>Matlab/simulink仿真相关控制算法、优化算法相关帮助代做,原理讲解:1.优化算法相关:蚁群优化算法,遗传优化算法等2.控制器相关:ADRC控制,鲁棒控制,神经网络控制,MPC等3.神经网络相关:BP神经网络,RBF神经网络,LSTM神经网络等文章目录1.优化算法相关蚁群优化算法(ACO)2.控制器相关ADRC控制3.神经网络相关BP神经网络1.构建光伏系统模型1.1光伏电池模型1.2控</div> </li> <li><a href="/article/1902929683826143232.htm" title="Node.js 格式化时间的两种方法:原生 Date 与 npm 包 moment 详解" target="_blank">Node.js 格式化时间的两种方法:原生 Date 与 npm 包 moment 详解</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/node.js/1.htm">node.js</a><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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a> <div>目录Node.js格式化时间的两种做法:内置方法与npm包1.使用JavaScript内置方法格式化时间示例:使用Date对象格式化时间运行程序示例输出原理解析2.使用npm包moment进行时间格式化安装moment示例:使用moment格式化时间运行程序示例输出原理解析3.两种方法的对比4.结论在Node.js开发中,格式化时间是一个常见的需求。例如,将时间格式化为YYYY-MM-DDHH:m</div> </li> <li><a href="/article/1902927919311810560.htm" title="k8s服务中userspace,iptables,和ipvs的比较" target="_blank">k8s服务中userspace,iptables,和ipvs的比较</a> <span class="text-muted">小刘爱喇石( ˝ᗢ̈˝ )</span> <a class="tag" taget="_blank" href="/search/kubernetes/1.htm">kubernetes</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a> <div>在Kubernetes中,kube-proxy是负责实现服务负载均衡的组件。它支持三种代理模式:userspace、iptables和ipvs。这三种模式在性能、功能和复杂性上有所不同。以下是它们的详细比较:1.Userspace模式Userspace是Kubernetes最早支持的代理模式,kube-proxy在用户空间监听服务的IP和端口,并将流量转发到后端Pod。工作原理kube-proxy</div> </li> <li><a href="/article/1902926784836464640.htm" title="基于FPGA的DDS连续FFT 仿真验证" target="_blank">基于FPGA的DDS连续FFT 仿真验证</a> <span class="text-muted">toonyhe</span> <a class="tag" taget="_blank" href="/search/FPGA%E5%BC%80%E5%8F%91/1.htm">FPGA开发</a><a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a><a class="tag" taget="_blank" href="/search/DDS/1.htm">DDS</a><a class="tag" taget="_blank" href="/search/FFT/1.htm">FFT</a><a class="tag" taget="_blank" href="/search/IFFT/1.htm">IFFT</a> <div>基于FPGA的DDS连续FFT仿真验证1摘要本文聚焦AMDLogiCOREIPFastFourierTransform(FFT)核心,深入剖析其在FPGA设计中的应用。该FFT核心基于Cooley-Tukey算法,具备丰富特性,如支持多种数据精度、算术类型及灵活的运行时配置。文中详细介绍了其架构选项、端口设计、理论运算原理,以及在不同场景下的动态范围特性。同时,结合VivadoDesignSuit</div> </li> <li><a href="/article/1902926779660693504.htm" title="电子签借贷真实吗?315报道引发的行业地震!电子签到底冤不冤?" target="_blank">电子签借贷真实吗?315报道引发的行业地震!电子签到底冤不冤?</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%AD%90%E7%AD%BE/1.htm">电子签</a> <div>看了315的相关报道后,曝光套路贷本来是正向的,却将电子签和高利贷混为一谈。这种无意识的混淆不仅会误导大众,也不利于新兴技术的健康发展。电子签作为一种替代纸质合同签署的新兴技术,有着独特的优势和重要的意义。在过去,不同主体之间签订合同往往需要面对面进行签署,这不仅耗费时间和精力,还会受到地域等因素的限制。而电子签的出现,彻底改变了这一局面。它可以实现线上签署,背后是可靠的实名认证技术,想要在电子签</div> </li> <li><a href="/article/1902925525345693696.htm" title="嵌入式硬件篇---WIFI模块" target="_blank">嵌入式硬件篇---WIFI模块</a> <span class="text-muted">Ronin-Lotus</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BB%A3%E7%A0%81%E7%AF%87/1.htm">程序代码篇</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6%E7%AF%87/1.htm">嵌入式硬件篇</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/WIFI/1.htm">WIFI</a> <div>文章目录前言一、核心工作原理1.物理层(PHY)工作频段2.4GHz5GHz调制技术直接序列扩频正交频分复用高效数据编码2.协议栈架构MAC层Beacon帧4次握手3.核心工作模式二、典型应用场景1.智能家居系统远程控制环境监测视频监测2.工业物联网设备远程运维生产线监控仓储管理3.医疗设备远程诊疗医疗影像药品管理4.消费电子智能音箱游戏设备打印设备三、ESP32开发示例1.环境配置(Platfo</div> </li> <li><a href="/article/1902923256638271488.htm" title="Marker可以快速且准确地将PDF转换为markdown格式。" target="_blank">Marker可以快速且准确地将PDF转换为markdown格式。</a> <span class="text-muted">星霜笔记</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/%E5%85%B3%E6%B3%A8%E7%AE%80%E4%BB%8B%E5%85%8D%E8%B4%B9%E6%BA%90%E7%A0%81/1.htm">关注简介免费源码</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a> <div>MarkerMarker可以快速且准确地将PDF转换为markdown格式。支持多种文档类型(针对书籍和科学论文进行了优化)支持所有语言移除页眉/页脚/其他杂质格式化表格和代码块提取并保存图像以及markdown将大多数方程转换为latex支持在GPU、CPU或MPS上运行工作原理Marker是一个由深度学习模型组成的管道:提取文本,必要时进行OCR处理(启发式算法,surya,tesseract</div> </li> <li><a href="/article/1902921364369633280.htm" title="Win NAS 的数据传输原理分析,超级详细!" target="_blank">Win NAS 的数据传输原理分析,超级详细!</a> <span class="text-muted">DeepSeek+NAS</span> <a class="tag" taget="_blank" href="/search/%E5%AE%B6%E7%94%A8NAS/1.htm">家用NAS</a><a class="tag" taget="_blank" href="/search/WinNAS/1.htm">WinNAS</a><a class="tag" taget="_blank" href="/search/%E9%A3%9E%E7%89%9BNAS/1.htm">飞牛NAS</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%8D%93NAS/1.htm">安卓NAS</a> <div>WinNAS是一款运行在Windows系统上的NAS服务,允许用户通过手机客户端远程访问和管理电脑上的文件。为了实现这一功能,WinNAS与手机之间的数据传输过程涉及多个步骤,具体取决于手机和WinNAS电脑所处的网络环境。以下是整个数据传输过程的详细说明:1.权限认证与连接建立无论手机和WinNAS电脑是否在同一个局域网内,手机客户端在访问WinNAS之前,都需要先通过耘想公司的云服务器进行权限</div> </li> <li><a href="/article/1902917706361925632.htm" title="react 技术栈请问该如何优化 DOM 大小" target="_blank">react 技术栈请问该如何优化 DOM 大小</a> <span class="text-muted">混血哲谈</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</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%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>针对React应用中DOM大小过大的问题,以下是详细的优化方案和具体操作步骤,帮助你提升Lighthouse性能评分和用户体验:一、问题根源分析DOM大小过大(如超过1500个节点或深度超过32层)会导致:渲染性能下降:浏览器解析和渲染DOM的时间增加。内存占用过高:大量DOM节点占用更多内存,影响低端设备表现。交互延迟:事件监听器绑定过多节点时,响应变慢。常见原因:未优化的列表渲染(如长列表一次</div> </li> <li><a href="/article/1902914169116618752.htm" title="WinPcap编程——APR欺骗" target="_blank">WinPcap编程——APR欺骗</a> <span class="text-muted">4ct10n</span> <a class="tag" taget="_blank" href="/search/VC%2B%2B/1.htm">VC++</a><a class="tag" taget="_blank" href="/search/winpcap/1.htm">winpcap</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/arp/1.htm">arp</a> <div>一实验要求利用WinPcap编程,实现基于ARP欺骗的中间人攻击。1)利用WinPcap,分别向被欺骗主机和网关发送APR请求包,达到同时欺骗目标主机和网关的目的;2)所有目标主机和网关之间的数据都会被我们劫持,过滤两者之间的所有http交互数据包,并保存为文件。(http包的过滤可用80端口来标识)二实验原理1选择网卡及过滤规则在这里特别注以下几点:1.charpacket_filter[]="</div> </li> <li><a href="/article/1902904837750714368.htm" title="【AI大模型应用开发】RAG-Fusion框架:忘掉 RAG,未来是 RAG-Fusion" target="_blank">【AI大模型应用开发】RAG-Fusion框架:忘掉 RAG,未来是 RAG-Fusion</a> <span class="text-muted">同学小张</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</a><a class="tag" taget="_blank" href="/search/agi/1.htm">agi</a><a class="tag" taget="_blank" href="/search/embedding/1.htm">embedding</a><a class="tag" taget="_blank" href="/search/RAG/1.htm">RAG</a><a class="tag" taget="_blank" href="/search/prompt/1.htm">prompt</a> <div>大家好,我是同学小张,+v:jasper_8017一起交流,持续学习C++进阶、OpenGL、WebGL知识和AI大模型应用实战案例,持续分享,欢迎大家点赞+关注,共同学习和进步。RAG目前很火,但是也有一些不足的地方。有不足就有改进方法。本文我们来看一个方法:RAG-Fusion,理解其原理,并看一下其实现源码。文章目录0.RAG的不足1.RAG-Fusion原理概述2.步骤拆解与代码示例2.1</div> </li> <li><a href="/article/1902902439292497920.htm" title="30岁了,零基础想转行网安从头开始现实吗?" target="_blank">30岁了,零基础想转行网安从头开始现实吗?</a> <span class="text-muted">白帽子凯哥哥</span> <a class="tag" taget="_blank" href="/search/tcp%2Fip/1.htm">tcp/ip</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>这篇文章没有什么套路。就是一套自学理论和方向,具体的需要配合网络黑白去学习。毕竟是有网络才会有黑白!有自学也有培训!1.打死也不要相信什么分分钟钟教你成为大黑阔的,各种包教包会的教程,就算打不死也不要去购买那些所谓的盗号软件之类的东西。2,我之前让你们在没有目的的时候学习linux,在学习LINUX的同时你第一个遇到的问题就是命令。作为一个黑客入门着来说你必须要懂什么是命令化系统,什么是图形化系统</div> </li> <li><a href="/article/1902889200814977024.htm" title="12.1-12.7学习周报" target="_blank">12.1-12.7学习周报</a> <span class="text-muted">谢m鑫天天揍我</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录摘要Abstract一、k-近邻法二、持续学习总结摘要本周主要学习了k邻近算法的原理和应用场景,了解了持续学习的有关概念和原理。AbstractThisweek,wemainlylearnedtheprinciplesandapplicationscenariosofk-proximityalgorithm,andlearne</div> </li> <li><a href="/article/1902881508503384064.htm" title="【服务器数据恢复】数据中心存储服务器VMware vSAN分布式存储架构数据恢复解析" target="_blank">【服务器数据恢复】数据中心存储服务器VMware vSAN分布式存储架构数据恢复解析</a> <span class="text-muted">海境超备</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E5%AE%89%E5%85%A8/1.htm">系统安全</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>随着企业数据中心的数据量的不断增加,数据存储和恢复成为了企业必须面对的重要问题。vSAN(VirtualStorageAreaNetwork)分布式存储架构是一种新型的存储技术,它可以有效地解决企业数据存储和管理方面的问题。本文将详细介绍vSAN分布式存储架构的原理和特点,并解析其数据恢复的原理和方法。分布式文件系统(DistributedFileSystem,DFS)是一种能够在多台计算机之间共</div> </li> <li><a href="/article/1902879998004490240.htm" title="SpringBoot、Spring、SpringMVC原理梳理" target="_blank">SpringBoot、Spring、SpringMVC原理梳理</a> <span class="text-muted">猛猛开发</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><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>SpringBoot、Spring、SpringMVC原理梳理文章目录SpringBoot、Spring、SpringMVC原理梳理Spring、SpringMVC、SpringBoot三者的关系:Spring和SpringMVC:SpringBoot、Spring:SpringMVC的DispatchServlet解析DispatchServlet初始化:initServletBeaninitW</div> </li> <li><a href="/article/1902879365402783744.htm" title="【人工智能】注意力机制深入理解" target="_blank">【人工智能】注意力机制深入理解</a> <span class="text-muted">问道飞鱼</span> <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E4%B8%8E%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">机器学习与人工智能</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%B3%A8%E6%84%8F%E5%8A%9B%E6%9C%BA%E5%88%B6/1.htm">注意力机制</a> <div>文章目录**一、注意力机制的核心思想****二、传统序列模型的局限性****三、Transformer与自注意力机制****1.自注意力机制的数学公式****四、注意力机制的关键改进****1.稀疏注意力(SparseAttention)****2.相对位置编码(RelativePositionEncoding)****3.图注意力网络(GraphAttentionNetwork,GAN)****</div> </li> <li><a href="/article/1902878105391919104.htm" title="深入理解正则表达式:语法全解析" target="_blank">深入理解正则表达式:语法全解析</a> <span class="text-muted">谢兴豪</span> <div>本文还有配套的精品资源,点击获取简介:正则表达式是一种用于文本匹配的模式,广泛应用在文本处理、数据验证等领域。本文将全面探讨正则表达式的语法细节,包括字符匹配、元字符、字符类、量词、分组与反向引用、选择与否定、位置锚点、预定义字符集、模式修饰符、回溯控制以及正向先行断言和正向后行断言。掌握这些知识有助于提高编程效率和代码质量。1.正则表达式简介正则表达式是IT行业中的“瑞士军刀”,它们在文本处理、</div> </li> <li><a href="/article/34.htm" title="Java 并发包之线程池和原子计数" target="_blank">Java 并发包之线程池和原子计数</a> <span class="text-muted">lijingyao8206</span> <a class="tag" taget="_blank" href="/search/Java%E8%AE%A1%E6%95%B0/1.htm">Java计数</a><a class="tag" taget="_blank" href="/search/ThreadPool/1.htm">ThreadPool</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91%E5%8C%85/1.htm">并发包</a><a class="tag" taget="_blank" href="/search/java%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">java线程池</a> <div>对于大数据量关联的业务处理逻辑,比较直接的想法就是用JDK提供的并发包去解决多线程情况下的业务数据处理。线程池可以提供很好的管理线程的方式,并且可以提高线程利用率,并发包中的原子计数在多线程的情况下可以让我们避免去写一些同步代码。     这里就先把jdk并发包中的线程池处理器ThreadPoolExecutor 以原子计数类AomicInteger 和倒数计时锁C</div> </li> <li><a href="/article/161.htm" title="java编程思想 抽象类和接口" target="_blank">java编程思想 抽象类和接口</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/%E6%8A%BD%E8%B1%A1%E7%B1%BB/1.htm">抽象类</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3/1.htm">接口</a> <div>接口c++对接口和内部类只有简介的支持,但在java中有队这些类的直接支持   1 ,抽象类 :  如果一个类包含一个或多个抽象方法,该类必须限定为抽象类(否者编译器报错)   抽象方法 : 在方法中仅有声明而没有方法体    package com.wj.Interface; </div> </li> <li><a href="/article/288.htm" title="[房地产与大数据]房地产数据挖掘系统" target="_blank">[房地产与大数据]房地产数据挖掘系统</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a> <div>        随着一个关键核心技术的突破,我们已经是独立自主的开发某些先进模块,但是要完全实现,还需要一定的时间...        所以,除了代码工作以外,我们还需要关心一下非技术领域的事件..比如说房地产     &nb</div> </li> <li><a href="/article/415.htm" title="数组队列总结" target="_blank">数组队列总结</a> <span class="text-muted">沐刃青蛟</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84%E9%98%9F%E5%88%97/1.htm">数组队列</a> <div>      数组队列是一种大小可以改变,类型没有定死的类似数组的工具。不过与数组相比,它更具有灵活性。因为它不但不用担心越界问题,而且因为泛型(类似c++中模板的东西)的存在而支持各种类型。      以下是数组队列的功能实现代码:   import List.Student; public class</div> </li> <li><a href="/article/542.htm" title="Oracle存储过程无法编译的解决方法" target="_blank">Oracle存储过程无法编译的解决方法</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B%E3%80%80/1.htm">存储过程 </a> <div>今天同事修改Oracle存储过程又导致2个过程无法被编译,流程规范上的东西,Dave 这里不多说,看看怎么解决问题。   1.     查看无效对象 XEZF@xezf(qs-xezf-db1)> select object_name,object_type,status from all_objects where status='IN</div> </li> <li><a href="/article/669.htm" title="重装系统之后oracle恢复" target="_blank">重装系统之后oracle恢复</a> <span class="text-muted">文强chu</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>前几天正在使用电脑,没有暂停oracle的各种服务。 突然win8.1系统奔溃,无法修复,开机时系统 提示正在搜集错误信息,然后再开机,再提示的无限循环中。 无耐我拿出系统u盘 准备重装系统,没想到竟然无法从u盘引导成功。 晚上到外面早了一家修电脑店,让人家给装了个系统,并且那哥们在我没反应过来的时候, 直接把我的c盘给格式化了 并且清理了注册表,再装系统。 然后的结果就是我的oracl</div> </li> <li><a href="/article/796.htm" title="python学习二( 一些基础语法)" target="_blank">python学习二( 一些基础语法)</a> <span class="text-muted">小桔子</span> <a class="tag" taget="_blank" href="/search/pthon/1.htm">pthon</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95/1.htm">基础语法</a> <div>紧接着把!昨天没看继续看django 官方教程,学了下python的基本语法 与c类语言还是有些小差别: 1.ptyhon的源文件以UTF-8编码格式 2. /   除 结果浮点型 //  除 结果整形 %   除 取余数 *   乘 **  乘方 eg 5**2 结果是5的2次方25 _&</div> </li> <li><a href="/article/923.htm" title="svn 常用命令" target="_blank">svn 常用命令</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a><a class="tag" taget="_blank" href="/search/%E7%89%88%E6%9C%AC%E5%9B%9E%E9%80%80/1.htm">版本回退</a> <div>1 svn回退版本   1)在window中选择log,根据想要回退的内容,选择revert this version或revert chanages from this version 两者的区别:   revert this version:表示回退到当前版本(该版本后的版本全部作废)   revert chanages from this versio</div> </li> <li><a href="/article/1050.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,包的范围。。。public,private,protect. --悲剧了 2,hashcode方法和equals方法的区别。谁覆盖谁.结果,他说我说反了。 3,最恶心的一道题,抽象类继承抽象类吗?(察,一般它都是被继承的啊) 4,stru</div> </li> <li><a href="/article/1177.htm" title="动态数组的存储速度比较 集合框架" target="_blank">动态数组的存储速度比较 集合框架</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E9%9B%86%E5%90%88%E6%A1%86%E6%9E%B6/1.htm">集合框架</a> <div>集合框架: 自定义数据结构(增删改查等) package 数组; /** * 创建动态数组 * @author 百合 * */ public class ArrayDemo{ //定义一个数组来存放数据 String[] src = new String[0]; /** * 增加元素加入容器 * @param s要加入容器</div> </li> <li><a href="/article/1304.htm" title="用JS实现一个JS对象,对象里有两个属性一个方法" target="_blank">用JS实现一个JS对象,对象里有两个属性一个方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/js%E5%AF%B9%E8%B1%A1/1.htm">js对象</a> <div><html> <head> </head> <body> 用js代码实现一个js对象,对象里有两个属性,一个方法 </body> <script> var obj={a:'1234567',b:'bbbbbbbbbb',c:function(x){ </div> </li> <li><a href="/article/1431.htm" title="探索JUnit4扩展:使用Rule" target="_blank">探索JUnit4扩展:使用Rule</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%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/Rule/1.htm">Rule</a> <div>        在上一篇文章中,讨论了使用Runner扩展JUnit4的方式,即直接修改Test Runner的实现(BlockJUnit4ClassRunner)。但这种方法显然不便于灵活地添加或删除扩展功能。下面将使用JUnit4.7才开始引入的扩展方式——Rule来实现相同的扩展功能。 1. Rule       &n</div> </li> <li><a href="/article/1558.htm" title="[Gson一]非泛型POJO对象的反序列化" target="_blank">[Gson一]非泛型POJO对象的反序列化</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a> <div>当要将JSON数据串反序列化自身为非泛型的POJO时,使用Gson.fromJson(String, Class)方法。自身为非泛型的POJO的包括两种: 1. POJO对象不包含任何泛型的字段 2. POJO对象包含泛型字段,例如泛型集合或者泛型类 Data类 a.不是泛型类, b.Data中的集合List和Map都是泛型的 c.Data中不包含其它的POJO    </div> </li> <li><a href="/article/1685.htm" title="【Kakfa五】Kafka Producer和Consumer基本使用" target="_blank">【Kakfa五】Kafka Producer和Consumer基本使用</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>0.Kafka服务器的配置 一个Broker, 一个Topic Topic中只有一个Partition()   1. Producer: package kafka.examples.producers; import kafka.producer.KeyedMessage; import kafka.javaapi.producer.Producer; impor</div> </li> <li><a href="/article/1812.htm" title="lsyncd实时同步搭建指南——取代rsync+inotify" target="_blank">lsyncd实时同步搭建指南——取代rsync+inotify</a> <span class="text-muted">ronin47</span> <div>1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案,原先使用的是 inotify + rsync,但随着文件数量的增大到100W+,目录下的文件列表就达20M,在网络状况不佳或者限速的情况下,变更的文件可能10来个才几M,却因此要发送的文件列表就达20M,严重减低的带宽的使用效率以及同步效率;更为要紧的是,加入inotify</div> </li> <li><a href="/article/1939.htm" title="java-9. 判断整数序列是不是二元查找树的后序遍历结果" target="_blank">java-9. 判断整数序列是不是二元查找树的后序遍历结果</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class IsBinTreePostTraverse{ static boolean isBSTPostOrder(int[] a){ if(a==null){ return false; } /*1.只有一个结点时,肯定是查找树 *2.只有两个结点时,肯定是查找树。例如{5,6}对应的BST是 6 {6,5}对应的BST是</div> </li> <li><a href="/article/2066.htm" title="MySQL的sum函数返回的类型" target="_blank">MySQL的sum函数返回的类型</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> <div>今天项目切换数据库时,出错 访问数据库的代码大概是这样: String sql = "select sum(number) as sumNumberOfOneDay from tableName"; List<Map> rows = getJdbcTemplate().queryForList(sql); for (Map row : rows</div> </li> <li><a href="/article/2193.htm" title="java设计模式之单例模式" target="_blank">java设计模式之单例模式</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/java%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">java设计模式</a> <div> 在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的:   作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例。这个类称为单例类。 单例模式的结构   单例模式的特点: 单例类只能有一个实例。 单例类必须自己创建自己的唯一实例。 单例类必须给所有其他对象提供这一实例。   饿汉式单例类   publ</div> </li> <li><a href="/article/2320.htm" title="javascript取当月最后一天" target="_blank">javascript取当月最后一天</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div> <!--javascript取当月最后一天--> <script language=javascript> var current = new Date(); var year = current.getYear(); var month = current.getMonth(); showMonthLastDay(year, mont</div> </li> <li><a href="/article/2447.htm" title="linux tune2fs命令详解" target="_blank">linux tune2fs命令详解</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/tune2fs/1.htm">tune2fs</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E7%9C%8B%E7%B3%BB%E7%BB%9F%E6%96%87%E4%BB%B6%E5%9D%97%E4%BF%A1%E6%81%AF/1.htm">查看系统文件块信息</a> <div>一.简介: tune2fs是调整和查看ext2/ext3文件系统的文件系统参数,Windows下面如果出现意外断电死机情况,下次开机一般都会出现系统自检。Linux系统下面也有文件系统自检,而且是可以通过tune2fs命令,自行定义自检周期及方式。 二.用法: Usage: tune2fs [-c max_mounts_count] [-e errors_behavior] [-g grou</div> </li> <li><a href="/article/2574.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> <div>  从出版业说起 网络作品排到靠前的,都不会太难看,一般人不爱看某部作品也是因为不喜欢这个类型,而此人也不会全不喜欢这些网络作品。究其原因,是因为网络作品都是让人先白看的,看的好了才出了头。而纸质作品就不一定了,排行榜靠前的,有好作品,也有垃圾。 许多大牛都是写了博客,后来出了书。这些书也都不次,可能有人让为不好,是因为技术书不像小说,小说在读故事,技术书是在学知识或温习知识,有</div> </li> <li><a href="/article/2701.htm" title="Android:TextView属性大全" target="_blank">Android:TextView属性大全</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/textview/1.htm">textview</a> <div>android:autoLink    设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接。可选值(none/web/email/phone/map/all)  android:autoText    如果设置,将自动执行输入值的拼写纠正。此处无效果,在显示输入法并输</div> </li> <li><a href="/article/2828.htm" title="tomcat虚拟目录安装及其配置" target="_blank">tomcat虚拟目录安装及其配置</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/tomcat%E9%85%8D%E7%BD%AE%E8%AF%B4%E6%98%8E/1.htm">tomcat配置说明</a><a class="tag" taget="_blank" href="/search/tomca%E9%83%A8%E7%BD%B2web%E5%BA%94%E7%94%A8/1.htm">tomca部署web应用</a><a class="tag" taget="_blank" href="/search/tomcat%E8%99%9A%E6%8B%9F%E7%9B%AE%E5%BD%95%E5%AE%89%E8%A3%85/1.htm">tomcat虚拟目录安装</a> <div>转载请出自出处:http://eksliang.iteye.com/blog/2097184 1.-------------------------------------------tomcat  目录结构 config:存放tomcat的配置文件 temp  :存放tomcat跑起来后存放临时文件用的 work   : 当第一次访问应用中的jsp</div> </li> <li><a href="/article/2955.htm" title="浅谈:APP有哪些常被黑客利用的安全漏洞" target="_blank">浅谈:APP有哪些常被黑客利用的安全漏洞</a> <span class="text-muted">gg163</span> <a class="tag" taget="_blank" href="/search/APP/1.htm">APP</a> <div>首先,说到APP的安全漏洞,身为程序猿的大家应该不陌生;如果抛开安卓自身开源的问题的话,其主要产生的原因就是开发过程中疏忽或者代码不严谨引起的。但这些责任也不能怪在程序猿头上,有时会因为BOSS时间催得紧等很多可观原因。由国内移动应用安全检测团队爱内测(ineice.com)的CTO给我们浅谈关于Android 系统的开源设计以及生态环境。 1. 应用反编译漏洞:APK 包非常容易被反编译成可读</div> </li> <li><a href="/article/3082.htm" title="C#根据网址生成静态页面" target="_blank">C#根据网址生成静态页面</a> <span class="text-muted">hvt</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a> <div>HoverTree开源项目中HoverTreeWeb.HVTPanel的Index.aspx文件是后台管理的首页。包含生成留言板首页,以及显示用户名,退出等功能。根据网址生成页面的方法:   bool CreateHtmlFile(string url, string path) { //http://keleyi.com/a/bjae/3d10wfax.htm stri</div> </li> <li><a href="/article/3209.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 简介 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 学习之前应具备的基础知识: 继续学习之前,你应该对以下内容有基本的了解: HTML XML 基础 如果希望首先学习这些内容,请在本站的首页选择相应的教程。 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量</div> </li> <li><a href="/article/3336.htm" title="一个简单的java栈" target="_blank">一个简单的java栈</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/%E6%A0%88/1.htm">栈</a> <div> public class MyStack { private long[] arr; private int top; public MyStack() { arr = new long[10]; top = -1; } public MyStack(int maxsize) { arr = new long[maxsize]; top </div> </li> <li><a href="/article/3463.htm" title="基础数据结构和算法八:Binary search" target="_blank">基础数据结构和算法八:Binary search</a> <span class="text-muted">sunwinner</span> <a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/Binary+search/1.htm">Binary search</a> <div>Binary search needs an ordered array so that it can use array indexing to dramatically reduce the number of compares required for each search, using the classic and venerable binary search algori</div> </li> <li><a href="/article/3590.htm" title="12个C语言面试题,涉及指针、进程、运算、结构体、函数、内存,看看你能做出几个!" target="_blank">12个C语言面试题,涉及指针、进程、运算、结构体、函数、内存,看看你能做出几个!</a> <span class="text-muted">刘星宇</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>12个C语言面试题,涉及指针、进程、运算、结构体、函数、内存,看看你能做出几个! 1.gets()函数 问:请找出下面代码里的问题: #include<stdio.h> int main(void) {     char buff[10];     memset(buff,0,sizeof(buff)); </div> </li> <li><a href="/article/3717.htm" title="ITeye 7月技术图书有奖试读获奖名单公布" target="_blank">ITeye 7月技术图书有奖试读获奖名单公布</a> <span class="text-muted">ITeye管理员</span> <a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a><a class="tag" taget="_blank" href="/search/ITeye/1.htm">ITeye</a><a class="tag" taget="_blank" href="/search/%E8%AF%95%E8%AF%BB/1.htm">试读</a> <div>ITeye携手人民邮电出版社图灵教育共同举办的7月技术图书有奖试读活动已圆满结束,非常感谢广大用户对本次活动的关注与参与。 7月试读活动回顾: http://webmaster.iteye.com/blog/2092746 本次技术图书试读活动的优秀奖获奖名单及相应作品如下(优秀文章有很多,但名额有限,没获奖并不代表不优秀): 《Java性能优化权威指南》 </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>