RequireJS模块化

作者: Brighten_Sun | 来源:发表于2017-02-10 22:24 被阅读0次

    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;
            };
        }
    })

    相关文章

      网友评论

        本文标题:RequireJS模块化

        本文链接:https://www.haomeiwen.com/subject/qcenittx.html