码迷,mamicode.com
首页 > Web开发 > 详细

requirejs 使用实例

时间:2014-12-25 17:50:22      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:

作为前端开发人员,模块化编程是其身边一个重要工具。它可以规范你的代码,解决由于多个js之间的可能存在的依赖关系,并且提升网页渲染速度。

首先来个简单的例子,实现一个简单的jia,jian,cheng,chu。


先看例子:

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <script type="text/javascript" data-main="page.js" src="require.js"></script>
</head>
<body>
</body>

很简单,data-main设置主模块page.js。这个模块一开始就加载执行。

console.log("马上执行")
require([‘math‘], function( _m ){
    console.log(_m)
    console.log(_m.jia(1,2))
})

然后是math.js

define(function(){
    var jia = function(a, b){
        return a+b;
    }
    var jian = function(a, b){
        return a-b;
    }
    var cheng = function(a, b){
        return a*b;
    }
    var chu = function(a, b){
        return a/b;
    }
    
    return {
        jia: jia,
        jian: jian,
        cheng: cheng,
        chu: chu
        
    }
})

输出:

马上执行

Object { jia=function(), jian=function(), cheng=function(), 更多...}

3

这个例子非常简单,所有文件都在同一个目录下。但是还有一些情况

 

情景一:如果我的js是在另外一台主机,如何使用require.js

还是上面的html,main.js改成

requirejs.config({
    paths: {
        ‘jquery‘: ‘http://skin.huitu.com/js/jquery-1.8.3.min‘//注意,这里没有.js。在这里很容易出错
    }
});

require([‘jquery‘], function ($) {
    console.log($)
});

 

情景二:我在维护一个稳定的项目,之前的开发没有用到require.js,新需求的开发我想用require.js。

require([‘old1‘, ‘old2‘, ‘old3‘]);

requirejs.config({
    paths: {
        ‘jquery‘: ‘http://skin.huitu.com/js/jquery-1.8.3.min‘
    }
});

require([‘jquery‘], function ($) {
    console.log($)
});

requirejs 使用实例

标签:

原文地址:http://www.cnblogs.com/pfzeng/p/4184862.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!