JavaScript模块化开发之SeaJS(2)

<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>TinyApp</title> </head> <body> <p></p> <script src="https://www.jb51.net/article/sea.js" data-main="./init"></script> </body> </html> require

require是seajs主要的模块加载方法,当在一个模块中需要用到其他模块时一般用require加载:

var m=require('./a'); require.async

上文说过seajs会在html页面打开时通过静态分析一次性记载所有需要的js文件,如果想要某个js文件在用时才加载,可以使用require.async。

这样只有在用到这个模块时,对应的js文件才会被下载,也就实现了JavaScript代码的按需加载。

SeaJS的全局配置

seajs提供了一个seaj.configd的方法可以设置全局配置,接收一个表示全局配置的配置对象,具体方法如下:

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

其中,

•base表示基址路径
 •alias可以对较长的常用路径设置缩写
 •charset表示下载js时script标签的charset属性。
 •timeout表示下载文件的最大时长,以毫秒为单位。

Seajs如何与现有的JS库配合使用

要将现有的JS库与seajs一起使用,只需根据seajs的模块定义规则对现有库进行一个封装。例如,下面是对jQuery的封装方法:

define(function(){ /* 此处为jquery源码 */ })

一个完整的例子:

上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾。这个例子包含如下文件:
 •index.html 主页面

•sea.js
 •jquery.js
 •init.js init模块,入口模块,依赖data、jquery、style三个模块,又主页面载入
 •data.js data模块,纯json数据模块
 •style.css css样式表

html: <!DOCTYPE HTML> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <p></p> <p><a href="#">Blog</a></p> </div> <script src="https://www.jb51.net/article/sea.js"></script> <script> seajs.use('init'); </script> </body> </html> javascript: //init.js define(function(require, exports, module) { var $ = require('./jquery'); var data = require('./data'); var css = require('./style.css'); $('.author').html(data.author); $('.blog').attr('href', data.blog); }); //data.js define({ author: 'ZhangYang', blog: 'http://blog.codinglabs.org' }); css: .author{color:red;font-size:10pt;} .blog{font-size:10pt;}

请注意:

1.请讲jquery.js源码文件包含在seajs模块加载代码中;

2.在Sea.js < 2.3.0版本之前是可以加载css文件的,新版本中此功能移除,为了兼容考虑,加载css功能将作为一个插件存在。

使用方法

•可以在sea.js标签后引入这个插件使用
 •也可以将插件代码混入sea.js当中
 •和seajs-style的区别 •seajs-css是使 Sea.js 能够加载一个css文件,和link标签一样
 •seajs-style是指提供一个seajs.importStyle方法用于加载一段 css 字符串

以上内容是小编给大家分享的JavaScript模块化开发之SeaJS,希望对大家学习javascript模块化开发有所帮助,谢谢大家一直以来对脚本之家网站的支持。!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzyfd.html