前端框架对比之vue与regular(一)

每次一写到Regular总是忍不住先介绍一下，Regualr是网易杭州研究所的一位叫郑海波的大神写的一款前端框架，目前 
这款框架推广的不深，加上其和angular过于相似的框架名，导致接受力并不大，其实Regular这款框架在我 
看来已经很完善了。在网易呆了一段时间，写的几个项目都是用的Regualr,在之前我主要是用vue比较多， 
所以开发过程中总忍不住将这两个框架进行对比。本文主要对实际开发代码进行对比，我个人是认为各有千秋，具体的请大家自行判断。

一.插值

1）文本插值：
        regular和vue的插值方法并没有什么区别
        vue: 不过vue默认以{{Expression}}的形式展现
        regular:而regular则以{Expression}的形式展现，目前可以用下面的方法更改开闭符号

Regular.config({
  'BEGIN': '{{',
  'END': '}}'
})

2）属性插值：

vue:应用v-bind指令，如下把id这个属性用v-bind:的形式绑定到div上，属性值动态从data中获取

<div v-bind:id="dynamicId"></div>

regular:与文本插值一样的写法，｛｝里代表从data中动态获取的数据

<div id="{dynamicId}"></div>

3）插入表达式

vue:

<div v-bind:id=" 'list-' +id"></div>

regular:

<div id="list-{id}"></div>

效果都是给div一个以list-开始的id

vue:

<div>{{ message.split('').reverse().join('') }}</div>

regular:

<div>{ message.split('').reverse().join('') }</div>

二：指令

regular:以r-为前缀的特殊属性，regular中最常使用的是r-hide以及r-show

vue:以v-为前缀的特殊属性，vue对指令的使用要频繁的多，基本上处处指令，如v-if/v-bind/v-on,v-if用来判断是否渲染，v-bind用来响应的更新html属性，v-on则用来监听事件

下面会对一些指令的用法进行详细的解释

三：关于条件渲染

regular:用｛#if 判断语句｝｛#elseif 判断语句｝ ｛#else ｝ {/if}的形式进行条件渲染

 {#if load == 1}
       <div>上拉加载更多</div>
    {#elseif load == 2}
       <div class="loading">正在加载</div>
    {#elseif load == 3}
       <div>以上为所有内容</div>
    {/if}

其中load是在data中定义的

vue:用<div v-if="判断语句"></div><div v-elseif="判断语句"></div><div v-else="判断语句"></div>的形式进行条件渲染

<div v-if="load ==='1' ">
         上拉加载更多
</div>
<div v-else-if="load ==='2">
          正在加载
</div>
<div v-else>
以上为所有内容
</div>

其中load为data中定义的。

四：关于列表渲染

regular:regular中用｛#list 列表 as ｝｛/list｝的形式进行渲染

{#list attendanceList as att}
         <div class="wrap">
            <div class="item">
                <p class="time">{att.dataTime}</p>
                 <p class="address">
                    <span class="u-icon u-icon-loc"></span>
                    {att.location}
                 </p>
              </div>
           </div>
{/list}

vue:vue中用<div v-for="变量 in 列表"></div>的形式渲染

<ol>
   <li v-for="todo in todos">
          {{todo.text}}
    </li>
</ol>

五：v-if/v-show和{#if}/r-show的区别

v-if和｛#if｝ 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

同时他们 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下， v-show 和 r-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说， v-if/{#if} 有更高的切换开销，而 v-show/r-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show/r-show 较好；如果在运行时条件不太可能改变，则使用 v-if /{/if}较好。

六：对比两者js文件区别

vue:

          var app4 = new Vue({
                el:'#app4',
                data:{
                   message:'Hello',
                   number:[1,2,3,4,5]
                },
                computed:{
                    reversedMessage:function(){
                        return this.message.split('').reserve()
                    }
                },
                methods:{
                    even:function(number){
                         return number.filter(function(number){
                              return number%2 === 0
                          })
                    }
                }

            });
            app4.todos.push({text:"444"})

在此例中可以看出进行操作的是#app4模版，data里为#app模块需要用到的数据，method为模块用到的方法,computed为计算属性，调用时可直接用｛｛reversedMessage｝｝调用。

regular:

      data: {
            currentDate: ''
 
        },
        init: function() {
             this.data.currentDate = 1;
             this.setdata();
        },
        setdata: function(){
            this.data.currentDate = 2;
             alert(  this.data.currentDate);
         }

简单的regular应用主要由上面几个部分解决，data中写全局的数据，init是初始化执行的函数，可以把页面初始化就要更改的数据，方法在此函数中更改和引用。setdata:function为自定义函数。

本文就说这些了，下一篇我会从组件，ajax交互，及性能优化方面继续和大家探讨这两款看似相似又有很大不同的前端框架。本文纯属个人经验，如有不对的地方，欢迎指正。

---恢复内容结束---

每次一写到Regular总是忍不住先介绍一下，Regualr是网易杭州研究所的一位叫郑海波的大神写的一款前端框架，目前 
这款框架推广的不深，加上其和angular过于相似的框架名，导致接受力并不大，其实Regular这款框架在我 
看来已经很完善了。在网易呆了一段时间，写的几个项目都是用的Regualr,在之前我主要是用vue比较多， 
所以开发过程中总忍不住将这两个框架进行对比。本文主要对实际开发代码进行对比，我个人是认为各有千秋，具体的请大家自行判断。

一.插值

1）文本插值：
        regular和vue的插值方法并没有什么区别
        vue: 不过vue默认以{{Expression}}的形式展现
        regular:而regular则以{Expression}的形式展现，目前可以用下面的方法更改开闭符号

Regular.config({
  'BEGIN': '{{',
  'END': '}}'
})

2）属性插值：

vue:应用v-bind指令，如下把id这个属性用v-bind:的形式绑定到div上，属性值动态从data中获取

<div v-bind:id="dynamicId"></div>

regular:与文本插值一样的写法，｛｝里代表从data中动态获取的数据

<div id="{dynamicId}"></div>

3）插入表达式

vue:

<div v-bind:id=" 'list-' +id"></div>

regular:

<div id="list-{id}"></div>

效果都是给div一个以list-开始的id

vue:

<div>{{ message.split('').reverse().join('') }}</div>

regular:

<div>{ message.split('').reverse().join('') }</div>

二：指令

regular:以r-为前缀的特殊属性，regular中最常使用的是r-hide以及r-show

vue:以v-为前缀的特殊属性，vue对指令的使用要频繁的多，基本上处处指令，如v-if/v-bind/v-on,v-if用来判断是否渲染，v-bind用来响应的更新html属性，v-on则用来监听事件

下面会对一些指令的用法进行详细的解释

三：关于条件渲染

regular:用｛#if 判断语句｝｛#elseif 判断语句｝ ｛#else ｝ {/if}的形式进行条件渲染

 {#if load == 1}
       <div>上拉加载更多</div>
    {#elseif load == 2}
       <div class="loading">正在加载</div>
    {#elseif load == 3}
       <div>以上为所有内容</div>
    {/if}

其中load是在data中定义的

vue:用<div v-if="判断语句"></div><div v-elseif="判断语句"></div><div v-else="判断语句"></div>的形式进行条件渲染

<div v-if="load ==='1' ">
         上拉加载更多
</div>
<div v-else-if="load ==='2">
          正在加载
</div>
<div v-else>
以上为所有内容
</div>

其中load为data中定义的。

四：关于列表渲染

regular:regular中用｛#list 列表 as ｝｛/list｝的形式进行渲染

{#list attendanceList as att}
         <div class="wrap">
            <div class="item">
                <p class="time">{att.dataTime}</p>
                 <p class="address">
                    <span class="u-icon u-icon-loc"></span>
                    {att.location}
                 </p>
              </div>
           </div>
{/list}

vue:vue中用<div v-for="变量 in 列表"></div>的形式渲染

<ol>
   <li v-for="todo in todos">
          {{todo.text}}
    </li>
</ol>

五：v-if/v-show和{#if}/r-show的区别

v-if和｛#if｝ 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

同时他们 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下， v-show 和 r-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说， v-if/{#if} 有更高的切换开销，而 v-show/r-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show/r-show 较好；如果在运行时条件不太可能改变，则使用 v-if /{/if}较好。

六：对比两者js文件区别

vue:

          var app4 = new Vue({
                el:'#app4',
                data:{
                   message:'Hello',
                   number:[1,2,3,4,5]
                },
                computed:{
                    reversedMessage:function(){
                        return this.message.split('').reserve()
                    }
                },
                methods:{
                    even:function(number){
                         return number.filter(function(number){
                              return number%2 === 0
                          })
                    }
                }

            });
            app4.todos.push({text:"444"})

在此例中可以看出进行操作的是#app4模版，data里为#app模块需要用到的数据，method为模块用到的方法,computed为计算属性，调用时可直接用｛｛reversedMessage｝｝调用。

regular:

      data: {
            currentDate: ''
 
        },
        init: function() {
             this.data.currentDate = 1;
             this.setdata();
        },
        setdata: function(){
            this.data.currentDate = 2;
             alert(  this.data.currentDate);
         }

简单的regular应用主要由上面几个部分解决，data中写全局的数据，init是初始化执行的函数，可以把页面初始化就要更改的数据，方法在此函数中更改和引用。setdata:function为自定义函数。

本文就说这些了，下一篇我会从组件，ajax交互，及性能优化方面继续和大家探讨这两款看似相似又有很大不同的前端框架。本文纯属个人经验，如有不对的地方，欢迎指正。