JOY 酷酷的专栏

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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