JavaScript
文章平均质量分 86
JavaScript
谭光志
FE/Nodejs/Rust 全栈
Github: https://github.com/woai3c
展开
-
可视化拖拽组件库一些技术要点原理分析(二)
本文是对《可视化拖拽组件库一些技术要点原理分析》的补充。上一篇文章主要讲解了以下几个功能点:编辑器自定义组件拖拽删除组件、调整图层层级放大缩小撤消、重做组件属性设置吸附预览、保存代码绑定事件绑定动画导入 PSD手机模式现在这篇文章会在此基础上再补充 4 个功能点,分别是:拖拽旋转复制粘贴剪切数据交互发布和上篇文章一样,我已经将新功能的代码更新到了 github:github 项目地址在线预览友善提醒:建议结合源码一起阅读,效果更好(这个 DEMO 使用原创 2021-01-18 09:16:51 · 586 阅读 · 0 评论 -
手把手带你入门前端工程化——超详细教程
本文将分成以下 7 个小节:技术选型统一规范测试部署监控性能优化重构部分小节提供了非常详细的实战教程,让大家动手实践。另外我还写了一个前端工程化 demo 放在 github 上。这个 demo 包含了 js、css、git 验证,其中 js、css 验证需要安装 VSCode,具体教程在下文中会有提及。技术选型对于前端来说,技术选型挺简单的。就是做选择题,三大框架中选一个。个人认为可以依据以下两个特点来选:选你或团队最熟的,保证在遇到棘手的问题时有人能填坑。选市场占有率高的原创 2020-11-06 22:12:08 · 818 阅读 · 1 评论 -
前端性能优化 24 条建议(2020)
占位原创 2020-03-30 00:23:04 · 1339 阅读 · 0 评论 -
ESlint + Stylelint + VSCode自动格式化代码(2023)
本文用 Vue 项目做示范。利用 Vue CLI 创建项目时要将 ESlint 选上,下载完依赖后,用 VSCode 打开项目。安装插件 ESLint,然后 File -> Preference -> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 用户),搜索 eslint,点击 Edit in setting.json将以下选项添加到配置.........原创 2019-11-28 17:38:16 · 5829 阅读 · 0 评论 -
移动端开发一些常见问题的解决方案
1. 页面适配这一点不能算是建议,应该说是解决方案。最近查了好多关于移动端关于适配的资料,把人都看懵了,收获了以下名词CSS像素、物理像素、逻辑像素、设备像素比、PPI、DPI、DPR、DIP、Viewport说实话,我一点都不想了解这些名词到底有着什么样的解释,只想知道怎么让开发的页面能适配各种移动端设备。简单点说,我想知道设备的真实开发尺寸是多少(根据这几天查资料所得,这个概念叫逻辑...原创 2019-12-13 11:05:23 · 344 阅读 · 0 评论 -
前端性能和错误监控
序一般来说,前端监控工具的工作流程是这样的:数据采集 --> 数据上报 --> 服务端处理 --> 数据库存储 --> 数据监控可视化平台能用得上监控工具的网站一般都是比较大的网站,很多中小企业根本用不上。所以说,一般的前端在工作中根本接触不到监控的相关知识(作者工作快三年了,根本没用过)。为了一探前端监控的相关技术原理,这几天都在搜索有关资料,现在打算写篇文章对...原创 2019-11-15 23:51:32 · 354 阅读 · 0 评论 -
element-ui 表格打印
更多文章打印需要用到的组件为 print-js普通表格打印一般的表格打印直接仿照组件提供的例子就可以了。printJS({ printable: id, // DOM id type: 'html', scanStyles: false,})element-ui 表格打印element-ui 的表格,表面上看起来是一个表格,实际上是由两个表格组成的。表头为...原创 2019-10-17 15:21:13 · 3354 阅读 · 0 评论 -
开发一个简单的 Vue 弹窗组件
更多文章一个弹窗组件通常包含两个部分,分别是遮罩层和内容层。遮罩层是背景层,一般是半透明或不透明的黑色。内容层是放我们要展示的内容的容器。<template> <div class="modal-bg" v-show="show"> <div class="modal-container"> <div...原创 2019-06-14 14:47:23 · 703 阅读 · 0 评论 -
Vue 改变数据,页面不刷新的问题
更多文章最近在用 element-ui 开发一个网站,使用 table 组件时,发现修改完数据,有时候会延迟一两秒,页面才会发生变化。看了一下代码,发现修改数据的代码是这样的// popupData是修改的数据,修改完后,赋值给对应的表格数据this.tableData[this.currentRow] = this.popupData注意事项(以下内容摘自官方文档)由于 Java...原创 2019-06-13 16:54:22 · 3609 阅读 · 0 评论 -
Vue 实现前进刷新,后退不刷新的效果
需求一:在一个列表页中,第一次进入的时候,请求获取数据。点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。也就是说从其他页面进到列表页,需要刷新获取数据,从详情页返回到列表页时不要刷新。解决方案在 App.vue设置: <keep-alive include="list"> <router-view/> ...原创 2019-06-07 14:22:43 · 157 阅读 · 0 评论 -
多个请求下 loading 的展示与关闭
一般情况下,在 vue 中结合 axios 的拦截器控制 loading 展示和关闭,是这样的:在 App.vue 配置一个全局 loading。 <div class="app"> <keep-alive :include="keepAliveData"> <router-view/> <...原创 2019-06-07 13:51:59 · 8311 阅读 · 1 评论 -
编译原理实战入门:用 JavaScript 写一个简单的四则运算编译器(二)语法分析
四则运算的语法规则(语法规则是分层的)x* 表示 x 出现零次或多次x | y 表示 x 或 y 将出现( ) 圆括号,用于语言构词的分组以下规则从左往右看,表示左边的表达式还能继续往下细分成右边的表达式,一直细分到不可再分为止。expression: addExpressionaddExpression: mulExpression (op mulExpression)*mu...原创 2019-06-30 17:35:42 · 384 阅读 · 0 评论 -
在浏览器调起本地应用的方法
最近公司有个需求,要求在浏览器中点击某个按钮,自动调起电脑中的一个应用。首先,将以下代码复制到一个 reg 文件,例如 test.reg。Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\ptl]@="URL:ptl Protocol Handler""URL Protocol"=""[HKEY_CLASSES_ROOT\pt...原创 2019-05-17 17:39:43 · 1457 阅读 · 0 评论 -
Vue 动态添加路由及生成菜单
更多文章写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单。为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的。在网上找了好多资料,终于想到了解决办法。动态生成路由利用 vue-router 的 addRoutes 方法可以动态添加路由。先看一下官方介绍:router.addRoutesrouter.addRoutes(routes: Arr...原创 2019-06-19 17:57:36 · 11524 阅读 · 6 评论 -
Vue 页面权限控制和登陆验证
更多文章页面权限控制页面权限控制是什么意思呢?就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的。如果一个页面,有角色越权访问,这时就得做出限制了。Vue 动态添加路由及生成菜单这是我写过的一篇文章,通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法。另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限...原创 2019-06-20 10:37:39 · 182 阅读 · 0 评论 -
编译原理实战入门:用 JavaScript 写一个简单的四则运算编译器(一)词法分析
编译器编译器是一个程序,作用是将一门语言翻译成另一门语言。一般的程序,CPU 是无法直接执行的,因为 CPU 只能识别机器指令。所以要想执行一个程序,首先要将高级语言编写的程序翻译为汇编代码,再将汇编代码翻译为机器指令,这样 CPU 才能识别并执行。示例:// CPU 无法识别10 + 5// 翻译成汇编语言push 10push 5add// 最后翻译为机器指令 汇编代码...原创 2019-06-30 17:29:19 · 392 阅读 · 0 评论 -
编译原理实战入门:用 JavaScript 写一个简单的四则运算编译器(三)模拟执行
现在来模拟一下 CPU 执行机器指令的情况,由于汇编代码和机器指令一一对应,所以我们可以创建一个直接执行汇编代码的模拟器。在创建模拟器前,先来讲解一下相关指令的操作。栈在内存中,栈的特点是只能在同一端进行插入和删除的操作,即只有 push 和 pop 两种操作。pushpush 指令的作用是将一个操作数推入栈中。poppop 指令的作用是将一个操作数弹出栈。add...原创 2019-06-30 18:05:05 · 229 阅读 · 0 评论 -
编译原理实战入门:用 JavaScript 写一个简单的四则运算编译器(四)结语
四则运算编译器,虽然说功能很简单,只能编译四则运算表达式。但是编译原理前端部分几乎都有涉及,词法分析,语法分析,还有代码生成。再复杂的编译器、再简单的编译器,功能上是差不多的,只是复杂的编译器实现上会更困难。这个系列的文章是为了帮助你入门,在这个基础上再去看编译原理相关书籍,不至于打瞌睡。如果你对编译原理很有兴趣,并且想更深一步的学习,在这里强烈推荐你看一本书——我心目中的神书——《计算机系...原创 2019-06-30 18:08:19 · 291 阅读 · 0 评论 -
前端下载二进制流文件
更多文章平时在前端下载文件有两种方式,一种是后台提供一个 URL,然后用 window.open(URL) 下载,另一种就是后台直接返回文件的二进制内容,然后前端转化一下再下载。由于第一种方式比较简单,在此不再叙述。接下来主要讲解一下第二种方式怎么实现。Blob、ajax(axios)mdn 上是这样介绍 Blob 的:Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示...原创 2019-07-29 10:29:16 · 9623 阅读 · 12 评论 -
贪吃蛇(JavaScript实现)
在线预览HTML代码&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp原创 2018-08-28 10:01:14 · 449 阅读 · 0 评论 -
用canvas实现手写签名功能
最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器。这样的需求用 canvas 实现是最好的。需要用到 canvas 的以下几个属性:beginPath 创建一个新的路径globalAlpha 设置图形和图片透明度的属性lineWidth 设置线段厚度的属性(即线段的宽度)strokeStyle 描述画笔(绘制图形)颜色或...原创 2019-04-23 14:12:19 · 1620 阅读 · 0 评论 -
手机软键盘弹起导致页面变形的一种解决方案
最近用 uniapp(一种第三方app开发框架) 开发 app,其中有一个页面有十几个 input 输入框,在点击 input 输入时,软键盘弹起,导致页面往上顶,底部的按钮也全部弹到页面上面去了,布局全被打乱。原来长这样:变形后长这样:在开发APP时...原创 2019-04-23 10:51:38 · 2498 阅读 · 0 评论 -
2019前端最全面试题
项目地址HTML问题HTML5语义化什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。好处易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。方便其他设备解析,如盲人阅读器根据语义渲染网页有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。http://www.daqian...原创 2019-04-27 12:15:53 · 903 阅读 · 2 评论 -
JavaScript同步、异步及事件循环
同步、异步JS是单线程的,每次只能做一件事情。像以下这种情况,代码会按顺序执行,这个就叫同步。console.log(1);console.log(2);console.log(3);以下代码会输出2、3、1,像这种不按顺序执行的,或者说代码执行中间有时间间隙的,叫异步。setTimeout(() =&amp;amp;amp;gt; { console.log(1);}, 0);console....原创 2018-11-15 13:03:13 · 145 阅读 · 0 评论 -
上百道最新前端面试题
持续更新原创 2018-11-11 18:14:10 · 288 阅读 · 0 评论 -
实现一个迷你版的vue
项目地址实现一个带响应数据的迷你vueVue实例化过程实例化之前Vue会先给Vue挂载一系列的原型方法以及静态方法、属性实例化时会对选项参数进行规范化、合并等操作通过自定义Render方法、template、el等生成Render函数数据进行绑定 通过Watcher监听数据的变化数据发生变化时,render函数会执行生成VNode对象通过patch方法,对比新旧VN...原创 2018-08-29 14:23:21 · 1281 阅读 · 0 评论 -
推箱子(JavaScript实现)
github项目地址 在线预览原创 2018-08-28 10:05:02 · 2251 阅读 · 0 评论 -
jquery 树形数据表格组件
组件项目仓库地址 表格创建流程1、创建工具栏2、创建表头3、通过AJAX取得数据并渲染表格4、绑定各种事件加载数据的方式有两种1、直接加载全部2、当点击要看的数据时再加载"越秀区":{ "data": { "arry":[50,100,100], "hasData": &a原创 2018-08-01 22:00:04 · 1307 阅读 · 2 评论 -
冒泡排序(JavaScript)
冒泡排序算法的运作如下:比较相邻的元素。如果第一个比第二个大,就交换他们两个。对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。针对所有的元素重复以上的步骤,除了最后一个。持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。 /** * [冒泡排序] * @param {array} [乱序数组] * ...原创 2018-05-18 15:08:48 · 186 阅读 · 0 评论 -
二分查找(JavaScript实现)
用数组来实现这个算法,前提是先将数组升序排序。思路:数组索引0设为起点start,最后一个元素设为end,把要查找的值和数组中间的值对比,如果要查找的值比中间的值要大,则将数组中间的索引设为start,然后再取start和end的中间值,一直对比直到找到所要找到的值,或没有这个值为止。举例:1-10的数组 我要查找7 先查5 发现7比5大 再查5和10的中间值 7 ...原创 2018-05-17 20:13:21 · 1869 阅读 · 0 评论 -
Vue 轻量级后台管理系统基础模板
vue-admin-templatevue轻量级后台管理系统基础模板在线预览相关依赖vue-routeriviewaxios功能登录页一周七天自动切换不同的壁纸(建议自己配置)标签栏点击标签切换页面刷新当前标签页关闭其他标签/关闭所有标签侧边栏伸展/收缩页面宽度过小自动收缩多级菜单(利用iView组件)用户相关消息通知用户头像基本资料...原创 2018-12-13 17:32:08 · 2045 阅读 · 3 评论 -
Vue动态生成表单组件vue-form-maker
简介Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 整体组件布局方式借鉴了form-create的写法 在此表示感谢在Vue里 一般要用到什么组件或数据 都得提前声明所以要根据数据来生成表单 只能使用Vue的render函数要做这一个组件 其实并不难 看一下Vue官方示例 再找个UI组件库 差不多就能写出来如果对项目有兴趣 可以fork或克隆项目 自行研究 有...原创 2018-12-25 10:30:52 · 2418 阅读 · 0 评论 -
uniapp canvas内容转成base64格式
uni.canvasToTempFilePath({ x: 0, // 起点坐标 y: 0, width: 600, // canvas 宽 height: 200, // canvas 高 canvasId: 'c1', // canvas id success(res) { const savedFilePath = res.te...原创 2019-04-26 15:07:46 · 5540 阅读 · 4 评论 -
前端新手入门的各种练手小项目(百度前端学院任务)
在我学习前端的时候,最烦恼的是看了书却不知道通过做什么项目来实践,从而把理论知识变成真正的看得见的“东西”。直到我接触了百度前端技术学院(IFE),里面有很多小任务,都是针对前端的某一个知识点的小任务。我印象特别深刻的是2016年的任务,因为它非常符合前端新手入门,足够简单,足够详细。2017年和2018年的任务我都做了,虽然对于已经入门了的我来说,不算什么难事。但我还是不建议新手做2017...原创 2019-03-24 14:40:20 · 12148 阅读 · 7 评论 -
优化循环的方法-循环展开
更多文章循环展开是一种程序变换,通过增加每次迭代计算的元素的数量,减少循环的迭代次数。用代码来说明就是将for (i = 0; i < len; i++) { sum += arry[i]}替换为for (i = 0; i < len; i += 2) { newSum += arry[i] + arry[i + 1]}循环展开对于算术运算来说,优化的作用是很大...原创 2019-01-16 11:11:36 · 6734 阅读 · 2 评论 -
如何编写高质量代码
更多文章什么是高质量代码?高质量代码具有以下几个特点:可读性高结构清晰可扩展(方便维护)代码风格统一低复杂性简练编写高质量代码主要遵循以下几点:代码规范代码规范的好处规范的代码可以促进团队合作规范的代码可以降低维护成本规范的代码有助于代码审查养成代码规范的习惯,有助于程序员自身的成长每个程序员最烦的就是修改别人的代码,无论代码好坏。因为第一眼看上去没有熟悉感...原创 2019-01-09 17:11:02 · 441 阅读 · 0 评论 -
程序性能优化-局部性原理
更多文章概念一个编写良好的计算机程序常常具有良好的局部性,它们倾向于引用邻近于其他最近引用过的数据项的数据项,或者最近引用过的数据项本身,这种倾向性,被称为局部性原理。有良好局部性的程序比局部性差的程序运行得更快。局部性通常有两种不同的形式:时间局部性 在一个具有良好时间局部性的程序中,被引用过一次的内存位置很可能在不远的将来被多次引用。空间局部性 在一个具有良好空间局部性的程序中...原创 2019-01-17 13:11:13 · 388 阅读 · 0 评论 -
如何学习编译原理
对于没有计算机科学基础的程序员或初学者来说 一上来就看龙书 虎书是行不通的 全是理论知识 看得想睡觉我还试过看网易云大学计算机专业的编译原理课程 也是看得一头雾水 看到80多讲就看不下去了另外 LISP(计算机程序的构造和解释)这本很多人推荐的书其实并不适合初学者 前3章和后面几章难度差别有点大 可能是自己水平不行 看LISP解释器和编译器那两章也是看不懂 虽然强迫自己看完 但是最后还是不懂...原创 2019-01-11 13:43:57 · 1733 阅读 · 0 评论 -
前端的发展历程
前端的发展历程什么是前端前端:针对浏览器的开发,代码在浏览器运行后端:针对服务器的开发,代码在服务器运行前端三剑客HTMLCSSJavaScriptHTMLHTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的基石。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程...原创 2018-10-09 14:30:30 · 2993 阅读 · 0 评论 -
JavaScript 性能优化
更多文章加载与执行将&lt;script&gt;标签放在&lt;/body&gt;前面,不要放在&lt;head&gt;中,防止造成堵塞尽量减少请求,单个100KB的文件比4个25KB的文件更快,也就是说减少页面中外链的文件会改善性能数据存取使用局部变量和字面量比使用数组和对象有更少的读写消耗尽可能使用局部变量代替全局变量如无必要,不要使用闭包;闭包引用着其他作用域的变量,会造...原创 2019-01-10 14:59:13 · 100 阅读 · 0 评论