require.js入门

require.js (模块化开发的框架/插件/库/引擎)

干嘛的:代码管理
为什么用:
代码重复,全局变量污染,依赖也会有问题(a-->b-->c),慢
解决的问题:
动态的引入js 用谁引入谁--整洁
自动解决依赖
模块化开发
下载:
http://requirejs.org/
http://seajs.org
要求:
推荐: 要在服务器环境下使用
注意::
模块化,没有给你带来新的东西,只是加了一些书写格式
CMD:
1. 定义模块 模块==js文件 在js文件完成
define(function(require,exports,module){

        这里面的东西外面要用,必须对外输出
        exports.东西= 值

    });
2. 使用模块(引入模块)   在html里面完成
    requirejs:
    require(['模块名/文件名'],function(参数){
        参数  ==   接收到的模块
        参数modA.东西   在使用模块里面的内容
    })

    seajs:  
    seajs.use('模块名/文件名',function(参数){
        参数  ==   接收到的模块
        参数modA.东西   在使用模块里面的内容
    })

3.  引入多个模块  在html里面完成
    require(['模块1','模块n'],function(参数1,参数n){}
4.  模块里面引入模块    在js里面完成
    var modA = require('模块名')
    modA.属性 

AMD:
1. 定义模块 模块==js文件 在js文件完成
define(function(){

        这里面的东西外面要用,必须对外输出
        return {}

    });
2. 使用模块(引入模块)   在html里面完成
    requirejs:
    require(['模块名/文件名'],function(参数){
        参数  ==   接收到的模块
        参数modA.东西   在使用模块里面的内容
    })

3.  引入多个模块  在html里面完成
    require(['模块1','模块n'],function(参数1,参数n){}
4.  模块里面引入模块    在js里面完成
    define(['依赖模块1','依赖模块2'],function(mod1,mod2){
        mod1.属性;
    });

require提高:

    1)设置基础路径
    
    require.config({
        baseUrl:'js/xxx/xx/ooo'
    });

    2)引入第三方模块

    require.config({
        shim:{
            'jquery-1.7.2':{
                exports: '$'
            }
        }
    });

模块化开发流程:

    1)分析模块数量
        common.js
            getStyle.js
            getByClass.js
        tab.js
        move.js
        focusImg.js
        
        mouseWheel.js
    2).编写模块-->测试模块
    3).使用模块(完成网站功能)

你可能感兴趣的:(require.js入门)