- 博客(68)
- 资源 (5)
- 收藏
- 关注
RSS订阅
原创 学习笔记——JavaScript（三）：继承的几种实现方式
继承是面向对象的，通过继承我们可以更好地复用以前的开发代码，缩短开发的周期、提升开发效率。JavaScript常见的继承方式有以下几种。子类的原型对象——类式继承// 声明父类function SuperClass() { this.superValue = true;}// 为父类添加公共方法SuperClass.prototype.getSuperValue = function() { return this.superValue;}// 声明子类function SubCl
2021-05-14 19:21:56
365
22
原创 策略模式应用示例——表单校验
项目中，注册、登录、修改用户信息等功能的实现都离不开提交表单。在将用户输入的数据交给后台之前，常常要做一些客户端力所能及的校验工作，比如注册的时候需要校验是否填写了用户名，密码的长度是否符合规定，等等。这样可以避免因为提交不合法数据而带来的不必要网络开销。假设我们正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑。用户名不能为空。密码长度不能少于 6 位。手机号码必须符合格式。表单校验：版本一或许我们会看到类似如下版本的表单校验：<!DOCTYPE html>&
2021-03-03 18:53:28
293
2
原创 js实现数组扁平化的几种方式
数组偏平化数组的扁平化就是将一个嵌套多层的数组转换为只有一层的数组，扁平化也是面试中常见的考题。举个简单的例子，假设有个名为 flatDeep 的函数能实现数组扁平化效果，代码运行效果如下面：var array = [1, [2, [3, [4, 5]]]];console.log(flatDeep(array)); // [1, 2, 3, 4，5]像上述能实现偏平化的flatDeep函数实现方式有好几种，下面就尝试这几种方式实现一个flatDeep函数吧。方法一：递归通过循环递归的方式，一
2021-03-02 18:28:51
7769
2
原创 装饰者模式应用示例——表单验证
在一个 Web 项目中，可能存在非常多的表单，如注册、登录、修改用户信息等。在表单数据提交给后台之前，常常要做一些校验，比如登录的时候需要验证用户名和密码是否为空，代码如下：<!DOCTYPE html><html> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单验证</title>
2021-02-08 18:34:57
121
原创 代码重构技巧总结
1. 提炼函数如果一个函数过长，不得不加上若干注释才能让这个函数显得易读一些，那这些函数就很有必要进行重构。如果在函数中有一段代码可以被独立出来，那我们最好把这些代码放进另外一个独立的函数中。这是一种很常见的优化工作，这样做的好处主要有以下几点。 避免出现超大函数。 独立出来的函数有助于代码复用。 独立出来的函数更容易被覆写。 独立出来的函数如果拥有一个良好的命名，它本身就起到了注释的作用。比如在一个负责取得用户信息的函数里面，我们还需要打印跟用户信息有关的 log，那么打印 log
2021-02-08 17:00:28
400
原创 js用高阶函数动态创建代理（代理模式之缓存代理）
运用高阶组件结合代理模式中的缓存代理可以减少不必要的计算，举例我们经常使用到的加减乘除法。// 加法运算var plus = function(){ console.log('加法'); // TODO: 用于验证，记得删除 var a = 0; for(var i = 0, l = arguments.length; i < l; i++){ a = a + arguments[i]; }; return a;}// 乘法运算var mult = function(){ c
2021-02-02 15:21:16
200
2
原创 JavaScript设计模式——惰性单例模式
我们知道单例模式的核心是确保只有一个实例，并提供全局访问。而惰性单例只在需要的时候才创建对象实例并且只创建唯一的一个。创建对象和管理单例的职责被分布在两个不同的方法中，在实际开发中非常有用。惰性单例技术中创建单例的逻辑：用一个变量来标志是否创建过对象，如果是，则在下次直接返回这个已经创建好的对象：var object;if(!object){ object = xxx;}可以封装一个创建单例的getSingle函数，把创建对象的方法fn作为参数动态传入该getSingle函数：// 创
2021-01-30 18:53:12
160
原创 js实现数组浅拷贝和深拷贝
JavaScript实现数组的深拷贝、浅拷贝var arr = ['old', 1, true, null, undefined];var new_arr = arr.concat(); // 或者var new_arr = arr.slice()也是一样的效果;new_arr[0] = 'new';console.log(arr); // ["ol......
2018-05-25 10:58:54
38749
5
原创 微信小程序自定义步骤条效果
微信小程序自定义一个步骤条组件，自定义文字在下面，已完成和未完成和当前进度都不一样的样式，可点击上一步和下一步切换流程状态。
2024-01-01 17:50:01
1234
原创 前端开发调试技巧：如何在Component下选中当前插件并且查看当前插件信息
在Component下选中组件，然后在控制台输$r 按回车键即可输出该组件信息。例如 $r.props输出该组件的props参数
2023-10-18 15:59:51
214
原创 react Hook使用笔记：useState、useRef避免重复创建初始值
写法二，React 只会在首次渲染时调用这个函数，减少了不必要的性能开销。那样接受一个特殊的函数重载。有时候需要确保一个对象仅被创建一次。
2023-03-15 20:34:46
496
1
原创 react Hook使用笔记：当useEffect的依赖频繁变化时的优化方案
react Hook使用笔记：当useEffect的依赖频繁变化时的优化方案
2023-03-15 18:05:51
855
原创 ant.design TreeSelect组件popupClassName不生效解决方案
popupClassName自定义的className根本不在ant-select下拉菜单弹窗上，用dropdownClassName解决。
2023-03-10 17:35:50
813
原创 错误处理 ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of me
【代码】错误处理 ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of me。
2022-11-04 12:19:30
633
原创 在远程服务器上安装node、npm
在远程服务器上安装node、npm开发环境，分别执行以下命令即可。安装之后可以执行以下命令查看安装的版本验证是否安装成功。
2022-11-03 20:49:22
726
1
原创 git revert 某次提交merge到master后再merge回来原内容丢失再也合不上的问题解决方案
git revert 回滚后再找回代码
2022-10-20 15:34:48
1157
原创 yahoo performance 14 rules 雅虎性能优化14条军规
雅虎性能优化14条军规……一、尽可能的减少HTTP请求。二、使用CDN（内容分发网络）。三、添加Expire/Cache-Control头。四、启用Gzip压缩。五、将css放在页面最上面。六、将script放在页面最下面。七、避免在CSS中使用Expressions。八、把JS和CSS放到外部文件中。九、减少DNS查询。十、压缩 JavaScript。十一、避免重定向。十二、移除重复的脚本。十三、配置实体标签（ETag）。十四、使 AJAX 缓存。
2022-08-22 19:45:46
425
原创 LeetCode 1556. 千位分隔数 JavaScript版本
LeetCode 1556. 千位分隔数 JavaScript版本题目要求：给你一个整数 n，请你每隔三位添加点（即 "." 符号）作为千位分隔符，并将结果以字符串格式返回。
2022-07-12 19:44:17
159
原创 执行git命令出现 SSL certificate problem 的解决办法
解决SSL certificate problem证书签名报错问题：git config --global http.sslVerify “false"
2022-04-06 15:08:49
2183
原创 Git回滚到指定版本的方法：reset、revert
开发过程中，难免遇到提交代码之后想撤销提交操作，让程序回退到提交前的样子，Git版本回滚通常有两种解决方法：回退（reset）、反做（revert）。方法一：git reset原理： git reset的作用是修改HEAD的位置，即将HEAD指向的位置改变为之前存在的某个版本。适用场景： 如果想恢复到之前某个提交的版本，且那个版本之后提交的版本我们都不要了，就可以用这种方法。例如当前在版本三，想回退到版本一，同时丢弃掉版本二和版本三的所有改动，可使用reset操作。reset之后当前版本变成版本一，
2022-03-22 21:48:57
19847
4
原创 经典面试题：判断有效的括号——javascript版本
面试题目：给定一个只包括 ‘(’，’)’，’{’，’}’，’[’，’]’ 的字符串 s ，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。示例 1：输入：s = “()”输出：true示例 2：输入：s = “()[]{}”输出：true示例 3：输入：s = “(]”输出：false示例 4：输入：s = “([)]”输出：false示例 5：输入：s = “{[]}”输出：true解题思路：使用栈“后进先出”这个规
2021-07-08 18:42:50
1023
原创 flex布局实现子元素在父元素中均匀分布
首先认识一下flex子元素的三个属性,这三个属性控制一个flex子元素的以下几个方面:flex-grow: 这个flex子元素得到（伸张）多少positive free space?flex-shrink: 从这个flex子元素要消除（收缩）多少negative free space?flex-basis: 在flex子元素未伸张和收缩之前，它的大小是多少?以上属性通常用一个简写属性flex 表达. 下面的代码设置 flex-grow 属性值为 2, flex-shrink 属性值为 1 ，fle
2021-06-18 17:16:01
5044
原创 学习笔记——JavaScript（四）：多继承
讲多继承之前，咱们先看看当前流行的一个用来继承单对象属性的extend方法，// 单继承，属性复制var extend = function(target, source) { // 遍历源对象的属性 for (var p in source) { // 将源对象属性复制到目标对象中 target[p] = source[p] } // 返回目标对象 return target;}稍微对以上代码简单修改，传入多个对象参数即可实现对多个对象属性的继承，即多继承。//
2021-05-17 18:27:58
164
原创 学习笔记——JavaScript（二）：类的创建并添加属性和方法
咱们可以通过以下方式创建一个类并为之添加属性或者方法：var Book = function (name, price){ this.name = name; this.price = price}为类添加属性或者方法有两种形式，一是为原型对象属性一一赋值，二是将一个对象赋值给类的原型对象。例如：Book.prototype.title = function(){ // something TODO}// 或者Book.prototype = { title: function(){
2021-05-12 17:17:36
1961
原创 学习笔记——JavaScript（一）：面向对象编程
假设有个表单验证的需求，需要验证用户姓名、邮箱、密码。我们例举以下几种常见编程风格，领略js编码的艺术????。1. 版本一function checkName(val) { // 验证名字 if (val.length < 3) { console.log('长度不能小于3位') }}function checkEmail(val) { // 验证邮箱 if (val.length < 4) { console.log('长度不能小于4位') }}functio
2021-05-12 15:43:07
112
原创 Redux DevTools Extension如何在Mac本安装与项目中启用
Redux DevTools在react项目开发中可快速进行bug定位，调试真的很方便，安装和启用也很简单。安装Mac本上安装也很方便，我用的是Chrome浏览器，直接在Chrome应用商店安装就可以了。https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=zh-CN项目中启用安装后需要改动一点代码。例如我未启用之前代码为：import React fr
2021-02-25 14:38:07
562
原创 JavaScript设计模式——享元模式
享元模式的要求与目标享元模式要求将对象的属性划分为内部状态与外部状态（状态在这里通常指属性）。享元模式的目标是尽量减少共享对象的数量，关于如何划分内部状态和外部状态，下面的几条经验提供了一些指引。 内部状态存储于对象内部。 内部状态可以被一些对象共享。 内部状态独立于具体的场景，通常不会改变。 外部状态取决于具体的场景，并根据场景而变化，外部状态不能被共享。这样一来，我们便可以把所有内部状态相同的对象都指定为同一个共享的对象。而外部状态可以从对象身上剥离出来，并储存在外部。享元模式应用
2021-02-05 16:36:50
149
原创 Mac下使用HomeBrew安装、切换多个Node版本
实际开发中会遇到不同项目需要的node版本不一样，这就需要我们安装有多个版本的node。Mac下使用HomeBrew就可以很方便地安装和切换Node版本。首先查看当前可安装的node版本brew search node可看到类似如下内容：安装所需的node版本这里我安装的是8brew search node@8安装完毕再执行brew search node可看到node@...
2021-02-05 11:58:54
3665
原创 前端js实现动画效果
今天我们来模拟animate动画库实现几个动画效果；首先，在html文件创建一个div元素作为运动物体吧☺️<div id="move"></div>其次，在css文件里写几个简单样式吧☺️#move { position: absolute; width: 30px; height: 30px; border-radius: 100%; background-color: red; }接下来，主要的运
2021-02-01 18:22:14
783
原创 JavaScript闭包作用之一——延续局部变量的寿命
JavaScript中闭包的作用不少，这里就不一一例举了，今天要说的是利用闭包延续局部变量的寿命在工作中的使用场景。工作中img 对象经常用于进行数据上报，如下所示：var report = function( src ){ var img = new Image(); img.src = src; }; report( 'http://xxx.com/getUserInfo' );但是因为一些低版本浏览器的实现存在 bug，在这些浏览器下使用 report 函数进行数据上报会
2021-01-27 22:16:39
232
原创 JavaScript计算传入参数的乘积以及优化方案
遇到求几个参数乘积的问题（例如求(1，2，3，4）的乘积得24），我们可能会毫不犹豫地写出如下代码：原始版本var multiply = function () { var a = 1; for (let i = 0; i < arguments.length; i++) { a = a * arguments[i]; } return a;}console.log('11:',multiply(1,2,3,4)); // 输出：24multiply 函数接受一些
2021-01-27 18:59:52
559
原创 JavaScript模拟bind方法
目前大部分高级浏览器都实现了内置的 Function.prototype.bind，用来指定函数内部的 this指向，对于还没有支持原生的 Function.prototype.bind 的就需要手动模拟实现，一个简易版bind方法，可以这样实现：Function.prototype.bind = function (context) { var _this = this; // 保存原函数 return function () { // 返回一个新函数 return _this.appl
2021-01-27 16:42:53
83
JavaScript设计模式 PDF下载 高清完整版
2017-04-21
Sass和Compass设计师指南_PDF电子书下载 完整版 高清
2017-04-21
CSS揭秘(CSS SECRETS）_PDF电子书下载 高清 带书签目录, 人民邮电出版社 图灵程序设计丛书
2017-04-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人