angular之模块开发一

模块化开发

概述

什么是模块化开发

  • 将软件产品看作为一系列功能模块的组合

  • 通过特定的方式实现软件所需模块的划分、管理、加载

为什么使用模块化开发

  • https://github.com/seajs/seajs/issues/547

  • 协同

  • 代码复用

  • 解决问题

    • 大量的文件引入

    • 命名冲突

    • 文件依赖

      • 存在

      • 顺序

实现模块化的推演

step-01 全局函数

step-02 封装对象

step-03 划分私有空间

step-04 模块的扩展与维护

step-05 第三方依赖管理

在什么场景下使用模块化开发 业务复杂 重用逻辑非常多 扩展性要求较高


实现规范

CommonJS规范

AMD规范

CMD规范


实现

Seajs

使用步骤

  1. 在页面中引入sea.js文件

  2. 定义一个主模块文件,比如:main.js

  3. 在主模块文件中通过define的方式定义一个模块,并导出公共成员

  4. 在页面的行内脚本中通过seajs.use('path',fn)的方式使用模块

  5. 回调函数的参数传过来的就是模块中导出的成员对象

定义一个模块

  • define

define(function(require, exports, module) {
 exports.add = function(a, b) {
   return a + b;
};
});

使用一个模块

  • seajs.use

    • 一般用于入口模块

    • 一般只会使用一次

  • require

    • 模块与模块之间

导出成员的方式

  • module.exports

  • exports.xxx

  • return

  • 三种方式的优先级

异步加载模块

  • 默认require的效果是同步的,会阻塞代码的执行,造成界面卡顿

  • require.async();

require.async('path',function(module) {

});

使用第三方依赖(jQuery)

  • 由于CMD是国产货,jquery默认不支持

  • 改造


// 适配CMD
if (typeof define === "function" && !define.amd) {
 // 当前有define函数,并且不是AMD的情况
 // jquery在新版本中如果使用AMD或CMD方式,不会去往全局挂载jquery对象
 define(function() {
   return jQuery.noConflict(true);
});
}

Seajs配置

  • 配置

  • seajs.config

    • base

    • alias

使用案例

  • Tab标签页

Require

angular之模块开发一_第1张图片

 

 angular之模块开发一_第2张图片

 

你可能感兴趣的:(angular之模块开发一)