es6 Proxy對象詳解

時間  2019-11-11
標籤 es6 proxy 對象 詳解 欄目 JavaScript 简体版
原文   原文鏈接

Proxy用於修改某些操做的默認行爲，也能夠理解爲在目標對象以前架設一層攔截，外部全部的訪問都必須先經過這層攔截，所以提供了一種機制，能夠對外部的訪問進行過濾和修改。這個詞的原理爲代理，在這裏能夠表示由它來「代理」某些操做，譯爲「代理器」。es6

var obj = new Proxy({}, {
  get: function (target, key, receiver) {
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, value, receiver) {
    console.log(`setting ${key}!`);
    return Reflect.set(target, key, value, receiver);
  }
});

上面代碼對一個空對象架設了一層攔截，從新定義了屬性的讀取(get)和設置(set)行爲。對設置了攔截行爲的對象obj，去讀寫它的屬性，用本身的定義覆蓋了語言的原始定義，運行獲得下面的結果。json

obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

 

ES6原生提供了Proxy構造函數，用來生成Proxy實例。數組

var proxy = new Proxy(target, handler);

Proxy對象的全部用法，都是上面的這種形式。不一樣的只是handle參數的寫法。其中new Proxy用來生成Proxy實例，target是表示所要攔截的對象，handle是用來定製攔截行爲的對象。app

var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

proxy.time // 35
proxy.name // 35
proxy.title // 35

上面是一個攔截讀取屬性的行爲的例子。要使Proxy起做用，必須針對Proxy實例進行操做，而不是針對目標對象（target）進行操做。函數

若是handler沒有設置任何攔截，那就等同於直接通向原對象，以下：this

var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"

咱們能夠將Proxy對象，設置到object.proxy屬性，從而能夠在object對象上調用。spa

var object = { proxy: new Proxy(target, handler) };

Proxy對象也能夠做爲其它對象的原型對象。prototype

var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

let obj = Object.create(proxy);
obj.time // 35

上面代碼中，proxy對象是obj的原型對象，obj自己並無time屬性，因此根據原型鏈，會在proxy對象上讀取屬性，從而被攔截。代理

同一個攔截函數，能夠設置多個操做。code

var handler = {
  get: function(target, name) {
    if (name === 'prototype') {
      return Object.prototype;
    }
    return 'Hello, ' + name;
  },

  apply: function(target, thisBinding, args) {
    return args[0];
  },

  construct: function(target, args) {
    return {value: args[1]};
  }
};

var fproxy = new Proxy(function(x, y) {
  return x + y;
}, handler);

fproxy(1, 2) // 1
new fproxy(1, 2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo === "Hello, foo" // true

 

Proxy支持攔截的操做，一共有13種：

  • get(target, propKey, receiver)：攔截對象屬性的讀取，好比proxy.foo和proxy['foo']。
  • set(target, propKey, value, receiver)：攔截對象屬性的設置，好比proxy.foo = v或proxy['foo'] = v，返回一個布爾值。
  • has(target, propKey)：攔截propKey in proxy的操做，返回一個布爾值。
  • deleteProperty(target, propKey)：攔截delete proxy[propKey]的操做，返回一個布爾值。
  • ownKeys(target)：攔截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循環，返回一個數組。該方法返回目標對象全部自身的屬性的屬性名，而Object.keys()的返回結果僅包括目標對象自身的可遍歷屬性。
  • getOwnPropertyDescriptor(target, propKey)：攔截Object.getOwnPropertyDescriptor(proxy, propKey)，返回屬性的描述對象。
  • defineProperty(target, propKey, propDesc)：攔截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一個布爾值。
  • preventExtensions(target)：攔截Object.preventExtensions(proxy)，返回一個布爾值。
  • getPrototypeOf(target)：攔截Object.getPrototypeOf(proxy)，返回一個對象。
  • isExtensible(target)：攔截Object.isExtensible(proxy)，返回一個布爾值。
  • setPrototypeOf(target, proto)：攔截Object.setPrototypeOf(proxy, proto)，返回一個布爾值。若是目標對象是函數，那麼還有兩種額外操做能夠攔截。
  • apply(target, object, args)：攔截 Proxy 實例做爲函數調用的操做，好比proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
  • construct(target, args)：攔截 Proxy 實例做爲構造函數調用的操做，好比new proxy(...args)。

 

Proxy實例方法:

 

get()

get方法用於攔截某個屬性的讀取操做，能夠接收三個參數，依次爲目標對象，屬性名和Proxy實例自己（操做行爲是針對的對象），其中最後一個參數可選。

var person = {
  name: "張三"
};

var proxy = new Proxy(person, {
  get: function(target, property) {
    if (property in target) {
      return target[property];
    } else {
      throw new ReferenceError("Property \"" + property + "\" does not exist.");
    }
  }
});

proxy.name // "張三"
proxy.age // 拋出一個錯誤

 

上面代碼表示若是有這個屬性則返回屬性值，如沒有就會報錯，若是沒有這個攔截，沒有屬性會返回undefined。

get方法能夠繼承。

let proto = new Proxy({}, {
  get(target, propertyKey, receiver) {
    console.log('GET ' + propertyKey);
    return target[propertyKey];
  }
});

let obj = Object.create(proto);
obj.foo // "GET foo"

上面代碼中，攔截操做定義在prototype對象上面，因此若是讀取obj對象繼承的屬性時，攔截會生效。

利用proxy，能夠將讀取某個屬性的操做（get），轉變爲執行某個函數，從而實現屬性的鏈式操做。

var pipe = (function () {
  return function (value) {
    var funcStack = [];
    var oproxy = new Proxy({} , {
      get : function (pipeObject, fnName) {
        if (fnName === 'get') {
          return funcStack.reduce(function (val, fn) {
            return fn(val);
          },value);
        }
        funcStack.push(window[fnName]);
        return oproxy;
      }
    });

    return oproxy;
  }
}());

var double = n => n * 2;
var pow    = n => n * n;
var reverseInt = n => n.toString().split("").reverse().join("") | 0;

pipe(3).double.pow.reverseInt.get; // 63

若是一個屬性不可配置（configurable）且不可寫（writable），則Proxy不能修改該屬性，不然經過Proxy對象訪問該屬性報錯。

const target = Object.defineProperties({}, {
  foo: {
    value: 123,
    writable: false,
    configurable: false
  },
});

const handler = {
  get(target, propKey) {
    return 'abc';
  }
};

const proxy = new Proxy(target, handler);

proxy.foo
// TypeError: Invariant check failed

 

 

set()

set方法用來攔截某個屬性的賦值操做，能夠接受4個參數，依次爲目標對象，屬性名，屬性值和Proxy實例自己，其中最後一個參數可選。

假設Person對象有個age屬性，該屬性是一個不大於200的整數，那麼可使用Proxy來保證age的屬性值符合要求。

let validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }

    // 對於知足條件的 age 屬性以及其餘屬性，直接保存
    obj[prop] = value;
  }
};

let person = new Proxy({}, validator);

person.age = 100;

person.age // 100
person.age = 'young' // 報錯
person.age = 300 // 報錯

 

上面代碼中，因爲設置了存值函數set，任何不符合要求的age屬性賦值都會報錯，這是數據驗證的一種實現方法。利用set方法，還能夠數據綁定，每當對象發生變化時，會自動更新DOM。

有時咱們能夠對一個對象設置內部屬性，屬性名的第一個字符使用下劃線開頭，表示這些屬性不該被外部使用，如：

const handler = {
  get (target, key) {
    invariant(key, 'get');
    return target[key];
  },
  set (target, key, value) {
    invariant(key, 'set');
    target[key] = value;
    return true;
  }
};
function invariant (key, action) {
  if (key[0] === '_') {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}
const target = {};
const proxy = new Proxy(target, handler);
proxy._prop
// Error: Invalid attempt to get private "_prop" property
proxy._prop = 'c'
// Error: Invalid attempt to set private "_prop" property

上面代碼中，只要讀寫的屬性名的第一個字符是下劃線，一概報錯，從而禁止讀寫內部屬性的目的。

const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';
proxy.foo === proxy // true

上面代碼中，set方法的第四個參數receiver，指的是原始的操做行爲實在的對象，通常狀況下是Proxy實例自己。

若是目標對象的某個屬性，不可配置且不可寫，那麼set方法將不起做用。

const obj = {};
Object.defineProperty(obj, 'foo', {
  value: 'bar',
  writable: false,
});

const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = 'baz';
  }
};

const proxy = new Proxy(obj, handler);
proxy.foo = 'baz';
proxy.foo // "bar"

 

 

apply()

apply方法攔截函數的調用，call和apply操做。

apply方法能夠接收三個參數，依次是目標對象，目標對象的上下文對象（this）和目標對象的參數數組。

var handler = {
  apply (target, ctx, args) {
    return Reflect.apply(...arguments);
  }
};

下面是一個例子：

var target = function () { return 'I am the target'; };
var handler = {
  apply: function () {
    return 'I am the proxy';
  }
};

var p = new Proxy(target, handler);

p()
// "I am the proxy"

上面代碼中，變量p是Proxy的實例，當它做爲函數調用時（p()），就會被apply方法攔截，返回一個字符串。

下面另外一個例子：

var twice = {
  apply (target, ctx, args) {
    return Reflect.apply(...arguments) * 2;
  }
};
function sum (left, right) {
  return left + right;
};
var proxy = new Proxy(sum, twice);
proxy(1, 2) // 6
proxy.call(null, 5, 6) // 22
proxy.apply(null, [7, 8]) // 30

上面代碼中，每當執行proxy函數（直接調用或call和apply調用），就會被apply方法攔截。

另外直接調用Reflect.apply方法，也會被攔截。

Reflect.apply(proxy, null, [9, 10]) // 38

 

 

has()

has方法用來攔截Hasproperty操做，即判斷對象是否有某個屬性時，這個方法會生效。典型的操做就是in操做。

has方法能夠接收兩個參數，分別是目標對象，需查詢的屬性名。

var handler = {
  has (target, key) {
    if (key[0] === '_') {
      return false;
    }
    return key in target;
  }
};
var target = { _prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
'_prop' in proxy // false

上面代碼中，如原對象的屬性名的第一個字符是下劃線，則返回false，從而不被in運算符發現，達到隱藏屬性的目的。

對象不可配置或禁止擴展時，has攔截會報錯。

var obj = { a: 10 };
Object.preventExtensions(obj);

var p = new Proxy(obj, {
  has: function(target, prop) {
    return false;
  }
});

'a' in p // TypeError is thrown

ps：has方法攔截的是hasProperty操做，而不是hasOwnProperty操做，即不判斷一個屬性是自身的屬性仍是繼承屬性。、

has方法只對in運算符生效，而不對for...in循環生效，以下。

let stu1 = {name: '張三', score: 59};
let stu2 = {name: '李四', score: 99};

let handler = {
  has(target, prop) {
    if (prop === 'score' && target[prop] < 60) {
      console.log(`${target.name} 不及格`);
      return false;
    }
    return prop in target;
  }
}

let oproxy1 = new Proxy(stu1, handler);
let oproxy2 = new Proxy(stu2, handler);

'score' in oproxy1
// 張三 不及格
// false

'score' in oproxy2
// true

for (let a in oproxy1) {
  console.log(oproxy1[a]);
}
// 張三
// 59

for (let b in oproxy2) {
  console.log(oproxy2[b]);
}
// 李四
// 99

 

 

construct()

construct方法用於攔截new命令，下面是攔截對象的寫法。

var handler = {
  construct (target, args, newTarget) {
    return new target(...args);
  }
};

construct方法能夠接收三個參數，依次是目標對象，構造函數的參數對象和創造實例對象時，new命令做用的構造函數（可選）

var p = new Proxy(function () {}, {
  construct: function(target, args) {
    console.log('called: ' + args.join(', '));
    return { value: args[0] * 10 };
  }
});

(new p(1)).value
// "called: 1"
// 10

construct方法返回的必須是一個對象，不然會報錯。

var p = new Proxy(function() {}, {
  construct: function(target, argumentsList) {
    return 1;
  }
});

new p() // 報錯

 

 

deleteProperty()

deleteProperty方法攔截的是delete操做，若是這個方法拋出錯誤或返回false，則當前屬性就沒法被delete命令刪除。

var handler = {
  deleteProperty (target, key) {
    invariant(key, 'delete');
    return true;
  }
};
function invariant (key, action) {
  if (key[0] === '_') {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}

var target = { _prop: 'foo' };
var proxy = new Proxy(target, handler);
delete proxy._prop
// Error: Invalid attempt to delete private "_prop" property

上面代碼中，deleteProperty方法攔截了delete操做，當刪除屬性的第一個字符爲下劃線的時候會報錯。

當目標對象的不可配置（configruable）的屬性時，不能被deleteProperty方法攔截，會報錯。

 

 

defineProperty()

defineProperty方法攔截的Object.defineProperty操做。

var handler = {
  defineProperty (target, key, descriptor) {
    return false;
  }
};
var target = {};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar' // 不會生效

上面代碼中，defineProperty方法返回false，致使添加新屬性老是無效。

若是目標對象不可擴展（extensible），則defineProperty不能增長目標對象上不存在的屬性，不然會報錯。另外，若是目標對象不可配置或不可寫，則defineProperty方法不得改變這兩個設置。

 

 

getOwnPropertyDescriptor()

getOwnPropertyDescriptor方法是攔截Object.getOwnPropertyDescriptor，返回一個屬性描述對象或者undefined。

var handler = {
  getOwnPropertyDescriptor (target, key) {
    if (key[0] === '_') {
      return;
    }
    return Object.getOwnPropertyDescriptor(target, key);
  }
};
var target = { _foo: 'bar', baz: 'tar' };
var proxy = new Proxy(target, handler);
Object.getOwnPropertyDescriptor(proxy, 'wat')
// undefined
Object.getOwnPropertyDescriptor(proxy, '_foo')
// undefined
Object.getOwnPropertyDescriptor(proxy, 'baz')
// { value: 'tar', writable: true, enumerable: true, configurable: true }

上面代碼中，handler的getOwnPropertyDescriptor方法對於第一個字符爲下劃線的屬性名會返回undefined。

 

 

getPropertyOf()　　

getPropertyOf方法主要用來攔截獲取對象原型。具體來講，攔截下面這些操做：

  • Object.prototype.__proto__
  • Object.prototype.isPrototypeOf()
  • Object.getPrototypeOf()
  • Reflect.getPrototypeOf()
  • instanceOf()

下面例子：

var proto = {};
var p = new Proxy({}, {
  getPrototypeOf(target) {
    return proto;
  }
});
Object.getPrototypeOf(p) === proto // true

上面代碼中，getPrototypeOf攔截Object.getPrototypeOf()，返回proto對象。

ps：getPrototypeOf必須返回對象或者null，不然報錯。另外若是目標對象不可擴展，getPrototypeOf必須返回目標對象的原型對象。

 

isExtensible()

isExtensible方法攔截Object.isExtensible操做。

var p = new Proxy({}, {
  isExtensible: function(target) {
    console.log("called");
    return true;
  }
});

Object.isExtensible(p)
// "called"
// true

上面代碼中設置了isExtensible方法，在調用Object.isExtensible是輸出called。

該方法只能返回布爾值，若是不是將會把返回值自動轉化爲布爾值。

還有一個強限制，它的返回值必須與目標對象的isExtensible屬性保持一致，不然就會拋出錯誤。

Object.isExtensible(proxy) === Object.isExtensible(target)

下面的就會報錯：

var p = new Proxy({}, {
  isExtensible: function(target) {
    return false;
  }
});

Object.isExtensible(p) // 報錯

 

 

ownKeys()

ownKeys方法是用來攔截對象自身屬性的讀取操做，攔截的操做有：

  • Object.getOwnPropertyNames()
  • Object.getOwnPropertySymbls()
  • Object.keys()
  • for...in循環

下面一個攔截Object.keys()的例子：

let target = {
  a: 1,
  b: 2,
  c: 3
};

let handler = {
  ownKeys(target) {
    return ['a'];
  }
};

let proxy = new Proxy(target, handler);

Object.keys(proxy)
// [ 'a' ]

下面例子攔截第一個字符爲下劃線的屬性名：

let target = {
  _bar: 'foo',
  _prop: 'bar',
  prop: 'baz'
};

let handler = {
  ownKeys (target) {
    return Reflect.ownKeys(target).filter(key => key[0] !== '_');
  }
};

let proxy = new Proxy(target, handler);
for (let key of Object.keys(proxy)) {
  console.log(target[key]);
}
// "baz"

在使用Object.keys()時，如下三類屬性會被ownKeys方法自動過濾，不會返回：

  • 目標對象不存在的屬性
  • 屬性名爲Symbol值
  • 不可遍歷（enumerable）的屬性
let target = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.for('secret')]: '4',
};

Object.defineProperty(target, 'key', {
  enumerable: false,
  configurable: true,
  writable: true,
  value: 'static'
});

let handler = {
  ownKeys(target) {
    return ['a', 'd', Symbol.for('secret'), 'key'];
  }
};

let proxy = new Proxy(target, handler);

Object.keys(proxy)
// ['a']

ownKeys方法還能夠攔截Object.getOwnPropertyNames()方法。

var p = new Proxy({}, {
  ownKeys: function(target) {
    return ['a', 'b', 'c'];
  }
});

Object.getOwnPropertyNames(p)
// [ 'a', 'b', 'c' ]

for...in循環也受到ownKeys方法的攔截。

const obj = { hello: 'world' };
const proxy = new Proxy(obj, {
  ownKeys: function () {
    return ['a', 'b'];
  }
});

for (let key in proxy) {
  console.log(key); // 沒有任何輸出
}

ownKeys方法返回的數組成員，只能是字符串或symbol值，若是有其餘類型的值，或者返回的不是數組，就會報錯。

var obj = {};

var p = new Proxy(obj, {
  ownKeys: function(target) {
    return [123, true, undefined, null, {}, []];
  }
});

Object.getOwnPropertyNames(p)
// Uncaught TypeError: 123 is not a valid property name

若是目標對象自身包含不可配置的屬性，則該屬性必須被ownKeys方法返回，不然報錯。

var obj = {};
Object.defineProperty(obj, 'a', {
  configurable: false,
  enumerable: true,
  value: 10 }
);

var p = new Proxy(obj, {
  ownKeys: function(target) {
    return ['b'];
  }
});

Object.getOwnPropertyNames(p)
// Uncaught TypeError: 'ownKeys' on proxy: trap result did not include 'a'

若是目標對象是不可擴展的，這是ownKeys方法返回的數組之中，必須包含原對象的全部屬性，且不能包含多餘的屬性，不然報錯。

var obj = {
  a: 1
};

Object.preventExtensions(obj);

var p = new Proxy(obj, {
  ownKeys: function(target) {
    return ['a', 'b'];
  }
});

Object.getOwnPropertyNames(p)
// Uncaught TypeError: 'ownKeys' on proxy: trap returned extra keys but proxy target is non-extensible

 

 

preventExtensions()

preventExtensions方法攔截Object.preventExtensions()，該方法必須返回布爾值，不然自動轉化爲布爾值。

該方法還有一個限制，只有目標對象不可擴展(即Object.isExtensible(proxy)爲false時)，Proxy.preventExtensions才能返回true，不然報錯。

var p = new Proxy({}, {
  preventExtensions: function(target) {
    return true;
  }
});

Object.preventExtensions(p) // 報錯

爲了防止這問題出現，一般要在proxy.preventExtensions方法裏面，調用一次Object.preventExtensions.

var p = new Proxy({}, {
  preventExtensions: function(target) {
    console.log('called');
    Object.preventExtensions(target);
    return true;
  }
});

Object.preventExtensions(p)
// "called"
// true

 

 

setPrototypeOf()

setPrototypeOf方法只要用來攔截Object.setPrototypeOf方法。

var handler = {
  setPrototypeOf (target, proto) {
    throw new Error('Changing the prototype is forbidden');
  }
};
var proto = {};
var target = function () {};
var proxy = new Proxy(target, handler);
Object.setPrototypeOf(proxy, proto);
// Error: Changing the prototype is forbidden

上面代碼中，只要修改target的原型對象，就會報錯。

注意，該方法只能返回布爾值，不然會自動轉化爲布爾值。另外若是目標對象不可擴展。setPrototypeOf方法不得改變目標對象的原型。

 

Proxy.revocable()

 

Proxy.revocable方法返回一個可取消的proxy實例。

let target = {};
let handler = {};

let {proxy, revoke} = Proxy.revocable(target, handler);

proxy.foo = 123;
proxy.foo // 123

revoke();
proxy.foo // TypeError: Revoked

proxy.revocable方法返回一個對象，該對象的proxy屬性是proxy實例，revoke屬性是一個函數，可取消proxy實例。上面代碼中，當執行revoke函數後，在訪問proxy實例，就會報錯。

proxy.revocable使用的一個場景，目標對象不容許直接訪問，必須經過代理訪問，一旦訪問結束就收回代理權，不容許再次訪問。

 

 

this問題

雖然 Proxy 能夠代理針對目標對象的訪問，但它不是目標對象的透明代理，即不作任何攔截的狀況下，也沒法保證與目標對象的行爲一致。主要緣由就是在 Proxy 代理的狀況下，目標對象內部的this關鍵字會指向 Proxy 代理。

const target = {
  m: function () {
    console.log(this === proxy);
  }
};
const handler = {};

const proxy = new Proxy(target, handler);

target.m() // false
proxy.m()  // true

上面代碼中，一旦proxy代理了target.m，後者內部的this則指向了proxy，而不是target。

而有些原生對象的內部屬性，只有經過正確的this才能拿到，因此proxy也沒法代理這些原生對象的屬性。

const target = new Date();
const handler = {};
const proxy = new Proxy(target, handler);

proxy.getDate();
// TypeError: this is not a Date object.

上面代碼，getDate方法只能在Date對象的實例上面拿到，若是this不是Date就會報錯。若是this綁定原始對象，就能夠解決這個問題。

const target = new Date('2015-01-01');
const handler = {
  get(target, prop) {
    if (prop === 'getDate') {
      return target.getDate.bind(target);
    }
    return Reflect.get(target, prop);
  }
};
const proxy = new Proxy(target, handler);

proxy.getDate() // 1

 

實例：Web 服務的客戶端

Proxy 對象能夠攔截目標對象的任意屬性，這使得它很合適用來寫 Web 服務的客戶端。

const service = createWebService('http://example.com/data');

service.employees().then(json => {
  const employees = JSON.parse(json);
  // ···
});

上面代碼新建了一個 Web 服務的接口，這個接口返回各類數據。Proxy 能夠攔截這個對象的任意屬性，因此不用爲每一種數據寫一個適配方法，只要寫一個 Proxy 攔截就能夠了。

function createWebService(baseUrl) {
  return new Proxy({}, {
    get(target, propKey, receiver) {
      return () => httpGet(baseUrl+'/' + propKey);
    }
  });
}

 

原文連接：http://es6.ruanyifeng.com/#docs/proxy

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程