YolkPie

用javaScript原生的方式实现设计模式应该在JavaScript中使用Class么 大部分场景下不鼓励使用JavaScript class 不使用 class 的情况下，JavaScript 开发中还能使用设计模式吗？—— 毕竟这是几十年来许许多多程序员先驱们总结出来的 精髓！ 答案是 —— 当然可以！只不过是用 JavaScript 原生的方式（functional way）来实现。 单例模式 单例模式的目标是在整个程序中，某个类有且只有一个实例。 方案一： 1234567891011121314151617181920212223const Singleton = (function () { let instance; // 闭包形成私有变量 function createInstance() { console.log("call createInstance"); const object = new Object("I am the instance"); ...

Build Your Own React Step I: The createElement Function（createElement 函数） Step II: The render Function （render 函数） Step III: Concurrent Mode（并发模式） Step IV: Fibers Step V: Render and Commit Phases Step VI: Reconciliation Step VII: Function Components Step VIII: Hooks Step Zero: Review在正式开始之前，首先先回顾一下一些基本的概念。 123const element = <h1 title="foo">Hello</h1>const container = document.getElementById("root")ReactDOM.render(element, container) 123456const element = React. ...

JavaScript 浮点数陷阱及解法JavaScript 浮点数运算时经常遇到会 0.000000001 和 0.999999999 这样奇怪的结果，如 0.1+0.2=0.30000000000000004、1-0.9=0.09999999999999998，这其实就是浮点数误差的问题，以下内容可以理清这背后的原理以及解决方案，以及解释JS中的大数危机和四则运算中会遇到的那些坑。 浮点数的存储首先要清楚 JavaScript 如何存储小数的。JavaScript中所有数字包括整数和小数都只有一种类型 — Number。它的实现遵循 IEEE 754 标准，使用 64 位固定长度来表示，也就是标准的 double 双精度浮点数（相关的还有float 32位单精度）。 这样的存储结构优点是可以归一化处理整数和小数，节省存储空间。 64位比特可分为以下三个部分： 符号位S：第 1 位是正负数符号位（sign），0代表正数，1代表负数 指数位E：中间的 11 位存储指数（exponent），用来表示次方数 尾数位M：最后的 52 位是尾数（mantissa），超出的部分自动进一舍零 ...

threejs初探Three.js， WebGL 与 OpenGL提到 Three.js，就必须说一下 OpenGL 和 WebGL。OpenGL 大概许多人都有所听闻，它是最常用的跨平台图形处理开源库。WebGL 就是基于 OpenGL 设计的面向 web 的 3D 图形标准，它提供了一系列 JavaScript API，通过这些 API 进行图形渲染，系统硬件会加速 3D 渲染，从而获得较高性能。而 Three.js 是 JavaScript 编写的 WebGL 第三方库，通过对 WebGL 接口的封装与简化而形成的一个易用的图形库。 WebGL 与 Three.js 对比通过上面的简介，我们知道 WebGL 和 Three.js 都可以进行 Web 端的 3D 图形开发。那问题来了，既然我们有了 WebGL，为什么还需要 Three.js？这是因为前端工程师想要短时间上手 WebGL 还是挺有难度的。WebGL 门槛相对较高，计算机图形学需要相对较多的数学知识。一个前端程序员或许还熟悉解析几何，但是还熟悉线性代数的应该寥寥无几了（比如求个逆转置矩阵试试？），更何况使用中强调矩阵运 ...

Lua简介Lua 是一种轻量小巧的脚本语言，用标准C语言编写并以源代码形式开放， 其设计目的是为了嵌入应用程序中，从而为应用程序提供灵活的扩展和定制功能。是巴西里约热内卢天主教大学里的一个研究小组于 1993 年开发的。 设计目的其设计目的是为了嵌入应用程序中，从而为应用程序提供灵活的扩展和定制功能。 特性 轻量级: 它用标准C语言编写并以源代码形式开放，编译后仅仅一百余K，可以很方便的嵌入别的程序里。 可扩展: Lua提供了非常易于使用的扩展接口和机制：由宿主语言(通常是C或C++)提供这些功能，Lua可以使用它们，就像是本来就内置的功能一样。 其他特性: 支持面向过程编程和函数式编程； 自动内存管理；只提供了一种通用类型的表（table），用它可以实现数组，哈希表，集合，对象； 语言内置模式匹配；闭包(closure)；函数也可以看做一个值；提供多线程（协同进程，并非操作系统所支持的线程）支持； 通过闭包和table可以很方便地支持面向对象编程所需要的一些关键机制，比如数据抽象，虚函数，继承和重载等。 应用场景 游戏开发 独立应用脚本 Web 应用脚本 扩展和数据库插件如：M ...

前言最近做过不少的移动端表单提交的项目，跳了一些坑，也学习了一些技巧，总结了一下，等以后再做类似项目的时候拿来借鉴。同时也与大家分享。 常见的移动端表单校验问题 电话格式校验 邮箱格式校验 汉字VS字母输入 value绑定与防抖 input框折行展示 数字键盘的唤起 提交按钮联动校验 错误提示批量处理 电话格式校验 手机号码：网上有很多校验手机的正则，但是随着手机号码格式的增多，严格的校验可能导致在不久的将来，你的代码就需要重新上线，以适应更多的号码区段。如果再考虑到国际长途，可能不仅仅是11位。所以建议只使用纯数字校验，关于位数因需求而异。 1let reg = /^\d{0,11}$/; 400电话：只做数字和位数的校验 1let reg = /^[400]\d{0,n}$/; 座机号码：做数字和位数的校验 1let reg = /^\d{4,n}$/; 邮箱格式校验 首来看几个合法邮箱的例子： 1234@qq.com（纯数字） wang@126.com（纯字母 ...

按钮权限控制实现方案背景：某些管理系统需增加 ”按钮权限控制“ 功能，对权限的控制粒度要普及到按钮层级 预期按钮权限控制的交互方式无非两种：”不可见” 和 “可见不可点”。 不可见不可见的交互方式相对简单，我们可使用 v-if 控制其是否显示。使用 v-show 也行，但不够保险，毕竟 v-show 只是把样式改成 display: none，在真实的 DOM 渲染还是存在的，所以更推荐 v-if 来控制不可见。 可见不可点“看是能看了，但你不行了”。 样式控制（得加个禁用样式），什么 cursor: not-allowed ，置灰之类的云云； 不可点击，即要禁用或屏蔽点击事件，好像有 preventDefault/stopProgration 可实现； 最终产品需求选择了 “可见不可点”，原因可能就觉得不可见太简单了。(¬_¬) 思路探索 给按钮点击事件的回调函数，加个包装函数，对其权限控制，进行事件拦截与触发。相当是做了个代理，有点高阶组件那意思（但对现有业务改动太大，得对每个@click绑定函数逐个修改，遂放弃该方案）； 阻止按钮点击事件冒泡与触发，貌似能用上 prevent ...

前端组件人人都在用，人人都在封装。目前已知的几个大型开源组件库也并没有给出具体的封装规范。但是根据其开放的组件样式、使用规则等我们也可以参考出一些具体的封装要求。延伸到业务和组件的使用场景，其要求可能又不完全一样。本文章旨在以StoryBook为展示背景条件下，规范出一套基本的前端组件封装要求，提供一套更加适合大众使用的前端组件封装细则，供大家参考。 组件的分类、命名、文件结构组件的分类基础组件 基础组件可以供多个项目使用，可配置项更多，展示形式及功能更灵活、丰富。 作为基础组件，可以是业务组件封装的基础，默认的UI可能不能够直接用于项目，但是其功能及提供的配置参数，可以满足我们在此基础组件上封装业务组件。 展示组件SrollView、盒子模型、Swiper、提示语等 功能组件confirm弹窗、toast弹窗、全页面蒙层、滚动至顶部、tips、tab、swiper等 业务组件业务组件主要是为了能在更少时间更少配置的情况下，快速搭建同一业务条线下相同风格的的页面。减少开发成本，组件的利用率可能不会很高，但是使用成本却大大降低，因为它更贴近业务，包括接口数据格式和字段名称、U ...

前言介绍地图之前我们首先了解它的基本组成。相信大家都了解拼图游戏的原理，把一张大图切割成若干小块，然后按照一定的规则拼接起来。地图的原理也是一样。我搜罗的目前移动端比较常见的绘制地图的方法，与大家分享。 背景互联网地图服务商的在线地图都通过瓦片的方式提供，称为瓦片地图服务。最常见的地图瓦片是图片格式的，现在有的地图服务商也提供了矢量的瓦片数据，然后在用户端使用Canvas渲染成图片，如node-canvas实现百度地图个性化底图绘制。在进行地图开发时，为获取特定经纬度所在区域的瓦片和获取瓦片上像素点对应的经纬度，经常需要进行经纬度坐标与瓦片坐标、像素坐标的相互转换。 主要经纬度坐标系地球本身是个椭球体, 要把它以平面的方式绘制在一个矩形上也真的不好办, 现在有不少绘制的方式但是都有各自的优缺点, 感兴趣的朋友可以查查看具体的细节, 我这里就简单介绍下比较常见的方式； 经纬度EPSG：4326也就是地图的默认坐标；现在球体上定义好经纬度, 然后在正方形纸上画出刻度, 对应的绘制； 墨卡托投影(EPSG：3785 )把地球放在一个圆筒里面, 假设地球内部有个光源, 那么地球在圆柱上的投 ...

本次给大家分享一个教程：使用Joysticks’n Sliders插件做一个3D-UI界面。 效果如下： 插件介绍本次3D-UI小动画主要用到的插件是：AE scripts Joystick‘n Sliders脚本：是一个二维动画绑定的插件，是通过创建控制杆或滑块来实现复杂的图形动画脚本。在图层上可以即时创建动画，只需在开始和结束位置设置关键帧，即可生成过渡动画，还可使用滑块来控制动画的任意位置，对于许多卡通角色制作，MG动画制作，等其他特殊动画制作，此脚本都可以提供高效的制作方案。 Joysticks’n Sliders插件的安装： 复制Joysticks_n_Sliders.jsxbin文件到AE脚本目录： Mac：应用程序\Adobe After Effects CC\Scripts\ScriptUI Panels\ 打开AE软件设置，勾选上*允许脚本读写和访问网络 附上 Joysticks’n Sliders的下载地址：https://www.lookae.com/joysticks-171/ 插件使用方法以下是插件中各个功能按钮的具体释义； 插件的Joysticks部 ...