关于脚本的运行顺序讲解

基本的顺序是当浏览器遇到<script> 标签时,则停止文档解析,并且,立即下载和执行脚本,脚本执行完毕后再继续解析文档。 如果我们用到defer, 浏览器遇到script 标签时,不会停止文档解析,其他线程将下载脚本,等文档解析完毕,脚本才会执行。 如果我们 用到async, 浏览器遇到script 标签时, 不会停止文档解析,同时其他线程将下载脚本,脚本下载完成后将开始执行,当脚本开始执行时,文档将停止解析,直到脚本执行完毕。 注意: async对于内联脚本没有用。 Defer的脚本是按照声明顺序执行的,而async的脚本不同,只要脚本下载完成,就会立即执行,未必会按照声明顺序执行。 如果同时使用async 和defer, 则会默认优先使用async。 写法例子:   因此,如果载入多个js文件,浏览器将按照顺序依次载入并且依次执行。 可能会碰到的问题: 如果js 中,会对HTML 文档的DOM树进行操作,并且<script>放在了<head>标签里面,那么肯定会出现问题,js将找不到DOM树的对象。因为js文件的载入阻塞了DOM树的生成,所以js已经在运行,但是DOM树对象还没有生成。因此,很多页面都是把JS文件放在页面尾部再调用;或者,将JS代码放在script标签里,同样放在页面尾部; 再或者, 使用defer; 如果你用的是jQuery, 可以使用document.load. 具体方法可参考这篇文章: JAVASCRIPT 装载和执行

JS—-JSON 基础

很感谢这篇文章的作者,有了他的解释,让我更容易理解了JSON, 以下学习笔记也有摘自于他的文章。 https://apriltail.com/2017/03/25/json-ru-guo-ni-yuan-yi-yi-ceng-yi-ceng-bo-kai-wo-de-xin-ni-hui-fa-xian-zhe-li-shui-hen-shen-shen-ru-li-jie-json/ JSON 是一种轻量的数据交换格式。 它是一种格式,(只是一种格式,并没有内存) 在JSON之前是一个叫xml,它也是一种传输格式,只不过需要很多标签,所以相对来说xml将会占据较大的空间。所以,如果传送相同内容的数据,JSON的格式占据的带宽更小。 JSON是如何被用的呢? 首先前端有个javascript对象,要传递数据,所以将这个对象转化为JSON形式的字符串,再发送到后端,后端PHP接受并转化为PHP对象,然后处理请求。 但是,JSON很严格,必须要遵守它的@格式@ 注意: JSON的字符串不能被JS的方法解析,只能用JSON的方法解析。 JSON 方法和函数: JSON.stringify,它是帮你把你写的不符合JSON格式的JS对象都处理成符合JSON格式的字符串,所以你得知道它到底干了什么,免得它只是自作聪明,然后让你Debug long time; 另一个叫JSON.parse,用于转化json字符串到JS数据结构,它很严格,你的JSON字符串如果构造地不对,是没办法解析的。   JSON.stringify的具体用法 1.将一个简单的JS对象转换成JSON字符串string. 2.将Array 转换成JSON 字符串string. 3.复杂型JS object转换 Result: 注意的点: 1. JSON.stringify 转换undefined ,如果是在object中,会删除undefined 一整项。如果是在array中,会转换成null. 2.不能转换function. 会删除function一整项 4.有两个参数,且第二个是函数 ' Result: 第二个参数改变了转换的过程,函数将优先执行函数,对第一个参数进行修改或置换。在这个例子中,key是参数一friend1中的属性,即,’firstName’, ’lastName’,’phone’,’age’.value是值。 5.有两个参数,第二个参数是数组 Result: 第二个参数在这里也是对参数一,起个过滤作用,JSON.stringify只转换了,两个参数都有的属性。 JSON.parse 的用法 JSON.parse是将JSON格式的字符串转换成原本的JS数据结构 这个由内而外指的是对于复合属性来说的,通俗地讲,遍历的时候,从头到尾进行遍历,如果是简单属性值(数值、字符串、布尔值和null),那么直接遍历完成,如果是遇到属性值是对象或者数组形式的,那么暂停,先遍历这个子JSON,而遍历的原则也是一样的,等这个复合属性遍历完成,那么再完成对这个属性的遍历返回。

What is (function(){})()?

I just found this function, which confuses me. Here is the example: Result: Looks like a little bit complex. But i will change to another classic example: This function means, immediately-Invoked Function Expression(自执行匿名函数) or IIFE. It executes immediately after it created. In the first parenthesis (), it means an anonymous function(匿名函数), the second parenthesis, it … Continue reading What is (function(){})()?

Using jQuery

Problem is : I want to use jQuery for button. But how ? install jQuery package. using the following ways:   Here is my first_page.js, and <button> is in my first_page.html(very simple code, no need to show). In this photo, there are 2 ways, one way is "rendered", another way is in comment, "events".   … Continue reading Using jQuery

Learning template

how to insert one template into page. I have my template, name is search.html this template related js file, search.js Importantly, we need to import "templating", "search.html", and set helpers, helpers is for setting your template name, not the file name. Now i want to use this template into my first_page.html, so we have to … Continue reading Learning template