Front-end
js how to implement drop-down control list
Specific implementation code: Category name Category Description Categorized products Existing products Huawei Xiaomi Hammer oppo >> >>> No product iPhone 6 Kidney 7 Nokia Waveguide << <<< Recommended tutorial: js introductory tutorial The above is the detailed content of how js implements the drop-down control list. For more, please pay attention to other related articles on 1024programmer.com!
js how to create immutable objects
The immutability of objects means that we don’t want objects to change in any way after creation (making them read-only types). Suppose we need to define a car object and use its properties throughout the project to perform operations. We cannot allow any data to be incorrectly modified. const myTesla = { maxSpeed: 155, batteryLife: 300, weight: 2300 }; Object.preventExtensions() prevents extensions This method prevents adding new properties to existing objects, preventExtensions() is an irreversible operation, We can never add extra properties to objects again. Object.isExtensible(myTesla); // true Object. preventExtensions(myTesla); Object. isExtensible(myTesla); // false myTesla.color = 'blue'; console.log(myTesla.color) // undefined Object.seal() seals It prevents adding or removing properties, seal() also Can prevent property descriptors from being modified. Object.isSealed(myTesla); // false Object. seal(myTesla); Object.isSealed(myTesla); // true myTesla.color = 'blue'; console.log(myTesla.color); // undefined delete myTesla. batteryLife; // false console.log(myTesla.batteryLife); // 300 Object.defineProperty(myTesla, & #39;batteryLife'); // TypeError: Cannot redefine property: batteryLife Object.freeze() Freeze It works the same as Object.seal(), and it makes the property unwritable. Object.isFrozen(myTesla); // false Object. freeze(myTesla); Object.isFrozen(myTesla); // true myTesla.color = 'blue'; console.log(myTesla.color); // undefined delete myTesla. batteryLife; console.log(myTesla.batteryLife); // 300 Object.defineProperty(myTesla, & # 39; batteryLife & # 39;); // TypeError: Cannot redefine property: batteryLife myTesla. batteryLife = 400;…
How to use boolean operators in js
Operation rules: If the first operator returns true, return the value of the second operator (not a Boolean value); if the first If an operator returns false, the first operator is returned, and the second operator is no longer evaluated (short circuit) // &# 39; a’ converted to boolean is true, so directly return the second operator ” & # 39; a & # 39; & & & # 39; & # 39; // & # 39; & # 39; converted to boolean is false, so return the first operator directly & # 39; & # 39; '' && 'a' Or operator (||) Or Operators are also used for the value of multiple expressions Operation rules: If the Boolean value of the first operator is true, then return the value of the first operator directly; if the first operator If the Boolean value of an operator is false, then return the value of the second operator // Boolean value of '' is false, so here returns ‘b’ & # 39; & # 39; || & # 39; b & # 39; // The boolean value of ‘b’ is true, so here returns ‘b’ & # 39; b & # 39;…
Detailed explanation of Promise and Async in JS
Because Javascript is a single-threaded language, synchronous code executes only one line at a time. This means that if the synchronous code runs for more than an instant, it will stop the rest of the code from running until it finishes running. To prevent code with an indeterminate runtime from blocking other code from running, we need to use asynchronous code. Promise For this, we can use Promise in our code. A Promise represents an object whose process runs for an indeterminate time and may result in success or failure. To create a promise in Javascript, we use the constructor of the Promise object to create the promise. The Promise constructor accepts a fulfillment function with resolve and reject parameters. Both parameters are also functions, which allow us to call back the promise fulfillment (successful call gets a return value) or rejection (returns an error value and marks the promise as failed). The return value of the function is ignored. Therefore, promises can only return promises. For example, we define a promise in Javascript like the following code: const promise = new Promise((resolve, reject) = > { setTimeout(() => resolve('abc'), 1000); }); The code above creates a promise that returns…
Encapsulate Axios in Vue
In the previous project, the request API and the request method are encapsulated. This encapsulation is for simplicity, better management of the interface given by the backend, reusability of the request code, and simplification of the code. Install axios $ npm install axios Create directory File Create http directory in src Create http.js user in http directory so request method Create in http directory api.js is used to store the backend interface create axios.js user in the http directory as an axios interceptor create vue.config.js user request proxy under the root directory Configuration Next is the code The code in the project/scr/http/http.js import axios from & # 39; axios & # 39;; export default { /** * get request * @param url interface route * @param auth Whether to bring login information * @returns {AxiosPromise} */ get(url, auth = false) { if (auth) { return axios.get(url, {headers: {Authorization: 'Your back-end user authenticates information'}}); } else { return axios. get(url); } }, /** * post request * * @param url interface route * @param data interface parameters * @param auth Whether to bring login information * @returns {AxiosPromise} */ post(url, data, auth = false) { if (auth) { return axios.post(url, data,…
js generates random numbers within a certain range
//Generate random numbers from minimum min to maximum max function random(min,max){ if(min > max){ var ls = min; min = max; max = ls; } return Math. floor(Math. random() * (max-min+1) ) + min; } Recommended tutorial: js introductory tutorial The above is the detailed content of js to generate random numbers within a certain range. For more, please pay attention to other related articles on 1024programmer.com!
Use of Touch events on JS mobile terminals
With the popularization of smart phones and tablet computers, more and more people use mobile devices to browse the web. The mouse events we usually use on PC browsers, such as: click, mouseover, etc., are no longer available Satisfying the characteristics of the touch screen of mobile devices, the arrival of the touch era is inseparable from those touch events. Touch event contains 4 interfaces. TouchEvent Represents the event that occurs when the touch behavior changes on the plane. Touch Represents the user’s finger and the touch plane A touch point between. TouchList Represents a series of Touch; Generally, this interface is used when the user touches the touch surface with multiple fingers at the same time. DocumentTouch contains some convenient methods for creating Touch objects and TouchList objects. (refer to https:/ /developer.mozilla.org/zh-CN/docs/Web/API/Touch_events ) The TouchEvent interface can respond to basic touch events (such as a single finger click), which contains Some specific events, Event type: touchstart: touch start (finger on the touch screen) touchmove: drag (finger on the touch screen Move) touchend: The touch ends (the finger is removed from the touch screen) touchenter: The moving finger enters a dom element. touchleave: The moving finger leaves a dom element.…
jQuery for JSZepto Mobile
Zepto github address: https: //github.com/madrobby/zepto Official address: http://zeptojs.com / Chinese version address: http://www.css88.com/doc/zeptojs_api/ Zepto is the mobile version of jQuery, which can be regarded as a lightweight jQuery Attention Zepto The purpose of the design is to provide a similar API to jQuery, but not 100% coverage of jQuery The bottom layer of jQuery is to achieve the effect through DOM, and zepto.js is realized by css3; The zepto downloaded from the official website already contains the default modules described on the official website The zepto module downloaded from github needs to be imported by itself Zepto click event Because there are many gestures on the mobile terminal and double-click and double-click, the click event on the mobile terminal has a delay of about 300ms, so the click on the mobile terminal Events use tab $(“div”).tap(function(){ … }) Touch related events in Zepto touchstart touchstart is an event triggered when a finger just touches an element touchmove touchmove is an event triggered when the finger moves touchend triggered when the finger leaves the specified element Attention When adding the above three events, use addEventListener The above three events are invalid on the PC side The object of the touch event…
Using PHP-like magic methods in JS
Javascript magic methods This script uses Proxy to implement magic methods similar to PHP in Javascript. Example You can use it like this: const Foo = magicMethods (class Foo { constructor () { this.bar = 'Bar' } __get(name) { return `[[${name}]]` } }) const foo = new Foo foo. bar // “Bar” foo.baz // “[[baz]]” If you are using a Javascript compiler like Babel with decorators enabled, you can also use magicMethods functions as decorators: @magicMethods class Foo { //… } Magic methods supported Given a class Class and instance, the following are the magic methods supported by this script: __get (name) Called when an attempt is made to access instance[name] and name is not an attribute of instance. Note: In PHP, checking for the existence of name in an instance does not use any custom __isset() methods. __set(name, value) This method is called when an attempt is made to use instance[name] = … and the instance does not have a name attribute set. __isset(name) This method is called when an attempt is made to check whether name exists by calling name in instance. __unset(name) This method is called when trying to unset the name attribute via delete instance[name]. Other…
This link will evoke mobile phone QQ, if it cannot jump normally, please upgrade QQ first
, Background introduction It is a lot of companies or enterprises to invoke QQ from the browser to chat A customer service method that will be used. However, in many cases, some mobile browsers do not support direct jumping to QQ, or do not support jumping to QQ pages from the web pages embedded in the app. Text For the official website of QQ promotion and QQ promotion, you only need to scan and log in the QQ number that needs to be evoked, and you can generate a piece of code As follows: The number “123456789” here is the QQ number that needs to be awakened. Using this method, you can invoke the QQ client in most browsers and locate the chat page, but this method will fail in the following situations: 1. The Safari browser that comes with the Apple mobile phone will prompt whether to open the link in the AppStore. If you choose yes, it will directly jump to the App Store, and then you can jump to QQ, but the parameters will be lost after two jumps, resulting in failure Open the object that needs to be chatted; 2. In the Google browser on the…
