Reason:
“Extensions” in the configuration file:“ eslint:recommended Property enables this rule
This rule prevents lexical declarations (let, const, function, and class) from appearing in case or default clauses. The reason is that the lexical declaration is visible throughout the switch statement block, but it is initialized only when it runs to the case statement it defines
Solution: modify “rules”: {} in eslintconfig: {} in package.json and add a line of code: “no console”: “off”
NPM install after saving
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},or:
window.console.log(“…”)
Wrote a function and got an error when calling.”Uncaught TypeError: Cannot set property ‘innerHTML’ of null”
Code Below
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var func3 = function(a,b){
return a + b
}
console.log(func3(1,2))
var x = func3(99, 1)
console.log(x)
document.getElementById('demo').innerHTML = x;
</script>
</head>
<body>
<p id=demo>The value to be modified</p>
</body>
</html>explains: the reason for the error is that the innerHTML in document is empty, that is to say, when loading the JS file, the object called is the < in the text. p> Label
Therefore, you need to place the JS file reference in <p> After the label, i.e
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var func3 = function(a,b){
return a + b
}
console.log(func3(1,2))
</script>
</head>
<body>
<p id=demo>The value to be modified</p>
<script>
var x = func3(99, 1)
document.getElementById('demo').innerHTML = x;
</script>
</body>
</html>Conclusion: this small problem exposes the problem of understanding the loading order of HTML files. That is, the content in html is loaded in the order of HTML itself
Therefore, when introducing JS or adding <script> Content is executed after HTML content
Error message:
Uncaught TypeError: Cannot read property ‘toLowerCase’ of undefined
How to solve this error:
The object does not have the correct.
incorrect:
$("#type").change(function(){
if($(this).val()==''){
return;
}
var choose= new Array();
$("input[name='choose[]']:checkbox").each(function(){
if($(this).prop("checked") == true){
choose.push($(this).val());
}
});
if(choose == ''){
layer.msg("No channel selected",{icon:2,time:2000});
return ;
}
layer.confirm('Sure you want to add the selected channel to this model?', {icon: 3, title:'tips'}, function(index){
$.ajax({type:"post",timeout:"<?php echo TIMEOUT;?>",url:"<?php echo base_url('channel/defchanneladd');?>",
data:{choose:choose,tvmodel_id:$("#this").val()},success:function(data){
var obj = JSON.parse(data);
layer.msg(obj.msg, {icon: obj.code,time:1000},function(){
if(obj.code == '1'){
window.location.reload();
}
});
}});
});
});
This object in the image above has changed. Pay attention to this
Change this to # type, that is, the select tag
Original code:
for(var i=0; i<li_obj.length; i++) {
li_obj[i].onmouseover = function() {
li_obj[i].style.backgroundColor = "blue";
}
}
Error: Uncaught TypeError: Cannot read property ‘style’ of undefined(…)
How to Solve this error:
for(var i=0; i<li_obj.length; i++) {
li_obj[i].index = i;
li_obj[i].onmouseover = function() {
li_obj[this.index].style.backgroundColor = "blue";
}
}
Or
for(var i=0; i<li_obj.length; i++) {
li_obj[i].onmouseover = function() {
this.style.backgroundColor = "blue";
}
}
< script type ="text/javascript" >
function updateTime(){
var timeNow = new Date();
var hour = timeNow.getHours();
var minute = timeNow.getMinutes();
var second = timeNow.getSeconds();
var millisecond = timeNow.getMilliseconds();
// Get the pointer on the dial to rotate
var sec = document.getElementById( ' seconds ' );
var min = document.getElementById ( " minutes " );
var H = document.getElementById ( " hours " );
// pointer rotation
sec.style.transform = ' rotateZ ( ' + (SECOND * 360 / 60 * millisecond. 6 + / 1000 ) + ' deg) ' ;
min.style.transform = ' rotateZ( ' + (minute *360 / 60) + 'deg)';
h.style.transform = ' rotateZ ( ' + (hour * 360 / 12 is minute * 30 + / 60 ) + ' deg) ' ;
}
the setInterval ( function () {
updateTime () ;
}, 50 )
updateTime();
var scales = document.querySelectorAll( ' .scale ' );
var nums = document.querySelectorAll(' .num ' );
for ( var i = 0 ; i < scales.length;i ++ ){
scales[i].style.transform = ' rotateZ( ' + (i * 30 ) + ' deg) translateY(- 200px) ' ;
nums[i].style.transform = ' rotateZ( ' + (i *- 30 ) + ' deg) ' ;
}
</ script >
< div id ="all" >
< div class ="second" id ="seconds" ></ div >
< div class ="minute" id ="minutes" ></ div >
< div class ="hour" id ="hours" ></ div >
< div class ="scale" >< span class ="num" > 12 </ span ></ div >
< div class ="scale">< span class ="num" > 1 </ span ></ div >
< div class ="scale" >< span class ="num" > 2 </ span ></ div >
< div class ="scale" >< span class ="num" > 3 </ span ></ div >
< div class ="scale" ><span class ="num" > 4 </span ></ div >
< div class ="scale" >< span class ="num" > 5 </ span ></ div >
< div class ="scale" >< span class ="num" > 6 </ span ></ div >
< div class ="scale" >< span class ="num" > 7 </ span ></ div >
< div class="scale" >< span class ="num" > 8 </ span ></ div >
< div class ="scale" >< span class ="num" > 9 </ span ></ div >
< div class ="scale" >< span class ="num" > 10 </ span ></ div >
< div class ="scale" >< span class ="num" > 11</ span ></ div >
</ div >The problem lies in the JS that is written first, and the HTML code that is written later. Therefore, when the program is executed, js is compiled first. At this time, the HTML has not been parsed, so the style attribute cannot be parsed. The solution is to put the HTML file on it. go with.
Today, after adding a new page, no data can be found on the home page. Error: request failed with status code 404
I didn’t get the data from the background. At the beginning, I thought it was a problem with the background control layer. I searched for it for a long time
Finally, we found that the proxy proxy was not configured in APP/config/index.js, and the request was not routed from nodejs to Tomcat
So with the configuration, the data is found successfully
Problem, in the process of nuxt development, run NPM run dev to report an error directly. The error information is as follows
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.
Causes and Solutions
Reason: This exception indicates a version conflict in babel, a babel dependency package is not compatible, there is both babel version 7.0 and babel version 6.0 in the package.json dependency package.
The two versions are obviously incompatible, so we can upgrade all of them to babel 7.0.
Solution: Upgrade to babel 7.0 with npm install [email protected] and the version conflict will be solved.Abstract:
Starting gzip when packaging can greatly reduce the size of the package, which is very suitable for online deployment. Smaller size for user experience
It means faster loading speed and better user experience.
Vue-cli3.0 project
Installation dependency: compression webpack plugin
npm install compression-webpack-plugin –save-dev
vue.config.js Revision:
const CompressionPlugin = require('compression-webpack-plugin');
constproductionGzipExtensions=/.(js-124css-124json-124txt *)?$/i;
module.exports = {
publicPath: './',
productionSourceMap: false,
configureWebpack: {...},
chainWebpack: config =&> {
config.resolve.alias.set('@', resolve('src'));
if (process.env.NODE_ENV === 'production') {
config.plugin('compressionPlugin')
.use(new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: true
}));
}
},
};Parameter configuration of compression webpack plug in: View on the official website（ https://www.webpackjs.com/plugins/compression-webpack-plugin/ ）
）
Parameter configuration of compression webpack plug in: View on the official website（
Parameter configuration of compression webpack plug in: View on the official website（
gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 32k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6].";Gzip use environment: http, server, location, if (x), generally defined in nginx.conf Http { Between
gzip on
on is enabled and off is off
gzip_ min_ length 1k
Set the minimum number of bytes of the page that can be compressed. The number of bytes of the page is obtained from the content length in the header. The default value is 0, no matter how many pages are compressed. It is recommended to set the number of bytes larger than 1K. If the number of bytes is less than 1K, it may increase.
gzip_ buffers 4 16k
How much memory is used to cache compression results?”4 16K” means to get the compression results in 16K * 4
gzip_ comp_ level 5
Gzip compression ratio (1 ~ 9), the smaller the compression effect is, the worse the compression effect is, but the larger the processing speed is, the slower the processing speed is, so the intermediate value is generally taken
gzip_ types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php
Takes effect for specific MIME types, where ‘text/HTML’ is forced to be enabled by the system
gzip_ http_ version 1.1
Identify the version of HTTP protocol. Early browsers may not support gzip self decompression, and users will see garbled code
gzip_ vary on
Enable reply header “vary: accept encoding”
gzip_ proxied off
When nginx is used as a reverse proxy, it is enabled, off (compression of all proxy result data is turned off), expired (compression is enabled, if the header contains “expires” header information), and no cache (compression is enabled, if the header contains “cache” header information)- Control:no-cache “), no store (compression enabled, header header contains” cache “- Control:no-store “), private (compression enabled, The header contains “cache”- Control:private “),no_ last_ Modefied (compression enabled, header header does not contain “last modified”), no_ Etag (enable compression, if header does not contain “Etag” header information), auth (enable compression, if header contains “authorization” header information)
gzip_ disable msie6
Ie5.5 and IE6 SP1 use the msie6 parameter to disable gzip compression) to specify which browsers (which will match with user agents) do not need gzip compression, depending on the PCRE library
Server configuration from juan26 = &> https://segmentfault.com/a/1190000012571492?utm_ source=tag-newest
Note: (gzip)_ Static on) the dynamic compression of nginx is to compress each request first and then output it, which causes the virtual machine to waste a lot of CPU. To solve this problem, we can use the nginx module gzip Precompression, this module is used to directly read the compressed file (file name is plus. GZ) for the file that needs to be compressed, instead of dynamic compression. For the request that does not support gzip, read the original file.
1. Files can be compressed using gzip or any other compatible command.
2.gzip_ Static configuration takes precedence over gzip.
3. Open nginx_ After static, we will first find out whether there is a corresponding GZ file for any file.
4.gzip_ Types setting to gzip_ Static is invalid.
5. Gzip static is applicable to HTTP 1.1 by default.
Unpack
EnPack
The onload event is a standard event in DOM, while the ready event is specific to jQuery.
The purpose of the ready event is that it should occur as soon as the document is loaded, so that code that adds functionality to elements in the page does not have to wait for everything to load.
The ready event occurs after the HTML document is loaded, while the onload event occurs after all content (such as images) is loaded.
From: https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready