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

Posted 2020-12-03 Jen Ho

主要目的是学习如何使用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","陕西省","西安市","户县");
        }
    }
})