模块化

RequireJS官网:www.requirejs.org

为什么使用RequireJS

1、有效的防止变量冲突
2、解决不同的js文件之间的依赖
3、可以写出模块化的代码

RequireJS常用的方法:

1、requirejs.config
2、requirejs
3、define

入口文件(主模板):
data-main=""

  

主模板main.js如何编写呢?

//配置require 定义别名
requirejs.config({
        //baseUrl: "js/lib",            //改变基目录(baseUrl)
        paths:{                //指定模块的加载路径
            定义模块别名:'引入依赖的js文件的加载路径'
        },shim{        
//专门用来配置不兼容的模块。具体来说,每个模块要定义
//(1)exports值(输出的变量名),表明这个模块外部调用时的名称;
//(2)deps数组,表明该模块的依赖性。        
            'jquery.scroll': {
                  deps: ['jquery'],
                 exports: 'jQuery.fn.scroll'
             }
        }
})

//引入模板
requirejs(['引入依赖模块名','valuedata'],function($,valuedata){        //回调函数
        console.log(valuedata.show);
})

valuedata.js 如何定义一个模块

1、没有依赖项可以直接写函数,有依赖模块define第一项参数必须为数组
2、依赖模块名:·text!review.txt,image!cat.jpg textimage插件,则是允许require.js加载文本和图片文件。

define(['引入依赖模块名'],function(//形参){
    return {
        show:function(){
            return 2;
        };
    }
})

你可能感兴趣的:(模块化)