Prefab的用途：为了重复利用

测试场景绑定的代码组件：

1cc.Class({
2    extends: cc.Component,
3
4    properties: {
5        //定义预制体属性，在界面中将建立好的prefab拖拽过来
6        myAlertPrefab:cc.Prefab,
7    },
8
9    // LIFE-CYCLE CALLBACKS:
10
11    // onLoad () {},
12
13    start () {
14    },
15
16    // update (dt) {},
17    
18    // 场景中放置一个按钮组件，下面是触发单击事件后执行的代码
19    onClickDispAlert:function(){
20        var alertNode = cc.instantiate(this.myAlertPrefab);
21        this.node.addChild(alertNode)
22        //cc.log(alertNode.toString())
23        var scriptComponent = alertNode.getComponent("alertPrefab");
24        scriptComponent.show("是否进入副本？",function(){
25            cc.log("OK 回调函数")
26        },function(){
27            cc.log("Cancel 回调函数")
28        },function(){
29            cc.log("Close 回调函数")
30        });
31    },
32    
33});

下面的代码绑定到事先做好的弹出窗口预制体上，用来实现复用弹出窗口。

1cc.Class({
2    extends: cc.Component,
3
4    properties: {
5        tips:cc.Label,
6    },
7
8    // LIFE-CYCLE CALLBACKS:
9
10    // onLoad () {},
11
12    start () {
13
14    },
15
16    clearCallback:function(){
17        this.setTips("");
18        this.setOkCallback();
19        this.setCancelCallback();
20        this.setCloseCallback();
21    },
22    show:function(tips,okCallback,cancelCallback,closeCallback){
23        this.clearCallback();
24        this.node.active = true;
25        this.setTips(tips);
26        this.setOkCallback(okCallback);
27        this.setCancelCallback(cancelCallback);
28        this.setCloseCallback(closeCallback);
29    },
30
31    // update (dt) {},
32    onClickOk:function(){
33        cc.log("ok event");
34        this.node.active = false;
35        if(this.m_OkCallback != null){
36            this.m_OkCallback();
37        }
38    },
39    onClickCancel:function(){
40        cc.log("cancel event");
41        this.node.active = false;
42
43        if(this.m_CancelCallback != null){
44            this.m_OkCallback();
45        }
46    },
47    onClickClose:function(){
48        cc.log("close event");
49        this.node.active = false;
50        if(this.m_CloseCallback != null){
51            this.m_CloseCallback();
52        }
53    },
54
55    setTips:function(tips){
56        if(tips == "" || tips == undefined){
57            tips= "默认的提示信息！"    
58        }
59        this.tips.string = tips;
60    },
61
62    //设置回调函数
63    setOkCallback:function(callback){
64        this.m_OkCallback = callback;
65    },
66    setCloseCallback:function(callback){
67        this.m_CloseCallback = callback;
68    },
69    setCancelCallback:function(callback){
70        this.m_CancelCallback = callback;
71    },
72});

完全动态加载Prefab

> Cocos Creator中需要动态加载的资源放在 resources 目录下(resources 需要在 assets 文件夹中手工创建，并且必须位于 assets 的根目录)，配合 cc.resources.load 等接口动态加载。你只要传入相对 resources 的路径即可，并且路径的结尾处不能包含文件扩展名。

1//此脚本作为组件，绑定到场景中的Canvas上
2cc.Class({
3    extends: cc.Component,
4
5    properties: {
6    },
7
8    // LIFE-CYCLE CALLBACKS:
9
10    // onLoad () {},
11
12    start() {
13    },
14
15    // update (dt) {},
16
17    onClickLoadLogin: function () {
18        var self = this; //防止this在匿名函数中的作用域问题
19        //预制体存放位置：resources/template/login
20        cc.resources.load("template/login", function (err, prefab) {
21            var newNode = cc.instantiate(prefab);
22            newNode.x=0;
23            newNode.y=0;
24            var position1 = self.node.getChildByName("position1");//position1为场景中的空节点
25            position1.addChild(newNode);
26            //cc.director.getScene().addChild(newNode);
27        });
28    }
29});

**注意：**在cocos creator 2.4.0以后的版本推荐使用cc.resources.loadAPI来加载资源。

参考资源

官方文档-加载资源：

• https://docs.cocos.com/creator/manual/zh/scripting/dynamic-load-resources.html