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;
})
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 方式了。。。
require.js与IDEA的配合的更多相关文章
- r.js打包注意事项 r.js打包 这个是配合require.js打包的
这个./代表的是当前文件的父目录....打包的资源一定要在这个父目录中下面才行,,,,一定一定,要放在这个目录一下才能被正确找到. 不然只是copy了一份一模一样的文件夹和文件过去,并不会处理压缩啥的 ...
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- javascript模块化编程(三):require.js用法
本文来自阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require ...
- require.js工作原理(初始)
详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...
- Javascript模块化编程(三):require.js的用法(转)
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...
- require.js源码分析
写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...
- Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块
传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...
- require.js
日期: 2012年11月 7日 http://www.ruanyifeng.com/blog/2012/11/require_js.html 这个系列的第一部分和第二部分,介绍了Javascript模 ...
- require.js 入门笔记
网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高. 而且长长的JS代码 ...
随机推荐
- python call java jar
python脚本如何调用Java的jar文件呢? HelloWorld.java public class HelloWorld { public static void main(String[] ...
- PLAI那些事_07 FAE with Deferred Substitution
FAE-parse : 一成不变 FAE-Value : interp的最终转让值 ;;numV: value ;;closureV: param-FAE(或value,或function) pair ...
- B. Sorted Adjacent Differences(思维构造)
\(给出n个数字,要求构造一个由这n个数组成的序列,使得|a_1-a_2|<=|a_2-a_3|...<=|a_{n-1}-a_n|\) \(排序后,从数列中间取个数,然后从左右分别循环取 ...
- HDU 3038 (向量图解)
题意:\(有n个人坐在zjnu体育馆里面,然后给出m个他们之间的距离, A B X, 代表B的座位比A多X.\) \(然后求出这m个关系之间有多少个错误,所谓错误就是当前这个关系与之前的有冲突\) \ ...
- MATLAB矩阵的表示
矩阵是matlab中最基本的数据对象. l 矩阵的建立 l 冒号表达式 l 结构矩阵和单元矩阵 1.矩阵的建立 (1)利用直接输入法建立矩阵:将矩阵的元素用中括号括起来,按矩阵行的顺序输入各元素 ...
- Spring Cloud 学习 之 Spring Cloud Eureka(搭建)
Spring Boot版本:2.1.4.RELEASE Spring Cloud版本:Greenwich.SR1 文章目录 搭建服务注册中心: 注册服务提供者: 高可用注册中心: 搭建服务注册中心: ...
- Linux内核驱动学习(十)Input子系统详解
文章目录 前言 框架 如何实现`input device` 设备驱动? 头文件 注册input_dev设备 上报按键值 dev->open()和dev->close() 其他事件类型,处理 ...
- 你应该知道的Python3.6、3.7、3.8新特性
很多人在学习了基本的Python语言知识后,就转入应用阶段了,后期很少对语言本身的新变化.新内容进行跟踪学习和知识更新,甚至连已经发布了好几年的Python3.6的新特性都缺乏了解. 本文列举了Pyt ...
- [csu/coj 1083]贪心
题意:给定n个线段,问能不能把x,y,z个长度为1,2,3的线段不重合地放进去. 思路:首先如果n个线段长度比要放的长度之和小,则无解,否则先考虑放2和3,如果2和3放下了1肯定可以放下(这是显然的) ...
- [zoj3627]模拟吧
思路:情况只可能是2种,两个人一直向一边走,或者有一个人折回来,对于后一种,枚举折回来的位置就行了.不过要注意两个方向都要处理下. #pragma comment(linker, "/STA ...