模块与组件

Posted ABC袁

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模块与组件相关的知识,希望对你有一定的参考价值。

1、模块化中的模块是指javascript 模块,比如一个用来格式化时间的模块。比如在node.js中的http 模块、fs模块等,并且可以自己建立模块,模块化大致有两种类型“:

源自nodejs的规范CommonJs

 CommonJs最开始示威服务端所写的,所以不是异步加载,举一个简单的例子,假如有一个math模块

var math = require(math);
  math.add(2,3); // 5

很明显由于js是单线程,并且是依次加载执行的,在math没有加载完成的时候,就会卡在这块出现假死现象,那为什么服务端可以这么写?服务端所有模块都是放在本地硬盘,加载速度非常快。

AMD,异步加载所需的模块,然后在回调函数中执行主逻辑。这正是我们在浏览器端开发所习惯了的方式,其作者亲自实现了符合AMD规范的requirejs,AMD/RequireJs迅速被广大开发者所接受。

(1)实现js文件的异步加载,避免网页失去响应;

(2)管理模块之间的依赖性,便于代码的编写和维护。

 在RequireJs中同样采用的是require来加载模块,不同的是它具有了回调,实现了异步加载,

require([module], callback);

第一个参数数组是需要加载的模块,后面是它们的回调。

也是上面的例子,在RequireJs中的写法如下图

require([math], function (math) {
    math.add(2, 3);
  });

这就避免了假死现象的发生,那么具体怎么用呢

首先我们下载RequireJs,在网页底部引入RequireJs

<script src="js/require.js" defer async="true" ></script>

加入defer、 async都是为了让其异步加载。

然后就是加载我们自己的代码

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

其中data-main="js/main"就是加载main.js,因为是存在于script标签中所以我们简写为main,main.js就是我们主模块,是整个模块加载的一个窗口。

在main.js中我们可以这样写,假定我们加载了jquery、zepto、backbone这三个模块

 require([jquery, ‘zepto, backbone], function ($,zepto, Backbone){    

 
// some code here   
});

这样写明显没有路径,这是因为默认和main.js是在同一级的,如果不在同一级我们可以这样写

  require.config({
    paths: {
      "jquery": "js2/jquery.min",
      "zepto": "lib/zepto.min",       
      "backbone": "js2/backbone.min"    
     }   
});

这个配置放在main.js的最上面,前面的query这些是可以自定义的,就相当于他们的名字。加载device时候直接加载就可以了。如果所需要的模块都在同一个文件中,我们可以设置baseUrl。如下

  require.config({
       baseUrl: "js/lib",
    paths: {
      "jquery": "jquery.min",
      "zepto": "zepto.min",       
      "backbone": "backbone.min"    
     }   
});                

 接下来就是如何编写模块——基于AMD规范的模块,模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中

define(function () {
    var add=function (x,y) {
        return x+y;
    }
    return{
        add:add
    }
})

如果定义的模块依赖于其他模块我们要在其中引入。

define([jquery],function ($) {
    var add=function () {
        return $.test();
    }
    return{
        add:add
    }
})

这样在加载该模块的时候就会先加载jquery。

2、组件,组件则包含了 template、style 和 script,而它的 Script 可以由各种模块组成。比如一个显示时间的组件会调用上面的那个格式化时间的模块。比较常见的比如公共的头部,这就是一个组件,我们在使用的时候直接引用就可以了,webpack中vue页面就是组件。

下面是知乎上的一个介绍

组件化和模块化的价值都在于分治,web应用系统的复杂度不断提升,兼顾开发效率和产品实际运行效率,会在开发阶段运用组件化和模块化的手段分离关注点,结合构建工具合理打包。组件化更多关注的是UI部分,你看到的一个管理界面的弹出框,头部,内容区,确认按钮和页脚都可以是个组件,这些组件可以组成一个弹出框组件,跟其他组件组合又是一个新的组件。模块化侧重于功能或者数据的封装,一组相关的组件可以定义成一个模块,一个暴露了通用验证方法的对象可以定义成一个模块,一个全局的json配置文件也可以定义成一个模块。封装隔离来后,更重要的是解决模块间的依赖关系。babel作为现在最火的es6转换器,用babelify或者webpack的babel loader再或者基于task的构建系统插件都可以很方便用起来es6 modules

 

以上是关于模块与组件的主要内容,如果未能解决你的问题,请参考以下文章

如何使用导航架构组件修复动态功能模块中片段的发布版本中的ClassNotFoundException?

模块和组件模块化和组件化的理解

Jmeter组件之-Test Fragment(测试片段)

Android 调用组件 w/listener 或让 viewmodel 调用组件与片段通信

运行/调试你的PHP代码

Yarn: 一个新的JavaScript模块管理器