require.js与IDEA的配合
分类:
IT文章
•
2022-07-22 10:30:23
- 本文主要讲述在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
路径不可识别 + 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
