如何创建自己的JavaScript库

为什么要使用javascript创建自己的库有很多事实和要点：

• 感觉很酷
• 是组织代码的好方法
• 你的代码将更易于维护
• 与任何人轻松共享
• 一次写下你一直需要的东西

但始终在编写自己的插件之前, 你需要有一个清晰的主意, 为什么我要编写此插件, 建议你在Google上搜索良好, 如果已经有一个插件可以实现你想要的功能, 那么这样做会更快, 更轻松集成, 甚至可能比你尝试做的要好, 请记住：我们不想重新创建轮子, 这非常有生产力, 如果允许的话, 我们应该避免使用它。

在本教程中, 我们将使用不带原型的纯JavaScript创建一个简单的库, 而是使用本机对象。

如果你想知道使用原型和手动管理对象之间的区别, 这篇文章应该有助于清除你的疑问。

1)创建基本结构

以下代码将在执行代码后创建一个可访问的全局变量, 称为myWindowGlobalLibraryName。

(function(window){
  // You can enable the strict mode commenting the following line  
  // 'use strict';

  // This function will contain all our code
  function myLibrary(){
    var _myLibraryObject = {};

    // We will add functions to our library here !

    return _myLibraryObject;
  }

  // We need that our library is globally accesible, then we save in the window
  if(typeof(window.myWindowGlobalLibraryName) === 'undefined'){
    window.myWindowGlobalLibraryName = myLibrary();
  }
})(window); // We send the window variable withing our function


// Then we can call it using
console.log(myWindowGlobalLibraryName);

由于我们几乎将所有内容都包装在匿名函数中, 因此, 如果我们的代码失败, 则不会损坏所有外部javascript。

2)为你的库创建自定义函数

在此示例中, 我们将创建一个自定义日志函数, 我们将其称为myCustomLog。

(function(window){
  // You can enable the strict mode commenting the following line  
  // 'use strict';

  // This function will contain all our code
  function myLibrary(){
    var _myLibraryObject = {};
    

    // Just create a property to our library object.
    _myLibraryObject.myCustomLog = function(thingToLog){
        console.log("My-Custom-Log > Type of variable : " + typeof(thingToLog));
        console.log("My-Custom-Log > Is number : " + !isNaN(thingToLog));
        console.log("My-Custom-Log > Length : " + (thingToLog).length);

        return console.log(thingToLog);
    };

    return _myLibraryObject;
  }

  // We need that our library is globally accesible, then we save in the window
  if(typeof(window.myWindowGlobalLibraryName) === 'undefined'){
    window.myWindowGlobalLibraryName = myLibrary();
  }
})(window); // We send the window variable withing our function


// Then we can call our custom function using
myWindowGlobalLibraryName.myCustomLog(["My library", "Rules"]);

3)如果需要, 请在你的库中(范围内)创建公共不可访问的属性

为了保存用户不感兴趣的设置或其他类型的属性(或者只是我们不希望任何人看到它们), 我们可以在函数范围内声明一个简单变量, 并且该变量不能在包装器之外检索。 。

(function(window){
  // You can enable the strict mode commenting the following line  
  // 'use strict';


  // This function will contain all our code
  function myLibrary(){
    var _myLibraryObject = {};

    // This variable will be inaccessible to the user, only can be visible in the scope of your library.
    var settings = {
      volume:100,       mute:false
    };
    

    // Change a private property
    _myLibraryObject.setVolume = function(volume){
         settings.volume = volume;
         return volume;
    };
    
    // Change a private property
    _myLibraryObject.setMute = function(muteStatus){
         if(typeof(muteStatus) === 'boolean'){
           settings.mute = muteStatus;
         }else{
           console.error("You need to disable or enable the sound !");
         }

         return settings.mute;
    };
    
    // Change a private property
    _myLibraryObject.haveSound = function(){
         return settings.mute;
    };

    return _myLibraryObject;
  }

  // We need that our library is globally accesible, then we save in the window
  if(typeof(window.myWindowGlobalLibraryName) === 'undefined'){
    window.myWindowGlobalLibraryName = myLibrary();
  }
})(window); // We send the window variable withing our function


// Now see the content of your library
console.log(myWindowGlobalLibraryName);

// It should ouput only 3 properties (setMute, setVolume, haveSound)
// And the settings variable can be only be accessed in your library, not outside

注意：尽管无法在包装器外部检索设置变量, 但是, 如果你创建了返回该变量的方法, 则可以在包装器外部进行更改, 例如

// Then your variable will be exposed with this method !
_myLibraryObject.getSettings = function(){
    return settings;
};

// You can create a get method without expose your variable using something like this
// The object keys will be copied to a new object instead our object.
// Note that you need to achieve this method according to the structure of your variable (or if it's an array)

_myLibraryObject.getSettings = function(){
  var mySecurityCopy = {};

  for(var i in settings){
      if(i)
        mySecurityCopy[i] = settings[i];
      }      
  }

  return mySecurityCopy;
 };

现在创建一个库并与我们共享！