在没有DOM操作的日子里,我是怎么熬过来的(中)

前言

继上篇推送之后,在掘金、segmentfault、简书、博客园等平台上迅速收到了不俗的反馈,大部分网友都留言说感同身受,还有不少网友追问中篇何时更新。于是,闰土顺应呼声,在这个凛冽的寒冬早晨,将中篇热文滚烫呈上。

搬好小板凳,接下来,正文从这开始~

在上篇的众多留言中,有位网友的评论比较具有代表性,摘出来供大家一阅:

“ 同感啊楼主 比如做tab的时候,以前jq就是切换一下class,现在vue是切换数据,再根据数据显示class,这弯绕的啊 ”

当然,有评论就有回复,请看下面这位网友是怎么回复他的:

“ 哪里绕弯了,只要记着数据驱动dom,习惯就好,这种模式才比较适合页面dom变化渲染,只是之前被jq带的根生蒂固 ”

有时候写文章,不一定仅仅是为了分享自己的工作经验,而是还想看看网友是怎么看待这个话题的,从而衍生出一系列的对话,以及思想碰撞。

在这里,闰土有句话想送给刚从JQ转变思路过来的同行们:

MVVM时代,数据映像了DOM世界,一切以数据为核心,正如同数学可以描述世界一样,你只需要考虑数据或者状态即可。

所以,只要你充分理解了上面这句话,恭喜你,你已经从直接操作DOM的时代毫无压力的过渡到了MVVM时代!

话不多说,先来看看MVVM项目的工程目录:

当然你可以通过vue官网提供的vue-cli脚手架工具,来快速搭建项目结构。如果有不懂脚手架作用的老铁,可以参照下图,这就有点类似于工地上的脚手架,可以帮助工人们快速搭建该建筑的结构模型(话糙理不糙,说明问题即可)。

项目结构搭建完毕后,就可以npm install 来安装项目依赖了。通常这个阶段,可能会比较漫长,建议用国内淘宝的镜像cnpm。

也是在这期间,经常有同学在安装某依赖模块时,会碰到命令行报错,说是node或者npm版本过低等问题。假如你果真碰到这个类似的问题,可以考虑先将项目中的node_modules删除掉,然后重新cnpm install安装项目所需的依赖。通常这个情况,就会迎刃而解(不要问为什么,这可能是个偏方)。

然后,你就可以大步流星地去执行以下操作了:

#开启本地开发服务器,监控项目文件的变化,实时构建并自动刷新浏览器,浏览器访问 http://localhost:8081

npm run dev

#使用生产环境配置构建项目,构建好的文件会输出到 "dist" 目录,

npm run build

#运行构建服务器,可以查看构建的页面

npm run build-server

#运行单元测试

npm run unit

当你可以正常运行这个项目之后,接下来我们就该聊聊项目里的各个文件了。

俗话说,在js里面一切皆对象,那么vue里面,则是一切皆组件,能用组件实现的,终将被组件实现。

说到组件,在项目中,你可能会看到公司前辈写的组件代码,都是以 .vue 为后缀的文件,打开后你会发现它的整体结构分三层,分别定义了三个 tag标签,template,script,style。然后对应的代码在自己的标签里面各司其职,所有需要的html、css、javascript都在里面。

组件看完之后,我们移步到webpack的配置文件,也就是webpack.config.js文件,内容大概如下:

module.exports = {
    entry: {
        'index': './vue/index/main.js',
    },
    output: {
        path: './public/bulid',
        filename: '[filename].js' // 可以多点切入
    },
    module: {
        loaders: [
            {
              test: /\.vue$/,
              exclude: /node_modules/,
              loader: vue.withLoaders({
                  js: 'babel?optional[]=runtime'
              })
            },
            { test: /\.scss$/, loader: 'style!css!sass },
            { test: /\.css$/, loader: "style!css" },
            { test: /\.js$/, loader: 'babel-loader' }
        ]
    },
    resolve: { // 解决 npm 的依赖问题
        modulesDirectories: ['node_modules'],
        extensions: ['', '.js', '.json']
    },
}

我对 webpack 的最初信仰就是,它非常的智能化,可以将一切的资源(包括html css javascirpt image)用 import 和 require 模块化引入,并对资源进行预处理,最终被打包成一个js文件解释执行。

接下来我想谈谈vue的生命周期和钩子函数。

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。

说的直白一点,分别对应的四组钩子函数就是:

beforeCreate 、created; // 创建前、创建完成 beforeMount 、mounted;// 挂载前、挂载完成 beforeUpdate 、updated; // 更新前、更新完成 beforeDestory 、destoryed。// 销毁前、销毁完成

这里闰土在网上找到一个很好的例子:

<!DOCTYPE html>
<html>
<head>
    <title>Vue生命周期</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
     <p>{{ message }}</p>
</div>
<script type="text/javascript">
  var app = new Vue({
      el: '#app',
      data: {
          message : "闰土少年"
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态 >>>>>>>>>>');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined
               console.log("%c%s", "color:red","message: " + this.message)
        },
        created: function () {
            console.group('created 创建完毕状态 >>>>>>>>>>');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态 >>>>>>>>>>');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        mounted: function () {
            console.group('mounted 挂载结束状态 >>>>>>>>>>');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态 >>>>>>>>>>');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data);
               console.log("%c%s", "color:red","message: " + this.message);
        },
        updated: function () {
            console.group('updated 更新完成状态 >>>>>>>>>>');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data);
               console.log("%c%s", "color:red","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态 >>>>>>>>>>');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data);
               console.log("%c%s", "color:red","message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态 >>>>>>>>>>');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data);
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

最后在chrome的console控制台打印效果如下图:

在上图中大家可以看到,在beforeMount挂载前, $el里面还是{{ message }},这就是Virtual DOM(虚拟dom)技术的应用,上来二话不说,先把坑位占了,等后面mounted挂载的时候,再把值渲染进去。

最后,我们再聊聊前后端分离,并行开发的事情。

前后端分离后,我们前端工程师开发前,需要和后端同学定义好接口信息(请求地址,参数,返回信息等),前端通过 mock 的方式,即可开始编码,无需等待后端接口是否已经准备就绪(是不是感觉前端干的活儿越来越重)。

在实战演练过后,Vue给我的感觉就两个字:省心。所有的操作关注点都在data上面。开发的时候,写好data 剩下的事情就是 通过异步请求来交互data,UI层绑定事件改变data,在组件间传递data。

后记

在这个MVVM横行的时代,我已经渐渐的忘却了jQuery的存在。本系列文章还没有结束,下篇,也可能是终结篇,即将来袭!

原文发布于微信公众号 - 闰土大叔(running_hacker)

原文发表时间:2017-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏李想的专栏

使用腾讯云无服务器云函数(SCF)分析天气数据

无服务器云函数(SCF)是腾讯云提供的Serverless执行环境,也是国内首款FaaS(Function as a Service,函数即服务) 产品。其核心...

1K7
来自专栏進无尽的文章

扒虫篇- Bug日志 Ⅷ

不执行的原因是 在VC中使用这个ImageUploaderManager时,需要设置为全局变量,如果是局部变量的话,很快会被销毁掉,其中的代理自然不会执行了。

1973
来自专栏视频咖

如何写出一手好的小程序代码,从架构说起

? 作为微信小程序底层 API 维护者之一,经历了风风雨雨、各种各样的吐槽。为了让大家能更好的写一手小程序,特地梳理一篇文章介绍。如果有什么吐槽的地方,欢迎去...

5462
来自专栏张善友的专栏

在你的网站集成Wiki系统 WikiPlex

Wikiplex 是一种在 .NET Framework 上所开发,具有处理 Wiki 编辑宏功能的小型函式库组件,它提供了数种编辑样式的格式,以让使用者可以类...

2228
来自专栏林德熙的博客

win10 uwp 使用油墨输入 保存,修改,加载inkUWP 手写清理笔画手写识别无法识别手写语音

现在很多人还是使用笔和纸来记录,那么可以在电脑输入方式和之前使用的方式一样,很多用户觉得会方便。在win10 我们有一个简单的方法去让用户输入,InkCanva...

2521
来自专栏张俊红

爬虫进阶(二)

总第66篇 在前面的几篇推文中我们分享了最基础的爬虫入门,以及基于AJAX的爬虫入门,这篇我们分享关于如何利用selenium对目标网页进行数据爬取的。 01|...

3768
来自专栏晨星先生的自留地

老司机带我飚车(2)一个有趣的漏洞PoC调试

3436
来自专栏信安之路

我是如何找到 Google Colaboratory 中的一个 xss 漏洞的

在本文中,我来讲讲我碰到的一个有趣的 XSS。2018 年 2 月,我在 google 的一个网络应用中发现了这个 XSS。这篇文章我不希望只是直接写出这个 X...

1200
来自专栏Crossin的编程教室

【Python 第3课】IDE

昨天的课发出去之后,有不少同学发来了反馈,有完成截屏的,也有遇到问题的。一些问题突然让我意识到,很多地方自己描述得不是很到位,会产生歧义,或者干脆就很难听懂。比...

2916
来自专栏小樱的经验随笔

深入理解USB流量数据包的抓取与分析

在一次演练中,我们通过wireshark抓取了一个如下的数据包,我们如何对其进行分析?

3682

扫码关注云+社区

领取腾讯云代金券