在使用seajs模块化开发之前，直接在页面引用js会容易出现冲突及依赖相关的问题，具体问题如下

问题1：多人开发脚本的时候容易产生冲突（比如全局参数冲突，方法名冲突），可以使用命名空间降低冲突，不能完全避免冲突

// JavaScript Document

/*var a = 10;

function tab(){}

function drag(){}

function dialog(){}*/

var miaov = {};  //名字比较长 , 只能降低冲突，不能完全避免

miaov.a = ;

miaov.tab = function(){};

miaov.drag = function(){};

miaov.dialog = function(){};

问题2：依赖问题，js引用的依赖关系，如下代码b.js依赖于a.js，那么b.js不能再a.js之前加载。

传统脚本所依赖的脚本必须全部引用进来

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script>

/*一个页面中:

<script src="a.js"></script>

<script src="b.js"></script>

<script src="c.js"></script>

<script src="d.js"></script>*/

show.js  :  日历组件

你的同事:

<script src="a.js"></script>

<script src="show.js"></script>

show();

你的同事:

<script src="a.js"></script>

<script src="b.js"></script>

<script src="show.js"></script>

show();

你的同事:

<script src="a.js"></script>

<script src="b.js"></script>

<script src="show.js"></script>

<script src="hide.js"></script>

show();

</script>

</head>

<body>

</body>

</html>

当网站开发越来越复杂的时候，经常遇到冲突、依赖问题，如何解决以上这些问题，就是我们js模块化所要解决的问题。

JS模块化

如何解决?

Seajs库

解决刚才出现的问题，提升代码的可维护性

模块的概念

http://seajs.org

Seajs 与 jQuery的区别

query像是冲锋陷阵的士兵（操作DOM操作，用于实际开发），seajs就像是管后勤的（模块开发，不涉及逻辑）

1.使用seajs

seajs如何解决?

①引入sea.js的库

②如何变成模块？

define

③如何调用模块？

exports

seajs.use

④如何依赖模块？

require
// JavaScript Document

define(function(require,exports,module){  //sea下的参数 : 不允许修改的

    //exports : 对外提供接口的对象

    function show(){

        alert();

    }

    exports.show = show;

});
// JavaScript Document

define(function(require,exports,module){  //sea下的参数 : 不允许修改的

	//require : 模块之间依赖的接口

	var a = require('./module3.js').a;   //当引入的是sea下面的模块的时候，那么require执行完的结果就是exports

	function show(){

		alert(a);

	}

	exports.show = show;

});

// JavaScript Document

//var a = 100;

define(function(require,exports,module){

    //alert( module.exports == exports );

    /*require.async('.js/module2.js',function(){

        alert('模块加载完的回调');

    });*/

    var a = ;

    module.exports = {

        a : a

    };

});
<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

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

<script>

//两个参数 : 第一个参数 : 模块的地址  第二个参数 : 回调函数(回调函数的参数代表exports)

//localhost/seajs+gruntjs/sea/js/module1.js

//sea的默认根目录 : sea.js这个文件

seajs.use('./js/module1.js',function(ex){

    ex.show();  //

    show();  //

    function show(){

        alert();

    }

});

seajs.use('./js/module2.js',function(ex){

    ex.show();  //

    show();  //

    function show(){

        alert();

    }

});

</script>

</head>

<body>

</body>

</html>

2.精通前端系列技术之JavaScript模块化开发 seajs（一）的更多相关文章

  1. 2.精通前端系列技术之JS模块化开发-深入学习seaJs（四）

    深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基 ...

  2. 2.精通前端系列技术之seajs模块化使工作更简单（二）

    drag.js // JavaScript Document //B开发 define(function(require,exports,module){ function drag(obj){ ; ...

  3. 2.精通前端系列技术之seajs和gruntJs结合开发（三）

    1.我们先来了解下模块化历史 模块化历史 nodeJS的出现(http://nodejs.org/) commonJS规范(http://www.commonjs.org/) 浏览器JS的模块化? A ...

  4. 3.精通前端系列技术之深入学习Jquery(一)

    使用Jquery的好处: •简化JS的复杂操作 •不再需要关心兼容性(原生js获取元素样式.事件需要做兼容性) •提供大量实用方法 1.选择网页元素 <!DOCTYPE html PUBLIC ...

  5. 1.精通前端系列技术之js正则表达式

    在不会正则的时候,我们寻找字符串某些规律或者截取部分特殊字符的时候,我们需要写很多行代码来获取我们想要的字符串,在使用正则之后,代码量会大量简洁很多 1.字符串的比较,判断是否数字类型的字符串,我们用 ...

  6. Javascript模块化开发－轻巧自制

    Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...

  7. Javascript模块化开发，使用模块化脚本加载工具RequireJS，提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  8. Javascript 模块化开发上线解决方案

    最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...

  9. JavaScript模块化开发的那些事

    模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. ...

随机推荐

  1. poj3334Connected Gheeves(二分）

    链接 二分高度,算面积的地方有点麻烦,没有用求交点的模板,直接自己按三角形相似手算了一下,写的有点麻烦. 上下界直接取水可放的最高点以及最低点. 自己的长得很挫的代码 #include <ios ...

  2. 【Todo】LR-逻辑回归

    因为逻辑回归对于计算广告学非常重要.也是我们平时广告推荐.CTR预估最常用到的算法.所以单独开一篇文章讨论. 参考这篇文章:http://www.cnblogs.com/sparkwen/p/3441 ...

  3. android 主线程和子线程之间的消息传递

    从主线程发送消息到子线程(准确地说应该是非UI线程)  package com.zhuozhuo; import android.app.Activity; import android.os.Bun ...

  4. Android中Activity、Service和线程之间的通信

    Activity.Service和线程应该是Android编程中最常见的几种类了,几乎大多数应用程序都会涉及到这几个类的编程,自然而然的,也就会涉及到三者之间的相互通信,本文就试图简单地介绍一下这三者 ...

  5. Java Date,long,String 日期转换

    1.java.util.Date类型转换成long类型java.util.Date dt = new Date();System.out.println(dt.toString()); //java. ...

  6. 使用Beanstalkd_console

    作用:可以将 beanstalkd 的队列信息展示在图形化的操作界面一样,这样不仅给我么查看队列信息有很大的帮助,也可以形象地理解队列任务具体内容 使用操作:(前提条件是前面的队列能正常执行,) 首先 ...

  7. iOS响应式编程：ReactiveCocoa vs RxSwift 选谁好

    转载: iOS响应式编程:ReactiveCocoa vs RxSwift 选谁好 内容来自stack overflow的一个回答:ReactiveCocoa vs RxSwift – pros an ...

  8. div布局

    Margin: Margin属性用于设置两个元素之间的距离. Padding: Padding属性用于设置一个元素的边框与其内容的距离. Clear: 使用Float属性设置一行有多个DIV后(多列) ...

  9. 在Access中批量调用SQL语句

    access的SQL视图一次只能执行一条SQL语句,那么在VBA中调用或许可以简便一些 例如: Public Sub 批量()Dim strsql As String   strsql = " ...

  10. JAVA_安装JDK和Eclipse

    大二开始前,找的是学长帮忙直接安装的,这个寒假抽空体验重装系统,同时,体验安装JDK和Eclipse.O(∩_∩)O 1.jdk 1)官方网址(下载JDK)   http://www.oracle.c ...