学习 | 基于require.js的三级联动菜单入门

Posted Jen Ho

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习 | 基于require.js的三级联动菜单入门相关的知识,希望对你有一定的参考价值。

主要目的是学习如何使用require.js

AMD就是通过延迟和按需加载来解决各个模块的依赖关系,其中require就是AMD的框架之一

它的优点是可以解决以下问题:

  1. JS文件的依赖关系。
  2. 通过异步加载优化script标签引起的阻塞问题
  3. 可以简单的以文件为单位将功能模块化并实现复用

源代码:https://github.com/dirkhe1051931999/writeBlog/tree/master/sanjiliantong

html
<section style="padding:5px;">
    <legend style="font-size: 30px">省市联动</legend>
    出生地:<select name="P1"></select><select name="C1"></select><br>
    所在地:<select name="P2"></select><select name="C2"></select><br>
    工作地:<select name="P3"></select><select name="C3"></select><br>
</section>
<section style="padding:5px;">
<legend style="font-size: 30px">省市地区联动</legend>
出生地:<select name="province"></select><select name="city"></select><select name="area"></select><br>
户口所在地:<select name="province1"></select><select name="city1"></select><select name="area1"></select><br>
工作所在地:<select name="province2"></select><select name="city2"></select><select name="area2"></select><br>
无默认:<select name="province3"></select><select name="city3"></select><select name="area3"></select><br>
默认省:<select name="province4"></select><select name="city4"></select><select name="area4"></select><br>
默认省市:<select name="province5"></select><select name="city5"></select><select name="area5"></select><br>
默认省市区:<select name="province6"></select><select name="city6"></select><select name="area6"></select><br>
</section>
<script src="./require.js" data-main="./index.js"></script>
index.js
require.config({
    paths:{
        zepto:"./zepto",
        commonObj:"./action",
        PCASClass:"./PCASClass"
    }
})

require([‘zepto‘,‘commonObj‘,"PCASClass"],function($,action,PCASClass){
    if ($("select[name=‘P1‘]").length>0) {
        // new PCAS("sheng","shi","qu","吉林省","松原市","宁江区")
        action.sanjiliandong();
    }
})
action.js
define(function(require){
    // console.log($)
    return action= {
        sanjiliandong:function(){
            new PCAS("P1","C1");
            new PCAS("P2","C2","陕西省");
            new PCAS("P3","C3","陕西省","咸阳市");
            new PCAS("province","city","area","陕西省","西安市","户县");
            new PCAS("province1","city1","area1","陕西省","西安市","户县");
            new PCAS("province2","city2","area2","陕西省","西安市","户县");
            new PCAS("province3","city3","area3");
            new PCAS("province4","city4","area4","陕西省");
            new PCAS("province5","city5","area5","陕西省","宝鸡市");
            new PCAS("province6","city6","area6","陕西省","西安市","户县");
        }
    }
})

 

以上是关于学习 | 基于require.js的三级联动菜单入门的主要内容,如果未能解决你的问题,请参考以下文章

ajax三级联动下拉菜单

三级联动下拉菜单

下拉菜单的三级联动

省市区三级菜单联动插件

下拉菜单 ,三级联动 ,夹其它下拉菜单

省市区三级联动下拉菜单应该怎么写