类型推断类型猜测：我们定义的数据，没有指明类型，此时ts会根据赋值的结果做猜测。类型推断：我们定义的变量，有时候，我们比计算机更了解变量的类型，此时让计算机去猜测可能达不到预期，如果我们告诉计算该数据的类型，此时计算机分配内存空间的时候，可能更加的精确了注意：类型的推断并没有对数据类型做转换。有两种语法第一种 <类型>数据第二种 数据 as 类型枚举类型枚举类型是一种新的数据类型，介于
模块ts也只是ES Module规范定义模块。并且允许我们在代码中，通过module关键字定义内部的模块此时模块内部的信息是隐秘的，想使用，必须在模块内部通过export关键字将其暴露出来ts中的模块是通过闭包实现的。举例：// 定义模块module Ickt { // 使用什么数据，就要通过export关键字，将其暴露出来 export let color = 'red'; /
接口js中接口是指方法的apits这里的接口是指一种数据结构，接口是用来描述这种数据结构的通过interface来定义，接口只用来定义（数据）结构，不要去实现，当遇到一种复杂的数据的时候，我们可以通过接口来描述它的结构我们将介绍三种接口：函数接口，对象接口，类接口函数接口函数有三种方式：定义式，表达式，构造函数式在函数的表达式中，会用一个变量来引用这个函数，在程序运行前，为了开辟空间，我们要定义接
配置环境变量有时候我们要执行一些执行，但是指令文件只是在特定的目录中，如果这些目录在环境变量中配置了，这些目录中的指令文件就可以在系统的任何位置访问了，这样我们就可以直接使用这些指令打开环境变量配置计算机 => 属性 => 高级系统设置环境变量操作新增：是创建一个新的环境变量编辑：修改原来的环境变量换将变量有两类系统环境变量：可以在任何用户中使用用户环境变量：只能在该用户中是用。jav
项目实战技术架构我们使用了React，jsx, 路由，create-react-app, axios, less, webpack实现一个单页面应用程序目录部署build 文件发布的目录src 开发的目录app 应用程序pages 所有页面components 所有组件router.jsx 路由index.jsx 入口文件base.less 样式文件我们遵守create-react-app命名规范
测试方法describe用来描述测试体的第一个参数表示测试的目的（具有目的性）第二个参数是测试体，在测试体中，我们进行测试it用来定义每个测试语句第一个参数表示测试语句的说明（具有目的性）第二个参数是函数，表示测试功能的实现（将具体的断言写在函数内）expect用来定义断言的。参数是一个表达式，返回值就是需要判断的结果，我们可以通过一些判定方法来判断判断方法toBe()相当于===toEqual(
ant-design一款react的移动端ui框架，提供了大量的组件，方便我们的开发官网, 移动端npm也是一个npm模块我们也可以通过npm来安装npm install antd-mobile安装完成，我们就可以在项目中使用这些组件了按需加载antd-mobile提供的组件太多，全部加载进来会使文件很大。所以要按需加载。我们就要为webpack添加babel-plugin-imp
路由中使用redux在路由中使用redux只需要两步第一步 在路由策略组件中（如HashRouter），渲染Route组件，并在该Route路由规则组件中，引入connect方法处理后的应用程序组件第二步 在Provider组件中，渲染路由策略组件（如HashRouter）。注意：路由规则渲染组件的时候，路由规则组件只负责向组件传递路由相关的数据，其他的数据（如store数据）是不会传递的所以Ro
观察者模式解决组件间通信问题使用观察者解决组件间通信，分成两步在一个组件中，订阅消息在另一个组件中，发布消息发布消息之后，订阅的消息回调函数会执行，在函数中，我们修改状态，这样就可以实现组件间通信了。这就是reflux框架的实现。react-reduxredux早期被设计成可以在各个框架中使用，因此在不同的框架中使用的时候，要引入相应的插件在react中使用要引入react-redux，因此我们要
reduxredux严格按照flux思想实现的一套框架，实现了单一数据流向。组成部分redux由四部分组成action 组件发布的消息store 存储消息的reducers 捕获action，处理数据的方法view 组件视图了通信流程一个组件发布actionaction通过store被reducers捕获reducers根据消息的类型处理数据reducers将新的数据存储在store中store将
混合react提供了组件的目的是为了复用虚拟DOM，所以react提供了混合的技术是为了复用组件的功能在ES5中，我们可以通过mixins使用，继承对象中的属性和方法但是ES6中，提供了extends关键字实现了继承，因此就移除了mixins，所以我们可以通过extends实现混合的继承。分成两步第一步 定义混合类，继承组件基类第二步 组件类，继承混合类这样组件类，通过混合类就继承了组件基类之所以
父组件向子组件通信在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信。传递的数据可以分成两类子组件是作为属性来接收这些数据的第一类就是数据：变量，对象，属性数据，状态数据等等这些数据发生改变，子组件接收的属性数据就发生了改变。第二类就是方法：父组件可以向子组件传递属性方法，子组件接收方法，并可以在组件内执行，有两种执行方式注意：父组件传给子组件的方法是不能执行的，执行了相当于将方法的返回
组件生命周期为了说明组件的创建，存在，销毁的过程，react提供了组件的生命周期，共分三大周期创建期：说明组件的创建的过程，相当于人的少年存在期：说明组件的存在的过程，相当于人的中年销毁期：说明组件的销毁的过程，相当于人的老年创建创建期创建期共分五个阶段ES5开发中，对应五个方法：getDefaultProps,getInitialsate, componentWillMount, r
DOM事件react中绑定事件的语法跟html中为元素绑定事件的语法相似，html中绑定事件<div onclick="fn"></div> react中绑定事件<div onClick={this.fn}></div>注意：1 事件名称首字母必须大写2 事件回调函数定义在组件中，我们通过插值语法引入绑定3 事件回调函数不能执行（后面不能添加参
注释jsx语法不是js环境，因此不能渲染js注释，jsx语法也不是js环境，不能渲染HTML注入：<!-- html注释 -->所以为了在jsx语法中，让js注释生效，我们要创建js环境注释语法有注释掉语句的功能，所以注意：如果使用单行注释，千万不要注释掉插值闭合符号所以在工作中，多行注释更常用。虚拟DOM四类属性在react中，虚拟DOM有四类属性：元素属性，非元素属性，特殊
介绍react特点高效：React通过对DOM的模拟，最大限度地减少与DOM的交互组件化：React采取组件化开发，极大限度的使组件得到复用，便于开发管理与维护适用多端：一处开发，多端适用，将颠覆整个互联网行业github点击进入react的github网站 react演示的当前版本是16版本，我们基于ES6语法，讲解16版本的react在16版本中，只支持ES6开发。两个库React为了
canvascanvas是HTML5新增的标签用于提供“画布”可以通过canvas元素获取对应的“上下文”（可以理解为画笔）来操作显示内容canvas的标准属性有width和height(例如id, class这些都属于通用标准属性)width: 表示canvas的宽hieght: 表示canvas的高举例： <canvas id="myCanvas" width="600"
resizetextarea元素右下角的记号并上下左右拉伸，就会发生textarea元素的高度和宽度发生变化了，这个拉伸效果起到的作用就是resize。resize属性参数值比较多，初始值而为none，表示没有拉伸效果。常用来重置textarea元素内置的拉伸行为。both作用是既可以水平方向拉伸，也可以垂直方向拉伸。vertical作用是仅可以垂直方向拉伸
scroll-behaviorscroll-behavior用于页面平滑滚动，初始值auto，我们一般在滚动容器元素上使用scroll-behavior：smooth，让容器的滚动变得平滑。scroll-behavior: smooth;overflow: hidden;overscroll-behavioroverscroll-behavior属性可以设置标签元素滚动到边缘时的
mask-imagemask-image属性的作用是设置使用遮罩效果的图像。语法mask-image: none | <image> | <mask-source>默认值为none，表示默认无遮罩图片。<image>表示图像数据类型，包括css渐变图像、image-set()函数、url()函数、cross-fade()和elem
text-shadowtext-shadow是文字阴影，不支持inset关键字，也就是text-shadow只有外阴影，没有内阴影，不支持阴影扩展，最多支持3个数值，分别表示水平偏移、垂直偏移和模糊大小。// 右方、下方偏移2px，模糊3pxtext-shadow: 2px 2px 3px red;text-stroketext-stroke和text-fill-color
filterfilter是滤镜属性，属性支持的有10个滤镜函数。blurblur()函数可以让元素或者图像产生高斯模糊的效果，而且支持任意长度值，但是不支持百分比值。blur()函数的参数值表示高斯函数的标准偏差值，可以理解为屏幕上互相融合的像素数量，因此函数的参数值越大，图像的模糊效果越明显。blur()还可以用来实现径向模糊或者局部模糊的效果。.wrapper { fil
@media响应式布局中经常用到宽度查询与适配，而@media规则就是用来匹配不同设备的。.warpper { width: 44px; height: 44px; background-color: red;}@media only screen and (max-width: 560px) { .wrapper{ display:none; }}当设
columns属性我们可以使用columns属性实现分栏布局，columns属性是column-width和column-count属性的缩写,columns的写法有很多种：columns: auto;columns: auto auto;columns: auto 4rem;column-width表示每一栏或者每一列最佳宽度，而且不支持百分比。column-coun
CSS动画常见动画效果：.warpper { animation: allIn 3s;}@keyframes allIn { from { width: 50px; opacity: 0; } to { width: 100px; opacity: 1; }}其中allIn是自己定义的动画名称，3s
CSS过渡我们都用过hover和active这种伪类属性，我们用trasnsition也可以使用这种过渡效果。而且transition属性也不需要增加私有前缀了。transition是一个常用属性也是一个缩写，是由transition-duration、transition-delay、transition-property、transition
radial-gradientradial-gradient()是径向渐变，指的是一个中心点向四周扩撒的渐变效果，其中包括波的扩散和光的扩散中都有径向渐变的特征。css中我们使用radial-gradient()函数表示径向渐变，语法比较复杂，所以我们可以从简单的径向渐变开始看：.warpper{ width: 250px; heigth: 125px; background-i
calccalc()函数支持加减乘除四种运算，很多类型都可以使用calc()函数，例如angle、length、frequency、time，percentage、number、integer，因为calc()有很多约束，所以这些类型不一定都可以出现calc()函数。我们在calc()函数中不能使用当前css属性不支持的数据类型。// 下面这
box-shadowbox-shadow表示盒阴影，可以给元素设置阴影效果，如果我们设置向下的阴影效果:.wrapper { position: fixed; left: 0; top: 0, bottom: 0, right: 0, background-color: red; box-shadow: 0 3px 5px rgba(0, 0, 0, .3
postionbackground-postion我们常用于元素的定位，而且可以接收好几个值：1、接收一个值这个值可以为百分比、数值或者关键字，另一个值一定是center// 单个属性值background-postion: 33px;background-postion: center;background-postion: left;background-postion: bottom;bac
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
