13年在部门做了一个简单的分享seajs，温故一下。
js模块化
我们看一下问题
1，当你的网站开发越来越复杂的时候，会经常遇到这些问题吗？
比如说冲突，比如说性能，比如说依赖
这些问题用模块化开发都可以解决。
那么我们先看一下这些问题怎么产生的。
多人开发。
如：问题1，A：写的js，common.js
有：
function tab（）｛｝
function drag（）｛｝
function tips（）｛｝
使用的时候页面引用common.js
1，B在页面中也写了function tab（）｛｝
这时候页面中的tab()就会覆盖common.js里面的tab();产生冲突
2,B如果引入一个写好的插件，和你的common.js的tab()有冲突，为了不把插件改的比较乱，让A来改common.js就更加杯具了。
我们为了降低冲突，可以加命名空间，但是这时又不能无法避免冲突.，因为有太多工程师，可能有两个人同时用同一个命名空间。并且名称使用的时候还需要特别长。
问题2，新的页面只需要tab(),那么引入common.js（里面有10几个方法）浪费很多资源
那么我们可以把每个方法拆分一下，如 tab.js,drag.js,tips.js
按需要来引入js
那么要引入多个，如果说没有这么多js没有相互依赖的话还可以，如果有依赖的问题，，顺序不能改变
有依赖关系的话，
问题3，
你写的test.js直接 test()用
你的同事
拿到test.js,直接用很高兴。//出问题了，
然后去看看文件发现要依赖另个js，
你忘记这个需要依赖a.js
那么在调用a.js
//没有问题了
过一段时段如果说产品经理又要加不同的需求，可能还要依赖另一个文件，依赖b.js
则每个页面都要加个b.js
过一段时间这个时候产品经理又要砍掉一些功能。
没有用的js就要拿到。所以要去掉a.js，，
去掉后出问题了
检查代码发现test2.js依赖a.js。。所以又要加上a.js。
因为有依赖的问题，加上产品经理的需求的改动让我们大多的时间都在调试改BUG。那么
加班就在所难免
这个时候我们就要想到用模块化来管理我们的代码
js模块化
一个适合web端的模块加载器
解决刚才出现的问题，提升代码的可维护性
模块的概念：
是做什么的呢，也就是解决这些问题的
分享的是一个现成的库。先看看他是怎么来使用的。
为什么我们要来选择seajs呢，还有很多其他的模块化库的。
1，他是中文的，学习起来方便。
2，适合中国国情，并且他有很多网站已经在使用了。
概念，为了提高性能我们把一个方法放到一个js文件里面，然后按需的加载
这些文件，比如说把common.js拆分一下，但是拆分以后不用模块化库的话，
会出现一种依赖的问题，
那么我们用模块化来解决这些问题。
3，seajs如何解决？如何使用
㈠引入seajs库，
㈡如何变成模块？define
㈢如果调用模块？exports，seajs.use
㈣如何依赖模块？require
模块化的角色更像后勤，我们要开发的组件就是将军，模块化只是会多人开发服务的。
4，深入学习seajs
㈠define
㈡require//异步
㈢seajs.use//写入多个模块，
㈣seajs.config alias,preload,debug
//改根目录，
插件，把不是模块化的文件改成模块化的文件
构建工具，可以利用构建压缩打包合并等
http://seajs.org/docs/#docs
下面是个简单的例子
test.html
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="dist/sea.js"></script>
<script>
//seajs.use（）页面去调用模块，第一个参数：模块的地址，
//第二个参数是地址加载成功后的回调函数。
//回调的参数，相当于就是模块中的exports
seajs.use("./js/test1.js",function(ex){//还可以写多个模块
//alert(1);
ex.tab();//很好的避免了命名冲突
});
tab();//B同事
function tab(){
alert(456);
}
//seajs的默认根目录
</script>
<body>
</body>
</html>
test1.js
//A同事
define(function(require,exports,module){
//规定好的三个参数不能变，尽量不要修改，或者赋值。
//exports : 对外的接口
//require : 依赖的接口
//require("./test2.js");//test依赖于test2文件...
//如果地址是一个模块的花，那么require返回值就是模块中的exports
function tab(){
//alert(123);
alert(require("./test2.js").a);//依赖test2
}
exports.tab = tab;
});
test2.js
//var a = 10;
define(function(require,exports,module){
var a = 1000;
exports.a = a;
});
下面我们用一个例子来说明seajs的使用。webqq的一些功能：
ABC代表技术开发人员，加一个产品经理：
<html>
<head>
<meta charset="utf-8" />
<title>webqq</title>
<style>
#div1{width:200px; height:200px; background: red; position: relative; display: none;}
#div2{width:30px; height: 30px; background: yellow; position: absolute; right: 0; bottom: 0; }
#div3{ width: 100px; height: 100px; background: red; position: absolute; right: 0; top:0; cursor:pointer;}
</style>
<script type="text/javascript" src="dist/sea.js"></script>
<script>
//A
seajs.use("./js/main.js");
</script>
</head>
<body>
<input type="button" value="点击" id="input1" />
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>
main.js
//A
define(function(require,exports,module){
var oInput = document.getElementById("input1");
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var oDiv3 = document.getElementById("div3");
require("./drag.js").drag(oDiv3);
oInput.onclick = function(){
oDiv1.style.display = "block";
require("./scale.js").scale(oDiv1,oDiv2);//同步的,全部加载好
//require.async("./scale.js",function(ex){
// ex.scale(Div1,oDiv2);
//});//异步，不用等待
};
});
drag.js
//B 拖拽
define(function(require,exports,module){
function drag(obj){
var disX = 0;
var disY = 0;
obj.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX - obj.offsetLeft;
disY = ev.clientY - obj.offsetTop;
document.onmousemove = function(ev){
var ev = ev || window.event;
//var L = require("./range.js").range(ev.clientX - disX, document.documentElement.clientWidth - obj.offsetWidth,0);
//var T = require("./range.js").range(ev.clientY - disY, document.documentElement.clientHeight - obj.offsetHeight,0);
var L = ev.clientX - disX;
var T = ev.clientY - disY;
obj.style.left = L + "px";
obj.style.top = T + "px";
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
}
exports.drag = drag;
});
scale.js
//C 拖拽改变层大小
define(function(require,exports,module){
function scale(obj1,obj2){
var disX = 0;
var disY = 0;
var disW = 0;
var disH = 0;
obj2.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX;
disY = ev.clientY;
disW = obj1.offsetWidth;
disH = obj1.offsetHeight;
document.onmousemove = function(ev){
var ev = ev || window.event;
//var W = require("./range.js").range(ev.clientX - disX + disW, 500, 50);
//var H = require("./range.js").range(ev.clientY - disY + disH ,500, 50);
//obj1.style.width = W + "px";
//obj1.style.height = H +"px";
obj1.style.width = ev.clientX - disX + disW + 'px';
obj1.style.height = ev.clientY - disY + disH + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
}
exports.scale = scale;
});
range.js
//产品经理新加需求，只能拖拽在可视区B做
define(function(require,exports,module){
function range(iNum,iMax,iMin){
if(iNum>iMax){
return iMax;
}
else if(iNum<iMin){
return iMin;
}
else{
return iNum;
}
}
exports.range = range;
});
OK这个就是一个简单的seajs模块化开发。。。
相关推荐
内容概要：本文涵盖了一系列重要的Java基础知识与进阶概念的面试问题及其详细解答，其中包括JVM的工作原理，垃圾回收的实施细节，多线程的解决方案，以及诸如单例设计模式、异常处理和线程安全集合等实际应用中的编程技巧介绍。 适合人群：旨在为准备面试或希望提高Java编程技能的专业人士提供有用指南，无论是对于初级程序员还是资深开发者都有所帮助。 使用场景及目标：适用于Java学习阶段，帮助理解和记忆相关的关键术语和复杂理论；作为快速查阅资料的宝典应对技术评估或职业机会考察。 阅读注意点：强烈建议在研读解答的同时，进行相应的编程实验和实操练习，以便于深化对每个专题的理解和巩固知识点的应用能力。
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
基于java的考研指导平台设计与实现.docx
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；、下 4载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；、下载 4使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；、下载 4使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
基于java的家政服务中介网设计与实现.docx
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
推地推拉新任务分销系统源码是一款任务拉新悬赏系统，可用于地推任务拉新和任务分销， 会员管理，分销设置，订单管理，财务管理，文章资讯管理。它的运行环境为PHP+MySQL+TP。
学校大创竞赛管理系统，学生上报项目内容，学院、教务处、评审专家评审。SpringBoot、SpringCloud、SpringSecurity、redis、Mysql、swagger、fastdfs、maven、vue、webpack.zip项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
Python是一种高级的、动态类型的编程语言，其设计注重代码的可读性和简洁性。以下是对Python的详细介绍： 一、基本概述 中文名：Python 创始人：吉多·范罗苏姆（Guido van Rossum） 首次发布时间：1991年（Python 0.9.0） 主要版本：Python 2.0（2000年发布）、Python 3.0（2008年发布，为主要修订版） 语言特性：解释型、高级、通用编程语言 二、主要特点 简单易学：Python的语法简洁明了，易于理解和学习。其设计哲学强调代码的可读性和简洁的语法，使得编程变得更加直观和简单。 面向对象：Python既支持面向过程的编程也支持面向对象的编程。在面向对象的语言中，程序是由数据和功能组合而成的对象构建起的，这有助于提高代码的可重用性和可维护性。 可移植性：Python是开源的，因此已经被移植在许多平台上，包括Linux、Windows、macOS等。这使得Python程序可以在不同的操作系统上运行，提高了开发的便利性和灵活性。 解释性：Python是一种解释型语言，编写的程序不需要编译成二进制代码，而是可以直接从源代码执行。Pyt
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
基于java的课程智能组卷系统设计与实现.docx
基于java的农产品网上销售系统设计与实现.docx
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
前端采用的Vue框架，后端采用java语言，ssm框架，mybatis操作数据源，使用软件：idea,eclipse、MySQL。完成了用户登录管理等模块的设计与实现。完成了系统数据库的设计，并基于MySQL数据库管理系统 本系统基于SSM(Spring+SpringMVC+MyBatis)框架,适用于毕业设计， 基于B/S模式, mysql数据库,感兴趣的朋友们可以下载研究一下。 jdk版本:jdk1.8+ 前端：vue.js+ElementUI 开发工具：IDEA 或者eclipse都支持 编程语言: java 框架支持：ssm 数据库: mysql 版本不限 数据库工具：Navicat/SQLyog都可以 详细技术：java+ssm+vue+MYSQL+MAVEN
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
基于java的家用电器销售网站设计与实现.docx
基于java的临大机械学院毕业设计管理系统设计与实现.docx
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；VUE技术 2、项目代码都经过严格调试，代码没有任何bug！下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。