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. 关于合并“.a”文件时遇到的问题

    今天在给工程添加百度地图SDK时,涉及到百度地图的模拟器与真机环境下的.a文件的合并,在使用终端进行 合并时,出现: xcrun: error: active developer path (&quo ...

  2. Core Audio（二）

    用户模式音频组件 在windows vista中,core audio apis充当用户模式音频子系统的基础,core audio apis作为用户模式系统组件的一个thin layer,它用来将用户 ...

  3. javascriptone

    var start=Date.now();document.write("<h1>This is a paragraph.</h1>");function ...

  4. The Rotation Game（IDA*算法）

    The Rotation Game Time Limit : 30000/15000ms (Java/Other)   Memory Limit : 300000/150000K (Java/Othe ...

  5. Understanding ASP.NET MVC Filters and Attributes

    这篇文章把Asp.net MVC的filter介绍的很详细,值得收藏. http://www.dotnet-tricks.com/Tutorial/mvc/b11a280114-Understandi ...

  6. 我的ORM之十一 -- 缓存

    我的ORM索引 对某一个查询频繁重复,应该使用缓存. 缓存应该是可以配置. 配置 Web.config: <configuration> <configSections> &l ...

  7. RCP：给GEF编辑器添加拖拽辅助线

    当图形边缘碰触时,会产生一条帮助拖拽的辅助线 这里需要三个类: 1.SnapToGeomotry 2.SnapToGuide(非必须) 3.SnapFeedbackPolicy

  8. Fluxion 实战答疑

    实战文章<实战-Fluxion与wifi热点伪造.钓鱼.中间人攻击.wifi破解>发布之后,大家响应热烈,不过也遇到了很多问题.微信后台被各种提问挤爆了,于是抓紧时间出了这篇答疑. 0x0 ...

  9. Android Studio 1.0.1 + Genymotion安卓模拟器打造高效安卓开发环境

    我们开发安卓大多是使用Eclipse和安卓SDK中自带的安卓模拟器.当然,Google早就推出了自己的安卓开发环境——Android studio,在不久前,Google发布了Android Stud ...

  10. 有shi以来最详细的正则表达式入门教程

    本篇文章文字内容较多,但是要学习正则就必须耐心读下去,正则表达式是正则表达式其实并没有想像中的那么困难,但是想要熟练的掌握它,还是需要下功夫勤加练习的.这里讲一些正则表达式的语法和学习方法,大家还要多 ...