RequireJs触摸

最新推荐文章于 2024-10-30 19:10:39 发布

anzhi8831

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量134

点赞数

文章标签： javascript 测试 ViewUI

原文链接：http://www.cnblogs.com/seanchang/p/8438702.html

版权

　　RequireJs印象中是刚参加工作接手第二个ext项目中遇到过，很可惜当时没有认真研究过，实际上一直到今天也只是停留在知道它可以做什么而已。年底了工作渐渐进入休整期，前天不经意看到博客园一大神讨论requirejs和ASP.NET MVC Bundling异同，忽然又想起了requirejs,于是决定一探究竟，下面记录这两天的（断断续续的~~你懂得）学习成果。

1.RequireJs能做什么？

　　1). 防止页面加载js时阻塞页面渲染

2). 模块化加载js,避免出现页面多引用、依赖js问题

2.认识RequireJs

使用RequireJs加载模块化的js，define定义模块且模块需返回

//DefineJs模块
define(function(){
   var DefineJs={
           MyAlert:function(msg){
               alert('sean '+msg)
           }
   }
   return DefineJs;//必须返回
})

注：我们可以在定义模块的时候添加依赖

//依赖jquery的模块
define(["jquery"],function($){
   var MyJs={
           MyAlert:function(msg){
               
               var opt={id:1,name:'sean',msg:'hi sean'};
               $.extend(opt,{msg:'hi '+msg})
               alert(opt.msg)
           }
   }
   return MyJs;//必须返回
})

html页面如何使用模块js？RequireJs引用到页面时可以添加data-main属性指定模块入口main.js再此可以省略后缀，相当于main函数，async="true"是异步加载避免阻塞，defer是针对IE浏览器功能和async一样。

<!DOCTYPE html>
<html>
<head>
    <title>RequireJs实践</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>

<script src="js/require.js" data-main="js/main" defer async="true" ></script>
</body>
</html>

main.js conffig配置用到哪些模块

//main.js
require.config({
    baseUrl:'js/',
    paths : {
        myfunc: 'DefineJs' //DefineJs模块    }
})
require(["myfunc"],function(r){
   r.MyAlert('你好') // sean 你好
})

实际开发中我们会引用很多jquery插件而且这些插件未必就是define()模块化的，那该如何使用RequireJs呢？

RequireJs提供shim关键字将依赖的js某个全局变量暴露出来当做模块引用

//不符合AMD规范 UnAMD.js

var consol=function (argument) {
　　var opt={
　　　　id:1,
　　　　name:'sean'
　　}
　　$.extend(opt,{name:argument})
　　console.info(opt)
}

main.js稍作修改

//main.js
require.config({
    baseUrl:'js/',
    paths : {
    　　jquery :["http://libs.baidu.com/jquery/2.0.3/jquery"],
        myfunc: 'DefineJs'//DefineJs模块
    },
     shim: {//不符合AMD js
        UnAMD: {
            deps : ["jquery"], //依赖jquery
            exports : "consol"//输出的对象必须和相关js中的全局变量一致 封装成对象
        }
    }
})
require(["jquery",'UnAMD'],function($,con){
    $(function(){
        con('月明星惜');//控制台输出 对象{id:1,name:'月明星惜'}
    })
})

/*===========================RequireJs简单介绍到此结束==================================*/

注意事项：

defing 命名模块

仔细看jquery发现且在定义模块时是这样的 define( "jquery", [], function() { return jQuery; }); 根据上面介绍我们知道define定义模块时这个模块可以是依赖别的模块的也就是第二个参数数组，那么第一个参数是什么意思呢？其实定义模块是可以强制性定义模块名称，而且在require.config中不可以修改模块名称，所以配置时一定要注意这种已命名的模块。

requirejs.config({
  baseUrl: '/public/js',
  paths: {
    myjquery: 'lib/jquery/jquery'//重新自定义jquery模块名称 
  }
});
requirejs(['myjquery'], function($) {
  //do sth      程序报错  $ is undefined
});