特色

前端开发工具大全(Web Front End Awesome)【不断更新,与时俱进】

前言

回顾 4、5 年前开始,我在 Github 上整理过一个 Repo 叫《web-frontend-awesome》当时的想法是把自己在日常工作中会常用到的前端相关的东西记录下来,方便查阅与使用。4、5 年前,那应该还算是一个 jQuery 一招鲜的年代,使用 require.js / sea.js + jQuery / zepto.js、开源的 jQuery 插件、自己扩展一些 jQuery 插件,基本可以解决一切的问题;但随着前端 MVC 的框架 backbone.js 已经被广泛应用,虽然 backbone.js 还是基于 jQuery 来实现。前端 MV+ 框架的思想已经开始逐渐深入人心,紧接着就是 AngularJS、React、Vue.js 的兴起,再到前端实现多端 / hybrid APP 广泛应用(React Native,Weex,phoneGap,Ionic,Electron / nw.js);往后再有 微前端 的出现解决越发复杂的多前端应用耦合问题。当时开始整理的内容还是以 jQuery 的思路为主,现下面重新整理一下,逐渐增加一些新的东西吧。

前端开发工具大全 – Web Front End Awesome

前端代码编辑器 / IDE

VS code(Visual Studio Code) | Webstorm | HBuilder(国产) | Sublime Text | Atom

前端编码规范(Code Standards & Style)

继续阅读“前端开发工具大全(Web Front End Awesome)【不断更新,与时俱进】”

Vue 中递归调用节点组件自身实现无限节点的树

前言

在之前一篇《Vue 中使用渲染函数 render 实现无限节点的树》中我们介绍了如何使用 render 函数中的 h 函数来实现无限节点树的渲染,但这种方式有很多小伙伴们可能使用起来不是很习惯。有没有一种更加直观的方式来实现呢?其实是有的,就是我们可以递归调用树节点组件自身实现无限节点 继续阅读“Vue 中递归调用节点组件自身实现无限节点的树”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/collectionHandlers.ts

前言

接着上一篇《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/baseHandlers.ts》我们学习了使用 Proxy 实现的 reactive 构造出来的响应式的对象, new Proxy(target, handler) 中的基础 handler(baseHandlers)。这一篇,我们将来介绍另外一种 handler 叫 collectionHandlers。collectionHandler 比 baseHandler 提供了更加丰富的 OperationTypes(set、add、delete、clear、get、has、iterate) 中更齐全的操作的 继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/collectionHandlers.ts”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/baseHandlers.ts

前言

回到之前有一篇《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/reactive.ts》我们学习了使用 Proxy 实现的 reactive 构造出来的响应式的对象,定义一个 Proxy 对象是怎么样呢?请看代码: new Proxy(target, handler) 可以看出来,是需要 targethandler 来实现,在本篇中我们就来看看实现这个 handler 的最基础的两种叫 mutableHandlersreadonlyHandlers继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/baseHandlers.ts”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/computed.ts

前言

前一篇《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/effect.ts》中,我们学习了用于响应数据读写变化的方法(在 vue 3 中会把用户传入的响应方法/响应函数再次封装而成为 effect 或者叫 ReactiveEffect),现在我们来介绍一种依赖于一种依赖于 effect 的扩展于 Ref 的响应式数据类型 computedComputedRef),相信用过 vue 的人都大概会猜到 computed 应该于 vue 1.x / vue 2. x 中的 computed 有很大的 继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/computed.ts”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/effect.ts

前言

前两篇《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/reactive.ts》和《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/ref.ts》中,我们学习了如何把目标数据或者目标对象封装成了响应式的或者对象,但除用于响应数据读写变化的方法(在 vue 3 中会把用户传入的响应方法/响应函数再次封装,然后成为本篇介绍的 effect 或者叫 ReactiveEffect),我们还没有涉及, 继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/effect.ts”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/ref.ts

前言

上一篇《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/reactive.ts》我们学习了使用 Proxy 实现的 reactive 构造出来的响应式的对象,但 reactive 接受的值的参数限于 Object, Array, Map, Set, WeakMap, WeakSet 这些类型,而本篇介绍的 refreactive 也类似,但可以接收任何类型的值的参数。而且对值的监听的实现方式也不一样, 继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/ref.ts”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/reactive.ts

前言

今天突然回忆自己的前端成长之路,自己为什么要学习各种框架及库源码,学习各种源码有什么好处呢?其实感觉自己的能力或多或少是伴随着一系列的前端源码学习而不断进步的。

当年学习 jQuery 的源码学习到了 extend 对象 merge 及入参 options / default options 、链式调用、如何实现链式调用和如何与各种 Dom 打交道;当年学习 weui 学习到了移动端如何处理 1 像素 border 处理、 继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/reactive.ts”

Vue 中实现动态增减输入框 / 选择器等表单输入元素

前言

在做前端开发过程中,我们经常会遇到这样的需求:要求动态增减输入框、下拉选择等输入元素(如下图)。 继续阅读“Vue 中实现动态增减输入框 / 选择器等表单输入元素”

Three.js 入门篇-制作 3D 动漫角色欣赏

前言

废话不多说,先上一波炫酷前端效果展示,点我去欣赏。最近有个任务,刚搞完一个卡通网 kt5.cn,没有一点点流量。 如何为卡通网带来点人气呢? ,于是就有了这篇《Three.js 制作 3D 动漫角色欣赏篇》,顺便想带旺一下给卡通网。 继续阅读“Three.js 入门篇-制作 3D 动漫角色欣赏”