requirejs(必看篇) 原文链接 https://www.jb51.net/article/119496.htm

requirejs是干啥的啊?

曾经,我们将一些js组件放到不同的文件,然后通过script标签引入,如果几个组件有依赖,那么要小心了,你必须将被依赖的放到前面,否则的话会出现啥啥啥is undefined或者啥啥啥is not a function之类的错误。比如一个jquery的插件显然是依赖jquery核心库的,所以jquery核心库文件必须先引入。项目小组件少依赖简单还好,要是项目大组件多依赖复杂就糟糕了。咋办?用requirejs啊

只要按照requirejs规范写,他会从一个根开始检查依赖,根据这些依赖关系自动的帮助我们插入script标签,很棒,对不对?这样依赖我们不就再也不用纠结哪个标签应该放在前,哪个该放在后了吗?

 

define('sample3' ,['sample','sample1'],function (sample,sample1) {
  var sample4 = require('sample4');
  return function(){
    alert(sample.name+':'+sample.sayhell());
  } 
});

这就是完整定义,有名称,有依赖,有回调,内部还有common的形式引入依赖对象!

关于define函数的name和require函数的依赖名称之间的关系

  • define(name,[] , callback); 这个name可以省掉,默认是文件名称;当然也可以自定义,一旦我们定义了name,根据源代码我们可以发现define函数内部其实就是把这个name以及依赖模块、回调函数作为一个对象存储在全局的数组当中,也就是 defQueue.push([name,deps,callback]);那么这个name就是这个组件注册的的ID!

  • require([name , name2],callback); 系统首先会在全文检索path中是否对应的路径,如果没有自然把他作为路径拼接在baseUrl上去异步加载这个js文件,加载时从源代码中可以看到 ,var data = getScriptData(evt);返回的 data.id 其实就是name,然后执行contex.completeLoad(node.id),其内部就很清楚了,把define中注册的name和这里得到的name进行比较如果相等就执行。所以道理就是:require 和 define 的 name 必须保证一致!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以通过使用requireJS或webpack这样的模块化工具来引入echarts.min.js,例如: 1. 使用requireJS: ```html <!-- 在HTML中引入requireJS --> <script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script> <!-- 定义模块 --> <script> define(['https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js'],function (echarts) { // 使用echarts var myChart = echarts.init(document.getElementById('main')); ... }); </script> ``` 2. 使用webpack: 在webpack配置文件中,使用以下代码: ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, externals: { echarts: 'echarts', }, } ``` 然后在代码中直接引入echarts即可: ```javascript import echarts from 'echarts'; const myChart = echarts.init(document.getElementById('main')); ... ``` ### 回答2: ECharts 是一款基于 JavaScript 的数据可视化库,常规情况下,我们使用 `<script>` 标签引入 ECharts 的 JavaScript 文件。但如果不想使用 `<script>` 标签引入 `echarts.min.js`,可以采用其他方式来引入。 一种方法是使用加载器(Loader)来引入。加载器是一种通过动态加载 JavaScript 文件的工具,可以在运行时动态加载所需的脚本。常见的加载器包括 RequireJS、SystemJS 和 webpack 等。 以 RequireJS 为例,首先需要引入 RequireJS 的 JavaScript 文件,在 HTML 中添加以下代码: ```html <script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script> ``` 然后,在需要使用 ECharts 的地方,通过 RequireJS 的 `require` 方法来动态加载 ECharts 的 JavaScript 文件。代码如下: ```javascript require(['https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js'], function (echarts) { // 在这里可以使用 ECharts }); ``` 另一种方法是使用模块打包工具,例如 webpack。首先需要安装 webpack,然后在项目中创建一个 JavaScript 文件,假设为 `app.js`,并引入 ECharts: ```javascript import echarts from 'echarts'; ``` 然后,在终端中运行打包命令: ``` webpack app.js bundle.js ``` 这样会生成一个名为 `bundle.js` 的文件,其中包含了 ECharts 的代码。最后,在 HTML 中引入打包后的脚本文件: ```html <script src="bundle.js"></script> ``` 以上是两种不使用 `<script>` 标签引入 ECharts 的方法,可以根据实际需求选择适合的方式来引入。 ### 回答3: 要不使用`<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>`来引入echarts.min.js,可以通过以下方法来实现: 1. 通过安装NPM包:可以使用命令`npm install echarts`来安装echarts的NPM包。然后在你的项目中引入echarts,可以使用`import * as echarts from 'echarts'`来引入echarts。 2. 通过CDN链接:可以使用CDN链接来引入echarts.min.js。首先,找到echarts的CDN链接,然后将链接直接添加到你的HTML文件中,就像你使用`<script>`标签引入其他JavaScript文件一样。例如:`<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>` 3. 通过本地文件:如果你将echarts.min.js下载到本地,可以将该文件放在你的项目文件夹中的合适位置,然后使用相对路径引入该文件。例如:`<script src="echarts/echarts.min.js"></script>`。 以上是几种不使用`<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>`来引入echarts.min.js的方法。选择其中一种方法适用于你的项目,并确保能够正确引入echarts以使用其功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值