Two years, all written Vue. Some time ago, to help back-end friends to write a few small pages, because the data they nested, even use background rendering data to the page, so the use of Zepto framework, using require. Js modular, convenient for them to see more intuitive, familiar code data call!

Check out the code github.com/Heyff12/pro… wapmanage

One day, they offered to add a question prompt to HTML! It’s easy when it looks like the code is already there, but simple things are often not simple.

Since zepto.js is introduced indirectly via require (the code below), you can’t directly code an HTML page using $.

< script SRC = "assets/js/require. 2.1.11. Min. Js" type = "text/javascript" data - the main = "assets/js/home/login. Js" defer async="true "></script>Copy the code

Bounced style

The CSS code:

div.toast_data_short { width: auto; Padding: 0.266667 rem; height: auto; The line - height: 0.56 rem; text-align: center; color: white; The font - size: 0.426667 rem; display: inline-block; background: #2f323a; position: fixed; z-index: 20; Border - the radius: 0.266667 rem; opacity: 0; top: 50%; Margin - top: 0.8 rem. z-index: -12; }Copy the code

Solutions:

1, re-introduce a zepto.js, and write the JS file of the require popbox module in the current page again, and then call ———— for one more request to weaken the page response performance; Code duplication;

2. Find an existing text popbox plug-in from CDN and introduce ———— alone, which still adds too much code, and the popbox style is not uniform, affecting user experience and overall coordination

3. Adapt a native JavaScript plugin — avoid reintroducing Zepto Reduce script code for HTML pages

Because of the simple style, less code, the final decision to adopt the third way. A plug-in, tip.js, was written

Plugin idea:

1. Executable closure format to prevent variable confusion; Define the popbox function, and introduce external parameters; Initializes the div code that adds a popbox inside the body

(function() { var tipAlert = function(options) { this.options = { "id": 'body', "content": options.content ? Options. content: 'error message ', "leftPx": 0}; this.init(); }; tipAlert.prototype.init = function() { let tipE = document.createElement("div"); tipE.id = "toast_data_short"; tipE.className = "toast_data_short"; document.body.appendChild(tipE); }; window.tipAlert = tipAlert; }) ();Copy the code

2. Add content to the bullet box and display it, and hide it after 3s display. The prototype property of the function adds the corresponding method, and the final complete code is shown below

(function() {var tipAlert = function(options) {this.options = {"id": 'body',// "content": options.content? Options. content: 'error message ',// prompt message "leftPx": 0// Popbox distance from the left pixel (ensure center)}; this.init(); // Initialize, write the HTML code this.tip (); // Call display box, 3s automatically disappear}; Prototype = function() {let tipE = document.createElement("div"); tipE.id = "toast_data_short"; tipE.className = "toast_data_short"; document.body.appendChild(tipE); }; / / show bounced tipAlert. Prototype. ShowTip = function () {let leftpx = this. Options. Leftpx; let tipE = document.getElementById("toast_data_short"); tipE.style.zIndex = 12; tipE.style.left = leftpx + "px"; TipE. Style. Opacity = 0.85; }; / / hide bounced tipAlert. Prototype. HideTip = function () {let tipE = document. The getElementById (" toast_data_short "); tipE.style.zIndex = -12; tipE.style.opacity = 0; }; Function () {let tipE = document.getelementById ("toast_data_short"); // call tipalert.prototype. Tip = function() {let tipE = document.getelementById ("toast_data_short"); tipE.innerHTML = this.options.content; this.options.leftPx = this.count_leftpx(); this.showTip(); window.setTimeout(this.hideTip, 3000); }; Prototype. Count_leftpx = function() {let tipE = document.getelementById ("toast_data_short"); var toast_w = tipE.offsetWidth; var body_w = document.body.clientWidth; var leftpx = (body_w - toast_w) / 2; return Math.floor(leftpx); }; window.tipAlert = tipAlert; }) ();Copy the code

How to use it: Introduce the tip.js file into the HTML page

<! <script SRC ="assets/js/plug/tip.js" type="text/javascript "></script> <script type="application/javascript"> var errorMessage = "[[${errorMessage}]]"; New tipAlert({"content": errorMessage}) </script>Copy the code

This case, emphasis on summary record, deepen memory. If there is a better code optimization scheme, welcome to discuss!