前端开发笔记这一系列主要记录自己所遇到的问题,由一个小白心态出发,遇到的问题一一记录下来,楼不是一天盖的,学习也一样,戒骄戒躁,共勉。
由于时间有限,我会将其他文章进行汇总以及精简,并会在后面注明作者链接。
jQuery中级--$(function() {})和$(document).ready(function(){ })
$(document).ready() 里的代码是在页面内容都加载完才执行的,如果把代码直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,此时如果标签里执行的代码调用了当前还没加载过来的代码或者dom,那么就会报错,当然如果把script标签放到页面最后面那么就没问题了,此时和ready效果一样。
$(document).ready(function(){})可以简写成$(function(){});
所以我们进行总结一下:
$(document).ready 里的代码是在页面内容都加载完才执行的,如果直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,如果标签里执行的代码调用了当前还没加载过来的代码或者dom,那么就会报错。但是如果把script标签当到页面最后面那么就没问题,可以达到和ready差不多的效果。
$(document).ready() 方法是事件模块中最重要一个函数,可以极大的提高 Web 应用程序的速度。需要注意一点,由于在 $(document).ready() 方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕,并且已经解析为 DOM 树了,但很有可能图片还没有加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。
原文:https://blog.csdn.net/u010297791/article/details/53819380
function fn(){}和var fn=function(){} 的区别
JavaScript是一种解释型语言,函数声明会在JavaScript代码加载后、执行前被解释,而函数表达式只有在执行到这一行代码时才会被解释。
在JS中有两种定义函数的方式,
1是:var aaa=function(){...}
2是:function aaa(){...}
var 方式定义的函数,不能先调用函数,后声明,只能先声明函数,然后调用。
function方式定义函数可以先调用,后声明。
var func=function 和 function func()在意义上没有任何不同,但其解释优先级不同: 后者会先于同一语句级的其他语句。
即: { var k = xx(); function xx(){return 5;} } 不会出错, 而 { var k = xx(); var xx = function(){return 5;} } 则会出错。
原文:http://www.cnblogs.com/yongtaiyu/articles/3200722.html
javascript报错const不能用
"Const definitions are not supported by current JavaScript version"
解决方案:file->setting->Language&Frameworks->javascript,选中es6
原文地址:https://blog.csdn.net/weixin_38958405/article/details/83022837
异常报错
1.
jquery-3.3.1.min.js:2 Access to XMLHttpRequest at 'file:///D:/jstest/echarts/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
出现这种报错,首先查看自己的目录中是否有提示的文件,再检查代码中是否有GET之类的请求
如果有GET之类的请求,使用服务器打开网页
服务器启动方法:http://www.browsersync.cn/
2.
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-KpHv3zgivMSB4dPnfYfqMt2lBibsYvM36EdoBBAsfbM='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
出现这种错误,应该是没有指定html位置
browser-sync工具,默认会寻找index.html文件,如果没有找到,会报错
解决方法有二
1.将引用外部链接的html文件名称改为index.html
2.访问地址端口后缀加入具有外部链接的html文件,如图
异步$().Get无法阻塞,导致的一系列问题
jquery的异步与并发处理原理上并不同,在调用异步的情况下要多考虑后续参数的接收返回
否则很容易翻车
总结:
-
Javascript引擎解析是一个单线程的过程,浏览器无论在任何时候有且只有一个线程在运行Javascript程序;
- 浏览器是多线程的,这些线程在内核控制下相互配合以保持同步。在处理js的异步上浏览器内核的实现可能有多个进程:Javascript引擎线程、界面渲染线程、浏览器事件触发线程、HTTP请求线程…… 补充 : 这些线程的名字为渲染引擎、网络、js解析器等 参考自 前端必读:浏览器内部工作原理
-
Javascript除了一个主线程外,还配有一个代码队列,这个队列用以存放定时器、HTTP请求、事件响应的回调。
所以我对这个流程的理解是这样的:
Javascript代码自上而下执行的,当执行到定时器、或者发送HTTP请求、或者发生用户交互事件响应时,会自动触发对应事件(HTTP请求、事件响应),将回调函数储存到队列中。Javascript执行完主线程代码后,会去执行任务队列,队列内这个时间点是否有代码要执行;如果有,则执行队列中的代码。
进一步理解——对队列:
有细心的会发现,上面的理解没有加入"定时器",我对此的进一步理解: 有一个现象,Javascript里提供了console.time(name)
和console.timeEnd(name)
可以打印出一段代码的执行时间。由此,我感觉Javascript每一段代码的执行都会有记录一个时间。Javascript会根据这个时间来安排队列.
当代码执行到用户交互事件时,会传入回调给队列,该回调的时间就是事件触发的时间;当代码执行到定时器的时候,传入队列的回调函数的时间是定时器触发的时间加上延迟;而HTTP请求传递给队列的回调函数的时间则是其取得数据的时间(我感觉中间可能穿插了一个readyState==4
时会重新传入一个时间,或者可以直接抛去时间,做if判断,判断状态是4时执行);这样可以根据时间对队列进行进一步排序,形成一个自上而下的队列!
原文地址:http://www.cnblogs.com/zhaowinter/p/5390337.html
今天我遇到的问题是在给echartsjs中的某个关键词传入参数时,提示data.times找不到
经过一番查找,问题出现在异步中
由于异步还未执行完毕,后续的函数立刻调用异步应该返回的数据,因此报错
这个问题估计刚刚接触js异步的同学都会遇到,希望类似问题举一反三,引以为戒