簡體   English   中英

在任何IDE中完成oo javascript代碼

[英]Oo javascript code completion in any IDE

你知道任何可以自動完成這種代碼的IDE嗎?

我這里有一個javascript類生成器:

(function() {
    var core = {
        bind : function(method, scope) {
            if (!( method instanceof Function))
                throw new TypeError("Function needed as method.");
            if ( typeof (scope) != "object")
                throw new TypeError("Object needed as scope.");
            return function() {
                return method.apply(scope, arguments);
            };
        },
        require : function(source) {
            if ( typeof (source) != "object" || !source)
                throw new TypeError("Object needed as source.");
            for (var property in source)
                if (source.hasOwnProperty(property) && !this.prototype.hasOwnProperty(property))
                    this.prototype[property] = source[property];
        },
        override : function(source) {
            if ( typeof (source) != "object" || !source)
                throw new TypeError("Object needed as source.");
            for (var property in source)
                if (source.hasOwnProperty(property))
                    this.prototype[property] = source[property];
        },
        extend : function(source) {
            var superClass = this;
            var newClass = source.hasOwnProperty("constructor") ? source.constructor : function() {
                superClass.apply(this, arguments);
            };
            newClass.superClass = superClass;

            var superClone = function() {
            };
            superClone.prototype = superClass.prototype;
            newClass.prototype = new superClone();
            newClass.prototype.constructor = newClass;

            if (source)
                newClass.override(source);
            return newClass;
        }
    };

    core.require.call(Function, core);

    Function.create = function (source){
        var newClass = source.hasOwnProperty("constructor") ? source.constructor : function() {};
        newClass.override(source);
        return newClass;
    };
})(); 

我需要這些示例類的代碼完成(在注釋中寫):

//Function.prototype: bind, require, override, extend
//Function.create

var A = Function.create({ //offer Function.[create]
    test: function (){
        console.log("a");
    }
});

//A is a Function instance
//A.prototype: test

var B = A.extend({ //offer A.[extend]
    test: function (){
        console.log("b");
    },
    test2: function (){
        console.log("b2");
    }
});

//B is a Function instance
//B.prototype inherits from A.prototype
//B.prototype.test overrides A.prototype.test

var F = Function.create({ //offer Function.[create]
    getA: function (){
        return new A();
    },
    getB: function (){
        return new B();
    }
});
//F is a Function instance
//F.prototype getA, getB returns A and B instances

var f = new F(); //offer [F]
//f inherits from F.prototype
var a = f.getA(); //offer f.[getA]
//a inherits from A.prototype
var b = f.getB(); //offer f.[getB]
//b inhertis from B.prototype

a.test(); //offer a.[test]
b.test(); //offer b.[test]
b.test2(); //offer b.[test2]

所以我必須讓IDE以某種方式知道,這些函數存在於Function.prototype中,並且這些函數正在創建Function實例,並且它們正在寫入這些實例的原型。 這只能通過我的代碼的手動索引來實現,比如jsdoc,但這還不足以描述繼承。 所以我需要一個可以處理至少js繼承的IDE,我可以編寫一個自動創建索引的插件。 (也許插件也可以處理繼承,我不知道索引是如何工作的......)

哪個IDE能夠(以及如何)?

解決方案1:

我發現在Eclipse中,javascript索引器是Web Tools Platform / Javascript開發工具的一部分。 源代碼在這里。 開發人員寫道,InferEngine易於擴展,因此您可以編寫一個eclipse插件。 在這種情況下, 這個博客真的非常有用。 它有很多文章如何擴展JSDT,JSDT開發人員也可以提供幫助。 不幸的是,如果有另一個解決方案,我沒有太多時間來創建這樣的東西。

解決方案2:

環顧四周,發現真正的問題是,在Netbeans,Eclipse JSDT和Aptana中都沒有完全支持JSDOC 3。 我在JSDOC 3支持下找到的唯一一個IDE是Jetbrains WebStorm,所以我會用它。 (沒有測試Resharper for Visual Studio,但它也是JetBrains產品,所以它也可能有效。)

webstorm中jsdoc 3的原始示例:

/** @class*/
var A = Function.create(//offer Function.[create] -> OK!
/** @lends A.prototype*/
{ 
    test: function (){
        console.log("a");
    },
    testA: function (){
        console.log("a2");
    }
});

/** @class*/
/** @extends A*/
var B = A.extend(//offer A.[extend] -> OK!
/** @lends B.prototype*/
{ 
    test: function (){
        console.log("b");
    },
    testB: function (){
        console.log("b2");
    }
});

/** @class*/
var F = Function.create(//offer Function.[create]  -> OK!
/** @lends F.prototype*/
{ 
    /** @returns A*/
    getA: function (){
        return new A();
    },
    /** @returns B*/
    getB: function (){
        return new B();
    }
});

var f = new F();
f.getA().test(); //offer f.[getA], offer f.getA().[test] -> OK
f.getA().testA(); //offer f.[getA], offer f.getA().[testA] -> OK
f.getB().test(); //offer f.[getB], offer f.getB().[test] -> OK
f.getB().testA(); //offer f.[getB], offer f.getB().[testA] -> OK
f.getB().testB(); //offer f.[getB], offer f.getB().[testB] -> OK

您可以使用安裝了Resharper 6的WebStorm或VisualStudio之類的東西,它會構建所有對象的所有原型的列表,您可以使用它...它不是特別有用,我也不推薦它。但是事情總比沒有好......

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM