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. Python 5 —— OOP

    OOP class MyClass: y = None def __init__(self,x,y): self.__x = x self.y = y def getx(self): return s ...

  2. Web大文件上传控件-jsp-sql示例更新-Xproer.HttpUploader6.2

    版权所有 2009-2016荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  3. Extjs4.2或以上 使用自定义事件时报错问题

    最近使用了extjs 自定义事件模型,代码如下: function Person(name) { this.name = name; this.addEvents('walk'); } Ext.ext ...

  4. vi命令模式下快速注释代码的方法

    进入http://www.vim.org/scripts/script.php?script_id=1528 点击这个链接下载comments.vim这个插件 然后把它放入到./vim/plugin下 ...

  5. iOS进阶_地图定位

    一.定位步骤 1.Xcode自带地图,直接先引入头文件 #import <CoreLocation/CoreLocation.h> 2.CLLocation框架中的CLLocationMa ...

  6. H 1022 Train Problem Ⅰ

    题意:给我们两个序列,看能否通过压栈,出栈将第一个序列转换成第二个. 思路:将序列 1 依次压栈,同时看是否和序列 2 当前元素相同 代码如下: #include<iostream> #i ...

  7. uva-10305

      题意:给出n个任务,任务不是完全独立的,有些任务必须依赖另外一些任务才能执行:m个任务关系. 输出:n个任务的可能执行顺序: 我的解决方法:这就是个赤裸裸的拓扑排序,直接dfs拓扑每一个任务点,然 ...

  8. C# final project

    Problem Statement You are tasked with developing a task manager. The task manager will allow people ...

  9. 如何让ECSHOP不同的分类调用不同模板方法

    如何给ecshop商品分类,显示不同的模板的话.可以通过不同的分类ID来取得不同模板.我们可以通过分类ID来判断,比如分类为1的,调用cat1.dwt.分类为2的,调用cat2.dwt,我们在cate ...

  10. [poi2007] biu

    题意:给定一个图,点n<=105,边m<=106,现在求它的补图有多少个联通分量.. 思路:很容易想到并查集,但是补图边太多了.. 于是只能优化掉一些多余的边.. 具体做法是用队列优化.. ...