ECharts提供的用法中,require是作为模块化加载的入口,如果你使用类似于RequireJS、SeaJS这样的模块化加载JS库的话,那么,就可以使用require()初始化ECharts。
你贴出来的链接这篇文章,正式介绍如何使用模块化加载ECharts。如果你不使用模块化,ECharts也提供相应的方法初始化。
首先,下载到源码之后,在页面引入lib/echarts-plain-map.js,plain-map是未压缩的版本
<script type="text/javascript" src="lib/echarts-plain-map.js"></script>
然后引入主文件之后,就可以直接使用init()实例化了
<script type="text/javascript">
var myChart = echarts.init({
// ...
})
</script>
最后补充一个官方API文档
1
http://echarts.baidu.com/doc/doc.html#引入ECharts
Node.js 文档建议使用 fs 模块并自己完成读取文件和解析的工作。
这种方法比起我们接下来用的第二种方法更容易理解。
我们还可以使用 createRequire 加载 JSON 文件。
createRequire 允许您构造 CommonJS require 方法,以便可以使用典型的 CommonJS 功能,例如在 Node.js 中读取 JSON ES 模块。
前两种的区别:
JSON 模块已经存在于 Chrome 91,它看起来就像一个 ES Modules 风格的导入,只是你在最后设置了类型。
当 Chrome 中有解决方案时,它很快就会在 Node.js 中发布。
nodejs的几种模块加载方式一.直接在exports对象中添加方法
1. 首先创建一个模块(module.js)module.js
exports.One = function(){
console.log('first module')
}
2.load.jsvar module =require('./module')
module.One()
这样我们就可以在引入了该模块后,返回一个exports对象,这里是指module对象,其实都只是两个引用或者句柄,只是都指向了同一个资源,在load.js里,module的名字可以是任意取的,因为它仅仅是指向require('./module')返回后的一个实例对象的引用,在load.js文件里的module和在module.js里的exports对象是同一个东西.因此上述两个文件可以用一个文件来表示:exports.One = function(){
console.log('first module')
}
exports.One()
其运行结果是一致的,这里我们可以很清晰的看到,我们在使用require('./xxxx')后其实返回的总是在 xxxx.js文件中的exports对象的引用,这个引用的名字我们可以任意取,但是为了规范我们还是最好取符号某些非标准规定(后面说道),但是这样会有不妥的地方,因为它是始终指向exports的实例对象,也就是说,我们虽然有了这个模块,但是这个模块我们只能使用一次,这取决于rquire('./module')只会加在一次该模块.比如我们修改上述代码,
module.js
var name
exports.setName = function(oName){
name = oName
}
exports.getName = function(){
console.log(name)
}
load.jsvar module1 = require('./module')
module1.setName("felayman1")
module1.getName()
var module2 = require('./module')
module2.setName("felayman2")
module2.getName()
module1.getName()
我们可以看到,虽然我们使用了两次require('./module'),但是当我们修改module2后,module1的内容也被修改,这恰恰说明了,module1和module2是指向的同一个对象.有时候这并不影响我们的程序,但是如果我们的module是Person呢?我们希望我们require('./person')后返回的是不同的对象.因此,这种方式是有缺陷的,尽管很方便,这种方式在大部分nodejs的模块中都是很常见,比如fs模块,http模块等.
二.将模块中的函数挂载到exports对象的属性上
person.js
function Person{
var name
this.setName = function(theName){
name = theName
}
this.sayHello = function(){
console.log('Hello',name)
}
}
exports.Person = Person
load.js
var Person = require('./person').Person
var person1 = new Person()
person1.setName("felayman1")
person1.sayHello()
var person2 = new Person()
person2.setName("felayman2")
person2.sayHello()
person1.sayHello()
这样我们可以看到,我们就可以引入一个函数了,我们把在person.js文件中的Person函数设置为eports对象的一个属性,我们只需要在load.js文件中引入该属性,就可以获取到多个该函数的实例,在nodejs中的EventEmitter就是基于这种方式,但是这样我们总是在使用 require('./person').Person这样的写法有点太复杂,因此nodejs允许我们使用其他更简洁的方式,利用全局变量--module,这样我们在其他文件中引入其他模块的时候,就更方便了.
三.利用全局变量module
person.js
function Person(){
var name
this.setName = function(theName){
name = theName
}
this.sayHello = function(){
console.log('Hello',name)
}
}
// exports.Person = Person
module.exports = Person
load.jsvar Person = require('./person')
var person1 = new Person()
person1.setName("felayman1")
person1.sayHello()
var person2 = new Person()
person2.setName("felayman2")
person2.sayHello()
person1.sayHello()
这样一修改,我们就在使用require函数的时候就方便了,如果觉得这里难以理解,我们可以把两个文件里语法放到一起:var Person = require('./person')
module.exports = Person
这样,我们就可以看出,其实就是这样var Person = Person.
因为上述我们都已经说过,require('./person')其实就是module.exports 对象的,这里的module我们不用太在意,就跟javascript中的window一样,是一个全局变量,即 module.exports =exports就类似于window.alert() =alert()差不多的效果,这样我们就能看出,我们再次使用require('./person')的时候其实就是导入了我们所需要的exports对象的属性函数模板了,这样我们也可以多次实例化我们所需要的对象了.这种方式是综合了前两种的方法,因此也是官方推荐的使用方法.