(仅供自己使用,勿喷)

闲着无聊,尝试下seajs, 只是在公司项目上随便添加并测试了一下,做下记录, 方便以后自己使用更快的上手:

  1. 下载最新的sea.js, v- 3.0.0
  2. 新建seajsConfig.js,主要为seajs的配置,这里我只配置jquery
/**
* JS文件模块化
*/
seajs.config({
base: "./js/lib/",
alias: {
"jquery": "jquery/jquery-1.12.4.min.js"
}
})

3. 新建topMenu.js, 主要为

/**
* topMenu.jsp JS模块化定义
*
*/
define(function(require, exports, module) {
var $ = require('jquery');
//require('artdialog'); //这边添加所有需要引入当前页面的所需的JS包 // 通过 exports 对外提供接口
//exports.doSomething = ... // 或者通过 module.exports 提供整个接口
//module.exports = ... exports.init = function(){
alert("模块初始化完成,回调");
}
});

4. 这会 $ 为空, 需修改JQuery源码:

define(function(){

    //此处为jquery源码
return $.noConflict();
});

5. 最后topMenu.jsp

<script type="text/javascript" src="js/seajs/3.0.0/sea.js"></script>
<script type="text/javascript" src="js/ets/seajsConfig.js"></script>
<script type="text/javascript">
seajs.use("./js/app/topMenu",function(m){
m.init();
});
</script>

最后注意几个地方:

1. 因为刚接触seajs,觉得很多依赖jquery的组件或者JSP代码下需要$来操作的话,个人觉得还是以在页面中引入jquery文件,topMenu.js只引入一些常用的公共jquery等组件,比如窗口、校验等JS组件。

<script type="text/javascript" src="common/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/seajs/3.0.0/sea.js"></script>
<script type="text/javascript" src="js/ets/seajsConfig.js"></script>
<script type="text/javascript">
seajs.use("./js/app/topMenu",function(m){
m.init();
});
</script>

只研究了2小时,因为seajs加到当前系统中比较繁琐,所以放弃JS模块化,因为是后台系统,对性能没特殊要求。

最后贴下目录

好了 OK了, 方便以后自己使用。

初尝seajs,只提供自己学习做笔记的更多相关文章

  1. this指向问题,只提供案例,不做任何分析

    希望大家在测试的道路上找到答案,阔步前行 <script type="text/javascript"> /*this指向 console.log(this); fun ...

  2. seajs初尝 加载jquery返回null解决学习日志含示例下载

    原文地址:http://www.tuicool.com/articles/bmuaEb 如需demo示例,请点击下方链接下载: http://yunpan.cn/cVEybKs8nV7CF  提取码 ...

  3. .NET领域驱动设计—初尝(三:穿过迷雾走向光明)

    开篇介绍 在开始这篇富有某种奇妙感觉的文章之旅时我们先短暂的讨论一下关于软件开发方法论的简要: 纵观软件开发方法论,从瀑布模型.螺旋模型.RUP(统一软件开发过程).XP(极限编程).Agile(敏捷 ...

  4. .NET领域驱动设计—初尝(一:疑问、模式、原则、工具、过程、框架、实践)

     .NET领域驱动设计—初尝(一:疑问.模式.原则.工具.过程.框架.实践) 2013-04-07 17:35:27 标签:.NET DDD 驱动设计 原创作品,允许转载,转载时请务必以超链接形式标明 ...

  5. Hugging Face发布diffuser模型AI绘画库初尝鲜!

    作者:韩信子@ShowMeAI 深度学习实战系列:https://www.showmeai.tech/tutorials/42 TensorFlow 实战系列:https://www.showmeai ...

  6. 初尝 Perl

    本文将阐述以下几方面内容: 1.什么是Perl 2.Perl有什么用 3.Windows 下的Perl环境搭建 4.Perl 版Hello World 5.Perl 语法梗概 6.一些参考资料 什么是 ...

  7. 视频编辑SDK---我们只提供API,任你自由设计炫酷的功能

    面对相对复杂的视频编辑处理技术,你是否束手无策? 在短视频应用中,有一定技术难度的视频编辑技术中,我们提出了一种全新的解决方法:画板和画笔.短视频处理,用画板和画笔,就够了! 我们设计了极其简单易懂的 ...

  8. 国产芯片任重道远 国科微SSD主控芯片的“追赶之路”(不能只提供一颗芯片,而是要将芯片、国密算法、固件Firmware、BIOS和操作系统紧密联系在一起,变成完整解决方案交给行业用户,才能真正体现自身的价值)

    集微网消息,“中国芯”战略之路道阻且长,踏入这个赛道的攻坚者们需要十年如一日的技术突破,需要集合产业势能,共同协作,方能建立中国核心技术真正的竞争力. 国产化之路任重道远,SSD芯片初见成效 信息时代 ...

  9. Github原生CI/CD,初尝Github Actions

    Github 原生 CI/CD,初尝 Github Actions Intro Github 目前已经推出了自己的 CICD 服务 -- Github Actions,而且比微软的 Azure Dev ...

随机推荐

  1. Codeforces Round #343 (Div. 2) B. Far Relative’s Problem

    题意:n个人,在规定时间范围内,找到最多有多少对男女能一起出面. 思路:ans=max(2*min(一天中有多少个人能出面)) #include<iostream> #include< ...

  2. 从打车软件你能想到多少?盈利模式?商机?大数据?移动互联网蛋糕?生活方式改变withApp?

    物联网.云服务.大数据.. 淘宝.12306.卡通...一个产品改变一次生活方式. 打车app,无疑是改变生活方式的又一个产品.从打车软件,你能看到什么? 个人认为,打车软件值得各种投资方斥资,最重要 ...

  3. terminal bash 颜色的详细解释

    http://evadeflow.com/2010/06/sane-terminal-colors/ Sane Terminal Colors June 26, 2010 I recently cre ...

  4. storm的功能、三大应用

    storm的功能 Storm 有许多应用领域:实时分析.在线机器学习.持续计算.分布式 RPC(远过程调用协议,一种通过网络从远程计算机程序上请求服务). ETL(Extraction-Transfo ...

  5. D3D游戏编程系列(三):自己动手编写即时战略游戏之寻路

    说起即时战略游戏,不得不提的一个问题是如何把一个物体从一个位置移动到另一个位置,当然,我说的不是瞬移,而是一个移动的过程,那么在这个移动的过程中我们如何来规划路线呢,这就不得不提到寻路了. 我所了解到 ...

  6. Android完美解决输入框EditText隐藏密码打勾显示密码问题

    长话短说,一共有两种方法.首先你需要在布局文件里面给EditText设置一个android:inputType="numberPassword"属性.我这里默认规定密码只能是数字了 ...

  7. PHP基本语法(二)

    [重点,哪些情况我们会将其它类型的值视为bool值的假:]1. 整型的0会视为bool值的假来执行,任何非0的整型都视为真2. 浮点的0.0不论后面有多少个0都视为假0.000000000,后面只要有 ...

  8. Mac下eclipse安装SVN插件

    eclipse中最常使用的SVN插件是subclipse,先到subclipse官网:http://subclipse.tigris.org下载该插件.   如上图,点击“Download and I ...

  9. AndroidAnnotations部署

    环境: 系统:windows 8 (64bit) 开发工具:Eclipse 3.8 JDK版本:jdk1.6 构建工具:Ant(Eclipse默认的build tool) androidannotat ...

  10. JS中比較2个字符串内元素的不同(字符1, 字符2, 分隔符可选)

    比較2个字符串内元素的不同(字符1, 字符2, 分隔符可选) 文件: diff.js // 演示样例使用方法 /* var str1 = "tie, mao, 55"; var s ...