- 博客(71)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 Three.js的学习资料和学习计划，统统安排上
各位掘友好，我是一拳，一个兴趣使然的英雄！啊不，前端开发工程师。我相信很多前端开发者都曾有过开发一个炫酷的3D页面的想法，当下元宇宙概念盛行，各位同学炫技的DNA是不是都蠢蠢欲动了。我们要做Web端的3D开发，Three.js毫不疑问是一个不错的选择，我在之前就打算学习一下Three.js，由于各种原因搁置了，最近因为项目需要，需要做3D图形相关的需求，以此为契机，打算深入的去学习一下这方面的知识。我在前段时间发了个沸点，本来是打算给自己立下flag，意外发现很多掘友对Three.js感兴趣，又因为。...
2022-08-26 17:07:07
621
1
原创 Three.js一起学-对比WebGL和Three.js的渲染流程
大家好，我是一拳~对web3D感兴趣的同学一定对WebGL和Three.js不陌生了，前者是web端实现3D场景的不二之选，后者也是业界应用最广泛，认可度最高的web端3D渲染引擎之一。Three.js说白了就是一个封装了WebGL大量繁琐底层操作的3D渲染库，他可以降低我们着手web3D开发的门槛，提高web3D开发的效率。下面我们就通过一个旋转立方体的例子对比使用Three.js和直接使用WebGL两者的实现流程，通过这个简单的例子，直观的理解WebGL和Three.js的核心渲染流程。......
2022-08-26 17:04:30
955
原创 学透Vue源码~Computed和Watch区别是什么？
Computed和Watch区别是什么？这可能是Vue技术面试最常问到的面试问题之一，我们都知道计算数据是监听数据变化并返回计算函数返回值的，watch就是单纯的数据监听处理。那么二者究竟又是如何实现的呢？下面我们就从源码实现层面为同学们详细说一说二者的区别，加深各位同学对计算属性和watch的理解。阅读本文前需要对Vue的响应式原理有一定的了解，响应式原理的内容不在这篇进行讲解，感兴趣的可以看这篇学透Vue源码~nextTick原理的响应式原理部分。本文是基于Vue2.6的源码解读${}vm。......
2022-08-01 08:41:24
342
原创 理论+实践，彻底掌握Vue自定义指令
本篇主要介绍Vue自定义指令的封装流程和实践应用，下面👇是本文的概述内容，各位同学可以选择直接去阅读感兴趣的小节。准备自定义指令介熟系的同学可以跳过，直接下一小节试炼实现一个v-mymodel这部分是拔掉上一篇文章不要再搞混Vue的响应式原理和双向数据绑定了立下的flag，自己实现一个数据双向绑定的指令。应用实践4个实用的自定义指令除了核心功能默认内置的指令(v-model和v-show等)，Vue也允许注册自定义指令。注意，在Vue2.0中，代码复用和抽象的主要形式是组件。VueVue。......
2022-07-20 09:38:38
292
原创 不要再搞混Vue的响应式原理和双向数据绑定了
之前公司招人，面试了一些的前端同学，因为公司使用的前端技术是，所以免不了问到其响应式原理和的双向数据绑定。但是这边面试到的80%的同学会把两者搞混，通常我要是先问响应式原理再问双向数据绑定原理，来面试的同学大都会认为是一回事，那么这里我们就说一下二者的区别。是Vue的核心特性之一，数据驱动视图，我们修改数据视图随之响应更新，就很优雅~是借助实现的，而是借助实现的，下面我们先来看一下2.x的实现。我们通过为对象添加属性，可以设置对象属性的和函数。之后我们每次通过点语法获取属性都会执行这里的函数，在这个函数中
2022-07-07 09:23:30
660
原创 Vue nextTick彻底理解
前言含义和使用nextTick的官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。啥意思呢，即我们对Vue中data数据的修改会导致界面对应的响应变化，而通过nextTick方法，可以在传入nextTick的回调函数中获取到变化后的DOM，讲起来可能还是有点梦幻，下面我们直接使用nextTick体验一下效果。比如我们有如下代码：<template> <div> <button @c.
2021-02-19 13:58:03
5942
原创 彻底理解weex原理
思路我们要从weex的runtime-jsFramework源码出发理解weex的实现原理。runtime-jsFrameworkentries各种前端框架的入口文件，比如vue.js:import setup from './setup'import * as Vue from 'weex-vue-framework'setup({ Vue })以index.js为入口会编译所有框架的版本。import * as Vanilla from './vanilla/index'imp
2021-02-19 13:56:44
1816
原创 Weex中js服务的理解
js服务weex中注册js服务，会在当前运行的js环境中注入一个对应service的create方法返回的对象，这个对象有两种返回形式：在返回对象的instance上声明一个实例服务；直接在返回对象对象上声明一个服务。如下面代码中的InstanceService和NormalServiceservice.register(SERVICE_NAME /* same string with native */, { /** * JSService lifecycle. JSServic
2021-02-19 13:54:22
1065
原创 这一次，彻底理解js原型和继承
先讲面向对象面向对象是一种编程思想，其重要特征就是多态和继承，通常涉及到类和类和类的实例（对象）、接口等概念。JavaScript中没有类，但是我们可以使用构造函数和原型模拟类的实现。js如何实现继承说到js的继承，那首先想到的肯定是原型链，实际上js中实现继承就是依赖原型链的机制，那么下面就让我们详细了解一下原型链。什么是原型链ECMAScript中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型
2021-01-25 14:40:49
101
原创 模仿实现一个直播的点赞动画
前言在阅读了H5 直播的疯狂点赞动画是如何实现的这篇文章后感觉这个点赞效果很不错，并且也跟着作者实现了一下这个动画效果。其中css的实现方式很容易理解，但是我在读完作者canvas实现方法之后有不同的实现思路，因此又按照自己的思路实现了一下。实现效果如下：实现思路我看到这个动画效果首先想到的，声明一个包含多个小图标对象的数组，通过在不同的位置绘制这些小图标实现这个点赞动画。那么首先我们实现一个小图标的动画。动画流程分解要做动画我们首先把整个动画流程分解一下，这个动画包含如下几个：放大图片刚
2020-11-27 11:18:26
401
原创 简单理解Webpack原理
前言webpack是一个代码编译打包工具，有入口，出口、loader和插件等，大多数前端开发人员能够熟练的使用webpack管理我们的代码，但我们可能还没有尝试理解过webpack编译的原理，让我们怀着好奇(｀ﾍ´)=3的心态通过阅读编译后的源码来尝试理解一下webpack编译的基本原理吧ヾ(◍°∇°◍)ﾉﾞ。
2020-11-27 11:14:41
456
原创 dom元素滚动条滚动控制详解
前言不知道大家有没有遇到过这样的需求，在某个dom元素中添加新的子元素，然后要求如果新添加的新元素超出容器的范围，那么我们需要自动滚动到新添加的子元素的位置，如下图所示效果：那么接下来我们一边学习一些dom元素滚动相关的知识点，一边实现一个上图的效果和一些其他滚动相关的功能。需要了解的dom属性和方法scrollTop、clientHeight和scrollHeightscrollTop属性是一个描述容器元素内容的top值与容器元素(viewport)视口顶部top值之间的差值，即容器中内容向上
2020-05-25 19:54:29
2229
原创 Blob总结和使用案例
Blob介绍Blob是对大数据块的不透明引用或者句柄。名字源于SQL数据库，表示“二进制大数据”（Binary Large Object）。在JavaScript中Blob通常表示二进制数据，但是不一定是大量数据。Blob是不透明的，我们可以对它执行的操作只有获取它的大小，MIME类型和将他切割成更小的Blob。——《JavaScript权威指南》Blob 对象表示一个不可变、原始数据的...
2020-04-29 18:59:20
2469
原创 观察者模式（JavaScript实现）
介绍观察者模式中通常有两个模型，一个观察者（observer）和一个被观察者（Observed）。从字面意思上理解，即被观察者发生某些行为或者变化时，会通知观察者，观察者根据此行为或者变化做出处理。那么具体如何操作呢，下面????我们就用JavaScript代码实现一个观察者模式。实现观察者模式JS实现let observer_ids=0;let observed_ids=0;//观察者类...
2020-04-22 16:30:43
1115
1
原创 Flutter集成到已有iOS工程
前言之前写过一篇介绍flutter集成到Android工程的文章，这次总结记录一下自己把flutter集成到iOS的流程，以及遇到的问题以及和解决方法供大家参考。创建flutter_module要在iOS工程中集成flutter，首先我们需要创建一个flutter_module，创建的方法有两种：使用Android studio创建使用Android studio创建在上一篇新版Flu...
2020-03-30 08:43:41
810
原创 新版Flutter集成到已有Android项目
FlutterSDK升级后，我们发现不能按照原来的方式集成到已有Android项目中了，因为没有了Flutter这个类，通过阅读源码我找到了新的使用方式。一、创建Flutter Module在已有Android工程中集成flutter，可以使用AndroidStudio的new Flutter Module实现，方便快捷。找到FlutterModule，一连串的next操作即可创建完成...
2020-03-30 08:42:39
1121
2
原创 Vue命令式弹窗组件如何实现？我很好奇
前言想必大家都用一些前端框架中诸如MessaBox或者Toast的组件，此类组件往往不需要我们显式的在使用组件的位置编写布局代码就能展示全局的弹框类组件。this.$message.show(title,content);你有没有好奇这个效果是怎么实现的呢，接下来我们就来实现一下类似的Loading加载中效果。实现思路创建一个Loading.vue文件编写布局创建一个Loadin...
2020-03-30 08:38:55
775
原创 "app_name" is not translated in "zh" (Chinese) [MissingTranslation]解决办法
android在打release包时，可能会出现这种错误。解决办法就是在build.gradle里面进行配置：android{ lintOptions { disable 'InvalidPackage' //只要添加下面这一句就可以了 disable 'MissingTranslation' } }...
2020-03-26 09:17:13
1145
原创 修改 .gitignore 文件 立即生效
git rm -r --cached . #清除缓存 git add . #重新trace file git commit -m "update .gitignore" #提交和注释 git push origin master #可选，如果需要同步到remote上的话
2020-03-17 08:59:04
329
原创 Flutter for Web开发环境
搭建此开发环境前确保已经完成了Flutter的基础开发环境的搭建。 flutter channel master flutter upgrade flutter config --enable-web在项目目录下执行如下命令，重新初始化各端项目flutter create .Android studio上述命令执行完成后，在Android studio的运行选项就...
2019-10-29 20:25:01
720
原创 git常用操作
新建分支：git checkout -b branchNamegit push orignbranchName删除分支：删除本地分支testgit checkout devgit branch -D test删除远程分支git push --delete test合并分支：合并分支branch1到branch2git checkout branch1...
2019-09-06 13:54:11
101
原创 Android 报错 "duplicate entry :android/support/v4/widget/ViewDragHelper$callback.class"
原因：各个module依赖的v4包的版本不一致导致的解决：修改各个相互关联的module的v4包版本号微一致的
2019-09-03 09:09:26
1877
原创 出现"xxxx finished with non-zero exit value 1"的原因和解决方法
原因：1、依赖重复了2、v4、v7包与compileVersion版本不一致3、缺少资源文件解决：修改v4包、v7包到与compileVersion一致；终端执行：gradlew processDebugResources --debug查看输出的log信息...
2019-09-03 09:07:12
16092
原创 Leetcode算法修炼（七）加一
题目描述给定一个由整数组成的非空数组所表示的非负整数，在该数的基础上加一。最高位数字存放在数组的首位， 数组中每个元素只存储单个数字。你可以假设除了整数 0 之外，这个整数不会以零开头。示例1:输入: [1,2,3]输出: [1,2,4]解释: 输入数组表示数字 123。示例2:输入: [4,3,2,1]输出: [4,3,2,2]解释: 输入数组表示数...
2019-08-19 21:00:47
124
原创 Leetcode算法修炼（六）数组的交集
题目描述给定两个数组，编写一个函数来计算它们的交集。示例 1:输入: nums1 = [1,2,2,1], nums2 = [2,2]输出: [2,2]示例 2:输入: nums1 = [4,9,5], nums2 = [9,4,9,8,4]输出: [4,9]说明：输出结果中每个元素出现的次数，应与元素在两个数组中出现的次数一致。 我们可以不考虑输出结果的顺...
2019-08-18 11:40:19
89
原创 Leetcode算法修炼（五）只出现一次的数字
题目描述：给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。说明：你的算法应该具有线性时间复杂度。 你可以不使用额外空间来实现吗？示例 1:输入: [2,2,1]输出: 1示例2:输入: [4,1,2,1,2]输出: 4解题思路：这个题目第一眼看，嗯，很简单呢，跟上一题目好像产不多似的。然而题目的要...
2019-07-29 21:07:24
176
原创 Leetcode算法修炼（四）存在重复
题目描述：给定一个整数数组，判断是否存在重复元素。如果任何值在数组中出现至少两次，函数返回 true。如果数组中每个元素都不相同，则返回 false。示例 1:输入: [1,2,3,1]输出: true示例 2:输入: [1,2,3,4]输出: false示例3:输入: [1,1,1,3,3,4,3,2,4,2]输出: true解题思路：因为之...
2019-07-29 20:18:59
95
原创 LeetCode算法练习（三） 旋转数组
前言：最近由于工作较忙，练习的频率有点低了，以后尽量保持两到三天练习一道的频率和效率。那么开始这一次算法练习。题目描述：给定一个数组，将数组中的元素向右移动k个位置，其中k是非负数。示例 1:输入: [1,2,3,4,5,6,7] 和 k = 3输出: [5,6,7,1,2,3,4]解释:向右旋转 1 步: [7,1,2,3,4,5,6]向右旋转 2 步:...
2019-07-26 20:06:59
135
1
原创 LeetCode算法练习（二） 买卖股票的最佳时机 II
前言：继续我们的愉快算法练习之旅=。=题目描述：给定一个数组，它的第i个元素是一支给定股票第i天的价格。设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易（多次买卖一支股票）。注意：你不能同时参与多笔交易（你必须在再次购买前出售掉之前的股票）。示例 1:输入: [7,1,5,3,6,4]输出: 7解释: 在第 2 天（股票价格 = 1）的...
2019-07-18 22:24:09
383
1
原创 LeetCode算法练习（一）有序数组去重
前言大学毕业以来一直想提升自己数据结构与算法相关的知识（大学没有学好=。=），后来偶然的机会在网上看到LeetCode，觉得很不错，因此就打算通过LeetCode来练习算法相关的一些知识和能力，活跃自己思维，锻炼自己的编程能力。但是学习这个过程知识阅读、记忆和短期的练习是不够的，还需要总结与复习的过程，才能真正把知识变成自己的东西（自己十几年学习总结的拙见=。=）。所以就想着通过系列技术博...
2019-07-16 20:56:12
734
原创 weex开发之手势事件冲突解决
在开发中在使用weex手势事件时遇到了问题，在Android端，当给某个容器类元素上添加手势事件或者绑定bindingX表达式之后，如果在这个容器内部添加了list或者scroller等滚动元素，就会导致手势事件无法触发。我们看到weex官方文档在手势部分说明“目前，由于会触发大量事件冲突，Weex Android 还不支持在滚动类型的元素上监听手势，例如scroller,list和w...
2019-06-23 19:05:48
1705
原创 weex开发之动画实现方式的比较
1.css动画简单的动画，比如改变宽高，位置等，可以使用css动画实现，但是需要注意css动画的兼容性比较差，会出现在ios和android上奇怪的表现不一致。详细使用方法见weex官网的相关文档。使用方法：<style scoped> .panel { margin: 10px; top:10px; align-items: center;...
2019-06-23 18:25:23
2909
原创 H5移动端适配总结
近段时间以来在做微信公众号的H5开发，然而安装UI设计人员给出的尺寸在不同的移动端设备上的表现并不一致，并且在界面适配方面本以为只要在开发过程中尽量使用百分比和flex布局等就可以实现，然而在不同分辨率的手机上看到的效果并不让人满意，布局虽然没有很大的变化，但是字体和图片都出现了失真或者变形的情况。因此通过查阅资料，了解到两种屏幕适配的方案：1.通过对界面进行等比例缩放；2.使用rem单位进行...
2019-06-17 16:28:07
3841
原创 JavaScript运行时上下文和调用栈的理解（涉及var和let、const的原理）
首先是对运行时上下文和调用栈的关系及其运行过程的理解：运行时上下文理解为运行时的当前运行环境，而JavaScript代码的执行是执行栈来完成，执行栈又称为调用栈，后面一律称为调用栈。调用栈正如其名字一样是一个LIFO的栈结构，即后进先出。我们把调用栈的运行理解为上下文的进出栈过程，即先入栈的上下文就后出栈。例子：var a = 'Hello World!';function ...
2019-06-03 16:29:16
823
原创 git push错误:RPC failed; HTTP 401 curl 22 The requested URL returned error: 401 The remote end hung up
git push时遇到错误:RPC failed; HTTP 401 curl 22 The requested URL returned error: 401The remote end hung up这是因为本地保存了错误的账号密码导致，需要清除本地保存的账号密码信息，那么再次提交代码是就会重新让你输入账号密码了。解决方案：git config --system --uns...
2019-05-27 10:49:30
7427
2
原创 weex实现带有跟手动画的tab栏
在weex开发的群中看到有人提到这个问题，就想着去实现以下，还不是很完美，只支持一屏的tab栏内容，后续会进行优化。2019-6-20 更新：已支持滚动跟手，可以超出屏幕。2019-6-23 更新：解决子元素包含滚动标签时无法滑动切换的问题。2019-6-25 更新：修复底部和指示器会超出屏幕的bug。效果图如下：组件源码：<template> &...
2019-05-20 18:51:26
1067
原创 weex实现手势密码效果
实现手势密码效果需要使用weex-gcanvas，继承weex-gcanvas请参考Weex Gcanves集成和使用。效果图：手势密码效果组件封装代码：<template> <div class="container" :style="{width:width,height:height}"> <div class="pa...
2019-05-16 15:41:57
830
原创 weex实现侧滑删除效果
参考BUI-Weex实现的侧滑删除的weex组件。上图：侧滑删除示例组件实现：<!--列表侧滑操作组件--><template> <div class="cell" :style="cell_style" ref="cell" @swipe="handleSwipe"> <slot name="cell_co...
2019-05-15 10:17:01
803
原创 Weex实现炫酷的侧滑菜单效果
最近在在bindingX，使用bindingX结合weex手势可以比较轻松实现很炫酷的富交互效果，且性能很好，这里实现一个侧滑菜单的效果。weex中集成并使用bindingX看篇BindingX在weex中使用。老规矩，先上效果图侧滑菜单效果图侧滑组件源码：<!--侧滑菜单实现--><template> <div class="conta...
2019-05-14 19:14:17
1168
原创 weex-gcanvas+animation模块实现雷达扫描效果
集成weex-gcanvas请参考Weex Gcanves集成和使用先上图示例图上代码：<template> <div ref="test" style="background-color: #ffffff"> <gcanvas @touchstart="touchstart" @touchmove="touchmove...
2019-05-10 15:33:57
965
mipsel-linux-android-4.9.zip
2020-12-02
mips64el-linux-android-4.9.zip
2020-12-02
flutter sdk 2018-12
2019-05-14
dart-sdk for flutter
2019-05-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人