狂神Javascript笔记

　　学习狂神JavaScript所记录的笔记

　　Soc原则：关注点分离原则

　　Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

　　HTML + CSS + JS : 视图 ：

　　网络通信 ： axios

　　页面跳转 ： vue-router

　　状态管理：vuex

　　Vue-UI : ICE , Element UI

　　HTML（结构）：超文本标记语言，决定网页的结构和内容

　　CSS（表现）：层叠样式表，设定网页的表现样式

　　JavaScript（行为）：是一种弱类型脚本语言。其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为

　　太简单，略

　　CSS层叠样式是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等等，换句话说就是不具备任何语法的支持

　　主要缺陷：

　　语法不够强大，无法嵌套书写，导致模块化开发中需要很多重复的选择器；

　　没有变量和合理的样式服用机制，使得逻辑上相关的属性值必须以字面量的形式重复书虫，导致难以维护；

　　为了解决上述问题，前端开发人员会使用一种称之为【CSS预处理器】的工具，提供CSS确实的样式层服用机制，较少冗余代码，提高样式代码的可维护性。

　　什么是CSS预处理器 通俗理解：用一种专门的编程语言，进行web页面样式设计，在通过编译器转化为正常的CSS文件，以供项目使用。

　　常用CSS预处理器：

　　SASS:基于Ruby，通过服务器处理，功能强大。解析效率较高。需要学习Ruby语言，上手难度高于LESS。

　　LESS：基于Node JS,通过客户端处理，使用简单。功能比SASS简单，解析效率也杜宇SASS，但在实际开发中足够了，所以我们和后台人员如果需要的话，建议使用LESS。

　　JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。

　　Native 原生JS开发

　　原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持。截至到当前，ES标准以发布如下版本：

　　ES3ES4（内部，未正式发布）ES5（全浏览器支持）ES6（常用，当前主流版本：webpack打包成为ES5支持） 因为前后端使用的版本可能不一样，所以需要webpack打包，使得两个版本相互支持ES7ES8ES9（草案阶段） 区别就是逐步增加新特性。

　　TypeScript 微软的标准

　　TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集， 而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯·海尔斯伯格(C#、Delphi、TypeScript之父； .NET创立者) 主导。该语言的特点就是除了具备ES的特性之外还纳入了许多不在标准范围内的新特性，所以会导致很多浏览器不能直接支持TypeScript语法， 需要编译后(编译成JS) 才能被浏览器正确执行。

　　JavaScript框架

　　JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能；、 Ant-Design：阿里巴巴出品，基于React的UI框架ElementUI、iview、ice：饿了么出品，基于Vue的UI框架BootStrap：Teitter推出的一个用于前端开发的开源工具包AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架 Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScriptWebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载 注：以上知识点已将WebApp开发所需技能全部梳理完毕

　　混合开发（Hybrid App）

　　主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：

　　云打包：HBuild -> HBuildX，DCloud 出品；API Cloud本地打包： Cordova（前身是 PhoneGap） 微信小程序

　　详见微信官网，这里就是介绍一个方便微信小程序UI开发的框架：WeUI

　　前端人员为了方便开发也需要掌握一定的后端技术但我们Java后台人员知道后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了Node JS这样的技术。Node JS的作者已经声称放弃Node JS(说是架构做的不好再加上笨重的node modules，可能让作者不爽了吧)开始开发全新架构的De no

　　既然是后台技术，那肯定也需要框架和项目管理工具， Node JS框架及项目管理工具如下：

　　Express：Node JS框架Koa：Express简化版NPM：项目综合管理工具，类似于MavenYARN：NPM的替代方案，类似于Maven和Gradle的关系 Vue.js

　　iView

　　iview是一个强大的基于Vue的UI库， 有很多实用的基础组件比element ui的组件更丰富， 主要服务于PC界面的中后台产品。使用单文件的Vue组件化开发模式基于npm+webpack+babel开发， 支持ES 2015高质量、功能丰富友好的API， 自由灵活地使用空间。

　　官网地址Githubiview-admin 备注：属于前端主流框架，选型时可考虑使用，主要特点是移动端支持较多

　　Element UI

　　Element是饿了么前端开源维护的Vue UI组件库， 组件齐全， 基本涵盖后台所需的所有组件，文档讲解详细， 例子也很丰富。主要用于开发PC端的页面， 是一个质量比较高的Vue UI组件库。

　　·官网地址

　　·Git hub

　　·vue-element-admin

　　备注：属于前端主流框架，选型时可考虑使用，主要特点是桌面端支持较多

　　ICE

　　飞冰是阿里巴巴团队基于React/Angular/Vue的中后台应用解决方案， 在阿里巴巴内部， 已经有270多个来自几乎所有BU的项目在使用。飞冰包含了一条从设计端到开发端的完整链路，帮助用户快速搭建属于自己的中后台应用。

　　官网地址。Git hub 备注：主要组件还是以React为主， 截止2019年02月17日更新博客前对Vue的支持还不太完善，目前尚处于观望阶段

　　VantUI

　　Vant UI是有赞前端团队基于有赞统一的规范实现的Vue组件库， 提供了-整套UI基础组件和业务组件。通过Vant， 可以快速搭建出风格统一的页面，提升开发效率。

　　官网地址Github AtUI

　　at-ui是一款基于Vue 2.x的前端UI组件库， 主要用于快速开发PC网站产品。它提供了一套n pm+web pack+babel前端开发工作流程， CSS样式独立， 即使采用不同的框架实现都能保持统一的UI风格。

　　·官网地址

　　·Git hub

　　Cube Ul

　　cube-ui是滴滴团队开发的基于Vue js实现的精致移动端组件库。支持按需引入和后编译， 轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

　　官网地址Github 混合开发

　　Flutter

　　Flutter是谷歌的移动端UI框架， 可在极短的时间内构建Android和iOS上高质量的原生级应用。Flutter可与现有代码一起工作， 它被世界各地的开发者和组织使用， 并且Flutter是免费和开源的。

　　官网地址Github

　　备注：Google出品， 主要特点是快速构建原生APP应用程序， 如做混合应用该框架为必选框架 lonic

　　lonic既是一个CSS框架也是一个Javascript UI库， lonic是目前最有潜力的一款HTML 5手机应用开发框架。通过SASS构建应用程序， 它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MV VM框架和Angular JS/Vue来增强应用。提供数据的双向绑定， 使用它成为Web和移动开发者的共同选择。

　　官网地址 ·官网文档

　　·Git hub

　　微信小程序

　　mpvue

　　mpvue是美团开发的一个使用开发小程序的前端框架， 目前支持微信小程序、百度智能小程序，头条小程序和支付宝小程序。框架基于， 修改了的运行时框架和代码编译器实现， 使其可运行在小程序环境中， 从而为小程序开发引入了开发体验。

　　·官网地址

　　·Git hub

　　备注：完备的Vue开发体验， 井且支持多平台的小程序开发， 推荐使用

　　WeUI

　　WeUI是一套同微信原生视觉体验一致的基础样式库， 由微信官方设计团队为微信内网页和微信小程序量身设计， 令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

　　官网地址Github （见上述介绍）

　　ECMAScript它可以理解为是JavaScript的一个表混

　　最新版本已经到se6版本

　　但是大部分浏览器还只是停留在支持es5代码上！

　　开发环境—线上环境，版本不一致

　　2.1引入JavaScript 1、内部标签

　　2.外部引入

　　我们在js包下写了一个qj.js，所以在html可以直接外部引入

　　2.2基本语法入门 浏览器必备调试须知：

　　

　　2.3数据类型 数值，文本，图形，音频，视频

　　变量

　　number

　　js不区分小树和整数，Number

　　字符串

　　比较运算符 ！！！重要！

　　这是一个JS的缺陷，坚持不要使用 == 比较

　　须知：

　　NaN === NaN，这个与所有的数值都不相等，包括自己

　　只能通过isNaN（NaN）来判断这个数是否是NaN

　　浮点数问题

　　null 和 undefined

　　null 空

　　undefined 未定义

　　数组

　　Java的数组必须是相同类型的对象~，JS中不需要这样

　　对象

　　对象是大括号，数组是中括号

　　每个属性之间使用逗号隔开，最后一个属性不需要逗号

　　取对象值

　　person.name

　　“Tom”

　　person.age

　　3

　　2.4严格检查格式 就是’use strict’;

　　3.1、字符串 1、正常字符串我们使用 单引号，或者双引号包裹

　　2、注意转义字符

　　3、多行字符串编写 4、模板字符串 5、字符串长度 6、字符串的可变性，不可变 下面的student可以被重新赋值，但是取出来的时候还是原来的值，表示字符串是不可变的（在java中同样也不可变）

　　

　　7、大小写转换 8、student.indexOf(‘t’) 9、substring 3.2数组 Array可以包含任意的数据类型

　　长度

　　注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值小（注意是缩小数组的长度），元素就会丢失；如果赋值过大，则会自动讲后面为赋值的位置设置为空（undefined）

　　2.indexOf，通过下标元素获得下标索引

　　字符串的"1"和数字1是不同的

　　3、slice() 截取Array的一部分，返回一个新数组，类似于String中的substring

　　4、push（）压入到尾部，pop（）弹出尾部的一个元素

　　5、unshift：压入到头部 shift：弹出头部的一个元素

　　6、排序sort（）

　　7、元素反转

　　8、concat() 数组拼接

　　注意：concat（）并没有修改数组，只是会返回一个新的数组

　　9、连接符 join

　　打印拼接数组，使用特定的字符串连接

　　10、多维数组

　　3.3对象 若干键值对

　　Js中对象，{。。。。。。}表示一个对象，键值对描述属性xxxx：xxxx，多个属性之间使用都好隔开，最后一个属性不加逗号！

　　1、对象赋值

　　2、使用一个不存在的对象属性，不会报错！undefined

　　3、动态的删减属性，通过delete删除对象的属性

　　5、判断属性值是否在这个对象中！xxx in xxx

　　6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

　　3.4、流程控制 if判断 while循环 do while for 和java一样

　　foreach循环

　　ES5.1特性

　　for …in ------下标

　　截取部分结果

　　

　　3.5、Map和Set ES6的新特性~

　　Map

　　Set：无序不重复的集合

　　3.6、iterator 作业：使用iterator来遍历迭代我们Map，Set！

　　遍历数组

　　遍历set

　　4.1、定义函数 定义方式一

　　绝对值函数

　　结果

　　abc(10)

　　10

　　abc(-10)

　　10

　　一旦执行到return代表函数结束，返回结果！

　　如果没有执行return，函数执行完也会返回结果，结果就是undefined

　　定义方式二

　　function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！

　　方式一和方式二等价！

　　参数问题：javaScript可以传任意个参数，也可以不传递参数~

　　参数进来是否存在问题？假设不存在参数，如何规避？

　　arguments

　　是一个JS免费赠送的关键字；

　　代表，传递进来的所有参数，是一个数组！

　　问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~

　　rest

　　以前：

　　ES6引入的新特性，获取除了已经定义的参数之外的所有参数~…

　　rest参数只能写在最后面，必须用…标识。

　　//现在的方法(rest参数)：在函数中定义rest参数

　　结果

　　

　　4.2、变量的作用域 变量的作用域

　　变量的一般使用

　　全局对象window

　　局部作用域let

　　ES6let关键字，解决局部作用域冲突问题，现建议大家都用let去定义局部变量

　　常量const

　　在ES6之前，定义常量使用全部大写字母命名的变量就是常量

　　在ES6之后，用const定义常量

　　4.3、方法 定义方法

　　方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

　　apply方法

　　apply方法是可以控制this指向的，该方法有两个参数，第一个是getArg要使用的是那个对象，第二个是数组

　　标准对象

　　5.1、Date 基本使用

　　转换

　　5.2、JSON json 是什么

　　早期，所有数据传输习惯使用XML文件!

　　JSONlavaScript Object Notation, JS对象简谱)是- -种轻量级的数据交换格式。

　　简洁和清晰的层次结构使得JSON成为理想的数据交换语言。

　　易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。在JavaScript -切皆为对象、任何js支持的类型都可以用JSON来表示; number, string…

　　格式:

　　对象都用{}数组都用[]所有的键值对都是用key:value json字符串和js对象的转换

　　对象转化为json字符串(json字符串每个键都用""或’包围)

　　var jsonuser = JSON. stringify(user);

　　json字符串转化为对象参数为json 字符串

　　var obj = JSON. parse(’ {“name”:“qinjiang” , “age” :3,“sex”:“男”}’);

　　json和js对象的区别：

　　5.3、Ajax 原生的js写法 xhr异步请求jquery封装好的方法 $("#name").ajax("")axios 请求 原型对象

　　JavaScript、Java、C#。。。面向对象；JavaScript有些区别！

　　类：模板 原型对象

　　对象：具体的实例

　　在JavaScript这个需要大家换一下思维方式！

　　1、原型对象

　　当创建一个新函数时，系统会根据一组特定的规则为函数创建一个prototype属性，该属性会指向一个名为原型对象的对象，在默认情况下，该对象会自动生成一个构造函数（constructor），该构造函数是一个指向函数的指针。而在原型对象中，除了有这个构造函数，我们还可以添加其他的属性和方法。

　　通俗来讲就是，当我们新建一个函数A时，函数A内部会有一个属性，该属性指向一个对象（名字叫原型对象），而这个对象里面默认有一个构造函数，这个构造函数指向我们最初新建的函数A。然后，我们还可以在原型对象中添加属性和方法

　　6.2、面向对象class继承

　　关键字是在ES6引入的

　　2、继承

　　本质：查看对象原型

　　

　　原型链:(java中叫继承)

　　_ proto _:

　　

　　浏览器介绍

　　avaScript和浏览器关系？

　　JavaScript诞生就是为了能够让他在浏览器中运行！

　　BOM：浏览器对象模型

　　IE 6~11chromeSafariFirefox 三方

　　QQ浏览器360浏览器 window

　　window代表浏览器窗口

　　Navigator

　　Navigator，封装了浏览器的信息

　　大多数时候，我们不会使用对象，因为会被人为修改

　　不建议使用这些属性来判断和编写代码

　　screen

　　代表屏幕尺寸 (这里我的电脑显示的是1536*864，因为其图像被放大了125%)

　　lcation

　　location 代表当前页面的URL信息

　　location属性：

　　主机：host当前指向的位置：href协议:protocol重新加载的方法：f reload() //location.reload()刷新网页(设置新的地址:location.assign(‘想要跳转的地址’)) document

　　document代表当前的页面，HTML DOM文档树

　　history

　　history代表浏览器的历史记录

　　DOM：文档对象模型

　　核心

　　浏览器网页就是一个树形结构！

　　更新：更新Dom节点 遍历dom节点删除dom节点添加dom节点 要操作一个dom节点，就必须先获得这个dom节点

　　获得dom节点

　　这是原生戴拿，之后我们金量都使用jquery();

　　更新节点

　　操作文本

　　修改文本的值可以解析HTML文本标签 操作JS

　　删除节点

　　删除节点的步骤： 先获取父节点，通过父节点删除自己

　　注意：删除多个节点时，children是时刻变化的，不能直接father.removechild(father.children[0])这样从第一个索引开始删!

　　插入节点

　　我们获得了某个dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个dom节点以及存在元素了，就不能这么干了，因为会产生覆盖，这个时候就使用追加节点的方法：

　　效果：

　　

　　创建一个新的标签

　　insertBefore 在前面插入节点

　　表单是什么 form DOM 树

　　文本框 text下拉框 < select >单选框 radio多选框 checkbox隐藏框 hidden密码框 password… 表单的目的：提交信息

　　获得要提交的信息

　　提交表单 。 md5加密密码，表单优化

　　表单提交，md5加密优化版：

　　JavaScript

　　jQuery库，里面存在大量的额JavaScript函数

　　获取jQuery

　　使用时导入包或者jQuery的cdn网址

　　jq使用的公式：$(selector).action() //这个selector选择器就是css的选择器.action是事件

　　选择器

　　原生的js选择器的种类有：

　　标签选择器：document.getElementByTagName()

　　id选择器： document.getElementByID()

　　类选择器： document.getElementByClassName()

　　jq选择器有（CSS中的选择器他全部都可以使用）

　　标签选择器：$(‘p’).click();id选择器：$(’#id1’).click();class选择器：$(’.class1’).click(); 文档工具站： https://jquery.cuishifeng.cn/

　　例子：

　　事件

　　有鼠标事件、键盘事件、其他事件

　　

　　操作DOM

　　节点文本操作

　　css的操作

　　元素的显示和隐藏：本质;

　　娱乐测试(带’’$“,基本上都需要到jquery包)

　　未来ajax();

　　自己写html的时候可以去自己喜欢的网页拷贝其相关的页面，打开浏览器的调试模式在Element的界面上调试（删除无关紧要的部分，保留核心文件，拷贝成html格式，粘贴在我们的项目中，修改css格式即可）

　　

　　推荐资源 ：

　　友人C

　　小技巧

　　1、如何巩固JS（看jquery源码，看游戏源码！）

　　2、巩固HTML。CSS（扒网站，全部down下来没然后对应修改效果）

　　Layer弹窗组件

　　Element-ui Layui Bootstrap antdesign