(仅供自己使用,勿喷)

闲着无聊,尝试下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. linux驱动程序之电源管理之regulator机制流程 (1)

    电源管理芯片可以为多设备供电,且这些设备电压电流有所同.为这些设备提供的稳压器代码模型即为regulator. 下面通过下面三个过程分析regulartor供电机制: 1.分析regulator结构体 ...

  2. weka 集成学习

    import java.io.*;import weka.classifiers.*;import weka.classifiers.meta.Vote;import weka.core.Instan ...

  3. C辗转相除法求最大公约数的实现

    int gcd(int a, int b)//求最大公约数,a为分子,b为分母 { ) return a; return gcd(b,a%b); }

  4. 路由器中pppoe,动态IP,静态IP的区别

    路由器中pppoe,动态IP,静态IP的区别 要把路由器设置得能上网,无非就是设置WAN外网接口连接而已.WAN接口能上网,则连接的电脑就能上网,反之则上不了网.只不过WAN接口往往有pppoe,动态 ...

  5. HDU 4452 Running Rabbits (模拟题)

    题意: 有两只兔子,一只在左上角,一只在右上角,两只兔子有自己的移动速度(每小时),和初始移动方向. 现在有3种可能让他们转向:撞墙:移动过程中撞墙,掉头走未完成的路. 相碰: 两只兔子在K点整(即处 ...

  6. 对css中的浮动属性float刨根解牛

    1.浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 脱离常规流,由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 2.几张图说明浮动常 ...

  7. 【腾讯Bugly干货分享】手游热更新方案xLua开源:Unity3D下Lua编程解决方案

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2bY7A6ihK9IMcA0bOFyB-Q 导语 xL ...

  8. C#.bat文件清理工程目录

    另外一种方法是自己写一个bat文件来清理,非常方便,下面是自己写的验证过比较好用的方法. bat文件内容如下: echo 正在清理VS2010工程中不需要的文件 echo 请确保本文件放置在工程目录之 ...

  9. SpringMVC经典系列-13使用SpringMVC处理Ajax请求---【LinusZhu】

    注意:此文章是个人原创,希望有转载须要的朋友们标明文章出处,假设各位朋友们认为写的还好,就给个赞哈,你的鼓舞是我创作的最大动力,LinusZhu在此表示十分感谢,当然文章中如有纰漏,请联系linusz ...

  10. android95 缩放加载大图片

    MainActivity: package com.itheima.loadimage; import android.os.Bundle; import android.app.Activity; ...