RequireJs觸摸

時間 2020-07-10

原文原文鏈接

　　RequireJs印象中是剛參加工做接手第二個ext項目中遇到過，很惋惜當時沒有認真研究過，實際上一直到今天也只是停留在知道它能夠作什麼而已。年末了工做漸漸進入休整期，前天不經意看到博客園一大神討論requirejs和ASP.NET MVC Bundling異同，突然又想起了requirejs,因而決定一探究竟，下面記錄這兩天的（斷斷續續的~~你懂得）學習成果。html

1.RequireJs能作什麼？jquery

　　1). 防止頁面加載js時阻塞頁面渲染chrome

2). 模塊化加載js,避免出現頁面多引用、依賴js問題數組

2.認識RequireJs瀏覽器

使用RequireJs加載模塊化的js，define定義模塊且模塊需返回jquery插件

//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同樣。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
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。