Node.js development stack

Node.js development stack

function projects  
package management npm  
CSS preprocessors less, sass  
JS module loader require.js, Browserfy  
JS transpiler coffee loader, ts-loader  

Node.js

https://www.w3schools.com/nodejs/default.asp

Modules

Module Description
assert Provides a set of assertion tests
buffer To handle binary data
child_process To run a child process
cluster To split a single Node process into multiple processes
crypto To handle OpenSSL cryptographic functions
dgram Provides implementation of UDP datagram sockets
dns To do DNS lookups and name resolution functions
domain Deprecated. To handle unhandled errors
events To handle events
fs To handle the file system
http To make Node.js act as an HTTP server
https To make Node.js act as an HTTPS server.
net To create servers and clients
os Provides information about the operation system
path To handle file paths
punycode Deprecated. A character encoding scheme
querystring To handle URL query strings
readline To handle readable streams one line at the time
stream To handle streaming data
string_decoder To decode buffer objects into strings
timers To execute a function after a given number of milliseconds
tls To implement TLS and SSL protocols
tty Provides classes used by a text terminal
url To parse URL strings
util To access utility functions
v8 To access information about V8 (the JavaScript engine)
vm To compile JavaScript code in a virtual machine
zlib To compress or decompress files

Node.js and MySQL

Node.js and MongoDB

package.json

Learn ES2015

https://old.babeljs.io/learn-es2015/

Vue.js

Hello world

  1. import: <script src="https://unpkg.com/vue"></script>
  2. HTML ```html
3. javascript

```js
var app = new Vue({
  el: '#app',
  data: {
    message: 'hello, world'
  }

})

HTML 中用一个 mount point <div id="app">, 在 javascript 创建一个 Vue 示例。

HTML 渲染

  1. 文本插值: ``
  2. v-bind::title e.g. ` `
  3. v-on: @click 事件处理 ` `
  4. 条件: v-if
  5. 循环: v-for
  6. 用户输入: v-model: ` `

Component

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

Instead, a component’s data option must be a function, so that each instance can maintain an independent copy of the returned data object:

data: function () {
  return {
    count: 0
  }
}

Organizing components

Vue.

Vue class / instance

var vm = new Vue({

})

Options/*

  1. el: 锚点
  2. data: 要绑定的数据
  3. computed: 复杂属性
  4. props: 对外的属性接口,类似 C# /Android 中 view 等属性。
  5. methods: 方法

API

global config

Global API

Options/data

events

synthetic events Creating and triggering events

vm.$emit( eventName, […args] )

Questions

  1. what is javascript prototype?

    fdf

  2. what is javascript context this?

    The answer is short and simple: Scope pertains to the visibility of variables, and context refers to the object within which a function is executed.

javascript context/ scope/ this

context means this keyword

Context is most often determined by how a function is invoked. When a function is called as a method of an object, this is set to the object the method is called on:

So for a global function, this refers to ‘window’ in browser

Vue-cli

https://cli.vuejs.org/

new 3.x is @vue/cli, the old is vue-cli

UI

img

vue-cli-service

➜  hello-vue git:(master) ✗ ./node_modules/.bin/vue-cli-service 

  Usage: vue-cli-service <command> [options]

  Commands:

    serve     start development server
    build     build for production
    inspect   inspect internal webpack config
    lint      lint and fix source files

  run vue-cli-service help [command] for usage of a specific command.

MISCS

vue-loader

是一个 webpack 的 loader,可以将用下面这个格式编写的 Vue 组件转换为 JavaScript 模块:

AMD v.s. CommonJS v.s. UMD

https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/

AMD v.s. CommonJS

Sandboxed

Asynchronous Module Definition

MISC

##

vuex

vuex

vuex 集中管理应用中的状态。 类似 Java Spring 中的配置中心。 一种管理的哲学思想 commit 的方式相当于 会隐藏了 setOnListener 的调用, 类似 set 方法, 而不是直接访问状态字段

So actions/mutations allow you to:

MISC