为什么要使用javascript创建自己的库有很多事实和要点:
- 感觉很酷
- 是组织代码的好方法
- 你的代码将更易于维护
- 与任何人轻松共享
- 一次写下你一直需要的东西
在本教程中, 我们将使用不带原型的纯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;
};
现在创建一个库并与我们共享!
推荐阅读
- 如何使用JavaScript从DOM元素捕获图像
- 使用javascript将highcharts图表导出为图像的3种方法(客户端解决方案)
- 如何在ReactJS中创建同步和异步自动完成输入
- 如何在Django中返回JSON响应
- 如何在ReactJS中使用Bootstrap 3的组件
- 如何将Markdown渲染为纯React组件
- React Native –为什么它是移动应用程序开发的最佳选择()
- 如何使用CSS创建响应表
- 如何使用CSS将reCAPTCHA元素居中