FBm2016-CSDN博客

原创如何编写高质量CSS

概述很多前端同行在潜意识里都觉得 js 比 css 更加重要，所以平时都不是很注重 css 编写的质量。然而，虽然页面的交互能力很大程度取决于 js，但是 css 代码的质量却直接决定了页面的美观程度。所以，css 编写地好与坏，直接决定了用户使用产品的第一印象。因此，编写高质量的 css 代码，是一个优秀前端必须掌握的技能。相比js或者其他编程语言，css 无疑是简单的，因为 css 鲜有逻辑，无须算法，只是规范。何为规范，规范是被大家认可和遵循的标准。对于 css，规范就是所有 css 属性和特

2021-02-10 15:14:52 306

原创 Vue源码学习

Vue中的虚拟DOM的作用vue是数据驱动，数据发生变化则需要更新视图如果要更新视图，则必须进行dom操作但是因为浏览器标准把DOM设计的非常复杂（数据结构复杂）所以，频繁的dom操作非常消耗性能因此，虚拟DOM的作用就是提升DOM操作的性能既然要更新视图必须进行DOM操作，那么要提升性能，我们必须减少无效的DOM操作如何提升DOM操作性能？原理：通过对比数据变化，计算只需要更新的地方，用JS的计算换取DOM操作消耗的性能，尽量减少DOM操作实现：通过DOM-Diff算法计算需要更新的虚

2020-06-27 23:58:47 634

原创 js原型、原型链、原型链继承

每次面试都要被原型虐一次，写个帖子加深一下记忆。继承、原型、原型链概念首先要知道两个概念：几乎所有函数有 prototype 属性，几乎所有对象有 __proto__ 属性。（注意几乎所有这个词，例如：Obejct.create(null) 创建的对象没有任何属性）实例对象的 __proto__ 指向创建它构造函数的原型对象。console.log(Obejct.creat...

2019-11-22 19:12:16 468

原创浅谈 Object.prototype.toString.call()

浅谈 Object.prototype.toString.call()今天学习 vue 看 node_modules 源码，看到 shallow-clone、以及 clone-deep 时，isPlainObject() 方法源码中使用 Object.prototype.toString.call(o) === ‘[object Object]’ 判断 o 是否是对象。所以后面将自己的理解...

2019-11-20 16:52:58 1209

原创 vue + element-ui + axios + webpack + mock.js项目构建（简书前端）

vue仿简书博客该项目为vue仿简书前端静态模板，功能：实现登陆，主页，详情等模块；公共：封装header组件，svg-icon加载组件等；解决问题：web基本的布局，静态图标加载，路由，webpack打包，vue组件化等更新日志2019.8.11目前增加Mock实现登陆功能封装了axios拦截器等效果图登陆主页主详情...

2019-08-11 22:01:25 1289 5

原创从零开始学前端：javascript解析与执行过程

预处理(编译)创建一个词法环境，对所有声明的变量和函数（var 表达式和 function 声明）进行处理，并添加到词法环境中。词法环境将var创建的变量和声明方式创建的函数提到作用域最前面变量只进行声明，默认值为undefined函数则指向函数的一个引用变量console.log(a); // 控制台打印 undefinedconsole.log(b); // 控制台打印 u...

2018-09-19 16:13:02 315

原创谈谈前端包管理工具 npm & yarn & pnpm

为什么需要包管理工具？每种主流编程语言都有包管理工具，比如 java 的 Maven、Gradle，Python 的 pip，nodejs 的 npm、yarn、pnpm 等。包管理工具的主要作用是管理第三方依赖，也可以看成一个"轮子"工厂，每个人都可以上传自己造的"轮子"和下载使用别人的"轮子"，包管理工具顾名思义就是统一管理这些轮子的软件或者工具，它以多种方式自动处理项目依赖关系、提供了命令行工具（CLI）、支持跟踪依赖项和版本等功能，除此之外还可以安装、卸载、更新和升级包，配置项目设置，运行.

2022-03-12 17:23:18 15100

转载 2022年哪些前端技术点会火

转载于 2022年哪些前端技术点会火 @扫地盲僧 (原创不易，文章质量很高，个人留存，希望大家支持原作者)「2022 年什么会火？什么该学？本文正在参与“聊聊 2022 技术趋势”征文活动」前段时间我发布了一篇关于《2022年前端行业技术发展趋势》的文章，里面介绍了整个前端技术大趋势的方向。这篇文章将以实际技术方案为起点，给大家分享一下我们团队的技术栈以及未来关注的方向。以Vite为代表的前端构建工具进入加速赛道ESM 大势所趋，势如破竹，由于 ESM&nbsp

2022-01-16 23:53:11 1055 1

原创项目 Git 分支管理

我们目前的分支管理模式版本发布：正式版本和预发环境发布都是基于 release 分支。线上问题修复是基于当前 release 分支创建新的 hotfix 分支。开发阶段：开发分支是基于 develop 分支，迭代开始会将上个版本 release 分支合并到 develop 分支。个人分支是基于 develop 创建新的个人分支。提测阶段：测试环境基于 develop 分支，bug 修改完成后由个人分支合入 develop 分支发布。预发环境基于 release 分支，bug 修改

2021-11-03 15:22:08 377

原创 Promise.all、Promise.allSettled、Promise.race、Promise.any 区别

Promise.all返回所有 Promise(p1,p2,p3) 实例的新 Promise。当所有 Promise 实例都变成 fulfilled 状态，新 Promise 的状态才是 fulfilled 状态，返回所有 promise 实例的 resolve value 数组。如果有一个 Promise 实例状态是 rejected 状态，则新 Promise 的状态是 rejected，返回第一个 promise reject 的 reason。Promise.allSettled返回

2021-02-22 19:33:41 855

原创 Generator函数同步执行异步操作详解

下面代码，首先声明一个 generator 函数 gen，目的是让第一个 yield 语句返回 Promise 的结果，再同步打印结果。function* gen() { console.log('starting') const result = yield asyncFn().then(value => { g.next(value) }) console.log('end:', result) // 1s后打印 end: promise value}const g

2021-02-16 19:50:21 438

原创 Promises/A+翻译和解释

Promise是异步编程的一种规范，Promises/A+【Promises/A+】翻译A promise represents the eventual result of an asynchronous operation. The primary way of interacting with a promise is through its then method, which registers callbacks to receive either a promise’s eventual

2021-02-10 15:20:42 654

原创 vue.js源码为什么用rollup打包

vue1.0.9版本用rollup替换webpack目前，vue2、vue3源码都是rollup打包，为什么？尤大大解释原文：作者：尤雨溪链接：https://www.zhihu.com/question/37861778/answer/73847503rollup 只是用于 Vue 发布文件的构建，对用户使用没有直接影响。之前用 webpack 打包，还是会自带一个小型的动态 module 加载机制，并且每个文件是包在一个模块函数里的。rollup 打包通过重命名 import .

2020-11-20 11:14:03 628

原创【前端性能优化】公共js库引入方式优化

在日常的开发中，我们经常会用到一些js的库比如 lodash、rxjs 等等，就 lodash 而言，比如我们要使用 lodash 的深拷贝 cloneDeep 方法，现在分别对比两种引入方式构建的速度与体积。测试的 webpack.config.js 配置const path = require('path');module.exports = { mode: 'development', devtool: 'inline-source-map', entry: './src/inde

2020-08-24 09:48:54 423

原创 element-ui 树形列表自定义图标

通过 css 替换树形列表收起子节点图标的 content// scss 代码/deep/ .el-table .el-table__expand-icon .el-icon-arrow-right:before { content: "\e6d9";}/deep/ .el-table .el-table__expand-icon--expanded { transform: rotate(0); .el-icon-arrow-right:before { content: "\

2020-08-05 19:34:06 1524

原创一些很有道理值得反复推敲的好句子

职业前端，一个让我沉迷的岗位前端，一个将一张张UI效果图变成一个个生动的项目的岗位一个将冰冷的后台数据转换为有趣的视觉享受的岗位你的职业不一定是你100%热爱的，但它一定不能是你厌恶的作者：千锋教育链接：https://www.zhihu.com/question/321208666/answer/738274807来源：知乎著作权归作者所有。商业转载请联系作者获得授权...

2020-04-15 18:25:12 644

原创网站黑白色调之filter属性

2020.4.4清明节全国哀悼，各大网站变成黑白色调，第一次访问CSDN时，看到头像竟然也变黑白色，当时以为是网站经过某种算法实现这种效果。当时感觉有点复杂，所以选择性跳过了这个问题哈哈。但是下午江哥（成都oppo前端大佬~~），突然提出一个问题，你们知道网站怎么实现黑白色吗？然后分享了现实原理，竟然一行代码。。。// 在html或body元素设置css属性filter: graysc...

2020-04-04 16:30:14 484

原创股票本质

犹太人“卖烧饼”中的炒股思维庄家是怎么拉升股价的有一个市场，有两个人在卖烧饼，有且只有两个人，我们称他们为烧饼甲、烧饼乙。他们的烧饼价格没有物价局监管，他们每个烧饼卖一元钱就可以保本（包括他们的劳动力价值），并且他们的烧饼数量一样多。这段时间，他们生意很不好，一个买烧饼的人都没有，甲说：“好无聊”，乙说：“我也好无聊”，此时看故事的你们也说：好无聊。这个时候的市场，我们就称之为不活跃！为了让大...

2020-03-20 00:02:23 860

原创 egg.js + mongoose

实现 mongodb 数据库增删改查新建 egg 项目$ mkdir egg-mongoose-demo && cd egg-mongoose-demo$ npm init egg --type=simple$ npm i安装 egg-mongoosenpm i egg-mongoose --saveegg 配置// config\plugin.jsmod...

2020-03-08 15:58:25 371

原创爬虫介绍

爬虫百度百科网络爬虫是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。网络爬虫（又称网络蜘蛛，机器人），就是模拟客户端发送网络请求，接收请求响应，一种按照一定的规则，自动地抓取互联网信息的程序。只要浏览器能够做的事情，原则上，爬虫都能够做到。简单来说，爬虫就是自动从网络上收集信息的一种程序，复杂点来说，就是一整套关于数据请求、处理、存储的程序。原理发送请求 -> 接...

2020-01-23 16:42:10 2335

原创 vue报错 Avoid using non-primitive value as key, use string/number value instead.

问题原因1. v-for 循环时的 key 值是引用类型（对象或者数组）解决<el-option v-for="item in cities" :key="item.id" ...></el-option>3. v-model绑定的值可能是数组对象或者或数组嵌套数组解决<!-- 检查这里的defaultV...

2019-12-09 10:26:14 763

原创 vue报错 Property or method "***" is not defined on the instance but referenced but referenced during.

控制台报错信息Property or method "showData" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components,...

2019-12-04 11:16:41 11205

原创 es6、es7、es8、es9、es10各版本特性

es6（2015）let const模板字符串 (``)箭头函数（() => {}）函数参数默认值对象属性简写延展操作符（…）Promise类（class）模块化（import export）es7（2016）Array.prototype.includes()指数操作符（**）es8（2017）async/awaitObject.values(...

2019-12-02 16:58:48 802

转载彻底理解cookie，session，token

彻底理解cookie，session，token发展史1、很久很久以前，Web 基本上就是文档的浏览而已，既然是浏览，作为服务器，不需要记录谁在某一段时间里都浏览了什么文档，每次请求都是一个新的HTTP协议，就是请求加响应，尤其是我不用记住是谁刚刚发了HTTP请求，每个请求对我来说都是全新的。这段时间很嗨皮2、但是随着交互式Web应用的兴起，像在线购物网站，需要登录的网...

2019-07-24 22:43:38 122

原创 git简易教程

新建代码库# 在当前目录新建一个Git代码库git init # 新建一个目录，将其初始化为Git代码库git init [project-name]#克隆项目和整个historygit clone [url]配置# 查看当前项目配置git config --list# 设置提交代码时的用户信息git config [--global] user.name &amp;quot;[nam...

2018-11-24 11:27:16 125

原创 webpack执行npx webpack报错

报错信息npm ERR! code ENOLOCALnpm ERR! Could not install from "Files\nodejs\node_cache\_npx\11132" as it does not contain a package.json file.npm ERR! A complete log of this run can be found in:npm E...

2018-09-23 15:30:53 8881

原创 webpack入门

webapck是基于JavaScript 的静态模块打包工具。它可以将各式各样的静态资源根据依赖关系图打包压缩成一个或多个文件。但是webpack本身只支持javascript资源，我们可以通过配置loader打包其他类型的资源。

2018-09-23 15:14:33 160

原创 js正则实例

javascript正则表达式匹配、替换、分组规则积累日期格式处理var dateStr = '2018-08-08';var res = dateStr.replace(/[\D]/g,&quot;&quot;).slice(0,8).replace(/(\d{4}[\D]*)(\d{2}[\D]*)(\d{1,2}[\D]*)/,&quot;$1/$2/$3&quot;);console.log(res)//...

2018-08-08 11:36:52 294

原创关于AngularJS甚至前端框架的一篇热评

起因 csdn看到一篇题为“不要被惯性思维骗了，AngularJS真的那么完美？”，出于对angularJs的关注以及好奇作者新颖的观点开始阅读之旅。评论区大神针对作者观点有一篇脍炙人口的点评，特此收藏。原贴：不要被惯性思维骗了，AngularJS真的那么完美？第一、17年3月份baiduspider render爬虫上线，百度给的解释是：更好的抓取js、css、图片信息。其实就...

2018-08-01 11:39:52 220

原创 npm install及npm install express-generator -g报错：errno -4048

错误: errno -4048报错代码npm ERR! path C:\Program Files\nodejs\node_modules\.stagingnpm ERR! code EPERMnpm ERR! errno -4048npm ERR! syscall mkdirnpm ERR! Error: EPERM: operation not permitted, mkdir...

2018-07-17 14:46:10 8169 1

原创从零开始学前端：HTML解析过程

从事前端工作，也有近两年时间，但对前端知识体系没有系统学习或整理。为了巩固自己的基础以及更深入学习前端的技术，博主将从零开始学前端。并将学习过程记录以及所有知识点记录在《从零开始学前端》系列帖子。

2018-07-15 11:39:29 2260

原创 ngModel:numfmt及ng-true-value、ng-false-value勾选错误

angularjs 报 ngModel:numfmt 错Error: [ngModel:numfmt] http://errors.angularjs.org/1.5.5/ngModel/numfmt?p0=1 at Error (native) at http://192.168.1.21:8020/AngularJS/js/angular.min.js:6:412 ...

2018-07-11 10:17:49 1458

原创 npm run dev ：error Expected linebreaks to be 'CRLF' but found 'LF' linebreak-style解决

编辑根目录.eslintrc文件 rules 属性“linebreak-style”属性设为[0,”error”, “windows”]"rules": { "linebreak-style": [0,"error", "windows"],}我的错误截图

2018-06-28 19:02:17 5884

原创 vue + iview项目构建

最近在着手搭建自己的个人博客，确定技术栈为vue + node.js(express)+mysql，所以需要用vue写博客pc端以及后台管理系统页面，而UI组件则是用iview。把自己搭建项目的过程写出来，方便自己查阅，也供大家学习。vue.js官网iviewvue-cli PS：vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resou...

2018-06-24 12:58:48 35863 9

原创 sublime配置文件拷贝粘贴等操作

1 下载安装sublime2 Ctrl + Shift + P 打开命令模式搜索 package control:install package 选择后出现插件安装窗口3 搜索SideBarEnhancements点击安装SideBarEnhancements 是一款很实用的右键菜单增强插件，有以 diff 形式显示未保存的修改、在文件管理器中显示该文件、复制文件路径、在侧边栏中定位该文件等功能...

2018-06-23 12:28:28 5859

原创 js事件传播机制之冒泡事件详解

事件流是事件从页面接受并传播的过程，主要分三个阶段：事件捕获阶段、目标事件阶段、事件冒泡阶段。事件捕获：事件的传播从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。（最外层到触发元素）

2018-06-21 11:21:54 830

原创 linux 安装 tomcat

1、进入下载目录 cd /usr/local/2、下载 wget http://www-us.apache.org/dist/tomcat/tomcat-7/v7.0.73/bin/apache-tomcat-7.0.73.tar.gz3、解压 tar -zxvf apache-tomcat-7.0.73.tar.gz4、配置全局环境变量 vi /etc/profile#TOMCAT TOM...

2018-06-19 21:37:09 125

原创 linux 安装 mysql

1、查找以前是否装有mysqlrpm -qa|grep -i mysql2、删除mysql删除命令：rpm -e --nodeps 包名1、进入下载目录 cd /usr/local/2、下载wget http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.16-linux-glibc2.5-x86_64.tar3、解压 tar –xvf mys...

2018-06-14 12:23:27 129

转载一位程序员工作10年总结的13个忠告，却让很多人惋惜

一位程序员工作10年总结的13个忠告，却让很多人惋惜程序员21CTO社区 · 2015-10-28 00:00展望未来，总结过去10年的程序员生涯，给程序员小弟弟小妹妹们的一些总结性忠告。走过的路，回忆起来是那么曲折，把自己的一些心得体会分享给程序员兄弟姐妹们，虽然时代在变化，但是很可能你也会走我已经做过的10年的路程，有些心得体会你可以借鉴一下，觉得说得有道理的你就接纳，觉得说得没道理的，你...

2018-05-22 13:31:18 272

转载浏览器UA mozilla/5.0发展史

你是否好奇标识浏览器身份的User-Agent，为什么每个浏览器都有Mozilla字样？Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.94 Safari/537.36Mozilla/5.0 (Linux; U; Android 4.1.2; zh-tw; GT-...

2018-05-13 17:06:15 13471

JavaScript五子棋

空空如也