一种全新的UI架构——HSEJ模式

[wintercn]

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架构的全新时代来临，希望大家好好学习，节日快乐。

[ethe]

💯

[catboy1006]

6666666

[k-jay-wang]

这个我给82分，剩下的以666的形式附上……

[deasel]

还是你们城里人会玩

[Tommassissimo]

高大上，是时候学起来了呢.......

[Justineo]

看成 HESJ 模式了，还以为是贺老提出来的呢

[lealife]

这个模式我喜欢, 前端就要这么直接简单明了.

[feibinyang]

节日愉快...

[Gaohaoyang]

哈哈哈节日快乐

[xinglie]

赶紧学习下 ～～～

[Xujkstra]

干得漂亮

[mtsee]

6666666666666666 碉堡了~ 哈哈~

[zhou-yg]

82分好吧，剩下的666

[nikoohp]

6666666

[johnninja]

很好的解释了Facebook为什么不能来中国的原因

[HustLiuCN]

光天化日之下一本道⋯⋯

[agileago]

这个架构太先进了！！下个项目就要使用了，小伙伴们太开心了

[airyland]

哈哈哈哈 💯

[hotoo]

这个架构我给 💯 分。

[kaiailu]

哈哈哈 6666666666

[chaoren1641]

太简洁了，学到不少，谢谢楼主。

[kaiailu]

瞎说什么大实话！

[karoo]

6666

[jincdream]

恍然大悟

but

最大的区别应该在数据、组件、通信的问题上。

[malcolmyu]

目瞪口呆.jpg

[ginny315]

2016年最流行模式HSEJ模式

[VectorHo]

。。。

[l3ve]

世界最屌的js框架 非VanillaJs莫属

[hax]

今日最佳！

[Tankpt]

膜拜

[LeoEatle]

##这就是我要的前端框架！

[sijinglei]

楼主，敢说真话，挺你！！不过这是2016年的，现在呢？

[benmo1602]

2020-8-6 签到