Web 前端开发 让前端飞前端开发

RequireJS模块化

2017-02-10  本文已影响0人  Brighten_Sun

RequireJS官网:www.requirejs.org

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

RequireJS常用的方法:
1、requirejs.config
2、requirejs
3、define

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

<script src="js/require.js" data-main="js/main"></script>

主模板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' text和image插件,则是允许require.js加载文本和图片文件。

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

猜你喜欢

热点阅读