首页 > 代码库 > requirejs 使用实例

requirejs 使用实例

2024-08-09 21:57:52   218人阅读

作为前端开发人员，模块化编程是其身边一个重要工具。它可以规范你的代码，解决由于多个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 使用实例


联系
我们