模块化开发一 seajs

2023-12-18 23:32
文章标签 开发 模块化 seajs

本文主要是介绍模块化开发一 seajs，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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文件做匹配处理；
如果有文件打包后，文件名可能不同，可以通过这个来处理；

这篇关于模块化开发一 seajs的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/510148。

相关文章

Spring Security基于数据库的ABAC属性权限模型实战开发教程

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》：本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA
阅读更多...
使用Python开发一个简单的本地图片服务器

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经
阅读更多...
Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...
Python基于wxPython和FFmpeg开发一个视频标签工具

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优
阅读更多...
利用Python开发Markdown表格结构转换为Excel工具

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark
阅读更多...
利用Go语言开发文件操作工具轻松处理所有文件

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具？核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件
阅读更多...
基于Python开发批量提取Excel图片的小工具

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求，就是批量读取当前目录下所有文件夹里的Excel文件，去获取出Excel文件中的图片，并
阅读更多...
kotlin中的模块化结构组件及工作原理

kotlin中的模块化结构组件及工作原理

《kotlin中的模块化结构组件及工作原理》本文介绍了Kotlin中模块化结构组件,包括ViewModel、LiveData、Room和Navigation的工作原理和基础使用,本文通过实例代码给大家... 目录ViewModel 工作原理LiveData 工作原理Room 工作原理Navigation 工
阅读更多...
基于Python开发PDF转PNG的可视化工具

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图
阅读更多...
基于Python开发PDF转Doc格式小程序

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序，采用T
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2