天天看点

require.js模块化编程

接触过大型项目的童靴都知道,也许都会有很深的感触,就是页面越写越多,加载各种js文件,这个时候万一加载的js文件如果有先后顺序,是很蛋疼的,为了解决这个蛋疼的问题,应运而生的出来require.js,他的好处,不言而喻了,

在实际开发中,我们可能接手的是好几手的项目,每个人建立的文件夹,都是乱七八糟,位置不同,当然还是有比较不错的同学,所以对于相同文件夹下的js我们做第一种方案:

方案1:

既然我们要用require.js  必然,需要引入require.js这个文件;

既然开始的时候我们说过,require.js可以实现懒加载的不存在先后顺序的情况,那么这个所有的js统一放在一个js文件中,然后引用该js,问题就迎刃而解了,

所以我们需要在建立一个管理所有的js文件,就叫做main.js,然后引入到html中,那么,该html就需要引用两个js(require.js,main.js)

那么大家会说js引入js怎么引入尼,我们可以看下require.js的文档,

require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短

  • define 从名字就可以看出这个api是用来定义一个模块
  • require 加载依赖模块,并执行加载完后的回调函数
require.js模块化编程

重点是main.js里面的是怎么写的

require.config({
	baseUrl : "js/",    //文件都在js文件夹下
    paths : {	
        "index" : "index"   ,        //js下的index.js
        "secound" : "secound",       //js下的secound.js
    }
})
require(["secound","index"])
           

看了代码  是不是很简单尼,

第二种情况:就是js不在同一个js文件夹下,那么我们需要在paths下写全了文件的路径

require.config({
    paths : {	
        "index" : "./a/b/index"   ,        //XX文件下的index.js
        "secound" : "./x/d/secound",       //XX文件下的secound.js
    }
})
require(["secound","index"])