一·JS相关概念

2017-11-06 本文已影响0人饥人谷_小侯

1.JS基本概念

标识符

所谓标识符是指变量、函数、属性的名字，或者函数的参数。
标识符的书写有几个特征：
1.区分大小写。
2.第一个字符必须是字母、下划线（_）、或者是$。
3.后面的可以是字母、数字、下划线、$。
4.标识符可以使用中文，但是一般不推荐这么做。

命名规约

使用是实际意义的单词。
变量使用驼峰规则，第一个单词首字母小写，后面单词首字母大写。
变量使用名词，方法函数使用动词开头，常量全部用大写字母，函数创建对象首字母大写。

var firstName;
var isSmall;
var hasClass;
var PI;
var MAX_COUNT;
function getName(){}
function Person(){}

变量

在JavaScript中变量是用来保存值的占位符，定义变量的时候要使用var运算符，后面跟一个作为名称的标识符即可。

var message;

弱类型

在一些编译语言（C、Java、C#）等变量的类型是固定的，在声明变量的时候就要标识其类型，在程序执行前编译阶段变量的类型就确定了，而且不能改变，我们称之为强类型。

int a = 2;
string b = "hello";

一些常见的解释型语言（PHP、JavaScript）等变量的类型是松散的，一个变量可以用来保存任何类型的数据，变量的类型不是由声明时决定（声明的时候只是用了var运算符），而是在程序执行阶段由其值的类型决定，随着程序运行其值类型改变，变量类型也会发生改变。

var message = 1; //message 类型就是数字
message = "hello world!"; //message 类型变为字符串

语句

语句（statement）是为了完成某种任务而进行的操作，比如下面就是一行赋值语句。

var a = 1 + 2;

这条语句先用var运算符，声明了变量a，然后将 1+2 的运算结果赋值给变量a。
JavaScript中语句以;结束，一行可以包含多条语句，如果省略分号不会产生语法错误，解释器会自动判断语句结束。

var sum = 1 + 2
var diff = 3 - 4;

变量提升

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。
我们写了一个赋值语句。

var a = 2;

实际上执行过程是解释器在未执行的时候先解析出变量声明，然后给他初始值undefined，然后才逐句执行程序。

var a;
a = 2;

注释

并不是所有的语句都会执行，我们可以通过注释功能让js引擎忽略部分语句，这个功能经常用来解释我们的部分语句，和读书做标注一样。
Javascript提供两种注释：一种是单行注释，用//起头；另一种是多行注释，放在/* 和 */之间。

//为变量赋值
var a = 1; //赋值成功

/*
    下面定义个函数
    至于什么是函数
    且听下回分解
*/

    function getName(id){
        return 'Byron';
    }

关键字和保留字

关键字是JavaScript引擎会用到的一些字，我们标识符不能再使用，比如定义变量的关键字var，关键字有：
break、else、new、var、case、finally、return、void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instanceof、typeof
除了这些不能用作标识符的关键字，js还规定了一些不能用作标识符的保留字，这些字符没有什么意义，但是未来会用到：
abstract、enum、int、short、boolean、export、interface、static、bye、extends、long、super、char、final、native、synchronized、
class、float、package、throws、const、goto、private、transient、
debugger、implements、protected、volatile、doubler、import、public
实际上一些保留字在新的ECMAscript已经得到使用

2.认识Javascript

网页的组成：

网页 = Html+CSS+JavaScript

Html: 网页元素内容
CSS: 控制网页样式
JavaScript：操作网页内容，实现功能或者效果

javascript

javascript和java没有任何关系。
是客户端脚本语言。
ECMAScript, DOM, BOM, NodeJS。

引入方式

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>标题</title>
    <link href="index.css" rel="stylesheet">
    <style>
        body{
            background: red;
        }
    </style>
    </head>
    <body>
        <p>
        </p>
        <script src="index.js"></script>
        <script>
            alert(1);
        </script>
    </body>
    </html>

浏览器渲染机制

解析 HTML 标签, 构建 DOM 树。
解析 CSS 标签, 构建 CSSOM 树。
把 DOM 和 CSSOM 组合成渲染树 (render tree)。
在渲染树的基础上进行布局, 计算每个节点的几何结构。
把每个节点绘制到屏幕上 (painting)。
参考：How browsers work

白屏问题

如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。
如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
因此我们使用 link 标签将样式表放在顶部。

FOUC (Flash of Unstyled Content) 无样式内容闪烁

如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC。

Javascript的放置位置

JS放在底部
1.脚本会阻塞后面内容的呈现。
2.脚本会阻塞其后组件的下载。
对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致白屏现象。

加载异步

    <script src="script.js"></script>

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

    <script async src="script.js"></script>

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

    <script defer src="script.js"></script>

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。