background

Last time I listened to Master Dan’s Live, and in it he talked about how to improve his skills and use native JS to make things like games, so I don’t play games, so I thought of rewriting one of my projects in native JS in a weird way… Then my whole person is not good 😅

conceived

If you’re starting a new project, what do you do in the preparation phase? Maybe it is to think about what functions to implement. My main purpose now is to practice JS and code design. As for browser compatibility, how to package these topics is not in my scope of consideration. 😔) :

  • multiple env
  • local open index.html file and nginx proxy for dev/prod
  • layout
  • with flex css
  • fetch to communicate with server side
  • router
  • toggle left navigation
  • menus on the left navigation
  • etc

learning

Although I have a general idea of my own, I also want to see how others use pure JS to make an application. Some people are really clickbait, looking at Venila JS, but the content uses bootstrap, jQuery and other tools. I found a few, but they were basically very simple small projects, starting with creating main.js and index.html, without a systematic engineering example, I still had to find my way.

Set up

Because it is pure JS, it is easy to build it. Please refer to the following steps:

  1. Create an index. HTML file to write static pages;
  2. Create a main.js file to write the JS code and import it into the created index.html file.
  3. Global installationlive-server, used for hot Reload pages;
  4. OK, that’s pretty much set up, so the first thing I want to do is make a layout with navigator, header, and Content, and the Navigator supports shrinking.

Layout

To see the effect:

It’s a very simple layout that you can do with your eyes closed. Here’s my code snippet:

<div id='root'>
    <nav class="left">
      <div class="logo"><i class="fab fa-vine"></i></div>
      <div class="menu">
        <script src=".. /components/menu.js" type="module"></script>
      </div>
    </nav>
    <div class="right">
      <header class="header">
        <img src=".. /assets/dedent.svg" alt="dedent" class="dedent-icon" />
        <div class="user">user</div>
      </header>
      <main id="content" class="content"></main>
    </div>
  </div>
Copy the code

Because of the font icon, we need to include the response CDN link in the header. What did I learn from this little piece of code:

  • SVG request with the inline way is through the network, I can display properly when the inline SVG, but out to use network load will not be able to show that because the XMLNS attribute, need assignment XMLNS = “http://www.w3.org/2000/svg”, Because SVG needs to be parsed into SVG + XML format.

  • Native CSS can use variables. When you set the color, you have to set it again and again. You can use native CSS variables directly.

    :root {
  --nav-bg: rgb(69.72.73);
}
Copy the code

  • Ampersand (&) in CSS is the advanced syntax for Sass/Less. Native CSS does not work.

  • To use import/export, add type=”module” to the script tag.

  • Another interesting thing I learned is that the native classList has a method called toggle, which helps us to add elements to the class. The specific use case is the arrow icon in the navigation above. I used transform to rotate the icon. How to dynamically add a transform class to an element:

      let div = document.querySelector('#content');
  div.classList.toggle('visible');
Copy the code

    By the way, this toggle method solves the rotation problem very conveniently.

Router

The route implementation basically uses the history method. The core code is as follows:

const onNavigate = pathname= > {
  const contentDiv = document.getElementById('content');
  window.history.pushState(
    {},
    pathname,
    window.location.origin + pathname
  )
  contentDiv.innerHTML = routes[pathname]
}
Copy the code

In simple terms, you embed the page corresponding to the route in the div (in index.html) with the ID content.

After the implementation of routing, I have to give up, too tedious, all the functions have to be manually out, to say the harvest, it must be some, readME explains some of my notes to, source code and related references. If you are interested, go here 👉 : github.com/fayeah/veni…

Thank you for reading and welcome to 😃.