• 本文主要講述在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