js常用规范

模块化

为什么要模块化
在JS中没有包的概念，变量可以重复定义，这就存在变量覆盖问题

<script>
    (function (win) {
        //函数暴露
        win.aa=this.aa;
        function aa() {
            console.log("--")
        }
    })(window);
</script>

commonjs规范

规范

说明

每个文件都可以当作一个模块
在服务器：模块的加载是运行时同步加载的
在浏览器：模块需要提前编译打包处理

基本语法

暴露模块：
module.exports = value
exports.xxx = value
引入模块：
require(xxx) 注：第三方：xxx模块名 自定义：xxx为模块文件路径

实现

服务器端实现

Node.js
http://nodejs.cn

目录

|-module1
  |-module.js
|-module2
  |-module.js
|-module3
  |-module.js

./module1/module.js

exports.say={
    msg:"say",
    aa:function () {
        console.log("----------")
    }
}

./module2/module.js

exports.bar={
    msg:"nihao",
    aa:function () {
        console.log("----------")
    }
}

./module3/module.js

module.exports={
    msg:"sss"
}

./test.js

enter code herelet module1= require('./module1/module')
let module2= require('./module2/module')
let module3= require('./module3/module')
let uniq=require('uniq');

console.log(module1.say.msg)
console.log(module2.bar.msg)
console.log(module3.msg)

浏览器实现

Browserify
http://browserify.org
https://www.npmjs.com/ //查找js包

步骤

1.创建目录和文件

2.下载browserify
 *全局 npm install browserify -g
 *局部 npm install browserify --save-dev  //加入开发依赖，表示此依赖只在开发的时候引入，环境有：开发环境（编写代码）、测试环境，运行环境（上线）
3.定义模块代码


4.打包处理
 * broserify /targetPath -o /outPath

目录

|-js
  |-dist // 打包生成的文件的目录 或者叫 build
  |-src  // 源码的目录
|-index.html
|-package.json

AMD

规范

说明

Asynchronous Modul Defintion(异步模块定义)
专门用于浏览器端，模块的加载是异步的

基本语法

暴露模块

//定义没有依赖的模块
define(function(){
    
    return module;
})

//定义有依赖的模块
define(['module1','module2'],function(m1,m2){
    
    return module;
})

引入模块

(function () {

    require.config({
        baseUrl:'AMD/',//基本路径,加上之后paths=baseUrl+paths
        paths:{     //配置路径，不加后缀
            service: './module/service',
            controller:'./module/controller'
        }
    })
    require(['service','controller'],function(m1,m2){
        //使用m1/m2
        
    })
})

注：jQuery内置支持AMD规范，名称一定要为jquery

service.js

define(function () {

    var name = "kk";

    function say() {

        return name;
    }

    return {
        name: name,
        say: say
    };

})

controller.js

define(['service'],function (service) {

    var bar ="bar";

    function fbar() {

        console.log("----------")
        console.log(service.name)
    }

    return {fbar};
})

实现

Require.js
http://www.reqiurejs.cn //官网
http://www.ruanyifeng.com/blog/2012/11/require_js.html

步骤

//1.下载require.js，并引入
  *官网 http://www.requirejs.cn
  *引入 js/libs/require.js

//2.创建项目结构

|-js
  |-libs
    |-require.js
  |-modules
    |-service.js
    |-controller.js
  |-main.js
|-index.html

service.js

define(function () {

    var name = "kk";

    function say() {

        return name;
    }

    return {
        name: name,
        say: say
    };

})

controller.js

define(['service'],function (service) {

    var bar ="bar";

    function fbar() {

        console.log("----------")
        console.log(service.name)
    }

    return {fbar};
})

main.js

(function () {

    require.config({
        baseUrl:'AMD/',   //基本路径,加上之后，paths=baseUrl+paths
        paths:{     //配置路径，不加后缀
            service: './module/service',
            controller:'./module/controller'
        }
    })

    require(['controller'],function (controller) {
        controller.fbar();

    })


})()

CMD(了解)

ES6

规范

说明

http://es6.ruanyifeng.com/#docs/module
依赖的模块需要编译打包处理（ES6还要浏览器不支持，转换为ES5时自带reqiure语法（浏览器不认识），需要使用使用browserify）

语法

导出模块：export xxx // export default()=>{}默认暴露
引入模块：import xxx from ‘./moddule’

实现（浏览器）

1.使用Babel将ES6编译为ES5代码
2.使用Browserify编译打包js

目录

|-ES6
  |-.babelrc
  |-js
  |-dist
  |-modules
    |-module1.js
    |-module2.js
    |-module2.js
    |-app.js
  |-index.html
  |-package.json

使用步骤

1.定义package.json
{
    "name":"es6-babel-browserify"
    "version":"1.0.0"
}

2.安装 babel-cli,babel-preset-es2015和browserify
  *npm install babel-cli browserify -g //cli:command line interface 
  *npm install babel-preset-es2015 --save-dev //将ES6转换成ES5的所有插件打包下载
  *preset 预设（将es6转换成es5的所有插件打包）//

3.定义.babelrc文件   //rc run control运行时需要读的文件
{
    "presets":["es2015"]  //要转换什么
}

4.编码
  *js/src/module1.js  //分别暴露 分别引入
  *js/src/module2.js  //统一暴露 统一引入
  *js/src/module2.js  //默认暴露 默认引入
  
5.编译
  *使用Babel将ES6编译为ES代码（但包含Commonjs代码）：babel js/src -d js/lib
  *使用Browserify编译js：browserify js/lib/app.js -o js/lib/bundle.js

module1.js

export function f1() {
    console.log("f1")
}
export function f2() {
    console.log("f2")
}

module2.js

var foo=function foo() {
    console.log("foo")
}
function bar() {
    console.log("bar")
}
export {foo,bar};

module3.js

export default {
    kk: function () {
        console.log("kk")
    },
    aa: function () {
        console.log("aa")
    }
}

app.js

import {f1,f2} from './module1'
import {foo,bar} from './module2'
import module3 from './module3'
f1()
f2()
foo()
bar()
module3.kk()
module3.aa()