润饰器

润饰器是一个 JavaScript 函数（发起是纯函数），它用于修正类属性/要领或类自身。润饰器提案正处于第二阶段，我们能够运用 babel-plugin-transform-decorators-legacy 这个 Babel 插件来转换它。

类润饰器

@Dec
class Topic{

}

function Dec(target){
    target.type = 'Topic';  // 类的静态属性
    target.prototype.type = 'topic object'; //类的实例属性
}

var topic = new Topic();
console.log(Topic.type); // Topic
console.log(topic.type); // topic object

润饰器是一个对类举行处置惩罚的函数。类润饰器函数的第一个参数，就是所要润饰的目的类。
函数Dec的参数target，就是被润饰的类。假如要在类的实例上增加属性可经由过程 target.prototype。
假如要经由过程润饰器通报参数可在润饰器表面封装一层（多层）函数。

function Decs(type){
    return target => {
        target.type = 'Topic' + type;
        target.prototype.type = 'topic ' + type;
    }
}

注重: 润饰器对类的行动的转变，是代码编译时发作的，而不是在运转时。这意味着，润饰器能在编译阶段运转代码。也就是说，润饰器实质就是编译时实行的函数

看一个例子，经由过程类润饰器给 React 组件增加 axios 实例：

//App.js
@Create({
    baseURL: 'https:xxx.xxx.xxx',
})
class App extends Component{
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.$axios.get('/user?ID=12345');
    }
}

// Create润饰器
const Create = config => (target, property, descriptor) => {
    // 防止在类的要领上运用
    if (!descriptor) { 
        target.prototype.$axios = axios.create(config);
    }
}

类要领润饰器

class App extends Component{
    constructor(props) {
        super(props);
    }

    @GET('/user?ID=12345')
    getUser(res) {
        // 
    }
}

// axios get要求简朴封装
function GET(url){
    return function(target, name, descriptor) {
        let oldVal = descriptor.value;

        // descriptor.value为当前润饰器所润饰的属性值
        descriptor.value = function(){
            axios.get(url)
                .then((res)=>{
                    oldVal.apply(this, res.data);
                }).catch((err)=>{
                    oldVal.apply(this, {}, err)
                });
        }
    }
}

类要领的润饰器函数一共能够接收三个参数，第一个参数是类的原型对象，上例是App.prototype，润饰器的本意是要“润饰”类的实例，然则这个时刻实例还没天生，所以只能去润饰原型（这不同于类的润饰，那种状况时target参数指的是类自身）；第二个参数是所要润饰的属性名，第三个参数是该属性的形貌对象。

末了

基于decorator（润饰器）的轻易，封装了一个 axios 的收集要求库，迎接人人来star retrofit-cjs