JOY 酷酷的专栏

原创 如何检测用户的Chrome插件

已知一些Chrome插件会影响到网站的一些功能，希望在前端主动检测到用户使用了某插件然后弹出提示让用户关闭，以减少客诉。

原创 浏览器工作原理：浏览器架构演进

单进程浏览器时代单进程浏览器是指浏览器的所有功能模块都是运行在同一个进程里，这些模块包含了网络、插件、JavaScript 运行环境、渲染引擎和页面等。不稳定插件不稳定，一个插件的崩溃会导致整个浏览器的崩溃渲染引擎模块不稳定，一些复杂的 JS 代码可能引起渲染引擎模块的崩溃，从而导致整个浏览器崩溃不流畅无限循环的脚本会独占整个线程，导致其他模块没有机会执行，导致整个浏览器失去响应、变卡顿运行复杂页面再关闭，会存在内存不能完全回收的情况。内存泄漏会导致使用时间越长，内存占用越高，浏览器会变得

原创 IndexedDB & Dexie.js 使用经验

工作中遇到这样的一个场景：在实时编辑时，需要将产生的编辑操作上传到服务端（以 websocket 长连的方式），但当用户处于断线或弱网的情况下，我们需要将用户的所有操作存储在本地，等待网络恢复时再重传。为什么选择 indexedDB 来进行本地存储？indexedDB 提供 key/value 的存储方式，不需要像 localStorage 那样转存为字符串。对于一次用户的编辑操作，往往对应着 文档ID、作者ID、操作内容 等字段，再次上传的时候需要筛选出该文档、该作者对应的操作内容，用这种存储方式显

原创 基于 Laravel 框架做 Vue.js 的 SSR 服务端渲染

指路2.0: 基于 Laravel 框架做 Vue.js 的 SSR 服务端渲染2.0为什么要做 SSR？主要的目的是有利于搜索引擎的 SEO 抓取SPA场景下SEO的问题SPA 应用加载的基本流程：浏览器端先加载一个空页面和 JavaScript 脚本，然后异步请求接口获取数据，渲染页面数据内容后展示给用户问题：搜索引擎抓取页面解析该页面HTML中关键字、内容时 JavaScript 尚未调用执行，仅仅是一个空页面（body为空），影响搜索引擎收录页面的内容排行。解决方案：使用服务端端数据

原创 学习 React

一、基础知识以组件方式考虑 UI 的构建理解 React 组件props + state = view属性和参数决定试图React 组件一般不提供方法，而是某种状态机受控组件 vs 非受控组件受控组件，需要传入 onChange 的方法，由外部组件控制其数据非受控组件，由自身维护数据原则创建组件的原则 – 单一职责原则：拆分出的每个组件，职责单一数据状态管理原则 – DRY 原则：能计算得到的状态不单独存储组件尽量无状态，由 props 读取JSX（本质不是模板

原创 webpack知识汇总

构建工具的作用转换 ES6 语法转换 JSXCSS 预处理器压缩混淆图片压缩pluginsCommonsChunkPlugin：将 chunks 相同的模块代码提取成公共 jsCleanWebpackPlugin：清理构建目录ExtractTextWebpackPlugin：将 CSS 从 bundle 文件里提取成一个独立的 CSS 文件HtmlWebpackPlugin：创建 html 文件去承载输出的 bundleUglifyjsWebpackPlugin：压缩 JSZi

原创 使用 ELK 做前端性能监控

一、前端收集数据我们可以利用 Navigation Timing 来获取页面加载各个阶段的时间：参考文章这里我们以获取页面加载的总时间为例，并将参数发送到 /statisticslet flt = Date.now - window.performance.timing.navigationStart$.post "/statistics", { data: { flt }}在 n...

原创 基于 Laravel 框架做 Vue.js 的 SSR 服务端渲染 2.0

之前做了基于 V8Js 的 SSR：基于 Laravel 框架做 Vue.js 的 SSR 服务端渲染 1.0在当时也提到过 V8Js 最大的缺点就是安装起来比较麻烦，这不，由于 PHP 升级没有找到合适的 V8Js 的安装版本，于是不得不改用新的方式做 SSR。这次选用的是一个 Laravel ssr 的包：spatie/server-side-rendering，同时也参考了它的一个 De...

原创 Element-UI 上传组件自定义进度条

效果图：步骤首先，定义一个 el-upload 的组件，这里我选择的是「手动上传」模式：<el-upload action="" :before-upload="beforeUpload" ref="uploadFile" :on-remove="removeFile" :file-list.sync="fileList"> &l...

原创 LeetCode 877. Stone Game（数学 / dp）

题目链接https://leetcode.com/problems/stone-game/题意一共有 n 堆石子排成一排（n 为偶数），每堆石子个数为 a[i] 个（保证石子总数为基数）。甲乙依次拿取石子，每次只能拿最左或最右的一堆，且两人都采取最优策略，最后获得石子数多的赢。甲为先手，若甲赢则输出 true，否则输出 false。思路1动态规划。设 dp[i][j] 为石子为第 i 堆...

原创 LeetCode 207.Course Schedule

题目链接https://leetcode.com/problems/course-schedule/题意一共有 numCourses 门课程，一些课程必须学完前置课程才能够学习，问是否能学完所有课程。比如：course0 的前置课程是 course1，而 course1 的前置课程是 course0，则无法学完。思路这道题就是给出了一个有向图判断是否成环。这里需要对一个有向无环图进行拓扑...

原创 LeetCode 675. Cut Off Trees for Golf Event（宽搜）

题目链接https://leetcode.com/problems/cut-off-trees-for-golf-event/题意给出一个 n * m 的地图，其中有包括树和障碍。从（0，0）开始出发，在避开障碍的情况下，需要按照树的高度从矮到高依次到达，问一共最少需要多少步。无法依次达到，则输出 -1。思路先对地图中的树的高度进行排序，得到总的路径。对于路径中的每一个节点，将问...

原创 JavaScript 高级语言程序设计：函数表达式

第七章 函数表达式定义函数的两种方式函数声明函数声明提升：在执行代码前会先读取函数声明函数表达式创建一个函数并赋值给变量，创建的叫匿名函数（拉姆达函数）递归arguments.callee：指向正在执行的函数的指针，用他代替函数名，防止执行时函数的值已经被修改闭包闭包：指有权访问另一个函数作用域中的变量的函数创建闭包的常见方式是，在一个函数 A 内部...

原创 JavaScript 高级语言程序设计：面向对象的程序设计

第六章 面向对象的程序设计理解对象属性类型数据属性，包含一个数据值的位置，四个特性Configurable：能否删除并重新定义属性、修改属性的特性，默认为 trueEnumerable：能否通过 for-in 循环返回属性，默认为 trueWritable：能否修改属性的值，默认为 trueValue：该属性的数据值，默认为 undefined修改特性值：Object....

原创 JavaScript 高级语言程序设计：引用类型

第五章 引用类型Object 类型对象字面量，对象定义的一种简写形式访问对象属性点表示法（推荐）方括号表示法可以通过变量来访问属性可以访问含非字母非数字的属性名Array 类型每一项可以保存任何类型的数据检测数组value instanceof ArrayArray.isArray(value) // ES5 新增转换方法toStri...

原创 JavaScript 高级语言程序设计：基本概念

第三章 基本概念语法变量、函数名和操作符都区分大小写标识符即变量、函数、属性（包括函数的参数）的名字第一个字符必须是一个字母、下划线或美元符号其他字符可以是字母、下划线、美元符号或数字小驼峰格式严格模式为 JavaScript 定义了一种不同的解析与执行模型在严格模式下，ES3 中的一些不确定的行为将得到处理，而且对某些不安全的操作也会抛出错误启用严格模式，...

原创 前端视觉测试工具：Applitools Eyes

运行 Demo ( OSX 环境）下载 &amp; 安装 Demo 项目git clone https://github.com/applitools/tutorial-selenium-javascript.gitcd tutorial-selenium-javascriptnpm install下载 &amp; 安装 ChromeDriver登录 [Applitool...

原创 JavaScript 高级语言程序设计：简介

第一章 JavaScript 简介出现原因开发一种客户端语言，用来处理简单的验证JavaScript 组成核心（ECMAScript）由 ECMA-262 定义，提供核心语言功能ECMAScript 与 Web 浏览器没有依赖关系，Web 浏览器只是 ECMAScript 实现可能的宿主环境之一它规定了这门语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象文...

原创 在 GitLab CI 中运行基于 Cypress 的 e2e 测试

先构建 gitlab-runner 的 docker 镜像Cypress 的运行需要安装一些依赖，官方提供了一些 docker 镜像：https://github.com/cypress-io/cypress-docker-images/tree/master/base我选择的是 CentOS 7 的镜像，但构建过程中，node 装不上需要更新 Yum 源，这里贴一下 Dockerfile...

原创 Vue-router 结合 element-ui 制作动态导航栏 + 面包屑

效果图如下： 主要思路： 一开始我的想法是根据左侧导航栏的点击事件动态的改变上方的面包屑，但后来发现如果直接通过 URL 访问的话导航栏和面包屑都是处于初始状态的。因此我想到通过 route 的值同时改变导航栏和面包屑。首先，我们定义 route 文件，注意将 Router 的模式设为 history，否则跳转时 URL 上会带有 # 符号，导致获取到的 route 值不正确，代码如下...

原创 现代前端技术解析：前端跨栈技术

一、JavaScript 跨后端实现技术Node 后端开发基础Web 服务器基础知识简单的数据库设计能力后端 MVC 设计理念后端异步，Node 服务端异步编程模块化思想中间件技术接口设计规范后端部署技术和基本运维能力MEAN 技术组合： MySQL、Express、Angular、NodeNode 后端数据渲染SPA场景下SEO的问题SPA...

原创 现代前端技术解析：前端项目与技术实践

一、前端开发规范前端通用规范三层结构分离 结构层（HTML）、表现层（CSS）、行为层（JS)缩进 推荐使用 4 个空格缩进内容编码 在 HTML 文档中用大小写 小写：HTML 标签、属性、样式名、规则小驼峰：JS 命名代码单行长度限制 不用超过 120 字符（或 80 字符）注释 添加必要的代码注释（单行注释、段注释）行尾空格与符号 删除行尾空格和多余...

原创 现代前端技术解析：现代前端交互框架

直接 DOM 操作时代DOM API分为：节点查询型、节点创建型、节点修改型、节点关系型、节点属性型、内容加载型 类型 方法 jQuery 方法 节点查询型 getElementById、getElementByName、getElementsByClassName、getElementsByTagName、querySelector、querySelec...

原创 现代前端技术解析：前端三层结构与应用

结构层 HTMLDOCTYPE 声明：表示兼容 HTML 的所有历史版本以及最新的 HTML5 版本，不支持HTML5中的DOCTYPE定义的浏览器仍然会使用HTML4.01等历史版本的兼容模式来进行文档解析。语义化标签在恰当的位置上使用语义恰当的标签 1. 用正确的标签做正确的事情，杜绝全部使用无任何语义的 标签来实现嵌套 2. 尽量使用带有语义化结构的标签...

原创 现代前端技术解析：前端与协议

HTTP 协议HTTP (超文本传输协议) 是 WWW 服务器和用户请求代理之间通过应答请求模式传输超文本内容的一种协议HTTP 报文浏览器端请求：1. 头部 请求类型、请求 URI、协议版本、扩展内容 请求头部域内容：Accept/Cookie/Cache-Control/Host 等2. 空行 由一个回车符和一个换行符组成，用于区分报文头部和正文...

原创 现代前端技术解析：Web 前端技术基础

如何提高开发效率对 DOM 操作进行封装         DOM 文档对象模型：指 HTML 内容通过浏览器解析后建立的具有节点父子关系的树形对象 模块化 &amp; 组件化 异步加载 保证尽快展示页面 webp 格式的图片 更高压缩比 浏览器缓存文件         304 状态码：客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容并没有改变，则服务器返回 30...

原创 从 bower 迁移到 npm

1. 将原来在 bower.json 中安装的包转移到 package.json 中npm install 时可能会遇到以下错误：(1) 从 git 中导入的包要加上 “git+ssh://“(2) 部分包的版本在 npm 和 bower 不同，或者名字不同，或者在 npm 上根本没有，可以选择直接从 git 获取(3) 版本号写成 #semver:^1.9.5（必须是 n...

原创 Tkinter 的简单用法

利用 Tkinter  实现输入一段文字，点击按钮后，在下方显示输入的文字首先，Tkinter 是 python 内置的工具，不需要 install，使用的时候直接 import 就可以辣。先尝试了一下 Entry（输入框）、Button、Text 三个控件的用法。# -*- coding: UTF-8 -*-from tkinter import *def runTest(): ...

原创 初学 Tensorflow (构造神经网络）

# coding: utf-8import tensorflow as tf import numpy as np# 添加层（输入数据，输入单位，输出单位，激励函数）def add_layer(inputs, in_size, out_size, activation_fuction = None): # 行数为 in_size, 列数为 out_size 的矩阵 Wei

原创 Tensorflow 的初步学习

# coding: utf-8import tensorflow as tf # 建立两个矩阵matrix1 = tf.constant([[3,3]])matrix2 = tf.constant([[2],[2]])# 矩阵乘法product = tf.matmul(matrix1, matrix2)# 方式1: 直接获取sess = tf.Session()result

原创 初学 Tensorflow（线性回归预测）

大致过程是：先生成函数为 y = 0.1x + 0.3 的x、y的数据，即 k = 0.1, b = 0.3设 k, b 初始为随机数，进行 200 次学习，每隔 20 次输出一下训练结果具体代码如下：# coding: utf-8import tensorflow as tf import numpy as np # 创造数据，y = 0.1x + 0.3x_d

原创 自制人物卡片轮播组件，自动轮播，点击切换

由于工作需要，写了一个人物卡片轮播的组件，卡片内容包括照片，姓名及介绍。要求人物个数大于等于五张，设置每次只显示五张卡片，点击后方的卡片时该卡片会跳到最中间显示。不点击时自动轮播。其实总的逻辑非常简单，大体的思路就是改变class属性。设置需要显示的五个卡片的class为 info-1,...,info-5。不显示的卡片则为 info-none。通过点击更换显示卡片索引，根据显示卡片索引给

转载 代码编辑器 Codemirror 常用API

触发事件1.onChange(instance,changeObj)：codeMirror文本被修改后触发。instance是一个当前的codemirror对象，changeObj是一个｛from，to，text[,removed][，origin]｝对象。其中from，to分别表示起始行对象和结束行对象，行对象包括ch：改变位置距离行头的间隔字符，line：改变的行数。text是

原创 FreeCodeCamp 学习笔记（二）响应式框架bootstrap

响应式设计：添加：给 添加 img-responsive class属性使图片宽度适应屏幕宽度给 文本添加 text-center class属性使文本居中给 添加 btn class属性使按钮为 bootstrap的自带按钮样式 class :btn-block: 使按钮填满整个水平空间btn-primary: 使按钮设为默认的深蓝色btn

原创 FreeCodeCamp 学习笔记（一）HTML&CSS

CSS 导入特殊字体：如谷歌字体，在代码顶端加上link: 当浏览器不支持 family1字体时，降级到 family2字体：font-family: family1, family2;无序列表  有序列表表单元素 action 属性的值指定了表单提交到的服务器地址表单必填项，添加“required”属性。（在Safari中无效）

原创 前端相关面试题总结

1.Form中的input设置为readonly和disable有什么区别？readonly不可编辑，但可以选择和复制；值可以传递到后台disabled不能编辑，不能复制，不能选择；值不可以传递到后台2.Js中的3种弹出式消息提醒的命令式什么？警告窗口  alert确认窗口  confirm信息输入窗口  prompt3.Form中的input有哪些类型

转载 Visual Stdio 2015打包安装项目的方法（使用Visual Studio Installer）

首先在官网下载VS2015的Visual Studio Installer1.创建安装项目里面最左侧的框框有三个文件夹1.“应用程序文件夹”即"Application Folder"表示要安装的应用程序需要添加的文件；2.“用户的‘程序’菜单”即"User's Programs Menu"表示：应用程序安装完，用户的“开始菜单”中的显示的内容，一般在这个文件夹中

原创 决策树算法

原创 最邻近规则分类算法（KNN）

转载 推荐系统评测指标—准确率(Precision)、召回率(Recall)、F值(F-Measure)

点击打开链接