天一阁

整个IT产业和一个大型软件一样，都是分层的。底层是硬件，CPU，内存，硬盘，网络。上面一层是OS，他负责管理各种硬件资源，需要和CPU打交道，充分利用CPU提供的能力，再管理好各个外部设备，为再上层的应用软件提供编程接口。OS能够提供的其实都是标准接口：进程管理，文件读写，内存分配，网络处理，中断处理，基本上是这些了。在OS只上，有一些软件相对底层，比如DB，Cache，WebServer，浏览器等。所谓底层有两个含义，一是他处理业务比较有共性，从业务角度看更加抽象，比如说DB保存一条记录，可以是任何业务，比如可以是订单，可以是用户数据，可以是文章，可以是流水log。但是他并不关心这些，他只需要关心，高性能，可靠性。另外底层的软件都会有一些比较复杂的算法，因为他更多在处理数据本身，数据处理要求高效的算法。所以底层软件的算法是比较复杂的。

那么再上一层就是应用软件，无论是ios, android, web，其实大部分会处理CRUD的问题。只是看谁能更好的维护代码，谁能有更好的交互体验。也可以说是，谁长得漂亮，谁就有优势。当然长得好看是一方面，另外就是能否有好的功能，好的内容。因为应用软件在业务处理上比较类似，而且实现方法比较多，所以除了开发语言很多，还有很多开发框架，这些开发框架也带来了很多学习成本。

Node.js是2009年一个美国自由职业者开发的，这哥们现在去了Google Brain，玩神经网络去了。

Node主要是利用chrome V8强大的能力，执行js代码，然后加上异步IO的机制，可以实现用javascript写后台server。以前我一直以为server都得是C++写，现在才明白有个HTTP协议，加上一套框架，不就是传递数据么，没有什么高级和低级，就有高效和低效。

node写一个简单的server很容易

1
2
3
4
5
6
7
8

var http = require('http');

function onRequest(request, response){
  response.writeHead(200, {'Content-type':'text/plain'});
  response.write('Hello world');
  response.end();
}
http.createServer(onRequest).listen(8000);

通过引入一个内置的核心模块http，就可以启动一个server，这个和python里面的方式也挺像的。

Handling User Input with Forms笔记

表单是动态页面的重要工具，没有表单，web就不会这么丰富，就没有了任何可交互性。

原始形式的表单

表单这种东西从很早就接触只不过现在给忘记了，知识需要缝一下，补一下。<form>标签下放上几个<input>，当点击<submit>标签的时候，就会把整个form下的输入数据传送到后台去处理。数据发送的地址是form的属性action所指定的url。这里用到的是POST方法。

这些机制都是HTTP协议和浏览器共同完成了，作为web developper只是把业务逻辑写好。其中radio、checkbox需要name属性一致，这样才能表示对应的数据。无论是PHP活着Flask都是判断当前是POST方法表示客户端提交了数据，然后解析request里面的form，进行数据处理，然后在根据业务逻辑，生成对应的页面。

Vue的表单处理

原生的form是需要页面跳转的，或者说是整个页面刷新。有了Vue这样的前端框架，可以不再按原来的方式处理，直接就是前后端分离，然后submit按钮点击之后，采用ajax方式和后台交互数据，业务逻辑很多放到了前端。

对vue对表单的来说，最需要的就是收集数据，基本上都是通过v-model这个指令和vue的data中的变量进行绑定，然后submit之后提交数据。其中checkbox是个数组，radio是一个包含value的字符串

这部分是讲了关于vue 组件的高级特性，尽管有些内容我觉得没啥用，可能这些特性太高级了，我做的东西都太低级了。仔细又想了一下，好像这些特性也不是特别高级，也就是一般般吧，没啥了不起的。

slot 插槽

父组件向子组件传参数可以用props。vue还提供slot的方式可以传递一段HTML代码。

1
2
3

<myCmp>
	<p slot='title'>{{ title }} </p>
</myCmp>

这样可以把p标签下的内容全部传到子组件中，在子组件中只需要使用slot，引用即可，必要的时候加上name属性。

组件动态切换

1
2
3
4

<keep-alive>
  <component :is="selected">
  </component>
</keep-alive>

component 是vue的保留字，通过这个标签，就可以实现简单的组件动态切换。这里的selected是一个变量，保存需要加载的组件的名字。

keep-alive表示在组件切换时，是否需要销毁和重建组件，加上keep-alive，可以节省一些开销，也能缓存一些数据。同时会给组件增加两个lifecycle hooks: deactivated 和 activated

1
2
3
4
5
6
7
8
9

destroyed(){
  console.log('Calc destroyed');
},
deactivated(){
  console.log('Calc deactivated');
},
activated(){
  console.log('Calc activeted');
}

Communicating between Components笔记

这两天在学习vue开发，现在手机上看看效果，但是发现总是报错invalid host header。现在把解决方法记录在此。

vue的代码写完后，都是npm run dev启动一个测试server，想用手机访问本地的机器，先是无法访问，后来才发现，Project is running at http://localhost:8080/ 。启动的ip是localhost，也就是127.0.0.1，那手机上通过局域网地址肯定无法访问了。

google了一下，发现如果要改这个绑定的ip，需要把webpack.config.js文件中devServer中增加host字段，比如增加这样的配置host: '0.0.0.0'，这样重新启动后，这个小web服务器就绑定到了0.0.0.0的ip上了。

但是手机上还是不能访问，在手机浏览器中报错invalid host header, 于是又去google。原来新版的webpack-dev-server修改了一些东西，默认检查hostname。如果hostname不是配置内的，将不可访问。应该是考虑一些安全的因素，才有这种配置。虽然我还不知道webpack-dev-server这玩意是神马？看来的抓紧时间学习webpack了。

这个问题也能解决，就是继续在webpack.config.js文件中devServer中增加disableHostCheck: true配置，这样再重新启动后，问题就解决了。

An Introduction to Components

Vue提供组件（Component）机制，就是可以复用的一段代码。也是一个vue实例，他可以通过自己的标签被嵌入到整个vue的web app中。

大体上创建实例所需的选项是一样的，唯一需要注意的就是组件的data选项，在component中data不是一个对象，而是一个函数，通过一个函数来返回一个对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="app">
  <my-cmp></my-cmp>
  <hr>
  <my-cmp></my-cmp>
</div>
<script type="text/javascript">
  Vue.component('my-cmp', {
    data: function(){
      return {
        status:'normal'
      }
    },
    template: '<h1>Status: {{ status }}</h1>'
  });
  new Vue({
    el: "#app"
  });
</script>

全局和本地组件注册

通过Vue.component('cmp-name', {})注册组件是全局有效的，任何Vue实例都可以直接引用。如果是在vue实例的components的属性中注册，那就只有当前这个vue实例内可以使用对于其他实例是无效的。

App.vue

通过vue-cli用模板创建的文件，都是用组件的形式开发了，其中有一个根组件，就是App.vue。相当于整个web app的首屏入口，这里主要是注意一下data选项要按组件的规则写，也就是写成函数形式。

ES6 import export

每天都发现一点ES6的新语言特性，好理解，但是不好记忆。说简单了，就是javascript要做成可以模块化，工程化的大型开发语言。于是又export import这样类似 include 这样语句。道理明白，但要适应需要一个过程，要是达到能够运用的阶段，又是很长的一个过程。

vuejs也是javascript代码，他符合所有的js规则。一个webapp可以完全使用vuejs，同样也可以使用js + vue，仅让vue控制或reactive一部分HTML页面功能。

Vue提供条件指令，循环指令，这让Vue好像一门语言一样。这篇笔记还是对Vue JS 2 课程的笔记总结

在vue中，通过new Vue实例，所有的变量、相应事件的函数，都通过js的构造函数就设置好的，（怎么实现的呢？）

而且，在vue模板中，如果需要打印变量的值，或者函数的返回结果，直接用`{{ xxx } }` 直接调用，而不用加this 。但是在vue的method中，如果要引用data的属性，则需要加上this.。看上去特别像C++这样的语言，然而你如果去细扣其中的语法，又完全解释不通？vue.js是怎么做到的呢？也许他如何做到的，对于现在的我来说压根就不重要。