typescript: Proxy Pattern

 

/**
 * Proxy Pattern 代理是一种结构型设计模式， 让你能提供真实服务对象的替代品给客户端使用。 代理接收客户端的请求并进行一些处理 （访问控制和缓存等）， 然后再将请求传递给服务对象。
 * The Subject interface declares common operations for both RealSubject and the
 * Proxy. As long as the client works with RealSubject using this interface,
 * you'll be able to pass it a proxy instead of a real subject.
 */
interface DuSubject {
    /**
     * 
     * @param du 
     */
    request(du:string): string; //void 也可以是方法，也可以是返回字符串等数据类型
}

/**
 * The RealSubject contains some core business logic. Usually, RealSubjects are
 * capable of doing some useful work which may also be very slow or sensitive -
 * e.g. correcting input data. A Proxy can solve these issues without any
 * changes to the RealSubject's code.
 */
class RealSubject implements DuSubject {
    /**
     * 
     * @param du 
     * @returns 
     */
    public request(du:string): string { //void
        console.log('RealSubject: Handling request.');
        return "RealSubject: Handling request."+du;
    }
}

/**
 * The Proxy has an interface identical to the RealSubject.
 */
class DuProxy implements DuSubject {
    private realSubject: RealSubject;

    /**
     * The Proxy maintains a reference to an object of the RealSubject class. It
     * can be either lazy-loaded or passed to the Proxy by the client.
     */
    constructor(realSubject: RealSubject) {
        this.realSubject = realSubject;
    }

    /**
     * The most common applications of the Proxy pattern are lazy loading,
     * caching, controlling the access, logging, etc. A Proxy can perform one of
     * these things and then, depending on the result, pass the execution to the
     * same method in a linked RealSubject object.
     * @param du 
     */
    public request(du:string):string  { //void
        let str="";
        if (this.checkAccess()) {
           str=this.realSubject.request(du);
            this.logAccess();
            
        }
        return str;
    }

    private checkAccess(): boolean {
        // Some real checks should go here.
        console.log('Proxy: Checking access prior to firing a real request.');

        return true;
    }

    private logAccess(): void {
        console.log('Proxy: Logging the time of request.');
    }
}

/**
 * The client code is supposed to work with all objects (both subjects and
 * proxies) via the Subject interface in order to support both real subjects and
 * proxies. In real life, however, clients mostly work with their real subjects
 * directly. In this case, to implement the pattern more easily, you can extend
 * your proxy from the real subject's class.
 * @param subject 
 * @param du 
 */
function clientCodeProxy(subject: DuSubject,du:string) {
    // ...

   return subject.request(du);

    // ...
}

let pubpr1="";
let pubpr2="";
let pubpr3="Geovin Du";
let pubpr4="geovindu";

console.log('Client: Executing the client code with a real subject:');
const realSubject = new RealSubject();
pubpr1=clientCodeProxy(realSubject,pubpr4);

console.log('');

console.log('Client: Executing the same client code with a proxy:');
const proxy = new DuProxy(realSubject);
pubpr2=clientCodeProxy(proxy,pubpr3);


let messageProxy: string = 'Hello World,This is a typescript!,涂聚文 Geovin Du.Web';
document.body.innerHTML = messageProxy+",<br/>one="+pubpr1+",<br/>two="+pubpr2+",<br/>thee="+pubpr3+",<br/>four="+pubpr4+",<br/>TypeScript Proxy Pattern 代理模式";

　　

调用：

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <head><title>TypeScript Hello Proxy Pattern 代理模式</title>
      <meta name="Description" content="geovindu,涂聚文,Geovin Du"/>
<meta name="Keywords" content="geovindu,涂聚文,Geovin Du"/>
<meta name="author" content="geovindu,涂聚文,Geovin Du"/> 
    </head>
    <body>
        <script>
           // require("./dist/geovin.js");
        </script>
        <script src="dist/Proxyts.js">
 //
            //type="module"
        </script>

    </body>
</html>

　　

输出：

 

posted @ 2023-10-10 16:45  ®Geovin Du Dream Park™  阅读(36)  评论(0)    收藏  举报