current position:Home>Vue has reduced its workload by half since using components

Vue has reduced its workload by half since using components

2022-05-15 05:19:57InfoQ

Paid use of knowledge  script  Tags introduced  Vue.js. Components can also be used in projects , Complete some public business . With  H5  Take the login pop-up window as an example , Explain the use of components in knowledge payment .
The login pop-up window can be used in multiple business scenarios , If you repeat a set of login pop-up windows under each business scenario , Will make the code redundant , And the later maintenance is cumbersome . here , We can peel off the login code , It can be introduced where it needs to be used . This not only streamlines the code , And it's easier to maintain later , There is no need for new functional requirements , Make code changes in multiple places .
Under current project , There are two ways of stripping . One way is to write the login business code in a separate  JavaScript  In file , Among them  DOM  Fragments need string splicing ; Another way is to use plug-ins , There will be  DOM  Fragment  HTML  file 、JavaScript  file 、CSS  Combine files .
  • String concatenation :
In early projects , That's how it works .

null
As shown in the figure above , The template content in the figure is spliced with strings . Once there are too many strings spliced in this way , It will appear that the code is messy , And it's easy to make mistakes .
  • combination :
Project use  RequireJS  Modular development , So we can use it  text.js  and  css.js  plug-in unit , introduce  HTML  and  CSS.

null
As shown in the figure above , We will log in to the... Of the component  HTML、CSS  and  JavaScript  Files in  base_login  Under the folder .

null
As shown in the figure above ,base_login  Files in the folder .

null
As shown in the figure above , This is a  index.html  The content in .

null
As shown in the figure above , This is a  index.css  The content in .

null
As shown in the figure above , This is a  index.js  The content in , It introduces  index.html  and  index.css  file .

null
As shown in the figure above , Use the login component in the page , First introduced , Reuse .

null
As shown in the figure above , This is the use of components .
The source code attachment has been packaged and uploaded to Baidu cloud , You can download it yourself ~
link : https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
Extraction code : yu27
Baidu cloud link is unstable , It may fail at any time , Let's keep it tight .
If Baidu cloud link fails , Please leave me a message , When I see it, I will update it in time ~

Open source address

Code cloud address :
http://github.crmeb.net/u/defu
Github  Address :
http://github.crmeb.net/u/defu
Open source is not easy ,Star  Show respect , Interested friends welcome  Star, Submit  PR, Maintain open source projects together , Benefit more people !

copyright notice
author[InfoQ],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/131/202205111232226765.html

Random recommended