开心大表哥-CSDN博客

原创从零到一快速开发一套前端质量/错误监控系统，webpack打包时sourceMap收集及上传到后台，后台nodejs+express反向解析线上报错代码，定位到源码中报错的位置然后给出提示

项目介绍1.前端质量/报错监控系统整体思路实现逻辑2.开发一个webpack plugin插件收集使用者的sourcemap到云端3.使用者初始化报错系统的sdk，然后运行，报错时收集错误上报云端4.云端根据收集到的报错信息及之前拿到的sourcemap进行解析，确认报错位置下面是一个比较完整的流程图，我demo项目中还没有这么完善，但是有了一个整体的构架，主要目的是用于学习代码仓库：https://github.com/adminadmin1234/deep-study-webpack/tr

2022-04-13 22:23:51 607 3

原创 vue-cli4.0+nodejs多个项目共用组件动态打包单个项目

前言：公司经常会有一些活动，为了配合活动开发人员需要开发一些h5页面来配合活动，刚开始活动不多，所有活动页面都放在一个项目目录下，webpack共用一个固定打包入口，对路由(vue-router)和状态管理(vuex)进行模块划分，不同的活动页面通过不同的路由路径来加载。随着活动项目增多，页面也越来越多，问题就就出现了，比如打包projectA，webpack也会把projectB,proje...

2019-12-21 21:28:07 3023 1

原创全栈式开发,前端工程化,以nodejs,eggjs为服务器语言,mysql为数据库,vue,vuex,wangeditor,i18n,webpack前端架构服务器端渲染ssr支持seo的博客网站

前言下面介绍本人开发的个人博客，希望通过开源的方式一起学习和进步！1. 背景该项目为一个学习型的博客网站案例，毕竟每个it工程师都想有一个自己的博客嘛，适合初中级前端工程师；项目已经部署在阿里云上，已经比较完整了，本地下载代码和安装好对应的环境，运行即可以获得线上的效果。由于项目涉及到服务器端而且用了数据库作为存储工具，架构用了eggjs和easywebpack所以首次运行的步骤比较繁琐，还...

2019-05-29 19:35:20 777 3

原创从0到1架构webpack+vue前端项目，你自己搭建过vue开发环境吗

前言:作为一个小白，我们经常会迷惘webpack+vue项目究竟要怎样的呢？本次的文章就是为了解答这个问题的，跟着本文的思路你可以很轻易和明白一个简单的webpack+vue项目是怎样构建和运行起来的。源码地址成果图：图中左边是项目效果，右边是源码。下载源码后 1.安装必要的组件：npm ii是install的简写啦，我一不小心又开始装B了。。。。2.运行项目...

2018-07-07 00:06:04 3736 10

原创 eval跟new Function的区别是什么?是否有共同点?

eval()是一个危险的函数，它使用与调用者相同的权限执行代码。如果你用eval()运行的字符串代码被恶意方（不怀好意的人）修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。更重要的是，第三方代码可以看到某一个eval()被调用时的作用域，这也有可能导致一些不同方式的攻击。相似的Function就不容易被攻击。

2022-04-19 23:37:26 2170 6

原创 Set Map Array Object互转 weekSet weekMap iterator是什么有什么用区别是什么会使用吗 entries fromEntries

// Object.entries() 获取对象的键值对// Object.fromEntries把键值对列表转换成对象// Object.entries和Object.fromEntries之间是可逆的// Set和Map的entries()返回iterator对象// Object转Maplet obj = {foo:'hello', bar: 100};let map = new Map(Object.entries(obj));console.log(map); // Map(2).

2022-04-18 15:41:35 777

原创 react入门-由vue到react开发的历程

待续

2019-09-30 09:38:59 772 1

原创 gitlab-ci前端在阿里云实现nodejs可持续化集成部署

前言不甘心当一个切图仔，所以什么都要学一下；可持续化集成是一个项目工程架构的问题；但在这篇文章中我将它缩小到了前端的领域内。必要条件一台阿里云服务器-2核4G以上(我的心好痛800大洋)技术栈linux操作基础git/github/gitlabnodejs环境基础步骤...

2019-07-04 15:47:07 2621 3

原创 vue源码分析系列:用sourcemap调试源码

由于前几篇文章是用vue-cli直接分析的，今天我们学习直接调试vue源码。安装vue（mac机)1.在GitHub上克隆官方的vue-地址2.安装依赖npm install修改vue项目1.在package.json script dev 增加--sourcemap指令"dev": "rollup -w -c scripts/config.js --environment TARGE...

2019-06-12 11:49:36 10525 5

原创 vue源码分析系列四：createElement和update

createElementVue.js 利用 createElement 方法创建 VNode，它定义在 src/core/vdom/create-elemenet.js 中：// wrapper function for providing a more flexible interface// without getting yelled at by flowexport functi...

2019-06-10 16:18:22 1172

原创 vue源码分析系列三：render的执行过程和Virtual DOM的产生

render手写 render 函数，仔细观察下面这段代码，试想一下这里的 createElement 参数是什么。new Vue({ el: '#application', render(createElement) { return createElement('div', { attrs: { id...

2019-06-06 13:50:19 591

原创 vue源码分析系列二：$mount()和new Watcher()的执行过程

续vue源码分析系列一：new Vue的初始化过程在initMixin()里面调用了$mount()if (vm.$options.el) { vm.$mount(vm.$options.el);// 挂载dom元素}$mount()方法定义vm的原型上本身就定义了一个$mount(如下所示)，然后通过重写$mount方法，最后返回的时候，调用这个缓存$mount方法。//...

2019-06-05 10:18:56 1373

原创 vue源码分析系列一：new Vue的初始化过程

import Vue from ‘vue’（作者用的vue-cli一键生成）node环境下import Vue from 'vue'的作用是什么意思？在 NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：具体参考：官网完整版：同时包含编译器和运行时的版本。编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。运行时...

2019-06-04 10:50:25 3898 1

原创详细理解重绘与回流/重排的过程

前言：重绘与回流是由于浏览器的再次渲染所引起的一个话题，所以我们需要先了解浏览器的渲染过程；一个前端页面无非就是有hmtl、css、JavaScript组成的。通常来说，渲染引擎会解析HTML文档来构建DOM树，与此同时，渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树。接下来，DOM树和CSSOM树关联起来构成渲染树（RenderTree），这一过程称为Attachment。然后浏览...

2019-05-21 10:53:59 7382 2

原创 vue使用moment.js经webpack打包后超级大的原因和解决方案

Moment.js 是一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期，使用起来十分方便。但是它经过webpack打包之后会变得十分的大。我们做一下对比：测试版本：“moment”: “^2.17.1”,没import moment from 'moment';前webpack打出来的index.js包：js/chunk/index/index.eb9cbc...

2019-01-29 15:34:21 7310 4

原创阿里云轻量应用服务器实例id找不到无法备案

阿里云轻量应用服务器实例id找不到无法备案最近买了一个轻量应用服务器，做了一个个人网站，感觉做得不错，所以想将域名备案了，增加百度排名。于是去备案：结果找不到实例id。谷歌、百度很久都找不到答案；最终只能打电话问客服了。阿里云客服给出来的答案是我买的是香港的服务器；想要备案只能是中国大陆的原来买的服务器不能转换地域，所以我只能重新买一个中国大陆的服务器了（mmp）。...

2019-01-06 10:33:22 5741 10

原创 linux移动文件到另一个文件夹

复制指定目录下的全部文件到另一个目录中1.文件及目录的复制是经常要用到的。linux下进行复制的命令为cp。假设复制源目录为 dir1 ,目标目录为dir2。怎样才能将dir1下所有文件复制到dir2下了如果dir2目录不存在，则可以直接使用cp -r dir1 dir2即可。如果dir2目录已存在，则需要使用cp -r dir1/. dir2例：// 没有publicData...

2018-12-25 17:30:12 25148 3

原创支付宝小程序跳转到h5页面web-view

支付宝小程序跳转到h5页面web-view基础库 1.6.0 开始支持，低版本需做兼容组件是一个可以用来承载H5网页的组件，会自动铺满整个小程序页面。web-view 要渲染的H5网页URL。H5网页URL需要登录小程序管理后台-小程序详细-设置中，进行H5域名白名单配置示例代码：&lt;!-- axml --&gt;&lt;!-- 指向支付宝首页的web-view --&gt;&...

2018-12-25 15:10:03 21529 1

原创支付宝小程序复制到剪贴板

支付宝小程序复制到剪贴板my.getClipboard获取剪贴板数据。Page({ data: { text: '3.1415926', copy: '', }, handlePaste() { my.getClipboard({ success: ({ text }) =&gt; { this.setData({ cop...

2018-12-25 13:50:50 3083

原创 nodejs egg多静态文件入口配置

由于egg多静态资源入口在一开始的时候是没有的，是后来增加的；但是文档写得不是太清楚所以小白不容易弄懂。在config.default.js文件中增加这个，将项目根目录下的public、publicData这两个文件夹作为静态资源入口；运行的时候egg会将这两个文件夹的资源放到prefix: '/public/'配置的/public路径下。 exports.static = { pr...

2018-12-19 08:03:08 5843 3

原创 Mac上传文件到阿里云的Linux服务器,linux下载文件到Mac,unzip/zip压缩和解压文件

1.打开默认终端，左上角选择新建远程连接2.选择安全文件传输(sftp)2.1.点击右边服务器下的加号添加你要连接的远程服务器ip地址2.2.添加成功后右边服务器列表会出现你新加的这个ip地址，然后选中它；点击连接。3.首次连接一个服务器会让你确认（Are you sure you want to continute connecting(yes/no)）,你输入yes然后回车就可以...

2018-12-17 15:47:16 4598 2

原创阿里云部署nodejs，公网访问不了，域名不加端口号访问

背景：我买的阿里云服务器是香港的CentOS 7.3（便宜）已成功安装了nodejs操作：1.新建项目文件example.jscd ~touch example.js2.编辑example.js文件vi example.js2.1.输入i，进入编辑模式，将下面代码（简单的nodejs创建服务代码）粘贴到文件中。使用Esc按钮，退出编辑模式，输入:wq，回车，保存文件内容并退出...

2018-12-17 13:44:10 4291

原创 nodejs连接mysql报错：Client does not support authentication protocol requested by server; consider upgrad

由于本人是前端，mysql只是偶尔做一下小项目会用到，大概一年没有用了。今天用mac通过brew下载了一个8.0.12版本的mysql;然后用egg进行连接,egg是阿里封装的一个nodejs框架。下载到本地的mysql；初始密码我是留空的。所以在nodejs项目中配置mysql连接数据的时候我的password=’’；结果报错了：Client does not support authe...

2018-11-28 17:45:08 6400 4

原创 vue elementUi tree 懒加载使用详情

背景：vue下使用elementUI文档：http://element-cn.eleme.io/#/zh-CN/component/tree#tree-shu-xing-kong-jian需求：只保存二级节点中选中的数据；不保存一级节点选中的数据。效果：数据来源：后台提供两个接口分别用于取第一级节点和第二级节点的数据；思路：点击标签列表时，触发selectLabelList获...

2018-11-21 11:17:04 28845 5

原创 MAC设置环境变量PATH和alias创建快捷键

Mac系统的环境变量，是由下面这几个个文件共同控制的，优先顺序为：/etc/profile /etc/paths ~/.bash_profile ~/.bash_login ~/.profile ~/.bashrc/etc/profile和/etc/paths是系统级别的，系统启动就会加载，后面几个是当前用户级的环境变量。后面3个按照从前往后的顺序读取，如果/.bash_profile文件存在...

2018-11-20 19:12:04 2283

原创推荐一个十分实用的VUE瀑布流插件Masonry

Masonry是最流行的瀑布流插件之一，配置简单，功能强大，在Github上收获了1.3w+ stars。如果你想使用瀑布流提升网站体验，Masonry将是不错的选择。啥是瀑布流：是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这...

2018-11-08 11:53:08 23398 10

原创快应用快速开发攻略和踩坑讲解

快应用是什么：快应用是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。优势：无需安装即点即用-流畅；能添加到桌面；区别于原生App和WebApp；超6亿流量扶持；大势所趋。存在问题：需要申请九大厂商开发者账号，每个账号需要...

2018-11-07 15:11:33 831 2

原创 js将带有日期格式的数组对象按时间降序重新排列，最后打印数组对象的日期

需求：后台将一个带有日期格式（不是时间戳）的数组对象给到前端，前端打印这个数组对象的日期时需要按时间降序排列思路：1.先将对象中的日期字段变成时间戳，然后通过sort()来排序，接着将对象中的时间戳变成日期； 2.先给对象增加一个字段publishTimeNew，用来保存时间戳；然后通过sort()来排序publishTimeNew虽然第二种思路多增加了一个publishTimeNew字段占...

2018-10-30 18:01:10 10417 3

原创 js获取富文本中的第一张图片url正则公式及去除字符串里面的html标签的正则公式

js获取富文本中的第一张图片url正则公式及去除字符串里面的html标签后台发来一个富文本字符串里面可能包含了0、1、2、3…图片标签（img）,我们的任务是获取这个字符串里面第一张图片的url，如果没有图片则放回空var imgUrlFun = function(str){ var data = ''; str.replace(/&amp;lt;img [^&amp;...

2018-10-30 13:51:25 5476 2

原创前端算法：给定一个整数数组和一个目标值，找出数组中和为目标值的两个数、判断一个整数是否是回文数

&lt;!--给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用。示例：给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]@link https://leetcode-cn.com/problems/tw...

2018-10-24 11:12:55 1187 2

原创解析url中的#、&、？的作用和意义

twitter改版，一个显著变化，就是URL加入了&amp;amp;quot;#!&amp;amp;quot;符号。比如，改版前的用户主页网址为http://twitter.com/username改版后，就变成了http://twitter.com/#!/username这是主流网站第一次将&amp;amp;quot;#&amp;amp;quot;大规模用于重要URL中。这表明井号（Hash）的作用正在被重新认识。本文根据HttpWa

2018-10-11 15:36:15 3663

原创 js获取url地址中的每一个参数，方便操作url的hash及正则表达式的方式获取在url上参数

js获取url地址中的每一个参数，方便操作url的hash值得收藏&lt;html&gt; &lt;body&gt; &lt;script&gt; //location.search; //可获取浏览器当前访问的url中"?"符后的字串 function parseURL(url) {

2018-10-11 15:32:26 5834

原创 JavaScript引擎运行原理解析

1. 什么是JavaScript解析引擎？简单地说，JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当你写了 var a = 1 + 1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。“JavaScript 引擎”通常被称作一种虚拟机。JavaScript 虚拟机是一种进程虚拟...

2018-09-30 10:16:41 5459 1

原创正则表达式的高阶使用技巧

零宽断言：零宽断言是正则表达式的一种方法，用于查找在某些内容（但并不包括这些内容）之前或者之后的东西，也就是说他们像\b（匹配一个单词边界，也就是单词和空格间的位置，正则表达式的匹配有两种概念，一种是匹配字符，一种是匹配位置，这里的\b就是匹配位置，例如，“er\b”可以匹配“never”中的“er”，但不能匹配“verb”中的“er”），^（匹配输入字行首），$（匹配输入字行尾）那样用于指定一...

2018-09-26 15:30:15 1392

原创 Mac设置别名alias和全局变量

设置.bash_profile1.打开终端Terminal2.输入命令cd ~到用户主目录cd ~3.用vim编辑.bash_profile文件vim .bash_profile或者直接打开再编辑： open -e .bash_profile如果没有.bash_profile文件就要先创建：touch .bash_profile4.增加alias:alias wepy...

2018-09-25 15:07:20 4397 1

原创抓包神器charles使用与破解实战

简介：charles是一个HTTP代理服务器,HTTP监视器,反转代理服务器，当浏览器连接Charles的代理访问互联网时，Charles可以监控浏览器发送和接收的所有数据。它允许一个开发者查看所有连接互联网的HTTP通信，这些包括request, response和HTTP headers （包含cookies与caching信息）。主要功能：支持SSL代理。可以截取分析SSL的请求。支...

2018-09-19 15:39:05 2588 2

原创 ES6中class的getter和setter在继承中踩坑

在 Class 内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。在 Class 内部的get、set用法，看起来比较舒服，而且可以写同名函数了。class MyClass { constructor() {} get prop() { return 'getter'; } set prop(value) { console.log(...

2018-09-19 15:19:45 6461 1

原创解读es6 class 中 constructor 方法和 super 的作用

ES6 的 class 属于一种“语法糖”，所以只是写法更加优雅，更加像面对对象的编程，其思想和 ES5 是一致的。类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。//定义类class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { r...

2018-09-19 15:06:34 19351 7

原创 js通过UA判断ios、android、微信、qq、qq浏览器

function isIPhone(){ //判断是否是ios var u = navigator.userAgent; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 return isIOS; }var ua = navigator.userAgent.toLowerCase();...

2018-09-19 11:15:13 4602

原创多个贝塞尔曲线在同一个animate动画中的实践

贝塞尔曲线(Bézier curve)：又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。在Flash4中还没...

2018-09-19 10:59:49 1461