J02 Web 内核、组成、创建方式及规范

zhangliying
493 阅读5分钟

一、浏览器分类

1.以谷歌浏览器webkit内核为主（V8引擎）

  • 谷歌浏览器 Chrome
  • 苹果浏览器 Safari
  • 国产浏览器
    • 360普通浏览器
    • 360极速浏览器
    • 猎豹浏览器
    • 搜狗浏览器
    • QQ浏览器
    • UC浏览器
    • ... 欧朋浏览器 Opera （v14版本时候）

2.Gecko内核

  • 火狐浏览器 Firefox

3.Trident内核

  • IE浏览器
    • IE6~8
    • IE9~IE11
    • IE Edge

4.blink

5.presto欧朋 v<14以下

二、开发者工具

打开开发者工具：F12 / FN+F12 （再或者浏览器页面 -> 右键 ->检查）

  • Elements 包含了当前页面中所有的结构和样式，基于它可以快速查看和调整页面的样式和结构等
  • Console 控制台，在JS中，我们可以向控制台输出一些内容，来进行项目的调试；如果项目程序出现问题，也可以在控制台查看报错信息；也可以在控制台编写代码，做一些测试...
  • Network 包含了当前页面所有向服务器发送的HTTP请求信息，一般用于前后端数据交互中的BUG调试以及页面中的性能优化
  • Sources 包含了当前项目的原代码
  • Application 可以看到本地存储的信息(Cookie/LocalStorage/SessionStorage...)以及当前网站中所有加载的图片等信息（抓取一些图片下来）
  • ...
  • 开启手机模拟器 Toggle Device Toolbar

三、Web页面由：

  • HTML 搭建页面结构
  • CSS 编写页面样式
  • JS 完成人机交互效果
    • 基本的人机交互效果
    • 页面中具体效果的实现
    • 页面中动态数据的获取和绑定
    • 可能会操作浏览器的一些功能
    • ...

=> JS是用来操作DOM和操作浏览器的

四、JS组成的三部分

  • ECMAScript（ES3 / ES6~9）定义了js语法规范，定义了语言本身的变量，变量，操作语句，内存管理等内容
  • DOM（document object model）文档对象模型：提供对应的属性和方法，可以让JS操作页面中的DOM元素
  • BOM（browser object model）浏览器对象模型：提供操作浏览器的属性和方法

备注：当代项目开发，一般都是基于Vue/React完成的，基于这两个框架，我们已经不去操作DOM了，我们操作数据，由框架本身帮助我们完成DOM的操作

五、JS中的变量 variable [ˈveəriəbl]

变量：可变的量（其存储的值是可变的），设置一个变量（起个名字），让其代表和指向某一个具体的值

1.JS中创建变量的几种方式

  • ES3：var
  • ES6：let 、const
  • function 创建函数
  • class 创建一个类
  • import / require 基于ES6Module或者Common.js规范导入模块
// 1.基于VAR创建一个叫做N的变量，让其指向具体的值10
var n = 10;
// 创建一个叫做M的变量，但是此时没有让其指向任何的值
var m;
// 在控制台输出n/m变量所代表的值
console.log(n, m); //=>10 undefined

// 2.基于ES6中的LET创建一个变量,让其指向100；但是后期让其重新指向了200；
let a = 100;
a = 200;
console.log(a); //=>200

// 3.基于ES6中的CONST创建一个变量，让其指向1000，此后B就不能再指向其它的值了，
//一旦去修改指向，则会报错；所以基于CONST定义的变量一般也被成为常量；
// const b = 1000;
// b = 2000;
// console.log(b); //=>Uncaught TypeError: Assignment to constant variable.

// 4.创建一个函数：也可以理解为创建一个变量func，让其指向这个函数
function func() {

}
console.log(func);

// 5.创建一个类：也可以理解为创建一个变量Parent，让其指向这个类
class Parent {

}
console.log(Parent);

// 6.基于模块规范来导入具体的某个模块：定义一个叫做axios的变量，用来指向导入的这个模块
// import axios from './axios';
// let axios = require('./axios'); */

// JS中的注释：ctrl + / 单行注释  shift + alt+ A 批量注释（块注释）

2.变量命名的规范

  • 严格遵循大小写
//=>编写代码的时候一定要区分大小写问题
let Test = 100;
console.log(test); //=>Uncaught ReferenceError: test is not defined
  • 使用驼峰命名法

由有意义英文组成一个名字，第一个单词首字母小写，其余每一个有意义的单词首字母大写

let studentInfomation = {
	name: 'Hello'
};
let studentInfo = {};

//=>项目中常见的有特殊含义的端词组
add / insert / create  新增/插入/创建
del / delete / remove  删除/移除
update 修改
select / query / get  查询/获取
info 信息
...
  • 命名规则：使用 “$、_、英文字母、数字” 命名

数字不能作为开头

// 基于$开头：一般代表使用JQ或者其它使用$的类库获取的内容
let $box;

// 基于_开头：一般代表是全局或者公共的变量
let _box = {};

// 基于数字区分相似名称的变量
let box1 = 10;
let box2 = 20;

// 数字不能作为开头
// let 2box = 10;

// 想要分隔单词，可以使用_或者驼峰，但是不能是-
// let box-list;
let box_list;
let boxList;

// 虽然不会报错，但是强烈不推荐
let 盒子 = 100;
console.log(盒子);

六、不能使用关键字和保留字

关键字：在JS中有特殊含义的 break do instanceof typeof case else new var catch finally return void continue for switch while debugger function this with default if throw delete in try let const

保留字：未来可能会成为关键字的 abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protected volatile double import public

// var var = 10;
avatar
文章
阅读
粉丝