橘柚子-CSDN博客

原创函数防抖与函数节流

防抖（debounce）函数防抖（debounce）：当持续触发事件时，在设置的周期内没有再触发事件，事件处理函数才会执行一次，如果设定的周期没有结束，又一次触发了事件，就重新开始延时。为了有个直观的对比，我们先看下没有使用debounce技术的click事件：我们看到，当用户频繁点击button按钮时，控制台会频繁的输出结果，这种频繁调用事件处理程序，会加重浏览器的负担，导致用户体验非常糟糕。为了解决上述问题，我们在编码中可以使用debounce防抖技术。防抖原理：是维.

2020-11-27 17:37:57 219

原创 JavaScript 立即执行函数

1.什么是立即执行函数声明一个函数，并马上调用这个匿名函数就叫做立即执行函数；也可以说立即执行函数是一种语法，让你的函数在定义以后立即执行；立即执行函数的创建步骤，看下图：2.立即函数形式接下来看立即执行函数的两种常见形式：//匿名函数包裹在一个括号运算符中，后面跟一个小括号(function(){ //...})()////匿名函数后面跟一个小括号，整个包裹在一个括号运算符中(function(){ //...}())()，！，+，-，=等运算符都

2020-10-30 15:54:16 275

原创 JavaScript闭包之经典案例

①函数作为返回值【1】例子1 function a() { var name='dov'; return function(){ return name; } } var b=a(); console.log(b());//dov在这段代码中，a()中的返回值是一个匿名函数，这个函数在a()作用域内部，所以它可以获取a()作用域下变量name的值，将这个值作为返回值赋给全局作用域下的变量b,实现了在全局变量下获取到局部变量中的变量的值

2020-10-30 15:20:07 1350

原创 JavaScript闭包理解二

javascript闭包的例子 function outerFun() { var a = 0; function innerFun() { a++; alert(a); } return innerFun; //注意这里 } var obj = outerFun(); obj(); //结果为1 obj(); //结果为2

2020-10-30 14:06:41 120

原创 JavaScript闭包理解一

什么是闭包:当内部函数在定义它的作用域的外部被引用时,就创建了该内部函数的闭包 ,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被释放,因为闭包需要它们.

2020-10-30 14:00:49 114

原创完美解决settimeout回调函数中this总是指向window的问题

问题描述前些天在练习写一个小例子的时候用到了定时器，发现在setInterval和setTimeout中传入函数时，函数中的this会指向window对象，如下例：var num = 0;function Obj (){ this.num = 1, this.getNum = function(){ console.log(this.num); }, this.getNumLater = function(){ setTimeout

2020-10-29 18:13:25 1521 2

原创 JavaScript的值传递和引用传递

JavaScript有5种基本的数据类型，分别是：布尔、null、undefined、String和Number。这些基本类型在赋值的时候是通过值传递的方式。值得注意的是还有另外三种类型: Array、Function和Object，它们通过引用来传递。从底层技术上看，它们三都是对象。基本数据类型如果一个基本的数据类型绑定到某个变量，我们可以认为该变量包含这个基本数据类型的值。var x = 10;var y = 'abc';var z = null;当我们使用=将这些变量赋值到..

2020-10-29 11:03:36 474

原创理解 JavaScript 的 async/await

1. async 和 await 在干什么任意一个名称都是有意义的，先从字面意思来理解。async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。另外还有一个很有意思的语法规定，await 只能出现在 async 函数中。然后细心的朋友会产生一个疑问，如果 await 只能出现在 async 函数中，那这个 async 函数应该怎么调用？如果需要通过

2020-10-22 16:27:42 126

转载 js splice使用

splice方法可以用来对js的数组进行删除，添加，替换等操作。1. 删除功能，第一个参数为第一项位置，第二个参数为要删除几个。用法：array.splice(index,num)，返回值为删除内容，array为结果值。2.插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）。用法：array.splice(index,0,insertValue)，返回值为空数组，array值为最终结果值。3.替换功能，第一个参数（起始位置），第二个参数（删除的项数），..

2020-10-20 11:15:53 378

原创 es5、es6的.map()、.reduce()、.filter()

.map()、.reduce()、.filter()的使用基本思路上和for一样，只是在参数、功能等细节方面有各自擅长的地方如果需要一个数组，请使用map方法如果需要一个结果，请使用reduce方法如果需要过滤一个结果，请使用filter方法，返回的也是数组1.map() var _arrObj = [ { age: 11, name: 'aaa' }, { age: 22,...

2020-10-14 16:18:17 401

原创使用原生js以base64读取本地图片文件

起因在做项目的时候遇到了一个问题，需要用户上传一张图片在画布里操作，一般的逻辑是先传图片到服务器，然后从服务器读取这张图片，这过程中可能读取的时间会过长，而且服务器也没必要存操作前的图片，于是就需要本地读取图片（这里用base64的格式）。这里为了备忘，记录下。代码File.prototype.convertToBase64 = function(callback){ var FR= new FileReader(); FR.onload = function(e) {

2020-09-01 16:12:05 1723

原创删除排序数组中的重复项

1. 删除排序数组中的重复项，每个元素只出现一次题目：删除排序数组中的重复项，每个元素只出现一次给定一个排序数组，你需要在原地删除重复出现的元素，使得每个元素只出现一次，返回移除后数组的新长度。不要使用额外的数组空间，你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成。给定数组 nums = [1,1,2],函数应该返回新的长度 2, 并且原数组 nu...

2020-04-09 11:40:44 172

原创保存指定DOM为图片

1.引入一个js html2canvas.js，已上传我的资源https://download.csdn.net/download/qq_21987433/121538972.html DOM提供 <div id="Authbook" style="background-color: #fff;width: 100%"> <div...

2020-02-13 12:30:50 437

原创 Promise配合axios

Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise checkLogin: () => {// 返回一个promise对象 return new Promise((resolve, reject) => { axios({ ...

2020-01-21 15:36:15 267

原创 Promise详解

为什么会有promise,他的作用是什么？promise主要是为了解决js中多个异步回调难以维护和控制的问题.从图中，我们可以看出，Promise是一个函数，这个函数上有在项目中常用的静态方法：all, race, reject,resolve等，原型对象上有有catch, then等方法.也就是说，如果要调用catch和then方法，需要一个Promise的实例( new Pr...

2020-01-21 14:50:00 359

原创 Vue动态组件和v-once指令

1.Vue中使用动态组件实例：实现使用一个按钮切换2个组件【1】一般实现方法 <div id="root"> <child-one v-if="type=='child-one'"></child-one> <child-two v-if="type=='child-two'"></child-...

2019-12-20 11:32:58 214

原创 Vue 中使用插槽

1.简单使用插槽 <div id="app">   <child> <p>Dell</p>  &lt...

2019-12-19 23:35:12 161

原创 Vue中非父子组件的传值之总线模式

1.总线模式非父子之间传值，可以采用发布订阅模式，这种模式在 Vue 中被称为总线机制，或者叫做Bus/ 发布订阅模式 / 观察者模式 <div id="app">  <child content="DELL"></child> <chil...

2019-12-19 22:34:01 129

原创给组件添加原生事件

1.父子组件事件绑定一般情况下【1】要点击子组件，则需要在子组件的元素上绑定事件，不能直接在子组件的引用上直接绑定【2】子组件引用上绑定的事件其实是子组件自定义的事件，且需要由子组件向外发射$emit后，才可写在子组件的引用上，由父组件来接收<div id="app">  ...

2019-12-18 23:50:36 366

原创 Vue 组件参数校验与非props属性

1.组件参数校验父组件对子组件进行参数传递，子组件有权对传进来的内容进行约束<div id="app"> <child :content="hell"></child> </div> <script> Vue.component('c...

2019-12-18 23:14:10 244

原创微信JSSDK使用

1.步骤一：绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。2.步骤二：引入JS文件在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js 如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/op...

2019-12-06 11:01:12 1093

原创 Vue使用中的细节纪要

1.is属性的使用，用以解决h5编码规范违背的问题<div id="app"> <!-- 【1】is属性的使用h5编码规范的问题 -> <table> <tbody> <!--按道理来说，可以直接在tbody里面写<row></r...

2019-12-06 00:17:05 127

原创 Vue基础详解

1.样式绑定<div id="app">    ...

2019-11-30 00:16:28 106

原创微信网页授权

1.配置网页授权的回调域名2.基本授权（snsapi_base）创建weiixn/index.php<?phpif(isset($_GET['state'])){ getUserOpenid();}else{ getBaseInfo();} //1.获取到code function getBaseInfo(){ $APP...

2019-11-21 18:38:20 769

原创 Vue 计算属性，方法和侦听器

1.计算属性，方法和侦听器 <div id="app"> {{fullName}}  {{age}} </div> <script> var vm=new Vue({ el:"#app", data:{ ...

2019-11-20 17:39:43 76

原创 Vue的父子组件传值

1.普通方式 <div id="app"> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> ...

2019-11-13 16:24:13 152

原创 TP5.1 验证器

1.验证器的使用方式2.验证器定义方式

2019-10-21 10:39:09 754

原创 TP5.1 模板布局+模板继承

1.模板布局【1】在配置文件中开启模板布局并设置布局文件名 //开启全局模板布局 'layout_on'=>true, //全局模板文件名 'layout_name'=>'layout',【2】创建头部和底部的公共模板文件，view/header.html ,view/footer.html【view/header.html】&lt...

2019-10-14 15:26:29 1043

原创 TP5.1 前置操作+空操作+空控制器

1.前置操作 app\index\controller\Demo4<?php#前置操作，设置 beforeActionList属性可以指定某个方法为其他方法的前置操作namespace app\index\controller;use think\Controller;class Demo4 extends Controller{ protected $before...

2019-10-09 15:29:25 626

原创 TP5.1静态代理

1.静态代理【1】被代理类，app\common\Test<?phpnamespace app\common;class Test{ public function hello($name) { return "hello ".$name; }}【2】代理类，app\facade\Test<?php#当前类是代理...

2019-10-08 17:35:50 322

原创 TP5.1 容器+依赖注入

1.在公共模块中创建一个Temp类<?phpnamespace app\common;class Temp{ private $name; public function __construct($name = 'Perter') { $this->name = $name; } public function s...

2019-09-30 16:30:21 1038

原创 TP5.1准备之PHP经典设计模式

<?php/**单例模式*工厂模式*注册树模式*///单例模式class Site{ //属性 public $siteName; //本类的静态实例 protected static $instance = null; //禁用构造器 private function __construct($siteName) ...

2019-09-29 11:13:20 668

原创 TP5.1 配置项的获取与设置

<?phpnamespace app\admin\controller;use think\facade\Config;class User{ public function get() { //【1】获取全部的配置项 dump(Config::get()); //【2】仅获取app下面的配置项，app是一级配置...

2019-09-27 17:30:04 1552 1

原创 PHP 查找算法

1.二分查找【1】二分查找的定义二分查找也称折半查找（Binary Search），它是一种效率较高的查找方法。但是，折半查找要求线性表必须采用顺序存储结构，而且表中元素按关键字有序排列。【2】二分查找算法的要求必须采用顺序存储结构。必须按关键字大小有序排列。【3】算法的步骤其实，二分查找也还是比较容易理解的，大概就是一分为二，然后两边比较，保留有效区间...

2019-09-04 09:39:31 174

原创 PHP 文件操作

1.用一个函数遍历目录下所有文件【1】使用函数is_dir()：函数检查指定的文件是否是目录，返回布尔值 scandir(directory)：函数返回指定目录中的文件和目录的数组【2】遍历思路首先接收一个目录名称，然后用scandir扫描，其中会有两个额外的目录是“."和”..“需要去掉然后遍历扫描后的每个文件是否为目录文件，如果是则在回调到第一步扫描里面的文件【3】实...

2019-09-03 11:24:42 112

原创 PHP排序算法

目录1.冒泡算法2.快速排序3.选择排序4.插入排序1.冒泡算法<?php //冒泡排序算法（从大到小） function mysort($arr) { //比较的趟数，数组里面的每个元素3,1,2都要进行比较 for($i = 0; $i < count($arr); $i++) { //用于判断每趟...

2019-09-02 18:05:12 139

原创 javascript 继承之原型链继承与类式继承

由于js不像java那样是真正面向对象的语言，js是基于对象的，它没有类的概念。所以，要想实现继承，可以用js的原型prototype机制或者用apply和call方法去实现1.原型链继承 //定义父类 function Parent(){ this.name = 'mike'; } //给父类添加原型属性 Parent.protot...

2019-07-11 11:57:17 403

原创 JavaScript 中call,apply方法的使用

1.call,apply的基本概念理解在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。function fruits() {} fruits...

2019-07-11 10:45:14 137

原创 JavaScript 四种this的取值情况

在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分，每次调用函数，都会产生一个新的执行上下文环境。1.构造函数所谓构造函数就是用来new对象的函数。其实严格来说，所有的函数都可以new一个对象，但是有些函数的定义是为了new一个对象，而有些函数则不是。另外注意，构造函数的函数名第一个字母大写（规则约定）。例...

2019-07-10 21:36:54 697

原创 javascript创建对象之变异的组合构造函数模式与原型模式

1.组合使用构造函数模式和原型模式构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性。混成模式支持向构造函数传递参数function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.friends = ["Shelby", "Court"];...

2019-07-10 17:46:56 84