Best practice for storing external text to then place in html

Sorry if I’m not explaining the question well in the title, I’m not sure of the correct lingo. Let me give you an example instead.

So this is a normal HTML file.

<span>Well to the site!</span>

I would like to make it a bit more dynamic by perhaps having in the JS.

<script>
$scope.welcome = "Welcome to the site!";
</script>

In the HTML

<span>{{welcome}}</span>

Now I have just had a large JSON array in a separate JS file and loaded it in to the <head> and then called it.

Is this the correct way or is there a proper practice? The closest thing I can think of is Internationalization in Java.

If you have no additional requirements besides what you mentioned in your question, this is perfectly fine. See KISS and YAGNI.

You should only consider doing something more complicated right now if you know you’re going to need something like internationalization, since deciding on a satisfactory getCorrectStringForCurrentLanguage() mechanism and porting all your existing string code to it will be much harder if you put it off until later. And even that argument only works if you already know the internationalization requirements well enough to decide on a satisfactory mechanism right now; that’s not always the case.

P.S. In general, there’s only a “correct way” to do something when everyone’s needs are the same or very similar. It should go without saying that “displaying text to the user” is not the sort of thing where every program in the world has almost the same requirements.

you can show values dynamically using js,

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="test.js" ></script>
</head>
<body >
    <div id="Name">  
        <label> Click ME!!:</label><input id="Text" value="press" onclick="NameChanged()"  type="button"> 
    </div><br/>
    <label id="hello"></label>
</body>
</html>

Js code:

var welcome = "Welcome to my site !!!";

function NameChanged(){
  document.getElementById('hello').innerHTML = welcome;
}

here I have taken welcome as a variable to store desire value and created a label in Html to show that value in a particular position.

softwareengineering

Best practice for storing external text to then place in html

Trả lời Hủy