【LayaBox笔记一】LayaBox引入自定义第三方包

【LayaBox笔记一】LayaBox引入自定义第三方包

1、创建Laya项目，选择ts语言

2、编写Laya类，例如我们创建一个com.company.Person类

 1 /**
 2 * 创建一个Person例子
 3 * @author wls
 4 * @date 2015-01-10
 5 */
 6 module com.company {
 7     export class Person {
 8         public name: string;        //公有属性
 9         private id: number;        //私有属性
10         private _age: number;        //私有属性，用于getset访问器
11         private static _sex: string;    //静态属性, 用于get访问器
12 
13         //带参数构造函数
14         constructor(id: number) {
15             this.id = id;
16         }
17 
18         public get age(): number {
19             return this._age;
20         }
21         public set age(value: number) {
22             this._age = value;
23         }
24 
25         public static get sex(): string {
26             return this._sex;
27         }
28 
29         public static set sex(value: string) {
30             this._sex = value;
31         }
32 
33         public get Id(): number {
34             return this.id;
35         }
36     }
37 }

Person.ts

3、保存、并编译，在bin目录下生成com.company.Person.js 和 com.company.Person.js.map

 1 /**
 2 * 创建一个Person例子
 3 * @author wls
 4 * @date 2015-01-10
 5 */
 6 var com;
 7 (function (com) {
 8     var company;
 9     (function (company) {
10         var Person = /** @class */ (function () {
11             //带参数构造函数
12             function Person(id) {
13                 this.id = id;
14             }
15             Object.defineProperty(Person.prototype, "age", {
16                 get: function () {
17                     return this._age;
18                 },
19                 set: function (value) {
20                     this._age = value;
21                 },
22                 enumerable: true,
23                 configurable: true
24             });
25             Object.defineProperty(Person, "sex", {
26                 get: function () {
27                     return this._sex;
28                 },
29                 set: function (value) {
30                     this._sex = value;
31                 },
32                 enumerable: true,
33                 configurable: true
34             });
35             Object.defineProperty(Person.prototype, "Id", {
36                 get: function () {
37                     return this.id;
38                 },
39                 enumerable: true,
40                 configurable: true
41             });
42             return Person;
43         }());
44         company.Person = Person;
45     })(company = com.company || (com.company = {}));
46 })(com || (com = {}));
47 //# sourceMappingURL=Person.js.map

Person.js

4、复制 Person.js 到 bin\libs\ 目录下，并删除bin\com.company.Person.js 及其目录

5、删除Person.ts文件及其目录

6、编写Person.d.ts提示类

 1 /**
 2 * 创建一个Person例子
 3 * @author wls
 4 * @date 2015-01-10
 5 */
 6 declare module com.company {
 7     export class Person {
 8         public name: string;        //公有属性
 9 
10         //带参数构造函数
11         constructor(id: number);
12 
13         public age: number;
14 
15         public static sex:string;
16         //只有get方法的定义
17         public readonly Id:number;
18 
19     }
20 }

Person.d.ts

7、bin\index.html中，引入Person.js，就可以完成整个自定义第三方库的实现

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

index.html

8、最后我们用个例子来测试一下

1 //调用我们定义的第三方类库
2         var person:com.company.Person = new com.company.Person(123);    //实例化一个Person，并传入ID
3         person.name = "wls";    //设置名称，直接属性赋值
4         person.age = 18            //设置年龄，get/set构造器赋值
5         com.company.Person.sex = "安静的美男子";    //设置性别，静态get/set构造器赋值
6         //输出结果
7         console.log(">>>我是一个",com.company.Person.sex,"大名：",person.name,"年年都",person.age);

View Code

源码和对应操作图片下载：

　　等待中...