主要目的是学习如何使用require.js
AMD就是通过延迟和按需加载来解决各个模块的依赖关系,其中require就是AMD的框架之一
它的优点是可以解决以下问题:
- JS文件的依赖关系。
- 通过异步加载优化script标签引起的阻塞问题
- 可以简单的以文件为单位将功能模块化并实现复用
源代码: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的三级联动菜单【入门】
原文地址:https://www.cnblogs.com/dirkhe/p/9280975.html