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. css样式重置，不建议用通配符

    由于各个浏览器对css样式的默认样式不一致,所以有必要进行样式重置.在网上看到很多建议使用 *{margin:0;padding:0} 重置margin和padding.建议不这样子使用,原因主要是性 ...

  2. json排序 摘自百度

    var sortBy = function (filed, rev, primer) {    rev = (rev) ? -1 : 1;    return function (a, b) {    ...

  3. Autolayout（VFL）

    Autolayout(VFL) 1.NSLayoutConstraint + (NSArray *)constraintsWithVisualFormat:(NSString *)format opt ...

  4. Python path

    1.os.path 1.1.os.path.dirname(__file__) 1.1若文件__file__以绝对路径被运行的,则输出绝对路径 1.2若文件以相对路径被运行的,则输出为空 1.2.os ...

  5. Ubuntu 14.4 下安装 Tomcat + Solr5.2

    okbt.net 网站采用  Lucene.net 3.03 做数据引擎..不是很理想...后来试用了 Solr 后感觉很不错.多点同步.原子更新等很方便..抽空安装学习了下.. 1. ubuntu ...

  6. 依赖注入的威力，.NET Core的魅力：解决MVC视图中的中文被html编码的问题

    有园友在博问中提了这样一个问题 —— .NET Core 中文等非英文文字html编码输出问题,到我们的 ASP.NET Core 项目中一看,也是同样的问题. 比如下面的Razor视图代码: @{ ...

  7. 如何自行处理写好的eclipse插件安装不生效

    本帖最后由 anrainie 于 2013-7-23 11:31 编辑 对于eclipse插件开发的新手,经常会遇到插件写好了,拷贝到plugins或dropins文件下,但是没有生效.上网各种问,也 ...

  8. 【腾讯Bugly干货分享】Android ListView与RecyclerView对比浅析--缓存机制

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/5811d3e3ab10c62013697408 作者:黄宁源 一,背景 Recy ...

  9. s3c2440笔记1（启动）

    s3c2440启动方式 1. 从nand flash 启动 1.1 上电后将nand flash中的前4KB数据复制到“Stepping Stone”: 1.2 CPU 执行“Stepping Sto ...

  10. .NET开发笔记（二十二） .NET VS Java

    我们目前对.NET的理解大部分可以归纳为:起初它是Java平台(注意是平台,不要跟Java语言搞混淆)的一个克隆品,后来慢慢演变,有了自己的特性.由于Java平台最显著的特点就是“平台独立性”(或者说 ...