1

I'm currently learning JS and i'm working on my own first library, however a problem i stumbled upon is:

When someone else uses my library he/she will get a name conflict while using 'alerts' in there code.

What is the best methode or how can i best solve this issue?

Thanks in advance!!

body {
  font-family: sans-serif;
  background: white;
  font-size: 150px;
  color: #333;
} 
jQuery(document).ready(function( $ ){
 function alerts (alert1, alert2, alert3, alert4) {  //function calling all alerts
   var hours = new Date().getHours();  //get time by hours

  if (alert1 == undefined) {   // if statement that fills the alert if undefined 
   alert1=0;
  }

  if (alert2 == undefined) {
   alert2=12;
  }

  if (alert3 == undefined) {
   alert3=17;
  }

  if (alert4 == undefined) {
   alert4=24;
  }

 if (hours >= alert1 && hours < alert2) {  //check if the time is between alert1 and alert 2, if than so execute
   document.body.style.backgroundColor = "blue";
 } else if (hours >= alert2 && hours < alert3) {
     document.body.style.backgroundColor = "red";
 } else if (hours >= alert3 && hours < alert4) {
     document.body.style.backgroundColor = "green";
 } else {

 }

 }
 alerts(a, b, c, d); 
 });        //end Jquery 
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>timeofday</title>

  <link rel="stylesheet" href="css/style.css">

</head>

<body>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <!-- Includes Jquery -->
<script>
var a = 0;
var b = 17;
var c = 18;
var d = 24;
  </script>
<script src="js/index.js">

</script> <!-- Includes the script for background change -->

</body>

</html>
NvG
  • 51
  • 2
  • 2
    There is no conflict in your code. the alerts() function is a local function that is not visible from outside the `jQuery(document).ready(...` block – Dimitri L. Jan 23 '19 at 11:30
  • 1
    Refer to how closures work: https://stackoverflow.com/questions/111102/how-do-javascript-closures-work – Dellirium Jan 23 '19 at 11:31

3 Answers3

2

You can encapsulate / namespace your JS in various ways. I personally like this scheme:

var myns = {

    send: function () {
        // your code
    },
    receive: function (sender) {
        // your code
    },
    save: function () {
        // your code
    }
};

it has no limitations as far as i know and you can use nice short names :-) simply call for example this from outside:

myns.receive(this);
Beatroot
  • 470
  • 4
  • 9
0

You should rename alerts(...) to something else. Try to name it so that when another programmer reads it, he/she directly knows by just the name of the function, what the function will probably do (of course this isn't always fully possible, but try to). The current name isn't really describing what it does, and aside from that also giving you conflicts. Something you could do is naming it adjustBackgroundColorAccordingToTime or setBackgroundForCurrentTime. Something else may work for you too of course :)

ImJustACowLol
  • 826
  • 2
  • 9
  • 27
0

Do not name your library that normal, and make the name longer. Then, you can explode a function such as noConflict to explode your lib just like jQuery.noConflict does.

For example: The full name of your lib is MyAwesomeAlerts, and you would like to make a short name alerts. The end of your code, you should detect whether your short name exists in current scope, execute statement window.alerts = MyAwesomeAlerts if not exists; otherwise, do nothing, and the end users can invoke var awesomeAlerts = MyAwesomeAlerts.noConflict(); to name it.

In function noConflict, just like this:

```
MyAwesomeAlerts.noConflict = function() {
    return MyAwesomeAlerts
}
```
hyjiacan
  • 76
  • 2