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