js编程
文章平均质量分 58
wl_
这个作者很懒,什么都没留下…
展开
-
响应式编程-数据劫持
响应式编程的核心思想是观察者模式,被观察的对象我们可以称之为数据源,所以,数据是响应式编程所关注的核心。原创 2024-07-13 22:38:01 · 365 阅读 · 0 评论 -
如何动态执行JS
引言:随着行业发展,技术更新,生产结构发生变化,低代码技术又重新站上了舞台,开发者们成为了舞台幕后的操纵者。在web端的低代码开发工具中,js占据了重要的位置,而【动态执行】也成为了低代码开发工具中不可或缺的一部分。本文记录了js的动态执行方法,以备不时之需。原创 2023-05-25 21:20:53 · 1778 阅读 · 0 评论 -
推荐一个表格组件handsontable
web版的excel,Handsontable可能满足你的需求原创 2022-04-04 23:40:29 · 705 阅读 · 0 评论 -
前端实现断点下载
背景:当下载一个很大的文件时,如果下载到一半暂停,如果继续下载呢?断点下载就是解决这个问题的。什么是断点下载?所谓断点下载就是可以一部分一部分的下载,不用一次性把文件数据全部拿到。涉及到的主要HTTP消息头通用首部 请求头 响应头 实体头 Status Code Range:请求数据范围 Accept-Ranges:标识自身支持范围请求 Content-Range:一个数据片段在整个文件中的位置。 ETag:资源特定版本标识符.原创 2021-10-23 11:09:04 · 4253 阅读 · 7 评论 -
前端生成压缩文件实现批量下载
1、准备工作FileSaver.js:文件保存 jszip:文件压缩 moment:日期格式化工具(可选)2、实例import { saveAs } from 'file-saver/FileSaver'import moment from 'moment'const JSZip = require('jszip')let zip = new JSZip()zip.file('文件名1.xx', Blob1) // 添加压缩文件zip.file('文件名2.xx', Blob2原创 2021-10-19 10:16:19 · 664 阅读 · 0 评论 -
vue源码中,将一个字符串重复n次的算法解析
在浏览vue2.x的源码过程中,无意中在codeframe.js文件中看到一个repeat函数,其作用就是能够将一个字符串重复指定的次数并返回,以往看到类似的代码大多都是瞄一眼写法,然后就直接略过,然而这次我不打算轻易放过,尝试对其写法做出了逆向解释和扩展,因而有了此文。原始代码如下:functionrepeat(str,n){letresult=''if(n>0){while(true){if(n&1){...原创 2021-06-25 00:07:31 · 916 阅读 · 1 评论 -
微信小程序中字符串表达式计算
背景:偶然在微信小程序中需要计算类似‘2+5-3×4’的表达式,结果发先eval、new Function等方法不被支持,无奈之下进行了手动实现。一、需求:正整数之间的加(+)、减(-)、乘(×)、除(÷)运算,支持括号二、思路递归将表达式中括号中的内容提取并计算出来提取乘、除表达式进行处理提取加、减表达式进行处理三、实现方法【字符串正则匹配方式】依次处理括号、乘除和加减,可考虑用字符串的replace方法【语法解析方式】抽象表达式中各组成元素,借用抽象语法树相关原理处理表达式.原创 2021-04-20 19:17:42 · 1418 阅读 · 0 评论 -
超微编译器
事物的特殊性往往也能反映事物的普遍性。-- 网摘背景:在了解抽象语法树的时候偶然了解到 the-super-tiny-compiler这个开源项目,一看之下似乎不复杂,原文全是英文,阅读的时候就想到翻译一下,一方面加深理解,一方面也作为阅读的成果。本文主要是对源码中注释的翻译。大多数编译器分为三个主要阶段解析转换生成代码一、解析定义:将原始代码转成更抽象的表示。详细解释:解析通常分为词法分析和句法分析两个阶段。词法分析:由词法分析器将原始代码分解成不同的标记,这些标记包括数字.翻译 2020-06-29 18:53:19 · 207 阅读 · 0 评论 -
BDD、TDD、ATDD的对比区别(译文)
本指南旨在描述不同的测试方法或实践,例如行为驱动开发(BDD)、测试驱动开发(TDD)、验收测试驱动开发(ATDD)。它还将描述这些技术之间的主要区别。在文章最后,将描述它们是怎样工作的,它们的关键差异以及在开发过程中所扮演的独特的角色。原文:https://www.browserstack.com/guide/tdd-vs-bdd-vs-atdd什么是测试驱动开发-Test-Driven Development (TDD)?测试驱动开发是从开发人员角度使用的一种测试方法或者说编程实践。在.翻译 2020-06-11 17:36:15 · 2428 阅读 · 0 评论 -
webpack4.x打包文件解析
眼睛里的东西,是被赋予的,逃脱,就分不清‘真相’与‘现实’。–极简一、环境"webpack": "^4.43.0""webpack-cli": "^3.3.11"二、源码src/index.jsexport default function() { console.log('hello world')}三、配置文件webpack.config.jsconst path = require('path');module.exports = { mode: 'de.原创 2020-06-09 18:33:34 · 352 阅读 · 0 评论 -
web明水印
一、功能点水印文本自定义水印文本颜色自定义水印旋转角度自定义水印覆盖随容器自适应水印背景穿透原创 2020-05-26 23:39:13 · 410 阅读 · 0 评论 -
组合排序算法
一、测试用例用例一入参:[[1,2],[3,4],[5,6]]出参:[1, 3, 5][1, 3, 6][1, 4, 5][1, 4, 6][2, 3, 5][2, 3, 6][2, 4, 5][2, 4, 6]用例二入参:[[‘红色’,‘白色’],[‘1.7米’,‘1.8米’],[‘男性’,‘女性’]]出参:[“红色”, “1.7米”, “男性”][“红色”, “1.7米”, “女性”][“红色”, “1.8米”, “男性”][“红色”, “1.8米”, “女性”][原创 2020-05-14 19:13:41 · 856 阅读 · 0 评论 -
前端异步小结
一、异步操作XMLHttpRequest请求定时器事件WebWorkers,工作线程的运行Websocket请求二、异步编程解决方案PromiseGeneratorasync事件轮询响应式编程,RxJS多线程...原创 2019-05-21 10:08:40 · 176 阅读 · 0 评论 -
node调用动态链接库(.dll)
一、系统windows10二、应用环境1.安装node2.安装node-gyp3.安装windows-build-toolsnpm install -g node-gyp //依赖python2.7,包含在windows-build-tools中npm install --global --production windows-build-tools(在管理员权限打开的命令行中执行)...原创 2019-01-14 17:55:14 · 12061 阅读 · 12 评论 -
DOM节点类型记录
DOM共有12种类型:Node.ELEMENT_NODE (1),元素节点,nodeType值为“1”Node.ATTRIBUTE_NODE (2),属性节点,nodeType值为“2”Node.TEXT_NODE (3),文本节点,nodeType值为“3”Node.CDATA_SECTION_NODE (4),只针对基于 XML 的文档,表示的是 CDATA 区域,nodeType值为“原创 2017-07-26 19:34:23 · 787 阅读 · 0 评论 -
js数组原生方法小结
1.数组检测obj instanceof Array//trueArray.isArray(obj)//trueObject.prototype.toString.call(obj)//”[object Array]”2.转换方法arr.toString()、arr.valueOf()3.栈方法push()在数组末端推入,pop()在数组末端弹出4.队列方法shift()返回数组第原创 2017-07-27 10:37:36 · 392 阅读 · 0 评论 -
js字符串原生方法小结
1.字符方法charAt() 和 charCodeAt() var stringValue = "hello world"; alert(stringValue.charAt(1)); //"e" alert(stringValue.charCodeAt(1)); //输出"101"2.字符串操作方法concat() ,用于将一或多个字符串拼接起来,返回拼接得到的新字符串原创 2017-07-27 12:48:16 · 324 阅读 · 0 评论 -
随机数、随机下标数组
一、产生随机数function random(startNum,endNum){ return startNum+Math.round(Math.random()*(endNum-startNum));}二、产生指定长度的随机数组下标的数组function randomArr(length){ var arr = [],indexArr=[]; if(typeof len原创 2017-09-13 18:42:35 · 2710 阅读 · 0 评论 -
js模块化编程之require.js
一、什么是require.js呢? require.js是javascript模块化编程在浏览器客户端的一种实现,即AMD规范的实现。二、在浏览器端的使用下载require.js项目目录结构起始文件:index.html入口js文件:main.js定义AMD模块:util.js非AMD js文件 最终页面效果 总结:其实对于现在来说require.js已经是相对较老的技术,现在原创 2017-09-26 21:50:10 · 225 阅读 · 0 评论 -
3D图形基础概念
一、顶点、多边形、网格 顶点:描述具有x、y、z坐标的空间位置 多边形:通过连接多个顶点形成 网格:由一个或多个多边形组成(一般是三角形、四边形) 3D 图形是由3D网格构成的,3D网格也被称为模型。二、材质、纹理、光源 纹理:物体的表面上绘制的图案 材质:物体表面各可视属性的结合,这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等 光源:材质的表现必然依原创 2018-01-07 14:36:16 · 3165 阅读 · 0 评论 -
Function.apply.bind(foo,null)解析
前言前些天看到遇到Function.apply.bind(foo,null)这么一行代码,冥思苦想而不得,终于今日下了决心把它解决掉。内容一、要理解这行代码,当然首先得理解apply和bind的相关特性了。 apply:调用一个函数, 其具有一个指定的this值,以及作为一个数组(或类似数组的对象)提供的参数。详情见这里bind:函数会创建一个新函数(称为绑定函数),新函数与原创 2018-01-16 16:46:54 · 1538 阅读 · 5 评论 -
Promise笔记(一)
Promise 是异步编程的一种解决方案,其本身代表着一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。成功和失败的状态都叫resolved。基本用法const promise = new Promise(function(resolve, reject) { //异步操作 setTimeout(function(va...原创 2018-05-08 14:46:22 · 249 阅读 · 0 评论 -
动态添加网络拓扑节点、svg下载
一、效果 二、代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拓扑图&原创 2018-05-24 16:44:58 · 2192 阅读 · 0 评论 -
行数据结构转成树形数据结构
背景:在前后端开发过程中,后端负责提供接口数据,有时前端需要把接口数据转成其他的格式,本文就用于将具备父子逻辑的行数据转成树形结构。代码如下:function rowDataToTreeData(rootTreeNode, rowData) { if (rowData && rowData.length > 0) { for (let i = 0; i &...原创 2018-12-01 21:47:58 · 1712 阅读 · 4 评论 -
angular6-自定义库开发入门实践
一、创建ng项目ng new ng-wl-ui二、创建项目库ng generate library ng-j2 --prefix=j2此命令会做以下几件事:创建projects目录修改angular.json文件修改tsconfig.json文件安装ng-packagr三、添加库构建脚本package.json/scripts"build:library": "ng b...原创 2018-12-28 19:05:31 · 1243 阅读 · 0 评论 -
js模块化编程发展历程
随着业务需求的不断发展变化,web前端用到的js代码也变得越来越复杂,过去松散的代码管理方式使开发和维护就变得越发困难,管理好js代码就成为前端工程师们不得不面对的问题,而js的模块化编程就是在这一实践中的产物。本文旨在对js模化编程做一记录。一、为什么要模块化?解决全局变量灾难避免命名冲突代码解耦利于多人开发、代码共享方便维护二、历程命名空间 + 闭包namespaceA.app.原创 2017-06-18 22:13:23 · 505 阅读 · 0 评论