SeaJS模块化开发实战-优快云博客

本文链接：https://blog.youkuaiyun.com/ibcve/article/details/48806601

seajs简介：

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。

具体步骤：

1、index.html网页中设置

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./sea.js"  data-config="global.js" data-main="./init"></script>
</head>

其中  data-main="./init"
 可以不需要  ，这个是你的入口模块。

2、global.js  配置
即SeaJS的全局配置
SeaJS提供了一个seajs.config方法可以设置全局配置，接收一个表示全局配置的配置对象。具体使用方法如下：
    seajs.config({
    base: 'path/to/jslib/',
    alias: {
    'app': 'path/to/app/'
    },
    charset: 'utf-8',
    timeout: 20000,
    debug: false
    });


其中base表示基址寻址时的基址路径。例如base设置为 http://www.ibcve.com/js/ ，则
var $ = require('jquery');
会载入 http://www.ibcve.com/js/jquery.js 
alias可以对较长的常用路径设置缩写。
charset表示下载js时script标签的charset属性。
timeout表示下载文件的最大时长，以毫秒为单位。
debug表示是否工作在调试模式下。

我的 global.js 设置：
seajs.config({
	alias : {
	    'jquery': 'jquery',
	    'addnum':'add'
	},
	    charset: 'utf-8',
	    timeout: 20000,
	    debug: true
});

3、  sea.js  与jquery.js 配合使用

要将现有JS库如jQuery与SeaJS一起使用，需要根据SeaJS的的模块定义规则对现有库进行一个封装。例如，下面是对jQuery的封装方法：

    define(function() {
     
    //{{{jQuery原有代码开始
    /*!
    * jQuery JavaScript Library v1.6.1
    * http://jquery.com/
    *
    * Copyright 2011, John Resig
    * Dual licensed under the MIT or GPL Version 2 licenses.
    * http://jquery.org/license
    *
    * Includes Sizzle.js
    * http://sizzlejs.com/
    * Copyright 2011, The Dojo Foundation
    * Released under the MIT, BSD, and GPL Licenses.
    *
    * Date: Thu May 12 15:04:36 2011 -0400
    */
    //...
    //}}}jQuery原有代码结束
     
    return $.noConflict();
    });

4、定义模块的模式是基于exports的模式：

define(function  (require, exports, module) {
   // var $ =require("$");
    var $ = require('./jquery');
    function addnum(a,b) {
        return (Number(a)+Number(b)).toFixed(2);
    }
    exports.addnum = addnum;  //用这种方式定义
    // module.exports = addnum;  这种不可以
});

5、index页面全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./sea.js"  data-config="global.js" ></script>
</head>
<body>
<button class="button1">button2</button>
<input type="text" name="num1" id="num1">
<input type="text" name="num2" id="num2">
<script type="text/javascript">
   seajs.use(['jquery','addnum'],function($,addnum){
       $('.button1').click(function(){
           var a =$('#num1').val();
           var b =$('#num2').val();
           var thenum= addnum.addnum(a,b);
           alert(thenum);
       });
   });
</script>
</body>
</html>