javascript - More modular; include html elements in .js file? -

-

I have a page that has many buttons to take action with JavaScript. There is no problem here, just an HTML page and multiple .js file, for each action to separate a .js file stuff and make everything a little more manageable. I will write a script to add them all together in the deployment.

Many of my JavaScript functions require html elements to work. For example, color.js needs a div with elements to change color so that the user can change the color and press the button to save the changes. Color.js does the function on-click buttons and in this way. there is no problem.

There are many JavaScript actions using many HTML elements, then there is a problem. All these HTML elements should be inserted into an HTML page. This makes things complicated, for example, when I change the color field ID, I have to make changes by going to color.js. Apart from this, I want to find html elements in my huge HTML page and also change it.

Can my javascript actions contain the required HTML elements in a .js file and somehow it can include it in my HTML page?

Of course I can escape all the HTML elements and put it in javascript variables and documents. Write it down But escaping is not a good thing and after this change of HTML is not very painful.

I am also not looking for an Ajax function, due to many different actions, it will create network problems.

Cheers for any ideas on the subject!

You can use template generate dynamic HTML via javascript

  • A template structure (DOM) or HTML string
  • One way to render the template

    • Li>
    • Data that fills the template (array, object)
    • Settings for configuring a template engine

    I have used some template engines, one of them is which is B is a friendly and easy to sugar-Syntax, usage, but low performance apply syntax.

    The other template engine is in the library, which does not provide any sugar-syntax, but provides a basic JavaScript syntax, gives more power, and best performance.

    The last experiment I used to do is . Future has a huge emphasis on performance on Glute. It will do business of "Syntax Sugar" convenient for better performance.

    If you want to try more engines, here you can get a lot of them:

    On the other hand, if you want to load a static HTML (for example a static view), you can use it to load data from Keep the server and the returned HTML in the matched element.

    There is a short message of recommendation: Whatever options you choose, I use the cache I suggest either to save the scene or to save a compiled template, thus improving the performance of the same processing request.


    • Comments

    Post a Comment

    Popular posts from this blog

    apache - 504 Gateway Time-out The server didn't respond in time. How to fix it? -

    -
    Using a form submission on an embedded iframe , the customer downloads a compressed log file Requested. The request was sent to the server, which is the compressed log files, perform some database operations and returns a compressed file. After just 2 minutes, 504 gateway time-out server did not respond timely message on browser net panel How to fix this error? The log files were taking a long time to compress, and timeout was set to 2min The error was fixed by extending the file file: # # timeout: The number of seconds before getting the time out. # # # Timeout 120 timeout 600
    Read more

    c# - .net WebSocket: CloseOutputAsync vs CloseAsync -

    -
    We have a working ASP.NET Web API REST service, which is one of the methods of our controller, HTTPTTEX. .) Socket handler code looks something like this ... Public async task socket handler (AspNetWebSocketContext context) {_webSocket = context.WebSocket; ... while (! Cts.IsCancellationRequested) {WebSocketReceiveResult Results = _webSocket.ReceiveAsync (Input Segment, cts.Token) .Result; WebSocketsStateCollusocketState = _webSocket.State; If (result.MessageType == WebSocketMessageType.Close || currentSocketState == WebSocketState.CloseReceived) {// What should I use. CloseAysnc () or. CloseOutputAsync ()? _webSocket.CloseOutputAsync (WebSocketCloseStatus.NormalClosure, "Client Requested", cts.Token). Wait (); } If (currentSocketState == WebSocketState.Open) {...}}} .What is the difference between .CooseAsync () and CloseOutputAysnc ()? I tried both of them and they both seemed to work fine but some difference should be the same they both describe very similar to...
    Read more

    c++ - How to properly scale qgroupbox title with stylesheet for high resolution display? -

    -
    I am trying to apply a stylesheet for QGroupBox (QT4.8), which works on the normal screen ( 96 dpi) high resolution screen (Yoga 2 Pro, 3200x1800, 275 dpi, windows 8.1). The following style looks good on the 275 dpi screen, but the top margins on a regular 96 dpi screen are far too big. QGroupBox {border: 1px solid red; Range radius: 7px; Margin-top: 12x; } QGroupBox :: Title {subcontrol-origin: margin; Subcontrol-position: left above; Padding-left: 10px; Padding-right: 10px; } Changing the top-margin has an effect, but I did not get a proper setting which works on both screens. If I shorten the value, the content of the group box overlaps with the title on 275 dpi screen. I was also playing with units "East", "PX", "MX", "PT". Reading the document I would have guessed, "2 X" was the correct solution, which should be scaled with different screen resolutions. Without the stylesheet, the groupbox works well on both screens. ...
    Read more