Yapei Li

专注于前端领域

0%

js基础1、 基础理论

发表于 分类于
本文字数： 2.3k 阅读时长 ≈ 2 分钟

前端开发常用4个浏览器内核

  1. 谷歌浏览器（chrome）：Webkit内核（v8引擎）：-webkit-

    Safari、大部分国产浏览器（360、搜狗、QQ、UC、猎豹、百度…）

    webView、node都是V8引擎

  2. 火狐浏览器（Firefox）：Gecko内核 -moz-

  3. 欧朋浏览器（Opera）：Presto内核 -o-

  4. IE浏览器：Trident 内核 -ms-

什么是浏览器内核，浏览器内核是干什么的？

前端开发使用html/css/js编写代码，编写代码时要遵循一些规范（W3C）

浏览器开发商开发的浏览器，目的就是按照W3C的规范识别出开发者编写的代码，并且在页面中绘制出开发者预想的页面和效果（用GPU渲染）我们把浏览器中识别代码绘制页面的东西称为 浏览器的内核或者渲染引擎

浏览器兼容：

1、W3C发布的规范都是开发者们不断尝试总结下来的产物：-webkit-border-radius、-moz-border-radius => border-radius

2、每个浏览器为了彰显自己的不一样，不按照标准来，把标准中规定的效果用另一种方式实现了:获取所有元素的样式，规范：window.getComputedStyle,IE:currentStyle

导入js

行内导入js，<div onclick="alert(1)"></div>

内嵌式 : 在页面中的script标签中直接写js

外链式：通过script标签的src属性引入

内嵌式导入和外链导入不能合并在一起，如果当前是外链导入的，那么在script脚本块在编写的代码都不会被执行

Css导入方式

Alt text

css导入式一般放在style标签的开始

css 导入式和外链式的区别：

相同点：都是将独立的CSS样式文件引用到网页文件中来

不同点：

1、使用link链接css是：客户端浏览你的网页时先将外部的CSS文件加载到网页当中，然后再进行编译显示，所以这种情况下显示出来的网页跟我们预期的效果一样，即使网速再慢也是一样的效果。而使用@import导入的CSS就不同了，客户端在浏览网页时是先将html的结构呈现出来，再把外部的CSS文件加载到网页当中，当然最终的效果也是跟前者是一样的，只是当网速较慢时会出现先显示没有CSS统一布局时的html网页，这样就会给阅读者很不好的感觉。这也是现在大部分网站的CSS都采用链接方式的最主要原因；

2、导入样式可以避免过多页面指向一个css文件。当网站中使用同一个CSS文件的页面不是非常多时，这两种方式在效果方面几乎是没有不同的，但网站的页面数达到一定程度时（比如新浪等门户），如果采用链接的方式可能就会使得由于多个页面调用同一个CSS文件而造成速度下降，但是一般页面能达到这种程度的网站也会有资本用最好的硬盘，所以这方面的因素也不用怎么担心。

真实项目中我们一般把css放在BODY上面，把JS放在BODY的下面

元素渲染出来以后 我们才可以在JS在获取到

JS 的输出方式

弹出方式

1、alert():在浏览器中弹出一个提示框（只有确定）；

使用alert提示的内容（不管是什么类型的）都会被转化为字符串输出，调用的是toString这个方法实现的；

alert(1+1) => ‘2’ 字符串2；alert({name:’aaa’}) => “[object Object]”； alert([12,13]) => “12,13”

2、confirm：在alert基础上增加了让用户选择性的操作（提供了两个按钮：确定取消）；

var Bok=confirm(‘确定删除吗？’) 获取用户是确定还是取消 (确定是true 取消是false)

3、prompt：在confirm基础上增加让用户输入的效果

var Bok=prompt(‘确定删除吗？’) 1、用户点击 取消按钮都是（null）2、如果点击确定会返回输入的内容，如果没有输入内容返回的是空字符串

真实项目中，一般不使用这些弹框，样式太丑，会使用原生js封装模态框

控制台输出 （方便开发人员进行调试）

1、console.log() 在控制台输出不会转换数据类型，输出什么格式的数据都可以

2、console.dir 比log输出的更加详细尤其是输出对象数据的时候

3、console.table 把json数据展示成表格

4、document.write() 在页面中打印输出内容

JavaScript： ECMAScript+DOM+BOM

1、ECMAScript（ES）：规定了js的一些核心知识（变量、数据类型、语法规范、操作语句）版本：3、5、6、7

2、DOM：document object model 文档对象模型 ；里面提供了一些属性和方法，可以让我们操作页面中的元素

3、BOM：browser object model 浏览器对象模型，里面提供了一些属性和方法，可以让我们操作浏览器

JavaScript 是 ECMAScript 规范的一种实现。

JS中的命名规范

1、JS中严格区分大小写
2、遵循国际命名规则 驼峰命名法:第一个单词首字母小写，后面的单词首字母都必须大写

1
2
3
4
5
6
info:  信息
init：初始化
add/insert/create  :增加、插入、创建
remove /rm /clear/del/delete：  删除
update：修改
get/query/select  查询获取

3、命名的时候可以使用$ 、_ 、 数字、字母 ；但是数字不能作为第一位

1
2
var  $XXX  :一般代表 jquery获取的值
var _XXX   ：代表变量是全局或者公用的

4、JS中很多的词都是有特殊含义的，我们叫做关键字；现在没有特殊含义，以后可能作为关键词的我们叫保留字；关键字和保留字都不能随便用来命名；
关键字：
Alt text
保留字：

js方法注释

Alt text