preface

In recent weeks, the frequency of updates has been significantly lower than before. Not lazy, mainly recently want to precipitation precipitation. Rest these days I also have a harvest, take the evening of the empty plan to write a toy JS library play. Unlike many large frameworks, there is no rigorous planning prior to development. However, I just wanted to try it. So, I wrote a toy JS library called Strview.js.

And if you’d like to have a look? You can read on. If you think it’s not interesting, it can be regarded as a bad article and you can just skip it!

introduce

Strview.js is a JS library that converts strings into views. Strings here are generally template strings. Of course, you can also use normal strings, but normal strings are more limited in certain situations. Therefore, the template string is preferred. Second, strview. js only focuses on the view layer, which is not only easy to use, but also easy to disassemble different code blocks flexibly.

Here is the Chinese official document address:

www.maomin.club/site/strvie…

If you want to get started, see how to install it below.

The installation

CDN

Directly import the following address:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/strview.global.js"></script>
Copy the code

If you are using native ES Modules, there is also an ES Module compatible build file:

<script type="module">
  import { createView } from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/strview.esm.js'
</script>
Copy the code

NPM

Latest stable version: 1.8.0

npm install strview
Copy the code

Command-line tool (CLI)

StrviewApp is a project build tool based on Strview.js that you can use to build pages more easily and flexibly. How to install it, you can use strviewCli to quickly install strviewApp.

Global installation

npm install strview-cli -g
Copy the code

Check the version

strview-cli -v
Copy the code

Initialize the project

strview-cli init <projectName>
Copy the code

Quick learning

The easiest way to try strview.js is to use the Hello World example. You can open it in a new TAB in your browser and follow the examples to learn some basic usage. You can use the CDN version of strview.global.js. Using this file exposes Strview globally, which you can call directly.

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Strview.js</title>
</head>

<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/strview.global.js"></script>
    <script>
        Strview.createView({
            el: "#app".data: {
                msg: 'Hello World'
            },
            template: `<p>{msg}</p>`});</script>
</body>

</html>

Copy the code

As shown in the figure below:

Hello World

The basic use

Create a view

Use the createView method to pass in an object whose properties are EL, Data, and Template. El represents the DOM element to be mounted, data represents the observed data object, and template represents the DOM template string. With these three properties defined, you can generate the desired view page.

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Strview.js</title>
</head>

<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/strview.global.js"></script>
    <script>
        Strview.createView({
            el: "#app".data: {
                msg: 'Hello Strview.js'
            },
            template: `<p>{msg}</p>`});</script>
</body>

</html>
Copy the code

Hello Strview.js

Conditions apply colours to a drawing

Apply to first render only.

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Strview.js</title>
</head>

<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/strview.global.js"></script>
    <script>
        let isOk = false;
        Strview.createView({
            el: "#app".data: {
                msg: 'Hello Strview.js'.isOk:false
            },
            template: `
            <p>{msg}</p>
            ${isOk ? `<span>hide</span>` : ' '}
            `});</script>
</body>

</html>
Copy the code

Hello Strview.js

The list of rendering

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Strview.js</title>
</head>

<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/strview.global.js"></script>
    <script>
        let liNodes = ` `;
        for (let index = 1; index < 3; index++) {
            liNodes += `<li>${index}</li>`
        }
        const app = Strview.createView({
            el: '#app'.template: `<ul>${liNodes}</ul>`
        })
    </script>
</body>

</html>
Copy the code

1 2

The event processing

The eventListener method takes three arguments: the DOM node, the event name, and the callback function.

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Strview.js</title>
</head>

<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/strview.global.js"></script>
    <script>
        Strview.createView({
            el: "#app".data: {
                msg: 'Hello Strview.js',},template: ` 
{msg}
 `}); Strview.eventListener('p'.'click'.() = > {
            console.log(1);
        });
    </script>
</body>

</html>
Copy the code

1

Responsiveness data

ref

For a single simple attribute.

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Strview.js</title>
</head>

<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/strview.global.js"></script>
    <script>
        Strview.createView({
            el: "#app".data: {
                msg: 'Hello Strview.js',},template: ` 
{msg}
 `}); Strview.eventListener('p'.'click'.() = > {
            Strview.ref().msg = 1;
        });
    </script>
</body>

</html>
Copy the code

reactive

For complex attributes.

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Strview.js</title>
</head>

<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/strview.global.js"></script>
    <script>
        Strview.createView({
            el: "#app",
            data: {
                obj: {
                    a: 1,
                    b: 2
                }
            },
            template: `
            <button class="btn1">change</button>
            <p>{obj.a}</p>
            <p>{obj.b}</p>`}); Strview.eventListener('.btn1', 'click', () => { Strview.reactive()['obj.a'] = 2; Strview.reactive().obj.b = 3; });</script>
</body>

</html>
Copy the code

The deployment of

If you use strviewApp, the project build tool, you can deploy your project this way.

npm run build
Copy the code

or

yarn build
Copy the code

conclusion

The above is the strview.js introduction, need to improve a lot of areas. Write out is also to take out something, and is to absorb everyone’s opinions, so that they can grow faster.

note

Here is the source address:

Github.com/maomincodin…

Github.com/maomincodin…

Github.com/maomincodin…

About the author

Author: Vam’s golden bean road. She was awarded the 2019 CSDN Blog Star of the Year, and her blog has been visited by millions of people. Nuggets blog posts have been pushed to the front page many times, and the total number of visits has reached hundreds of thousands.

In addition, my public number: the road of the front-end history, the public number continues to update the latest front-end technology and related technical articles. Welcome to pay attention to my public number, let us together in front of the road through it! Go!