分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

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

发布时间:2023-09-06 02:03责任编辑:郭大石关键词: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的三级联动菜单【入门】

原文地址:https://www.cnblogs.com/dirkhe/p/9280975.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved