前端requireJs模块化开发插件

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 ，源码仅供参考学习使用，不得用于商用，违者必究。
本文完结！能力有限，如有不足之处望大家指出！谢谢！