Reflection: About programming and concept of building Web

Basically, I’ve finished this Web during this term. To summary, this Web is designed to devote translate words to graphic information. The content I used is Chinese classical poem, I catched poem by JSON which be supported by Gushi.ci. Therefore, user can get massive poem randomly, and they can try to understand it by graphic as well as the translation supported by Baidu’s API. Now, I’m going to conclude some problem I faced, and the final solution.

use Javascript module to create elements in time.

The target is showing a gallery on Web, there are many of image had been upload on cloud server, and display by href Link. I collected all of link in JSON file, and the Web can read link than create elements.

module style and Event

As ECMA6 declared:

$('body').append(`
    <p>Content:${Variable}</p>
`)

` (反引号) this symbol can include string and variable, which means it is easy to create module and generate elements on HTML.
The question is I should add event listener to elements for motion and interaction. After every new generations, I added event listener repeatedly, which means when user interact with that element, it will response many times! The original method is:

Array.from(.elements).forEach((t)=>{
    t.addEventListener('click',function(){
        ...
    })
}) 

To add EL for every elements, I chose a class, and set to an Array, so it can use forEach() to iterate (遍历). But, the existed elements will be added EL again, which is horrible..So I changed the method of add, I chose the last element which is the last generated, and add EL for it. The important thing is Selector.

The SVG object can be chosen by CSS selector or DOM selector, so I would like to set attribute of SVG by Anime.js

let cir = svg.paper.circle(x,y,r) //create circle element
cir.attr({
    class:'.cir-in-svg'
}) // set class so it can be chosen by CSS/Anime

anime({
    targets:'.cir-in-svg',
    translateX:[
        {values:100,duration:1000,easing:'linear'},
        {values:0,duration:1000,easing:'linear'}            
    ],
    opacity:1,
    duration:function(el,i,l){
        return 500 + i*100  // el=targets,i=index,l=length
    }
})

SVG can be set by CSS with a good performance and interactivity. So in future work, my main direction will be vector graphic and interactive animation.

add a random item from existed Array

This is a really usually requirement in WEB application, users could load more elements in time, but if every times they click and see same arrangement, there will not be cool. There is a simple solution: create a new array, **random** select an element and push to new Array, then return the new one, I thought. That’s wrong. Because it will add repeat elements, if randomly choose. So, the new solution is use Set type which declared by ECMA6, it like Array, can be iterated by for(..of..) The most important thing is : Set can not save same element

const originArr = [a,b,c,d,e]
let ranSet = new Set()

do {
    ranSet.add(originArr[Math.floor(Math.random() * originArr.length)])
} while (ranSet.size<5);

let    newArr = Array.from(ranSet)

So, the newArray is the new Array which is absolutely random.