How is StrviewApp built based on the StrView.js project?

“This is the fifth day of my participation in the August More Text Challenge.

preface

A few days ago, because by looking at the source of the warm strength, made a toy Js library strview.js. Why is there such a toy bank? In fact, it is not all because of the evening idle nothing, mainly want to exercise their own development ability through practical operation. I wrote an article earlier, but it was just a general introduction, not a deep one. You might have thought it was similar to vue.js before, and yes, it borrowed ideas from vue.js, but there are some things that are different (personally). So, today, this article introduces StrviewApp, a project scaffolding tool based on StrView.js. If you think it’s working for you, you can keep reading. If you think this article must be rubbish, you can avoid it. All right, let’s get down to business now. Are you ready? Come with me!

Get started with StrviewAPP quickly

You can quickly initialize the StrviewAPP project using StrviewCLI. You can do this:

1. Global installation.

npm i strview-cli -g
Copy the code

2. After the installation is complete, you can view the version.

strview-cli -v
Copy the code

3. Finally, it’s time to initialize the project,<projectName>Is a custom project name.

strview-cli init <projectName>
Copy the code

or

strview-cli i <projectName>
Copy the code

Thus, a StrviewAPP project is constructed.

StrviewAPP project structure

The following figure shows the StrviewAPP project organization.

Below, I’ll describe the purpose of each file and folder.

• config

This is the WebPack configuration folder, where all the webPack configuration is configured. There are three files in the folder as follows:

- webpack.base.js  // Basic configuration
- webpack.dev.js  // Development environment configuration
- webpack.pro.js  // Production environment configuration
Copy the code

• public

Resources folder.

- favicon.ico  // Site identity
- index.html  // Template file
Copy the code

• .gitignore

Which files do not need to be added to version management.

• .prettierrc

Prettier configuration file of the rule.

• package.json

Defines the various modules needed for the project, as well as the project’s configuration information (such as name, version, license, and other metadata).

• src

This folder is the main folder for the StrviewAPP project, so let’s take a look at what’s in this folder.

- assets // Store static files
- components // Component folder
- data // Public status folder
- methods // Method folder
- style // Styles folder
- template // Template folder
- App.js // Page entry
- main.js // Project entry file
Copy the code

Src folder details

Now that we’ve analyzed the project structure, let’s take a closer look at the structure of the files in the Src folder and how they fit together.

1. main.js

First, let’s take a look at the main.js file, which is the project entry file, and take a look at the contents of the file.

import { createView } from 'strview';
import data from './data';
import App from './App';
import methods from './methods';

createView({
  el: "#app".template: App,
  data
});

// The event is handled after the createview API
methods();
Copy the code

We’ll start with strView. js and import the createView API to create the view. So, let’s skip ahead and see how this API is used. First we pass in an object literal. The first property is the EL property, which is the mounted DOM node. The second property is the template property, which is the template used to display the view. The third attribute is the data attribute, which is passed in as the displayed data. Finally, we have The comment that The event is handled after The CreateView API, meaning that The event method has to be called after The createViewAPI, methods(); .

2. App.js

As mentioned above, app.js uses a template to display views, so let’s take a look.

import myParagraph from './components/myParagraph';
import card from './components/card';
import helloTemplate from './template/helloTemplate';
import './style/index.css';

const App = `
${helloTemplate}<div class="content"> <button class="color red"> Click </button> <p class=" TXT ">{a}, {b}, (a and b are changing) < / p > < ul class = "list" > < li > {age} < / li > < li > {name} < / li > < li > {MSG} < / li > < / ul > < p class = "TXT" > {a}. </p> <p class=" TXT ">{b}, (b will change) < / p > < input value = "{MSG}" > < / input > < p > {obj. A.} < / p > < p > {arr} < / p > < p > {ob. Name} < / p > < / div >${myParagraph}
${card}<my-card><span slot="my-card-txt">{b}</span></my-card>
`

export default App
Copy the code

We see that at the end of the code we export a template string, the constant App. We can see that the template string is filled with code that looks like tag statements. Yes, that’s the key to strview.js, which uses template strings containing tags like statements to build views.

Also, we see that at the top, in addition to the style files, we also import two files from the Components folder and one file from the template folder. As we know from the previous directory structure, the Components folder holds components, while the template folder holds template files. How do you render imported templates and components on a page? Then you need to use the ${} placeholder in the template string. You might be confused here because you don’t see anything in these files, but don’t worry, let’s take our time. You just have to remember that they’re in place here.

You might see tags like
and you might say no! This is just a custom component. We’ll look at why this is done when we go to components. But it should be noted that if we need to store content in a component, we need to use a placeholder ${} before the custom component, such as ${card}, card is the imported component.

Finally, we’ll find a {} symbol like this in the tag, which is used to mount data, that is, to dynamically update data. We’ll talk more about the data later.

3. template

It says that this folder is where template files are stored, so let’s take a look.

- helloTemplate.css
- helloTemplate.js
Copy the code

The HelloTemplate.css style file has nothing to say.

.container {
  text-align: center;
  margin-top: 100px;
  line-height: 46px;
}
.container > img {
  margin-bottom: 40px;
}
Copy the code

Hellotemplate.js Let’s take a look at this js file.

import logo from '.. /assets/logo.png';
import './helloTemplate.css';

export default `
<div class="container">
  <img src="${logo}"/>
  <h1>Hello Strview.js</h1>
</div>
`;
Copy the code

In the code above you can see that we import an image and a style file in the header, and then export a template string. What about introducing pictures! Use the ${} placeholder to bind to the IMG tag.

After a brief introduction to the Template folder, let’s look at the Components folder.

4. components

This folder is used to store components. The concept of components may be very familiar to you. Components are used in front-end frameworks such as Vue and React.

Let’s first look at the directory structure of this folder.

- card.js
- myParagraph.js
Copy the code

As you can see, there are two JS files.

Take a look at the file myparagraph.js.

customElements.define('my-paragraph'.class extends HTMLElement {
        constructor() {
            super(a);const template = document.getElementById('my-paragraph');
            const templateContent = template.content;

            this.attachShadow({ mode: 'open' }).appendChild(
                templateContent.cloneNode(true)); }});const myParagraph = `
       
       
       Let's have some different text!  
       
       
       
 
        
Let's have some different text! 
 
        
In a list! 
 
       
 
      `

export default myParagraph
Copy the code

Let’s look at the first part, the define method under the customElements object. What is this method? In fact, this part leverages Web Components. What is it? That’s how we defined it in MDN.

Web Components are a different set of technologies that allow you to create reusable custom elements whose functionality is encapsulated outside of your code and use them in your Web applications.

Web Components are actually quite complicated to break down, so we won’t go into detail here. Here is the MDN site, you can follow a few examples.

https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
Copy the code

The first parameter of the define method is to pass a custom label name, and the second parameter is to pass a class. Where customization is required is in the first parameter and in the getElementById() method in the second parameter, the same string is recommended.

Once you’ve called define, you need to wrap the template tag in the following template string, which you can think of as initialization. We can see that there is an ID selector on the template tag as in the getElementById() method above. Yeah, this place has to match up. In addition, we see a style tag immediately below, which defines the component’s style. Finally, there is the content of the component. Here we define a P tag with a slot inside that defines a name attribute. There is also a label text, which is displayed by default if there is no content in the component.

<template id="my-paragraph">
<style>
    p {
        color: white;
        background-color: #Awesome!;
        padding: 5px;
    }
</style>
<p>
    <slot name="my-text">My default text</slot>
</p>
</template>
Copy the code

Let’s look at the following code, which is wrapped with < my-Paragraph >
. In addition, inside the tag is the normal tag statement. One difference, however, is that these plain label statements have a slot attribute, which is used as a template for slots.

<my-paragraph>
<span slot="my-text">Let's have some different text! </span> </my-paragraph> <my-paragraph> <ul slot="my-text"> <li>Let's have some different text! </li> <li>In a list! </li> </ul> </my-paragraph>Copy the code

After analyzing the myRaid.js file, we move on to the card.js file.

It’s the same as the myParagraph.js file, except that it defines components. In app.js above, we mentioned that we need to use a placeholder ${} before the custom component, such as ${card} here, card is the introduced component, referring to it.

customElements.define('my-card'.class extends HTMLElement {
        constructor() {
            super(a);const template = document.getElementById('my-card');
            const templateContent = template.content;

            this.attachShadow({ mode: 'open' }).appendChild(
                templateContent.cloneNode(true)); }});const card = `
       `

export default card
Copy the code

5. data

This folder is responsible for storing the data state files, there are mainly these two files.

- index.js
- ob.js
Copy the code

Let’s take a look at the index.js file, which is very simple, simply export an object, and the ob.js file is also very simple.

index.js

import ob from './ob';
export default {
    a: "Hello".b: 18.name: "maomin".age: 9.msg: 'Strview'.arr: ['0'].obj: {
        a: {
            b: 1
        }
    },
    ob
}
Copy the code

ob.js

export default {
    name: 'kk'
}
Copy the code

6. methods

We mentioned this in the main.js file.

import methods from './methods';

// The event is handled after the createview API
methods();
Copy the code

That’s calling this method. So, let’s look at the Methods folder, which we know provides event handling methods. Its directory structure is as follows:

- index.js
- item.js
Copy the code

Take a look at the file item.js.

import { reactive, ref } from 'strview'

function executes() {
    reactive().obj.a.b = 3;
    ref().name = 'Strview.js';
}
function useItem() {
    ref().b = 100;
}

export {
    executes,
    useItem
}
Copy the code

We can see that two methods have been introduced in the header, reactive and ref. The former handles complex types of data, such as groups and nested objects, and the latter handles simple types of data, such as single objects and raw values. As you can see in the code above we implement the data responsiveness by calling the reactive() and ref() methods and then export the two executes() and useItem() methods.

Next, let’s look at the index.js file.

import { eventListener } from 'strview';
import { executes, useItem } from './item';

const eventList = [
    ['.color-red'.'click', executes],
    ['.list>li:nth-child(2)'.'click', useItem]
]

function methods() {
    for (let index = 0; index < eventList.length; index++) {
        const element = eventList[index];
        eventListener(...element);
    }
}

export default methods
Copy the code

We first introduce an eventListener method at the top of the file, followed by the two previously exported methods from the Item folder. The eventListener method is called over and over by defining an array. Finally, methods are derived.

7. style

This is a style file, but I won’t go into that.

index.css

* {
  margin: 0;
  padding: 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.content {
  text-align: center;
  margin-top: 50px;
}
Copy the code

8. assets

This folder holds static resources, such as images.

Project start

1. Initialize installation dependencies

yarn install
Copy the code

OR

npm install
Copy the code

2. Start the project

yarn start
Copy the code

OR

npm run start
Copy the code

3. Packaged deployment

yarn build
Copy the code

OR

npm run build
Copy the code

The project in

conclusion

Thanks for reading!

This scaffold is certainly not comparable to the scaffolding in the current popular front-end frame, which can be regarded as a toy! Can also be seen as their own source code after some of their own feelings!

About the author

Author: Vam’s Golden Bean Road. CSDN blog star of the Year 2019, CSDN blog has reached millions of visitors. Nuggets blog post repeatedly pushed to the home page, the total page view has reached hundreds of thousands.

In addition, my public number: front-end experience robbed road, the public 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 experience rob it! Go!