JavaScript_模块化

2024年3月18日 212次阅读 来源: alogy

JS开辟的题目

  • 争执

  • 依靠

  • JS引入的文件,发生依靠.

运用定名空间处置惩罚：

  • 定名空间的弊病

  • 挪用的时刻 名字比较长.

  • 只能减低争执，不能完全避免

SeaJs运用

  1. 引入sea.js的库

  2. 怎样变成模块？ define

  3. 怎样挪用模块？ exports 和 seajs.use

  4. 怎样依靠模块？ require

//html：
<script src="js/sea.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

//            console.log( seajs );

seajs.use('./js/main.js',function ( main ) {
    
    
    main.show();
    
});            
    
</script>

//main.js
define(function ( require,exports,module ) {
    
    var header = require('./header.js');
    
    function show () {
        
        alert(123);
        
    }
    
    
    exports.show = show;
    
});

seajs.use()

加载一个或多个模块

// 加载一个模块
seajs.use('./main.js');

// 加载一个模块，在加载完成时，实行回调
seajs.use('./main.js', function ( main ) {
  
});

// 加载多个模块，在加载完成时，实行回调
seajs.use(['./main.js', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});

seajs.use 与 DOM ready 事宜没有任何关联。假如某些操纵要确保在 DOM ready 后实行，须要运用 jquery 等类库来保证。

seajs.use(['jquery','./main'],function ( $,main ) {
    
    $(function () {

        main.init();

    })

});

use要领第一个参数肯定要有，然则可所以null，也可所以一个变量

var app = ['app.js', 'header.css', 'header.js'];

seajs.use(app, function( app ) {
    //do something
});

seajs.use() 只用于加载启动， 不应该出现在define的模块代码中，假如模块代码里须要加载别的模块时，运用 require() ，须要加载异步别的异步模块时，运用 require.async()

seajs.use 是模块加载器必备的一个接口

define函数

当通报一个参数时刻，那末这个参数就是一个模块，参数可所以恣意范例
通报一个字符串，那末这个模块就是一个字符串模块
通报一个对象的时刻，那末这个模块就是一个对象模块

通报一个函数（最经常使用的体式格局）
这函数自带三个参数
Require：援用其他模块的工场要领
Exports：返回的接口对象
Module：模块module属性

当通报过参数时（两个，或许三个）
假如通报两个参数的时刻，第一个该模块依靠的模块数组鸠合，末了一个参数是function
假如通报三个参数的时刻，第一个示意该模块的称号，第二个参数示意该模块依靠的模块鸠合，第三个

//第一个参数，当前模块的ID，也就是当前模块的地点
//第二个参数，以来模块的地点的数组

define('./main.js',['./drag.js'],function( require,exports,moduels ){
    
    
});

三个参数诠释

require

  • require不能简写

  • require不能被重定义
    不能赋值：var req = require
    不能定义函数：function require
    不能被子函数当做参数
    不能在子函数作用域内重定义

    // 毛病 – 重定名 “require”！
    var req = require, mod = req(“./mod”);

    // 毛病 – 重定义 “require”!
    require = function() {};

    // 毛病 – 重定义 “require” 为函数参数！
    function F(require) {}

    // 毛病 – 在内嵌作用域内重定义了 “require”！
    function F() {

     var require = function() {};

    }

  • require的参数只能是完全的字符串 require(‘abc’ + ‘bcd’)是不允许的

exports

  • 模块的接口

  • 第一种，直接对exports增加属性，如exports.color = ‘red’

  • 第二种，经由过程module来定义，module.exports.color = ‘red’

  • 第三种，经由过程module来定义，module.exports = {color: ‘orange’}

  • 第四种，经由过程return来定义， return {color: ‘green’}

  • 在一个模块中定义接口时刻要用一种体式格局，不能混用

  • 注重，不能够直接对exports赋值新对象

module

  • 模块的属性

  • id：示意模块的id

  • uri：示意该模块文件对应的url

  • exports：示意模块返回的接口鸠合

  • dependencies：示意依靠模块鸠合（数组示意情势）

  • deps：示意依靠模块鸠合（对象示意情势）

CMD 模块定义范例

一个模块就是一个文件

define 是一个全局函数， 用来定义模块

define( facotry )

facotry可所以一个函数，也可所以一个对象或字符串

definde( { color: 'tan' } );

当参数为 函数时。 默许会有三个参数 ：require，exports，module

definde( function ( require,exports,module ) {
    
} );

define ([id,deps],factory)

define 也能够接收两个以上的参数，字符串id示意模块标识。deps是模块依靠。

define('main',['mina.js'],function ( require,exports,module ) {
    //模块代码
});

id ,deps 参数省略，能够经由过程构建东西自动天生。
id和 deps 参数， 不属于CMD范例。

require function

require 是一个要领，接收 模块标识 作为唯一参数，用来猎取其他模块供应的接口。

deifne(function ( requrie,exports ) {
    
    //猎取模块 main 的接口
    var main = require('./main');

    //挪用 模块 main 中的定义要领
    main.init();

});

require.async(id,[cb]);
模块内部异步加载模块，并在加载完成后实行指定的回调函数。

require.async('./a',function(){});
//加载多个异步模块
require.async(['./a','./b'],function(){});    

//异步加载 所须要的模块
define(function ( require,expotrs,module ) {
    
    var loadSync = false;

    if ( loadSync ) {

        var skin = require.async('./skin');

    } else {

        var header = require.async('./header');

    }

});

exports

exports , 用来向外供应模块接口

define(function ( require, exports,module ) {

  // 对外供应 foo 属性
  exports.color = 'pink';

  // 对外供应 doSomething 要领
  exports.doSomething = function() {};

});

经由过程return 供应接口

define(function () {
    
    //经由过程 return 直接供应接口
    return {
        color: 'deeppink',
        sayName: function () {}
    }

});

CMD模块中，经常运用的API 有：define，require,require.async,exports,module.expotrs

seajs 设置

seajs.config()

alias

定义模块别号
当援用一些基本库的时刻，涉及到基本库晋级，在alias中定义这个模块时，修正只须要修正这个别号设置。

seajs.config({
    alias: {
        jquery: 'lib/jquery.1.10.1'
    }
});

模块中运用

require('jquery');

paths

定义模块途径
一些模块建立目次构造很深的时刻，能够将这个层级定义成一个简写的path， 援用这个模块的时刻，直接经由过程 pathName+模块称号。

seajs.config({

paths: {
    hd: './modules/header'
}

});

模块中运用

require('hd/header.js');

vars

在某些情况下，模块途径在运行时才肯定，能够运用 vars 变量来设置。

seajs.config({
    vars: {
        skin: 'header/skin'
    }
});

模块中运用

require('{skin}/skin.js');  //须要运用 {} 来标识

map

映照设置,婚配文件，做映照处置惩罚
开辟完一些模块时刻，须要打包或紧缩处置惩罚，此时文件名能够会差别，能够经由过程map映照，来找到这个文件，修正成对应的文件名

seajs.config({
    map: [
        ['main.js','main-min.js']
    ]
});

seajs.use(['main'],function ( main ) {
    // do ...
});

base

设置模块的根目次
有时刻开辟用seajs不肯定在当前页面貌次下，此时想援用这个模块比较贫苦，能够经由过程base来重定义该页面模块文件根目次。

charset

设置模块的编码花样

seajs.config({
    charset: 'utf-8'
});

seajs.config({
  charset: function(url) {

    // xxx 目次下的文件用 gbk 编码加载
    if (url.indexOf('http://example.com/js/xxx') === 0) {
      return 'gbk';
    }

    // 其他文件用 utf-8 编码
    return 'utf-8';

  }
});

经常使用的设置项： alias，paths，base

seajs插件

seajs-preload.js

<script type=”text/javascript” src=”js/lib/seajs-preload.js”></script>
加载js文件

seajs.config({
    //预加载jquery文件
    preload: ['jquery.js']
});

模块中文件运用

definde(function ( require,exports,module ) {
    $(document).css('background','tan');
});

seajs-css.js

加载css文件

<script type=”text/javascript” src=”js/seajs-css.js”></script>

definde(function ( require,expotrs,module ) {
    require('../css/css.css');
});

requireJs

引入模块文件时刻，requirejs是依据援用了require文件的script标签中data-main属性对应的文件地点的目次

define定义模块

通报一个对象能够
通报一个函数(commonjs范例的完成)
区分 在于module

id示意模块的id，id没有后缀名(注重：seajs有后缀名)
没有依靠的模块鸠合
config设置属性

模块接口

在AMD范例定义的模块中，没有exports参数，只能经由过程return将接口暴露出来。

  • return 对象，这类体式格局能够将模块内部多个属性多个要领暴露出来。

  • return 要领，这类体式格局将一个要领返回出来，援用这个模块就是援用这个接口要领，在它父模块(援用它的模块中)能够直接挪用该要领。是在本身模块的作用域中。

requirejs设置

baseUrl

设置根目次
用处：有时刻启动文件不在预期的位置，能够经由过程baseUrl来设置根目次

require.config({
    baseUrl: 'lib'
});

paths

简写途径

require.config({
    paths: {
        hd: 'module/header'
    }
});

map

当存在多个页面，能够每一个页面援用代码库不一样，能够经由过程map举行设置，对每一个文件设置差别的代码库文件。

require.config({
    map: {
        //modules 模块下的dom模块援用的是lib/dom
        'modules': {
            'dom': 'lib/dom'
        },
        //modules-new 模块下的dom模块援用的是lib/dom.2.0
        'modules-new': {
            'dom': 'lib/dom.2.0'
        }
    }

});

运用css插件

requireJs 加载css 插件

//设置
require.config({
    map: {
        '*': {
            'css': 'lib/css'
        }
    }
});  

//运用  

define(['css!css/index.css'],function () {
});

shim

示意设置模块依靠关联
关于一些定义在全局作用域下的代码库，经常猎取不到这类库的模块，此时经由过程定义shim的莫开依靠关联，能够在模块中猎取到这类代码库。

require.config({
    shim: {
        'lib/jquery': {
            //依靠的模块鸠合
            deps: [],
            expotrs: '$'    
        }
    }
});
    原文作者：alogy
    原文地址: https://segmentfault.com/a/1190000005759177
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞