Jump to content
新域网络技术论坛
Sign in to follow this  
Jamers

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

Recommended Posts

最近项目上使用到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>

Share this post


Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
Sign in to follow this  

×
×
  • Create New...