JavaScript React, Vue 等,是否必须把 JavaScript 和 HTML 部分,混合在一起?

doosolar · 2017年11月03日 · 最后由 doosolar 回复于 2017年11月04日 · 26 次阅读

React, Vue 等,是否必须把 javascript 和 html 部分,混合在一起?

看了一些 React , Vue 的说明,举的例子,都是把:html 嵌入在 javascript 当中。

想问一下:

  • 在实际开发项目中,使用 React (或者 Vue)的时候,当真这样把 javascript 和 html 混合在一起吗?
共收到 13 条回复

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

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

adamshen 回复

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

angular 欢迎你

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

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

6楼 已删除
doosolar 回复

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

zj0713001 回复

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

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

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

Rei 回复

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

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

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

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

darkbaby123 回复

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

doosolar 回复

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

doosolar 回复

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

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

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

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

darkbaby123 回复

非常感谢!🙏

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册