需要了解到的一些相关的数据
src中的require.js文件根据你的文件存放位置而定;
主入口文件路径同理;
主入口文件(主模块)的配置:
require.config({
baseUrl : ‘…/js’, //这里写的是引用文件所在的根目录 // (目的就是为了下面的paths里面少写点代码)
paths : {
‘jquery’ : ‘./jquery’ // (引用文件的路径)
paths里面可以有很多的引用文件 css,angular,bootstrap等等;(路径一定要对啊,不然没用)
})
路径的是否导入查询可以在浏览的页面按下F12之后有一个Network的选项.在里面就可以清晰的看见你所导入的一些JS文件
html页面写的内容
这里面[ ]中的参数的作用是在主模块里面导入的 ‘jquery’ 模块(也可以理解为jquery路径的路径名)
function中的参数就是用来接收[ ]中传入参数所带来的数据;
[ ]中可以传入很多参数,只要在子模板内调用了,在主模板实现,都需要,添加对应的参数
function中的参数,除了$(jquery对象)以外,就可以随意起名了,只要和你下面在方法里面调用的一样就行,这里的require对象也可以写在主模板内,不冲突,但为了方便管理,有层级感,所以就别介了;
子模版的内容:
子模版的代码格式
define([ ],function(){
return {
}
})
看到这个文件名没有?
Util.js在之前的html页面中被调用了,里面还返回了两个方法,一个是show方法一个是change方法
为什么这里面不要要传参数呢(当然也可以传参数,传一些没有定义的参数);
之前不是有一个NetWork的截取图片吗?先导入了require.js文件,之后是entrance.js,再然后是util.js
这就显而易见了,require又在html页面中写入了util的路径(在[ ]里面传入的参数),functio中再定义一个参数来接收他,再用这个参数打点调用util.js里面的方法名,就可以得到想要的结果了
个人观点:
模块化开发,就是把路径写对了,再用路径来调用对应子模块的方法就可以实现了,
子模块分别实现不同的功能(模块化)毕竟jacascript是一个有规矩的语言,一步一步调用,少一步也不行;