前端开发笔记2-源码阅读初期，记录自己遇到的疑惑

最新推荐文章于 2024-07-20 13:07:26 发布

原创最新推荐文章于 2024-07-20 13:07:26 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquer #function #js

web 专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨了前端开发中常见的问题，包括jQuery的$(document).ready()与$(function(){}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端开发笔记这一系列主要记录自己所遇到的问题，由一个小白心态出发，遇到的问题一一记录下来，楼不是一天盖的，学习也一样，戒骄戒躁，共勉。

由于时间有限，我会将其他文章进行汇总以及精简，并会在后面注明作者链接。

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.youkuaiyun.com/u010297791/article/details/53819380

function fn(){}和var fn=function(){} 的区别

JavaScript是一种解释型语言，函数声明会在JavaScript代码加载后、执行前被解释，而函数表达式只有在执行到这一行代码时才会被解释。

在JS中有两种定义函数的方式，

1是：var aaa=function(){...}

2是：function aaa(){...}

var 方式定义的函数，不能先调用函数，后声明，只能先声明函数，然后调用。

function方式定义函数可以先调用，后声明。

原文：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.youkuaiyun.com/weixin_38958405/article/details/83022837

异常报错

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/

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异步的同学都会遇到，希望类似问题举一反三，引以为戒