- 博客(17)
- 收藏
- 关注
原创 【JS】洋葱圈:Koa 到 reduce 再到 redux 的实现
输出(经典的洋葱圈)代码实现一个洋葱圈:几个主要函数说明:洋葱圈中 compose 的伪代码执行顺序:reduce 方法实现洋葱圈我们看下执行过程:reduxredux 中 applyMiddleware 的部分代码我们发现,redux 也是基于 reduce 来对中间件进行执行的。redux 其他内部实现篇幅限制,本文不作详述。......
2022-06-18 14:53:54
195
原创 【无标题】
CSS中缩放图片模糊的解决方案在CSS中图片进行缩放操作后变模糊的解决办法:加入如下样式即可img {image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering: crisp-edges;-ms-interpolation-mode:nearest-neighbor;}...
2022-03-08 16:37:11
153
原创 【JS】页面字体布局
<!--页面字体布局--><script type="text/javascript"> window.__setFontSize__ = (function (doc, win) { var docEl = doc.documentElement; var recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return;
2021-03-24 20:39:32
222
原创 【工程化】eslint简单使用指南
这篇文章基础讲的很好:link补充:使用自己上传的eslint:自己定义一个eslint目录如下// my-config.jsmodule.exports = { extends: 'eslint:recommended', env: { node: true, es6: true }, rules: { 'no-console': 'error', 'indent': [ 'error', 4
2021-03-12 11:42:17
143
原创 单页面路由的简单实现
history模式的pushState方法实现了点击页面路由的自切换。点击create之后,注意观察路由变化点击home之后,注意观察路由变化index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><h1 id="a
2021-03-01 10:13:40
192
原创 【CSS】设置
要实现的功能:当页面向上滑动距离>200px时,隐藏div1在隐藏div1的同时,div2向上滑动到页面顶部当页面向上滑动距离<200px时,显示div1显示的同时,div2显示在div1下方Chrome中实现:原始的HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</
2021-01-27 11:53:11
137
原创 递归实现深拷贝
var obj1 = [{ name: '臧三', childs: ['小明', '小芳'], fn: function() {}, age: undefined}]var obj2 = extend2(obj1)console.log( obj2)function extend2(data){ if (typeof data === 'object' && data){ let val = typeof data.len
2021-01-19 11:06:20
212
原创 【JS】手写bind
Function.prototype.bind = function(){ let context = [].shift.call(arguments) let self = this; let args = arguments; return function () { return self.apply(context,[...args,...arguments]) }}let temp = Array.prototype.concat.bi
2020-12-24 10:55:08
108
原创 【JS】对象获取属性的方法(.和[]方式)
在写上一篇文章的时候,发现这样一个情况:let iterable = { a: '111', b: '222', c: '333',};for (let temp of Object.keys(iterable)){ console.log(temp); // a,b,c console.log(iterable[temp]); // 111,222,333 console.log(iterable.temp); // undefined,undef
2020-12-04 10:35:24
159
原创 【JS】for in和for of的前世今生,从Symbol和Iterator讲起
本文主要通过Symbol和Iterator层层递进,对for of 和 for in进行了解释和说明,Symbol和Iterator基础好的同学,可以直接跳到第三节
2020-12-04 09:05:43
524
原创 【JS】实现函数节流
var throttle = function (fn,interval) { var _self = fn, //节流函数 timer, //定时器 firstTime = true; //是否第一次调用 return function () { var args = arguments, __me = this; if (firstTime){ _self.apply(__me,a
2020-11-11 10:42:07
270
原创 【JS】模拟对象创建过程
function Person(name) { this.name = name}Person.prototype.getName = function () { return this.name}function objectCreate(...params) { console.log(arguments) // Arguments(2) [ƒ, "lanziwen", callee: (...), Symbol(Symbol.iterator): ƒ]
2020-11-05 11:50:48
223
原创 重学JS—第19章表单
一、基础简介form基于HTMLFormElement类型HTMLFormElement有自己的若干属性和方法可以通过document.forms.name访问表单基本操作提交:submit()重置:reset()表单字段的公共属性 disabled:布尔值,表示表单字段是否禁用。 form:指针,指向表单字段所属的表单。这个属性是只读的。 name:字符串,这个字段的名字。 readOnly:布尔值,表示这个字段是否只读。 tabIndex:数值,表示这个字段在按
2020-10-28 10:14:31
201
1
原创 重学JS—第十三章事件
一、事件简介事件冒泡事件捕获DOM事件“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。二、事件处理HTML事件处理通过 event 变量,可以直接访问事件对象,你不用自己定义它,也不用从函数的参数列表中读取。<!-- 输出 "click" --> <input type="button" value="Click Me" onclick="alert(event.type)">可能的问题:有可能 HTML 元素已经
2020-10-22 21:47:51
466
原创 重学JS—第十二章DOM2、3
DOM2简介DOM1主要定义了HTML(XML下同)文档底层结构。DOM2、3引入了交互能力(XML高级属性等)。DOM2的主要模块:核心:在DOM1基础上,添加更多方法和属性视图:为document定义了基于样式的不同视图事件:利用事件DOM交互样式:编程式访问和改变css遍历DOM2级HTML:添加了更多属性、方法和接口样式...
2020-10-15 18:34:41
188
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人