JavaScript modular thinking

With the in-depth study and use of JS, I gradually discovered two problems:

(1) The reusability of the JS code I wrote before is very low

(2) The functions are scattered. For example, I want to get the current date, and To get the current date plus 1, which is tomorrow's date, I wrote it as two independent and unrelated functions before, but now that I think about it, they can actually be classified as two methods of a date object, and bind them in Wouldn't it be better to use one object as its two methods?

1. First, we need to understand why we need to use modularity?

The functions are all designed to solve needs. The advantages that modularization can bring are the following:

(1) Maintainability. For example, if we compare the code that does not use modularization to oil and water mixed together, the code after modularization is like the layering of oil and water. Oil is oil and water is water. Such code has a clear hierarchy. , with clear functions. It seems that it is appropriate to use the phenomenon of oil and water to inevitably stratify to refer to the general trend of JS modularization.

(2) Namespace. Here we need to talk about the scope of JS. It involves scope chain again. If you are not familiar with scope chains, you can refer to my other article "Understanding Scope Chains in JavaScript". In JS, functions are used to distinguish scopes. Every function has a scope chain. If we put all the code together, a small number of lines of code will be fine, but if there are too many lines of code, it will inevitably cause "namespace pollution".

(3) Reusability. When we understand the namespace, we can encapsulate the module code with the help of the namespace, so that we can directly reference this function module whenever we need this function.

Next, use my JS code path to demonstrate how to modularize the code:

(1) Original era: pile all the JS code to be used in a pair of <script> tags on the page . </script>

 function f1(){
      //函数体
 }
 function f2(){
      //函数体
 }

Disadvantages of writing this way: There is basically no reusability of the code, and there may be a problem of being too closely integrated with the page. You also need to consider various scope issues.

(2) Ancient times: The idea is to write the module as an object. For example, we want to write a function that can control the page music playback, stop, next song, and previous song. You can encapsulate a musicPlayer object

// 将基本的方法封装起来
            var musicPlayer = {

                var musicDom = null, //播放器对象
                var musicList = [], //存放歌曲列表

                // 初始化音乐播放器
                var init =  function(){
                    
                },

                // 添加一首歌曲
                var add = function(src){
                   
                },

                // 根据数组下标决定播放哪一首，索引index从0开始
                var play = function(index){
                    
                },

                // 暂停播放
                var stop = function(){
                    
                },

                // 下一首
                var next = function(){

                },

                // 上一首
                var prev = function(){

                }
            };

At this time, it can be called a module. In the global scope, we only bind a musicPlayer object to the window object, and then we can use musicPlayer to add '. ' form to call the method inside. Such as "musicPlayer.init();"

This method also has a disadvantage, that is, we cannot control the content we want to expose, and the internal methods and variables of the musicPlayer object can be rewritten externally.

(3) Modern. Including IIFE (immediate execution function), amplification mode, extended amplification mode, input global variables

　

Except for IIFE, I have never been exposed to the other three before. Here I will briefly talk about my understanding.

- IIFE (Immediately-Invoked Function Expression)

// 创建一个立即执行的匿名函数
// 该函数返回一个对象，包含你要暴露的属性
// 如下代码如果不使用立即执行函数，就会多一个属性i
// 如果有了属性i，我们就能调用counter.i改变i的值
// 对我们来说这种不确定的因素越少越好

var counter = (function(){
  var i = 0;

  return {
    get: function(){
      return i;
    },
    set: function( val ){
      i = val;
    },
    increment: function() {
      return ++i;
    }
  };
}());

// counter其实是一个对象

counter.get(); // 0
counter.set( 3 );
counter.increment(); // 4
counter.increment(); // 5

counter.i; // undefined i并不是counter的属性
i; // ReferenceError: i is not defined (函数内部的是局部变量)

As you can see from the above code, there is no i attribute in counter, it only has the content exposed in return. In this way we have made i private.

- Amplification mode

My understanding of amplification mode is to pass the original function as a parameter to IIFE, then add a new extension method to the original function, and return the expanded function. This achieves the "amplification" of the original function.

var module1 = (function (mod){
 　　mod.m3 = function () {
　　　　//...
 　　};
 　　return mod;
 })(module1);

In this example, a new method m3 is added to module1 and returned.

- Wide magnification mode

Wide magnification mode adds a new feature based on the magnification mode: the parameters of IIFE can be empty objects.

 var module1 = ( function (mod){
 　　//...
 　　return mod;
 })(window.module1 || {});

IIFE parameters passed in: If window.module1 is defined, pass in the parameter, if it is undefined, pass in an empty object.

- Enter global variables

If we want to use global variables within IIFE, it is best to pass the global variables in through parameters.

 var module1 = (function ($, YAHOO) {
　　//...
 })(jQuery, YAHOO);

The code shown above passes the global variables of the jQuery and YUI libraries into module1 as parameters.