模块化开发一 seajs

最新推荐文章于 2020-01-08 11:10:45 发布
最新推荐文章于 2020-01-08 11:10:45 发布
阅读量679 收藏
点赞数
分类专栏： 【Sea.js+Require.js点滴知识 】

http://www.jianshu.com/p/04d8c277ae07

模块化开发

随着团队开发的复杂化，我们依赖的代码库会越来越多；

安装

npm install spm -g
spm install seajs

可以安装：
安装bower
npm install -g bower
安装seajs
brwer install seajs
github:
http://github.com/seajs/seajs

也可以下载成一个js文件引入

<script src="../lib/sea.js"></script>
<script>
console.log(seajs.version)
</script>

知识

  • 前端这些模块管理的实现是基于AMD规范(异步、管理、加载规范)，在最终实现的时候尊重commndjs规范（nodejs就是这个），定义模块时有两种，第一个是只传一个参数就是commndjs规范，传递多个参数的时候，写法尊重moduletransport规范；

  • 通常define只允许我们定义一个模块，当定义多个模块的时候，后面的会覆盖掉前面的；

seajs文件路径是以sea.js作为出发点的 , 如果是'./'则以自身文件夹为出发点

使用

建立一个de.js文件

seajs.use('de')

在控制面板networks里能看到de.js被加载进来了

define

当传递一个参数的时候，参数就是一个模块,参数可以是任意类型；

在de.js中：
console.log('hello')

index.html:
seajs.use('de',function(main){
})

控制台输出：hello 字符串

define传递：
de.js输入define('hello')

index.html:
seajs.use('de',function(main){
console.log(main)
})
控制台输出：hello 字符串

de.js输入

define({
    color:'red',
    say:function(){
        return 'hello'
    }
})

控制台输出一个对象

  • 如果不写在define里就是一个undefined

我们还可以传递函数，这是一种最复杂的方式，工作中基本是这种方法：

这个函数自带三个参数：
require:引用其它模块的工厂方法
exports:返回的接口对象
module:模块的module属性集
define(function(require,exports,module){
    return {
        color:'yellow'
    }
})
  • 当传递多个参数时，两个或者三个
    如果传递两个参数的时候，第一个参数表示该模块依赖的模块数组集合，最后一个参数是function；
    如果传递三个参数的时候，第一个表示模块的名称，第二个表示该模块依赖的模块集合，第三个参数就是个function；
define('main',[],function(require,exports,module){
    return {
        color:'yellow'
    }
})

模块的依赖

  • 包就是前段说的模块
  • 当传递模块名称的时候，模块的名称就是该名称，当不传递模块的名称的时候，该模块的名称就是该文件的名称，通常我们将模块的名称与文件的名称保持一致

我们再新建一个header.js文件：

define(function(){
    return {
        color:'orange'
    }
})

在main.js中引用：

define(function(require,exports,module){
    var header = require('./header/header');
    console.log(header)
    return {
        color:'yellow'
    }
})

index.html的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="js/sea.js"></script>
    <script>
        seajs.use('main',function(main){
            console.log(main)
        })
    </script>
</body>
</html>

控制台输出两个对象；

use

seajs.use(['header/header','header/skin/skin'],function(header,skin){
    console.log(header,skin)
})

第一个参数可以是一个字符串，也可以是一个模块数组，有多少个，在回调函数的参数就有多少个；

我们可以使用header：

define(function(require,exports,module){
    var header = require('./header/header');
    document.body.style.background = header.color;
    return {
        color:'yellow'
    }
})
  • require规范：
    1. require不能简写；
    2. require不能被重新定义；
      • 不能赋值 var req = requie;是不可以的
      • 不能定义函数 function require 是不可以的
      • 不能在子函数中的参数中使用require
      • 不能在子函数的作用域内重定义（重复上面三条）
    3. require的参数只能是完整的字符串，拼接也不行require('abc' + 'cde')是不可以的；
  • require的参数值如何定义：
    参数值表示的是文件的路径，相对于sea.js,当然也可以./从自身目录出发

项目目录：

- index.html
- js文件夹
     - sea.js
     - main.js
     - header文件夹
        - header.js
        - skin文件夹
            - skin.js

skin.js：

define(function(){
    return 'haha'
})

在main.js中引用：

define(function(require,exports,module){
    var header = require('./header/header');
    var skin = require('header/skin/skin')
    console.log(skin)
    document.body.style.background = header.color;
    return {
        color:'yellow'
    }
})

控制台输出：haha
require:

  • 可以看到是以sea.js为路径起始点，也就是根目录；
  • 加载js文件，后缀名不写；
    define:
    require,exports,module不能更改
前面说到定义一个模块的时候最好名字和文件名一样，默认不写模块名；

如果我们写了不一样的名字会怎么样呢？
header.js中：

define('haha',[],function(){
    return {
        color:'orange'
    }
})

可以看到模块的名字为haha,依赖为空数组，文件名是header.js

main.js:

define(['header/header'],function(require,exports,module){
    var a = require('haha');
    var skin = require('header/skin/skin')
    console.log(a,111)
    return {
        color:'yellow'
    }
})

可以看到控制台可以输出结果;
所以

  • define的数组参数为依赖的模块路径
  • require为引入的模块名字
  • 如果两者相同，就可以直接var header = require('header/header'),不要后缀名.js

exports

  • export是保留字，所以使用exports;
  • 表示模块的接口，
    第一种：直接对exports添加属性，如exports.color = 'red';
    第二种：通过module来定义，module.exports.color = 'yellow';
    第三种：通过module来定义，module.exports = {color: 'orange'};
    第四种：通过return来定义，return {color:'green'};

我们在一个模块中定义接口的时候，只能使用一种，不能混用，后面的会覆盖前面的；

我们不可以直接对exports赋值新对象

main.js

define(function(require,exports,module){
    var a = require('header/header')
    console.log(a)
})

header.js

define(function(require,exports,module){
    exports.color = 'red'
})

注意：使用exports接口的header模块,require,exports,module三个参数必须写上；

第二种方式header.js：

define(function(require,exports,module){
    module.exports.color = 'red'
})

第三种方式header.js：

define(function(require,exports,module){
    module.exports={
        color:'blue'
    }
})

第四种方式header.js：

define(function(require,exports,module){
    return {
        color:'white'
    }
})

module

我们console.log(module)；
有四个属性：

  1. id 模块名 默认为路径一致 如果id不与uri一样则要分开引用
  2. uri 路径
  3. dependencies 依赖的模块 放在数组里
    deps 依赖的模块 放在对象里
  4. exports是我们返回的接口；

小案例

  • 项目根目录
    • index.html
    • js文件夹
      • main.js
      • sea.js
      • lib文件夹
        • dom.js
        • event.js
        • string.js

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="btn">猜一猜</button>
    <div id="out"></div>
    <script src="js/sea.js"></script>
    <script>
        seajs.use('main',function(){})
    </script>
</body>
</html>

main.js:

define(function(require,exports,module){
    var Evt = require('lib/event');
    var Dom = require('lib/dom');
    var Str = require('lib/string')
    var msg = 'i don\'t know'
    Evt.on('btn','click',function(){
        Dom.html('out',Str.upper(msg))
    })
})

dom.js

define(function(){
    var Dom = {
        g: function(id){
            return document.getElementById(id);
        },
        html:function(id,html){
            if(html){
                this.g(id).innerHTML = html;
            }else{
                return this.g(id).innerHTML;
            }
        }
    }
    return Dom;
})

event.js

define(function(require,exports,module){
    var Dom = require('lib/dom')
    var Evt={
        on: function(id,type,fn){
            Dom.g(id)["on"+type] = fn;
        }
    }
    return Evt;
})

string.js

define(function(){
    var Str = {
        upper:function(str){
            return str.toUpperCase();
        }
    }
    return Str;
})
require.async异步调用，跟use方法很像，我们在页面初始化使用use异步加载模块，在模块内部想实现模块的异步加载，就要用require.async方法；

案例一：
header.js:

define(function(require,exports,module){
    return {
        color:'white'
    }
})

main.js:

define(function(require,exports,module){
    var header = require('header/header')
    return {
        color: header.color
    }
})

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            height:100%;
        }
    </style>
</head>
<body>
    <script src="js/sea.js"></script>
    <script>
        seajs.use('main',function(main){
            console.log(main)
        })
    </script>
</body>
</html>

就可以得到header的color为white;

如果采用require.async(第一个参数为字符串也可以是数组，第二个参数是回调函数)，和use很像；

define(function(require,exports,module){
    // var header = require('header/header')
    var header = require.async('header/header',function(header){
        console.log(111,header)
    })
    return {
        color:header.color
    }
})
  • 再来看下面的代码：
var loadSkin = false;
    if(loadSkin){
        var skin = require('header/skin/shin')
    }else{
        var header = require('header/header')
    }

其实两个文件都会加载请求回来，但是skin打印是undefined
如果换成异步加载：

var loadSkin = false;
    if(loadSkin){
        var skin = require.async('header/skin/shin')
    }else{
        var header = require.async('header/header')
    }

可以看到不会执行的代码文件不会加载；

seajs.config({})

写在index.html seajs.use上面

seajs.config接收一个对象参数，用来配置一些选项参数的，接收一个对象，里面的属性值，就是我们配置的选项；

1. alias

alias:{
    util:'lib/unitl-2.0'
}

这个可以解决一个问题：lib里面版本库文件，如果在main.js,header.js等等一大堆文件中引用：

var util = require('lib/util-2.0');

如果一天这个文件升级到了2.1，那么就要去打开这些引用了它的文件去修改，就会造成麻烦，所以alias就是解决这个问题的；
在alias中把这个文件定义为util，在mainjs,headerjs等文件中要使用它，只需要

define(function(require,exports,module){
    var util = require('util');
    console.log(util)

})

这样如果文件版本升级，只需要更改alias里面的路径即可；

2. paths

paths:{
    m:'module/header'
}

如果我们要引用module/header下面的header.js

var header = require('module/header/header');

如果按照上面定义好了的路径，以后引用这个文件夹下的文件只需要：

var header = require('m/header')

3. vars

vars:{
    hd:'header'
}

如何使用：

// var a = require('module/header/skin/skin')

var a = require('module/{hd}/skin/skin')

如果：

vars:{
    hd:'header/skin'
}

则

var a = require('module/{hd}/skin')

通过{}来匹配

4. map

map:[
    ['.js','.min.js']
]

映射，把所有的js文件做匹配处理；
如果有文件打包后，文件名可能不同，可以通过这个来处理；

barnett_y
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript模块化开发之SeaJS
10-23
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制,本文给大家介绍JavaScript模块化开发之SeaJS，需要的朋友参考下
JavaScript 模块化开发实例详解【seajs、requirejs库使用】
10-15
主要介绍了JavaScript 模块化开发,结合实例形式详细分析了基于seajs、requirejs库的JavaScript模块化使用相关操作技巧,需要的朋友可以参考下
SeaJS模块化开发-基础篇
纸上得来终觉浅，绝知此事要躬行
01-05 528
1.开发背景 SeaJS是一个commonJS规范(CMD)的JavaScript模块加载机制,实现JavaScript的模块化开发及加载机制.在多人协作开发是,当你的项目越来越复杂并且需要引用的模块越来越多的时候,或者文件之间存在依赖关系的时候,这时候SeaJS就真正发挥大的作用了,方便多人合作中代码编写以及后期进行维护! 2.开发使用方法 1.第一步就是先下载seajs,在需要开发的项目
与seajs结合解决所有浏览器的跨域问题
LzwGlory的专栏
02-27 2443
/** * 包含跨域请求工具类 */ var RequestHelper = { GatewayURL : rbOws.real_path + "/anon_httpsindex.html", Busy : false, sendRequest : function(url, handler, $) { var protocol = location.protocol;
模块化开发之seajs
小施_za的博客
05-13 528
1、seajs的下载及配置 下载：由于seajs官网打不开，可百度搜索seajs下载，进行下载   配置：将下载后的sea.js文件添加到自己的网站目录下，如图： 2、seajs的引入 seajs的引入方式跟其他js文件的引入方式一样，通过script>标签的src引入，如下图： 3、seajs的使用 （1）定义模块 seaJs 模块与模块之间可以存在依赖关系。 模块的编写
JavaScript模块化开发库之SeaJS
xfxf996的博客
01-08 133
本文转载自：https://www.cnblogs.com/snandy/archive/2012/03/30/2423612.html 作者：snandy 转载请注明该声明。SeaJS由国内的牛人lifesinger开发。目前版本是1.1.1，源码不到1500行，压缩后才4k，质量极高。 这篇会讲述SeaJS的一些基本用法，不会面面俱到，但会就个人的理解讲述官方文档没有提到的一些细节。 ...
seaJs-模块化开发框架
baozhuona的博客
11-28 350
为什么需要模块化开发 模块化解决问题的原理 seaJs的基础语法 配置 易错点路径1.为什么需要模块化开发？当网站越来越复杂的时候，很容易遇到以下两个问题：命名冲突 文件依赖 js语言本身在解决这两个问题时有局限，而使用框架协助模块化开发就是很好的解决办法 2.模块化解决问题的原理 职责单一:每个模块实现单一的职责 匿名函数注入依赖：保证模块的独立性，也使得模块之间的依赖关系变得明显 3.seaJ
转: 模块化开发框架seajs简介
dayanwu2842的博客
04-15 55
JavaScript模块化开发库之SeaJSSeaJS由国内的牛人lifesinger开发。目前版本是1.1.1，源码不到1500行，压缩后才4k，质量极高。这篇会讲述SeaJS的一些基本用法，不会面面俱到，但会就个人的理解讲述官方文档没有提到的一些细节。 一、SeaJS的全局接口 SeaJS向全局公开了两个标识符： seajs 和 define。 如果你的项目中已经用了标识符seajs...
seajs模块化开发初探
macanfa的博客
01-03 995
使用seajs模块化开发,模块化，依赖，一切皆模块！
模块化开发规范:SeaJS
chenlinIT的博客
06-15 293
和RequireJS类似，SeaJS也是一个适用于 Web 浏览器端的模块加载器，由前淘宝员工玉伯开发，后由阿里，腾讯等共同维护，目前被国外公司收购，在国内使用相对较少。可以在 SeaJS 详细学习。对SeaJS我们来做简单的了解，掌握基本使用方法。 项目目录 |--CMD |--js |--libs |--sea.js ...
python爬虫数据可视化-10-where条件语句-模糊查询.ev4.rar
05-31
python爬虫数据可视化-10-where条件语句-模糊查询.ev4.rar
train.csv
最新发布
05-31
train
Golang(Gin框架)+websocket 实现的多人聊天室+代码+详细文档
05-31
Golang(Gin框架)+websocket 实现的多人聊天室+代码+详细文档
用于艾默生、维蒂APM300等UPS主机管理设置软件
05-31
用于艾默生、维蒂APM300等UPS主机管理设置软件
flink样例完整代码
05-31
flink样例完整代码
基于Java的养牛知识小程序源码.zip
05-31
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
模块化 cmd amd commonjs
03-25
模块化是一种将程序中的代码按照一定的规则拆分成独立的模块，使得代码的维护和复用更加方便的技术。在 JavaScript 中，有三种常见的模块化规范：CommonJS、AMD（Asynchronous Module Definition）和CMD（Common ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值