Bigfishseasugar-CSDN博客

原创 vue 知识点小结

组件间通信 / 访问父子组件间：props / $emit provide / inject $root / $parent $refs / $children其他：事件总线 $bus vuex 广播

2020-10-19 09:42:14 236

CSS异步加载设置preload。<link rel="preload" href="./index.css" as="style" onload="this.rel='stylesheet'">监听dom的构建，搭建完成后js动态添加link标签，引入css资源。let link = document.createElement("link");link.rel = "stylesheet";link.href = "./index1.css";...

2020-10-15 12:32:02 268

原创前端小白源码原理系列

这是在本人力所能及的范围内所手写源码，写的都是相对简单的版本，大部分需要进一步完善和补充。实现深拷贝我们都知道深拷贝可以用递归遍历来实现，但是实际上具体细节却有很多，比如需要拷贝基本类型和引用类型，而引用类型又包含普通对象 / 数组 / 函数等，所以需要逐个逐个来讨论完善。这个是包含判断基本数据类型和引用类型、判断普通对象和数组、处理循环引用问题的版本。进一步完善还需要实现克隆函数等功能。参考链接：https://juejin.im/post/6844903929705136141..

2020-10-11 19:30:27 220 2

原创 node.js 学习记录（持续更新中）

node.js 是什么JavaScript 的基本语法就是ECMAScript。平时我们一般写前端，所以此时JS是在浏览器上运行的。在浏览器的环境中，JS除了使用基本语法，还可以使用浏览器所提供的API （DOM和BOM）。与此相对应的，JS可以不依托于浏览器，而它可以在node环境中执行。在node环境中，JS除了使用基本语法，还可以使用node环境所提供的服务器级别的API（fs/http/path/os 等）。因此我们可得知，node并不是一种语言，而是一种JS的运行环境。JS在浏览器

2020-10-03 16:36:03 156

原创前端网络相关小结

手写 XMLHttpRequest 不借助任何库 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { console.log(xhr.responseText); } } }; xhr.open('GE.

2020-08-02 11:03:13 436

原创收集的一些对于某个前端知识讲解得比较好的文章

看了几篇觉得这篇清晰易懂，请移步：https://www.cnblogs.com/williamjie/p/11155166.html

2020-07-15 09:49:32 159

原创 JS / JQ 学习记录

《一起学前端之 JS 篇》是记录从2020.4.29开始，学习 JS 的收获与感悟。

2020-04-29 18:11:27 976 3

原创 HTML / CSS 学习记录

因为不是第一次了解这些原生技术了，所以只是记录一下从 2020.3.31 开始，学习这些原生技术时的一些感悟收获。2020.3.31HTML（超文本标记语言），超文本指的是什么？超文本有两层含义，第一层是指：超越了文本限制，即用HTML写出来的页面，除了包含文本外还可以包含图片、声音、动画及多媒体等。第二层是指：超级链接文本，指可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。...

2020-03-31 01:09:21 871

原创 vue 学习记录

这几天开始学习VUE框架，用的是VScode编辑器，电脑系统是win10，会把每天的一些相关学习记录写下来。2020.3.27win10系统如何二分屏比如我想让浏览器与编辑器平分桌面空间，需要把其中一个最小化后，按住鼠标左键，一直往桌面左（或右）边界移动，直到出现分屏提示特效，再松开鼠标左键，然后就可以二分屏了vscode中的liveserver如何生效1）...

2020-03-28 00:20:29 212

原创《CSS世界》学习感想（持续更新）

参加工作以后，发现对于css的认知水平不够，知识储备也有待补充。所以有空的时候，打算把吃灰的书都拿起来读一读，以求提升一下。2021.9.20更新了对css的一些认知要善用css的流特性。之前可能都直接用css3中方便快捷的flex布局比较多，觉得css2的布局都相对“原始”和“繁杂”。所以在不熟练css2的情况下，比如写一个占满一行的块级盒子，常常是写了height，还得给它加一个"width:100%"，这种写法就很多余，说明了对流布局的认识不够，使用不够熟练。此外，设...

2021-09-22 00:49:49 472 2

原创 CSS 画爱心

在学习完盒模型后，我们得知可以利用盒子的border属性绘制三角形、正方形和圆形等。但如果要绘制爱心可咋整？那不简单？两个圆加上一个正方形，再移动位置最终就可以组合（叠）成一个爱心了。话不多说，直接上效果图以及代码。效果图左图为移动后；右图为移动后把所有盒子颜色改为红色；代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...

2020-10-14 21:19:58 2313

原创 ES5 / ES6 实现继承

ES5组合继承 function Parent(value) { this.val = value } Parent.prototype.getValue = function () { console.log(this.val); } function Child(value) { Parent.call(this, value) } Child.prototype = new Parent() c

2020-08-26 10:08:13 158

原创浅谈 iframe的优缺点以及使用场景

一，使用 iframe 的优缺点1，优点实现了页面的“模块化”。可以把一些与本网页不大相关而独立出来会更合适的内容，或者需要多次复用的内容放在一个iframe中，再嵌套入本网页。2，缺点搜索引擎不会解读这种页面，不利于 SEO 滥用 iframe 会增加页面的性能开销你的网站可能会被别人用iframe进行嵌套引用。因为iframe享有着click的最优先权，当有人在伪造的主页中进行点击的话，如果点在iframe上，则会默认是在操作iframe的页面，所以钓鱼网站就是使用这个技术，通过诱导

2020-08-16 17:06:28 1267

原创 CSS 浅谈前端BFC

什么是 BFC ？BFC （Block Formatting Context）块格式上下文，它是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。如何创建 BFC ？根元素（<html>）浮动元素（元素的 float不是none）绝对定位元素（元素的 position 为absolute或fixed）行内块元素（元素的 display为inline-block） overflow 值不为visibl...

2020-08-14 16:36:01 215

原创 JS 全面深入理解this

this 关键字是javascript最复杂的机制之一this是什么当一个函数被调用时，会创建一个活动记录（执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方式、传入的参数等信息。而this就是这个记录的一个属性，可以在函数执行过程中使用。this既不是指向函数自身，也不是指向函数的词法作用域。this是在函数被调用时发生的绑定，和函数声明的位置没有任何关系（区分词法作用域），它指向什么完全取决于函数被调用的方式（调用的位置）。注：调用位置 ≠ 声明位置this让代码更.

2020-08-12 18:22:05 185

原创 JS 深入理解作用域（作用域链 / 词法作用域 / 闭包）

本篇博客来小结一下作用域和闭包相关的一些进阶知识点，均为本人阅读《你不知道的js》以及《js高级程序设计》后的理解。知识点有点多，所以可以直接看自己想要了解的部分。作用域部分词法作用域作用域共有两种主要的工作模型，分别为词法作用域和动态作用域。词法作用域最为普遍，且也是javascript使用的作用域，所以我们平时理解的javascript作用域其实就是javascript的（词法）作用域。词法作用域是由你在写代码时将变量和块级作用域写在哪里来决定的。比如，无论函数在哪里被调用，也无.

2020-08-09 20:18:59 426

原创 2021网易互联网秋招内推批前端笔试

跟今年春招网易互娱的暑期实习题型一样，四道算法编程题，考试时间100分钟。第一道很简单不多提，其他先 mark 下来，后面有空再慢慢总结答案（太菜了）。第二道题目有 E / EM / M / MH / H 五种难度的题目，分别表示的难度为 easy / easy or medium / medium/ medium or hard/ hard。其中 EM可以作为 E 或 M 难度的题目（ MH 同理）。现每举行一场比赛需要 E、M、H 难度的题目各一道，求最多能举行多少场比赛。...

2020-08-08 18:35:02 1572 2

原创 ES5 如何实现模块化

前端为什么需要模块化？JS作为一门脚本语言，在ES6之前是没有模块化这个概念的。所以多人协作开发过程中，在引入各种各样的js文件后，代码结构就会变得相当复杂，很容易引起全局变量命名冲突等问题。我们先看一个情景：分配任务让小明负责编写a.js和b.js，小红负责编写c.js。小明在a.js 定义了一个变量 flag = true，并且打算在 b.js 中使用这个变量，他希望在 a.js 中通过控制 flag 变量来控制 b.js 中的输出情况。// 小明写的 a.js...

2020-08-06 17:49:27 2025 1

原创浅谈前端模块化与组件化

前端的工程化大体可分为组件化 / 模块化 / 规范化 / 自动化，下面我们来小结一下组件化与模块化。好的东西总是相互借鉴的。随着web业务日益复杂化和多元化，前端开发从以WebPage模式为主转变为以WebApp模式为主了。而组件化模块化的这一些概念，大多也是从APP等技术中借鉴过来的。什么是组件以及什么是组件化？组件即从UI拆分下来的每个包含模板（HTML）、样式（CSS）、逻辑（JS）的功能完备的结构单元。页面上所有东西都是组件，页面本身就可以理解为一个大型组件，它可以..

2020-08-06 15:11:50 522

原创 JS 不用加减乘除实现加法运算

这是一道算法题，当然也需要理解位运算才能完成。当不能使用 + - * / 来实现加法时，可以使用位运算来实现。基本位运算符号& 与，将两个二进制数按位相与，只有同时为1结果才为1| 或，将两个二进制数按位相或，只要至少有一个为1则结果为1^ 异或，将两个二进制数按位相异或，只有两个位相异结果才为1，两个位同为1或同为0结果为0<< 有符号左移<<< 无符号左移>> 有符号右移>>> 无符号右移注...

2020-08-05 16:45:39 954

原创 JS 二叉树基本操作

二叉树的翻转 function reverseTree(root) { if (root !== null) { [root.left, root.right] = [root.right, root.left] reverseTree(root.left) reverseTree(root.right) } }判断二叉树是否完全对称 function isSymmetrical(root) {

2020-08-01 17:18:00 318

原创 JS 数组sort方法为什么升序是a-b

简单使用 sort 方法的时候，是按位排序的，比如： var arr = [1, 22, 15, 32, 4, 5] arr.sort()//[1,15,22,32,4,5]这样的结果很明显不能满足大多数问题的需求，所以我们可以在调用sort方法的时候，传入一个回调函数，从而改变 sort 方法的排序方式。先放结果，下列两次排序分别为升序排序和降序排序。 var arr = [1, 22, 15, 32, 4, 5] arr.sort((a, b) =&g

2020-07-23 16:04:12 5235 6

原创 JS 给数组中尚未存在的索引赋值

给对象新增属性的时候，可以直接以 obj['新增属性名'] = xxx 的形式新增。给数组添加元素的时候，最常用的当然是 push() / unshift() 等了。那如果我像对象添加属性那样，直接通过赋值尚未存在的索引来给数组新增元素，会起作用吗？答案是肯定的，但是有需要注意的地方。如果数组arr长度为4，即其[0] [1] [2] [3] 索引上有值时，直接通过 arr[4] = 4 来给arr的索引4添加元素是可以的，此时arr长度为5。 var arr = [0..

2020-07-21 10:12:52 1108

原创 css 圣杯布局与双飞翼布局的实现与理解

网站布局中的三栏布局，可以用圣杯布局与双飞翼布局来实现。三栏布局有其中几个要点：“中间”的主体部分在DOM结构上优先，以便优先渲染（详见HTML）。两侧部分宽度固定，中间宽度自适应。允许三个列中任意一列成为最高列。圣杯布局 <div class="container"> <div class="main"></div> <div class="left"></div> <div c..

2020-07-17 11:01:25 148

原创 css 理解margin负值对浮动元素的影响

在学习三栏布局的时候，很多地方都有用到margin的负值。但《css 权威指南》却没有提到有关浮动元素使用margin负值的内容，索性自己整理总结一下。若无特殊说明，本文的盒模型都是基于content-box模式下的，并且只针对宽度进行讨论。涉及的概念有点多，理解原理就好懂了，希望能对你有所帮助。预备知识盒模型一般来说，盒模型包括 margin、border、padding、content 四个部分，而《css权威指南》为了方便解释一些概念，它加上了内边界和外边界，分别指代上图内外..

2020-07-16 22:20:51 1198 4

原创浅谈vue响应式原理

以下只是个人在学习过程中的总结，原理大概了解了一番，把自己的理解写在了概述里。但是看源码的时候就一脸懵逼，后续有更深入的理解再回来完善（捂脸），如有疏漏，欢迎指出。预备知识首先需要明白两个概念：Object.defineProperty(obj , prop , descriptor) 观察者模式（又名，发布者订阅者模式）Object.defineProperty该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。三个参数分别表示：要定义属性的对.

2020-07-14 18:15:44 226

原创 vue 封装toast插件

自己封装插件，可以简单理解成是一种比封装组件更高级的代码复用。新增文件在 components / common / toast 文件夹下，新增文件Toast.vue 和 index.js ，代码如下：Toast.vue一个模板文件。<template> <div class="toast" v-show="isShow"> <div>{{message}}</div> </div></temp...

2020-07-13 11:23:23 613

原创 vue mixins的简单使用

我们都知道，类的代码复用可以通过 extends 进行类的继承。而对象的代码，可以通过什么方式复用呢？Vue 提供了 mixins （混入），可以让我们复用对象的代码。将相同代码抽取出来在两个组件中有相同的代码时，可以将这些代码抽取出来，单独放到一个js文件中。以下是在 mixin.js 文件中，将两个（或多个）组件中相同的 data 和 mounted 代码抽取出来，存放在变量Mxin中，并导出。export const Mixin = { data() { retu.

2020-07-09 15:14:17 297 1

原创 js 格式化日期

因为前端展示日期的格式不是固定的，所以后端返回的时间一般都是一个时间戳（单位为ms，以1970年1月1日为起点）。当我们想要把这个时间戳转换成一定的格式时，就需要手动封装一个格式化函数了。先创建Date实例（乘以1000将单位转换为s）：let date = new Date(value * 1000);然后把date以及转换的格式传给格式化函数：formatDate(date, "yyyy-MM-dd hh:mm:ss");格式化函数所在文件如下，包含两个函数：ex..

2020-07-08 23:28:36 168

原创踩坑css3的calc方法

下面两段代码看似没什么区别，但是只有第一段才是正确的。需要注意，calc中使用减法时，需要在"-"前后加空格，否则不生效。.detail-scroll { height: calc(100% - 44px);}.detail-scroll { height: calc(100%-44px);}...

2020-07-07 23:48:46 321

原创 vue 缓存页面并保留页面当前位置

用户从页面A跳转到页面B，过一会又从页面B返回页面A，但是希望回到页面A时，页面A依然保留上次离开时所浏览的位置。该如何实现呢？步骤用 <keep-alive> 包裹页面组件，以缓存页面状态。包裹后，页面组件会增加 activated 和 deactivated 两个生命周期，前者在进入页面时触发，后者在离开页面时触发。由于页面被缓存，因此不会再触发 destroy 和 create 。在生命周期函数 deactivated 中，记录离开时的位置，存于data中。在生命周期..

2020-07-07 15:58:52 1535

原创前端实现吸顶的三种方式

何为吸顶？吸顶就是随着页面滚动，某个元素在移动到顶部后便会固定下来，并且不会再因为页面继续滚动而消失。常见应用于页面的Tab栏。以下是自己在学习过程中简单整理的三种吸顶方式（仅描述思路）。一、position: sticky设置粘性定位并且添加某个方位才可生效，但是兼容性较差。二、动态修改元素的position监听页面的滚动，比较元素初始状态距离顶部的高度offsetTop 与页面此时的滚动高度。当后者大于前者时，修改元素的position方式为fixed。三、障眼..

2020-07-07 13:43:53 6739

原创简单使用 vue事件总线$bus

我们常常遇到组件之间需要通信的情况。有父子关系的组件，可以通过 props 和 $emit 等通信；但当两个组件间关系很“疏远”时，如果还顺着两者之间隔着的组件一个一个地传递信息就显得特别麻烦了，所以可以考虑 vuex 或事件总线$bus 等这一类“全局”解决方法。通过使用$bus，可以让A组件发出某一事件，然后在B组件中监听该事件，并执行一些代码（函数）。具体用法如下：先要在 main.js 中给 Vue原型添加$bus属性，并赋值一个新的Vue实例。Vue.prototype.$b.

2020-07-06 21:10:32 662 1

原创踩坑Better-Scroll框架

因为js原生的滚动条scroll在移动端会有卡顿的现象，所以开发者常常会使用scroll类的框架，比如 better-scroll 。但是使用 better-scroll 需要注意一些问题。当BScroll中的内容没有设置高度，而且包含图片的时候，有可能出现“拉不下去”的情况：因为使用BScroll的时候，需要有一个.wrapper盒子包裹.content盒子。当.content的内容高度高于.wrapper时，Bscroll便会出现滚动条，让用户可滚动以看完.contnt中的内容。需.

2020-07-06 13:27:12 316

原创 css height:100% 和 height:100vh的区别

在写样式的时候，遇到了需要设置高度的情况，为了适配不同设备，所以想到百分比和 vh 两种写法。但他们有什么区别呢？vh 就是当前屏幕可见高度的1%，% 是相对于父元素高度的百分比。当屏幕可视区域高度 = 其父元素高度时，有 height:100vh ==height:100%;但是当元素没有内容或其父元素没有高度时，设置height:100%，该元素不会被撑开，此时高度为0，但是设置height:100vh，该元素会被撑开与屏幕可视高度一致。启发自：http...

2020-07-05 21:41:38 2182

原创 vue-router传递参数的方式以及$route和$router的区别

vue-router 传参的方式。这里讲<router-link>的代码方式。params的类型传参数创建一个组件user，并在router/index.js注册。注册时需要在path后多加一个"/:参数"，比如 /user/:userId，用于传参在user父路由（这里是Vue组件）的template内使用它在<router-link>的to参数内通过动态绑定传递参数userId，参数变量来自父路由。<template> .

2020-06-27 00:09:11 440

原创 vue 为什么需要路由懒加载以及路由懒加载的方式

在终端 npm run build 后，vue项目中会生成一个 dist文件夹，它包含一个 js文件夹，里面有 app、vendor、manifest 文件，分别装的是业务逻辑代码、第三方提供商代码（框架等）、底层支撑代码（比如一系列底层环境）。因为随着项目的开发推进，业务逻辑代码会越来越多，所以上述的业务逻辑代码文件，即app文件也会越来越大。当用户打开这个网站的时候，很可能会因为请求的文件过大而等待时间过长。为了避免这种情况，我们需要懒加载。因为用户常常看到的只是业务逻辑的一部分，而不是...

2020-06-26 19:28:34 709

py的日常题目练习.txt

空空如也