Nodejs

Nodejs是什么

Nodejs是javascript的執(zhí)行引擎，提供的js文件作為運行入口。作為生產使用，盡量選擇LTS版本寺鸥。前端開發(fā)過程中大量使用到了html瘫筐、css和javascript的代碼拐纱，為了方便開發(fā)過程中對這些資源两踏、文件的處理连舍，需要定義一些處理過程授段，而前端開發(fā)人員使用最多的是js蹲蒲，而nodejs是一個js引擎，nodejs的作用和java中的jvm的作用是一致的侵贵。

在java開發(fā)中届搁，需要對業(yè)務的工具進行類的設計，實現(xiàn)對文件的歸類窍育，前端組件的設計卡睦，資源的維護等。因此有很多前端的工具和框架漱抓。全棧工程師則是加上js來編寫后端的業(yè)務處理過程表锻，就是一套技術就把前后端統(tǒng)一了，因此叫全棧工程師乞娄。

Javascript開發(fā)常用工具和框架

NPM是什么

在javascript項目的開發(fā)中瞬逊，有大量需要引用的模塊，為了管理模塊之間的依賴關系仪或，引入了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沪停，可以將這些文件合并，輸出為一個更優(yōu)化的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"
  }
}

執(zhí)行以下命令即可打包并運行項目

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$/, //文件匹配規(guī)則妻献，如果匹配，則使用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處理的規(guī)則需要參考具體loader的設計旋奢。

在webpack中使用css模塊

Css模塊在使用npm安裝后，可以直接使用import命令導入然痊。如安裝了weui的包至朗，在使用css類的地方可以直接使用js命令導入：

import from "weui"

Vue

Vue是表現(xiàn)層的框架，使用的方法是引入vue剧浸，定義Vue實例锹引，剩下的就是在實例中定義data數(shù)據(jù)，而在html中使用標簽顯示要展示的數(shù)據(jù)唆香。顯示層的變量格式是{{ variableName }}嫌变。

Vue的生命周期

Vue Lifecycle

Vue的模板語法

Vue的模板信息是添加到html的元素中的（單純的值是Mustache語法），下面是匯總：

• {{ varName }} : 單純獲取值躬它，varName可以使用單個js語句腾啥。
• v-html：當成原始HTML輸出。<span v-html="rawHtml"></span>
• <span v-if="seen">現(xiàn)在你看到我了</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的值除了靜態(tài)的以外倘待，可以通過計算和方法獲取，計算屬性在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屬性傳遞參數(shù)，建議在props中傳遞Object菇夸，而非單個屬性琼富。對于大量數(shù)據(jù)的傳遞，推薦使用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向父級組件觸發(fā)事件。

Vue可以動態(tài)切換組件摄咆，類似于java中reflection中的方式，內容比較多人断，參照https://cn.vuejs.org/v2/guide/components.html#動態(tài)組件

定義組件時吭从，名稱務必保證字母全小寫且必須包含一個連字符，這會幫助你避免和當前以及未來的 HTML 元素相沖突恶迈。

Vue.component注冊的組件是全局的涩金，可以局部注冊組件，但有較多限制暇仲。全局注冊的行為必須在根 Vue 實例 (通過 new Vue) 創(chuàng)建之前發(fā)生

props屬性傳遞參數(shù)可以設定參數(shù)的具體類型步做。

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

在一個JS文件中編寫不同的組件是很難維護的，因此提出了單文件組件的概念奈附，此文件包含html全度、JS和樣式內容，如下所示：

Vue文件組件

Vue文件組件和普通的js組件類似斥滤，包含template将鸵，script，style的內容佑颇。Vue文件組件在使用其他組件時有2中方式顶掉，一種是在全局（main.js）導入后使用，另外一種是在文件內部導入后使用挑胸，這是一種局部的導入方式痒筒。全局導入的方式適合在最終的項目中使用，局部導入的方式適合在組件開發(fā)時使用茬贵。

Vue工具

為了管理多文件組件簿透，以及和其他構建工具集成，Vue提供了cli闷沥，方便大家創(chuàng)建vue項目萎战。最新版的cli版本是3。Vue的cli工具有自己獨立的設計舆逃，自身使用插件的方式處理資源蚂维，原來webpack的處理邏輯被cli工具中的vue-cli-service包裝戳粒，可以認為vue的cli產生的項目使用常規(guī)方式比較難配置。新項目添加步驟如下

1. 使用vue create創(chuàng)建基礎項目
2. cd到項目目錄虫啥，執(zhí)行npm run serve可以發(fā)布項目做測試

后綴為vue的文件是vue的組件文件蔚约，在執(zhí)行vue-cli-service serve或vue-cli-service build時，cli插件自動將vue文件編譯成js代碼涂籽。

Vue-router

Vue-router是路由管理插件苹祟，目的是可以在一個頁面中可以自由的切換系統(tǒng)當前的組件。一個未使用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"];

函數(shù)樣例：function functionname(arg1,arg2) { code; return 0; }

函數(shù)可以被賦予為變量颁独，可以調用變量

可以通過(){xxxx; return function(){}}()的方式閉包彩届。xxx中定義的變量只能在此方法內使用

JavaScript 函數(shù)有個內置的對象 arguments 對象,包含了函數(shù)調用的參數(shù)數(shù)組。

支持的語句：

• if(condition){}else{}
• switch
• for, for in的語法中誓酒，變量的值是屬性或數(shù)組的索引
• 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 新增了箭頭函數(shù)隔嫡。(參數(shù)1, 參數(shù)2, …, 參數(shù)N) => { 函數(shù)聲明 }甸怕。箭頭函數(shù)都沒有自己的 this

ES6 函數(shù)可以自帶參數(shù)甘穿，參數(shù)可以設定為指定值