- 博客(292)
- 资源 (2)
- 收藏
- 关注
RSS订阅
转载 javascript深入学习this指向问题（精华）
this 的指向在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象，来，跟着我朗读三遍：this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象。记住这句话，this 你已经了解一半了。下面我们来看一个最简单的例子：例 1： var name = "windowsNam...
2019-06-06 20:25:14
329
转载 javascript深入学习原型到原型链（精华）
构造函数创建对象我们先使用构造函数创建一个对象：function Person() {}var person = new Person();person.name = 'Kevin';console.log(person.name) // Kevin在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。很简单吧，接下来进入正题...
2019-06-06 16:03:58
246
转载 CSS布局大全（转载）（精华）
原文地址：https://juejin.im/post/5aa252ac518825558001d5de内容目录一、水平居中(1)文本/行内元素/行内块级元素▲(2)单个块级元素▲(3)多个块级元素(4)使用绝对定位实现▲(5)任意个元素(flex)★本章小结：二、垂直居中(1)单行文本/行内元素/行内块级元素▲(2)多行文本/行内元素/行内块级元素(3)图片▲(4)单个块级...
2019-06-06 15:11:14
707
原创 unpkg 与 npm 的基本介绍
UNPKG是一个基于npm registry 的静态资源 CDN 服务，它可以快速获取和使用任何JavaScript包，无需安装任何软件或包。UNPKG可以从NPM仓库中获取任何包，支持直接在浏览器中使用和在Node.js中使用。UNPKG的优点是快速、简单和易用，特别适合于快速开发和测试。但是，由于UNPKG不支持版本锁定，可能会出现版本问题，此外，由于UNPKG是一个公共CDN服务，可能存在安全问题。
2023-07-11 16:54:53
3590
原创 前端面试题型汇总（适合社招两-三年水平）
随着社区流行技术的更新迭代以及工作经验的增加，对于前端开发，我有了新的理解。接下来我将整理出工作中常见的问题。
2022-08-21 11:07:28
3202
1
原创 前端性能优化
如何了解当前页面的性能状况通过Chrome浏览器的Lighthouse和performance功能面板查看资源数据DCL（DOMContentLoaded），DOM解析完毕。 FP（First Paint），表示渲染出第一个像素点。FP一般在HTML解析完成或者解析一部分时候触发。 FCP（First Contentful Paint），表示渲染出第一个内容，这里的“内容”可以是文本、图片、canvas。 FMP（First Meaningful Paint），首次渲染有意义的内容的时间
2022-04-27 01:25:06
267
原创 NPM 发布Vue组件/插件流程
1: 首先进入npm官网申请账号（需要邮箱验证通过后才可发布npm包）npmhttps://www.npmjs.com/2：在本地命令行通过 npm login 进行本地登录3：在自己需要对外发布的文件夹内通过命令 npm publish 进行发布注意点：ERR! code E403 npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/itheima-toolscxs - Forbid...
2021-12-04 22:40:47
567
转载 Object.defineProperty和Object.freeze、Object.seal的区别
对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。定义对象可以使用构造函数或字面量的形式：var obj = new Object;obj.name = "张三"; //添加描述obj.say = function(){}; //添加行为或var obj = { name: "张三", say: function(){ },};除了以上添加属性的方式，还可以使用Object.defineProperty定义新属性或修改原有的属性。1.1
2021-11-18 18:22:14
303
原创 Charles for mac/windows 安卓端 代理及转发
1 给本机安装根证书2 安卓端的wifi设置到提示的ip及其端口，安装证书后，此时安卓端请求能被Charles代理解析到访问 chrl.pro/ssl 进行安卓端的证书安装（建议chrome，访问网址即自动下载安装证书）3 进行域名转发，Map Remote...
2021-08-19 12:51:58
850
原创 项目的性能优化
图片的优化base64首先盲目使用base64并不能带来性能的优化，首先图片转成base64之后，体积会增大1/3，虽然减少了图片带来的http请求，但如果base64体积过大，会造成html文件体积臃肿，适得其反。在webpack配置上，默认图片转成base64的体积一般都是3k以内，所以对小图进行base64转码是优化http请求，保证页面加速渲染，加快页面加载速度。svg小图除了可以使用base64之外，还能使用svg格式的文件来取代图形字体存在本地，其中svg的效果更优，因为是矢量图不
2021-07-03 16:50:30
191
转载 关于React的setState
前言在React16.8之前，React通过this.state来访问state，通过this.setState()方法来更新state。当this.setState()被调用的时候，React会重新调用render方法来重新渲染UI。state是React中的重要概念。React是通过状态管理来实现对组件的管理。那么，React是如何控制组件的状态，又是如何利用状态来管理组件的呢？一、合成事件中setState在jsx中常见的onClick、onChange这些都是合成事件class A
2021-07-02 01:08:41
319
转载 2021-07-02
React核心开发团队一直都努力地让React变得更快。在React中可以用来优化组件性能的方法大概有以下几种:组件懒加载(React.lazy(...)和<Suspense />) Pure Component shouldComponentUpdate(...){...}生命周期函数本文还会介绍React16.6加入的另外一个专门用来优化函数组件(Functional Component)性能的方法:React.memo。无用的渲染组件是构成React视图的一个基本单元。.
2021-07-02 01:01:04
121
原创 ES5继承和ES6继承及其区别
ES5继承分别有以下几种原型链继承通过将对象的__proto__指向被继承构造函数的protopyte，使得新的对象在寻找属性和方法的时候能够通过__proto__向上查找原型链，用于定义实例间共享的属性或方法。这种方案最大问题就是子类无法通过父类创建私有属性。// 示例:function Parent() { this.name = ['写代码像蔡徐抻'] }Parent.prototype.getName = function() { return this.name.
2021-06-28 23:46:46
598
1
原创 Web 安全
XSS攻击 跨站脚本攻击（Cross Site Script）XSS的重点不在于跨站点，而在于脚本的执行。那么XSS的原理是：恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候，那么嵌入到web页面中script代码会执行，因此会达到恶意攻击用户的目的。那么XSS攻击最主要有如下分类：反射型、存储型、及 DOM-based型。 反射性和DOM-baseed型可以归类为非持久性XSS攻击。存储型可以归类为持久性XSS攻击。反射型反射型xss一般指攻击者通过..
2021-06-27 17:08:56
1120
原创 redux,react-redux,redux-saga,dva的区别与联系
【redux】1、定位：它是将flux和函数式编程思想结合在一起形成的架构；2、思想：视图与状态是一一对应的；所有的状态，都保存在一个对象里面；3、API：store：就是一个数据池，一个应用只有一个； state：一个 State 对应一个 View。只要 State 相同，View 就相同。action：State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 Vi.
2021-06-26 14:38:26
2936
原创 React 服务端渲染 & umi服务端渲染
react 服务端渲染原理不复杂，其中最核心的内容就是同构。node server 接收客户端请求，得到当前的req url path,然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为 props 、context或者store 形式传入组件，然后基于 react 内置的服务端渲染api renderToString() or renderToNodeStream() 把组件渲染为 html字符串或者 stream 流, 在把最终的 html 进行输出前需要将数据注入到浏览器端(注.
2021-06-23 11:18:20
1848
1
原创 React 源码学习
在 React Fiber 架构面世一年多后，最近 React 又发布了最新版 16.8.0，又一激动人心的特性：React Hooks 正式上线，让我升级 React 的意愿越来越强烈了。在升级之前，不妨回到原点，了解下人才济济的 React 团队为什么要大费周章，重写 React 架构，而 Fiber 又是个什么概念。二、React 15 的问题在页面元素很多，且需要频繁刷新的场景下，React 15 会出现掉帧的现象。请看以下例子：https://claudiopro.github.io/..
2021-06-13 12:59:35
251
原创 手写JS代码
bind的实现Function.prototype.myCall = function(context,...args){ const ctx= context || window; // 需要绑定到的上下文环境，无则默认为window const func = Symbol(); // 使用Symbol定义，避免重复key值 ctx[func] = this; // 此时this为传入的待执行的函数，使用对象属性的方式存储起来 // 通过执行对象的函数，使得t
2021-05-30 14:46:06
365
原创 websocket 原理及封装
WebSocketObj类使用单例模式创建websocket连接，暴露出手动开启/关闭/重连的函数，内部实现断线重连和心跳检测机制，通过onMessage状态钩子触发接收下行消息，发送该下行type对应的事件通知，由SocketEvent类实现调用对应的事件数组。import { PING, ROOMID, SESSION, TIME_SPACE, EV_TYPE } from './constant'import { tpToType } from './mapHandle'import S
2021-04-20 15:11:09
1273
1
转载 react 多层级组件传值方案（React.context 和 useContext）
React中，数据流是自顶向下的，如果兄弟组件通信，那就得先状态提升到父组件但我们平时开发过程中，经常碰到组件树层级很深，如果不同层级的组件需要使用同一份数据，那从顶层组件分别传递props的方案肯定是很麻烦的而且太深的props层级对后续进行维护追溯数据源来说也是不好的一种解决方式因此context的使用场景就是：在组件树中，不同层级需要访问相同的数据源时，可以利用context，进行组件之间的通信React.context先看这么一个例子：// context.jsimpor
2021-04-08 14:53:20
3932
原创 正则表达式 基础用法
为什么需要正则呢？将给定的数字转化成千分位的格式，如把“10000”转化为“10,000”// js逻辑写法function transform(num) { num = (num + '').split('') ı var temp = [] var count = 0; for (var len = num.length, i = len - 1; i >= 0; i--) { temp.unshift(num[i]) count+=1 ...
2021-02-26 10:56:23
212
原创 JS 实用代码片段
如何获取当前页面的滚动位置？ constgetScrollPosition=(el=window)=>({ x:el.pageXOffset!==undefined?el.pageXOffset:el.scrollLeft, y:el.pageYOffset!==undefined?el.pageYOffset:el.scrollTop});//ExamplegetScrollPosition();/...
2021-01-26 10:20:46
171
原创 关于React中的setState
React中的setState是异步的吗？setState是同步执行的！但是state并不一定会同步更新（异步更新和同步更新都存在）setState()中有个特别重要的布尔属性isBatchingUpdates（默认为false），它决定了state是同步更新还是异步更新。异步更新：合成事件 钩子函数setState 只在合成事件和钩子函数中是“异步更新”的。异步更新的背后，是同步代码处理（"合成事件和钩子函数"的调用在"更新"之前）。异步是为了实现批量更新的手段，也是React性能优
2021-01-12 14:37:01
239
原创 网络协议常见概念
HTTP 简介HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。HTTP 工作原理HTTP协议工作于客户端-服务端架构上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器有：Apache服务器，IIS服务器（I.
2021-01-06 20:22:47
1031
原创 前端性能优化
前端性能统计的数据大致有以下几个：白屏时间：从打开网站到有内容渲染出来的时间节点； 首屏时间：首屏内容渲染完毕的时间节点； 用户可操作时间节点：domready触发节点； 总下载时间：window.onload的触发节点。白屏时间白屏时间节点指的是从用户进入网站（输入url、刷新、跳转等方式）的时刻开始计算，一直到页面有内容展示出来的时间节点。这个过程包括dns查询、建立tcp连接、发送首个http请求（如果使用https还要介入TLS的验证时间）、返回html文档、html文档head.
2020-12-24 17:36:13
109
1
原创 常用 Git 指令
初始化 git 项目 （生成.git文件）git init从远程服务端克隆仓库（如github）git clone 'github仓库地址'提交改动git add 文件名 （添加文件到暂存区）git add . (.表示全部文件)git rm 文件名 （删除文件）git status （查看暂存区文件，有刚才添加的改动文件）git commit -m '提交信息' (提交到本地仓库，此时git status查看缓存区为空)git push (推送到远...
2020-12-06 15:49:56
1305
原创 React Hooks
import react, { useState, useEffect, useLayoutEffect, useRef } from "react";// useState : 代替class组件的内部stateconst [data, setData] = useState({});// useEffect : 代替生命周期 componentDidMount,componentDidUpdateuseEffect(() => { const handle = () => .
2020-11-24 20:26:14
242
1
原创 web接入 微信SDK
1: 引入微信SDKcnpm install weixin-js-sdk2:使用wx.config 注入功能函数3:使用wx.回调函数 调用（1）测试号申请， 注意事项（2）生成access_token（3）使用access_token 通过链接获得jsapi_tickethttps://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=***************&type=jsapi...
2020-08-07 10:55:12
633
原创 React 数据状态管理 Dva
安装 Dva 依赖通过 npm 安装 dva-cli 并确保版本是0.9.1或以上。npm install dva-cli -g定义 Model新建 modelmodels/products.js：export default { namespace: 'Test', state: { name: 'chen', }, effects: { *query({ payload }, { call, put }) { yie...
2020-07-27 16:57:20
776
原创 flutter 接入 google登录
https://pub.dev/packages/sharesdk_plugin#-installing-tab-在此网址查看最新的版本然后在pubspec.yaml里导入sharesdk_plugin: ^X.X.X然后参考这个example的文件来配置https://github.com/MobClub/ShareSDK-For-Flutter/tree/master/sharesdk_plugin/example...
2020-05-12 21:41:22
1585
原创 mac系统下 安装flutter 环境
入门: 在macOS上搭建Flutter开发环境 - Flutter中文网-此处下载 flutter 资源mac添加环境变量 - sundaysios - 博客园 - 为flutter配置环境变量Android Studio 下载 - 下载Android Studio 用于 安卓环境开发Mac版 Android Studio 手动导入插件plugins - Andrio...
2020-05-08 12:14:34
1030
原创 JS高阶函数（函数柯里化）
函数柯里化的好处有三个：可以将函数作为参数传递 （用于参数复用） 可以将函数作为返回值输出 (提前返回） 函数的延迟计算 （使用较少）缺点：【通用函数】解决了兼容性问题，但同时也会再来，使用的不便利性，不同的应用场景往，要传递很多参数，以达到解决特定问题的目的。有时候应用中，同一种规则可能会反复使用，这就可能会造成代码的重复性。总结：说白了柯里化就是用到了很多闭包，递归，参数展...
2020-04-30 12:25:23
1388
原创 EOLINKER 请求mock 数据
由于 easy mock的网站请求时不时会崩掉（=_=不知道是不是官方限制了请求次数），总之使用EOLINKER 请求mock数据是很快速的，就是初始创建比较麻烦，现在开始教程。EOLINKER 官网首先新建一个API项目进入项目选择新建API新建API完成在刚才的API项目中 新建mock API供大家尝试调用https://...
2020-04-05 16:16:20
350
原创 004_小程序常规操作
父组件调用子组件的函数假如我们已经有了一个自定义组件toast组件里面有个方法控制toast的显示假如我要在登录界面引用toast，那如何调用自定义组件的方法控制toast显示？1.首先在登录的json页面引用组件2.在登录的wxml页面引用组件（一定要设置id）3.在登录页的js页面的生命周期中获取组件（图中的传入的参数就是第2...
2020-03-24 14:36:01
287
原创 003_小程序路由 及 传值
一、哪些情况会触发页面跳转 小程序启动，初始化第一个页面 打开新页面，调用 API wx.navigateTo 或使用<navigator />组件 页面重定向，调用 API wx.redirectTo 或使用<navigator />组件 页面返回，调用 API wx.navigateBack或用户按左上角返回按钮 tarbar切换所有页面都必须在a...
2020-03-23 15:01:31
235
原创 001_小程序文件结构和生命周期
文件结构生命周期小程序分为应用、页面和组件三个部分，所以小程序的生命周期涉及以下：应用的生命周期 页面的生命周期 组件的声明周期 应用的生命周期对页面生命周期的影响（1）应用的生命周期App()函数用来注册一个小程序。接受一个Object参数，其指定小程序的生命周期回调等。App()必须在app.js中调用，必须调用且只能调用一次。App(...
2020-03-23 12:21:42
213
原创 002_小程序 标签 和 基础语法（列表渲染，事件响应）
标签视图容器 名称 功能说明 cover-image 覆盖在原生组件之上的图片视图 cover-view 覆盖在原生组件之上的文本视图 movable-area movable-view的可移动区域 movable...
2020-03-23 12:21:04
287
原创 008_React 状态管理 Redux
Redux 的概念Redux 是 JavaScript应用的状态容器，提供可预测化的状态管理；Javascript应用：是指任何Javascript构建的项目，而不是仅仅是React框架构建的项目，当然他们搭配用起来更加顺手； 状态容器：react项目中的state抽离出来集中在对象树状结构中store(状态容器)，一个项目只能有一个store(状态容器)； 可预测性：对于状态的更...
2020-03-20 15:53:59
303
原创 007_React-router
路由跳转 首先在项目中引入react-router的拓展npm install --save react-router-dom然后写一个组件作为跳转路由时需要显示的组件然后在使用路由跳转的地方引入然后在标签里通过 Router和Route放置组件修改路由地址，即可显示对应组件也可以使用 <Link> 标签里的to属性之间进行跳转（&...
2020-03-15 23:20:50
197
毕业论文管理系统
2018-07-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人