标签：image 静态 height 简化 写法 doc pac 项目 任务
首先，不说废话，它的介绍和作者就不在多说了，网上一百度一大堆；
我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑，和实现的一个小demo(纯属为了实现，高手请绕道);
一、环境工具及安装
1、首先，务必先说明，本demo是基于nodeJs环境下开发的，因此要安装nodeJs（地址：https://nodejs.org/en/）；
2、接下来安装gulp： 在第一步成功的情况下，安装gulp构建工具，并且将其依赖到项目进来；同时需要安装browser-sync，gulp-seajs-combo ,run-sequence ,且也将它们依赖到项目进来；
成功后package.json有如下依赖：
...
"gulp": "^3.9.1",
"browser-sync": "^2.16.0",
"gulp-seajs-combo": "^1.2.3",
"run-sequence": "^1.2.2"
...
3、到seaJs 官网下载个seaJs（地址：http://seajs.org/docs/#downloads），版本在2.1以上的都可以；下载后解压，将里面的dist文件拷贝到项目，并重命名为seajs;
到这里需要下载安装的东西就差不多了，项目的目录结构先贴出来给大家：
二、seajs的引入及配置说明；
1、html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>引用seajs</title>
<style type="text/css">
html,body{
position: relative;
height: 100%;
}
#hello-seajs{
position: absolute;
width: 300px;
height: 100px;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
font-size: 26px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id="hello-seajs">Hello seaJs</div>
<input type="text" id="ipt">
</body>
<script src="../sea-module/seajs/sea.js"></script>
<script src="../config.js"></script>
<script src="../static/js/main.js"></script>
</html>
首先，看到页面底部的3个js文件引入：
第一个，先引入sea.js这个没有什么好说的；
第二个，引入seajs的基础配置文件config.js；这里要说一下，我们在项目中经常会用到jquery库，因此，我也顺便引入了，当然，是因为这里有个坑，要跟大家说一下。
因为seajs是玉伯大人基于CMD规范开发出来的，因为其js代码则要遵循此规范；然而不幸的是网上下载的jquery并不支持CMD规范，（在后来1.7版本以后支持的是AMD规范），因此，网上各种大神也对jquery的引入也提供了好几种方法，这里，我是用的方法是，将jquery文件修改一下：
即将&&define.amd删除掉即可，然后后我还重命名为jquery.sea.js,表示seaJs可以用的jquery版本；
至于配置文件，具体的配置项官网讲的很详细,这里我只说下，我的demo里面的配置
seajs.config({
base: "./sea-module/",
alias: {
"jquery": "jquery/jquery.sea.js"
}
})
base，即为设置sea.js的基础路径;
alias,则是用来简化模块的别名，如"jquery": "jquery/jquery.sea.js" , 在别的模块引入的时候就可以直接写成require(‘jquery‘)了，当然这个过程seajs会去基础目录base下找；
第三个，引入入口文件；
这里也有一个坑，当时我一开始搜索到一篇文章的时候，是用另一种方式引入的；是在引入sea.js的时候再标签里面写了个data-main属性，如下：
<script src="sea/sea.js" data-config="./js/config" data-main="./js/main"></script>
大家切记，这货已经过时 ，seajs在2.1版本的更新: 去除对 data-config / data-main 的支持。 这两个是锦上添花的功能。保留着，看似能带来简洁性，但一定程度上掩盖了内部机制。不如让用户直接通过 seajs.use 去启动加载的好。
因此，不要在用这样的写法了。
我们直接在入口文件mian.js 里面seajs.use（），然后在页面引入即可，这里通过 use()方法 ,来在页面中加载模块，它会告诉页面先加载哪一个模块；
第四个，模块间的引用；
这里我写了2个js模块： application.js , util.js , 前者引入后者
application.js
define(function(require,exports,module){
var util = require(‘./util‘);
var $ = require(‘jquery‘);
function changeBg(){
$(‘#hello-seajs‘).css({
‘backgroundColor‘ : util.randomColor()
});
}
changeBg()
window.setInterval(function(){
changeBg();
},1500);
});
util.js
define(function(require,exports,module){ var util = {}; var colorRange = [‘0‘,‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘,‘8‘,‘9‘,‘A‘,‘B‘,‘C‘,‘D‘,‘E‘,‘F‘]; util.randomColor = function(){ return ‘#‘ + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)]; }; module.exports = util; });
这里就不用多讲了，代码很清晰；
三、gulp的配置
gulpfile.js
//插件引入
var gulp = require(‘gulp‘); var browserSync = require(‘browser-sync‘).create(); var combo = require(‘gulp-seajs-combo‘); var runSequence = require(‘run-sequence‘); //定义文件目录路径 var appDir = ‘app‘;
var distDir = ‘dist‘; //js模块合并
gulp.task(‘js‘,function(){ gulp.src(‘app/static/js/main.js‘) .pipe(combo({ ignore: [‘jquery‘] })) .pipe(gulp.dest(‘./dist/static/js‘)); }) // 创建静态服务器 gulp.task(‘server‘, function () { browserSync.init({ server: { baseDir: [distDir, appDir], index: ‘html/test.html‘ } }); }); // 监听文件改变 gulp.task(‘watch‘ , function () { gulp.watch(‘app/static/js/application.js‘, [‘js‘]); }); //任务的工作流启动 //step1 --build 生产目录 dist/ gulp.task(‘build‘, function(cb){ runSequence(‘js‘ , cb); }); //step2 --开启服务器，实时监听
gulp.task(‘default‘, function(cb){ runSequence(‘server‘ , ‘watch‘ , cb); });
这里需要说明一下：
1、Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面（所谓的释放你的F5）,还能同时在PC、平板、手机等设备下进项调试，强烈推荐各位前端er使用；在本demo中，使用它创建了个静态服务器，http://localhost:3000;并且，监听appliction.js文件的变化，当我们修改appliction.js并保存的时候，就会被监听到其变化，重新执行js任务生成新的mian.js到dist目录下，最后浏览器自动刷新；就是这么爽！
2、gulp-seajs-combo，用来合并我们的js模块文件。想想，当我们js模块多的时候，页面请求的数量也就随之大大增加，这个是我们前端的一个忌讳，优化页面的时候，就要减少请求数；所以这里，提供了个插件，gulp-seajs-combo，他可以帮我们把所有模块合并到一个main.js模块上去；这样，页面最后只需要引入main.js文件即可，完美的解决了这个问题；
3、最后进入项目根目录，在命令行里输入‘"gulp build" (生成dist目录)，就生成生产环境；然后输入 "gulp" 开启服务器，自动打开页面test.html;
四、项目git地址
https://github.com/931863856/seajs
结束语：
本文是我这两天兴起，就抽空研究了下seaJs；虽然这只是个小demo，但是也真的踩了不少坑；其实前端现在潮流就是，自动化构建，模块化开发，所有才下了决心写个小demo，希望对大家有用；同时毕竟这是我的一个小小的研究，漏洞肯定是存在的，希望各位大神看到的时候，可以给小弟提醒或者指正下，感激不尽！谢谢大家~
标签：image 静态 height 简化 写法 doc pac 项目 任务
原文地址：http://www.cnblogs.com/luleixia/p/6192827.html
