通过seajs实现JavaScript的模块开发及按模块加载


Posted in Javascript onJune 06, 2019

seajs实现了JavaScript 的 模块开发及按模块加载。用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载。

首先看看seajs是怎么进行模块开发的。使用seajs基本上只有一个函数“define”

fn.define
= function(id,
deps, factory) {
//code of function…
}

使用define函数来进行定义一个模块,根据 CMD (Common Module Definition)模块定义规范。一个文件就是一个模块。所以一个js文件中只有一个define,即一个文件是一个模块,SeaJS中模块的概念有点类似于面向对象中的类——模块可以拥有数据和方法,数据和方法可以定义为公共或私有,公共数据和方法可以供别的模块调用。

官方实例中,define只传入一个参数: 一个工厂函数

define(function(require,
exports, module) {
//code of the module...
});

在看参数之前,我们先看看define是如何处理参数的:

fn.define = function(id, deps, factory)

define可以接收的参数分别是模块ID,依赖模块数组及工厂函数;

如果只有一个参数,则赋值给factory。

如果有两个参数,第二个赋值给factory;第一个如果是array则赋值给deps,否则赋值给id。

如果有三个参数,则分别赋值给id,deps和factory。

根据官方实例,建议还是根据官方的来就传递一个参数,即只有factory参数,这样的话模块id默认为js文件路径。

在来看看工厂函数的参数:

require, exports, module

  • require——模块加载函数,用于记载依赖模块。通过这个参数来进行对其他模块的加载。
  • exports——接口点,将数据或方法定义在其上则将其暴露给外部调用。通过这个参数,来将这个模块的方法进行暴露
  • module——模块的元数据。其是一个对象,有属性:
    • module.id——模块的ID。
    • module.dependencies——一个数组,存储了此模块依赖的所有模块的ID列表。
    • module.exports——与exports指向同一个对象。

使用factory的参数的使用:

define(function(require,
exports, module) {
var a = require('./a');//引入a模块 
exports.fun2= function(){
alert("fun2");
a.dosomething();
} 

}

使用require对象来进行加载模块,其实使用正则表达式进行验证加载的,所以其参数必须是特定的字符串,不能是表达式。

seajs会自动在require的参数中加入".js"来进行加载,即不需要写上后缀名,但是在某些情况下,seajs不会为其添加“.js”:

1.载入css:

require("./module1-style.css");

2.路径中含有“?”: 

require(<a href="http://example/js/a.json?b=func" rel="external nofollow" >http://example/js/a.json?cb=func</a>);

3.路径以“#”结尾:

require(http://example/js/a.json#);

使用exports来向外部暴露方法,或者属性。暴露属性有几种方式,如上面中的例子是一种方式,另外还有:

使用return:

define(function(require)
{
var data1 = 1; //私有数据
var func1 = function() { //私有方法
returna.run(data1);
}
//暴露
return{
data2: 2,
func2:function() {
return'hello';
}
}; 
});

直接返回json对象:

define({
data: 1,
func:function() {
return'hello';
}
});

页面中调用seajs

前面说了seajs用来解决模块开发,和繁琐的文件依赖问题,所以所有的文件依赖都是通过require对象进行加载,或者可以使用require.async(“./a”)来进行异步加载,即当使用到的时候才进行加载,

注:无论是require()还是require.async()都可以有第二个参数为回调函数,当文件加载成功时调用:

require.async('/path/to/module/file',function(m) {
//code of callback...
});

有了这个加载依赖的方式,我们无需再页面上书写大量的<script ></script>标签,而仅仅使用一个

<script src="./sea.js" data-main="./init"></script>

即可,其中data-main="./init" 为入口模块,表示加载这个模块,在进行迭代加载其所依赖的模块,使用这个属性可以省略seajs.use。这个后面说。

使用seajs.config进行全局配置:

seajs.config({
base:'path/to/jslib/',
alias: {
'app':'path/to/app/'
},
charset:'utf-8',
timeout: 20000,
debug:false
});

这是对seajs进行全局配置,

base表示基址寻址时的基址路径

alias可以对较长的常用路径设置缩写。

charset表示下载js时script标签的charset属性。

timeout表示下载文件的最大时长,以毫秒为单位。

debug表示是否工作在调试模式下。

使用seajs.use 载入入口模块,相当于java的main函数,

//单模块模式
seajs.use('./a');
//回调模式
seajs.use('./a',function(a)
{
a.dosomething();
});
//多模块模式
seajs.use(['./a','./b'],function(a,
b) {
a.dosomething();
b.dosomething();
});

下面可以看其官方给的simple例子中的页面怎么写的,基本上就明白了sea.js 是怎么用的了:

<script src="../sea-modules/seajs/seajs/2.2.0/sea.js"></script>
<script>
// Set configuration
seajs.config({
base: "../sea-modules/",
alias: {
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
});
// For development
if (location.href.indexOf("?dev") > 0) {
seajs.use("../static/hello/src/main");
}
// For production
else {
seajs.use("examples/hello/1.0.0/main");
}
</script>

//mian.js

//hello/mian.js
define(function(require) {
var Spinning = require('./spinning');
var s = new Spinning('#container');
s.render();
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js控制div及网页相关属性的代码
Dec 19 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
小试小程序云开发(小结)
Jun 06 #Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 #Javascript
微信小程序如何使用globalData的方法
Jun 06 #Javascript
详解微信小程序开发(项目从零开始)
Jun 06 #Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 #Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 #jQuery
JS根据json数组多个字段排序及json数组常用操作
Jun 06 #Javascript
You might like
php使用PDO方法详解
2014/12/27 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
php读取本地json文件的实例
2018/03/07 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
DIV菜单层实现代码
2010/11/19 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
Django 内置权限扩展案例详解
2019/03/04 Python
python元组的概念知识点
2019/11/19 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
python用Configobj模块读取配置文件
2020/09/26 Python
Python使用Pygame绘制时钟
2020/11/29 Python
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
民政工作个人总结
2015/02/28 职场文书
公积金贷款承诺书
2015/04/30 职场文书
结婚仪式主持词
2015/06/29 职场文书
高中班长竞选稿
2015/11/20 职场文书
Nginx的基本概念和原理
2022/03/21 Servers
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python