jQuery – 使用 masonry 配合 RequireJS 引用的方法
Masonry 這個款套件，如果在 jQuery 開發中要透過 RequireJS 去引用的話，必須還要搭配 jQuery 這款外掛 bridget。Bridget 這款外掛，主要是負責讓外部的程式碼建構為 jQuery 的外掛。所以我們要這麼寫 Masonry
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
requirejs.config({ paths : { jquery : "plugin/JS/jquery-1.11.3.min", Masonry: "plugin/JS/jquery.masonry/jquery.masonry-2.3.0", bridget : "plugin/JS/jquery.bridget" } }) requirejs([ 'jquery', 'masonry', 'bridget' ], function ($, Masonry){ $.bridget( 'masonry', Masonry ); $(function (){ $('.grid').masonry(); }) }) |
jquery, masonry, bridget 這三個彼此沒有相依關聯，所以不用在 requirejs.config 設定相依性。三個分別載入後，我們讓 Masonry 透過 bridget 建構成 jquery 的外掛套件。並指定命名空間為 masonry，這樣就能順利在 jQuery 內部使用 $(‘.grid’).masonry(); 。
參考官方資料 http://masonry.desandro.com/appendix.html#requirejs
記得 requirejs 在引用 jQuery 的時候，務必使用 jquery ，否則在 $.bridget( ‘masonry’, Masonry ); 會出現錯誤喔。可參考： 使用 jQuery 在 Chrome 出現 $ is not a function