- 博客(304)
- 资源 (4)
- 收藏
- 关注
RSS订阅翻译 How to break through the exhausted front-end business?
As a business front-end, while fulfilling business requirements, it also has to deal with various online problems. After working hard and busy for a year, the boss said that "thinking is not enough" and "there is no business scene". I went out for an inter
2021-09-22 20:00:13
1069
翻译 Methods to improve code quality: domain model, design principles, design patterns
A root cause of poor code1 Embodiment of poor codeWe can enumerate the manifestations of a lot of poor-quality code, such as unintelligible names, super large classes, super large methods, repetitive code, difficult code, difficult code modification...
2021-09-01 00:11:19
453
原创 吐槽小程序开发踩过的坑,以及一些解决方法
网络请求相关bug: http状态码不管是什么,一律被解析成2000.png要真正解决,只能等官方去fix这个bug了.发出请求需要注意的几个细节1.header要设置正确:(为什么header还要我们自己设?很傻逼)get请求时为header:{ "content-type":'application/json' },
2021-08-22 00:48:45
464
原创 Github Pages搭建个人博客空间
GitHub 是一个用于使用Git版本控制系统的项目的基于互联网的存取服务,GitHub于2008年2月运行。在2010年6月，GitHub宣布它现在已经提供可1百万项目，可以说非常强大。Github虽然是一个代码仓库，但是Github还免费为大家提供一个免费开源Github Pages空间，利用这个空间可以搭建轻量级的博客系统，绑定自己的域名，存放一些图片和文件等等。于是我这几天
2021-08-22 00:04:28
329
原创 nodejs 采集新闻数据
var express = require('express');var $ = require('jQuery');var app = express();var colors = require('colors');var message_list = require('./zui/message_list');var findD
2021-08-21 17:24:42
179
原创 Sublime Text2 常用快捷键
Ctrl+L选择整行(按住-继续选择下行)Ctrl+KK从光标处删除至行尾Ctrl+Shift+K删除整行Ctrl+Shift+D复制光标所在整行，插入在该行之前Ctrl+J合并行(已选择需要合并的多行时)
2021-08-21 17:14:27
743
原创 利用js对网站进行频繁请求进行攻击
以网站http://www.waiwaili.com/为例，打开该网站顶部的登录弹出框，该登录表单name为login，对该登录表单使用一个定时任务，每隔0.1秒进行一次登录请求（如果力度不够可以将请求间隔时间设得更短），代码片段如下（可以用谷歌的控制台进行书写）：setInterval( function(){ document.getElementsByName('login')[0
2021-08-21 17:05:26
279
转载 mac不要输入sudo，免密设置
mac有时候使用终端进行操作，会让输入sudo 并且要输入命令，这要很啰嗦，浪费时间，我们得想办法去掉。其次我们有时候用npm安装包的时候会提示权限不足，都可以通过这种途径解决。1.需要在/etc/sudoers中配置。这个文件的权限是r/r/n，配置之前需要加写权限。 1 sudochmodu-w/etc/sudoers 2.打开命令窗口sudo visudo 或者 sudo vi /etc/sudoers（这一步需要注意，网上说用vis...
2021-08-19 11:11:10
4046
原创 ECMAScript新特性(上)
JavaScript VS ECMAScriptECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准，但实际上后两者是ECMA-262标准（ES标准）的实现和扩展。JavaScript：一种直译式脚本语言，是一.
2020-05-10 02:08:42
303
1
原创 前端安全实用防御方案
XSS防御 转义字符（正则替换） function escape(str) { str = str.replace(/&/g, '&') str = str.replace(/</g, '<') str = str.replace(/>/g, '>') str = str.replace(/"/g, '...
2020-04-05 21:55:16
309
原创 【Js】defer和async的区别
如果没有defer和async，会阻塞dom树构建，立即加载并执行脚本 造成阻塞的原因：因为加载的js可能会对dom做增删查改等操作，这些操作会对dom树产生影响，如果不阻塞，等浏览器解析完标签生成dom树后，js修改了某些节点，那么浏览器又得重新解析，然后生成dom树，性能就会比较差 如果script带有async属性，不会阻塞dom树构建，立即异步加载，加载好后立即执行 如果scri...
2020-03-08 09:35:00
225
原创 浏览器缓存策略
浏览器缓存类型 强缓存 协商缓存 缓存获取流程 根据httpheader判断是否命中强缓存，如果命中，返回200状态码，让客户端直接从本地缓存中获取资源，不会向服务器请求资源 当没有命中强缓存时，客户端会发送请求到服务器，服务器通过request header验证该资源是否命中协商缓存 如果命中协商缓存，服务器直接返回请求（304状态码）...
2020-03-08 00:46:08
300
原创 架构整洁之道
一、架构设计的目标 用最少的人力成本满足构建和维护该系统的需求 衡量指标 工程师团队规模 代码总行数 代码变更行数 二、软件系统的价值 行为价值 按需求文档编写代码 可用性 功能性bug 性能 稳定性 紧急，但是...
2020-03-01 02:04:53
246
原创 手写koa2
一、koa2核心设计 封装nodehttp server，创造Koa类构造函数 构造request、response、及context对象 中间件机制实现 二、koa2核心代码实现1.主文件koa.jsconsthttp=require('http');constcontext=require('./context');const...
2020-02-29 17:44:16
221
原创 手写Promise
function Promise(executor) { var self = this; self.status = 'pending'; self.onResolvedCallback = []; self.onRejectedCallback = []; function resolve(value) { if (value ins...
2020-02-23 19:11:31
192
原创 模拟JSON.parse实现
var simulateJsonParse = function (jsonString) { if (!jsonString) { return jsonString; } var jsonObj = eval('(' + jsonString + ')'); return jsonObj;}var testJsonString = '{"n...
2020-02-23 11:30:09
200
原创 类的继承实现
function Parent(name) { this.parent = name;}Parent.prototype.say = function () { console.log(`Hello, ${this.parent}`)}function Child (name, parent) { // 将父类的构造函数绑定在子类上 Parent.call...
2020-02-23 11:19:19
178
原创 模拟Object.create实现
Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象__proto__function simulateCreate (proto) { var F = function () {}; F.prototype = proto; return new F();}复制代码参考资料 www.cxymsg.com/guid...
2020-02-22 23:21:18
786
原创 模拟bind实现
bind介绍bind()方法会创建一个新的函数，当这个新函数被调用时，bind()的第一个参数将作为它运行时的this，之后的一序列参数将会在传递的实参前传入作为它的参数。模拟bind实现/*** 模拟bind实现*/Function.prototype.simulateBind = function (context) { if (typeof this !== 'f...
2020-02-22 22:47:15
175
原创 模拟apply实现
/*** 模拟apply实现*/Function.prototype.newApply = function (context, argArray) { // 如果调用者不是方法抛出异常 if (typeof this !== 'function') { throw new TypeError('调用者不是一个方法'); } // 判断参数是...
2020-02-22 17:41:56
144
原创 模拟call实现
将函数设为对象的属性 执行&删除这个函数 指定this到函数并传入给定参数执行函数 如果不传入参数，默认指向window /*** 实现一个call方法*/Function.prototype.myCall = function (context) { context = context ? Object(context) : window; context...
2020-02-22 10:13:52
348
原创 模拟new实现
创建一个全新的对象 被执行[[prototype]]（也就是__proto__）链接 使this指向新创建的对象 创建的每个对象最终被[[prototype]]链接到这个函数的prototype对象上 如果函数没有返回对象类型Object（包含Function,Array,Date,RegExp,Error），那么表达式中的函数调用将返回该对象引用 /*** 模拟new实现*/c...
2020-02-22 00:43:54
207
原创 模拟instanceof实现
/*** 模拟instanceof*/const simulateInstanceof = (L, R) => { // L表示左边表达式，R表示右边表达式 const O = R.prototype; // 取R的显示原型 L = L.__proto__; // 取L的隐式原型 while (true) { if (L === nul...
2020-02-22 00:01:17
214
原创 Event实现
简单版class EventEmeitter { constructor () { this._events = this._events || new Map(); // 储存事件/键值对 this._maxListeners = this._maxListeners || 10; // 设立监听上限 }}// 触发名为type的事件...
2020-02-21 23:28:59
284
原创 影分身术——JS深克隆
分身术种类普通分身术：有其形，无其实，不具有完备的主体 影分身术：从真身上得到完备的继承，具有和真身一样的完备性普通分身术普通分身术技术实现/*** 简单克隆实现*/const originObj = { a: 1, b: 2};const simpleCloneObj = JSON.parse(JSON.stringify(originObj...
2020-02-20 23:39:05
290
原创 节流函数实现
节流函数原理规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。适用场景拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动 缩放场景：控制浏览器resize 动画场景：避免短时间内多次触发动画引起性能问题函数实现/*** 节流函数*/const throttle = (fn, delay = 500) => { l...
2020-02-19 23:57:17
162
原创 防抖函数实
防抖函数原理在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计算。适用场景按钮提交场景：防止多次提交按钮，只执行最后一次提交 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索词联想功能等函数实现/*** 防抖函数*/const debounce = (fn, delay) => { let timer =...
2020-02-19 23:43:23
156
原创 DOM事件
事件模型 脚本模型 <button onclick="javascript: alert('Hello')">Hello</button>复制代码 内联模型 <button onclick="showHello()">Hello</button>复制代码 动态绑定 /*** <but...
2020-02-19 18:35:57
145
原创 浏览器基础必知必会
浏览器常见内核 浏览器/RunTime 内核（渲染引擎） JavaScript 引擎 Chrome Blink（28~） Webkit（Chrome 27） V8 FireFox Gecko SpiderMonkey Safari Webkit JavaScriptCor...
2020-02-19 16:40:36
200
原创 JS基础必知必会
原型链 原型对象：绝大部分的函数（少数内建函数除外）都有一个prototype属性，这个属性是原型对象用来创建新对象的实例，而所有被创建的对象都会共享原型对象，因此这些对象便可以访问原型对象的属性 原型链 每个对象都有__proto__属性，此属性指向该对象的构造函数的原型 对象可以通过__proto__与上游的构造函数的原型对象连接起来，而上游的原型对象也有一个__proto__...
2020-02-18 23:43:17
167
原创 CSS基础必知必会
CSS选择器优先级 内联 ID选择器 类选择器 标签选择器 link和@import link属于XHTML标签，@import是CSS提供的 link会随着页面加载而加载，@import等页面加载完毕后才加载 @import在IE5以上才能被识别，link属于XHTML标签无兼容性问题 link的权重高于@import的权重 使用js控制dom改变元素只能用...
2020-02-16 15:25:32
275
1
原创 HTML基础必知必会
doctype作用 告知浏览器的解析器用什么文档标准来解析文档 影响浏览器对CSS代码和JS脚本的解析 文档解析类型 标准模式（standards mode）:页面按照HTML与CSS的定义渲染 怪异模式（quirks mode）:会模拟更旧的浏览器的行为 近乎标准（almost standards）:会实施一种表格单元尺寸的怪异行为（与IE7之前的单元格布局方式一致），除此...
2020-02-12 01:42:51
186
原创 【前端架构】演进式架构
一、更新 依赖和框架版本升级 当修订号发生变更时，通常只是进行一些Bug的修复，不需要我们做出响应 当次版本号发生变更时，往往可能会发生一些API变更，我们要视向下兼容情况来决定是否跟进 当主版本号变化时，可能有些API已经不存在了，我们需要大量地改动应用 语言版本升级 遗留系统重搭 二、迁移方式 微前端 ...
2020-02-10 01:36:03
238
原创 【前端架构】微前端实战
一、遗留系统：路由分发 路由分发式微前端 适用场景 不同技术栈之间差异较大，难以兼容、迁移、改造 项目不想花费大量的时间在这个系统的改造上 现在的系统在未来将会被取代 系统功能已经很完善，基本不会有新需求 基于路由分发的Nginx配置示例 路由分发的测试...
2020-02-10 00:14:42
695
原创 【前端架构】微前端架构设计
一、微前端 微前端架构 应用自治 单一职责 技术栈无关 为什么需要微前端 遗留系统迁移 后端解耦，前端聚合 热闹驱动开发 二、微前端的技术拆分方式 路由分发式：通过HTTP服务器的反向代理功能，将请求路由映射到对应的应用上 前端微服务化：在不同的框架之上设计通信和...
2020-02-06 00:12:44
700
原创 【前端架构】前后端分离架构设计
一、前后端分离 为什么选择前后端分离 独立部署 分清职责 技术栈独立 方便系统演进 提高效率 前后端分离的开发模式 按业务的展示逻辑，确认出待展示的内容 前后端根据内容，一起细化每个字段名，直至接口确认完毕 遇到对接第三方接口时，需要反复进行上一步 ...
2020-02-02 22:20:43
1253
原创 【前端架构】组件化架构设计
一、前端的组件化架构二、基础：风格指南 原则与模式 亲密性，即将相关的项（组件）组织到一起 对齐，每一项都应当与页面上的内容存在某种视觉联系 重复，重复元素以体现一致性 对比，对比产生强调，以强调产生强烈的反差 色彩 主题色，又可以称为品牌色，用于体现产品的特色和宣传时使用 功能...
2020-01-31 17:48:00
768
原创 【前端架构】单页面应用设计
一、前端MVC架构 Model模型层：获取、存放所有的对象数据 View表现层：呈现信息给用户 Controller控制层：模型和视图间的纽带 二、MVC架构原理 简单Model层实现 简单Controller层实现 简单View层实现 简单MVC调用逻辑实现 三、设计双向绑定的MVC ...
2020-01-29 18:11:20
456
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人