javascript - 闭包编译器不重命名属性和方法(高级编译)

Question

为什么 Closure Compiler 不重命名我的 path、start 等属性，但在使用高级编译时却重命名我的 limit 属性？

我希望它重命名代码中的每个属性和方法，除了导出的构造函数window.RFM。

这是构造函数片段:

var RFM = function(node) {
    ...
    this.path = '/';
    this.limit = 10;
    ...
};

编译为:

    ...
    this.path = '/';
    this.c = 10;
    ...

我尝试添加诸如@private和@constructor之类的注释，但没有效果。

我一直在 http://closure-compiler.appspot.com/ 上进行测试

完整代码如下:

(function() {
var ajax = {};
ajax.x = function() {
    try {
        return new ActiveXObject('Msxml2.XMLHTTP')
    } catch (e1) {
        try {
            return new ActiveXObject('Microsoft.XMLHTTP')
        } catch (e2) {
            return new XMLHttpRequest()
        }
    }
};

ajax.send = function(url, callback, method, data, sync) {
    var x = ajax.x();
    x.open(method, url, sync);
    x.onreadystatechange = function() {
        if (x.readyState == 4) {
            callback(x.responseText)
        }
    };
    if (method == 'POST') {
        x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    x.send(data)
};

ajax.get = function(url, data, callback, sync) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url + '?' + query.join('&'), callback, 'GET', null, sync)
};

ajax.post = function(url, data, callback, sync) {
    ajax.send(url, callback, 'POST', data, sync)
};


var RFM = function(node) {
    this.node = node;
    node.innerHTML = this.template(RFM.templates.dialog);

    this.nodeFiles = node.getElementsByClassName('rfm-files')[0];
    this.nodeDirectories = node.getElementsByClassName('rfm-directories')[0];
    this.nodeTags = node.getElementsByClassName('rfm-tags')[0];

    this.nodeDirectories.addEventListener('click', this.clickedDirectory.bind(this));

    this.path = '/';
    this.start = 0;
    this.limit = 10;
    this.sort = 'mtime';
    this.direction = 'desc';
    this.src = 'example.php';

    this.refresh();
};

RFM.prototype.template = function(string, variables) {
    return string.replace(/\{(.*?)\}/g, function(match, variable) {
        return variables[variable];
    }).replace(/_(.*?)_/g, function(match, variable) {
        return locale[variable];
    });
};

// Refresh
RFM.prototype.refresh = function() {
    ajax.get(this.src, {
        path: this.path,
        start: this.start,
        limit: this.limit,
        sort: this.sort,
        direction: this.direction
    }, function(data) {
        data = JSON.parse(data);
        this.refreshFiles(data.files);
        this.refreshDirectories(data.directories);
    }.bind(this), false);
};

RFM.prototype.refreshFiles = function(files) {
    var result = '';
    for (var i = 0; i < files.length; i++) {
        files[i].type = files[i].name.replace(/^.*\./, '');
        files[i].mtime = new Date(files[i].mtime * 1000).toISOString().replace('T', ' ').replace(/.{5}$/, '');
        result += this.template(RFM.templates.file, files[i]);
    }
    this.nodeFiles.innerHTML = result;
};

RFM.prototype.refreshDirectories = function(directories) {
    var result = '';
    if (this.path != '/') {
        result += this.template(RFM.templates.directory, {
            name: '..'
        });
    }
    for (var i = 0; i < directories.length; i++) {
        result += this.template(RFM.templates.directory, {
            name: directories[i]
        });
    }
    this.nodeDirectories.innerHTML = result;
};

// Events
RFM.prototype.clickedDirectory = function(e) {
    if (e.target.innerText === '..') {
        this.path = this.path.replace(/\/[^\/]+\/$/, '/');
    } else {
        this.path += e.target.innerText + '/';
    }
    this.refresh();
};

var locale = {
    headingDirectories: 'Directories',
    headingTags: 'Tags',
    headingUpload: 'Upload',
    headingFiles: 'Files',
    fileName: 'Name',
    fileSize: 'Size',
    fileType: 'Type',
    fileModificationTime: 'Modified'
};

RFM.templates = {
    "dialog": "<div class=\"rfm-dialog\"> <div class=\"rfm-wrapper\"> <div class=\"rfm-sidebar\"> <div class=\"rfm-directories-wrapper\"> <span class=\"rfm-heading\">_headingDirectories_<\/span> <div class=\"rfm-directories\"><\/div> <\/div> <div class=\"rfm-tag-wrapper\"> <span class=\"rfm-heading\">_headingTags_<\/span> <div class=\"rfm-tags\"><\/div> <\/div> <\/div> <div class=\"rfm-main\"> <div class=\"rfm-upload\"> <span class=\"rfm-heading\">_headingUpload_<\/span> <\/div> <div class=\"rfm-files-wrapper\"> <span class=\"rfm-heading\">_headingFiles_<\/span> <table class=\"rfm-table\"> <thead> <tr> <th><\/th> <th class=\"rfm-file-name\">_fileName_<\/th> <th class=\"rfm-file-type\">_fileType_<\/th> <th class=\"rfm-file-size\">_fileSize_<\/th> <th class=\"rfm-file-mtime\">_fileModificationTime_<\/th> <\/tr> <\/thead> <tbody class=\"rfm-files\"> <\/tbody> <\/table> <\/div> <\/div> <\/div> <div>",
    "directory": "<div class=\"rfm-directory\">{name}<\/div>",
    "file": "<tr class=\"rfm-file\"> <td><\/td> <td class=\"rfm-file-name\">{name}<\/td> <td class=\"rfm-file-type\">{type}<\/td> <td class=\"rfm-file-size\">{size}<\/td> <td class=\"rfm-file-mtime\">{mtime}<\/td> <\/tr>"
};
window['RFM'] = RFM;
})();

编译后的:

(function() {
  function b(a) {
    a.innerHTML = this.a(b.b.k);
    this.h = a.getElementsByClassName("rfm-files")[0];
    this.d = a.getElementsByClassName("rfm-directories")[0];
    this.d.addEventListener("click", this.e.bind(this));
    this.path = "/";
    this.start = 0;
    this.c = 10;
    this.sort = "mtime";
    this.direction = "desc";
    this.src = "example.php";
    this.refresh()
  }
  ...
  window.RFM = b
})();

Answer 1

除非使用aliasExternals，否则在(默认)externs 中定义的属性名称不会被重命名。

所以 sort、getElementById、parseInt 和许多其他的都不会被重命名。我猜编译器应该将您的属性视为 RFM 的属性，但似乎并非如此。如果将路径重命名为 myPath，则应在编译时重命名或使用 aliasExternals。