数据驱动和组件化

前言

最近花了很长一段时间学习vue和webpack,感觉确实对自己有很大的提高，关键是他们的思想非常的认可，
他们主要的思想就是模块化、数据驱动、组件化，下面注意详解最近的学习所得。

模块化

这个话题已经是讨论了很久的东西，但是到现在居然大部分人竟然没有一个统一的共识，还是呈现分裂局面，主要分裂为AMD和CommonJS,
AMD就是异步加载模块，他的核心思想就是我需要一个模块的时候，这个模块的依赖什么的都异步通过添加script标签的方式加载执行，
这样就会导致一个页面请求过多的问题，另外一个就是node社区提出的CommonJS规范，比较赞！，但是有一个缺点就是必须通过构建工具
来进行打包，比如需要学习browserify或者webpack,最后制定标准的人看不下去了，ES6首先就把模块加上了使用类似java的语法

1	import Vue from 'vue'

不过这个语法需要babel转换成CommonJS的语法才能在浏览器里面执行，写到这里估计很多人就要开始叫了，你说得这都是啥啥啥！是不是有种
王宝强要账看欠条的即视感，我已开始也是这样子的，不过现在前端是个发展相当快的时代，技术更新相当快，因为前端暂时还没形成一个最佳实践
，所以需要紧跟上前端的步伐就是要不断试错，学习新的东西，好了，插了这么多东西，咱们说回来吧，最终大家基本上形成了模块化的标准，就是ES6
的标准，这也是我现在正在使用的模块化解决方案，模块化需要学习的技术
ES6
webpack
CommonJS

数据驱动

先看一段代码，我们是如何实现从服务器端拿到数据渲染到界面上的

$.get(url)
  .done(function(data) {  // 假设data是个数组
      var html = '<ul>'
      data.forEach(function(item) {
          html += '<li>' + item + '</li>'
        })
      html += '</ul>'
      $('#insert').html(html)
    })
  // 如果这段html里面需要一些事件绑定的话还需要初始化事件
  initEvent()

也许有些同学觉得对啊！这就是我们现在写代码的姿势啊，不过你这个比较low，我们用了模板自动渲染数据生成html，
不过殊途同归了，基本的写法都是差不多，相信很多人现在还是这样一种写前端代码方式，我一开始写页面的时候也是这样写的
，当时并没有觉得有什么不妥，既然大家都这样写，那我写代码的姿势应该是没问题的，后来越写这样的代码觉得相当不爽，
特别烦人，改个东西从几百行这种命令代码（面条代码）里面找到那个key，然后抽死剥茧般改一些东西，实在是写的特别恼火，
后来偶然间看到@尤小右推荐他写的vue （读view）库，然后看了看文档，当时就有一种这就是我苦苦寻找的东西。再看下面用
vue写的代码实现相似的功能

// html
<ul>
    <li v-for="item in data" @click="click">{{ item }}</li>
</ul>
<script>
  var vm = new Vue({
      el: 'body',
      data: {
        data: []
      },
      ready: function() {
        $.get(url).done(d => this.data = d)   // 用了es6的箭头函数
      },
      methods: {
        click: function(e) {
          // bla bla
          console.log(e)
        }
      }
    })
</script>

相当简洁，特别清爽，告别手拼html的烦恼，操作dom即是操作数据，再也不用写那种面条代码了，这样就引出了咱们今天要说的数据驱动,咱们可以转换一下思想，界面上的所有展示的东西，其实都是数据，界面的某一部分变化了，说明了数据在变化，那么我们可以想象假如说我们改变界面上的数据，界面自动变化他应有的样子，那样多好，而像angularjs、vue就是提供这样一种实现，所以angularjs一出来就火的一塌糊涂，不过我不太推荐大家去看angularjs，因为里面概念太繁琐，并且性能也不太好，当时还专门买了一本书看angularjs,看到一半直接扔书架上堆灰尘了，后来有了vue，觉得这个库的api设计的相当精良，优雅，普通开发者看几遍文档真的就可以上手写代码了，并且能极快的提高开发效率，节约大把时间陪妹子或者调戏妹子，简单地讲，数据驱动就是把界面映射为数据，操作数据界面自动变化，响应式编程

组件化

有了数据驱动确实解决了我们不少问题，但是写着写着你会发现，你如果需要一个表格插件，还是需要引入很多东西，这时就想界面能不能长这个样子

<header></heade>
<menu></menu>
<main>
  <hello></hello>
  <ajax-table url="url"></ajax-table>
</main>
<footer></footer>

写成标签式写法，简洁又高度封装，少年，你能有这样想法真的是好青年，这就是大家一直在追求的组件化，
一切皆组件，而vue就提供了封装组件的方法，最简单的封装组建的方法是

// 生成一个组件的构造函数
var Hello = Vue.extend({
    template: '<div>{{msg}}</div>',
    data: function() {
      return {msg: 'hello'}
    }
  })

// 注册一个组件
Vue.component('hello', Hello)

这样你就可以在页面里面用标签了，它自动会把hello替换成你的模板，并且带上响应式数据，
这样就给了我们无限的想象力，我可以封装一个轮播，我可以封装一个….,但有时候一个组件是需要css,js,html三者
在一起的，vue给我们提供了单文件组件的封装，不过这需要借助webpack的打包机制，具体功能请去google搜vue,看一下官方文档，
相信你会喜欢上vue的。

结语

数据驱动和组件化 应该是前端发展到现在探索出来的相当棒的方案，也是以后前端发展的方向，小伙伴赶紧学习一下，替换现有的
技术栈，早日进入数据和组件的海洋。

agileago's blog

数据驱动和组件化

前言

模块化

数据驱动

组件化

结语