时间:2021-05-25
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
使用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>标签,而仅仅使用一个
即可,其中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 configurationseajs.config({base: "../sea-modules/",alias: {"jquery": "jquery/jquery/1.10.1/jquery.js"}});// For developmentif (location.href.indexOf("?dev") > 0) {seajs.use("../static/hello/src/main");}// For productionelse {seajs.use("examples/hello/1.0.0/main");}</script>//mian.js
//hello/mian.jsdefine(function(require) {var Spinning = require('./spinning');var s = new Spinning('#container');s.render();});以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaSc
SeaJS是由玉伯开发的一个遵循CommonJS规范的模块加载框架,可用来轻松愉悦地加载任意JavaScript模块和css模块样式。SeaJS非常小巧,小巧在
1.Seajs简介Seajs,一个Web模块加载框架,追求简单、自然的代码书写和组织方式,:Sea.js遵循CMD规范,模块化JS代码。依赖的自动加载、配置的简
本文实例讲述了SeaJS中use函数用法。分享给大家供大家参考,具体如下:有了define等模块定义规范的实现,我们可以开发出很多模块。但光有一堆模块不管用,我
在ES6前,前端就使用RequireJS或者seaJS实现模块化,requireJS是基于AMD规范的模块化库,而像seaJS是基于CMD规范的模块化库,两者都