my_love_download-CSDN博客

原创弹性布局实现两边固定中间自适应

记录两边固定中间自适应布局html代码<div class="all-box"> <div class="left"></div> <div class="center"></div> <div class="right"></div><div>弹性布局实现<style>.all-box { display: flex; height: 200px;}.le

2021-12-15 16:39:00 1146

继承寄生式组合继承// 父function Person (name, age) { this.name = name; this.age = age;}// 子function Student (data) { Person.call(this,data); this.sex =data.sex;}//继承关键步骤Student.prototype = Object.create(Person.prototype);Student.prototype.constructor

2021-08-31 09:13:25 161

原创实现bind

bindbind()创建一个新的函数,bind()被调用的时候,新函数的this,会被指向bind()的第一个参数,其他参数作为新函数的参数被调用实现myBindFunction.portotype.myBind = function(context, ...args) { const func = this; args = args ? args : []; return newFunc function (...newArgs) { if (this instanceof newFunc

2021-08-19 14:09:55 150

原创手动实现apply

apply方法调用一个具体指定的this值的函数,接受一个为数组的参数手动实现applyFunction.portotype.myApply = function (context, args = []) { let cxt = context || window; let func = new Symbol(); cxt[func] = this; const result = args.length > 0 ? cxt[func](...args) : cxt[func](); d

2021-08-17 17:09:56 137

原创手动实现call

call的特点使用一个指定的this值和单独给出的一个或者多个参数来调用一个函数自定义实现call/// 定义在原型上,方便调用Function.prototype.call = function(context, ...args) { // 当this为null或者为undefined时,this指向window let cx = context || window; // 避免函数名与上下文冲突,使用Symbol定义 let func = new Symbol(); cx[func]

2021-08-16 17:48:18 161

原创 flutter之实现自定义头部导航栏

flutter实现自定义头部导航公共组件代码实现class CustomAppBar extends AppBar { final Color color; final String titleText; final List<Widget> actions; final PreferredSizeWidget bottom; final double toolbarHeight; CustomAppBar( {this.titleText,

2021-05-28 11:17:42 731

原创 flutter之webview

flutter项目需要加载报表的解决方案下载包webview_flutter: ^0.3.19+7实现公共的webview组件class CustomWebView extends StatefulWidget { final String title; final String url; CustomWebView({ this.title, this.url, }); @override State<StatefulWidget> creat

2021-05-28 11:09:05 347

原创 flutter之分享组件

项目中需要使用flutter做分享链接功能,可以使用share: ^0.6.5+4下载包share: ^0.6.5+4地址分享/// 点击分享后执行的事件 _share() async { final RenderBox box = context.findRenderObject(); await Share.share(widget.url, sharePositionOrigin: box.localToGlobal(Offset.zero) &am

2021-05-28 11:03:55 544

原创 fultter之自定义圆角按钮

RaisedButton组件开发中按钮的使用时避免不了的,为了方便风格统一,对按钮进行了统一封装,方便后期维护封装后的按钮/// onPressed点击事件/// title显示文字/// color背景颜色/// buttonColor 文字颜色class CustomButton extends StatelessWidget { final Function onPressed; final String title; final Color color; final C

2021-05-28 10:56:38 187

原创 flutter之用到的组件

局部收起软键盘FocusManager.instance.primaryFocus.unfocus();

2021-05-26 11:05:45 104

原创 Flutter之展开组件

fulutter展开组件的使用flutter 提供的的 ExpansionTileExpansionTile( maintainState: true, tilePadding: EdgeInsets.only( right: MediaQuery.of(context).size.width * 0.5 - 15, ),

2021-05-19 11:20:57 533

原创 flutte之实现自定义底部导航

home页面import 'package:flutter/material.dart';import 'package:demo/page/friends/friends.dart';import 'package:demo/page/message/message.dart';import 'package:demo/page/my/my.dart';class Home extends StatefulWidget { @override State<StatefulWidg

2021-05-13 13:06:34 112

原创 flutter常用组件

记录开发中常用和二次封装的flutter组件圆形按钮Container( child: InkWell( onTap: () { // todo }, child: CircleAvatar( child: Text('接听'),

2021-05-10 19:09:00 118

原创 Vue实现对图片的涂鸦等操作

安装插件tui-image-editor引入组件import "tui-image-editor/dist/tui-image-editor.css";import "tui-color-picker/dist/tui-color-picker.css";const ImageEditor = require("tui-image-editor");

2021-04-15 11:13:03 2604

原创 Component、PureComponent、Function Component三种组件的特点复习

import React, { Component, PureComponent } from 'react'// 类组件class Cmp extends Component { render() { return ( <div> com </div> ) }}// pure类组件class PruCom extends PureCompon

2021-03-20 17:46:38 364

原创 webpack之构建流程

webpack的构建流程如下:初始化参数:从配置文件和shell语句中读取与合并参数,得出最终的参数开始编译:用在初始化参数中得到的参数,初始化Compiler对象,加载所有配置的插件,执行对象的run方法,开始执行编译确定入口:根据配置中的entry找出所有的入口文件编译模块:在入口文件调用所有的配置的loader对模块进行编译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了处理完成编译:经过loader的转换(翻译),得到了每个模块被翻译后它们之间的依赖输出资源:根据入口

2020-12-10 10:56:57 208

原创 webpack之常用的Plugin

loadablesuspensereact-transition-groupreact-spring代码压缩：UglifyjsWebpackPlugin代码分组 commonsChunkPlugin, SplitChunksPlugin网络传输压缩gzip: CompressionWebpackPlugin抽取css代码：mini-css-extract-plugin组件动态加载：react-loadable...

2020-11-30 21:03:21 1235

原创前端优化之Nginx配置

#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024;}http {include mime.types;default_type applicatio

2020-11-15 11:23:49 222

原创 react之插槽

写过vue的知道slot,写过angular2+的知道<ng-content select=""></ng-content>,它们分别是实现插槽的方式,在react中也是有插槽的protals!在react项目中是通过ReactDOM.createPortal(childElements, container),来实现插槽的,它的定义是在父元素之外生成一个...

2020-11-15 11:20:51 361

原创 react项目拆分规则

拆分的原则1.目录设计规范----根据作用和职责2.模块定义规范----根据业务3.代码设计规范----一般的代码规范4.程序设计规范----一般原则(高内聚、低耦合等等)react项目中的目录及职责拆分：1.api需要单独封装,直接暴露返回值。2.数据层使用react-redux,异步中间件使用redux-thunk。3.视图层使用redux层面的传递过来的数据,修改逻辑也是重新触发action更改props。4.静态类型的资源单独放置5.公共组件、高阶组件、插件分开放置6.工具类文

2020-11-12 11:24:26 576 1

原创 webpack之常用的loader

开发中常用的webpack配置-----loader,在此总结一下各种loader的作用,方便以后使用raw-loader:主要用于静态资源内联file-loader:将一个文件移动到一个文件夹中url-loader:与file-loader类似,区别是在使用url-loader的时候,可以设置一个阀值,当大于阀值的时候就返回它的publicPath,否则返回内联的base64url,这样可以减少小文件的http请求数...

2020-11-09 22:22:34 651

原创 react-router总结之路由传值

第一种浏览器地址栏看的到数据xxx/xxxx/edit/:idthis.props.match.params.id第二种浏览器地址栏看的不到数据 this.props.history.push({ pathname: '/admin/violation/edit', state: record });this.props.location.state第三种浏览器地址栏看的到数据 this.props.histo

2020-11-08 21:40:50 328

原创 react总结之避免不必要的重复渲染

类组件PureComponent适当的使用PureComponent创建组件可以提高性能,

2020-10-26 14:03:47 1184

原创 react总结之setState的异步和同步

在react中setState的更新state是同步还是异步的,跟我们使用的方式有关系!同步更新当setState在react的事件合成机制生成和生命周期函数对state更新时,是同步更新state!异步更新当setState在react的事件是原生的js绑定的事件、ajax、setTimeout、setIntervla等时是异步更新state!原因react在调用合成事件或者生命周期函数之前会先调用batchedUpdates,然后会把变量isBatchingUpdates的值由默认值fals

2020-10-22 09:12:11 122

原创记录一次解决选择路线时的时间重叠问题

今天同学问了我一个需求,路线选择时的时间重叠问题,这里记录一下解决方案,有类似需求时直接使用 function dateRepet(){ // 所有的开始时间 let start = ['2019-02-03 10:01:38','2019-02-03 09:28:12']; // 所有的结束时间 let end = ['2019-02-03 10:27:21','2019-02-03 21:28:13']; // 排序

2020-09-24 13:10:21 303

原创 js实现数据绑定

使用js实现一个简单数据绑定function dataBind(obj, fn) { for (let key in obj) { Object.defineProperty(obj, key, { set(newValue) { if (this.value !== newValue) { this.value = newValue; }

2020-09-22 10:50:53 1101

原创 webpack配置loading

const HtmlWebpackPlugin = require('html-webpack-plugin')// loading组件const loading = require('./render-loading') module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', filename: 'index_bundle.js' }, plugins: [

2020-09-16 08:32:23 450

原创 react总结之异步的action

开发中避免不了使用请求,这个时候就会涉及的处理异步的问题,在react中我们在使用action的时候遇到异步的问题一般会使用中间redux的中间件(applyMiddleware)来处理,使用起来也很简单,下面做一个简单的使用步骤安装redux-thunknpm install redux-thunk传入中间件export default createStore(reducers, applyMiddleware(thunk));使用setTimeout在action中模拟异步请求const

2020-09-07 21:26:54 1193

原创 react总结之最新的生命周期函数

一个组件存在生命周期,在一个阶段中存在一个函数,使得我们在开发中,可以在组件的生命周期中做我们想要做的事情,简单的表述为:组件一般都是有挂载->更新->销毁这三个过程.Angular和Vue的组件生命周期函数也是一样的!挂载阶段---- 挂载阶段react最新的生命周期函数constructor:构造函数,最先被执行,通常在构造函数中初始化state对象,或者给自定义的方法绑定thisgetDerivedStateFromProps:静态方法,当接收到新的属性值的时候,如果需要对st

2020-09-02 08:33:28 235

原创 xss攻击的防御

要防御xss的攻击,首先我们需要知道什么是xss攻击?它是怎么进行攻击的?然后再去防御它!xss攻击是什么?简单来说就还是攻击者通过利用网页开发留下的漏洞,通过巧妙的方式注入恶意指令代码到网页中,使得用户加载并执行者段恶意的代码,攻击成功之后,攻击者会获取到用户的私人网页内容、会话和cookie等!然后攻击者会利用获取到的信息,来进行一些恶意的操作来破坏网站xss是怎么进行攻击的?存储型:恶意代码被当作正常数据存储到数据库中,当用户正常操作时,恶意代码就会从数据库中取出来.反射型:恶意代码被表单

2020-08-31 18:18:24 126

原创数组之every

every的作用确定数组中的每一项的结果都满足所写的条件的时候,就会返回true,否则返回falseevery的使用const arr = [1, 2, 3, 4, 5, 6];// 结果是false,因为存在比3小的数const result = arr.every(x => { return x > 3});every有一点需要注意,就是在数组是空的时候,一切情况都会返回trueconst arr = [];// 不管条件是什么,这里的返回值都会是true----因为数

2020-08-28 08:01:06 2048

原创数组之entries

entries是什么?entries() 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的键/值对。entries在纯数组的使用const arr = [1, 3, 4, 5, 6, 7, 8, 9, 0 ,12];const next = arr.entries();for (let i =0 ; i < arr.length; i++) {// 输出的是数组的索引和对应的值 console.log(next.next().value);}entries在数组对象的使用

2020-08-27 17:55:25 1018

原创数组之copyWithin

copyWithin方法详解copyWithin方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。它返回一个新的数组一个参数的时候const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]// 从索引为0的位置开始复制,复制的数组的值是arr1,结束位置是数组的长度const arr2 = arr1.copywithin(4);// 结果 [1, 2, 3, 4, 1, 2, 3, 4, 5, 6]两个参数的时候cons

2020-08-26 10:33:20 289

原创 react总结之react-redux

import React, { Component } from “react”;// 导入actionsCreatorsimport {increment, decrement} from ‘…/…/actions/cart’// connect执行之后是一个高阶组件import {connect} from ‘react-redux’class CartList extends Component {render() {return ({this.props.cartList.map

2020-08-24 18:03:36 98

原创 react总结之redux

其实一般在项目中,不会使用redux,因为没有自动连接,传递起来就很麻烦!这里还是总结一下redux的使用,方便以后查阅!1.首先要安装redux

2020-07-23 21:39:09 122

原创 react总结之自己实现一个简单的redux

在react的项目中,经常使用到redux来进行状态管理,项目中一般我选择使用react-redux!今天学习了一下自己实现一个简单的redux,来加深对react-redux的理解,代码如下:<!doctype html><html><head> <meta charset="utf-8"></head><body><button onclick="store.dispatch({type: '-', nu

2020-07-21 22:56:17 131

原创 react总结之HOC

react中还有高阶组件

2020-07-07 23:27:18 120

原创 react总结之hooks(useState,useEffect)

hooks是react16.8版本及以上版本可以使用的,它的作用就是使得我们在使用函数创建组件的时候,可以跟使用class创建组件时达到一样的效果!有了这个就不用考虑改用无状态组件还是有状态组件了!具体使用方式如下import React, { useState, useEffect} from 'react'import ReactDom from 'react-dom'// 定义函数式组件const Title = function () {// name 赋初始值为'张珊' con

2020-06-28 22:18:25 238

原创 react总结之生命周期函数

实际开发中,会经常使用到生命周期函数,使得在页面在浏览器上展示之后有我们需要的效果,或者在对页面上的元素进行操作的时候,页面是否要做出相应的变化!以下是常用的生命周期函数,以及执行的阶段和经常使用它来做的事情!import React, { Component, createRef } from 'react'import ReactDom from 'react-dom' class TestLive extends Component { // 最先执行构造器,只会执行一次 co

2020-06-27 15:51:10 158

原创 react总结之ref

react提供了creatRef方法来帮助我们获取DOM,下面代码通过creatRef来获取DOMimport React, { Component, createRef } from 'react'import ReactDom from 'react-dom' class TestRef extends Component { constructor(props) { super(props); this.state = { inpu

2020-06-27 14:15:09 134