前端工程里面看起来像 html 的代码其实是一个模版，会通过 js 渲染出真正的 html 代码，还可以在模版里通过指令来调用框架的一些接口。所以逻辑上讲 js 代码和模版是强耦合的，没必要分开。Vue 的文件那种格式相当于一种语法糖，最终还是编译成纯 js 再进行渲染的。

Vue 会把 html 文件弄得一团糟，相比 React 的 JSX 来说，Vue 用起来真的不是很舒服

谢谢，这么看来，React 等，均是把 html 和 javascript 放在一起，作为一个整体进行考虑的？我倒是喜欢：html 和 javascript 分开的。

angular 欢迎你

喜欢逻辑和模版分离可以用 Ember.js。

现在趋势是逻辑、模版和样式放在一起，预编译成 JavaScript 然后以组件为单位 import。

这个是思维模式的问题，并不是 html 和 javascript 放一起这么简单的结论。vue 目前是我在生产中使用的框架，他的组件化非常的好用，每一个组件只去做 2 件事 1 我长什么样子（html css）2 我做什么事情（js）。这样的结果是你的整个项目都是有很多很多的组件组成的，底层的组件里有基础的 html 标签和 css，还有一些基础动作的 js。上层逻辑的组件里基本上没有基础 html 了，他都是由底层组件组成的，然后 js 里是实现自己要做什么。

谢谢如此清晰的回复。这也是我对 html 和 javascript 放在一起的疑问的所在。

一个组件，即考虑了长得样子（html css）又考虑逻辑（javascript），是不是，整个网站的整体布局，就无法一目了然了？（相反：在 html 和 javascript 分离较好的情况下，能够比较好地把握整体感觉和调整布局。）

是否，像 Vue, React 的项目，因为负责长得样子的部分（html,css) 和负责行为逻辑的部分（javascript）强耦合的关系，一旦要修改页面布局、颜色（就是修改长得样子），也必须深入底层组件才行，如果这样，是不是太复杂了？

谢谢，我也去了解一下 Ember.js

不管喜不喜欢这种方式，建议先尝试一下 React。对后端分层的理解套用到前端并不是完全适用的。另外，严格来说，在 React 里写的不算 html，而是用 xml 的方式描述组件嵌套关系，并且最终会编译成 javascript。

对后端而言，view 层的最终任务都是渲染出一段 html，然后就没事了，所以相对简单一些。但对前端而言，渲染出 html 只是开始，后面还会继续处理交互逻辑，更新内部状态，重新渲染 UI。所以前端的 view 层不仅要处理展现，还要响应一些行为（并不仅仅是底层事件），这两者密不可分，很多时候需要一起修改。但模板和 javascript 分开的项目需要分两个文件，如果是按类型分的项目结构，两个文件还安排在不同的目录下，比如 app/templates 和 app/views ，再加上负责纯展现的 css 甚至可能在另一个地方，这在实际开发的时候并不方便。

这也是前端推崇组件化的原因之一，把本来就该在一起的东西放一起。React 给出的解决方法是 JSX，抛开成见看还是很方便的。另外可以带来一些额外的好处，比如用 javascript 作为一门完整的语言比受限的模板语法可以做的更多。所有对 javascript 代码组织的技巧都可以用来描述 view 层。这对喜欢这种模式的开发者来说是极大的方便，不过也提高了对人的要求。

也是一种思路，好像把原本后端的不少任务，都移到 javascript 里面去了，javascript 变得很重，还和 html 耦合。具体效果怎么样？除了 FaceBook 等超大型网站之外，有中等网站，用 React 或者 Vue 的例子吗？

不会的~ 所谓的底层实际上就是一些基础组件的样子 比方说 form table button 包括一些 section。推荐你看看 iView 这个 vue 的 UI 组件 我会觉得对你的理解会有帮助~ 他就是很标准的一个底层组件库

有一定影响，不过问题大不大，还是取决于人。

你是否会因为一个软件有一些高层抽象而看不清楚全貌？这取决于软件的复杂程度，也取决于开发者的设计水平和抽象能力。好项目会先给告诉你有哪些大块，等了解深入后再去探索每一块的内部分层。你也许无法看清楚软件的每一块细节，但肯定能看清楚大体由哪些组件组成，以及它们是如何协同运转的。

前端工程化是同样的道理，想了解每一块的 html 是怎么样的也许把项目跑起来看比追述源码更方便。但要了解一个页面由哪些组件组成其实反而更简单。这时候 50 行的高度组件化的代码比 500 行的 html 模板更容易看懂。

当然，开发者的抽象能力得基本靠谱。坏的抽象不如没有抽象。

非常感谢！