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. jboss [how to access the admin console]

    However you have not yet added any users to be able to access the admin console. 进入%EAP_HOME%/bin 执行 ...

  2. 【Android UI】Android Layout XML属性

    Layout对于迅速的搭建界面和提高界面在不同分辨率的屏幕上的适应性具有很大的作用.这里简要介绍Android的Layout和研究一下它的实现. Android有Layout:FrameLayout, ...

  3. iscroll5 上拉，下拉 加载数据

    我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...

  4. awk 学习笔记

    awk的语法有两种形式 awk [options] 'script' var=value file(s) awk [options] -f scriptfile var=value file(s) 选 ...

  5. 转行IT行业的心路历程3

    16年丝袜生意很差的一年,老板的态度也不好,大唐本地人太歧视外地人了.而且我干的不开心没有前途,不能体现自我价值,无论你怎么努力. IT技术行业却不是这样,只要你努力肯学习,一定会有回报的. 在16/ ...

  6. PhoneGap(二维码扫描 )

    关于 phoneGap 如何做 二维码扫描 1.        先配置好, 环境 http://coenraets.org/blog/cordova-phonegap-3-tutorial/http: ...

  7. List<String[]>

    1.List<Sttring[]>的用法 List<String[]> list = new ArrayList<String[]>();//声明一个List< ...

  8. 本人讲课时录制的Android应用开发技术教学视频

    网盘地址:http://yun.baidu.com/pcloud/album/info?query_uk=1963923831&album_id=3523786484935252365 本人讲 ...

  9. java jdb命令详解

    jdb - Java debugger 功能描述: 通过简单的命令行程序,对本地或远程jvm进程进行调试. 开启jdb会话: 有多种方式可以开启jdb会话. (1)常见的方式是采用Jdb命令打开一个新 ...

  10. .Net MVC中的路由

    MVC中的URL也就是路由,不用通过路径访问实际的物理文件而达到向用户展示界面. URL的路由功能 一方面正向 映射到Controller和Action,根据用户输入的URL触发相应的控制器和对应方法 ...