Web全栈笔记之Nojs.js第二章

模块化开发

模块的规范

目前，通行的Javascript模块规范共有两种：CMD和AMD。
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。目前这些规范的实现都能达成浏览器端模块化开发的目的。

 1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）

 2. CMD 推崇依赖就近，AMD 推崇依赖前置。看代码：
 ```

##### CMD

define(function(require, exports, module) {
var a = require(‘./a’)
a.doSomething()
// 此处略去 100 行
var b = require(‘./b’) // 依赖可以就近书写
b.doSomething()
// …
})

##### AMD 默认推荐的是

define([‘./a’, ‘./b’], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
…
})

虽然 AMD 也支持 CMD 的写法，同时还支持将 require 作为依赖项传递，
但 RequireJS 的作者默认是最喜欢上面的写法，也是官方文档里默认的模块定义写法。

##### Sea.js
起初被看作是一门玩具语言的JavaScript，最近已经发生了很大的变化。变化之一就是从HTML中的<script>标签转向了模块化。

模块化

  模块基本上就是一个包含了所有你定义的函数和变量的文件。

```
 <script src="./a.js"></script>
<script src="./b.js"></script>

可以看到，JavaScript这种通过全局共享的方式确实可以实现模块化，你只需要在HTML中引入需要使用的模块脚本即可。
但这样的模块化有两个很实在的问题：

1、必须通过全局变量共享模块，有可能会出现命名冲突的问题；

2、依赖的文件必须手动地使用标签引入到页面中。

Sea.js提供了一个全局方法——define，用来定义一个CMD模块。

define(factory)：factory是这样一个函数function (require?, exports?, module?) {}，
如果模块本身既不依赖其他模块，也不提供接口，require、exports和module都可以省略。
// 所有模块都通过 define 来定义
define(function(require, exports, module) {
  // 通过 require 引入依赖
  var $ = require('jquery');
  var test= require('./test);

  // 通过 exports 对外提供接口
  exports.test = test

  // 或者通过 module.exports 提供整个接口
  module.exports = ...

});
obj = require("a")

seajs 的简单配置

seajs.config({
  base: "../sea-modules/",
  alias: {
    "jquery": "jquery/jquery/1.10.1/jquery-3.0.0.min.js"
  }
})


// 加载入口模块
seajs.use("../static/hello/src/main")

requirejs的使用

在html中引入requirejs

在HTML中，添加这样的

<script src="js/require.js" data-main="js/config.js"></script>

通常使用requirejs的话，我们只需要导入requirejs即可，不需要显式导入其它的js库，因为这个工作会交给requirejs来做。

属性 data-main 是告诉requirejs：你下载完以后，马上去载入真正的入口文件。它一般用来对requirejs进行配置，并且载入真正的程序模块。

在config.js中配置requirejs

config.js 中通常用来做两件事：
1.配置requirejs 比如项目中用到哪些模块，文件路径是什么
2.载入程序主模块
requirejs.config({
  baseUrl: '/js',
  paths: {
    jq: 'jquery.1.12.1'
  }
});

requirejs(['jq'], function($) {
  $("div").css();
});

在 paths 中，我们声明了一个名为 app 的模块，以及它对应的js文件地址。
在最理想的情况下， app.js 的内容，应该使用requirejs的方式来定义模块

define: 定义一个模块;
define(["jquery","show"], function($,show) {
  return {
    hello: function() {
        show()
      alert("hello, app~");
    }
  }
});

shim将某个依赖中的某个全局变量暴露给requirejs，当作这个模块本身的引用。

requirejs.config({
  baseUrl: '/public/js',
  paths: {
    hello: 'hello'
  },
  shim: {
    hello: { exports: 'hello' }
  }
});

requirejs(['hello'], function(hello) {
  hello();
});

*/

什么Gulp

gulp 是基于 Nodejs 的自动任务运行器，能自动化地完成文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单.

创建目录结构

建立如下目录结构，gulp 作为我们的项目根目录。

gulp/
├── app/
│   ├── sass/
│   │   └─ style.css
│   ├── js/
│   │   └─ my.js
│   └── index.html
├── www/
└── release/

首先我们要全局安装一遍：

cnpm install -g gulp

运行时注意查看命令行有没有错误信息，安装完成后，你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。

gulp -v
 ```
##### 接着我们要进去到项目的根目录再安装一遍

cnpm install gulp –save-dev(在目录安装无需–save-dev)

##### 我们将要使用Gulp插件来完成我们以下任务：

1、less的编译（gulp-less）
2、自动添加css前缀（gulp-autoprefixer）
3、压缩css（gulp-minify-css）
4、压缩js代码（gulp-uglify）
5、打包文件 require(‘gulp-zip’);
6、开启服务器 自动刷新 启动浏览器require(‘gulp-webserver’);
7、require(“amd-optimize”);AMD模块构建
8、require(‘gulp-concat’);合并JS
可以一次安装cnpm install 以空格分开

##### 接着我们要创建一个gulpfile.js在根目录下

gulp只有四个API：task，watch，src，和 dest

task：这个API用来创建任务，在命令行下可以输入 gulp test 来执行test的任务。

watch：这个API用来监听任务。

src：这个API设置需要处理的文件的路径，可以是多个文件以数组的形式.css]，也可以是正则表达式/*/.scss。[main.scss, vender

dest：这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。

gulp自动化配置

var gulp = require(“gulp”);//请求gulp
var less = require(“gulp-less”)//调用编译less文件模块
var server = require(“gulp-webserver”)//开启服务器模块
var minify = require(“gulp-minify-css”)//压缩css
var amd = require(“amd-optimize”)//amd构造
var concat = require(“gulp-concat”);//合并js
var uglify = require(“gulp-uglify”);//压缩js
var zip = require(“gulp-zip”)//打包文件
//开启服务器
gulp.task(‘server’, function(){
gulp.src(‘./www/’)
.pipe(server({
root:”./www”, // 监听文件夹
livereload: true, // 实时刷新页面
directoryListing: false, // 关联文件(false) 还是 文件夹 (true)
open: true, // 打开浏览器
}));
})
//把less文件编译为正常的css文件到www目录下
gulp.task(“less”,function(){//
gulp.src(“./app/css/*.less”)
.pipe(less())//调用less()编译less
//.pipe(minify())//调用minify()把css压缩
.pipe(gulp.dest(‘./www/css’))//dest设置生成文件的路径
})
//把html文件传到www目录下
gulp.task(“html”,function(){
gulp.src(“./app/*.html”).pipe(gulp.dest(“./www”))
})
//把js文件传到www目录下
gulp.task(“js”,function(){
gulp.src(“./app/js/*.js”).pipe(gulp.dest(“./www/js”))
})
//传输图片
gulp.task(‘img’,function(){
gulp.src(‘./app/img/*’).pipe(gulp.dest(‘./www/img’));
});
//watch监听
gulp.task(“watch”,function(){
//监听./app/*.html目录下发生改变的时候 执行html这个命令
gulp.watch(“./app/*.html”,[“html”]);
//监听./app/*.html目录下发生改变的时候 执行less这个命令
gulp.watch(“./app/css/*.less”,[“less”]);
})
//amd合并js
gulp.task(“amd”,function(){//把./app/js/module/*.js路径下全部的js 合并到jsconfig里面
gulp.src(“./app/js/module/*.js”)
.pipe(amd(“./app/js/config”))
.pipe(concat(“config.js”))
//合并后输出到./www/js的目录底下
.pipe(gulp.dest(“./www/js”));
//获取./app/js.require.js
gulp.src(“./app/js/require.js”)
//传说到”./www/js”目录下
.pipe(gulp.dest(“./www/js”));
})
//文件打包
gulp.task(“zip”,function(){
gulp.src(“./www/*/“)//www下目录
.pipe(zip(“gulp.zip”))//把www下目录打包成gulp.zip
.pipe(gulp.dest(“./release”));
})
//default默认执行的命令
gulp.task(“default”,[“server”,”watch”,”img”]);
//cnpm init 配置 package.json 方便下次配置
“`