前端开发思维转变——从事件驱动到数据驱动

learning 发布于2019-08-20 18:03 / 987人阅读

摘要：趁热打铁，梳理下这段时间学习和使用以后，给自己最大的收获开发思维转变。事件驱动先说说以前前端发开的思维方式。分开设计页面结构和数据结构，然后将与数据结构做关联，之后所有的事件触发的都只是数据的变化，会自动根据数据的变化做相应改变。

加班加点连续一个多月，总算是快把一个开始时心里完全没有底的项目收工了。新项目基于旧系统开发，在保留原有老架构jade + knockout + jquery + gulp的同时，新页面完全采用vue + vue-route + vuex + webpack。两套框架都没正儿八经做过，jade和knockout第一次接触，vue和webpack以前只是写写demo，vue-route和vuex也没用过，又恰巧另外一个前端同事离职，所以当时决定新页面完全用新框架的时候，还是鼓了不少勇气的。

趁热打铁，梳理下这段时间学习和使用vue以后，给自己最大的收获：开发思维转变。

事件驱动

先说说以前前端发开的思维方式。
比如说，要实现ajax方式提交一个表单，那么就要监听一个提交按钮的事件。在触发点击事件后，从页面的DOM元素中一个个收集数据，然后在做数据处理，最后调用接口提交。收集数据是个特别繁琐的事情，各种选择器各种变量。

再比如说，在固定区域内，事件触发展示不同组件，那就要监听事件传递来的条件，来判断哪个组件要display:block，其他组件要display:none，甚至可能大量用到DOM操作，各种appendChild，insertBefore，removeChild。

其他类似根据条件addClass, removeClass调整组件样式；通过getAttribute、dataset等等获取DOM绑定的数据；通过setAttribute、innerHtml等等直接修改DOM的操作也是数不胜数。

个人感觉这种方式的好处就是直观，页面做任何改变全交由js处理，先干什么后干什么都由自己一手代码操控全场，有种掌控一切的感觉。

但是，大型项目里，代码编写的成本和维护的成本都很高。对代码规范的要求高，对抽象的要求高，尤其是抽象程度，全赖个人编程水平，抽象程度低的话，冗长的代码根本不想多看一眼。这大概就是为啥项目里有一个代码写的烂的人在，代码就会越来越烂的原因。

数据驱动

网上已经很多关于数据驱动的文章了，但光看文章，体会远不如自己实践一遍来的印象深刻。在基于vue开发的新页面中，用js直接处理DOM的代码极少（刚开始上手的时候一般都会不太习惯数据驱动编程，写些操作DOM的代码，后来慢慢会替换掉的）。

数据驱动的前提是事先将DOM与数据绑定，像vue这种就是依赖defineProperties, setter, getter将一个vue对象与一个DOM节点模板关联起来，这个DOM节点里所有子节点、所有节点属性，全都可以和vue对象中的data绑定，做到data中某个属性值变化时，相应DOM节点中对应的某个属性就变化。

如此一来，关注点完全分离。分开设计页面DOM结构和数据结构，然后将DOM与数据结构做关联，之后所有的事件触发的都只是数据的变化，DOM会自动根据数据的变化做相应改变。

前面例子中的表单提交，交由v-model属性将input双向绑定到data中去，在触发表单提交时，直接把data传给后端完事儿了；不同组件之间的切换，vue官网就有个动态组件的例子：

var vm = new Vue({
  el: "#example",
  data: {
    currentView: "home"
  },
  components: {
    home,
    posts,
    archive
  }
})

只需关心currentView的指向便可轻易切换组件，或者通过v-if或v-show来实现根据value的真假值来控制相应DOM节点是否显示；其他DOM属性变化都可以用v-bind与data做绑定，比如v-bind:class="dataClass"，只要dataClass一变化，DOM的class就会改变。

vue的这些动态绑定的功能很容易上手，相对上手比较慢的是vue提供的组件功能，涉及父子组件通讯，以及用vuex实现全局state管理等等，先掌握数据驱动的思想，再接触这些会容易得多。

当然即使vue也会遇到不得不直接操作DOM的情况。记录一个目前遇到实际问题：

有一个table组件，展示从后台传过来的数据。数据中会有"http://xxx.xxx/xxx.png"需要渲染成标签。一般表格组件会提供formatter方法来处理单元格特殊处理逻辑，这里我就不得不直接生成DOM节点

formatter: function({picUrl}){
    this.$createElement("img", {
        attrs: {
            src: picUrl
        },
    }
}

云服务器 GPU云服务器事件驱动事件驱动模型事件驱动型 python事件驱动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84047.html

js学习之异步处理

摘要：学习开发，无论是前端开发还是都避免不了要接触异步编程这个问题就和其它大多数以多线程同步为主的编程语言不同的主要设计是单线程异步模型。由于异步编程可以实现非阻塞的调用效果，引入异步编程自然就是顺理成章的事情了。学习js开发，无论是前端开发还是node.js,都避免不了要接触异步编程这个问题,就和其它大多数以多线程同步为主的编程语言不同,js的主要设计是单线程异步模型。正因为js天生的与...

VioletJack 2019-08-22 13:54 评论0 收藏0
重磅：前端 MVVM 与 FRP 的升阶实践 —— ReRest 可视化编程

摘要：是前端开发领域新兴的方法论体系，它继承了与编程理念，在技术上有不少创新。但专利与开源协议是平行的两个世界，改底层也不大容易解决问题。此外，要求在中结合各属性的是否变化，判断是否该触发更新。 ReRest (Reactive Resource State Transfer) 是前端开发领域新兴的方法论体系，它继承了 MVVM 与 FRP 编程理念，在技术上有不少创新。本文从专利稿修改而来...

Cciradih 2019-08-21 17:12 评论0 收藏0
不谈业务运维的IT主管早晚被淘汰这里是10条干货

摘要：由此可见，一旦从传统的技术运维上升到业务运维，发挥的作用出乎意料，而这正是的未来所在。这不是由厂商驱动的，而是业内趋势有关。业务运维关注的是业务，是从用户的视角出发，关注点不同。业务运维有三个方面。业务运维已经进入应用阶段。大数网吴玉征先说个真实的故事。前...

Kahn 2019-05-28 17:00 评论0 收藏0