HSEJ模式是最新研究出来的先进UI架构，它的特点是基于群众基础广泛的jQuery，学习成本极低，代码极其轻量。它先进的理念使得它比MVC、MVP、MVVM和FLUX、REFLUX、REDUX等框架不知高到哪里去了。

首先是代码量，HSEJ模式依赖的jQuery大小仅仅34.5k，而相比之下react.js竟然达到惊人的133k。

我们先来了解一下HSEJ的名词：

H-HTML:就是我们写的HTML代码，这没什么好解释的。
S-Selector:选择器，选择器是由jQuery首创的一种非常先进的操作HTML的方法。
E-Event:事件，事件是jQuery的一些方法，经过高度封装之后，可以响应用户的各种操作。
J-JavaScript:JavaScript是jQuery的一部分功能，提供了极其强大的图灵完备的拼接字符串的能力，其中最厉害的就是$字符。$在jQuery中有九种作用，其它任何一个框架的任何函数都没有这么强大。此外，JavaScript是基于对象的，而不是面向对象的。

下面我们来看看HSEJ模式的架构图，为了对比，我放上了最近特别火的FLUX的架构图：

两张图是如此之相似，那么各位一定有一个疑惑，那就是，到底为什么这么相似？

没错，跟你想的一样，HSEJ模式随着jQuery发布就已经普及了，只是开发jQuery的大师们担心你们前端太low才没好意思提出来，React不过是最近几年的事情，谁抄谁的一目了然。

由此可见，React不过是窃取了广大jQuery开发者的智慧，改了个名字重新卖卖概念的二道贩子罢了，Facebook公司这样的人品，怎么能让它来到中国呢？

HSEJ的用户操作响应过程如下：

用户点击了HTML元素=>通过选择器和事件找到JavaScript代码=>在JavaScript中拼接HTML字符串=>通过选择器把字符串填回去

下面我们来看一段例子：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <div>
      <p>
        Clicked: <span id="value">0</span> times
        <button id="increment">+</button>
      </p>
    </div>
    <script>
      $('#increment').click(function(){
        $('#value').html(parseInt($('#value').html())++)
      })
    </script>

而同样的功能，用redux来实现，则是以下代码：

    <script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
    <div>
      <p>
        Clicked: <span id="value">0</span> times
        <button id="increment">+</button>
      </p>
    </div>
    <script>
      function counter(state, action) {
        if (typeof state === 'undefined') {
          return 0
        }
        switch (action.type) {
          case 'INCREMENT':
            return state + 1
          default:
            return state
        }
      }
      var store = Redux.createStore(counter)
      var valueEl = document.getElementById('value')
      function render() {
        valueEl.innerHTML = store.getState().toString()
      }
      render()
      store.subscribe(render)
      document.getElementById('increment')
        .addEventListener('click', function () {
          store.dispatch({ type: 'INCREMENT' })
        })

    </script>

你说他们是不是有病？

HSEJ模式的提出标志着前端进入了超越以往客户端UI架构的全新时代来临，希望大家好好学习，节日快乐。