require.js入门

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

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

<b>AMD:</b>
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.属性;
    });

<b>require提高:</b>

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

    2)引入第三方模块

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

<b>模块化开发流程:</b>

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容