javascript代码模块化Demo（使用Require.js）

来源：互联网发布：剑三喵脸数据编辑：程序博客网时间：2024/06/11 08:32

Demo目录结构：

这里写图片描述

index.html：

<!DOCTYPE html><html><head>    <title>使用Require.js</title>    <meta charset="UTF-8">    <script src="js/lib/require.js" defer async="true"></script>    <script src="js/lib/require.js" data-main="js/index"></script></head><body>    <p class="message">哈哈哈哈哈</p></body></html>

index.js：

require.config({    paths: {        "jquery": "lib/jquery"    }});require(['jquery', 'moudle1'], function ($, moudle1) {    moudle1.showAlert('这是我写的模块喔');    $('.message').text('我很开心！');});

moudle1.js：

define(function(){    var showAlert = function(str){        alert(str);    };    return {        showAlert: showAlert    };});

request.js 下载地址：http://requirejs.org/docs/download.html

注：下载Require.js文件的时候下载压缩版，不然的话下面代码会失效，Require.js找不到index.js文件，只会到根目录去找index.js文件。这个应该是Require.js的Bug。

data-main="js/index"

0 0