如何创建自己的JavaScript库

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

  • 感觉很酷
  • 是组织代码的好方法
  • 你的代码将更易于维护
  • 与任何人轻松共享
  • 一次写下你一直需要的东西
但始终在编写自己的插件之前, 你需要有一个清晰的主意, 为什么我要编写此插件, 建议你在Google上搜索良好, 如果已经有一个插件可以实现你想要的功能, 那么这样做会更快, 更轻松集成, 甚至可能比你尝试做的要好, 请记住:我们不想重新创建轮子, 这非常有生产力, 如果允许的话, 我们应该避免使用它。
在本教程中, 我们将使用不带原型的纯JavaScript创建一个简单的库, 而是使用本机对象。
【如何创建自己的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 usingconsole.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 usingmyWindowGlobalLibraryName.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 libraryconsole.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; };

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

    推荐阅读