seajs是一个起辅助作用的库，所以它可以更方便开发，而它可以解决以下问题：

1、命名问题，就是冲突

2、性能问题，就是只要一个功能，但却使用一个大插件中的一个小功能，所以要手动拆分出这个功能

3、js依赖问题，要引入多个js文件，而且顺序也要排好，要手动去调节，要根据需求不断调节这些问题，修改BUG

seajs推荐一个功能就是一个模块，所以一个功能一个js文件。

一般流程都是以下代码：

<script>

    /*seajs的目录路径要搞清楚，你的文件在哪使用seajs，那个就是根目录*/

    /*配置*/

    seajs.config({

        base:"./",

        // 开启观察模式，主要看看有没有加载进来

        debug:true,

        /*别名*/

        alias:{

            "jquery":"js/jquery-3.1.0.min.js",

            "a":"js/a.js"

        },

        // 预加载

        preload:["jquery"]

    });

    // JQ库的引入

    seajs.use("jquery");

    /*加载*/

    seajs.use("./js/main");

    </script>

而这是有预加载的流程代码，而seajs是异步加载的方式加载的，所以加载像JQ库，而你的模块又依赖于它，那可能会在第一次执行或多次刷新时会报错，

意思是JQ库没加载进来，这是因为你的模块和JQ库一起加载了，JQ库没有加载完就去实现你的模块功能，所以就报错了，目前的解决方式是手动的写script标签

来同步加载。

以下是不适用预加载的方式：

<script>

    /*把模块引入seajs.use()*/

    // 两个参数，一个是模块地址，第二为回调函数

    // 如果没有./，那么目录的地址是相对于sea-debug.js的地址为默认地址,有就以html目录为根目录

    // 回调中参数就是exports

    seajs.use("./main.js",function(ex){

    });

    </script>

以下是一个例子：

拖拽的例子：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="sea-debug.js"></script>

    <style>

    #div1{

        width: 200px;

        height: 200px;

        position: absolute;

        background-color: red;

    }

    #div2{

        width: 30px;

        height: 30px;

        position: absolute;

        background-color: yellow;

        right: 0;

        bottom: 0;

    }

    #div3{

        width: 100px;

        height: 100px;

        background-color: blue;

        position: absolute;

        right: 0;

        top: 0;

    }

    </style>

</head>

<body>

<input type="button" id="btn" value="点击">

<div id="div1">

    <div id="div2"></div>

</div>

<div id="div3"></div>

    <script>

    /*把模块引入seajs.use()*/

    // 两个参数，一个是模块地址，第二为回调函数

    // 如果没有./，那么目录的地址是相对于sea-debug.js的地址为默认地址,有就以html目录为根目录

    // 回调中参数就是exports

    seajs.use("./main.js",function(ex){

    });

    </script>

</body>

</html>
/*

定义一个模块

他接受三个参数，这三个参数是不可改变的

 */

define(function(require,exports,module){

    // exports是对外的接口

    // require依赖的接口

    // 如果require的返回值是一个模块，接受的一个模块的接口exports

    var btn=document.getElementById("btn");

    var div1=document.getElementById("div1");

    var div2=document.getElementById("div2");

    var div3=document.getElementById("div3");

    require("./drag.js").drag(div3);

    require("./scale.js").scale(div1,div2);

})
define(function(require,exports,module){

    function drag(obj){

        var disX=0;

        var disY=0;

        obj.onmousedown=function(ev){

            ev=ev || window.event;

            disX=ev.clientX-obj.offsetLeft;

            disY=ev.clientY-obj.offsetTop;

            document.onmousemove=function(ev){

                ev=ev || window.event;

                var X=ev.clientX-disX;

                var Y=ev.clientY-disY;

                X=require("./range.js").range(X,document.documentElement.clientWidth-obj.offsetWidth,0);

                Y=require("./range.js").range(Y,document.documentElement.clientHeight-obj.offsetHeight,0);

                obj.style.top=Y+"px";

                obj.style.left=X+"px";

            }

            document.onmouseup=function(){

                document.onmousemove=document.onmouseup=null;

            }

        }

    };

    exports.drag=drag;

});
define(function(require,exports,module){

    function scale(obj1,obj2){

        var disX=0;

        var disY=0;

        var disW=0;

        var disH=0;

        obj2.onmousedown=function(ev){

            ev=ev||window.event;

            disX=ev.clientX;

            disY=ev.clientY;

            disW=obj1.offsetWidth;

            disH=obj1.offsetHeight;

            document.onmousemove=function(ev){

                ev=ev||window.event;

                var x=ev.clientX-disX;

                var y=ev.clientY-disY;

                var w=require("./range.js").range(x+disW,500,obj2.offsetWidth);

                var h=require("./range.js").range(y+disH,500,obj2.offsetWidth);

                obj1.style.width=w+"px";

                obj1.style.height=h+"px";

            }

            document.onmouseup=function(){

                document.onmousemove=document.onmouseup=null;

            }

        }

    }

    exports.scale=scale;

})
define(function(require,exports,module){

    function range(iNum,iMax,iMin){

        if(iNum>=iMax){

            return iMax;

        }

        if(iNum<=iMin){

            return iMin;

        }

        return iNum;

    }

    exports.range=range;

})

这里有三个实现功能的模块，还有一个主模块，是调用他们的。

seajs模块化开发的更多相关文章

  1. 初学seaJs模块化开发，利用grunt打包，减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  2. seaJs模块化开发简单入门

    随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发 ...

  3. 轻轻谈一下seaJs——模块化开发的利器

    "仅做一件事,做好一件事." 这个应该就是seaJs的精髓了. 我在自己的一些项目中使用过seaJs.对其算是了解一二.如今就班门弄斧.轻轻地谈一下. 首先上一段度娘的话: &qu ...

  4. 2.精通前端系列技术之JavaScript模块化开发 seajs（一）

    在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...

  5. JS模块化开发（一）——seaJs

    模块化开发要解决的问题: 1.冲突 比如:多人协作开发时,不同js库中的函数重名问题 可以用命名空间解决: var module={} module.a=1; module.b=function(){ ...

  6. JS模块化开发：使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

  7. JavaScript模块化开发库之SeaJS

    SeaJS是一个很好的前端模块化开发库,源码不到1500行,压缩后才4k,质量极高.

  8. seajs进行模块化开发

    seajs进行模块化开发 模块化前端开发入门指南(二) 2015-08-26 15:23 by paseo, 370 阅读, 0 评论, 收藏, 编辑 概览 使用seajs模块化加载器进行模块化开发, ...

  9. seajs的模块化开发--实践笔记

    2017-04-02 SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.有效的解决复杂项目中命名冲突.依赖.性能等问题. SeaJS ...

随机推荐

  1. IIS支持解析json

      IIS支持解析json 一. windows XP   1． MIME设置: 在IIS的站点属性的HTTP头设置里,选MIME 映射中点击"文件类型"-"新类型&qu ...

  2. rails4.2~devise邮箱测试

    1.由于网站无需验证,只需一封欢迎邮件,在config/intiailzers/devise.rb里面配置 config.allow_unconfirmed_access_for = nil #2.d ...

  3. 深度解析Java8 – AbstractQueuedSynchronizer的实现分析（上）

    本文首发在infoQ :www.infoq.com/cn/articles/jdk1.8-abstractqueuedsynchronizer 前言: Java中的FutureTask作为可异步执行任 ...

  4. DOM技术实现竞赛题页面

    DOM技术实现竞赛题页面 这一段时间学习了DOM操作和JS开发,我就自己开发一个竞赛题的页面. 一.业务需求 1.目标:做一个一百道选择题的页面 2.功能: 显示题目和选项. 下一题上一题的按钮,到第 ...

  5. Android--SQLite的使用

    1.熟悉了SQLite的一般用法之后,在实际开发中,为了能够更好的管理和维护数据库,我们会封装一个继承自SQLiteOpenHelper类的数据库操作类,然后以这个类为基础,再封装我们的业务逻辑方法. ...

  6. Runtime 动态加载方法

    动态加载 #import"ViewController.h" #import"Person.h" @interfaceViewController() @end ...

  7. linux redmine 搭建

    redmine搭建过程参考:http://www.tuicool.com/articles/InMbym 注意事项: 配置文件必须以2个空格开始 启动(指定了端口,和绑定的IP): ruby bin/ ...

  8. java 多线程--- Thread Runnable Executors

    java 实现多线程的整理: Thread实现多线程的两种方式: (1)继承 Thread类,同时重载 run 方法: class PrimeThread extends Thread { long ...

  9. Visual Studio 2015 RC版官方下载(ISO)

    微软Build2015开发者大会发布了下代开发套件Visual Studio 2015 RC候选版,覆盖企业版.专业版以及免费授权的Community社区版,原生支持开发通用型Windows Apps ...

  10. Unity3D入门之Unity3D介绍以及编辑器的使用（1）

    1.Unity3D介绍 Unity3D是跨平台(IOS.Android.Windows Phone.Windows.Flash.XBOX360.PS3.Wii等)游戏引擎,可以开发2D.2.5D.3D ...