框架是什么?

我们可能没有用过 Vue,但应该都了解过 Vue 属于一种前端框架,那么什么是框架?框架存在的意义是什么?

前端三剑客分别是 HTML、CSS、JavaScript。使用这些已然能搭出网站,那么像 Vue、React、Angular 之类的框架存在的意义是什么?

打个比方,在之前,我们想修改一个元素的内容,我们需要执行以下代码。

JavaScript:

const element = document.getElementById("el")
element.innerText = "新内容"

jQuery:

$("#el").text("新内容")

Vue:

this.elText = "新内容" // elText 已在模板中应用

以上的例子还比较片面,但我们已然可以看出,框架的存在,有助于我们隐藏底层细节、简化操作。

不同的框架自身的侧重点不同,下面举几个常见的框架为例。

jQuery:隐藏底层细节,优化文档操作、事件处理、动画设计和 Ajax 交互。

ElementUI:一个优美的 UI 框架,方便我们直接使用一些功能更高级的组件,而不只是 HTML 默认提供的那些。

Vue、React、Angular:更加高级的框架,一般都借鉴了 MVVM 的设计理念,实现了双向数据绑定。使得我们可以更加关心业务逻辑,而不用操心底层代码。

jQuery 与 ElementUI 更偏向一个库,也就是提供单一的功能。而 Vue、React、Angular 则属于一个框架,即提供组织架构上的功能。

以上的总结很是片面,只是为了表明不同的框架是为了不同的需求而存在而举例。如果想了解一个框架的特点,最好的方式还是去看其官方文档,并尝试去写一些它的实例。

疑问: 一般的浏览器不是只能识别 HTML、CSS、JavaScript 吗?那为什么能在框架中使用他们各自的语法和一些高级功能,这些框架是怎么实现的?

不同的框架实现的方法是有所不同的,比如 Vue3 是通过 Proxy 来实现的响应性。也有一些框架是运行在后端的,运行在 Nodejs 之类的引擎上,所以才能使用更加高级的语法而不用局限于 HTML、CSS、JavaScript。不过最终我们所写的代码还是要被解析为 HTML、CSS、JavaScript 返回给浏览器,才能让网页真正地在浏览器上跑起来。

Vue 是什么?

Vue 是由尤雨溪开发的一个前端框架,目前已然成为国内最流行的前端框架。

我们来看下 vue 的官方简介。

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

渐进式框架

所谓的渐进式框架(progressive framework),就是指我们使用 vue 来开发项目,无需熟识并使用其全部的功能。当我们需要更多的功能时,可以通过按需逐渐引入新功能、新插件的方式。

关于什么是渐进式框架尤大在 NingJS 的演讲中介绍过,可以在分享出来的演讲 PPT 中找到以下的图片,这图片就很好地展示了如何从底向上地应用 vue (也很适合作为一个学习顺序)。

image

渐进式的框架给我们带来了两个好处:

  • 加载速度快。由于只需引入必须的组件,使得打包后的文件体积小,加载速度自然会快很多。
  • 学习成本低。学习 vue 可以逐渐上手学习,学一点就可以实战出效果,对于开发者来说学习成本就降低了不少。

自底向上逐层应用

这句话的英文原文是:Vue is designed from the ground up to be incrementally adoptable.

从英文反而比较容易理解,意思是 vue 从一开始就被设计成一个可以逐渐应用功能的产品。与渐进式框架的意思类似,在原文中是对渐进式框架的一个解释说明。

双向数据绑定

Vue 的核心功能便是双向数据绑定。

在这之前,我们获取到服务器数据之后,需要操作 DOM 元素来修改页面数据。当用户修改页面的内容后,也需要操作 DOM 元素来获取修改的内容。这些繁琐的操作使用开发一个大型项目几乎不可能。

而在 Vue 当中,我们可以仅仅修改一个数据,便能即时反应到页面当中。或者修改页面上的内容,对应的数据也会随之改变。这便是双向数据绑定。

$$edit$$
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message" />
</div>
<!-- 国内被墙 -->
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.33/vue.global.js"></script>
<script>
    const App = {
        data() {
            return {
                message: "修改我试试",
            }
        },
    }
    Vue.createApp(App).mount("#app")
</script>

$$demo <div id="app"> <p>{{ message }}</p> <input v-model="message" /> </div> <!-- 国内被墙 --> <!-- <script src="https://unpkg.com/vue@next"></script> --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.33/vue.global.js"></script> <script> const App = { data() { return { message: "修改我试试", } }, } Vue.createApp(App).mount("#app") </script>

$$