前端开发中的模块化编程详解

前言

前端技术发展日新月异，随着Ajax技术的广泛引用，jQuery库的层出不穷，前端代码日益膨胀，javascript的发展领域越来越广泛，就会应用使用模块化编程去规范管理。本文从模块化概念，为什么要模块化，各种模块化方式的优缺点。以及并且都一一通过实例模拟演练，介绍模块化的发展进程，模块化规范,。能让读者更好的理解模块化编程的理念。

模块化基本概念

• 模块是什么?
  模块就是独立存储实现特定功能的一组方法的程序结构。其实就是一个实现特定功能的js文件。
• 什么是模块化编程?
  模块化编程就是，程序中都是用模块先分类组织方法，再按需引入并使用模块中的方法。其实就是按一定规范将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。
• 为什么要使用模块化编程?
  随着前端网站和应用的功能逐渐发展，引入的Javascript代码越来越庞大，就迫切需要按业务逻辑划分和维护程序结构，然后由团队分工协作才能完成。模块化编程就是为了便于按业务逻辑划分程序结构，并且便于团队分工协作。比如一个十万行代码的项目，如果都放在一个文件里，然后一群人围着一个文件办公，你可以想像一下那是个什么情况
• 模块化编程优点
  1.避免变量全局污染，命名冲突
  2.提高代码复用率
  3.提高代码的可维护性
  4.多人协作互不干扰

js文件实现模块化编程(原始方式)

其实就是将多个相关的函数，集中定义在一个js文件中。

• 全局function模式 : 将不同的功能封装成不同的全局函数。比如，我们可以创建一个users.js文件，包含登录和注册的方法，然后使用时引入users.js文件，就可以调用js文件中的方法了。

//user.js文件
function signin(){
   
  console.log("登录...");
}
function signup(){
   
  console.log("注册...");
}

<!-- 引入user.js文件 -->
<script src="users.js"></script>
<script>
  signin();
  signup();
</script>

问题：模块中所有内容都是全局变量和函数，造成全局污染，也极易发生冲突。

比如我们修改users.js文件,添加getById函数，表示按id查找一个用户。再新建products.js文件,也添加getById函数，表示按id查找一个商品。

//user.js文件
function signin(){
   
  console.log("登录...");
}
function signup(){
   
  console.log("注册...");
}
function getById(){
   
  console.log("按id查询一个用户...");

// product.js文件
function getById(){
   
  console.log("按id查询一个用户...");
}

<!-- 引入user.js和product.js文件 -->
<script src="users.js"></script>
<script src="product.js"></script>
<script>
  getById()
  //结果只会输出一个，后引入的getById()会把之前引入的覆盖掉
</script>

• namespace模式 : 简单对象封装。定义功能时，将一个js文件中一组相关方法，存储在一个对象结构中，，一定程度上减少了全局污染。
  使用时，同样引入js文件。
  但是，不能直接调用函数，而是通过对象.方法()的方式，调用对象的方法。但这样做也有问题，会将整个对象，暴露在其他程序中，易被篡改。

//user.js文件
var users={
   
  count: 10,
  signin(){
   
    console.log("登录...");
  },
  signup(){
   
    console.log("注册...");
  },
  getById(){
   
    console.log("按id查询一个用户...");
  },
  getCount(){
   
    console.log("在线人数: "+this.count);
  }
}

// product.js文件
var products={
   
  getById(){
   
    console.log("按id查询一个商品...");
  }
}

<!-- 引入user.js和product.js文件 -->
<script src="users.js"></script>
<script src="product.js"></script>
<script>
  users.signin();
  users.signup();
  users.getById();
  products.getById();//两个id查找函数都可以调用
  users.getCount();
  users.count=0;//轻松篡改对象中的属性
  users.getCount();
</script>