一群青红椒-优快云博客

原创 ✨前端如何实现“划词高亮”的在线笔记功能？✨

笔者前段时间为线上业务实现了一个与内容结构非耦合的文本高亮在线笔记功能。非耦合是指不需要为高亮功能建立特殊的页面 DOM 结构，而高亮功能对业务近乎透明。该功能核心部分具有较强的通用性与移植性，故拿出来和大家分享交流一下。

2019-04-24 08:42:07 1474

原创 2018你成长了么？一份给你的前端技术清单

2018 眼看就要过去了，今年的你相较去年技术上有怎样的收获呢？记得年初的时候我给自己制定了一个学习计划，现在回顾来看完成度还不错。但仍有些遗憾，一些技术点没有时间去好好学习。在学习中我发现，像文章这样的知识往往是碎片化的，而前端涉及到的面很多，如果不将这些知识有效梳理，则无法形成体系、相互串联。最后有一种东懂一块，西了解一点的感觉。因此，我结合工作体会抽象出了一些前端基础技术能力，并将这...

2018-11-04 21:29:47 1061

原创 Gulp.js实践详解__基于Gulp的多页面应用实践指南

相信很多人都知道单页面应用SPA（single page web application），那么与其相对的就是多页面应用，或者说是这种更为传统的站点——通过后端路由控制，访问不同url会由服务器吐出不同的页面与页面资源。由于SEO等一些因素，这种多页面的应用（或者说是站点更合适）如今仍然是一种非常重要的形式。由于近期的项目形态就是这样的，而在项目中最后选择使用了gulp作为自动化

2017-10-16 17:35:07 2579

原创 JavaScript异步编程__“回调地狱”的一些解决方案

异步编程在JavaScript中非常重要。过多的异步编程也带了回调嵌套的问题，本文会提供一些解决“回调地狱”的方法。

2017-08-19 17:41:11 994

原创【CSS模块化】(2) BEM命名方法论——使用BEM-constructor构建CSS

CSS是一门15分钟就能入门，但是却需要很长很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是，本身不具备模块化的能力。面临的问题CSS中虽然有@import功能。然而，我们都知道，这里的@import仅仅是表示引入相应的CSS文件，但其模块化核心问题并未解决——CSS文件中的任何一个选择器都会作用在整个文档范围里。

2017-08-19 10:54:49 888

原创基于react技术栈的单页应用(SPA)搭建_快速入门实践

概述本篇文章使用create-react-app作为脚手架，结合react技术栈（react + redux + react-router），构建一个简单的单页面应用demo。文章会一步步地讲解如何构建这么一个单页应用。文章的最后也会给出相应的demo地址。本文主要是对SPA搭建的实践过程讲解，在对react、redux、react-router有了初步了解后，来运用这些技术构建一个简单的单页应用。

2017-08-19 10:52:14 2198

原创【CSS模块化】(1) webpack之Local Scope

CSS是一门15分钟就能入门，但是却需要很长很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是，本身不具备模块化的能力。本文旨在说明如何使用webpack中的local scope功能实现CSS的模块化。

2017-07-12 23:00:48 741

原创 react-router 4 代码拆分

前言在一些单页面应用中，通过打包工具将需要处理、相互依赖的模块直接打包成一个bundle，在页面第一次载入时，就会将所有的js全部载入。但是，往往有许多的场景，我们并不需要在一次性将单页应用的全部依赖都载下来。为了防止用户在第一次打开页面时，需要等待较长时间加载无关资源，我们就可以考虑进行一定的代码拆分（code splitting）。

2017-06-18 19:39:32 6913

转载 mac下卸载node.js

引言node.js的安装方式有多种，既可以在官网上下载官方的pkg文件安装，也可以使用brew安装。对于不同的安装方式，也可以选择不同的卸载方法。卸载方式对于通过node.js官网pkg安装的，可以使用如下命令卸载sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}如果是其他方

2016-12-01 22:04:27 1097

原创在sublime text 3中安装emmet后报错：please wait a bit while pyv8 binary

问题描述今天在mac上安装sublime text 3之后，准备给sublime安装emmet插件包。一番操作，虽然package control里显示emmet安装完成，但是尝试使用了emmet的各种功能却并没有效果（例如!＋tab）。sublime下方出现提示信息 please wait a bit while pyv8 binary查看console发现，是pyv8这个包没能成功加载（-

2016-12-01 21:39:00 3201

原创从零开始，搭建基于webpack的react开发环境

利用react可以有效进行组件的开发与管理。其中webpack作为构建react组件的有效工具，可以大大提高我们的开发效率与使用效果。网上也有了很多入门文章。但是，由于react与webpack版本的迭代导致这些入门介绍教程，或因存在版本变动，或因存在api变动，或因内容含糊而导致遇到很多坑。因此，记录了一下前段时间一次搭建过程，介绍如何基于webpack搭建一个最简单的react开发环境。

2016-09-07 22:24:01 1673

转载在SublimeText上搭建ReactJS开发环境

工欲善其事，必先利其器 —— 论语·卫灵公相比webstorm，个人更常用sublime来码前端代码。但是，由于在react中使用了一些新特性，所以原先的sublime都快退化成txt了。于是在网上搜了插件推荐（语法高亮、代码提示等）。语法高亮Babel-Sublime插件很好的支持了JSX语法的高亮显示，连包裹在组件中的HTML标签都能实现高亮显示，具体的插件安装以及设置方法就不多说了，自行看G

2016-09-07 12:00:37 1544

原创寻找幸运数

问题描述4和7是幸运数字，由它们所组成的数也是幸运数字。例如：44,47,474,7447等等。这一系列幸运数由小到大构成了幸运数列。现在，需要设计一个算法找出第N个幸运数是多少。问题分析我们可以将幸运数列分组：（4,7）（44,47,74,77）（444,447,474,477,744,747,774,777）…… 可以看到一位数的幸运数有2个，两位数的幸运数有4个，三位数的幸运数有8个……

2016-09-05 23:51:08 1058

原创 js控制输入框光标位置（setSelectionRange详解）

问题描述前段时间碰到一个需求：在表单中有一个字段叫金额，用户希望点击该输入框后（focus），能够自动为其金额数字后加上“万元”两个字。虽然这个需求可以通过其他的设计方式规避（例如在文本框后加入“万元”等），但是，既然碰到了问题，肯定还是希望能够研究一下技术解决方式。对这个需求进行抽象，其实需要完成的任务就是：通过js来控制输入框内光标的位置。要完成这个任务，需要介绍一个input元素的方法

2016-09-05 10:14:18 42687

原创查找数组中和的特定值的匹配对

问题描述现有一列数组，找出数组中和为10的匹配对。例如，输入：[-10,1,5,3,20,9,9,10,2] 输出：(-10,20);(1,9)算法JavaScript实现内外层两次循环使用两层嵌套循环，外层从index为0处开始移动，每到一个新index则在内层循环中将该值与后续的数列依次对比。 function match(arr, total) { var i = 0,

2016-09-05 00:04:58 1489

一群青红椒的博客