requireJs主要思想上是文件独立形成模块，但又互相依赖，方便代码。用官网 requireJs 的话来说，就是用它来加速、优化代码，但其主要目的还是为了代码的模块化
本文主要使用jQuery开发一个自定义下拉框组件
一、引入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>发起冷笑话</li>
<li>发起聚餐</li>
<li>发起睡觉</li>
<li class="divider"></li>
<li>发起嘿嘿嘿</li>
</ul>
</a>
- 第二步 引入
css - 第三步 书写
js
demo.js
require(['dropmenu'],function(dropmenu) {
// 初始化dropmenu对象
var operateDropmenus = new dropmenu('.dropmenu');
});
为啥既用了
require又用了define？define定义模块，require使用模块
插件源代码见 github-4js ，源码仅供参考学习使用，不得用于商用，违者必究。
本文完结！能力有限，如有不足之处望大家指出！谢谢！
