如何创建自己的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; };

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