What are cross-domain issues and how to fix them
First of all, we use nginx as a proxy server to interact with users, so that users only need to interact on port 80, which avoids cross-domain problems, because we are all on port 80 Interactive; Let’s take a look at the specific configuration of using nginx as a reverse proxy: server { listen 80; #Listen to port 80, can be changed to other ports server_name localhost; # The domain name of the current service #charset koi8-r; #access_log logs/host.access.log main; location / { proxy_pass http://localhost:81; proxy_redirect default; } location /apis { #Add proxy configuration with access directory as /apis rewrite ^/apis/(.*)$ /$1 break; proxy_pass http://localhost:82; } #The following configuration is omitted 1. When the user sends localhost:80/, it will be forwarded to the http://localhost:81 service by nginx; 2. When the interface requests interface data , as long as it starts with /apis, it will be forwarded to the back-end interface server by nginx; Summary: The principle of nginx to realize cross-domain is actually to put the web project and the back-end interface project into one domain In this way, there is no cross-domain problem, and then request different servers (servers that really work) according to the request address; Recommended tutorial:…
js basics
js basic concept js local variables and global variables js Data type var is a weak data type, but js can recognize his data type About the method of js Writing of the method Method coverage Different from Java, there is no method overloading in js, only method coverage as long as the method names are the same. No matter how many parameters there are, js unity will only recognize the last method (method override) js data type conversion Although js only has one var to describe the variable (weak data type), the system can recognize his Data type, data type conversion can also be performed Operation calculation in js JS operation rules are the same as Java (but special attention: x=+y) function abc(){ var a=’#39;10′; var b='8'; console.log(“The value of b “+b+” The data type of b is converted to “+typeof(b)+” “+a) /* =+ first convert a to number and then copy the value of a to b */ /* += is equivalent to b+=a == b=b+a */ } Select statement and loop statement Short: same as java js main object window object time intervalr Array usage Basic operations on strings JS time formatting Recommended tutorial: “JS Tutorial” The…
JS regular expression character matching
Regular expression character matching This is some notes after reading “Javascript Regular Expression Mini Book”. Regular expressions are matching patterns that can match characters and positions. The following mainly introduces the situation of matching characters, and I am also learning the situation of matching positions. Two kinds of fuzzy matching: 1. Horizontal fuzzy matching: The length of a regular string that can be matched is not fixed of. This is achieved by using quantifiers. For example, {m,n} means that the character appears at least m times and at most n times. For example, /ab{2,5}c/ means to match such a string: the first character is “a”, followed by 2 to 5 characters “b”, and finally the character “c “. For example: (You can try it manually and think about the results you will get) var regex = /ab{2,5 }c/g; var string = “abc abbc abbbc abbbbc abbbbbc abbbbbbc”; console.log( string.match(regex) ); g is a modifier, which means global matching, which is to find all the strings that meet the matching conditions in order in the string. 2. Vertical fuzzy matching: A regular matchable string is specific to a certain character, it may not be a definite character, and there may be…
Comparison of JavaScript Object Iteration Methods and Performance
Object.entries Returns all enumerable key-value pairs of the object, and will not track the key on the prototype chain let obj = { key1: ‘value1’, key2: ‘value2’, key3: & # 39; value3 & # 39;, } Object.entries(obj).forEach(entry => { let key = entry[0] let value = entry[1] // entry will be like [“key1”, “value1”] }) Object.keys Return all enumerable keys of the object let obj = { key1: ‘value1’, key2: ‘value2’, key3: & # 39; value3 & # 39;, } Object.keys(obj).forEach(key => { let value = obj[key] }) Object.values Return all enumerable values of the object let obj = { key1: ‘value1’, key2: ‘value2’, key3: & # 39; value3 & # 39;, } Object.values(obj).forEach(value => { // only use value }) for…in loop Iterative enumerable properties will be found along the prototype chain let obj = { key1: ‘value1’, key2: ‘value2’, key3: & # 39; value3 & # 39;, } for (const key in obj) { let value = obj[key] if (obj. hasOwnProperty(key)) { // self } else { // from the prototype chain } } Object.getOwnPropertyNames Return all (including non-enumerable) keys of the object (the original text said that it will find the prototype chain is wrong ) let…
How does JS achieve super-beautiful 3D fireworks effects? (code example)
Not much nonsense, just upload the code: For more knowledge, please visit the Javascript Learning Guide! ! The above is how JS realizes super-beautiful 3D fireworks special effects? (code example) details, please pay attention to other related articles on 1024programmer.com!
How does JS achieve simple carousel image special effects? (Detailed explanation with pictures and texts)
Code Introduce MyTools.js library 1.html > 2.css *{margin: 0;padding: 0 ;} a { color: #999; text-decoration: none; position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, .4); } a:hover { color: #f8b62b; } i { font-size: 50px; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; } #box{ height: 482px; width: 830px; background-color: red; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden; } #box_content{ height: 100%; width: 100%; cursor: pointer; } #box_content img{ position: absolute; vertical-align: top; height: 100%; width: 100%; /*left: 830px;*/ } .box_img{ width: 100%; height: 100%; position: absolute;} .box_control_right{ position: absolute; right: 0; } .box_control_left{ position: absolute; left: 0; } ul{ position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-evenly; } ul>li { list-style: none; width: 16px; height: 16px; background-color: #fff; margin: 0 3px; border-radius: 50%; cursor: pointer; } ul>li.current{ background-color: darkorange; } 3.js window.addEventListener('load', function (ev) { // carousel (function () { // 1. Get the required label var boxCOntent = myTool. $(& # 39; box_content & # 39;); var cOntentImg = boxContent.children; var boxCOntrol = myTool. $(& # 39; box_control & # 39;); var cOntrolBottom = boxControl. children[2]; // 2. Global index var iNow = 0; // 3. Dynamically add the picture…
JavaScript Tricks
Arrays are everywhere in Javascript, and we can do a lot of cool things with the spread operator, a new feature in ECMAScript 6. 1. Iterate over an empty array The array created directly in Javascript is loose, so that there will be many pitfalls. Try to create an array using the array constructor, and you’ll understand in no time. const arr = new Array(4); [undefined, undefined, undefined, undefined] // [empty x 4] in Google Chrome You will find it very difficult to loop through some transformations through a loose array. const arr = new Array(4); arr. map((elem, index) => index); [undefined, undefined, undefined, undefined] To fix this, you can use Array.apply when creating a new array. const arr = Array.apply(null, new Array(4)); arr. map((elem, index) => index); [0, 1, 2, 3] 2. Pass an empty parameter to the method If you want to call a method without filling in one of the parameters, Javascript will report an error. method('parameter1', , 'parameter3'); // Uncaught SyntaxError: Unexpected token ,A common solution is to pass null or undefined. method('parameter1', null, 'parameter3') // or method('parameter1', undefined, 'parameter3'); According to the introduction of the spread operator in ES6, there is a more concise way…
The difference between arrow function and ordinary function
Preface The arrow function is a high-frequency test point in the front-end interview link. The arrow function is the API of ES6. I believe many people know it, because its grammar is more than the general The function of is more concise, so it is deeply loved by everyone. This is the API we have been using in our daily development, but most students don’t understand it enough. Let’s learn more about the basic syntax of down arrow functions and the difference between arrow functions and ordinary functions. 1. Basic Grammar 【1.1】Defining Functions Defining Arrow Functions in Number Grammar It is much more concise than ordinary functions. In ES6, arrows are allowed to be used => to define arrow functions. Arrow functions omit the function keyword, and the parameters of the function are placed in = In the parentheses before the >, the function body follows the curly braces after the =>. // Arrow function let fun = (name) => { return `Hello ${name} !`; }; // normal function let fun = function (name) { return `Hello ${name} !`; }; 【1.2】Arrow function parameters ① If the arrow function has no parameters, just write an empty parenthesis. ② If the arrow…
The browser’s event loop
Preface Browser event loop, most of the basic interviews will ask, this article talks about this knowledge point. Event loop mechanism The event loop is a set of mechanisms responsible for executing code, collecting and processing events, and executing subtasks in the queue . In the event loop mechanism, the stack data structure used is the execution context stack. Whenever a function is called, the corresponding execution context will be created and pushed onto the stack; the heap data is used The structure is mainly to represent a mostly unstructured memory area to store objects; the queue data structure used is the task queue, which is mainly used to store asynchronous tasks. As shown below: Although Node.js also has an event loop, it is completely different from the browser’s event loop. Node.js uses V8 as the parsing engine of js, and uses libuv designed by itself for I/O processing. libuv is an event-driven cross-platform abstraction layer that encapsulates some underlying features of different operating systems and provides a unified API externally. , the event loop mechanism is also implemented in it. I won’t talk about it here. If you want to know, go to the document yourself. Thanks for reading!…
Use Vue+TypeScript project to configure actual combat
The following js tutorial column will introduce how to use Vue+TypeScript project configuration for actual combat. I hope it will be helpful to friends in need! Using Vue+TypeScript project configuration actual combat Project construction Through scaffolding Building 1. Create a vue project through Vue CLI 3 vue create vue-typescript // select typescript support here ? Check the features needed for your project: () Babel () TypeScript ( ) Progressive Web App (PWA) Support () Router () Vuex >() CSS Pre-processors () Linter / Formatter ( ) Unit Testing ( ) E2E Testing I am a senior front-end architect who debuted in 2008. If you have any questions or exchange experience, you can enter my button skirt 519293536 and I will try my best to help you. // Introduce vue-class-component plugin // The following is probably my choice? Use class-style component syntax? (Y/n) y ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) ? Pick a linter / formatter config: Prettier? Pick additional…