- 博客(57)
- 收藏
- 关注
RSS订阅原创 【前端】为什么要打包
打包是在做什么前端写代码时为了方便会将代码写在许多文件中，但是转化成HTML代码时，会使用<script>标签进行引入js代码，这样会使页面进行的http衍生请求次数的次数增多，页面加载耗能增加。使用打包过后将许多零碎的文件打包成一个整体，页面只需请求一次，js文件中使用模块化互相引用（export、import ），这样能在一定程度上提供页面渲染效率。打包同时会进行编译，将ES6、Sass等高级语法进行转换编译，以兼容高版本的浏览器。必须要打包吗？上文提到的HTML需要引用有很多文
2020-06-06 14:30:05
8015
原创 【Sass】map数组
表达形式$theme-color: ( default: ( bgcolor: #fff, text-color: #444, link-color: #39f ), primary:( bgcolor: #000, text-color:#fff, link-color: #93f ), negative: ( bgcolor: #f36,
2020-06-01 17:03:12
532
原创 【Sass】常用函数
字符串函数字符串函数顾名思意是用来处理字符串的函数。Sass 的字符串函数主要包括以下函数：unquote($string)：删除字符串中的引号； quote($string)：给字符串添加引号。 to-upper-case() 函数将字符串小写字母转换成大写字母。 to-lower-case() 函数 与 To-upper-case() 刚好相反，将字符串转换成小写字母：数字函数ass 中的数字函数提要针对数字方面提供一系列的函数功能：percentag
2020-06-01 16:35:55
666
原创 Sass的控制命令（判断、循环）
Sass中控制命令指的是@if、@each、@for和@while。具有一定的逻辑判断和循环遍历能力，这个对于懂JavaScript或者后端语言的同学来说一点都不难。但在CSS中是不可思议的一件事情，最起码到目前为止是不太可能的事情。但在Sass这样的CSS预处理器语言中实现了。@if@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else
2020-06-01 16:21:01
3666
1
原创 [Sass]运算
加法.box { width: 20px + 8in;}编译出来的 CSS:.box { width: 788px;}但对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示：.box { width: 20px + 1em;}编译的时候，编译器会报错：“Incompatible units: ‘em’ and ‘px’.”减法$full-width: 960px;$sidebar-width: 200px;.content { width: $f
2020-06-01 16:06:33
255
原创 Sass混合宏
什么是混合宏相当于函数，统一写大段重复的样式。声明在 Sass 中，使用@mixin关键字来声明一个混合宏。如@mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px;}调用在 Sass 中，使用@include关键字来调用一个混合宏。如button { @include border-radius;}编译出来的代码：button { -webkit-border-radiu
2020-06-01 15:27:14
299
原创 移动应用开发模式
移动应用开发模式Native 原生开发开发出来的是原生应用程序，是一个完整的App，需要用户下载安装使用。原生应用程序位于平台层的上方，依赖操作系统运行，有很强的交互，可拓展性强。因为可以直接调用系统底层的接口，外观看起来非常优秀，和设备系统界面一样华丽，运行也极其流畅。但也正因为依赖于平台操作系统，在开发时只能使用平台支持的语言，比如iOS平台使用Objective-C语言，安卓平台使用Java语言等。优点：性能和体验都是最好的,实现华丽的动画，流畅度最好缺点：开发和发布成本高。Hyb
2020-05-29 10:42:39
551
原创 react-dangerouslySetInnerHTML属性
dangerouslySetInnerHTML属性的功能实际上就是显示纯文本内容import React from 'react';class SetHtml extends React.Component { constructor(){ super(); this.state = { content:'<h1>标题名称</h1>'...
2020-01-09 16:19:35
327
原创 js中! 与 !!
!是逻辑取反，非的意思console.log(!true)//falseconsole.log(!undefined)//true!!常常用来做类型判断，在第一步!（变量）之后再做逻辑取反运算，在js中新手常常会写这样臃肿的代码：判断变量a为非空，未定义或者非空串才能执行方法体的内容var a;if(a!=null&&typeof(a)!=undefined&...
2020-01-09 12:20:22
608
1
原创 数组处理（es6）
let a = [1,2,1,4,6,5,5,'pen','apple']let b = [2,3,4]// 去重let unique = [...new Set(a)]console.log(unique) [ 1, 2, 4, 6, 5, 'pen', 'apple' ]// 并集let union = [...a,...b]console.log(union)// 交集...
2020-01-09 12:07:36
108
原创 @media实现自适应布局
准备工作1、设置@media标签首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">widt...
2020-01-03 12:05:33
2324
原创 修改input里面的placeholder
<Input className={style.input} value={this.state[param.key]}/> input（class的名字）::-webkit-input-placeholder { color: #9EA8B1; font-size: 16px; }...
2020-01-03 09:46:29
142
原创 定时器的使用和清除
js 定时器有以下两个方法：setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。setTimeout() ：在指定的毫秒数后调用函数或计算表达式。这里用的是setInterval1、定义在用定时器的时候，定义一个变量来记录定时器的返回值let myInterval: any;...
2019-12-23 16:49:06
570
原创 react 根据传入的key动态改变state
存输入框输入的值 <Input placeholder='请输入已绑定手机号' value={inputPhone} float ...
2019-12-23 15:49:26
756
原创 TypeScript基础类型
文章目录什么是TypeScript（TS）作用什么是TypeScript（TS）TypeScript是JavaScript的超集，主要提供可选的静态类型，类和接口。作用
2019-11-26 15:08:07
151
原创 JS中的逻辑运算符&&、||
在js逻辑运算中，0、”“、null、false、undefined、NaN都会判为false，其他都为true。逻辑或||只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。总结：真前假后逻辑与&&只要“&&”...
2019-11-22 16:25:11
201
原创 Redux 实现撤销、重做
因为以下三个原因， Redux 轻而易举地实现撤销历史：不存在多个模型的问题，你需要关心的只是 state 的子树。state 是不可变数据，所有修改被描述成独立的 action，而这些 action 与预期的撤销堆栈模型很接近了。reducer 的签名 (state, action) => state 可以自然地实现 “reducer enhancers” 或者 “hig...
2019-10-31 17:27:44
1452
原创 Redux 计算衍生数据（缓存）
什么是衍生数据为什么要计算衍生数据In Redux, whenever an action is called anywhere in the application, all mounted & connected components call their mapStateToProps function. This is why Reselect is awesome. It ...
2019-10-31 11:30:59
557
原创 Redux 实现服务端渲染
什么是服务端渲染服务端渲染（SSR）：当用户第一次请求页面时，由服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。使用服务端渲染的网站，可以说是“所见即所得”，页面上呈现的内容，我们在 html 源文件里也能找到。客户端渲染：客户端渲染模式下，服...
2019-10-30 17:53:46
262
原创 react-redux
React Redux是啥React Redux是Redux的官方React绑定。它使您的React组件可以从Redux存储中读取数据，并向存储分派操作以更新数据这里需要再强调一下：Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。尽管如此，Redux 还是和 React 和 Deku 这类库搭配...
2019-10-30 16:20:09
137
原创 redux 异步
在 Redux 的世界中，Redux action 返回一个 JS 对象，被 Reducer 接收处理后返回新的 State，这一切看似十分美好。整个过程可以看作是：view -> actionCreator -> action -> reducer -> newState ->(map) container component但是真实业务开发我们需要处理异步...
2019-10-30 12:11:20
244
原创 redux中的中间件（Middleware）
参考https://www.jianshu.com/p/da511a1c0865https://www.jianshu.com/p/dd62f3bc95a0
2019-10-30 11:29:25
147
原创 Redux 单向数据流
严格的单向数据流是 Redux 架构的设计核心。这意味着应用中所有的数据都遵循相同的生命周期，这样可以让应用变得更加可预测且容易理解。同时也鼓励做数据范式化，这样可以避免使用多个且独立的无法相互引用的重复数据。Redux 数据的生命周期Redux 应用中数据的生命周期遵循下面 4 个步骤：1.调用 store.dispatch(action)2.Redux store 调用传入的 red...
2019-10-29 17:04:02
2483
原创 Redux Store
Redux 应用只有一个单一的 store文章目录Store的职责Store方法createStore(reducer, [preloadedState], enhancer)参数返回值getState()dispatch(action)subscribe(listener)replaceReducer(nextReducer)构建有效的 Redux Store参考Store的职责维持...
2019-10-29 16:55:10
369
原创 Redux Reducer
什么是ReducerReducers 指定了应用状态的变化如何响应 actions 并发送到 store 的。action只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。reducer就是一个纯函数（Pure Function），接受就得state和action，返回新的state(previousState, action) => newState之所以将这...
2019-10-29 16:27:37
380
原创 Redux Action
什么是ActionAction是数据从应用传递到 store/state 的载体。是store数据的唯一来源。一般通过store.dispatch()将action传给store如何定义const ADD_TODO = 'ADD_TODO'{ type: ADD_TODO, index: 5}action 内必须使用一个字符串类型的 type 字段来表示将要执行...
2019-10-29 15:34:42
252
原创 redux 简介
redux 是什么官方解释：Redux is a predictable state container for JavaScript apps. 意思就是Redux是js应用的 一种可预测的状态容器为什么使用Redux下面的图是不使用Redux和使用Redux时 父子组件之间的通信方式没有使用Redux的情况，如果两个组件(非父子关系)之间需要通信的话，可能需要多个中间组件为他们进行消...
2019-10-29 15:07:26
210
原创 react-高阶组件
与父组件区别有些同学可能会觉得高阶组件有些类似父组件的使用。例如，我们完全可以把高阶组件中的逻辑放到一个父组件中去执行，执行完成的结果再传递给子组件。从逻辑的执行流程上来看，高阶组件确实和父组件比较相像，但是高阶组件强调的是逻辑的抽象。高阶组件是一个函数，函数关注的是逻辑；父组件是一个组件，组件主要关注的是UI/DOM。如果逻辑是与DOM直接相关的，那么这部分逻辑适合放到父组件中实现；如果逻辑...
2019-10-28 18:56:13
149
原创 Angular表单
Simple form <form novalidate class="simple-form"> <label>Name:<input type="text" ng-model="user.name"/> </label><br> <label>E-mail:<input type=...
2019-10-28 12:15:54
166
原创 Angular过滤器
作用格式化表达式的值使用在视图模板中使用过滤器{{ expression | filter }}例如，标记使用 过滤器将数字12格式化为货币。得出的值为。{{ 12 | currency }} currency $12.00可以将过滤器应用于另一个过滤器的结果。这称为“链接”，并使用以下语法：{{ expression | filter1 | filter2 | ... }...
2019-10-28 11:26:35
2008
原创 Angular 表达式
和JavaScript表达式的区别值是根据scope内的在js中调用未定义的属性会报错，而在angular中只会提示undefined或null可以使用过滤器不能使用 条件判断、循环、异常，但是可以使用三元表达式不能声明函数，如ng-init不能使用正则表达式，除非使用ng-pattern不能使用new运算符不能使用Bitwise、，或者void具有新的模板表达式运算符，比如|...
2019-10-27 20:01:38
541
原创 Angular 模板 Template
在AngularJS中，模板是使用HTML编写的，其中包含AngularJS特定的元素和属性。AngularJS将模板与来自模型和控制器的信息相结合，以呈现用户在浏览器中看到的动态视图。Angular 的元素和属性一般包括指令扩充到现有DOM元素或表示可重用DOM组件的属性或元素...
2019-10-27 17:45:08
1506
原创 angular 依赖注入 Dependency Iinjection
文章目录依赖是什么依赖注入是什么获得对依赖的控制权Angular依赖注入的方法1、通过函数的参数进行推断式注入声明参考依赖是什么一般情况下，如果服务 A 需要服务 B，那就意味着服务 A 要在内部创建服务 B 的实例，也就说服务 A 依赖于服务 B依赖注入是什么依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下， 一个或更多的依赖（或服务）被...
2019-10-26 17:51:32
220
原创 Angular 作用域 scope
什么是作用域作用域是一个存储应用数据模型的对象，对应于MVC中的M（model）层作用域的层级结构对应于DOM Tree 结构为表达式提供了一个执行上下文（context），作用域可以监听表达式的变化并传播事件...
2019-10-25 17:19:20
725
原创 $cacheFoctory和$cacheFactory.Cache
作用生成一个用来缓存服务的对象，并且提供访问服务但是这个缓存是存在应用程序中的，而不是浏览器中的，所以浏览器一刷新，本地的缓存都会被清除方法put(key,value)插入键值对get(key)根据key获取value`remove(key)removeAll()destory()销毁缓存对象info()获取缓存对象的信息，id,size...
2019-10-25 13:22:35
171
原创 Angular 服务（Services）
为什么要使用服务当需要向各种模块提供通用功能时使用服务。例如，我们可能具有可以在各个模块之间重用的数据库功能。因此，您可以创建一个具有数据库功能的服务。什么是服务AngularJS 中的服务是一个函数或对象。AngularJS 中你可以创建自己的服务，或使用内建服务。注意：与其他核心AngularJS标识符一样，内置服务始终以$ （例如$http）开头。使用服务<div ...
2019-10-24 17:30:47
636
原创 Angular 控制器（Controllers）
什么是控制器在angularJS中，controller是一个javascript函数/类，用于操作作用域中，各个对象的初始状态以及相应的行为。在HTML中，绑定ng-controller的那个DOM节点内的所有子标签，将会是当前controller的作用域。在大型项目中,如果HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。使用controlle...
2019-10-24 13:00:10
1340
原创 Angular 数据绑定
绑定模式——双向绑定在Angular网页中，数据绑定是数据模型（model）与视图（view）的自动同步。在Angular中对view的操作会实时反映到数据，数据的变更能实时展示到界面。对比react的单向数据流，react中是数据改变后，setState后才能重新render...
2019-10-24 09:56:22
231
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人