requirejs学习笔记[jquery,jquery-ui]

Jamers · May 4, 2017

最近项目上使用到requirejs，之前一直用jquery在js中处理，拿它进行简单测试一下，特此记录。相关文件请自行下载，均为官方标准库。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="js/jquery-ui-1.12.0/jquery-ui.min.css">
<title>RequireJs Test</title>
<script type="text/javascript" src="js/require.js"></script>
<script>
requirejs.config({
    baseUrl: 'js',
    paths: {
        // the left side is the module ID,
        // the right side is the path to
        // the jQuery file, relative to baseUrl.
        // Also, the path should NOT include
        // the '.js' file extension. This example
        // is using jQuery 1.9.0 located at
        // js/lib/jquery-1.9.0.js, relative to
        // the HTML page.
        'jquery': 'jquery-1.12.4.min',
        'jquery-ui': 'jquery-ui-1.12.0/jquery-ui.min',
    },
    shim: {
        'jquery-ui': ['jquery'],
    }
});

/*
//方式一：直接在脚本中调用jQuery和jquery-ui
requirejs(['jquery','jquery-ui'],function($) {
    $(function(){
        $('#test').text('Hello World!');
        $('#date').datepicker();
    });
});*/

//方式二，先封装，然后再调用封装
define("test",['jquery','jquery-ui'],function($,ui){
    return {
        init: function() {
            $('#test').text('Hello World2!');
            $('#date').datepicker();
        },
    }
});
requirejs(['test'],function(t){
    t.init();
});

</script>
</head>
<body>
<div id='test'>
1234567890
</div>
<input id='date' type="text" value="">
</body>
</html>

Sign In

requirejs学习笔记[jquery,jquery-ui]

Recommended Posts

Jamers

Link to comment

Share on other sites

Please sign in to comment

Browse

Activity

Store