那么，在高级优化中编译代码是否值得头痛和麻烦？

Question

一张图片胜过千言万语。也许我累了我不知道，但这让我陷入了某种原因并且没有任何意义。有人能指出我正确的方向吗？

Chrome Dev Tools

IE Dev Tools

＆GT;右键单击图像并在新选项卡中打开

独立代码

/**
 * @file maestro.class.js
 *
 * @external $M         Main Maestro Object
 * @external $M.Core    Maestro Core Object
 */

/**
 * A modified version of class.js to cater to static inheritance and deep 
 * object cloning. Based almost completely on class.js (Javascript MVC -- 
 * Justin Meyer, Brian Moschel, Michael Mayer and others)
 * (http://javascriptmvc.com/contribute.html)
 *
 * - Some portions adapted from Prototype JavaScript framework, version 1.6.0.1 (c) 2005-2007 Sam Stephenson
 * - Some portions extracted from jQuery 1.7
 * - String utilities methods removed and added to String prototype. Documentation
 * added and making code Closure Compiler Advanced Safe by Andrew Donelson.
 *
 * Class system for javascript
 *
 * Setup method will be called prior to any init -- nice if you want to do things without needing the
 * users to call _super in the init, as well as for normalizing parameters.
 *
 * @class Class
 * @expose
 * @namespace Class
 * @memberof Core
 * Advanced Optimization Compliant
 */
(function (m$)
{
    var 
        /** 
         * I have dropped this code for production, But it's bothering as to why
         * this is happening and I would like to get it figured out.
         *
         * @property {Object} regs
         * @expose 
         */
        regs = {
            'undHash':/_|-/,
            'colons':/::/,
            'words':/([A-Z]+)([A-Z][a-z])/g,
            'lowUp':/([a-z\d])([A-Z])/g,
            'dash':/([a-z\d])([A-Z])/g,
            'replacer':/\{([^\}]+)\}/g,
            'dot':/\./
        },

        /**
         * @method getNext
         * @expose
         * @param {*} current
         * @param {string} nextPart
         * @param {boolean} add
         * @returns {*} 
         */
        getNext = function(current, nextPart, add)
        {
            return current[nextPart] || ( add && (current[nextPart] = {}) );
        },

        /**
         * Returns true if the given parameter is either a function or object
         *
         * @method isContainer
         * @expose
         * @param {*} current
         * @returns {*} 
         */
        isContainer=function (current)
        {
            var type = typeof current;
            return type && (  type == 'function' || type == 'object' );
        },

        /**
         * Gets an object from a string.
         *
         * @method getObject
         * @expose
         * @param {String} name the name of the object to look for
         * @param {Array} [roots] an array of root objects to look for the name
         * @param {Boolean} [add] true to add missing objects to
         *  the path. false to remove found properties. undefined to
         *  not modify the root object
         * @returns {String} 
         */
        getObject=function (objectName, roots, add)
        {
            //Production version:
            //var parts = objectName ? objectName.split(/\./) : [],

            var parts = objectName ? objectName.split(regs.dot) : [],
                length = parts.length,
                currents = m$.isArray(roots) ? roots : [roots || window],
                current,
                ret,
                i,
                c = 0,
                type;

            if (length == 0)
            {
                return currents[0];
            }
            while (current = currents[c++])
            {
                for (i = 0; i < length - 1 && m$.isContainer(current); i++)
                {
                    current = m$.getNext(current, parts[i], add);
                }
                if (m$.isContainer(current))
                {

                    ret = m$.getNext(current, parts[i], add);

                    if (ret !== undefined)
                    {

                        if (add === false)
                        {
                            delete current[parts[i]];
                        }
                        return ret;
                    }

                }
            }
        };

    //This is just trying to get it to save the names correctly. 
    //not really wanted. and not working anyway.
    m$.regs=regs;
    m$.getNext = getNext;
    m$.isContainer = isContainer;
    m$.getObject = getObject;   

})(M$['Core']);

使用闭包编译器进行最小化，进行高级优化：

//So why did everything get renamed? Noot only was expose used,
//but I manually accessed the objects methods and property.
(function(b){
var h={undHash:/_|-/,colons:/::/,words:/([A-Z]+)([A-Z][a-z])/g,lowUp:/([a-z\d])([A-Z])/g,dash:/([a-z\d])([A-Z])/g,replacer:/\{([^\}]+)\}/g,dot:/\./};
b.e=h;
b.a=function(a,b,f){return a[b]||f&&(a[b]={})};
b.b=function(a){return(a=typeof a)&&("function"==a||"object"==a)};
b.d=function(a,d,f){a=a?a.split(h.c):[];
var k=a.length;
d=b.isArray(d)?d:[d||window];
var c,g,e,l=0;if(0==k)return d[0];
for(;c=d[l++];){for(e=0;e<k-1&&b.b(c);e++)c=b.a(c,a[e],f);
if(b.b(c)&&(g=b.a(c,a[e],f),void 0!==g))return!1===f&&delete c[a[e]],g}}
})(M$.Core);

Answer 1

我真的希望你只是复制粘贴完整的文字（如果不是在这里粘贴在pasbin或jsfiddle中），因为如果我不得不点击图片就很难回答，记住我所看到的，点击这个窗口并开始打字，点击图片提醒自己，点击此窗口继续输入...点击图片以确保等。

无论如何，神秘的一点不是f更改为J或h更改为J，而G更改为J并regs更改为J。

如果您查看以下行，则只会分配变量f和h：

a.G = f;

从那时起f不再使用了。现在，考虑到这一点，我将假设某些时候a.G或a.regs将被分配给Core.J。我将进一步假设非闭包编译代码实际上将a.regs分配给Core.regs，但闭包编译器将Core.regs编译为Core.J和a.regs成a.G。

在代码的其余部分中搜索a中包含的值如何分配给Core，您将获得答案。

附加答案：

如果要强制关闭导出某些内容，则需要安全地替换名称。全局变量无法安全替换，因为它们可能被页面中包含的另一个js文件使用。因此，如果您希望保留regs，请删除var，使其成为全局。

或者，明确指出a是全局的，或Core或M$是全局的，具体取决于您的需求。

Answer 2

清除缓存或按ctrl + F5重新加载页面。

Answer 3

好的，这是其他任何试图使其代码Closure Compiler Advanced Optimization Safe的工作独立代码。请记住，Code和JSDOC / Closure评论是必需的。我使用了额外的@expose标签，但这并没有伤害。

Raw Source ::

/**
 * A modified version of class.js to cater to static inheritance and deep 
 * object cloning. Based almost completely on class.js (Javascript MVC -- 
 * Justin Meyer, Brian Moschel, Michael Mayer and others)
 * (http://javascriptmvc.com/contribute.html)
 *
 * - Some portions adapted from Prototype JavaScript framework, version 1.6.0.1 (c) 2005-2007 Sam Stephenson
 * - Some portions extracted from jQuery 1.7
 * - String utilities methods removed and added to String prototype. Documentation
 * added and making code Closure Compiler Advanced Safe by Andrew Donelson.
 *
 * Class system for javascript
 *
 * Setup method will be called prior to any init -- nice if you want to do things without needing the
 * users to call _super in the init, as well as for normalizing parameters.
 *
 * @class Class
 * @expose
 * @namespace Class
 * @memberof Core
 * Advanced Optimization Compliant
 */
(function (m$)
{
    /** 
     * Some stand regular expressions used by the internal string prototypes
     * to handle correct naming.
     *
     * @property {Object} regs
     * @expose 
     */
    m$['regs'] = {
        'undHash':/_|-/,
        'colons':/::/,
        'words':/([A-Z]+)([A-Z][a-z])/g,
        'lowUp':/([a-z\d])([A-Z])/g,
        'dash':/([a-z\d])([A-Z])/g,
        'replacer':/\{([^\}]+)\}/g,
        'dot':/\./
    },

    /**
     * @method getNext
     * @expose
     * @param {*} current
     * @param {string} nextPart
     * @param {boolean} add
     * @returns {*} 
     */
    m$['getNext'] = function(current, nextPart, add)
    {
        return current[nextPart] || ( add && (current[nextPart] = {}) );
    },

    /**
     * Returns true if the given parameter is either a function or object
     *
     * @method isContainer
     * @expose
     * @param {*} current
     * @returns {*} 
     */
    m$['isContainer'] = function (current)
    {
        var type = typeof current;
        return type && (  type == 'function' || type == 'object' );
    },

    /**
     * Gets an object from a string.
     *
     * @method getObject
     * @expose
     * @param {String} name the name of the object to look for
     * @param {Array} [roots] an array of root objects to look for the name
     * @param {Boolean} [add] true to add missing objects to
     *  the path. false to remove found properties. undefined to
     *  not modify the root object
     * @returns {String} 
     */
    m$['getObject'] = function (objectName, roots, add)
    {   
        var parts = objectName ? objectName.split(regs['dot']) : [],
            length = parts.length,
            currents = m$.isArray(roots) ? roots : [roots || window],
            current,
            ret,
            i,
            c = 0,
            type;

        if (length == 0)
        {
            return currents[0];
        }
        while (current = currents[c++])
        {
            for (i = 0; i < length - 1 && m$.isContainer(current); i++)
            {
                current = m$.getNext(current, parts[i], add);
            }
            if (m$.isContainer(current))
            {

                ret = m$.getNext(current, parts[i], add);

                if (ret !== undefined)
                {

                    if (add === false)
                    {
                        delete current[parts[i]];
                    }
                    return ret;
                }

            }
        }
    }
})(M$['Core']);

这里是高级优化最小化代码清理了一点易读性

(function(b){
b.regs={
undHash:/_|-/,
colons:/::/,
words:/([A-Z]+)([A-Z][a-z])/g,
lowUp:/([a-z\d])([A-Z])/g,
dash:/([a-z\d])([A-Z])/g,
replacer:/\{([^\}]+)\}/g,
dot:/\./
};
b.getNext=function(a,b,f){return a[b]||f&&(a[b]={})};
b.isContainer=function(a){return(a=typeof a)&&("function"==a||"object"==a)};
b.getObject=function(a,d,f){a=a?a.split(regs.dot):[];
var h=a.length;
d=b.isArray(d)?d:[d||window];
var c,g,e,k=0;if(0==h)return d[0];
for(;c=d[k++];){for(e=0;e<h-1&&b.b(c);e++)c=b.a(c,a[e],f);
if(b.b(c)&&(g=b.a(c,a[e],f),void 0!==g))return!1===f&&delete c[a[e]],g}}
})(M$.Core); // 584 Bytes

简单优化最小化代码清理了一点易读性

(function(b){
b.regs={
undHash:/_|-/,
colons:/::/,
words:/([A-Z]+)([A-Z][a-z])/g,
lowUp:/([a-z\d])([A-Z])/g,
dash:/([a-z\d])([A-Z])/g,
replacer:/\{([^\}]+)\}/g,
dot:/\./
};
b.getNext=function(a,b,f){return a[b]||f&&(a[b]={})};
b.isContainer=function(a){return(a=typeof a)&&("function"==a||"object"==a)};
b.getObject=function(a,d,f){a=a?a.split(regs.dot):[];
var h=a.length;d=b.isArray(d)?d:[d||window];
var c,g,e,k=0;
if(0==h)return d[0];
for(;c=d[k++];){for(e=0;e<h-1&&b.isContainer(c);e++)c=b.getNext(c,a[e],f);
if(b.isContainer(c)&&(g=b.getNext(c,a[e],f),void 0!==g))return!1===f&&delete c[a[e]],g}}
})(M$.Core); //616 bytes

那么，在高级优化中编译代码是否值得头痛和麻烦？

我说是和否，我会解释......

是，如果：您提前计划结构并使用正确的Closures，并将所有内部帮助器或实用程序方法添加到主闭包内的另一个闭包中。这样你就不会弄乱你的主要对象。
否如果：标准无组织代码。这根本没有错，但是不值得浪费你的时间去进行高级优化。

好吧，让我知道你的想法。并感谢您的投入和帮助。

为什么Chrome Dev Tools检查器显示的值与代码中的值不同？

独立代码

3 个答案:

附加答案：

那么，在高级优化中编译代码是否值得头痛和麻烦？

我说是和否，我会解释......