Webpack按需打包Lodash的几种方式
在数据操作时，Lodash 就是我的弹药库，不管遇到多复杂的数据结构都能用一些函数轻松拆解。ES6 中也新增了诸多新的对象函数，一些简单的项目中 ES6 就足够使用了，但还是会有例外的情况引用了少数的 Lodash 函数。一个完整的 Lodash 库，即使是压缩后，现最新版本也有 71k 的体积。不能为了吃一口饭而买下一个饭店啊。针对这个问题，其实已经有很多可选方案了。 阅读全文…
Yusen's Blog
学习弯道超车的技巧！
正确使用Vue指令的钩子函数
在 Vue 中可以把一系列复杂的操作包装为一个指令。什么是复杂的操作？我的理解是：复杂逻辑功能的包装、违背数据驱动的 DOM 操作以及对一些 Hack 手段的掩盖等。我们总是期望以操作数据的形式来实现功能逻辑。钩子函数对于自定义指令的定义，Vue2 有 5 个可选的钩子函数。 阅读全文…JavaScript 获取输入时的光标位置及场景问题
前言在输入编辑的业务场景中，可能会需要在光标当前的位置或附近显示提示选项。比如社交评论中的@user功能，要确保提示的用户列表总是出现在@字符右下方，又或者是在自定义编辑器中 autocomplete 语法提示，都需要获取光标当前的位置作为参照点。 阅读全文…Vue单元测试起步
最近在搭建一个项目的前端开发环境，准备趁此把一些没用过的东西尝试下，比如：单元测试。使用vue-cli可以直接生成一个包含unit、e2e测试的开发环境，不过还是需要去了解其中的组织结构、配置和模块的使用等。准备没有一点相关经验，先把vue-cli生成后的test/unit目录拿到自己的项目中。 阅读全文…关于 text-transform: capitalize 失效的场景与解决方案
text-transform 是一个可以将文字进行大小写转换或单词首字符大写的 CSS 属性。自从知道了它，我就开始偷懒不在 js 中去在调用相关的转换函数了。昨天在给多说扩展用户 UA 功能时遇到一个 text-transform: capitalize 失效的问题，经过一番测试，找到了问题的原因。 阅读全文…使用“队列”解决“插队”业务场景
为了达到操作变化的实时性，在多选择项的业务场景中，往往点击一次就会发送一次 HTTP 请求。但同时又面临另外一个问题，在连续点击同一个选择项时，就会连续触发针对此项的删除或添加逻辑，进而连续发送 POST 或 DELETE 请求。理想的状态是上一个请求结束后才开始下一个请求，但是网络请求是异步的、请求耗时是不可控的，也就有可能在此项的添加请求未完成前，删除请求先完成了。我觉得用“插队”来描述这个场景真是再好不过了。 阅读全文…java项目下基于webpack的前端开发环境构建
标题可能不是很恰当，想不到一个合适的标题来概括我遇到以及解决的问题，暂且这样吧。项目描述是一个不完全与后端分离的基于 webpack 构建的 Vue 项目。项目入口是一个 jsp 页面，其中引用了一些 jsp 模版。我想是因为有一些内容需要后端直出到页面上。该页面上固定引用了 webpack 打包好的 css 及 js 文件路径，当然也加了动态参数用于刷新版本更新后的客户端缓存。可以使用 webpack 命令打包，或是用 webpack --progress --colors --watch 命令启动监听模式动态构建。 阅读全文…如何为Canvas中特定图形绑定事件？
Canvas 本身也属于 HTMLElement，自然也是支持各种事件绑定的。但绘制在其中的图形并不作为其子元素存在，这就不能方便的为 Canvas 中的某个特定图形去绑定事件。我们都知道 js 中的事件委托，将事件绑定到父节点上，待到父节点响应事件时，动态判断当前响应元素为目标子节点时再执行对应的操作。这个思想同样也可以用在 Canvas 上，只需要为 canvas 元素绑定事件，事件响应时判断当前鼠标位置处于哪个图形之上，执行对应的操作。 阅读全文…VsCode插件：七牛图床工具，写文章更快一步
前言一直以来，我都很少在文章中加插图。因为每加一张插图，我都需要先把图片上传到七牛，然后才能获取外链插入文章。之前写 Markdown 一直是用的 Sublime，直到 Vscode 最近一次更新有了 Tabs 之后，便开始尝试在工作中使用。与最初的预览版相比进步蛮大的，能看到很多 VS 的影子。之前也用过一段时间 Atom，虽然界面挺喜欢，但始终没有原生客户端的流畅感。到底客户端还是微软的强项，Vscode 这方面舒服多了，启动与大文件编辑都不比 Sublime 差。Vscode 是基于浏览器内核的跨平台编辑器，底层代码大部分都是 TypeScript，当然最终还是会编译为 javascript。这样对于一个前端而言就倍感亲切了，可以轻易的使用自己吃饭的语言去扩展功能。所以这个七牛图床工具就诞生了。vscode-qiniu-pv 阅读全文…
