(仅供自己使用,勿喷)

闲着无聊,尝试下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. wuzhicms常见函数方法的整理收集

    函数(方法) 含义功能 PHP file_exists() 函数 检查文件或目录是否存在.如果指定的文件或目录存在则返回 true,否则返回 false 五指cms MSG MSG($msg, $go ...

  2. 使用yum和iso镜像离线升级RedHat系统

    创建一个用于挂载iso镜像的目录.由于这个目录不能在挂载时自动创建,所以需要以root身份先创建一个目录.命令: mkdir mount_dir 以root身份把iso镜像挂载到上一步创建的目录上.命 ...

  3. redis ltrim命令

    LTRIM key start stop 相关命令 BLPOP BRPOP BRPOPLPUSH LINDEX LINSERT LLEN LPOP LPUSH LPUSHX LRANGE LREM L ...

  4. linux重定向总结:如何将shell命令的输出信息自动输出到文件中保存

    在做批量实验室,例如跑批量MR的作业,我们会写好shell脚本,然后启动脚本,等所有作业执行完再去看结果,但是这些执行时的信息如何保存下来到文件中呢?下面这个命令可以完成这个任务. sh batchj ...

  5. 【原创】MapReduce编程系列之表连接

    问题描述 需要连接的表如下:其中左边是child,右边是parent,我们要做的是找出grandchild和grandparent的对应关系,为此需要进行表的连接. Tom Lucy Tom Jim ...

  6. 在YII中使用Redis等缓存

    Yii AR 单行数据-自动缓存机制 | LOCKPHP Yii AR 单行数据-自动LOG机制 CActiveRecordBehavior进阶 | LOCKPHP 缓存 - 权威指南 - Yii F ...

  7. go语言与所谓的包

    import后面接的是目录的名字,而不是所谓包的名字,并且如果一个目录下面还有目录的话都必须要写进去,比如: import "MyPackage" import "MyP ...

  8. Selenium 进行web自动化测试

    1.安装火狐版本时注意,如果无法正常安装,应该点击右键---以管理员身份运行 2.安装成功后,选择工具--选项--高级--更新,停止其自动化更新 3.maven里面加载应有的selenium的组件

  9. 超详细单机版搭建hadoop环境图文解析

    前言: 年前,在老大的号召下,我们纠集了一帮人搞起了hadoop,并为其取了个响亮的口号“云在手,跟我走”.大家几乎从零开始,中途不知遇到多少问题,但终 于在回家之前搭起了一个拥有12台服务器的集群, ...

  10. div:给div加滚动栏 div的滚动栏设置

    今天做了个样例: div 的滚动栏问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;”>& ...