Salesforce中的ligthing的组件框架介绍

一. Controller js介绍

因为component不允许写任何的js，即使类似οnclick="alert(xxx);"这种js也是被禁止的，所以controller js部分作用是至关重要的。他管理着Component中所有的事件驱动操作。

这里假设我们在'showMyInfo' componet中有一个按钮名字是'Button1'，绑定了一个'onclick'事件，οnclick="{!c.handlerClick}".上面我们说过，针对元素组件引用attribute的值，使用v（v代表了view）。

当我们点击按钮或者触发了注册的事件后，会执行controller.js里面的方法，需要写{!c.functionName},其中c可以理解为 client-side controller，functionName为在controller.js中声明的方法名称。

当我们为一个component bundle新建一个Controller js时，我们会发现，每个Controller方法里面默认都有3个参数：

• cmp ： 代表当前操作的action所在的component，这里指的是showMyInfo
• event：代表当前action操作所触发的事件，通过事件可以获取到当前事件所对应的元素；
• helper：helper代表当前的componet对应的helper.js，当然这个参数不是必须的，helper文件可以写js内容用来和后台server controller交互。当然，如果你想把和server controller交互的代码写在当前的controller js中，也是可以的。

cmp：我们通常用cmp可以获取和设置attribute值，通过cmp.get('v.attributeName')即可获取到lightning component中attribute名称为attributeName的值。通过cmp.set('v.attributeName','testAttributeValue')即可设置lightning componet中名称为attributeName的attribute的值为testAttributeValue.当然，cmp可不止获取设置attribute值这么简单，还可以通过cmp.getEvent('eventName')获取注册的事件等等。我们平时用的cmp比较多的功能就是这两个了。

event：event代表当前操作的事件，比如当上面的用户点击了按钮，可以通过event.getSource()获取到事件源Button1以及获取到事件源自身的属性等信息；可以获取到事件源的事件操作。

 helper:helper代表了helper.js的实例化变量，你可以通过helper.helperMethod用来处理具体的逻辑，包括和后台交互；处理结果集；功能性的方法重用等等。因为有了helper，你的代码有了更好的可读性，可维护性以及可重用性。

 

下面通过几行简单的代码来了解cmp以及event的用法。

1. var btnClicked = event.getSource();此行代码可以理解为获取到点击的button的dom element
2. var btnMessage = btnClicked.get(''v.label"); 通过element的get方法可以获取到这个元素上面的属性值，获取属性值或者获取其他的组件中的元素信息，需要使用'v.'来获取；
3. component.set("v.message", btnMessage); 更新component中名称为message的attribute值。
4. controller中有可能有多个方法，每个方法之间使用‘，’分隔；最后一个方法不能有‘，’。

 

({
    handleClick: function(component, event, helper) {
        var btnClicked = event.getSource();         // the button
        var btnMessage = btnClicked.get("v.label"); // the button's label
        component.set("v.message", btnMessage);     // update our message
    },
　　 handleClick2: function(component,event,helper) {
　　 }
})

 

二 . Helper js 介绍

 如果是controller.js负责了component中的所有业务逻辑，那么helper js就承包了所有的业务细节处理或者公用的方法（显示隐藏loading等）。helper一般需要component这个参数，其他参数可以根据实际需要自动从controller.js获取以及传递。这里举例一个调用后台并对返回数据进行处理的例子。想要连接后台，需要准备以下的工作：

1.lightning component 的controller属性设置此component后台引用的controller,用法和classic用法相同；

2.controller（后台）方法需要为静态方法，并且需要添加@AuraEnabled注解。如果有classic经验的可以想一下remote action的后台要求，把@RemoteAction改成@AuraEnabled就好。

 

createItem: function(component, camping) {
    var action = component.get("c.saveItem");
    action.setParams({
        "camping": camping
    });
    action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            var items = component.get("v.items");
            items.push(response.getReturnValue());
            component.set("v.items", items);
        } else if(status == "INCOMPLETE") {
            console.log('execute');
        } else if(status == "ERROR") {
　　　　　　　console.log('error');
        }
    });
    $A.enqueueAction(action);
 }

 

上述例子功能为后台调用saveItem方法，camping作为参数传递到后台，然后异步调用。调用成功后将这个item写入到前台的camping列表中。

其中有几点需要注意：

1.我们通常使用component.get('v.something')来调用前台的一些属性元素等，在这里使用component.get('c.backgroundMethod')可以调用到后台的方法；

2.通过setParam可以对方法设置参数,通过setCallBack可以对这个方法进行异步处理，我们通常会将这种调用后台的方法进行异步结果处理；

3.response的状态主要有三种：SUCCESS/INCOMPLETE/ERROR。建议方法中将三种情况都进行处理，比如INCOMPLETE展示遮罩，ERROR/SUCCESS进行相应的业务处理以及解除遮罩等；

4.需要将action放在队列里面，让他排队进行执行。$A为lightning中封装的一个global变量，除了enqueueAction方法外还有很多常用的方法，后面会有涉及，有兴趣的自行查看。