【LayaBox笔记原创(1)】LayaBox引入自定义第三方包

时间:2024-04-03 16:01:17

【LayaBox笔记原创(1)】LayaBox引入自定义第三方包

 

前言

 首先说明一点博主写的原创文章,都是基于自己项目中使用到的,觉得实用的知识点进行分享

并不会解释过程中的原理,知识点解答之类的,博主希望每个看到文章的人,自己按照步骤实现一遍

慢慢掌握这些知识点,加上自己的理解,才能真正成为自己的知识,而不是作为一个参考文档,来学习理论知识。

博主博客很丑,排版也不好,毕竟也有自己的工作,分享重于传达知识,不是做得很花里花哨宣传自己。

以上,不爽的憋着,你也可以帮博主设计,万分感谢!

 

代码

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

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

【LayaBox笔记原创(1)】LayaBox引入自定义第三方包

【LayaBox笔记原创(1)】LayaBox引入自定义第三方包【LayaBox笔记原创(1)】LayaBox引入自定义第三方包
 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.jscom.company.Person.js.map

【LayaBox笔记原创(1)】LayaBox引入自定义第三方包

【LayaBox笔记原创(1)】LayaBox引入自定义第三方包【LayaBox笔记原创(1)】LayaBox引入自定义第三方包
 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.jsbin\libs\ 目录下,并删除bin\com.company.Person.js 及其目录

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

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

【LayaBox笔记原创(1)】LayaBox引入自定义第三方包

【LayaBox笔记原创(1)】LayaBox引入自定义第三方包【LayaBox笔记原创(1)】LayaBox引入自定义第三方包
 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,就可以完成整个自定义第三方库的实现

【LayaBox笔记原创(1)】LayaBox引入自定义第三方包

【LayaBox笔记原创(1)】LayaBox引入自定义第三方包【LayaBox笔记原创(1)】LayaBox引入自定义第三方包
1     <!--jsfile--Custom-->
2     <script src="libs/Person.js"></script>
3     <!--jsfile--Custom-->
index.html

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

【LayaBox笔记原创(1)】LayaBox引入自定义第三方包

【LayaBox笔记原创(1)】LayaBox引入自定义第三方包【LayaBox笔记原创(1)】LayaBox引入自定义第三方包
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

 

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

链接:https://pan.baidu.com/s/1DpqkTUH1iU9uHdFmDNptjA
提取码:39nr 

 

转载于:https://www.cnblogs.com/wls-blogs/p/Laya.html