javascript学习+Vue学习+项目开发

Posted 2023-03-07 Coding With you.....

一 《学习javascript数据结构与算法》 

1.ES2015的类是基于原型语法的语法糖

2.TypeScript是一个开源的、渐进式包含类型的JavaScript超集

以．ts为扩展名

以tsc命令来编译它

TypeScript允许我们给变量设置一个类型，不过写法太啰唆了。
TypeScript有一个类型推断机制，也就是说TypeScript会根据为变量赋的值自动给该变量设置一个类型
如果声明了一个变量但没有设置其初始值，推荐为其设置一个类型


在js中如果要加类型，可以写成ts那样，在第一行加上@ts-check就可以

3.展开运算符（...）会把数组里的值都展开成参数

4. JavaScript在做字符比较的时候，是根据字符对应的ASCII值来比较的,所以sort()默认也是按这个排，并不是所谓的升序/降序 需要我们自定义传入函数

5.有一种数据类型可以确保属性是私有的，这就是WeakMap。可以存储键值对，其中键是对象，值可以是任意数据类型。

二javascript+vue+react全程实例

1.react

1.React框架主要用于构建前端UI，其核心思想就是封装组件。各个组件维护自身的状态和UI，每当状态变更时都会自动重新渲染整个组件，而不需要反复查找DOM元素后再重新渲染更改整个组件了。

2.主要特点：（1）声明式设计：React采用声明范式，可以轻松描述应用。（2）高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。（3）灵活：React可以与已知的库或框架很好地配合。（4）使用JSX语法：JSX是JavaScript语法的扩展，可以极大地提高JS运行效率。（5）组件复用：通过React构建组件，使得代码易于复用，可在大型项目应用开发中发挥优势。（6）单向响应的数据流：React实现了单向响应的数据流，减少了重复代码，比传统数据绑定方式更简单。

3.调用React DOM对象的render()方法来渲染元素，和new Vue()的作用差不多

4.JSX，其实就是JavaScript XML的缩写，直译过来就是基于JavaScript的XML。JSX看起来似乎是一种XML格式，其实本质上仍是JavaScript语言，只不过是将js脚本书写成XML格式。JSX作为一种标记语言，支持自定义属性，并具有可扩展性。同时，JSX基本是专用于React开发的，如果打算在html页面输出DOM节点和内容，我们推荐使用React内置的JSX语法来实现。另外，如果要在React中使用JSX语法，则必须引用“babel.js”文件来解析JSX，同时<script>标签中必须改用“type="text/babel"”属性。原因在于使用“type="text/babel"”属性替换“type="text/javascript"”属性，浏览器内置的JavaScript解释器就不会解析里边的代码，转而由babel进行解析，从而避免React代码与原生JavaScript代码发生混淆。

JSX中调用JavaScript函数与表达式一样，同样是需要使用大括号“ ”来引用

5.组件

就是将内容写到一个类里面，然后将类名作为一个标签/组件进行渲染

class关键字声明一个继承React Components（组件）的类

可以通过props对象实现传参（从创建对象的参数传到类中）

6.React是把Components（组件）视作一个状态机（State Machines）来设计的

React专门定义了一个state（状态）属性用于更新Components（组件）状态。在React应用中，用户交互工作只需通过更新组件的state（状态）就可以实现，根据更新后的state（状态）来渲染UI并保持UI和数据的一致（不需要操作DOM）。

状态（state）必须以this关键字的方式（this.state）调用，同时类组件应始终使用super(props)来调用基础构造函数。

7.React Components（组件）设计了一个生命周期（LifeCycle）的方式，可以通过挂载和卸载计时器来实现动态同步

生命周期（LifeCycle）方式提供了挂载（componentDidMount()）和卸载（componentWillUnmount()）这两个钩子方法来实现生命周期管理。

状态（state）通常会被称作是局部封装，除了拥有并设置它的组件外，其他组件都不可访问。

2.vue

1.设计思想就是通过以数据驱动和组件化视图来构建用户界面

2.在Vue.js框架中，还提供了一个“$”前缀符号来引用Vue构造器的参数，以便将其与用户自定义的属性进行区分。

3.添加了一个“v-”前缀指令（v-once），该指令将会执行一次性插入文本的操作。具体来讲，就是当改变Vue构造器属性（contentOnce）的值时，不会同步更新 （contentOnce）值所显示的内容。------实际改变了，只是展示不变

三Javascript设计模式与开发实践

1.基础

1.原型模式和基于原型继承的JavaScript对象系统

2.设计模式

四 HTML5移动web开发从入门到精通

五vue.js前端开发

六vue.js  node.js开发实战

1.状态管理

1.一些小项目如果引入Vuex进行状态管理，不仅会使原本逻辑清晰的代码和结构变得复杂，甚至会增加开发难度，造成代码冗余。所以官方认为，如果不是大中型单页应用，不需要引入Vuex，即使需要同步数据，自带的store模式也足够使用。如果需要构建大中型单页引用，那么Vuex是必然的选择。

2.采用store对象，Vuex被注册成一个store之后，可以在全局的组件中使用，如果只需要其中的值，调用$store这个全局对象就可以。

3.因为Vue.js中所有的数据绑定都采用单向传输方式，直接对数据进行改写根本不会通知组件，所以组件自然无法获取变化后的数据，此时页面不发生任何变化。这也是Vuex出现的原因。Vuex提供了一个Mutation对象，所有对数据的修改都必须通过该对象进行操作。

2.element ui

1.网站 Element - The world's most popular Vue UI framework

2.Ant Design of Vue支持Vue.js的服务器渲染，还支持Electron开发PC版本的应用。官方文档的主页网址为https://www.antdv.com/docs/vue/introduce-cn/

一套专用的中后台支持（https://pro.ant.design/index-cn/）方案

3.设计：需求分析  功能设计

1.系统设计需求和技术说明

架构：前后端分离，提高复用性

技术：采用JavaScript系列技术，后端选择Express框架进行开发，前端使用Vue.js技术进行开发，尽可能实现页面的组件化，以方便对不同产品的UI进行替换。

数据持久化：eg Redis存储热点数据

2.功能设计

描述具体的需求、不同功能模块的划分

3.后端接口定义，用于前端获取数据的api

4.整理项目流程图

4.开发

1.初始化后端项目，比如使用express框架；连接好数据库后进行后端接口开发

2.编写前端页面：采用vue开发，实现与后端接口的数据一致性交互展示

5.部署和上线

使用远程服务器进行连接：直接连接就行

使用nginx搭建Node.js服务器：它是当下最强大的静态资源服务器，不仅支持静态资源的发布，还支持反向代理，通过简单的配置还能实现路由重写或负载均衡。  这样访问静态资源的速度会加快

在服务器端部署代码：接口 跨域啥的 防火墙之类

基本的网站优化技术：CDN

使用nw.js将网站打包为一个桌面软件：nw.js是一种跨平台解决方案，从DOM/WebWorker层直接调用所有的Node.js模块，使用现有的Web技术开启了一个全新编写应用的方式。

（1）使用nw.js，必须先下载

（2）在打包工具的同级目录中新建package.nw文件夹，并将要打包的静态文件放在该文件夹中。

（3）在package.nw文件夹中新建package.json文件用来配置nw.js，指定入口文件、名称和描述等

（4）通过命令行进入打包工具所在的文件夹，使用如下命令打包应用