requirejs中使用jquery

这两天在了解一些前端的一些使用插件,看到了有个模块化管理的js插件requirejs,有助于后期项目的管理和维护以及优化等。就顺便学习了一下,把最基础的配置和引用方法记录下来! 实现效果如下: 引用文件:require.js

其中,页面中只要引入require.js即可,其他所以js都有模块的依赖关系载入!

html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>requirejs模块化管理</title>
 </head>
 <body style="text-align: center;">
 <h2 style="color: red;"><strong>requirejs中使用jquery</strong></h2>
 <input type="text" name="www.ljiong.com" id="ljiong" placeholder="my name is ants" disabled />
 <button type="button" id="btnclick">click</button>
 </body>
 <script data-main="js/app" src="js/static/require.js"></script>
</html>

细心的同学会发现script标签上了多了一个自定义属性:data-main="js/app",等号右边的js/app指的js文件夹下面的app.js。这个app指主模块或入口模块!

app.js

//载入程序主模块,如果函数
requirejs.config({ //requirejs.config用来配置一些参数
 baseUrl:'js/lib', //baseUrl指的模块文件的根目录
 paths:{ //这里设置的路径是相对与baseUrl的,不要包含.js
 jquery:'jquery',
 ants:'ants'
 }
})

//开始逻辑,载入模块
require(['ants']);

ants.js

require(['jquery'],function( $ ){
 var a = $('#ljiong').attr('name');
 $('#btnclick').click(function(){
 if(confirm("您将访问罗卢炯的个人博客"+a+",确定吗?")){
 document.location.href="http://www.ljiong.com";
 }else{
 $('#ljiong').val('请提出您的宝贵意见!')
 }
 })
})

查看下载: 在线演示源码下载

觉得不错,赞助我:





0

文件目录图如下:

requirejs中使用jquery

ljiong 2015/08/05 16:48

good,请持续关注哦!

回复