【LayaBox筆記原創（1）】LayaBox引入自定義第三方包

 

前言

 首先說明一點博主寫的原創文章，都是基於自己項目中使用到的，覺得實用的知識點進行分享

並不會解釋過程中的原理，知識點解答之類的，博主希望每個看到文章的人，自己按照步驟實現一遍

慢慢掌握這些知識點，加上自己的理解，才能真正成為自己的知識，而不是作為一個參考文檔，來學習理論知識。

博主博客很丑，排版也不好，畢竟也有自己的工作，分享重於傳達知識，不是做得很花里花哨宣傳自己。

以上，不爽的憋着，你也可以幫博主設計，萬分感謝！

 

代碼

1、創建Laya項目，選擇ts語言

2、編寫Laya類，例如我們創建一個com.company.Person類

/**
* 創建一個Person例子
* @author wls
* @date 2015-01-10
*/
module com.company {
    export class Person {
        public name: string;        //公有屬性
        private id: number;        //私有屬性
        private _age: number;        //私有屬性，用於getset訪問器
        private static _sex: string;    //靜態屬性, 用於get訪問器

        //帶參數構造函數
        constructor(id: number) {
            this.id = id;
        }

        public get age(): number {
            return this._age;
        }
        public set age(value: number) {
            this._age = value;
        }

        public static get sex(): string {
            return this._sex;
        }

        public static set sex(value: string) {
            this._sex = value;
        }

        public get Id(): number {
            return this.id;
        }
    }
}

3、保存、並編譯，在bin目錄下生成com.company.Person.js 和 com.company.Person.js.map

/**
* 創建一個Person例子
* @author wls
* @date 2015-01-10
*/
var com;
(function (com) {
    var company;
    (function (company) {
        var Person = /** @class */ (function () {
            //帶參數構造函數
            function Person(id) {
                this.id = id;
            }
            Object.defineProperty(Person.prototype, "age", {
                get: function () {
                    return this._age;
                },
                set: function (value) {
                    this._age = value;
                },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(Person, "sex", {
                get: function () {
                    return this._sex;
                },
                set: function (value) {
                    this._sex = value;
                },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(Person.prototype, "Id", {
                get: function () {
                    return this.id;
                },
                enumerable: true,
                configurable: true
            });
            return Person;
        }());
        company.Person = Person;
    })(company = com.company || (com.company = {}));
})(com || (com = {}));
//# sourceMappingURL=Person.js.map

4、復制 Person.js 到 bin\libs\ 目錄下，並刪除bin\com.company.Person.js 及其目錄

5、刪除Person.ts文件及其目錄

6、編寫Person.d.ts提示類

/**
* 創建一個Person例子
* @author wls
* @date 2015-01-10
*/
declare module com.company {
    export class Person {
        public name: string;        //公有屬性

        //帶參數構造函數
        constructor(id: number);

        public age: number;

        public static sex:string;
        //只有get方法的定義
        public readonly Id:number;

    }
}

7、bin\index.html中，引入Person.js，就可以完成整個自定義第三方庫的實現

    <!--jsfile--Custom-->
    <script src="libs/Person.js"></script>
    <!--jsfile--Custom-->

8、最后我們用個例子來測試一下

//調用我們定義的第三方類庫
        var person:com.company.Person = new com.company.Person(123);    //實例化一個Person，並傳入ID
        person.name = "wls";    //設置名稱，直接屬性賦值
        person.age = 18            //設置年齡，get/set構造器賦值
        com.company.Person.sex = "安靜的美男子";    //設置性別，靜態get/set構造器賦值
        //輸出結果
        console.log(">>>我是一個",com.company.Person.sex,"大名：",person.name,"年年都",person.age);

 

源碼和對應操作圖片下載：　

鏈接：https://pan.baidu.com/s/1DpqkTUH1iU9uHdFmDNptjA
提取碼：39nr