前端
不止三岁
这个作者很懒,什么都没留下…
展开
-
【前端】为什么要打包
打包是在做什么前端写代码时为了方便会将代码写在许多文件中,但是转化成HTML代码时,会使用<script>标签进行引入js代码,这样会使页面进行的http衍生请求次数的次数增多,页面加载耗能增加。使用打包过后将许多零碎的文件打包成一个整体,页面只需请求一次,js文件中使用模块化互相引用(export、import ),这样能在一定程度上提供页面渲染效率。打包同时会进行编译,将ES6、Sass等高级语法进行转换编译,以兼容高版本的浏览器。必须要打包吗?上文提到的HTML需要引用有很多文原创 2020-06-06 14:30:05 · 8196 阅读 · 0 评论 -
【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 · 544 阅读 · 0 评论 -
[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 · 305 阅读 · 0 评论 -
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 · 319 阅读 · 0 评论 -
移动应用开发模式
移动应用开发模式Native 原生开发开发出来的是原生应用程序,是一个完整的App,需要用户下载安装使用。原生应用程序位于平台层的上方,依赖操作系统运行,有很强的交互,可拓展性强。因为可以直接调用系统底层的接口,外观看起来非常优秀,和设备系统界面一样华丽,运行也极其流畅。但也正因为依赖于平台操作系统,在开发时只能使用平台支持的语言,比如iOS平台使用Objective-C语言,安卓平台使用Java语言等。优点:性能和体验都是最好的,实现华丽的动画,流畅度最好缺点:开发和发布成本高。Hyb原创 2020-05-29 10:42:39 · 580 阅读 · 0 评论 -
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 · 347 阅读 · 0 评论 -
@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 · 2366 阅读 · 0 评论 -
去掉button disable时自带的样式
&[disabled] { opacity: 1 !important; }原创 2020-01-03 09:51:53 · 566 阅读 · 0 评论 -
修改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 · 152 阅读 · 0 评论 -
redux 简介
redux 是什么官方解释:Redux is a predictable state container for JavaScript apps. 意思就是Redux是js应用的 一种可预测的状态容器为什么使用Redux下面的图是不使用Redux和使用Redux时 父子组件之间的通信方式没有使用Redux的情况,如果两个组件(非父子关系)之间需要通信的话,可能需要多个中间组件为他们进行消...原创 2019-10-29 15:07:26 · 224 阅读 · 0 评论 -
react-高阶组件
与父组件区别有些同学可能会觉得高阶组件有些类似父组件的使用。例如,我们完全可以把高阶组件中的逻辑放到一个父组件中去执行,执行完成的结果再传递给子组件。从逻辑的执行流程上来看,高阶组件确实和父组件比较相像,但是高阶组件强调的是逻辑的抽象。高阶组件是一个函数,函数关注的是逻辑;父组件是一个组件,组件主要关注的是UI/DOM。如果逻辑是与DOM直接相关的,那么这部分逻辑适合放到父组件中实现;如果逻辑...原创 2019-10-28 18:56:13 · 167 阅读 · 0 评论 -
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 · 179 阅读 · 0 评论 -
Angular过滤器
作用格式化表达式的值使用在视图模板中使用过滤器{{ expression | filter }}例如,标记使用 过滤器将数字12格式化为货币。得出的值为。{{ 12 | currency }} currency $12.00可以将过滤器应用于另一个过滤器的结果。这称为“链接”,并使用以下语法:{{ expression | filter1 | filter2 | ... }...原创 2019-10-28 11:26:35 · 2079 阅读 · 0 评论 -
Angular 表达式
和JavaScript表达式的区别值是根据scope内的在js中调用未定义的属性会报错,而在angular中只会提示undefined或null可以使用过滤器不能使用 条件判断、循环、异常,但是可以使用三元表达式不能声明函数,如ng-init不能使用正则表达式,除非使用ng-pattern不能使用new运算符不能使用Bitwise、,或者void具有新的模板表达式运算符,比如|...原创 2019-10-27 20:01:38 · 556 阅读 · 0 评论 -
Angular 模板 Template
在AngularJS中,模板是使用HTML编写的,其中包含AngularJS特定的元素和属性。AngularJS将模板与来自模型和控制器的信息相结合,以呈现用户在浏览器中看到的动态视图。Angular 的元素和属性一般包括指令扩充到现有DOM元素或表示可重用DOM组件的属性或元素...原创 2019-10-27 17:45:08 · 1524 阅读 · 0 评论 -
angular 依赖注入 Dependency Iinjection
文章目录依赖是什么依赖注入是什么获得对依赖的控制权Angular依赖注入的方法1、通过函数的参数进行推断式注入声明参考依赖是什么一般情况下,如果服务 A 需要服务 B,那就意味着服务 A 要在内部创建服务 B 的实例,也就说服务 A 依赖于服务 B依赖注入是什么依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下, 一个或更多的依赖(或服务)被...原创 2019-10-26 17:51:32 · 240 阅读 · 0 评论 -
Angular 作用域 scope
什么是作用域作用域是一个存储应用数据模型的对象,对应于MVC中的M(model)层作用域的层级结构对应于DOM Tree 结构为表达式提供了一个执行上下文(context),作用域可以监听表达式的变化并传播事件...原创 2019-10-25 17:19:20 · 748 阅读 · 0 评论 -
$cacheFoctory和$cacheFactory.Cache
作用生成一个用来缓存服务的对象,并且提供访问服务但是这个缓存是存在应用程序中的,而不是浏览器中的,所以浏览器一刷新,本地的缓存都会被清除方法put(key,value)插入键值对get(key)根据key获取value`remove(key)removeAll()destory()销毁缓存对象info()获取缓存对象的信息,id,size...原创 2019-10-25 13:22:35 · 185 阅读 · 0 评论 -
Angular 服务(Services)
为什么要使用服务当需要向各种模块提供通用功能时使用服务。例如,我们可能具有可以在各个模块之间重用的数据库功能。因此,您可以创建一个具有数据库功能的服务。什么是服务AngularJS 中的服务是一个函数或对象。AngularJS 中你可以创建自己的服务,或使用内建服务。注意:与其他核心AngularJS标识符一样,内置服务始终以$ (例如$http)开头。使用服务<div ...原创 2019-10-24 17:30:47 · 657 阅读 · 0 评论 -
Angular 控制器(Controllers)
什么是控制器在angularJS中,controller是一个javascript函数/类,用于操作作用域中,各个对象的初始状态以及相应的行为。在HTML中,绑定ng-controller的那个DOM节点内的所有子标签,将会是当前controller的作用域。在大型项目中,如果HTML DOM 中有多个作用域,这时你就需要知道你使用的 scope 对应的作用域是哪一个。使用controlle...原创 2019-10-24 13:00:10 · 1364 阅读 · 0 评论 -
Angular 数据绑定
绑定模式——双向绑定在Angular网页中,数据绑定是数据模型(model)与视图(view)的自动同步。在Angular中对view的操作会实时反映到数据,数据的变更能实时展示到界面。对比react的单向数据流,react中是数据改变后,setState后才能重新render...原创 2019-10-24 09:56:22 · 246 阅读 · 0 评论 -
Angular 指令
什么是指令Angular通过被称为指令的属性来扩展HTMLAngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。指令长成啥样以ng-开头,比如ng-app、ng-bind等<!DOCTYPE html><html lang="en" ng-app><body> <div ng-init="fir...原创 2019-10-23 16:34:03 · 297 阅读 · 0 评论 -
react-Portals
作用将子节点渲染在父组件以外的DOM节点的方案,portal是真实DOM,存在于DOM tree中用法import React, { Component } from "react";export default class Portal extends Component { render() { return React.createPortal(this.props.c...原创 2019-10-22 11:46:00 · 320 阅读 · 0 评论 -
React-Refs
解决的问题为了能让父组件直接操作子组件中的元素import React, {Component} from 'react';function Child(props) { return <button>{props.children}</button>}class Parent extends Component { constructor(p...原创 2019-10-10 17:02:40 · 275 阅读 · 0 评论 -
React-Refs转发
V16之前class Parent extends Component { constructor(props, context) { super(props, context); this.r = null } componentDidMount() { this.r.onClick() } render(...原创 2019-10-10 17:01:08 · 218 阅读 · 0 评论 -
React-函数组件(Functional Components)
例子使用类组件import React from 'react'class Welcome extends React.Component { constructor(props) { super(props); this.sayHi = this.sayHi.bind(this); } sayHi() { alert(`Hi ${this.props...原创 2019-10-10 16:09:27 · 840 阅读 · 0 评论 -
React-Fragments
作用减少不必要的节点嵌套react常常一个组件返回多个组件,fragments允许将子元素分组,而不用占用多个DOM节点render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Frag...原创 2019-10-09 18:20:06 · 166 阅读 · 0 评论 -
React-状态提升
什么叫状态提升就是多个子组件共享一个状态(state),可以将state提到最近的父组件上,再用父组件的props分发给子组件比如多个并列的子组件的联系就是共有一个父组件,多考虑他们之间的关系...原创 2019-10-09 17:09:29 · 118 阅读 · 0 评论 -
ES6简写
对象key和value相同时可以只写key this.setState({ temperature:temperature //可以简写成 temperature })原创 2019-10-09 14:58:33 · 343 阅读 · 0 评论