vueStudy

目录层次：

目前学习曲线有三个前端开发，每个人有各自的目录，可以很好地对比彼此的代码。 

unit1

• 邮箱验证
• 用户名 数字、字母、中文 、划线不能以下划线开头 2-12位
• 密码验证 6-20位英文和数字
• 验证码验证 4-10位英文或数字
• 手机号验证 1开头 11位

unit2

写一个足球类要求结果：

var footBall = new FootBall();
footBall.setWeight('10kg');
footBall.setPepole(12);
footBall.setHistory('足球起源于英国');

footBall.getWeight(); // 10kg
footBall.getPepole(); // 12;
footBall.getHistory; //足球起源于英国

写一个篮球类要求结果：

var basketBall = new BasketBall();
basketBall.setWeight('12kg');
basketBall.setPepole(10);
basketBall.setHistory('篮球很大');

basketBall.getWeight(); // 12kg
basketBall.getPepole(); // 10;
basketBall.getHistory; //篮球很大

写一个运动类要求结果：

var sports1 = new Sports('footBall');
sports1.getPepole() // 12
var sports2 = new Sports('basketBall');
sports2.getPepole() // 10

unit3

我之前经常使用 Vue，后来不满足于仅仅使用它，我想了解其内部实现原理，所以就尝试学习其源码，获益匪浅。所以，如果你跟我一样，希望挑战这高难度的情，那就开启这一系列吧！我们从最简单的开始。其中，动态数据绑定就是 Vue 最为基础，最为有用的一个功能。这个系列将分成5部分，一步一步来理解和实现这一功能。ok，我们从最简单的开始。给定任意一个对象，如何监听其属性的读取与变化？也就是说，如何知道程序访问了对象的哪个属性，又改变了哪个属性？ 举个例子。

let app1 = new Observer({
  name: 'youngwind',
  age: 25
});

let app2 = new Observer({
  university: 'bupt',
  major: 'computer'
});

// 要实现的结果如下：
app1.data.name // 你访问了 name
app.data.age = 100;  // 你设置了 age，新的值为100
app2.data.university // 你访问了 university
app2.data.major = 'science'  // 你设置了 major，新的值为 science

请实现这样的一个 Observer，要求如下：

• 传入参数只考虑对象，不考虑数组。
• new Observer返回一个对象，其 data 属性要能够访问到传递进去的对象。
• 通过 data 访问属性和设置属性的时候，均能打印出右侧对应的信息。

unit4

这是“动态数据绑定”系列的第二题。在第一题的基础上，我们继续考虑以下难点：如果传入参数对象是一个“比较深”的对象（也就是其属性值也可能是对象），那该怎么办呢？举个例子。

// 一个“比较深”的对象：某些属性的值也是一个对象
let obj = {
 a: 1,
 b: 2,
 c: {
     d: 3,
     e: 4
 }
}

如果设置新的值是一个对象的话，新设置的对象的属性是否能能继续响应 getter 和 setter。举个例子。

 let app1 = new Observer({
         name: 'youngwind',
         age: 25
 });

 app1.data.name = {
         lastName: 'liang',
         firstName: 'shaofeng'
 };

 app1.data.name.lastName;
 // 这里还需要输出 '你访问了 lastName '
 app1.data.name.firstName = 'lalala';
 // 这里还需要输出 '你设置了firstName, 新的值为 lalala'

考虑传递回调函数。在实际应用中，当特定数据发生改变的时候，我们是希望做一些特定的事情的，而不是每一次都只能打印出一些信息。所以，我们需要支持传入回调函数的功能。举个例子。

 let app1 = new Observer({
        name: 'youngwind',
        age: 25
});

// 你需要实现 $watch 这个 API
app1.$watch('age', function(age) {
        console.log(`我的年纪变了，现在已经是：${age}岁了`)
});

app1.data.age = 100; // 输出：'我的年纪变了，现在已经是100岁了'

unit5

这是“动态数据绑定”的第三题。在第二题的基础上，我们再多考虑一个问题："深层次数据变化如何逐层往上传播"。举个例子。

let app2 = new Observer({
   name: {
       firstName: 'shaofeng',
       lastName: 'liang'
   },
   age: 25
});

app2.$watch('name', function (newName) {
   console.log('我的姓名发生了变化，可能是姓氏变了，也可能是名字变了。')
});

app2.data.name.firstName = 'hahaha';
// 输出：我的姓名发生了变化，可能是姓氏变了，也可能是名字变了。
app2.data.name.lastName = 'blablabla';
// 输出：我的姓名发生了变化，可能是姓氏变了，也可能是名字变了。

观察到了吗？firstName 和 lastName 作为 name 的属性，其中任意一个发生变化，都会得出以下结论："name 发生了变化。"这种机制符合”事件传播“机制，方向是从底层往上逐层传播到顶层。这现象想必你们也见过，比如：“点击某一个DOM元素，相当于也其父元素和其所有祖先元素。”（当然，你可以手动禁止事件传播） 所以，这里的本质是："浏览器内部实现了一个事件传播的机制"，你有信心自己实现一个吗？

unit6

这是“动态数据绑定”的第四题。有了前面的充分准备，相信你能搞定这一题。请实现如下的这样一个 Vue，传入参数是一个 Selector 和一个数据对象，程序需要将 HTML 模板片段渲染成正确的模样。 这就是一次性的静态数据绑定。

let app = new Vue({
  el: '#app',
  data: {
    user: {
      name: 'monkeyWang',
      age: 25
    }
  }
});

<!-- 页面中原本的 html 模板片段 -->
<div id="app">
    <p>姓名：{{user.name}}</p>
    <p>年龄：{{user.age}}</p>
</div>

<!-- 最终在页面中渲染出来的结果 -->
<div id="app">
    <p>姓名：monkeyWang</p>
    <p>年龄：25</p>
</div>

PS：此题尚未要求实现动态数据绑定

unit7

这是“动态数据绑定”的最后一题了，希望你能坚持到最后。在上一题的基础上，我们考虑如何做到："当数据发生改变时，重新渲染 DOM。" 此目标又可以分为两层难度。

1.相对简单的目标：数据任意部分发生了变化，都重新渲染 DOM。

2.相对困难的目标：数据的某一部分发生了变动，只重新渲染对应这部分数据的 DOM。举个例子

let app = new Vue({
 el: '#app',
 data: {
   user: {
     name: 'youngwind',
     age: 25
   },
   school: 'bupt',
   major: 'computer'
 }
});

<!-- 页面中原本的 html 模板片段 -->
<div id="app">
    <p>姓名：{{user.name}}</p>
    <p>年龄：{{user.age}}</p>
</div>

相对简单的目标是说：无论是修改数据的哪一部分（包括没有在页面中出现的 school 和 major 这两部分），DOM 都会重新渲染。（即便前后渲染结果一致）相对困难的目标是说：只有当 user.name 和 user.age 发生改变的时候，DOM 才会重新渲染；而 school 和 major 的变化不会引发重新渲染。最后，无论你选择哪种难度，能完成本题，就已经很棒了!

unit8 开发简单的豆瓣电影 web App

可以参考豆瓣githubMovie