注意的是:引入jquery的代码最好放在html文件中,本文是为了说明seajs中require如何使用的,才将jquery放入seajs中的。

html中对应的代码:

<script type="text/javascript" src="../js/lib/sea.js"></script><!--这里一定要引入sea.js下面才能使用seajs.use()函数-->
<script type="text/javascript">
seajs.use(['../js/zyl'],function(init) {
init();
});
</script>

(注意的是

function(init)中的参数init

对应的js代码:

define(function(require, exports, module){
require('./lib/jquery.min');//该模块需要引入的js文件。使用require来引入,这样的好处是需要这些js文件时才引入,而不是一开始就全部放在html中引入
function bindEvents(){ //编写核心函数代码
$('.zuobiaoxi td').click(function() { //前提是html中需要引入jquery
$(this).addClass('td_curr').siblings().removeClass('td_curr').parents().siblings().find('td').removeClass('td_curr');
$(this).find('.round').addClass('curr').parents().siblings().find('.round').removeClass('curr');
});
}
var init = function(){
bindEvents();
}
module.exports = init;
})

这里的

seajs.use(['../js/zyl'],function(init) {

    });

就是引入了zyl.js文件,运行zyl.js文件。如果函数中不写init();那么对应的zyl.js文件就要执行init函数()

define(function(require, exports, module){
require('./lib/jquery.min');//该模块需要引入的js文件。使用require来引入,这样的好处是需要这些js文件时才引入,而不是一开始就全部放在html中引入
function bindEvents(){ //编写核心函数代码
$('.zuobiaoxi td').click(function() { //前提是html中需要引入jquery
$(this).addClass('td_curr').siblings().removeClass('td_curr').parents().siblings().find('td').removeClass('td_curr');
$(this).find('.round').addClass('curr').parents().siblings().find('.round').removeClass('curr');
});
}
var init = function(){
bindEvents();
}
init();//这里做了改动
})

此外,还可以在zyl.js中写多个函数,然后使用

module.exports = dialog;来向外提供接口,这样在html中引入的js中就可以直接使用dialog();执行。(如果不写
module.exports = dialog;)则,html中写dialog()不再起作用。

则js代码为:
define(function(require, exports, module){
require('./lib/jquery.min.js');
function bindEvents(){ //编写核心函数代码
$('.zuobiaoxi td').click(function() { //前提是html中需要引入jquery
$(this).addClass('td_curr').siblings().removeClass('td_curr').parents().siblings().find('td').removeClass('td_curr');
$(this).find('.round').addClass('curr').parents().siblings().find('.round').removeClass('curr');
});
} var init = function(){
bindEvents();
}
var dialog=function(){
alert('hello');
}
module.exports = init;
//或者使用init();
module.exports = dialog;
})

对应的html代码为:

<script type="text/javascript" src="../js/lib/sea.js"></script><!--这里一定要引入sea.js下面才能使用seajs.use()函数-->
<script type="text/javascript">
seajs.use(['../js/zyl.js'],function(init) {
init();
dialog();
});
</script>

使用seajs来引入js代码的更多相关文章

  1. 动态引入js代码

    var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = & ...

  2. 页面中引入js的几种方法

    通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入 ...

  3. html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

    html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

  4. Vue-cli构建项目, 组件中js代码引入图片路径问题

    问题描述 .vue的组件分成三个部分, template结构部分, script路径代码, style页面样式 首先, 我们可以在template可以正确引入, 无论是dev, 还是build都没有问 ...

  5. js代码中引入其他js文件

    /***引入 js 文件 @example: import('js/aui.picker.js') @example: import(['js/aui.picker.js', 'css/aui.pic ...

  6. 浏览器控制台js代码与后台不同步

    原因:浏览器会缓存js 如果是将js代码直接通过<script>标签插入jsp页面中则不存在这个问题 在加载页面的时候会重新加载js代码 如果直接将js代码以文件的形式引入,那么每次在修改 ...

  7. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  8. Edge.js:让.NET和Node.js代码比翼齐飞

    通过Edge.js项目,你可以在一个进程中同时运行Node.js和.NET代码.在本文中,我将会论述这个项目背后的动机,并描述Edge.js提供的基本机制.随后将探讨一些Edge.js应用场景,它在这 ...

  9. JS动态引入js,CSS——动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...

随机推荐

  1. 关于Json处理的两个实例

    <script> var value1="{\"layer_datum\":{\"holdId\":\"dcdm\", ...

  2. JS 中的五个假值

    1."", undefined, null, 0, NaN 除了这五个假值以外,其他所有值转布尔类型都是true.还有一个特殊的false.

  3. Oracle数据库中序列用法讲解

    序列(SEQUENCE)是序列号生成器,可以为表中的行自动生成序列号,产生一组等间隔的数值(类型为数字).其主要的用途是生成表的主键值,可以在插入语句中引用,也可以通过查询检查当前值,或使序列增至下一 ...

  4. Ubuntu 14.10 下awk命令详解

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  5. (spring-第7回【IoC基础篇】)BeanDefinition的载入与解析&&spring.schemas、spring.handlers的使用

    报错信息:Configuration problem: Unable to locate Spring NamespaceHandler for XML schema namespace [http: ...

  6. Ubuntu 重新设置网络

    sudo service network-manager stop sudo rm /var/lib/NetworkManager/NetworkManager.state sudo service ...

  7. 步步入佳境---UI入门(4) --简单练习

    一,创建SingleViewApplication 1,UILabel的简单使用 UILabel *label=[[UILabel alloc]initWithFrame:CGRectMake(0, ...

  8. 学习笔记:iPhone终极指南、手机端、浏览器各种规范

    手机图解参考:http://www.paintcodeapp.com/news/iphone-6-screens-demystified 手机图标尺寸参考:https://developer.appl ...

  9. Unity3D ShaderLab 模拟精灵动画

    Unity3D ShaderLab 模拟精灵动画 在上一篇,介绍了通过Shader 模拟纹理运动,那么更深一步讲,我们也可以把帧动画的精灵纹理运动通过shader实现. 虽然大家都是在游戏脚本中做更高 ...

  10. 《JavaScript Ninja》之函数是根基

    函数是根基 理解函数为什么如此重要 JavaScript 是一门 函数式语言 . 函数为什么是第一型对象 在 JavaScript 中,函数可以共处,可以将其视为其他任意类型的 JavaScript ...