如何组织一个模块代码

Cc_2011 发布于2019-08-22 10:44 / 1843人阅读

摘要：为了有更好的代码组织结构和让程序耦合度更低我们可以尝试的把他组织成一个模块。测试结果运行两个程序，可以很明显的发现第二种比第一种的速度快很多，因为第二种调用，避免了全局变量，毕竟全局变量的查找是比较耗时的，并且降低了程序的耦合度。

前言：在平常我们实现代码的过程中可能有一块功能能多带带成为一个模块包含几个方法或是几个参数。为了有更好的代码组织结构和让程序耦合度更低我们可以尝试的把他组织成一个模块。

关于IIFE：在把功能模块化之前，我们先来了解一个概念IIFE(立即调用函数表达式)，看一下下面这两段程序。

console.time()
var s = 0;
for (var i = 0; i < 1000000; i++) {
    s += i;
};
console.log(s);
console.timeEnd();

console.time();
(function x() {
    var s = 0;
    for (var i = 0; i < 1000000; i++) {
        s += i;
    };
    console.log(s);
})();
console.timeEnd();

测试结果：

default: 17.2ms;
default: 3.9ms;

运行两个程序，可以很明显的发现第二种比第一种的速度快很多，因为第二种IIFE调用，避免了全局变量，毕竟全局变量的查找是比较耗时的，并且降低了程序的耦合度。

进入正题，假设我们要实现一个人的功能（自我介绍，穿。。。）现在我们来编写这模块。

var person = (function() {
    var name = "",
        age = 0;
    //初始化
    function init(username, userage) {
        name = username;
        age = userage;
    }
    //自我介绍
    function selfintro() {
        console.log("我是" + name + "今年" + age);
    }
    //吃
    function eat(food) {
        console.log("我是" + name + "我在吃" + food);
    }
    //方法集成为一个对象
    var personAPI = {
        init : init,
        selfintro : selfintro,
        eat : eat
    };
    //暴露对外接口
    return personAPI;
})();
//调用，先对这个人进行初始化，在调用行为函数
person.init("cws", 18);
person.selfintro();
person.eat("西瓜");

测试结果：

 我是cws今年18
 我是cws我在吃西瓜

这样是不是把我们的人的模块独立出来了，让程序更加的清晰，降低了耦合度。
这只是比较简单的一个功能，我把一个原生的大图滚动用模块化封装了一下，具体可参考：原生实现大图滚动模块化demo

云服务器 GPU云服务器代码组织 html订单模块代码编译源代码模块收藏一个代码

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

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

两年React老兵的总结 - 如何组织React项目

摘要：一个复杂的应用都是由简单的应用发展而来的随着越来越多的功能加入项目代码就会变得越来越难以控制本文章主要探讨在大型项目中如何对组件进行组织让项目具备可维护性系列目录类型检查组件的组织样式的管理组件的思维状态管理目录组件设计的基本原则基本原则高一个复杂的应用都是由简单的应用发展而来的, 随着越来越多的功能加入项目, 代码就会变得越来越难以控制. 本文章主要探讨在大型项目中如何对组件进行组...

hoohack 2019-08-23 18:40 评论0 收藏0
如何科学的组织React组件样式

摘要：也可以和预处理器混用目前看下来，它只对名做哈希，也就是说然而这个算是一个有意思的方式，首先它依赖于，而并不局限于的开发，任何前端项目都可以使用，那么就也都可以使用的概念，不知道这个会有怎么样的发展，感觉可以尝试。 React的组件式开发，让我们可以利用其Component Model，专注于单个组件的逻辑开发，其中还包括组织组件的样式。先声明，本文并不是webpack配置教程，不会介绍...

jackzou 2019-08-30 15:45 评论0 收藏0
使用Sass来写OOCSS

摘要：自从年提出以来。它就成为一个领先的模块系统，用来组织你的代码方式之一。换句话说，你的样式中尽量不要使用标签或者标识符。我们必须使用来创建对象，通过在类中调用，将其合在一起。如果你不在刻意在中追求语义化，你仍然可以使用。自从2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以来。它就成为一个领先的模块系统，用来组织你的CSS代码方式之一。 ...

Carl 2019-08-28 18:03 评论0 收藏0