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;
    })

View Code
    • 当我用 control 按下时,Class1 能识别,且能进入
    • 导出的符号 c1,能自动联想class静态,实例方法

对象导出

我们使用 moduleA/obj1.js 文件导出一个对象,代码如下:


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

            },
        }
    })

View Code
    • 同导出class一样,能完美自动联想

路径不可识别 + amd

class导出

我们在 require.config 中配置了 modulaA/Class2.js 的路径,如下:


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

View Code

Class2.js 文件与 Class1 结构一样,如下:


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

        }

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

        }
    }

    return Class2;
})

View Code
    • 不能识别路径
    • 不能识别文件符号
    • 不能识别静态方法
    • 不能识别实例方法

解决办法

    • 如果存在同名的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;
    })

View Code

效果如下:

对象的导出

对象导出没有找到很方便的办法,只能通过 @typedefine 来定义类型,然后在用的地方声明类型,如下:


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

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

            },
            b: 1,
        };

        return ob;
    })

obj1.js

路径可识别 + 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;
}));

umd1.js

在使用过程中发现,静态,示例方法都无法联想。对象的导出,IDEA 更无法识别。

办法

对于类的导出,可以采用与 #路径不可识别 + amd 的类导出一样的解决办法。

对于对象的导出,只有采取@typedefine 方式了。。。

附:文中代码参见 https://github.com/zhongchengyi/demo.require-vue-idea

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章