zoukankan      html  css  js  c++  java
  • js基础 ---- 如何实现模块化

    一、模块化编程形成的原因

      随着网页的发展 页面逻辑也越来越复杂 所带来的诸如逻辑混乱,页面复杂,可维护性差,全局变量暴露等问题接踵而至

      开发者需求去管理网页的逻辑

      Javascript模块化编程:发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块

      现在模块化的编程思想已经越来越普遍

    二、模块化编程的优点

      (1)、解决项目中的全局变量污染的问题

      (2)、开发效率高,有利于多人协同开发

      (3)、职责单一,方便代码复用和维护 

      (4)、解决文件依赖问题,无需关注引用文件的顺序

    三、模块化的几种规范

      (1)、AMD规范

          含义:它是一个在浏览器端模块化开发的规范,服务器端的规范是CommonJS 模块将被异步加载,模块加载不影响后面语句的运行。所有依赖某些模块的语句均放置在回调函数中

          define() 函数

            AMD规范只定义了一个函数 define,它是全局变量。函数的描述为:

              define(id?, dependencies?, factory)

                 id:指定义中模块的名字,可选如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数,模块名必须是“顶级”的和绝对的(不允许相对名字)

            依赖dependencies:是一个当前模块依赖的,已被模块定义的模块标识的数组字面量

                    依赖参数是可选的,如果忽略此参数,它应该默认为["require", "exports", "module"]。然而,如果工厂方法的长度属性小于3,加载器会选择以函数的长度属性指定的参数个数调用工厂方法

           工厂方法factory,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值

          实例:       

              define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
                   exports.verb = function() {
                       return beta.verb();
                         //Or:
                       return require("beta").verb();
                   }
               });
      )

       (2)、CommonJS 规范

           CommonJS是服务器端模块的规范,Node.js采用了这个规范。Node.JS首先采用了js模块化的概念

           根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性

           输出模块变量的最好方法是使用module.exports对象

            

            var i = 1;
            var max = 30;
    
            module.exports = function () {
              for (i -= 1; i++ < max; ) {
                  console.log(i);
              }    
              max *= 1.1;
            };

    四、模块化的原生实现实现

      (1)、原始写法

          模块就是实现特定功能的一组方法

          只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。

            function fn1(){...}

            function fn2(){...}

          fn1 和 fn2 就组成了一个模块 使用的时候直接调用即可

          缺点:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系

      (2)、对象写法

          对第一种方法的一种优化写法 可以把模块写成一个对象,所有的模块成员都放到这个对象里面

          var module1 = new Object{

            _count: 0,

            fn1: function(){...}

            fn2: function(){...}

          }

          调用:module1.fn1()

          但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部计数器的值

            module1._count = 5

      (3)、立即执行函数写法

          使用 立即执行函数 可以优化对象写法 暴露所有模块成员的问题

          var module1 = (function(){

            var _count = 0;

            var m1 = function(){
              //...
            };

            var m2 = function(){
              //...
            };

            return {
              m1 : m1,
              m2 : m2
            };

          })();

        但是外部也无法读取内部的 _count 变量

          console.info(module1._count); //undefined

      (4)、放大模式

          如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式"(augmentation)

          var module1 = (function (mod){

            mod.m3 = function () {
              //...
            };

            return mod;

          })(module1);

          上面的代码为module1模块添加了一个新方法m3(),然后返回新的module1模块

      (5)、宽放大模式

         在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上一节的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大式"。  

          var module1 = ( function (mod){

            //...

            return mod;

          })(window.module1 || {});

          与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象

     

  • 相关阅读:
    TPYBoard读取芯片上的温度传感器
    Micropython实例之TPYBoard来电显示功能演示
    Micropython教程之TPYBoardv102 DIY蓝牙智能小车实例
    TurnipBit—MicroPython开发板:妥妥拽拽零基础也能玩编程
    可视化编程开发板TurnipBit支持LED亮度可调功能
    TPYBoard实例之利用WHID为隔离主机建立隐秘通道
    带以太网的MicroPython开发板:TPYBoardv201建立云加法器实例
    带以太网的MicroPython开发板:TPYBoardv201温湿度上传实例
    数学运算类(三角函数,取整函数,指数函数,取最大值,最小值,绝对值)
    数字格式化和数字分组
  • 原文地址:https://www.cnblogs.com/qlb-7/p/13819742.html
Copyright © 2011-2022 走看看