requireJs主要思想上是文件獨立形成模塊，但又互相依賴，方便代碼绳锅。用官網 requireJs 的話來說，就是用它來加速酝掩、優(yōu)化代碼鳞芙，但其主要目的還是為了代碼的模塊化
本文主要使用jQuery開發(fā)一個自定義下拉框組件
一、引入requireJs
-
文件目錄結構
目錄解釋：應該都能看懂期虾，我們需要依賴的文件如
jQuery放在lib文件夾內 引入
requireJs文件
index.html
<script data-main="js/demo" src="js/lib/require.js"></script>
首先你得有requireJs文件原朝，下載鏈接 requireJs ,data-main為文件主模塊 ,假如我們的程序js文件為demo.js, 默認后綴.js可以不用寫配置
requireJs文件
通過config設置一組腳本，有助于我們在使用腳本時碼更少的字镶苞。為了方便喳坠，我直接將配置代碼寫到demo.js文件中
demo.js
requirejs.config({
baseUrl: 'js/lib',
paths: {
dropmenu: '../dropmenu/dropmenu'
}
});
baseUrl從字面意思理解就是默認目錄,paths簡化模塊名稱,方便我們使用時少寫代碼，同時不容易因為結構麻煩而混淆
很簡單的例子就是津畸，如果沒有定義paths畦徘，我們依賴dropmenu模塊需要這樣寫：
require(['../dropmenu/dropmenu'],function(dropmenu) {});```
有了``paths``后雏赦，這樣寫:
require(['dropmenu'],function(dropmenu) {});```
更多配置選項請看 config
二、編寫插件
這里我們需要使用define定義模塊晾浴，dropmenu.js文件主要代碼如下
define(['jquery'],function($){
return function(selector,options){
this.dropmenu = $(selector);
if(this.dropmenu.length>1){
this.dropmenu.each(function(){
_lookTheMenu($(this));
})
}else{
_lookTheMenu(this.dropmenu);
}
function _lookTheMenu(menu){...}
function _dropOpen(superMenu,subMenus){...}
function _dropClose(superMenu,subMenus){...}
}
})
三、使用插件
- 第一步牍白，添加
html代碼
index.html
<!--下拉菜單-->
<a href="javascript:;" class="dropmenu dropmenu-trigger">
<div>點我點我</div>
<ul class="sub-dropmenu">
<li>發(fā)起冷笑話</li>
<li>發(fā)起聚餐</li>
<li>發(fā)起睡覺</li>
<li class="divider"></li>
<li>發(fā)起嘿嘿嘿</li>
</ul>
</a>
- 第二步 引入
css - 第三步 書寫
js
demo.js
require(['dropmenu'],function(dropmenu) {
// 初始化dropmenu對象
var operateDropmenus = new dropmenu('.dropmenu');
});
為啥既用了
require又用了define脊凰？define定義模塊，require使用模塊
插件源代碼見 github-4js 茂腥，源碼僅供參考學習使用狸涌，不得用于商用切省，違者必究。
本文完結帕胆！能力有限数尿，如有不足之處望大家指出！謝謝惶楼！
