源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

SeaJS入门教程系列之使用SeaJS(二)

  • 时间:2021-05-11 15:49 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:SeaJS入门教程系列之使用SeaJS(二)
[b]下载及安装[/b] 要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置。 SeaJS项目目前托管在GitHub上,主页为 https://github.com/seajs/seajs/ 。可以到其git库的build目录下下载sea.js(已压缩)或sea-debug.js(未压缩)。 下载完成后放到项目的相应位置,然后在页面中通过<script>标签引入,你就可以使用SeaJS了。 [b]SeaJS基本开发原则[/b] 在讨论SeaJS的具体使用前,先介绍一下SeaJS的模块化理念和开发原则。 使用SeaJS开发JavaScript的基本原则就是:一切皆为模块。引入SeaJS后,编写JavaScript代码就变成了编写一个又一个模块,SeaJS中模块的概念有点类似于面向对象中的类——模块可以拥有数据和方法,数据和方法可以定义为公共或私有,公共数据和方法可以供别的模块调用。 另外,每个模块应该都定义在一个单独js文件中,即一个对应一个模块。 下面介绍模块的编写和调用。 [b]模块的定义及编写[/b] [b]模块定义函数define [/b]SeaJS中使用“define”函数定义一个模块。因为SeaJS的文档并没有关于define的完整参考,所以我阅读了SeaJS源代码,发现define可以接收三个参数:
[url=http://example/js/a.json?cb=func] 路径以”#”结尾时,如: 根据应用场景的不同,SeaJS提供了三个载入模块的API,分别是seajs.use,require和require.async,下面分别介绍。 [b]seajs.use[/b] seajs.use主要用于载入入口模块。入口模块相当于C程序的main函数,同时也是整个模块依赖树的根。上面在TinyApp小例子中,init就是入口模块。seajs.use用法如下:
[u]复制代码[/u] 代码如下:
//单一模式 seajs.use('./a'); //回调模式 seajs.use('./a', function(a) {   a.run(); }); //多模块模式 seajs.use(['./a', './b'], function(a, b) {   a.run();   b.run(); });
一般seajs.use只用在页面载入入口模块,SeaJS会顺着入口模块解析所有依赖模块并将它们加载。如果入口模块只有一个,也可以通过给引入sea.js的script标签加入”data-main”属性来省略seajs.use,例如,上面TinyApp的index.html也可以改为如下写法:
[u]复制代码[/u] 代码如下:
<!DOCTYPE HTML> <html lang="zh-CN"> <head>     <meta charset="UTF-8">     <title>TinyApp</title> </head> <body>     <p class="content"></p>     <script src="./sea.js" data-main="./init"></script> </body> </html>
这种写法会令html更加简洁。 [b]require[/b] require是SeaJS主要的模块加载方法,当在一个模块中需要用到其它模块时一般用require加载:
[u]复制代码[/u] 代码如下:
var m = require('/path/to/module/file');
这里简要介绍一下SeaJS的自动加载机制。上文说过,使用SeaJS后html只要包含sea.js即可,那么其它js文件是如何加载进来的呢?SeaJS会首先下载入口模块,然后顺着入口模块使用正则表达式匹配代码中所有的require,再根据require中的文件路径标识下载相应的js文件,对下载来的js文件再迭代进行类似操作。整个过程类似图的遍历操作(因为可能存在交叉循环依赖所以整个依赖数据结构是一个图而不是树)。 明白了上面这一点,下面的规则就很好理解了: 传给require的路径标识必须是字符串字面量,不能是表达式,如下面使用require的方法是错误的:
[u]复制代码[/u] 代码如下:
require('module' + '1'); require('Module'.toLowerCase());
这都会造成SeaJS无法进行正确的正则匹配以下载相应的js文件。 [b]require.async[/b] 上文说过SeaJS会在html页面打开时通过静态分析一次性记载所有需要的js文件,如果想要某个js文件在用到时才下载,可以使用require.async:
[u]复制代码[/u] 代码如下:
require.async('/path/to/module/file', function(m) {     //code of callback... });
这样只有在用到这个模块时,对应的js文件才会被下载,也就实现了JavaScript代码的按需加载。 [b]SeaJS的全局配置 [/b]SeaJS提供了一个seajs.config方法可以设置全局配置,接收一个表示全局配置的配置对象。具体使用方法如下:
[u]复制代码[/u] 代码如下:
seajs.config({     base: 'path/to/jslib/',     alias: {       'app': 'path/to/app/'     },     charset: 'utf-8',     timeout: 20000,     debug: false });
其中base表示基址寻址时的基址路径。例如base设置为 http://example.com/js/3-party/ ,则:
[u]复制代码[/u] 代码如下:
var $ = require('jquery');
会载入 http://example.com/js/3-party/jquery.js 。 alias可以对较长的常用路径设置缩写。 charset表示下载js时script标签的charset属性。 timeout表示下载文件的最大时长,以毫秒为单位。 debug表示是否工作在调试模式下。 [b]SeaJS如何与现有JS库配合使用[/b] 要将现有JS库如jQuery与SeaJS一起使用,只需根据SeaJS的的模块定义规则对现有库进行一个封装。例如,下面是对jQuery的封装方法:
[u]复制代码[/u] 代码如下:
define(function() { //{{{jQuery原有代码开始 /*!   * jQuery JavaScript Library v1.6.1  * http://jquery.com/  *  * Copyright 2011, John Resig  * Dual licensed under the MIT or GPL Version 2 licenses.  * http://jquery.org/license  *  * Includes Sizzle.js  * http://sizzlejs.com/  * Copyright 2011, The Dojo Foundation  * Released under the MIT, BSD, and GPL Licenses.  *  * Date: Thu May 12 15:04:36 2011 -0400  */ //... //}}}jQuery原有代码结束 return $.noConflict(); });
[b]SeaJS项目的打包部署[/b] SeaJS本来集成了一个打包部署工具spm,后来作者为了更KISS一点,将spm拆出了SeaJS而成为了一个单独的项目。spm的核心思想是将所有模块的代码都合并压缩后并入入口模块,由于SeaJS本身的特性,html不需要做任何改动就可以很方便的在开发环境和生产环境间切换。但是由于spm目前并没有发布正式版本,所以本文不打算详细介绍,有兴趣的朋友可以参看其github项目主页 https://github.com/seajs/spm/。 其实,由于每个项目所用的JS合并和压缩工具不尽相同,所以spm可能并不是完全适合每个项目。在了解了SeaJS原理后,完全可以自己写一个符合自己项目特征的合并打包脚本。  
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部