前端之路
文章平均质量分 52
一鲸落.万物生
做自己,大家一起加油!
展开
-
JS判断元素是否隐藏
判断元素是否隐藏echo.js 源码var isHidden = function(element) { return (element.offsetParent === null);};经过自己实践确实可以使用这种方法来判断当前元素是否被隐藏,包括通过设置父元素为display:none以及自己本身为none的情况。但是如果是通过设置visibility:hidden则无法检测出。...原创 2021-08-09 17:21:12 · 769 阅读 · 0 评论 -
浏览器渲染原理与过程
浏览器渲染原理与过程关键渲染路径请求资源—解析—构建树—渲染布局—绘制页面加载过程分为两部分DOMContentLoaded和load前者触发时,已加载页面内容,不包括样式表和外部资源后者,已经加载好构建DOM树根据html文档构建树,遍历dom节点此过程可能因为css,js加载而阻塞display为none和注释、构建CSSOM树解析css文件—对应stylesheet对象cssom、dom可以同时解析css解析和js执行互斥webkit做了优化,只有js访问css才阻塞原创 2021-04-22 17:18:54 · 219 阅读 · 0 评论 -
(前端)轻提示Toast组件开发
Toast(轻提示)最近在写组件库,发现Toast(类似element-ui的Message)、Dialog组件和其他组件不太一样这类组件是通过js脚本控制,暴露方法,通过方法生成动态组件,再挂载到body上首先我们先写一个简单页面index.vue<template> <article class="tg-h5-common-toast" v-show="visible"> {{ content }} </article></temp原创 2020-12-08 16:23:23 · 1432 阅读 · 0 评论 -
前端接收导出excel文件
后端导出Excel,前端接收exportSubscribe().then((res) => { let fileName = "订阅关系列表.xls"; let blob = new Blob([res.data], { type: "application/vnd.ms-excel", }); let reader = new FileReader(); reader.readAsDataURL(b原创 2020-12-08 15:55:49 · 848 阅读 · 0 评论 -
分享一个深拷贝方法(解决对象数组无限嵌套)
深拷贝解决对象数组无限嵌套function deepClone(x) { const root = {}; // 栈 const loopList = [ { parent: root, key: undefined, data: x } ]; while (loopList.length) { // 深度优先 const node = loopList.pop(); const parent = nod原创 2020-10-10 10:53:03 · 912 阅读 · 0 评论 -
【个人网站】好长时间没有更新博客了
好长时间没有更新博客了,一是上班比较忙,然后回家里面玩的比较猛,然后就一直在学一些东西,春招已经开始了,再不充电就完蛋了。以前在上班的时候,有空闲时间就在github上搭了个网站,以前做的很丑,就没敢拿出来,最近在家里没事干,完善了一下,拿出来给大家看一下,请大家赐教,哪里又不合理的地方欢迎指出!那么有不懂的同学呢,也可以私信我。哈哈网不好根本点不开。。。点击进入我的网站那么下一步呢,我...原创 2020-02-11 15:39:53 · 309 阅读 · 2 评论 -
初识Ionic
终于要对Ionic下手了原创 2019-12-27 12:41:33 · 154 阅读 · 0 评论 -
JS拖拽(继承),H5拖拽
JS实现拖拽上代码吧<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2019-12-04 11:05:35 · 198 阅读 · 0 评论 -
ES6学习(模块化,类)
ES6学习(模块化)大家都知道js不支持模块化,像ruby有require,python有import在ES6出现之前,社区也制定了一套模块规范,CommonJS require(‘http’) 还有AMD,CMD等其他规范ES6出现后,一统服务端和客户端的模块规范我们这样定义和使用模块(注意要在localhost)export const a = 10;export { ...原创 2019-11-28 16:41:59 · 201 阅读 · 0 评论 -
ES6学习(对象,Promise)
ES6 ----对象、Promise对象let json ={ a, b, showA(){ //个人建议: 一定注意,不要用箭头函数 }, showB(){ } }Object.is()用来比较两个值是否相等特点:如果肉眼识别是相同的(一字不差),那结果就是trueObject.assign()用来合并对象function ajax(options...原创 2019-11-28 16:13:21 · 313 阅读 · 0 评论 -
正则表达式--入门
正则表达式在正则表达式中,如果给出字符,那就是精准匹配。\d 匹配一个数字,\w 匹配一个字母或数字,\s匹配一个空格(包括tab空白符). 可以匹配任意字符*可以匹配任意个字符(包括0个)+表示至少一个字符?表示一个或0 个字符{n}表示n个字符,{n,m}表示n-m字符要做更精确地匹配,可以用[]表示范围,比如:[0-9a-zA-Z_]可以匹配一个数字、字母或者下划线;[...原创 2019-11-28 10:58:50 · 169 阅读 · 0 评论 -
Bat脚本txt文档每一行行首行尾加标识
操作txt文档行数据闲来无事,上班之余练习Vue,写了一个前端项目发到了githubPage上面。我的GithubPage现在做了几个简单的功能,其中有个微小说模块微小说首页在武侠分类中放置了一篇短篇小说,由于githubpage不可以连接服务器,我只能把文章放在js中,大家都知道,< p >标签是段落标签,所以需要我们把文章的第一个段落放到" “中,我们再循环到< ...原创 2019-11-27 14:59:03 · 1549 阅读 · 0 评论 -
JS(数组操作)
数组操作forEach()forEach我们很常用,它只是for循环的简单替代arr.forEach((val,index,arr)=>{ console.log(val,index,arr)})map()与forEach相似,做数据交互,映射机制正常情况下,要配合return,若没有return相当于forEach一般呢,我们用来重新整理数据结构,如果后台给我们的数据...原创 2019-11-18 14:14:17 · 153 阅读 · 0 评论 -
ES6学习(三个点)
三个点以前我们复制数组可能是这样的str1 = [10,5,6,2]str2 = Array.from(str1)现在我们可以用三个点(拓展运算符) str1 = [10,5,2,9] //str2 = Array.from(str1) str2 = [...str1] console.log(str2)同样我们得到:那么到底这三个点是什么呢?它起一个拓展、解构的作用,...原创 2019-11-18 10:24:12 · 276 阅读 · 0 评论 -
ES6学习(箭头函数)
箭头函数强大的东西。比如我们遇到这样一个需求,要把数组中的值变为2倍。//我们可能会使用for循环、forEach//map可能有些人还没有用过const number = [4,5,8,1]const double = number.map(item=>{ return item * 2})//或者这样const double = number.map((item,i...原创 2019-11-17 22:53:14 · 113 阅读 · 0 评论 -
ES6学习(解构赋值)
强大的解构赋值常用于ajax请求我们在请求时要封装json数据原创 2019-11-14 19:25:24 · 130 阅读 · 0 评论 -
ES6学习(let,var,const)
我们现在为什么要选择let、const,抛弃var呢?作为一个程序员,var简直就是违背编程逻辑的一种用法。var time = 1;var time = 2;按理说,编译器是不允许这样的代码出现的,会报already defined之类问题。在js中,这竟然是允许的,所以说,在代码量庞大的时候,我们很有可能是会忘记某一个变量是之前定义过的,后面的同名变量定义都会覆盖之前的变量,后果是...原创 2019-11-14 18:17:56 · 104 阅读 · 0 评论 -
SASS好在哪里?
SASS好在哪里?引入变量sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。$nav-color: #F90;nav { $width: 100px; width: $width; color: $nav-color;}//编译后nav { width: 100...翻译 2019-11-08 10:54:31 · 222 阅读 · 0 评论 -
Electron安装失败或者npm start Error
太难了!!!一开始报这个错!!!应该是cnpm安装会报错,我们改用npm,慢点就慢点。安装之后,electron -v 就会成功显示我们安装好了。然后退回vscode中,在我们的electron项目中,npm install后,发现start报错。右键开始菜单找到Windos PowerShel输入以下命令:然后我们删掉node-modules后,再次install 然后sta...原创 2019-10-31 17:58:05 · 1806 阅读 · 1 评论 -
Vue 生命周期
Vue虽然现在在搞Angular JS,但不能忘了Vue啊。梳理一下,加深记忆。原创 2019-10-30 16:29:42 · 117 阅读 · 0 评论 -
Angular JS学习笔记 (作用域 重要)
Angular JS 作用域 ScopeScope 作用域是一个对象,储存应用数据模型。作用域的层级结构对于DOM结构时相对应的原创 2019-10-30 09:51:44 · 125 阅读 · 0 评论 -
Angular JS学习笔记(控制器、作用域)
Angular JS 控制器在Angular中,如果在DOM中使用ng-controller指令添加了控制器,ng会调用该控制器构造函数生成一个控制器对象,创建了一个作用域($scope)控制器有两个作用:初始化$scope对象为$scope对象添加行为/方法、初始化$scope对象 var myApp = angular.module('myApp',[]); ...原创 2019-10-29 16:11:20 · 160 阅读 · 0 评论 -
Angular JS学习笔记(指令)
Angular JS 指令的学习编译器编译器是Angular提供的一项服务,遍历DOM节点,查找特定的属性。编译过程分为两步:1.编译:遍历节点,收集所有指令,返回一个连接函数。link func2.连接:将每个节点和其所在的作用域连接,双向绑定指令指令其实就是编译器遍历DOM节点时碰到的执行函数我们现在创建一个dialog指令并使用它首先我们写出指令模板<div ng-...原创 2019-10-26 22:16:02 · 219 阅读 · 0 评论 -
Angular JS 学习笔记(入门)
Angular JS 学习笔记实习的第一个项目,是angularjs。。。angular可是升级到angular8了啊.。。Angular Router 添加了向后兼容模式,以降低大型项目的升级成本。Angular Router 可以使用 $route APIs 延迟加载部分 AngularJS 应用程序,从而更容易地升级到 Angular。对于大型angularjs开发团队来说,现在正是升...原创 2019-10-24 10:57:16 · 171 阅读 · 0 评论 -
浏览器跨域
Google浏览器设置跨域1.什么是跨域跨域就是让浏览器可以执行其它页面的脚本浏览器的安全机制,也就是同源策略,使得浏览器不能执行不同源的脚本。为什么要设置跨域限制...原创 2019-08-15 13:31:49 · 148 阅读 · 0 评论 -
html + jquery 原生开发ToDo网页
html + jquery 原生开发ToDo网页相信做前端的大家都见过这个网页吧TodoMVCVue的入门网页今天我用原生html实现一下首先看一下html部分的代码:<html><head> <meta charset="utf-8"> <title>幸运记事</title> <link...原创 2019-08-06 17:59:07 · 639 阅读 · 0 评论