Nodejs中关于seajs的使用，疑问~~

Nodejs中关于seajs的使用，疑问~~

是这样的：

<form ...... onsubmit="return check()">
      ....
</form>

<script type="text/javascript">
 function check(){
 	alert("!!!!!!!!!!");
 }
</script>

传统的使用js，上面是没问题的，会弹出提示 “！！！！！！！！！”

但是用了seajs后

define(function (require, exports, module) {
   function check(){
     alert("!!!!!!!!!!");
   }
});

这时候确不能触发check，我哪个地方没遵守规则嘛？


8 回复

当然可以。让我们来详细探讨一下在 Node.js 中使用 Sea.js 时遇到的问题，并提供一些示例代码来帮助理解。

问题背景

Sea.js 是一个用于组织 JavaScript 模块的工具，它可以帮助你在项目中更好地管理和加载模块。在传统的方式中，我们直接在 HTML 文件中定义函数并绑定事件，这种方式简单直接。但在使用 Sea.js 的时候，我们需要遵循其模块化规范来定义和调用函数。

示例代码

首先，我们来看一下如何在 Sea.js 中正确地定义和调用 check 函数。

HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Seajs Example</title>
    <script src="/path/to/seajs/sea.js" id="seajsnode"></script>
</head>
<body>
    <form id="myForm" action="#">
        <!-- Form fields here -->
        <button type="submit">Submit</button>
    </form>

    <script>
        seajs.use('./main'); // 加载 main.js 文件
    </script>
</body>
</html>

main.js 文件

define(function(require, exports, module) {
    var $ = require('jquery'); // 假设你已经配置了 jQuery 插件

    function check(event) {
        event.preventDefault(); // 阻止表单默认提交行为
        alert("!!!!!!!!!!");
    }

    $(document).ready(function() {
        $('#myForm').on('submit', check);
    });
});

解释

  1. HTML 文件:

    • 引入 Sea.js 脚本文件。
    • 使用 seajs.use() 方法加载 main.js 文件。

  2. main.js 文件:

    • 使用 define 定义模块。
    • 使用 require 引入依赖（例如 jQuery）。
    • 在 $(document).ready() 回调函数中，为表单添加 submit 事件监听器。
    • check 函数接收 event 参数，并调用 event.preventDefault() 来阻止表单默认的提交行为。

通过这种方式，你可以确保在 Sea.js 环境下正确地定义和调用 check 函数。这样可以避免在传统方式中直接将函数绑定到表单上而无法正常工作的现象。希望这能解决你的疑惑。


新手问题, 对作用域不理解… 第一个定义的 check 是在全局作用域的, 所以从 HTML 属性里能够访问到. 第二个被函数封闭在闭包里面了, 从外面不能调用 跟 SeaJS 半点关系都没有

稍微明白你的意思了~~ 但是我试了一下exports.check = check,还是不能访问

使用addlistener（“click”， function()）这种方式?

理论上是这么用的，但还是推荐使用绑定的形式在模块中添加事件。 <pre class=“prettyprint language-html”><code><button onclick=“seajs.use(’./test’, function(test){ test.check(); });”>Check</button></code></pre> <pre class=“prettyprint language-html”><code><script> define(’./test’, function(require, exports, module){ exports.check = function(){ console.log(true); }; }); </script></code></pre>

如果这样用的话，算是违背了seajs的初衷。 seajs其中一项作用是减少全局变量。

你只有

window.check = function (){
     alert("!!!!!!!!!!");
   }

才能生效，不过这样跟楼上说的意思大致，建议你仔细浏览一下seajs的官网。

那请教一下，在模块化的思想下，怎么将验证的逻辑放在seajs里，怎么去绑定呢？ 给个链接看一下，找了好久都没找到~

做一个简单的例子，目录结构大概是这样的： <pre style=“line-height: 1;”> |- js | |- app | | |- login.js | |- vendor | |- sea.js |- index.html </pre> <h4>index.html</h4> <pre class=“prettyprint language-html”><code><form action=“http://url” method=“post” id=“loginForm”> <input type=“text” name=“user” placeholder=“用户名/邮箱”/> <input type=“text” name=“pass” placeholder=“密码”/> <button id=“submit” type=“submit”>登录</button> </form> <script src=“js/vendor/sea.js”></script> <script> seajs.config({ base: ‘./js/’ }); seajs.use(‘app/login’); </script></code></pre> <h4>app/login.js</h4> <pre class=“prettyprint language-js”><code>define(‘app/login’, function(require, exports, module){ var loginForm = document.getElementById(‘loginForm’); loginForm.onsubmit = function(){ // this is form[id=“loginForm”] if ( this.user.value == ‘’ || this.pass.value == ‘’ ) { alert(‘用户名和密码不能为空’); return false; } else { return true; } }; // 或者可以这么写， var submit = document.getElementById(‘submit’); submit.onclick = function(event){ if ( loginForm.user.value == ‘’ || loginForm.pass.value == ‘’ ) { alert(‘用户名和密码不能为空’); event.preventDefault(); } else { loginForm.submit(); } } });</code></pre>

在使用Sea.js时，你需要确保函数定义能够被正确地导出和调用。在你的例子中，check 函数是在 define 回调函数内部定义的，这意味着它没有被暴露到全局作用域中，因此无法通过HTML事件直接调用。

你可以通过将 check 函数作为模块的导出部分来解决这个问题，或者在HTML中使用事件绑定的方式进行调用。下面是两种方法的具体实现：

方法1：将函数导出

// 定义模块，并导出check函数
define(function (require, exports, module) {
    function check() {
        alert("!!!!!!!!!!");
    }

    // 将check函数导出
    exports.check = check;
});

然后在HTML中加载这个模块，并调用导出的函数：

<script>
    seajs.use('./path/to/your/module', function (module) {
        document.querySelector('form').onsubmit = module.check;
    });
</script>

方法2：使用事件绑定

直接在HTML文件中使用事件绑定方式，而不是通过全局函数：

// 定义模块
define(function (require, exports, module) {
    function check() {
        alert("!!!!!!!!!!");
    }

    // 绑定事件
    seajs.on('ready', function () {
        document.querySelector('form').addEventListener('submit', check);
    });
});

这两种方法都可以使你在使用Sea.js时正确地触发 check 函数。

回到顶部