现在的web框架为什么把html和js又结合在一起了？

Question

有个问题，以前不是一直说不要把html和js结合在一起，比如<div onclick="aaa()"></div>
那么为什么现在的web框架似乎都是结合在一起呢？
比如angualr(ng-click),vue(v-click),react(onClick)
是因为现在什么理念变了吗？

Answer 1

理念还是一样的，仍然不建议随便使用全局变量，比如 aaa。而 ng 和 vue 这种框架的一个比较重要的理念是绑定，要达到的目标就是仅通过对数据的操作描述业务。你看到的 ng-click 和 v-click 实际上是声明视图和逻辑（包含数据和方法）的绑定关系，逻辑还是被建议写在单独的 js 文件里面的。

这中间有很长一段是 jQuery 时代，jQuery 的理念其实很像 CSS，用选择器指定元素，然后对这些元素批量进行处理（主要是 DOM 操作）。然而这也造成了和 CSS 同样的问题，从 HTML 代码看不出这里的文字是什么时候显示的，有着什么样的逻辑，需要依赖查看器来调试定位问题。这让人们怀念起原生 onClick 的好。

最后就一个和问题无关的争论多嘴一下，前端正经历一次（可能是有史以来第一次）软件危机，大概是从 Ajax 盛行之时开始的，人们对 WEB 交互体验的要求越来越高，希望把一些传统的桌面应用也放到 WEB 上面去，这着实给了前端不小的压力，虽然 jQuery 闪耀着光芒出现，但仍然不足以化解这场危机，因为还有太多没有经验的工程师，在无形中会把软件慢慢推向悬崖边缘。每天都在出新的前端框架和工具，可以看作是工程师们疯狂的逃亡，危机总会过去，技术栈也会趋于稳定，人们会赞颂活下来灵魂的，忘记死去的尸骨。无论是在前端还是其他技术系统，危机总会再次到来，故事还会重复。

Answer 2

因为前端圈的人爱折腾。

Answer 3

以前只是代码和数据分离。但是界面的动态化特性越来越多，很多数据也是从服务器获得的，分离的写法就没有优势了，反正还是要写复杂的DOM操作，还得同时看两种文件。现在是层次化、模块化，简化了JS的写法，把表现层相关的放在一起。

Answer 4

不仅是html和js，还包括css，甚至还包括其它资源，比如图片。

这是组件化、模块化的具体表现。

Answer 5

并不是把html和js结合，而且把js中关于dom操作的部分合并到view层

Answer 6

简单来说就是之前的方便后端渲染模板，现在这样又不用其他人插手代码，都是自己写，写一块方便一点

主要一点就是，html js css是不可分离的他们应该是一个整体，但是又分别使用不同的表达方法

Answer 7

我大概复述一下上面的答案，不知道对不对。意思是因为现在组件化的时代，所以html和js操作的部分结合在一起看上去感觉更直观，并且维护难度也不像早期那么大了，而且数据结合当前层也是一个原因；而且在框架的帮助下，不会出现全局变量的情况了。
看了大家的答案，不知道是不是这个意思？

Answer 8

我觉得Vue之类框架跟jQuery库的理念是不同的.

jQuery顾名思义就是JS Query DOM,理念是"事件监听+DOM操作",通过DOM操作分离HTML和JS,可以理解为分离HTML界面和JS逻辑.另外jQuery也对常用的"AJAX回调"和"动画"以及一些"常用操作(如$.each和$.trim)"进行封装.也就是说用jQuery编程跟用原始JS编程的理念是一样的,只不过用jQuery能让你"Write Less Do More".

Vue之类MVVM框架的特点就在于VM(View-Model),也就是"视图模型双向绑定":
View <=> DOM Listeners / Data Bindings <=> Model
Vue"视图模型双向绑定"的底层实现一样是"事件监听+DOM操作",好处在于它不需要开发者来进行DOM操作.
比如在input里输入内容,在input下即时显示:

Vue:
<div id="demo">
    <input v-model="message">
    <p>{{message}}</p>
</div>
var demo = new Vue({
    el: '#demo', 
    data: {message: 'Hello Vue.js!'}
});

jQuery:
<div id="demo">
    <input>
    <p></p>
</div>
$("#demo input").on("keyup", function() {
    $("#demo p").empty().text(this.value);
});

再看一个复杂点的例子,感受下两者的区别.
在input中输入内容后按enter键往ul里添加一条li和删除:
事件监听: v-on:keyup.enter (按enter键)
数据模型: v-model

Vue:
<div id="app">
    <input v-model="newTodo" v-on:keyup.enter="addTodo">
    <ul>
        <li v-for="todo in todos">
            <span>{{todo.text}}</span>
            <button v-on:click="removeTodo($index)">X</botton>
        </li>
    </ul>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        newTodo: '',
        todos: [{text: 'Add some todos'}]
    },
    methods: {
        addTodo: function() {
            var text = this.newTodo.trim();
            if(text) {
                this.todos.push({text: text});
                this.newTodo = '';
            }
        },
        removeTodo: function(index) {
            this.todos.splice(index, 1); //从下标index开始,删除1个元素
        }
    }
});

jQuery:
<div id="app">
    <input>
    <ul>
        <li><span>jQuery</span> <button>X</button></li>
    </ul>
</div>
//处理enter添加事件
$("#app input").on("keyup", function(e){
    if(e.keyCode == 13 && $(this).val() != "") {
        $("#app ul").append("<li>"+this.value+" <button>X</button></li>");
        $(this).val("").focus();
    }
}).focus();
//处理button删除事件
$("#app").on("click", "button", function(){
    $(this).parent().remove();
});

从回调函数里的操作可以看出,Vue是面向数据编程,jQuery是面向DOM编程.