requireJS简介

1.传统代码的缺陷

传统的用script标签导入的JS文件,有可能会阻塞页面渲染,
而且正常我们开发的时候会导入JS文件,
都会用script标签,很容易造成混乱,不容易维护

什么是模块化

1.随着网页越来越复杂,网页中引入的JS文件也就越来越多,单纯的用script引入js文件,
已经满足不了我们的需求。我们需要要团队协作,模块分离。

2.模块化是指在处理某些问题时,按照一种分类或思想功能进行模块化管理和使用。

3.设计一个模块化需要具备的能力

  • 具有定义封装的能力

  • 具有定义依赖新模块的能力,可以引入其他模块的能力
  • 模块化的演变

    1.平时我们把功能写在普通函数中,缺点:容易造成函数明明冲突

        function fn1(){}
        function fn2(){}
    

    2.为了解决明明冲突的问题,可以用对象来封装函数,缺点:外部可以通过MyModule.count来操作count属性

        var MyModule = new Object({
            count = 0,
            fn1: function (num){
                return count += num;
            },
            fn2: function (num){
                return count -= num;
            }
        })
    

    3.匿名函数闭包(这种方式已经是模块化变成的雏形了,能够实现功能的封装,也能够隐藏私有变量)

        var MyModule = (function(){
            var count = 0;
            var fn1 = function (num) {
                return count += num;
            }
            var fn2 = function (num){
                return count -=num;
            }
            return {
                fn1:fn1,
                fn2:fn2
            }
        })();
    

    模块化变成规范

  • AMD
  • AMD是requireJS在推广中对模块化编程规范的产出

    特点:对于依赖的模块,AMD是提前执行,异步加载

    推崇:AMD推崇依赖前置

    define(['a','b'],function(){
        //依赖必须写好才能用
        a.doSomething();
        b.doSomething();
    })
    

    CMD是seaJS在推广中对模块化变成规范的产出

    特点:CDM是延时加载

    推崇:CMD推崇依赖就近

    define(function(require,exports,modules){
        //依赖就行书写
        var a = require("a");
        a.doSomething();
        var b = require("b");
        b.daSomething();
    });
    

    总结:这些规范目的都是为了更合理的去实现模块化变成,贴别是在浏览器中,大部分都支持模块化编程

    requireJS 的基本API

    一.requireJS有三个变量:(requirejs,require,define)

    其中:requirejs和require是一个意思,我们一般使用require就可以,require是加载模块用的,
    而且加载模块后,还可以执行回调函数

    define:是定义模块(一个模块就是功能一个js文件)

    二.如何使用requireJS

    1.使用define定义模块

    2.通过require方法来加载模块

    require(['js/sayHello'])
    注意:sayHello相当于sayHello.js   .js可以不写
    
    //还可以设置回调函数
    require(['js/sayHello'],function(){
        alert("加载完毕");
    })
    
    //如果该模块有导出内容的话,需要在回调函数中写上形参
    require(['js/sayHello',function(say){
        alert("加载完毕!" + say);
    }])
    

    3.通过require.config来配置路径,通过require.config不仅能加载本地问价,
    还可以加载网络文件

    require.config({
        path:{
            jquery:'http//libs.baidu.com/jquery/2.0.0/jquery',
            say:'js/say'
        }
    });
    require(['jquery','say'],function($){
        $(function(){
            alert("加载完毕!");
        });
    });
    

    你可能感兴趣的:(requireJS简介)