require.js與IDEA的配合

• 本文主要講述在html中使用requirejs時，如何讓IDEA更加智能識別javascript的方法。

 測試時的目錄結構，一種典型的 thinkphp 的結構，同時，在 a.thml 中通過 requirejs 引用 了 Public/Home/View/moduleA/a.js，

后面我們的測試，都在 a.js 中進行。

 

 

 

路徑可識別 + amd

class, 對象，方法，都能完美識別

class 導出

我們在 Class1.js 中導出一個 Class，且只使用 AMD 方式導出，代碼如下：

define([],
    function () {
        class Class1 {
            static a() {

            }

            ia() {

            }
        }

        return Class1;
    })

• • 當我用 control 按下時，Class1 能識別，且能進入
  • 導出的符號 c1，能自動聯想class靜態，實例方法

 

 

對象導出

我們使用 moduleA/obj1.js 文件導出一個對象，代碼如下：

define([],
    function () {
        return {
            /**
             * obj1 的 a 方法
             */
            a: function () {

            },
        }
    })

• • 同導出class一樣，能完美自動聯想

 

路徑不可識別 + amd

class導出

我們在 require.config 中配置了 modulaA/Class2.js 的路徑，如下：

    require.config({
        paths:{
            'm1.class2': '../../../../Public/Home/View/moduleA/Class2',
        }
    })

 Class2.js 文件與 Class1 結構一樣，如下：

define([], function () {
    class Class2 {
        /**
         * class2 的 static a 方法
         */
        static a() {

        }

        /**
         * class2 的 instance ia2 方法
         */
        ia() {

        }
    }

    return Class2;
})

• • 不能識別路徑
  • 不能識別文件符號
  • 不能識別靜態方法
  • 不能識別實例方法

 

解決辦法

• • 如果存在同名的class ，需要兩個 class 都使用@alias 別名，如果不存在同名class可以不用@alias
  • 如果有靜態的字段或方法，使用@exports聲明導出，且指定導出名字
  • 在引用的地方，通過@module指定模塊的名字，且導入的變量名與類名相同

遺留問題：

• • Class3不是很好的被識別為 class，導致 Class3.ia 可以被導航（但導航是錯的）。如下：

接下來我們通過 Class3 進行示例，Class3代碼如下：

define([],
    function () {
        /**
         * @alias n1.Class3
         * @exports n1/Class3
         */
        class Class3 {
            static b = {
                a: function () {

                }
            };

            /**
             *
             */
            constructor() {

            }

            /**
             * class3 的 static a 方法
             */
            static a() {

            }

            /**
             * class3 的 instance ia2 方法
             */
            ia() {

            }
        }

        return Class3;
    })

效果如下：

 對象的導出

對象導出沒有找到很方便的辦法，只能通過 @typedefine 來定義類型，然后在用的地方聲明類型，如下：

define([],
    function () {
        /**
         * @typedef {Object} n1.obj1
         * @property {Function} a
         * @property {int} b
         */

        let ob = {
            /**
             * obj1 的 a 方法
             */
            a: function () {

            },
            b: 1,
        };

        return ob;
    })

路徑可識別 + umd 和 路徑不可識別 + umd

 我們准備了一個umd導出的類，如下：

;(function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // AMD
        define([], factory);
    } else if (typeof module !== 'undefined' && module.exports) {
        // CommonJS
        module.exports = factory();
    } else {
        // Global
        window.umd1 = factory();
    }
}(function () {

    class umd1 {
        static a() {

        }

        ia() {
            
        }
    }

    return umd1;
}));

在使用過程中發現，靜態，示例方法都無法聯想。對象的導出，IDEA 更無法識別。

 

 辦法

對於類的導出，可以采用與 #路徑不可識別 + amd 的類導出一樣的解決辦法。

對於對象的導出，只有采取@typedefine 方式了。。。

 

附：文中代碼參見https://github.com/zhongchengyi/demo.require-vue-idea