上个月学了 require.js

现在顺便来学学 sea.js.

对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧.

seajs中的所有 JavaScript 模块都遵循 CMD 模块定义.

在 CMD 规范中,一个模块就是一个文件.

主要API有

define

define(factory);

//  define 用来定义模块  factory 可以是一个函数,也可以是一个对象或字符串.

define({"foo":"bar"});

define("This is a string.");

//  当 factory 为 函数时,表示模块的构造方法.执行该构造方法可以得到模块向外提供的接口.

//  factory 方法执行时,默认传入三个参数: require,exports 和 module;

define(function(require,exports,module){

  // 模块代码

});

//  define还能接收两个以上参数.

//  id 为 字符串,是 模块标识, deps 为 数组,是依赖的模块

//  该方式不属于 CMD 规范

define(id,[deps],function(require,exports,module){

  // 模块代码

});

define.cmd  // 用来检测是否有 CMD 模块加载器

require

//  require 是 factory 函数的第一个参数,也是一个方法.用来接收 模块标识

require(id)

require.async(id,callback?)

//  require 是同步往下执行, require.async 是异步回调执行,一般用来加载可延迟异步加载的模块

exports

//  exports 是一个对象,用来向外提供模块接口

module

//  module 也是一个对象,存储了当前模块的一些属性和方法

常用的 API 有 define,require,require.async,exports,module.exports 这五种.

关于seajs的配置

seajs.config({

  //  别名配置

  alias:{

    "jquery":"./jquery"

  },

  //  require('jquery') => 加载的是 ./jquery.js

  //  路径配置

  paths:{

    "jquery":"./jquery"

  },

  //  require('jquery/jquery') => 加载的是 ./jquery/jquery.js

  //  变量配置

  vars:{

    "locale":"zh-cn"

  },

  //  require('./common/{locale}.js') => 加载的是 ./common/zh-cn.js

  

  //  映射配置

  map:[

    ['.js' , '-min.js']

  ],

  //  require('./jquery'); => 加载的是 jquery.min.js

  

  //  预加载项

  preload:[

    this.JSON ? '' : 'json'

  ],

  //  当 this.JSON 为空时,加载 json 模块

  //  调试模式

  debug:true,

  //  开启调试时,不会删除动态插入的 script 标签

  //  基础路径

  base:"./base/",

  //  文件编码

  charset:"utf-8"

});

//  seajs.config 可以多次运行,每次运行都会合并当前操作, 如果存在则覆盖


在项目中利用 seajs

目录结构为

│ .gitignore
│ gulpfile.js
│ package.json
│ README.md

├─app
│   index.html
│   seajsConfig.js

├─debug
│ └─js
│ │ main.js
│ │
│ ├─forum
│ │ detail.js
│ │ index.js
│ │ post.js
│ │
│ ├─main
│ │ index.js
│ │ str.js
│ │
│ ├─other
│ │ │ swiper-3.2.7.jquery.min.js
│ │ │
│ │ ├─jquery
│ │ │ jquery.js
│ │ │
│ │ └─seajs
│ │ sea.js
│ │
│ └─user
│ index.js
│ user.js

  app文件夹下的 index.html引用 seajs 和 入口文件

<script src="./js/other/seajs/sea.js"></script>
<script src="./seajsConfig.js"></script>

  将 seajs 一些配置写在入口文件里

if(location.href.indexOf('?dev') > 0){
// 根据字段判断是否进入调试模式
seajs.config({
base:"../debug/js",
debug:true,
});
}else{
// 进入发布状态
seajs.config({
base:"./js",
map:[
['.js','.min.js']
],
});
} seajs.config({
// 路径配置
paths:{
'user':'user',
'forum':'forum',
'main':'main'
},
// 别名配置
alias:{
'jquery':'other/jquery/jquery',
'swiper':'other/swiper-3.2.7.jquery',
}
}) seajs.use('main/index');
seajs.use('forum/index');

  debug/js/main/index.js

define(function(require){
// require 添加依赖
     //   依赖先加载所以先输出 str 里的 console.log
var str = require('main/str');
var swi = require('swiper');
console.log('这是在 main/index 里');
console.log(str);
});

  debug/js/main/str.js

define(function(require,exports,module){
// 通过 module.exports 输出内容
module.exports = "这是一个 STR";
// 或者 通过 exports 暴露部分内容
// exports.str1 = "这是 str 1";
// exports.str2 = "这是 str 2";
    console.log("这是在 main/str 里");
});

   打开 index.html,将会发现依赖是已经按顺序加载并执行

  可以看到 js 都会按顺序加载并执行.

为什么需要打包?

  可以看到上面的例子里, 网页将会加载更多的 js 文件,造成更多的响应,反而会拖慢网站的速度.为此我们需要将其打包起来.

  本例中采用 gulp 和 gulp-seajs-pack 去打包这些js

'use strict';

var gulp = require('gulp');
var pack = require('gulp-seajs-pack'); gulp.task('default',function(){
console.log('test')
}); gulp.task('seajs',function(){
var config = {
// 设置要打包的目录
base:"./debug/js",
paths:{
'user':'user',
'forum':'forum',
'main':'main'
},
alias:{
'jquery':'other/jquery/jquery',
'swiper':'other/swiper-3.2.7.jquery',
},
output:[
//"first/index.js"
]
};
return gulp.src([
"./debug/js/**/*.js",
// 第三方包
"!./debug/js/other/**/*.js"
])
// 选择 打包目录下的所有JS
.pipe(pack(config))
// 开始打包
.pipe(gulp.dest("./app/js"));
// 将打包后的 JS 输出到 目标目录里
});

  然后执行

$ gulp seajs

  即可完成打包.

  生成的目录如下:

├─forum

│ detail.js
│ index.js
│ post.js

├─main
│ index.js
│ str.js

└─user
index.js
user.js

  文件还是太大,先进行压缩

var rename = require('gulp-rename');
var uglify = require('gulp-uglify'); gulp.task('web-js-ug',function(){
gulp.src([
"./debug/js/other/**/*.js",
"./app/js/**/*.js",
"!./app/js/**/*.min.js",
"!./app/js/other/**/*.js",
])
.pipe(gulp.dest('./app/js'))
.pipe(uglify())
.pipe(rename({
extname:".min.js"
}))
.pipe(gulp.dest('./app/js'))
});

  执行

$ gulp web-js-ug

  再刷新  index.html 时,

这样就算打包完毕.

项目地址在 GitHub

sea.js 入门的更多相关文章

  1. Sea.js入门

    本文只是seajs的入门贴.要详细了解,请看GitHub主页上的相关链接,精彩不断,精选几篇: 前端模块化开发的价值 前端模块化开发的历史 ID和路径匹配原则 与RequireJS的异同 模块的加载启 ...

  2. Sea.Js使用入门

    1.Sea.Js是什么 seajs相对于RequireJs与LabJS就比较年轻,2010年玉伯发起了这个开源项目,SeaJS遵循CMD规范,与RequireJS类似,同样做为模块加载器.示例 // ...

  3. sea.js 个人入门

    玉伯 : http://seajs.org/docs/ 说这两个JS 必须提到AMD.commonjs两种不同的规范: 奇舞团:http://www.75team.com/archives/882 知 ...

  4. 深入学习sea.js

    入门学习了文档之后,在深入学习里面的一些有趣的知识点 =================================== 一.配置 seajs.config({ alias:( a3:'./js/ ...

  5. sea.js模块化编程

    * 为什么要模块化? 解决文件依赖 解决命名冲突 ; var var2 = 2; function fn1(){ } function fn2(){ } return { fn1: fn1, fn2: ...

  6. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  7. 解决sea.js引用jQuery提示$ is not a function的问题

    在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...

  8. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  9. Ember.js入门教程、博文汇总

    第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...

随机推荐

  1. php自学提升进阶路线

    为了自己对php的系统全面深入的掌握,我通过个人经验,以及搜索网上高手经验,汇总了一份php自我学习路线规划,包括实战演练.学习建议.高手进阶.常见问题和测试总结五块.算是一个系统的学习计划和目标吧. ...

  2. python 发邮件-带附件-文本-html

    #!/usr/bin/python # encoding=utf-8 # Filename: send_email.py from email.mime.image import MIMEImage ...

  3. 长文丨papi、咪蒙、罗胖之后,内容创业的机会在哪儿

    一.内容的一年 app死了,内容永生! 2016年,创业圈画风突变,昨天还在激辩java和PHP谁更好的技术宅们.还在梦想着成为第二个乔布斯改变世界的产品狗们.还在忽悠着用O2O横扫传统行业的小老板们 ...

  4. C#如何利用QQ邮箱SMTP发送邮件

    public void SendEmail() { MailMessage msg = new MailMessage(); msg.To.Add("to@qq.com");//收 ...

  5. android APK 文件的生成过程

    步骤: 1. 用 aapt工具生成R文件aapt  package  -m -J  gen目录 -M AndroidManifest.xml  -S res目录  -I 编译版本sdk的android ...

  6. 基于Three.js的360X180度全景图预览插件

    基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10  HTML5中国 原文  http://www.html5cn.org/article-8621-1 ...

  7. U-boot的目录结构及spl功能

    转 http://tieba.baidu.com/p/2836672721 对uboot-2010.06及其以后的版本,将体系结构相关的内容合并,增加include文件夹,分离出通用库文件lib,其各 ...

  8. Java基础语法目录

    一.Java相关科普知识1.Java的发展历程2.Java的发展方向3.Java的体系特性二.Java第一个程序1.JavaJDK的安装与环境的配置2.记事本开发Java程序的注意事项与常见问题3.J ...

  9. mysql中的模糊查询

    转载自:http://www.letuknowit.com/archives/90/ MySQL中实现模糊查询有2种方式:一是用LIKE/NOT LIKE,二是用REGEXP/NOT REGEXP(或 ...

  10. Flask最佳实践

    https://zhuanlan.zhihu.com/p/22774028?refer=python-cn