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

news2024/9/27 19:24:39

一 《学习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)通过命令行进入打包工具所在的文件夹,使用如下命令打包应用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/376004.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

博客系统——项目测试报告

目录 前言 博客系统——项目介绍 1、测试计划 1.1、功能测试 1.1.1、编写测试用例 1.1.2、实际执行步骤 1.2、使用Selenium进行Web自动化测试 1.2.1、引入依赖 1.2.2、提取共性&#xff0c;实现代码复用 1.2.3、创建测试套件类 1.2.4、博客登录页自动化测试 1.2.5、…

SQL注入报错注入之floor()报错注入原理分析

简介 对于SQL注入的报错注入通常有三个函数需要我们掌握&#xff1a; extractValue(xml_frag, xpath_expr)updateXML(xml_target, xpath_expr,new_xml)floor() 对于extractValue和updateXML函数来说比较好理解&#xff0c;就不做解释了&#xff0c;这里只对floor函数的报错注…

LabVIEW网络服务安全2

LabVIEW网络服务安全2在客户端应用程序中创建签名对请求进行签名要求您具有能够从客户端的编程语言调用的MD5摘要算法以及SHA256加密摘要算法的实现。这两种算法通常都可用于大多数平台。还需要&#xff1a;1. 要使用的HTTP方法的字符串&#xff08;“GET”、“POST”、“PUT”…

收发器上的10G网络变压器有什么特殊要求?

Hqst盈盛电子导读&#xff1a;那么&#xff0c;为了保证我们购买到正常的真正的具备POE功能的10G网络变压器&#xff0c;我们又要如何做呢以及如何判断呢&#xff1f;随着高速以太网网络传速的快速发展&#xff0c;10G以太网&#xff0c;10G网络变压器滤波器在各个领域也得到了…

基于SpringCloud的可靠消息最终一致性05:保存并发送事务消息

在有了分布式事务的解决方案、项目的需求、骨架代码和基础代码,做好了所有的准备工作之后,接下来就可以继续深入了解「核心业务」了。 在前面了解分布式事务时,可靠消息最终一致性方案的流程图是这样的: 图三十一:可靠消息最终一致性 整个的流程是: 1、业务处理服务在事务…

GLSL shader学习系列1-Hello World

这是GLSL shader系列第一篇文章&#xff0c;本文学习目标&#xff1a; 安装编辑工具编写hello world程序 安装插件 我使用VSCode编写shader代码&#xff0c;在VSCode上有两个好用的插件需要先装一下&#xff1a; Shader languages support for VS Code glsl-canvas&#xf…

优维科技实力入选《2023深圳金融业信息技术融合创新案例汇编》

日前&#xff0c;由深圳市金融科技协会编制的《2023深圳金融业信息技术融合创新案例汇编》于“2022中国&#xff08;深圳&#xff09;金融科技全球峰会”正式对外发布&#xff0c;共汇编近90个优秀金融技术应用实践案例&#xff0c;优维科技凭借在“某银行自动化运维XC改造项目…

STM32——毕设智能感应窗户

智能感应窗户 一、功能设计 以STM32F103芯片最小系统作为主控&#xff0c;实现自动监测、阈值设定功能和手动控制功能。 1、自动监测模式下&#xff1a; ① 采用温湿度传感器&#xff0c;实现采集当前环境的温度、湿度数值。 ② 采用光敏传感器&#xff0c;实现判断当前的环境…

【数据库/MySQL】MySQL三大日志提要

MySQL三大日志 mysql常用日志 错误日志查询日志慢查询日志事务日志【redo log&#xff08;重做日志&#xff09;、undo log&#xff08;回滚日志&#xff09;】二进制日志【bin log】 MySQL日志中比较重要的包括redo log&#xff08;重做日志&#xff09;、binlog&#xff0…

Docker 网络详解

前置网络知识 OSI七层网络模型 从下到上依次为&#xff1a;物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。 交换机&#xff1a;处在第二次&#xff0c;也就是数据链路层。作用&#xff1a;通过一个或者多个设备将不同子网连接在一起&#xff0c;相互通信&am…

Ant Design Vue 如何添加时间选择框

第一步引入 组件 import JDate from /components/jeecg/JDate使用 重点代码 <j-date<a-col :span"24/2"><a-form-item :labelCol"labelCol" :wrapperCol"wrapperCol" label"验收日期"><j-date placeholder"…

Lesson9---回归问题

9.1 机器学习基础 课程回顾 Python语言基础Numpy/Matplotlib/Pandas/Pillow应用TensorFlow2.0 低阶API 即将学习 机器学习、人工神经网络、深度学习、卷积神经网络典型模型的TensorFlow2.0实现 9.1.1 机器学习 机器学习&#xff08;Machine Learning&#xff09;&#xf…

2023年湖北七大员证书查询网站是哪里?

一、湖北七大员是哪七大员&#xff1f; 湖北七大员分别是&#xff1a;施工员、质量员、资料员、材料员、标准员、劳务员和机械员。其中施工员和质量员分为&#xff1a;市政、土建、装饰装修和设备安装四个子专业&#xff0c;其他不分。 二、湖北七大员证书查询网站是哪里&#…

Node下载阿里OSS存储文件【不知目录结构】

前言&#xff1a;前端传模型ID&#xff0c;后台根据ID去阿里OSS存储下载对应文件&#xff08;不知文件内部层级结构&#xff0c;且OSS只能单个文件下载&#xff09;&#xff0c;打包成zip字节流形式返回给前端下载。 需求分析&#xff1a; 生成OSS文件关系树Node做文件下载存…

ClickHouse 相关面试题

文章目录什么是 ClickHouse&#xff0c;它的特点是什么&#xff1f;ClickHouse的数据存储方式是什么&#xff0c;它与传统的行式存储有什么区别&#xff1f;ClickHouse 引擎ClickHouse的数据模型是什么&#xff0c;它与传统的关系型数据库的数据模型有什么区别&#xff1f;Clic…

【TVM 学习资料】TensorIR 快速入门

本篇文章译自英文文档 Blitz Course to TensorIR 作者是 Siyuan Feng。更多 TVM 中文文档可访问→TVM 中文站 TensorIR 是深度学习领域的特定语言&#xff0c;主要有两个作用&#xff1a; 在各种硬件后端转换和优化程序。自动 tensorized 程序优化的抽象。 import tvm from…

kafka(一) 的架构,各概念

Kafka架构 Kafak 总体架构图中包含多个概念&#xff1a; &#xff08;1&#xff09;ZooKeeper&#xff1a;Zookeeper负责保存broker集群元数据&#xff0c;并对控制器进行选举等操作。 &#xff08;2&#xff09;Producer&#xff1a; 生产者负责创建消息&#xff0c;将消息发…

Kafka 概述

文章目录Kafka定义消息队列消息队列应用场景缓冲/消峰 场景解耦 场景异步通信 场景消息队列两种模式点对点模式发布/订阅模式 ***kafka基础架构Kafka定义 消息队列 目前企业中比较常见的消息队列产品主要有 Kafka、ActiveMQ 、RabbitMQ 、RocketMQ 等。在大数据场景主要采用 Ka…

I.MX6ULL内核开发11:使用设备树实现RGB灯驱动

目录 一、实验说明 二、硬件原理图分析 2.1 打开原理图&#xff0c;找到rgb部分 2.2 对RGB的R灯进行寄存器设置 2.2.1 时钟配置 2.2.2 引脚复用GPIO 2.2.3 引脚属性设置 2.2.4 输出电平设置 三、实验代码 3.1 编程思路 3.2 代码分析 3.2.1 添加RGB设备节点 3.2.2 编…

openlayers加载离线地图并实现深色地图

问题背景 我们自己一直使用的openlayergeoserver自己发布的地图&#xff0c;使用的是矢量地图。但是由于政府地图大都使用为天地图&#xff0c;所以需要将geoserver的矢量地图更改为天地图&#xff0c;并且依旧是搭配openlayers来使用。 解决步骤 一&#xff1a;加载离线地图&a…