• 本文主要讲述在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的配合的更多相关文章

  1. r.js打包注意事项 r.js打包 这个是配合require.js打包的

    这个./代表的是当前文件的父目录....打包的资源一定要在这个父目录中下面才行,,,,一定一定,要放在这个目录一下才能被正确找到. 不然只是copy了一份一模一样的文件夹和文件过去,并不会处理压缩啥的 ...

  2. Javascript模块化编程(三):require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  3. javascript模块化编程(三):require.js用法

    本文来自阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require ...

  4. require.js工作原理(初始)

    详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...

  5. Javascript模块化编程(三):require.js的用法(转)

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...

  6. require.js源码分析

    写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...

  7. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  8. require.js

    日期: 2012年11月 7日 http://www.ruanyifeng.com/blog/2012/11/require_js.html 这个系列的第一部分和第二部分,介绍了Javascript模 ...

  9. require.js 入门笔记

    网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高. 而且长长的JS代码 ...

随机推荐

  1. 一只简单的网络爬虫(基于linux C/C++)————Url处理以及使用libevent进行DNS解析

    Url处理 爬虫里使用了两个数据结构来管理Url 下面的这个数据结构用来维护原始的Url,同时有一个原始Url的队列 //维护url原始字符串 typedef struct Surl { char * ...

  2. Scrapy爬虫快速入门

    安装Scrapy Scrapy是一个高级的Python爬虫框架,它不仅包含了爬虫的特性,还可以方便的将爬虫数据保存到csv.json等文件中. 首先我们安装Scrapy. pip install sc ...

  3. 这是一篇每个人都能读懂的最小生成树文章(Kruskal)

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是算法和数据结构专题的第19篇文章,我们一起来看看最小生成树. 我们先不讲算法的原理,也不讲一些七七八八的概念,因为对于初学者来说,看到 ...

  4. C#并发编程之初识并行编程

    写在前面 之前微信公众号里有一位叫sara的朋友建议我写一下Parallel的相关内容,因为手中商城的重构工作量较大,一时之间无法抽出时间.近日,这套系统已有阶段性成果,所以准备写一下Parallel ...

  5. 浅析java中ClassLoader如何加载Class

    我的博客地址:https://blog.csdn.net/qq_41907991 ClassLoader是一个经常出现又让很多人望而却步的词.本文试图以最浅显易懂的方式来讲解ClassLoader,希 ...

  6. Appium+Python-项目实践一

    一.前言                            前面讲了环境搭建和常用的元素定位,后续会持续以项目实践的方式去慢慢学习以及整理各方面的知识点,具体不会详细阐述,但会贴上完整代码,想要了 ...

  7. JVM 运行时数据区(二)

    @ 目录 运行时数据区 共享区 堆区 方法区 隔离区 虚拟机栈 栈帧 本地方法栈 程序计数器 运行时数据区 JVM 运行时数据区主要分为5块 方法区 JDK1.8以后叫做元数据区(Metaspace) ...

  8. android 防止多次点击,导致事件监听响应到其他界面

    下面有个案例: A点击的时候就跳转到B界面,点击B界面后结束,返回到A界面中 1.此时在B界面中,设置点击事件,点击后结束B v.setOnClickListener(new OnClickListe ...

  9. react 动态渲染echarts折线图,鼠标放大缩小

    //折线图组件import React,{Component} from 'react'; import ReactEcharts from 'echarts-for-react'; class Ec ...

  10. nginx配置之状态模块和压力测试功能

    状态模块功能 nginx.conf中的http{}中的server{}中: location /status { #开启nginx状态功能 stub_status on; } 直接在网页中请求stat ...