Nodejs

Nodejs是什么

Nodejs是javascript的执行引擎，提供的js文件作为运行入口。作为生产使用，尽量选择LTS版本。前端开发过程中大量使用到了html、css和javascript的代码，为了方便开发过程中对这些资源、文件的处理，需要定义一些处理过程，而前端开发人员使用最多的是js，而nodejs是一个js引擎，nodejs的作用和java中的jvm的作用是一致的。

在java开发中，需要对业务的工具进行类的设计，实现对文件的归类，前端组件的设计，资源的维护等。因此有很多前端的工具和框架。全栈工程师则是加上js来编写后端的业务处理过程，就是一套技术就把前后端统一了，因此叫全栈工程师。

Javascript开发常用工具和框架

NPM是什么

在javascript项目的开发中，有大量需要引用的模块，为了管理模块之间的依赖关系，引入了npm。npm安装后就可以使用，第三方模块通过npm命令安装。常用命令如下：

• npm init：初始化项目信息。
• npm install -g -save xxxx: 安装指定模块，-g是全局安装，安装完成后可以直接使用模块提供的命令，-save是将此模块添加到当前项目的依赖中。install可以使用i代替。
• npm list / npm ls:列出项目依赖的所有模块。
• npm uninstall xxx:卸载模块
• npm update xxx:更新模块

NPM仅仅是对模块依赖的管理（当然也集成了其他测试运行等功能）。项目是具体用来做什么的npm不负责管理，对于常见的webserver，资源管理等，npm有常用的模块处理，下面是常见模块的说明。

Webpack

一个web项目常见的内容包括html文件，css文件，js文件以及其他图片等等，利用webpack，可以将这些文件合并，输出为一个更优化的web应用文件。

首先是安装webpack的命令行工具：

npm i -g webpack-cli

然后是在package.json中添加webpack处理的script，下面是样例

{
  "name": "empty-project-",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": {
    "clean": "rm dist/bundle.js",
    "build-dev": "webpack -d --mode development",
    "build-prod": "webpack -p --mode production"
  },
  "dependencies": {},
  "devDependencies": {
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2"
  }
}

执行以下命令即可打包并运行项目

npm install
npm run build-prod
npm run build-dev
node dist/bundle.js

处理的流程是npm调用script，script调用webpack-cli，webpack-cli调用js，利用webpack.config.js中的配置，自动生成最终的成品。

有一些UI工具帮助生成配置文件：https://webpack.jakoblind.no/ 或 https://generatewebpackconfig.netlify.com/

webpack配置说明

下面是使用一个样例说明配置文件的使用

const webpack = require('webpack');
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

const config = {
  // 程序的入口
  entry: './src/index.js',
  // 程序的输出
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/, //文件匹配规则，如果匹配，则使用loader中指定的loader
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.vue'
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new LodashModuleReplacementPlugin
  ]
}

module.exports = config;

从上面可以看出webpack严重依赖于loader，而且loader处理的规则需要参考具体loader的设计。

在webpack中使用css模块

Css模块在使用npm安装后，可以直接使用import命令导入。如安装了weui的包，在使用css类的地方可以直接使用js命令导入：

import from "weui"

Vue

Vue是表现层的框架，使用的方法是引入vue，定义Vue实例，剩下的就是在实例中定义data数据，而在html中使用标签显示要展示的数据。显示层的变量格式是{{ variableName }}。

Vue的生命周期

Vue Lifecycle

Vue的模板语法

Vue的模板信息是添加到html的元素中的（单纯的值是Mustache语法），下面是汇总：

• {{ varName }} : 单纯获取值，varName可以使用单个js语句。
• v-html：当成原始HTML输出。<span v-html="rawHtml"></span>
• <span v-if="seen">现在你看到我了</span>
• <a v-bind:href="url">...</a>可以使用<a :href="url">..</a>代替（:是v-bind的缩写）
• <a v-on:click="doSomething">...</a>可以使用<a @click="doSomething">...</a>代替(@是v-on的缩写)
• v-model用于定义表单的输入对应的变量。

Vue的值除了静态的以外，可以通过计算和方法获取，计算属性在Vue实例的computed属性中定义，里面定义的是function

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

Vue组件

Vue的组件与Vue的主实例类似，接收的选项也相同，下面是一个示例：

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  props: ['title'],
  template: '<h3>{{ title }}</h3><button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

可以通过下面的html进行使用

<div id="components-demo">
  <button-counter title="Button1"></button-counter>
</div>  

注意：组件中的data是一个function，而不是普通的属性，是为了保证每个组件实例的变量独立。

组件通过props属性传递参数，建议在props中传递Object，而非单个属性。对于大量数据的传递，推荐使用slot进行。组件的元素必须是单根的，如下面的组件定义就是非法的：

<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
<div>{{ hugeContent }}</div>

需要通过单根元素包含：

<div class="blog-post">
  <h3>{{ post.title }}</h3>
  <div v-html="post.content"></div>
  <div><slot></slot></div>
</div>

组件可以通过$emit向父级组件触发事件。

Vue可以动态切换组件，类似于java中reflection中的方式，内容比较多，参照https://cn.vuejs.org/v2/guide/components.html#动态组件

定义组件时，名称务必保证字母全小写且必须包含一个连字符，这会帮助你避免和当前以及未来的 HTML 元素相冲突。

Vue.component注册的组件是全局的，可以局部注册组件，但有较多限制。全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

props属性传递参数可以设定参数的具体类型。

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

在一个JS文件中编写不同的组件是很难维护的，因此提出了单文件组件的概念，此文件包含html、JS和样式内容，如下所示：

Vue文件组件

Vue文件组件和普通的js组件类似，包含template，script，style的内容。Vue文件组件在使用其他组件时有2中方式，一种是在全局（main.js）导入后使用，另外一种是在文件内部导入后使用，这是一种局部的导入方式。全局导入的方式适合在最终的项目中使用，局部导入的方式适合在组件开发时使用。

Vue工具

为了管理多文件组件，以及和其他构建工具集成，Vue提供了cli，方便大家创建vue项目。最新版的cli版本是3。Vue的cli工具有自己独立的设计，自身使用插件的方式处理资源，原来webpack的处理逻辑被cli工具中的vue-cli-service包装，可以认为vue的cli产生的项目使用常规方式比较难配置。新项目添加步骤如下

1. 使用vue create创建基础项目
2. cd到项目目录，执行npm run serve可以发布项目做测试

后缀为vue的文件是vue的组件文件，在执行vue-cli-service serve或vue-cli-service build时，cli插件自动将vue文件编译成js代码。

Vue-router

Vue-router是路由管理插件，目的是可以在一个页面中可以自由的切换系统当前的组件。一个未使用router的项目中，web请求的处理流程如下：

image.png

在这个处理过程中可以认为是Vue实例的独立渲染，为了方便管理多个视图，vue-router有自己独立的管理方式。

image.png

import Router from 'vue-router'
import Dashboard from './views/Dashboard.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Dashboard',
      component: Dashboard
    }
  ]
})

router中定义的路由需要使用<router-link to="xxx">的方式使用，<router-view></router-view>是路由渲染的位置。

JS语法（针对Java程序员）

基础语法

变量：var xxx，未定义的变量值是undefined，变量可以删除delete xxx

当您声明新变量时，可以使用关键词 "new" 来声明其类型：如var carname=new String;

一条语句，多个变量使用逗号,分开

内置类型：Number,String,Array,Object(Key+Value),function。使用typeof来获取变量类型

分号用于分隔 JavaScript 语句，行最后的分号可以不加分号。JavaScript 对大小写是敏感的。反斜杠对代码行进行换行

使用算术运算符计算值，使用=赋值。+-*

注释使用//或/* */格式

对象属性访问：person.lastName; person["lastName"];

函数样例：function functionname(arg1,arg2) { code; return 0; }

函数可以被赋予为变量，可以调用变量

可以通过(){xxxx; return function(){}}()的方式闭包。xxx中定义的变量只能在此方法内使用

JavaScript 函数有个内置的对象 arguments 对象,包含了函数调用的参数数组。

支持的语句：

• if(condition){}else{}
• switch
• for, for in的语法中，变量的值是属性或数组的索引
• while, do {} while()
• break & continue
• throw、try 和 catch。throw "xxxx"可以抛出异常。

"use strict"; 启用严格模式下你不能使用未声明的变量。

Javascript中没有类的概念，如果需要定义新的类型，直接指定或者使用funtion定义。

保留字：

ES6

ES6中定义了class，尽量使用class定义

Module 语法是 JavaScript 模块的标准写法

import { func1, func2 } from 'moduleA';

使用const和let定义变量

ES6 新增了箭头函数。(参数1, 参数2, …, 参数N) => { 函数声明 }。箭头函数都没有自己的 this

ES6 函数可以自带参数，参数可以设定为指定值