Template literals

It is a time to learn something new of ES6, which is famous as `Template literals`. Here is the link of resources, in english https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals. Here is my notebook: Template literals are enclosed by the back-tick ( ``) character instead of double or single quotes.  One of good advantages is that it can achieve the multi-line strings. As … Continue reading Template literals

Advertisements

关于脚本的运行顺序讲解

基本的顺序是当浏览器遇到<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(){})()?