模块管理的简单实现

roundstones 发布于2019-08-21 10:55 / 1432人阅读

摘要：模块管理的简单实现方式，为什么会有这个东西方便组织你的代码，提高项目的可维护性。适用场景移动端页面，将注入到页面，这样就不用考虑模块加载的问题，从而节省了很多的代码，在实现上也更为的简单。

模块管理的简单实现方式

Keep It Simple，Stupid

Q&A

1. 为什么会有这个东西？

方便组织你的代码，提高项目的可维护性。一个项目的可维护性高不高，也体现一个程序员的水平，在如今越来越复杂的前端项目，这一点尤为重要。

2. 为什么不用requirejs，seajs等

它们功能强大，但是文件体积是个问题，此外还有就是业务有时候可能没那么复杂，正如开头所说的：keep it simple

3. 以下的实现从哪里来的？

这些借鉴了requirejs,seajs,commonjs等的实现，用于真实的项目，稳定运行，效果不错。

4. 适用场景

移动端页面，将js注入到html页面，这样就不用考虑模块加载的问题，从而节省了很多的代码，在实现上也更为的简单。

如果是多文件加载的话，需要手动执行文件加载顺序，那么其实最好用库来进行依赖管理会好一点。

实现1

(function(global){
    var modules = {};
    var define = function (id,factory) {
        if(!modules[id]){
            modules[id] = {
                id : id,
                factory : factory
            };
        }
    };
    var require = function (id) {
        var module = modules[id];
        if(!module){
            return;
        }

        if(!module.exports){
            module.exports = {};
            module.factory.call(module.exports,require,module.exports,module);
        }

        return module.exports;
    }

    global.define = define;
    global.require = require;
})(this);

使用示例

define("Hello",function(require,exports,module){
    function sayHello() {
        console.log("hello modules");
    }
    module.exports = {
        sayHello : sayHello
    }
});

var Hello = require("Hello");
Hello.sayHello();

实现2

function Module(main,factory){
    var modules = {};
    factory(function(id,factory){
        modules[id] = {
            id : id,
            factory : factory,
        }
    });

    var require = function (id) {
        var module = modules[id];
        if(!module){
            return;
        }

        if(!module.exports){
            module.exports = {};
            module.factory.call(module.exports,require,module.exports,module);
        }
        return module.exports;
    }

    window.require = require;
    return require(main);
}

使用示例

Module("main",function(define){
    define("Hello",function(require,exports,module){
        function sayHello () {
            console.log("hello");
        }
        
        //有效的写法
        module.exports = {
            sayHello : syaHello;
        }

        //或者
        exports.sayHello = sayHello;
    });
    //mian，程序入口
    define("main",function(require,exports,module){
        var Hello = require("Hello");
        Hello.sayHello();
    });
});

实现3

另外一种风格的模块管理

(function(global) {
    var exports = {}; //存储模块暴露的接口
    var modules = {}; // 
    global.define = function (id,factory) {
        modules[id] = factory;
    }
    global.require = function (id) {
        if(exports[id])return exports[id];
        else return (exports = modules[id]());
    }
})(this);

使用示例

define("Hello",function(require,exports,module){
    function sayHello() {
        console.log("hello modules");
    }
    //暴露的接口
    return {
        sayHello : sayHello
    };
});

var Hello = require("Hello");
Hello.sayHello();

实践

有了简易的模块化管理之后，在项目中，我们就可以采取这样的结构

-- proj

-- html
    -- index.html
-- css
-- js
    -- common
        -- module1.js（通用模块1）
        -- module2.js（通用模块2）
    -- page
        -- index.js（页面逻辑）
    -- lib
        -- moduler.js 模块管理库

配合前端构建工具（wepack，grunt，gulp等等），就可以构建一个移动端的页面。

总结

如今的框架非常地多，而且越做越庞大。框架通常考虑通用性，对于精益求精的项目来说，可能有时候也要自己动手去实现一些关键的点，而学习的来源就是这些牛逼的框架。

云服务器服务器托管 js实现的简单特效用c实现简单的shell java实现简单的web服务器最简单的客户管理软件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86404.html

详解Gradle自动实现Android组件化

摘要：我们一般把自动化测试划分为三种分别是单元测试目的是测试代码的最小单元。集成测试用来测试一个完成的组件或子系统，确保多个类之间的交互是否按预期运行。集成测试需要比单元测试需要更长的执行时间，而且更加难以维护，失败的原因难以诊断。前言；为什么我们要用Gradle管理组件呢？先来看看Android组件化需要实现的目标按照业务逻辑划分模块项目模块能够单独启动测试能够根据需求引入或删除某些业务模块通...

番茄西红柿 2019-05-23 15:17 评论0 收藏0
详解Gradle自动实现Android组件化

摘要：我们一般把自动化测试划分为三种分别是单元测试目的是测试代码的最小单元。集成测试用来测试一个完成的组件或子系统，确保多个类之间的交互是否按预期运行。集成测试需要比单元测试需要更长的执行时间，而且更加难以维护，失败的原因难以诊断。前言；为什么我们要用Gradle管理组件呢？先来看看Android组件化需要实现的目标按照业务逻辑划分模块项目模块能够单独启动测试能够根据需求引入或删除某些业务模块通...

fobnn 2019-05-22 16:53 评论0 收藏0
MySQL性能调优与架构设计(一)—— MySQL架构组成

摘要：物理文件组成之日志文件错误日志错误日志记录来在运行过程中所有较为严重的警告和错误信息。日志记录了所做的所有物理变更和事务信息通过日志和信息，保证了在任何情况下的事务安全性。文件也是专属与存储引擎的，主要存放表的索引相关信息。前言麻雀虽小，五脏俱全。mysql虽然以简单著称，但是其内部结构一点也不简单。本章从mysql物理组成、逻辑组成、以及几个相关工具几个角度来介绍mysql的...

hlcfan 2019-08-01 13:44 评论0 收藏0
【计算机毕业设计】基于ssm家校通网站系统

摘要：家校通网站给教育带来了更广阔的发展空间。通知公告信息列表显示系统的所有通知公告信息，可以通过关键字查询。通知公告信息删除对输入错误或过期的通知公告信息删除。随着网...

EsgynChina 2021-11-11 16:54 评论0 收藏0
MVPArms官方快速组件化方案开源,来自5K star的信赖

摘要：原文地址前言起源组件化方案分析业务组件的划分和代码隔离路由框架基础库的优势简介什么是组件化为什么要组件化分析现有的组件化方案如何选择组件化方案组件化方案描述架构图一览架构图详解宿主层业务层业务模块的拆分基础层核心基础业务公共服务基础组件其他原文地址: https://www.jianshu.com/p/f67... 0 前言 0.1 起源 0.2 组件化方案分析 0.2....

aikin 2019-06-24 18:00 评论0 收藏0