04 2020 档案
摘要：iphonex 已经上线有一段时间了，作为业界刘海屏幕第一款机型，导致全屏不能正常的全屏显示了，，所以需要对iphonx 适配，下面就详细说说如何适配 先看一张适配前后的图: iphonex 提供的 meta 头 <meta name="viewport" content="viewport-fit
阅读全文
摘要：今天在群里有人讨论方老师的文章《我不是很懂 Node.js 社区的 DRY 文化》，我也看了一遍，槽点太多，不知道如何下笔。 方老师分析了几个依赖最多的 npm 包，每个都只有不到百行代码。 比如 is-odd，每周下载 300 万次，但是只有核心 5 行代码。而且依赖了每周下载 1000 万次的
阅读全文
摘要：按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 图书打开的交互效果https://codepen.io/jcoulterde... 进度条交互效果https://codepen.io/jcoulterde... 太阳系行星排序游戏https://codepen.io/jco
阅读全文
摘要：jQuery带页面跳转的确认提示框代码https://www.mk2048.com/demo/demo_target_desc.php?id=0aj0kaahjjQuery alert, confirm带有页面跳转的确认提示框代码原生javascript网页贪吃蛇小游戏源码下载https://www
阅读全文
摘要：纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 预览地址 最终效果 KeyboardNav使用指南: 左下角为网站的icon,'.'代表网站无ico
阅读全文
摘要：WebClient UI上自带了一个打印按钮，按Ctrl + P后可以生成一个新的页面供打印。 如下图所示。可以看到这个页面里所有的超链接都已经被移除了。 这个页面的生成逻辑如下。 1. 按住ctrl + p之后，会触发WebClient UI框架的按键响应函数thtmlbKeyDown。浏览器传入
阅读全文
摘要：按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 图片切换效果https://codepen.io/AlikinVV/f... 基于 dom 的可换肤的自行车https://codepen.io/jh3y/full/... 用 svg 写的大金钢像素画淡入淡出效果https:
阅读全文
摘要：Bootstrap在线编辑可视化布局系统模板https://www.mk2048.com/demo/demo_target_desc.php?id=ik0khj20jLayoutIt! 可拖放排序在线编辑的Bootstrap可视化布局系统模板，可用该工具手动布局网页，一切为可视化布局 。jQuery
阅读全文
摘要：自从买了 Switch 手柄后一直想试试给自己写的小游戏增加手柄支持。今天终于抽出时间搞了一把。以下是笔记 ;) navigator.getGamepads HTML5 中获取游戏手柄的 API 是 navigator.getGamepads()。navigator.getGamepads 会返回一
阅读全文
摘要：ES6中基础类型增加到了7种，比上一个版本多了一个Symbol，貌似出现了很长时间，但却因没有使用场景，一直当作一个概念层来理解它，我想，用它的最好的方式，还是要主动的去深入了解它吧，所以我从基础部分和总结的实用场景来分析这个特性。已经了解使用方法或者时间紧迫者可以从实用场景一节开始阅读 base
阅读全文
摘要：一.前言： 用模块写代码，为什么要用模块来写代码：ES6之前，在js中定义的一切，都是共享一个全局作用域的，随着web应用变得复杂，这样做会引起如：命名冲突和安全问题、于是引入了模块。 二.清楚一个概念： export 和 export default 是ES6 里面的API（本文只介绍ES6的）
阅读全文
摘要：浅谈前端优化的几个思路 https://ltoddy.github.io 雪碧图 页面中如果有很多图片、icon(小图标),这样会有很多HTTP请求,一个图就是一个HTTP请求,建立TCP连接进行三次握手,这些都是耗费时间的.如果页面icon很多,可以考虑用css spirit(精灵,汽水雪碧也是这
阅读全文
摘要：Canvas 图像（上） Canvas 图像API可以加载图像数据，然后直接将图像应用到画布上。还可以裁切、拼贴图像数据，以显示用户需要的部分。此外，Canvas还提供了像素数据的存储功能，这样就能对其进行操作并且重绘到画布上。 1.图像基础 Canvas API提供对DOM定义的Image对象类型
阅读全文
摘要：什么是浏览器同源策略? 同源是指,域名,协议,端口号均相同,如图: 注意:localhost和127.0.0.1虽然都指向本机,但也是跨域. 浏览器同源策略(same-origin policy).简单的讲,同源策略就是浏览器为了保证用户安全,防止恶意的网站盗取数据,禁止不同域之间的JS进行交互.会
阅读全文
摘要：写在前面：我只是一个前端小白，文章中的提到可能会有不足之处，仅提供一个参考。若有不完善的地方，欢迎各位大佬指出！，希望对你有帮助！ 好了，入正题。其实之前也被这问题困扰过，在网上也查了一番，没找到解决方法。直到今天，在GitHub冒昧地向大佬提了一个issue，才点醒了我。其实是因为太过急功近利了，
阅读全文
摘要：按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 页面目录特效https://codepen.io/suez/pen/k... 选单交互效果https://codepen.io/suez/pen/X... 游戏封面开启交互效果https://codepen.io/suez/p
阅读全文
摘要：一个炫酷的计时器 在慕课网看到一个canvas的课，感觉很炫酷，就把它看完了，然后记下来。http://www.imooc.com/learn/133 第一步：绘制要显示的时间 拿小球来绘制具体的数字，具体的信息存储在一个三维数组里。具体绘制小球的代码如下： function renderDigit
阅读全文
摘要：《前端每日实战》专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书！ 以下是 2018 年 4 月份发布的项目： 1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效 3# 视频演示
阅读全文
摘要：作者：心叶时间：2018-05-01 18:30 H5提供了二种非常好用的本地存储方法：sessionStorage和localStorage，下面分别介绍一下： 1.sessionStorage：保存的是一个会话的数据，也就是说只在一次会话中有效，关闭就会销毁数据，不是持久的本地数据存储，只是一个
阅读全文
摘要：原文首发于我的个人博客： https://lonhon.top/ 之前的《基础篇》主要介绍了Sentry和基本部署流程，在实际使用过程中你会发现Sentry受欢迎的原因：除了单纯的监控异常还有溯源、分发任务等一条龙服务。本篇文章主要讲述Sentry中较好的拓展功能，包括： Release控制，分别处
阅读全文
摘要：z-index基础介绍：三维坐标空间里，x轴通常用来表示水平位置，y轴来表示垂直位置，还有z轴来表示在纸面内外方向上的位置，像下面的图片一样： css允许的z-index的值是 ● auto (自动，默认值) ● (整数) ● inherit (继承)当设置成整数时，值越大越靠近用户。如果有两个元素
阅读全文
摘要：本文主要介绍 vue的调试工具 vue-devtools 的安装和使用。工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧。 1.到github下载：git clone https://github.com/vuejs/vue-... 2.在vue-devto
阅读全文
摘要：H5新增API 选择器 querySelector()和querySelectorAll()，参数都是css选择器，前者返回符合条件的第一个匹配的元素，如果没有则返回Null，后者返回符合筛选条件的所有元素集合，如果没有符合筛选条件的则返回空数组。 getElementsByClassName()返
阅读全文
摘要：技术栈 vue+vuex+vue-router+socket.io+koa2+mongodb+pm2自动化部署+图灵机器人+[npm script打包，cdn同步，服务器上传一个命令全搞定] 功能清单 登陆注册 获取聊天记录（包含前端分页优化） 发送文字，表情，文件消息 创建群组，添加群组，群组搜索
阅读全文
摘要：原文请查阅这里，本文有进行删减，文后增了些经验总结。 本系列持续更新中，Github 地址请查阅这里。 这是 JavaScript 工作原理的第三章。 我们将会讨论日常使用中另一个被开发者越来越忽略的重要话题，这都是日益成熟和复杂的编程语言的锅，即内存管理问题。我们将会提供在创建 SessionSt
阅读全文
摘要：Node.js究竟是什么？ Node.js是一个JavaScript运行时环境。听起来不错，但这是什么意思？这是如何运作的？ Node运行时环境包含执行用JavaScript编写的程序所需的一切。 当JavaScript的原始开发者将它从只能在浏览器中运行的东西扩展到可以作为独立应用程序在机器上运行
阅读全文
摘要：全球最大的控件提供商葡萄城宣布，新一代纯前端控件 WijmoJS 发布2018 v1 版本，进一步增强产品功能，并支持在 Npm 上的安装和发布，极大的提升了产品的易用性。 WijmoJS 是用 TypeScript 编写的新一代 JavaScript/HTML5 控件集，秉承触控优先的设计理念，W
阅读全文
摘要：本人是一枚前端小白，也是从零开始学习vue.js。由于闲着蛋疼，写一点自己的经验，可能有点low。是新手想上道的话，可以看看，如果有大神，也可以给我指导一下，小生感激不尽。 关于如何使用vue-cli搭建vue项目，我这里就不再赘述，直接转发个博客，你们自己看就行了。https://www.cnbl
阅读全文
摘要：日前，活字格Web 应用生成平台发布V4.0版本，首次公开插件机制，强大的扩展性和系统集成能力，引起业内瞩目。 活字格是由西安葡萄城自主研发的 Web 应用生成平台，提供易用的类Excel可视化设计器和灵活的定制能力，帮助使用者以无代码或少写代码的方式，快速自主创建各类企业管理系统，如生产管理、进销
阅读全文
摘要：感谢本文引用链接的各位大佬们，小菜鸟我只是个搬运工 1.谈一谈你理解的vue是什么样子的？ vue是数据、视图分离的一个框架，让数据与视图间不会发生直接联系。MVVM 组件化：把整体拆分为各个可以复用的个体 数据驱动：通过数据变化直接影响bom展示，避免dom操作。 可以在原项目的基础上，一两个组件
阅读全文
摘要：微信小程序的学习 微信小程序的开始尝试 TodoList 微信开发者工具生成 目录如下： . |-- app.js |-- app.json |-- app.wxss |-- pages | |-- index # 主页 | | |-- index.js | | |-- index.json | |
阅读全文
摘要：基于svg写了一个涂鸦组件，说项目之前先附上几张效果图： 项目地址：SVGraffiti 由于篇幅问题，本文先总体介绍一下项目的大概情况，重点介绍一下组件间的通信方式。 一、项目说明 该项目是基于webpack@3.x.x构建的多页应用，使用ES6开发，以组件的方式组织代码。git clone项目后
阅读全文
摘要：基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp，UI 界面参考了安卓版的网易云音乐、flex 布局适配常见移动端。 因为服务器的原因，所以可能多人访问的时候有些东西会加
阅读全文
摘要：原文请查阅这里，略有改动，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 这是 JavaScript 工作原理的第六章。 现在，我们将会剖析 WebAssembly 的工作原理，而最重要的是它和 JavaScript 在性能方
阅读全文
摘要：React-Node搭建的博客 曾经用的php+mysql+js写的博客，现在看来已经很low了，所以用目前最火的react+koa框架重构一下。先上地址吧：目前线上版本http://www.liuweibo.cn/，要想看到最新版本和代码，请看Github地址https://github.com/
阅读全文
摘要：写在前面：我只是一个前端小白，文章中的提到可能会有不足之处，仅提供一个参考。若有不完善的地方，欢迎各位大佬指出，希望对你有帮助！ 故事背景是这样的，最近做一个Vue项目，使用到 Muse UI 组件库。刚开始时想着能用 Material Design 设计规范是一件非常开心的事情，然后事情并不会一直
阅读全文
摘要：Web Workers 分类及 5 个使用场景 原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。 这是 JavaScript 工作原理的第七章。 本系列持续更新中，Github 地址请查阅这里。 现在，我们将会剖析 Web Workers：我们将会综合
阅读全文
摘要：概述 参考自谷歌的教程网站的加载性能可以从减少网络延迟、减少资源数量、减少资源体积和使用缓存 4 个方面来进行优化。 1. 减少网络延迟与网络请求 避免使用着陆页进行重定向。重定向会导致额外的HTTP请求，造成网络延迟，拖慢网页的呈现。重定向也可能造成额外的DNS查找，TCP握手和TLS协商。 合并
阅读全文
摘要：1.css3的新特性有哪些 （1）CSS3选择器（基本、属性、伪类具体见下） （2）CSS3边框与圆角 圆角border-radius 属性：border-top-left-radius 左上角 border-top-right-radius 右上角 border-bottom-right-radi
阅读全文
摘要：前言 通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用，形成的效果可以用来作为电信资源管理系统，美食定位分享软件，片区找房，绘制铁轨线路等等，各个领域都能够涉及的一款应用。虽然这个 Demo 是结合 OpenLayers3 的，其实还可推广到与 ArcG
阅读全文
摘要：camera api (含图片预览) 参考地址 主要为利用input type=file, accept="image/*" 进行处理 图片预览方式（两种） const file = e.target.files[0] // 方式1 const url1 = window.URL.createObj
阅读全文
摘要：讲清楚之执行上下文 标签 : javascript 什么是执行上下文？ 当 JavaScript 代码执行一段可执行代码时，会创建对应的上下文(execution context)并将该上下文压入上下文栈（context stack）中。 上下文包含以下3个重要属性： name - 变量对象(VO,
阅读全文
摘要：讲清楚之 javascript中的this 这一节来探讨this。 在 javascript 中 this 也是一个神的存在，相对于 java 等语言在编译阶段确定，而在 javascript 中， this 是动态绑定，也就是在运行期绑定的。这导致了 javascript 中 this 的灵活性，
阅读全文
摘要：(1) 访问Web IDE url 在Web IDE里进行项目clone操作: https://<git host name>:8080/#/admin/projects/fnf/customer/cus.crm.opportunity (2) 选择clone完毕的项目，点击Run: 选择no
阅读全文
摘要：se5中的set与map 在est5中开发者使用对象属性来模拟。set多用于检查键的存在，map多用于提取数据。 { let set = Object.create(null) set.foo = true; //检查属性是否存在 if (set.foo) { //其他操作 } let map =
阅读全文
摘要：讲清楚之 javascript 参数传值 参数传值是指函数调用时，给函数传递配置或运行参数的行为，包括通过call、apply 进行传值。 在实际开发中，我们总结javascript参数传值分为基本数据类型按值传递（String、Numbe、Boolean、Null、undefind），引用数据类型
阅读全文
摘要：日常闲扯 从上一篇文章到这篇中间快过了一年了，时间真滴过得快。不是在下中间没想过写新的文章，而是自己确实变懒了(体重+1 +1 +1 +1....) 。。OTL。。。不过到最后觉得还是需要写点东西，不然人就真废了，于是便有了这样一个插件（其实是偶然看到别人的一个全景案例不是用webgl写的，从而产生
阅读全文
摘要：jQuery仿淘宝鼠标悬停动画图标导航特效点击》jQuery仿淘宝鼠标悬停动画图标导航特效jQuery动画图标，淘宝图标动画特效jquery点击星星打分效果代码https://www.mk2048.com/demo/demo_target_desc.php?id=i1j0iahaajQuery图像裁
阅读全文
摘要：1 什么是建造者模式? 建造者模式(Builder)是将一个复杂对象的构建层与其表示层相互分离，同样的构建过程可采用不同的表示。 建造者模式的特点是分步构建一个复杂的对象，可以用不同组合或顺序建造出不同意义的对象，通常使用者并不需要知道建造的细节，通常使用链式调用来进行建造过程，最后调用build方
阅读全文
摘要：一、键盘事件 1.onkeydownonkeydown 事件会在用户按下一个键盘按键时发生。2.onkeypress onkeypress 事件会在键盘按键被按下并释放一个键时发生。onkeypress 事件在所有浏览器中不能触发所有按键(例如：ALT, CTRL, SHIFT, ESC) 。如果只
阅读全文
摘要：React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中，使用浏览器的调试工具去Debug移动端的代码，无疑是最吸引开发人员的特性之一。 试想一下，当你在手机屏幕按下一个按钮，处理事件的代码就可以立即在浏览器的调试工具里进行断点调试，而且每当你对代码进行修改，界面便可以完成快
阅读全文
摘要：昨天上午10:00，我发布了业界第一款「性能统计分析框架」Hiper。 截止到2018年6月6号20:00分，已经500个star了，同时项目也冲上了Github新热门榜单第三名的位置 先说下Hiper是解决什么问题的 我们开发完一个项目或者给一个项目做完性能优化以后，如何来衡量这个项目的性能是否达
阅读全文
摘要：基本知识点 行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。 块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。 行内元素(inline)：可以多个标签存在一行，对宽高属性值不
阅读全文
摘要：变量的解构赋值 (1) 数组的解构赋值 1、基本用法 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring ）。 只要等号两边的模式相同，左边的变量就会被赋予对应的值。 let [foo, [[bar], baz]] = [1, [[2], 3]]
阅读全文
摘要：1.写在前面 两个多周的时间没有写文章了，手好痒好痒，趁着公司在装修，从上周末到本周都在家办公，同时公司的项目并不紧急，于是抽着时间梳理了一下CSS中关于行高line-height的理解，今天发布出来，大家准备好了吗？ 2.基本概念 2.1行高的定义与图解 行高，顾名思义指的就是一行文字的高度。按照
阅读全文
摘要：一场说走就走的旅行开始啦 随着小程序的大热，作为一个程序猿，我也开始接触并且大概了解了一个制作小程序的一些过程，为了提高自己的动手能力，于是乎，我开始来仿写携程的小程序，来实现一些基本功能，在仿写的过程中，也遇到了一些难题，也有了一点收获，希望可以通过这篇文章与大家共同交流，共同进步。 前言 为了更
阅读全文
摘要：身边有些年轻同事曾经向我表达过这种困扰：尽管完成日常工作没有任何问题，但是还想更进一步，把代码写得更好些，做到精益求精。现在写的代码能实现功能，但是不知道可以怎样写得更好。 除了阅读优秀的开源库开源框架，一点一滴积累之外，Jerry的一个建议是大家可以多琢磨琢磨每天工作使用到的一些工具，研究下这些工
阅读全文
摘要：我们都知道HTTPS的页面是发送不了HTTP请求的，那么是什么原因导致HTTPS页面不能发送HTTP请求呢？如果有发送的需求，怎么样才能发送？最近刚好遇到了这个问题，而且搜了半天没搜到靠谱的答案，所以有了本文。 1. 故事起源 我在《Jquery ajax, Axios, Fetch区别之我见》中提
阅读全文
摘要：原生js随机点名PK效果代码https://www.mk2048.com/demo/demo_target_desc.php?id=i0kh01ikjjs点名pk代码原生js鼠标滑过跑到的按钮点击不到效果点击》原生js鼠标滑过跑到的按钮点击不到效果原生js按钮点击不到，鼠标滑过按钮跑到效果，永远点击
阅读全文
摘要：使用react16+router4+mobx+koa2+mongodb做的mock平台 moapi-cli 本地工具版,一行命令 ,方便个人使用 安装 npm i moapi-cli -g 使用 moapi //3015端口不能被占用 截图 功能 支持接口代理 支持生成接口文档 支持生成接口mark
阅读全文
摘要：聊一聊Web端的即时通讯 Web端实现即时通讯的方法有哪些? - 短轮询 长轮询 iframe流 Flash Socket 轮询 客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。 客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信
阅读全文
摘要：demo: 表单配置校验配置属性流flow配置生成表单交互 .gif 技术栈: vue+elementui+springboot+mybatis+mysql 特性: 支持自定义属性 支持基于async-validator的值校验 支持父子属性 支持属性流程设置 支持多值 数据库设计: 关键数据结构:
阅读全文
摘要：一、HTTP/1.x Http1.x 缺陷：线程阻塞，在同一时间，同一域名的请求有一定数量限制，超过限制数目的请求会被阻塞 http1.0 缺陷：浏览器与服务器只保持短暂的连接，浏览器的每次请求都需要与服务器建立一个TCP连接（TCP连接的新建成本很高，因为需要客户端和服务器三次握手），服务器完成请
阅读全文
摘要：项目简介 前端站点 项目效果预览 http://findcl.com 使用 nodejs 实现磁力链接爬虫 磁力链接解析成 torrent种子信息，保存到数据库，利用 Elasticsearch 实现中文检索。koa2 搭建磁力链接搜索引擎 源码地址 https://github.com/ssstk
阅读全文
摘要：第一次在segmentfault上发文章 :)，欢迎评论指正。原文最初发表在 https://github.com/WarpPrism/... 动画相关概念 帧：动画过程中每一个静止的状态，每一张静止的图片 帧率：刷新频率，每秒钟播放的帧数，FPS（frame per second），单位是Hz 帧
阅读全文
摘要：搜索分页技术往往和另一个术语Lazy Loading（懒加载）联系起来。今天由Jerry首先介绍S/4HANA，CRM Fiori和S4CRM应用里的UI搜索分页的实现原理。后半部分由SAP成都研究院菜园子小哥王聪向您介绍Twitter的懒加载实现。 关于王聪的背景介绍，您可以参考他的前一篇文章：S
阅读全文
摘要：Element UI table参数中的selectable的使用中遇到的坑：页面： <el-table-column :selectable='selectable' type="selection" :reserve-selection="true"> </el-table-column> 网上
阅读全文
摘要：设计稿： 最后实现效果图： 话不多说，直接上代码！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
阅读全文
摘要：了解HTML标签在各浏览器当中的默认样式，可以让我们了解，为什么会要写Reset.css，Reset.css当中要怎么写样式最合理。试着思考下面的问题： 为什么会有默认样式？ 每个浏览器的默认样式有什么不同？ Reset.css具体怎么写，每个浏览器展示的效果才会一致？ 默认样式 这里说的默认样式其
阅读全文
摘要：websocket的总结 在一个聊天室系统中，常常使用websocket作为通信的主要方式。参考地址：https://www.jianshu.com/p/00e... 关于自己的看法：websocket协议是一种新的tcp协议，与常用的http协议不同的地方在于，无论是客户端还是服务端，都能进行自由
阅读全文
摘要：MALL-VUE 这是一个基于VUE + VUEX + iView做的一个电商网站前端项目, 附带前后端分离实现版本(在forMallServer分支)，欢迎fork或star 项目地址: https://github.com/PowerDos/Mall-Vue 项目预览地址(demo)： http
阅读全文
摘要：过往项目 2018 年 4 月份项目汇总（共 8 个项目） 2018 年 5 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书！ 9# 频演示如何用纯 CSS 创作一种按钮被瞄准的交互特效 10# 视频演示如何用纯 CSS
阅读全文
摘要：sessionStorage的局限: sessionStorage是页面级别的，仅在一个标签页生效，如果同一个浏览器同时打开多个标签页，且都访问同一个域名，sessionStorage是不会在这多个标签页共用的，即每个标签页都有自己的sessionStorage。 如果想突破这种局限，实现多tab页
阅读全文
摘要：习惯性记录日常工作所遇坑点，不仅仅是经验分享，真心希望走过路过的大神留言赐教！ 场景如述：蒙层下一可滚动加载的 List，蒙层上一可滚动加载的 List。 目标为蒙层展现时下层滚动不触发，几种解决方案： 禁用下层 touch 事件 禁用下层滚动事件 裁切下层溢出屏幕元素曲线禁用下层滚动事件 禁用 t
阅读全文
摘要：ES6 Array 首先先定义一个数组 let arr = [1,2,3,4,5]; forEach() forEach会遍历数组, 没有返回值，不允许在循环体内写return，不会改变原来数组的内容 forEach() 有三个参数，第一个是arr数组里面的值，第二个是arr数组索引，第三个是arr
阅读全文
摘要：前言 在Web开发中，文件上传是一个非常常见、非常重要的功能。本文将介绍如何用Node处理上传的文件。 需求分析 由于现在前后端分离很流行，那么本文也直接采用前后端分离的做法。前端界面如下： 用户从浏览器中选择文件，点击上传，将发起http请求到服务器，服务器将接受到的文件存储在服务器硬盘中。 前端
阅读全文
摘要：发布自Kindem的博客，欢迎大家转载，但是要注意注明出处 localStorage 介绍 在HTML5中，引入了两个新的前端存储特性： localStorage sessionStorage 这两者非常相似，都是用来在前端保存一定量的数据，称为前端存储，但是这两者仍然存在一定区别： 生命周期： l
阅读全文
摘要：安装mongodb 参考 http://www.runoob.com/mongodb...推荐使用 brew 安装 安装完成后运行mongodb 配置数据库，启动服务端 1.安装mongoose使用npm下载模块时候会发现很慢，所以推荐淘宝的镜像。 cnpm i mongoose --save 2.
阅读全文
摘要：最近项目需求中要写较多H5小游戏，游戏本身体量不是很复杂，主要是承载较多业务逻辑，所以决定用canvas来完成游戏部分。之前只是知道H5中有canvas这个东西，也知道它大概是画图的，但具体怎么用，还是一无所知的。在MDN在看了一些相关资料，一口气也看了HTML 5 Canvas 核心技术和HTML
阅读全文
摘要：前端同学要使用 HTML5 播放器视频，必然会使用 video 标签，不过大多数同学只是使用了较简单的功能，其实它本身拥有不凡之力有待我们发现。 首先，我们先来看下 video 最基础的用法： 使用 src 属性 <video src="http://v2v.cc/~j/theora_testsui
阅读全文
摘要：传统PC网页上传文件，大家都已经熟悉，这里不做介绍。 本文简单介绍移动端常用上传图片功能。灵活使用轮询或长连接可实现PC与移动端数据同步，即PC端需要上传的图片是移动拍照下来或移动端硬盘储存的，不需要再传到PC上然后上传。比如拍照上传业务。。。 移动端H5上传图片的方式，要点如下： 要点 解析 in
阅读全文
摘要：以前我们总说，JS是单线程没有多线程，当JS在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验，从而需要设置把任务放在任务队列中；执行任务队列中的任务也并非多线程进行的，然而现在HTML5提供了我们前端开发这样的能力 - Web Workers API，我们一起来看一看 Web Worke
阅读全文
摘要：第一种，使用vue插件 下载插件：https://chrome.google.com/web... 这样直接run一个vue项目，你就会看见插件标亮了 打开调试模式，你就会看见最后有个vue标记，打开能看见当前vue页面渲染相关数据 第二种，使用webstrom调试 下载插件 https://chr
阅读全文
摘要：需求描述 接到的原始需求是这样的，有一个H5页面，页面中有个“点击下载”的按钮，点击之后，完成下载特定的apk。大概是下面这样的👇： 需求分析 接到需求的时候我偷乐了一下，这个H5页面最大的优点是不在微信中使用（微信好坑，各种限制，基本上从微信浏览器里面实现直接下载apk是不太可能的），如果是在平
阅读全文
摘要：最近在做移动real-time-search于实时搜索和关键词高亮显示的功能，通过博客的方式总结一下，同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github上，可以clone下来直接看代码 https://github.com/IT0315/rea...下
阅读全文
摘要：一、HTML 音频/视频 方法 play() play() 方法开始播放当前的音频或视频。 var myVideo=document.getElementById("video1"); function playVid() { myVideo.play(); } function pauseVid(
阅读全文
摘要：前端css布局知识繁杂，实现方式多种多样。想写出高效、合理的布局，必须以深厚的css基础为前提。为了方便记忆和复习，将css布局要点记录如下。内容较多，应用方面说的不太详细，但都是很实用的点。 所谓布局，就是指将元素设置为我们想要的大小，放置于我们想要的位置,位置、尺寸是核心两要素。这些元素其实就是
阅读全文
摘要：引言：学习前端已经接近1个月了，先后经历了1周的 html+css, 2周的“JavaScript 从入门到下跪”，期间还看了vue+webpack。然鹅，Mentor BrightSea 说，想要学好 JavaScript, 并加深对原生语法的认知，不建议前端初学者直接上手像 react 和 vu
阅读全文
摘要：本文节选自 Awesome CheatSheet/DOM CheatSheet，主要是对 DOM 操作中常见的 Blob、File API 相关概念进行简要描述。 Web 开发中 Blob 与 FileAPI 使用简述 Blob 是 JavaScript 中的对象，表示不可变的类文件对象，里面可以存
阅读全文
摘要：前言 目前，物资采购和人力成本是隧道业发展的两大瓶颈。比如依靠民间借贷，融资成本很高；采购价格不透明，没有增值税发票；还有项目管控和供应链管理的问题。成本在不断上升，利润在不断下降，隧道产业的“互联网＋”迫在眉睫。隧道业的机械化程度高，机械制造和采购成本非常大，此外，隧道业的发展还面临建筑市场的严峻
阅读全文
摘要：问题提出 这是一个比较老的问题了，我第一次注意到的时候，是UI设计师来找我麻烦，emmm那时候我才初入前端职场，啥也不懂啊啊啊啊啊，情形是这样的：设计师拿着手机过来：这些边框都粗了啊，我的设计稿上是1px的我：？？？？我写的是1px呀，不信你看。（说着拿出了css代码设计师：不对啊我眼睛看来这个边框
阅读全文
摘要：效果预览 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/xJrOqd 可交互视频 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https
阅读全文
摘要：使用高德定位API ： AMap.Map('iCenter') AMap.CitySearch() 先在高德开放平台注册申请定位权限的key。 网站；高德开放平台 在需要定位的页面引入有定位key的script <!doctype html> <html> <head> <meta charset=
阅读全文
摘要：本文的三位作者正阳、海洋、阿力，是来自不同公司的工程师，将 Agora SDK 与智能小车结合，开发了一款可实时视频远程看房的创新性项目。本文将从方案设计到具体实现，详实分享他们的开发经验。三人也凭借该项目，在6月30日的Agora RTC Hack 上海站编程马拉松获得大奖。 创意构思 此前听到多
阅读全文
摘要：在讲案例前，我们需要先说一下精细化分析。 我们常说的精细化分析，就是一个持续“解构”的过程，通过像漏斗、留存、细分等高级分析功能，将“整体”按照事件属性解构成“个体”，将“整体用户群”近乎无限地细分，然后就可以看到流量高、低背后的原因。定位促进产品生长的部分，做放大；将用户体验不好的部分优化或去除。
阅读全文
摘要：写在前面：我的同事“熊猫少女”刚刚入职白鹭，之前从未接触过白鹭引擎，也从未做过游戏，经过4天时间的学习，他成功做了一款足球小游戏，这篇文章主要是记录他的开发过程： 正文如下： 在接触白鹭引擎的第四天，我摸索着用EUI做了一个小游戏。可能游戏逻辑比较简单，使用的知识点也比较基础，今天与大家分享交流，请
阅读全文
摘要：碰撞检测在前端游戏，设计拖拽的实用业务等领域的应用场景非常广泛，今天我们就在这里对于前端JavaScript如何实现碰撞检测算法进行一个原理上的探讨，让大家能够明白如何实现碰撞以及碰撞的理念是什么：1.矩形与矩形间的碰撞核心理念判断任意两个（无旋转）矩形的任意一边是否无间距，从而判断是否碰撞。大体实
阅读全文
摘要：写在前面，本文将同步发布于Blog、掘金、segmentfault、知乎等处，如果本文对你有帮助，记得为我得到我的个人技术博客项目给个star哦。 为何写这篇文章？ 你可能做Web开发已经有一段时间，你是否有想过下列问题呢？为什么div元素甚至是所有的html元素都可以使用addEventListe
阅读全文
摘要：需求是编写一个头像剪裁工具再封装成为一个组件，然后根据功能开始逐步编写代码：先是上传图片 => 预览图片 => 编辑图片。 刚开始没有去考虑兼容性的问题，直接编写upload部分的代码，参考了很多代码还有HTML5 FILE API之后，发现很少有React编写的这样的代码，因为想简单一点，所以直接
阅读全文
摘要：众所周知，HTML5技术本身具有许多优势。但是，如果HTML5想成为移动互联网时代App开发的主流技术，有一个必要的前提条件，就是它的功能、性能和API扩展能力上必须要达到Native的水平。而在这一点上，依靠W3C规范的定义和浏览器厂商的支持是不现实的，混合开发技术是唯一出路。 令人欣喜的是混合开
阅读全文
摘要：一、autocomplete介绍 autocomplete是Html5中的新属性。该属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入的时候，浏览器基于之前输入过的值，应该显示出在字段中填写的选项。该属性适用于<form>，以及下面的<input>类型
阅读全文
摘要：CKeditor是一款富文本编辑器，本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题，要有耐心。 第一步：如何使用 1.官网下载https://ckeditor.com/ckeditor...，分别是简易版、标准版、全面版、自定义四个选项，下载哪个根据你的诉求来。 2.下载成功后
阅读全文
摘要：效果预览 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/oMqNmv 可交互视频 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https
阅读全文
摘要：jQuery手机端城市地区选择点击省市区三级联动https://www.mk2048.com/demo/demo_target_desc.php?id=hkhj1j00jjQuery省市区三级联动,手机城市选择代码（不兼容IE6，7，8）,手机演示地址：http://www.17sucai.com/
阅读全文
摘要：技术选型 采用react框架开发移动端的话，一般的架构是Preact + antd-mobile + react-hammerjs + iscroll。 Preact Preact是React的3kb轻量化方案，拥有同样的ES6 API，其拥有以下优点： 1. 体积小，React V16.0有34.
阅读全文
摘要：前言 从互联网+的概念一出来，就瞬间吸引了各行各业的能人志士，想要在这个领域分上一杯羹。现在传统工业生产行业运用互联网+的概念偏多，但是在大众创业万众创新的背景下，“互联网＋”涌出了层出不穷的“玩法”，智慧城市、隧道交通、智慧园区、工业生产，甚至是这次要说的智能飞机！异地协同制造的范围，目前多局限于
阅读全文
摘要：《Deep web data extraction based on visual information processing》作者 J Liu 上海海事大学 2017 AIHC会议登载引用 Liu J, Lin L, Cai Z, et al. Deep web data extraction
阅读全文
摘要：ZxEditor 移动端HTML文档（富文本）编辑器，支持图文混排、引用、大标题、无序列表，字体颜色、加粗、斜体。 可用于独立web项目开发，也可以用于与原生App混合(hybrid)开发。 源码地址：https://github.com/capricornc... 本地运行 Build Setup
阅读全文
摘要：什么是jsonp JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<scr
阅读全文
摘要：我们都知道，外部引入 CSS 有2种方式，link标签和@import。它们有何本质区别，有何使用建议，在考察外部引入 CSS 这部分内容时，经常被提起。 如今，很多学者本着知其然不欲知其所以然的学习态度，不求甚解，只求结论。所以，本文遵循 css hack 的渐进识别原则，结论 → 区别 → 争议
阅读全文
摘要：1.复制图层：首先选中移动工具（V），鼠标右键选中需要复制的图层（快捷方式：上面勾选自动选择），接着一只手按住Alt键，另一只手点击鼠标左键（不松开），往左往右移动即可。若是对多个图层起作用，就可将需要操作的图层添加到同一个组中，然后上方（自动选择旁边）组，而不是图层即可。如图所示： 2.自由变换工
阅读全文
摘要：写在前面 没错，这就是慕课网上的那个vue音乐播放器，后台是某音乐播放器的线上接口扒取，虽然这类项目写的人很多，但不得不说这还是个少有的适合vue提升的好项目，做这个项目除了想写一个比较大并且功能复杂的项目，主要原因是要拿它来应对面试，也确实对我vue的业务能力有很全面的提升，也使我找工作更加得心应
阅读全文
摘要：1 什么是装饰器模式 向一个现有的对象添加新的功能，同时又不改变其结构的设计模式被称为装饰器模式（Decorator Pattern），它是作为现有的类的一个包装（Wrapper）。 可以将装饰器理解为游戏人物购买的装备，例如LOL中的英雄刚开始游戏时只有基础的攻击力和法强。但是在购买的装备后，在触
阅读全文
摘要：本文概述 Web Sockets的目标是在一个单独的持久连接上提供全双工、双向通信。在Javascript创建了Web Socket之后，会有一个HTTP请求发送到浏览器以发起连接。在取得服务器响应后，建立的连接会将HTTP升级从HTTP协议交换为WebSocket协议。 由于WebSocket使用
阅读全文
摘要：一.目标 提供几种主题色给用户选择，然后根据用户的选择改变应用的主题色； 二.实现原理 1.准备不同主题色的样式文件； 2.将用户的选择记录在本地缓存中； 3.每次进入应用时，读取缓存，根据缓存的信息判断要加载哪个样式文件即可； 三.具体实现思路 1.准备四个对应不同主题色的样式文件： ![](ht
阅读全文
摘要：参加这个会议是临时兴起，就是在一个非常巧的时间和地点做的一件恰如其分的事情，简直没有不参加的理由。再加上考虑到，只要有足够资本，谁都可以去台湾浪半个月，但不是谁都有机会到海峡对面去参加本行业内的技术交流，所以觉得这个机会更难能可贵。我不是受邀嘉宾，而是作为普通参会者的身份，门票988人民币。这个身份
阅读全文
摘要：1.隐式创建 html 标签 <input type="hidden" name="tc_id" value="{{tc_id}}"> 这种方法一般配合ajax，上面的value使用了模板引擎 2.window['data'] window['name'] = "the window object"
阅读全文
摘要：在白鹭引擎发布了5.2.7版本中新增加了命令行，增加自动合图插件TextureMergerPlugin功能。今天，我们以一个EUI案例来展示自动合图插件的具体使用方法和注意事项。 此外，我们在本文还融入了UglifyPlugin、ResSplitPlugin、ZipPlugin等插件使用方法。开发者
阅读全文
摘要：position 属性介绍 （1）position 属性自 CSS2 起就有了，该属性规定元素的定位类型。所有主流浏览器都支持 position 属性。 （2）position 的可选值有四个：static、relative、absolute、fixed。下面分别进行介绍。（其实还有个 inheri
阅读全文
摘要：介绍 vue-multi-tab 是一套基于 vue 和 element-ui 的 , 实现了 tab-router (一个基于 tab 的路由) 的 单页面, 多页签 应用程序. 我之前写这个项目的时候,有写了一篇 记一次基于vue的spa多页签实践经验然后就部分热心网友就在下面回复了一些其他类似
阅读全文
摘要：本文翻译自：https://www.sitepoint.com/es6... 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 本文介绍了ES6中全新的数字方法（ECMAScript 6）。 本文将向您介绍添加Number数据类型的新方法和常量。当然，这里采
阅读全文
摘要：一、vw px rem em是什么 1.vw:就是相对视口宽度(Viewport Width)。1vw = 1% * 视口宽度。也就是说，一个视口就是100vw。 2.px:px应该是在css中使用最为普遍的单位了吧。px是屏幕设备物理上能显示出的最小的一点。这个点不是固定宽度的，是相对长度单位。在
阅读全文
摘要：开发前准备 环境: Node.js LTS版本 git 最新版 文档: 本项目技术栈基于 ES2016 VueJS vux 快速开始 1.克隆项目 git clone https://gitee.com/Fntys/met_h5.git 2.进入项目 cd met_h5 3.安装依赖 npm ins
阅读全文
摘要：在实现复制前，对之前的拖拽排序组件属性进行了修改。 摒弃了value中的content属性，拖拽组件暴露的render函数，利用这个属性进行组件内部子组件的渲染，这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计。 为了实现Data和model的脱藕，和sortKey一样，组件增加co
阅读全文
摘要：// 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '<font color=
阅读全文
摘要：网上有很多关于Java内存模型的文章，在《深入理解Java虚拟机》和《Java并发编程的艺术》等书中也都有关于这个知识点的介绍。但是，很多人读完之后还是搞不清楚，甚至有的人说自己更懵了。本文，就来整体的介绍一下Java内存模型，目的很简单，让你读完本文以后，就知道到底Java内存模型是什么，为什么要
阅读全文
摘要：video标签学习使用 学习前的理解 video是HTML5中的新标签，可以用来播放视频。对于不同的浏览器支持的视频格式不一样，但是具体浏览器支持的类型并不清楚。 支持的类型 视频的格式分为编码格式和封装格式，后缀名(.mp4等)是封装格式，编码格式有WebM和MPEG H.264 AAC等。 在移
阅读全文
摘要：剧透：这次，D2Admin 带来了其它同类模板都没有的“花式”数据持久化功能，以及极少同类产品才有的标签页右键控制... 概述 D2Admin 7月份更新到了 1.1.5 版本 相关介绍，8月份即将结束，首先还是按照惯例罗列本月比较重要的更新内容： 1.1.6 | 1.1.7 | 1.1.10 这三
阅读全文
摘要：效果预览 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/oPjWvw 可交互视频 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https
阅读全文
摘要：此博文内容比较浅显，但是就目前项目开发中，仍然发现这些细节被同学们所忽略，写此文权当给给同学们做个引子，有则改之，无则加勉，做的更好的同学请在文后做个评论，以供大家学习参考。 js设置默认值 在ES6之前，没有设置默认值的语法，大家通常使用以下方式设置默认值： function fn(num) {
阅读全文
摘要：效果展示 github moment-server github地址 moment github地址 moment-manage github地址 articles 聊聊毕业设计系列 项目介绍 聊聊毕业设计系列 系统实现 前言 在上一篇文章中，主要是对项目做了介绍，并且对系统分析和系统设计做了大概的
阅读全文
摘要：1、textarea: 核心想法: $(this).height(this.scrollHeight) $textarea.addEventListener('input', function () { var currentLength = this.value.length; if (curre
阅读全文
摘要：前言 最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面上渲染的元素层级结果和我预想的不一样。根据自己之前的理解，也没找到一个合理的解释。我知道，肯定是我对相关属性的细节理解存在问
阅读全文
摘要：当您将多台服务器节点组成一个Docker集群时，需要对集群网络进行设置，否则默认情况下，无法跨主机容器互联，接下来我们首先分析一下原因。 跨主机容器互联 下图描述了一个简单的集群网络，在该集群内，有两台服务器甲和乙，每台服务器上都有两张网卡，分别连接公网和私网，两台服务器可以通过私网互联，在两个服务
阅读全文
摘要：1.touchstart 当手指触碰屏幕时候触发 dom.addEventListener('touchstart',function(e){}); startX=e.touches[0].clientX; 事件返回的e对象包含的移动端特有的属性： targetTouches :目标元素的所有当前触
阅读全文
摘要：前言 据说阿里有一道面试题就是谈谈函数节流和函数防抖。糟了，这可触碰到我的知识盲区了，好像听也没听过这2个东西，痛定思痛，赶紧学习学习。here we go！ 概念和例子 函数防抖(debounce) 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 看一个🌰（栗子）： //模拟
阅读全文
摘要：前言 随着 Web 技术的蓬勃发展和依赖的基础设施日益完善，前端领域逐渐从浏览器扩展至服务端（Node.js），桌面端（PC、Android、iOS），乃至于物联网设备（IoT），其中 JavaScript 承载着这些应用程序的核心部分，随着其规模化和复杂度的成倍增长，其软件工程体系也随之建立起来（
阅读全文
摘要：上一篇文章讲解了如何用js+canvas实现粒子时钟，本篇文章 ，主要是使用vue重构，让它在vue也能使用。 我们使用简单的方式重构，不使用vue工程，先加入vue cdn的地址，如下： <script src="https://cdn.jsdelivr.net/npm/vue"></script
阅读全文
摘要：redux-saga框架使用详解及Demo教程 前面我们讲解过redux框架和dva框架的基本使用，因为dva框架中effects模块设计到了redux-saga中的知识点，可能有的同学们会用dva框架，但是对redux-saga又不是很熟悉，今天我们就来简单的讲解下saga框架的主要API和如何配
阅读全文
摘要：前端代码规范 JavaScript代码编写规范 缩进 每一层级由4个空格组成，避免使用制表符（Tab）进行缩进。 行的长度 每行长度不应该超过80个字符，多于80个字符，应该在运算符后换行，下一行增加两级缩进（8个字符） doSomething(argument1,argument2,argumen
阅读全文
摘要：对于通常的developer（特别是那些具备并行计算/多线程背景知识的developer）来讲，js的异步处理着实称得上诡异。而这个诡异从结果上讲，是由js的“单线程”这个特性所导致的。 我曾尝试用“先定义后展开”的教科书方式去讲解这一块的内容，但发现极其痛苦。因为要理清楚这个东西背后的细节，并将其
阅读全文
摘要：废话不多说先上成果图 实现思路 主要分界面与逻辑两大块 界面分为5个部分 左滑块长度 左内容位置 中间长度 右滑块长度 右内容位置 逻辑 touch3个事件 各滑块长度及位置计算 选中时变色 具体实现步骤 首先我们明白整个容器的长度是不变的等于左边+中间+右边所以我们可以通过先获取总的容器的宽度并用
阅读全文
摘要：1. 祸起 看到标题，切图仔们又是菊花一紧。前几天微软刚刚开源Sketch2Code，让UI草图转化成HTML代码。切图仔瑟瑟发抖。 还没等切图仔调整好心情，号称H5代码生成工具的H5DS也开源了最新的代码。 尼玛，H5代码都可以一键生成了，还让人玩不？还TM是开源的，从此做H5页面，不要998，不
阅读全文
摘要：效果预览 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/eLMKJG 可交互视频 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https
阅读全文
摘要：效果预览 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/LJmpXZ 可交互视频 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https
阅读全文
摘要：为什么谈到Snippet 今天下午在用vscode做小程序的时候，发现很不方便，因为商店里提供的代码片段极为有限，而且平时几乎每天都需要用到代码片段，所以就在思考他们是怎么做到给别人提供代码的，我可以自定义代码片段吗。然后查了下，果然，这在vscode里自带的（好像藏得有点深），是可以自定义的，然后
阅读全文
摘要：前言 说到力导向可能很多小伙伴都只是会使用，不知道其中的实现原理，今天，我们一起来自己实现一套力导向算法，然后做一些技术相关的延伸。发散下思维。 什么是力导向算法？ 根据百科的介绍：力导向算法是指通过对每个节点的计算，算出引力和排斥力综合的合力，再由此合力来移动节点的位置。 通过力导向算法计算位置，
阅读全文
摘要：1：substring 和 substr var str = '0123456789' console.log(str.substring(1)); //123456789 console.log(str.substr(1)); //123456789 console.log(str.substr(
阅读全文
摘要：前言 es6新增了Set数据结构，它允许你存储任何类型的唯一值，无论是原始值还是对象引用。这篇文章希望通过模拟实现一个Set来增加对它的理解。 原文链接 用在前面 实际工作和学习过程中，你可能也经常用Set来对数组做去重处理 let unique = (array) => { return [ ..
阅读全文
摘要：基于 node、express、mysql 实现的登录注册。 1.`首先在终端中 安装 node .` 2.`通过npm install express -g 命令全局安装 express`. 3.`然后通过express+项目名称，快速搭建一个项目` 4.`使用 express 初始化项目时 可以
阅读全文
摘要：react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。通过前端路由可以实现单页(SPA)应用,本文首先从前端路由的原理出发，详细介绍了前端路由原理的变迁。接着从re
阅读全文
摘要：PWA（Progressive Web App）是前端的大趋势，它能极大的加快前端页面的加载速度，得到近乎原生 app 的展示效果（其实难说）。PWA 其实是多种前端技术的组合，其中最重要的一个技术就是 service worker。 Service worker 在 MDN 上的说明： Servi
阅读全文
摘要：项目时间的估算对项目的成败至关重要。项目时间管理包括了项目按时完成所需的各个过程。但是，在实际项目中，经常出现项目延期，估算严重不准确的现象。 预估时间本身就很难。每个程序员的估计都会跟真正需要的时间有些差距。估计时间短了说明有些事情被忽略了(编译，测试，提交代码)。估计时间超了说明任务太大，难以理
阅读全文
摘要：效果预览 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/gdVObN 可交互视频 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https
阅读全文
摘要：github 上有趣又实用的前端项目（持续更新，欢迎补充） 1. reveal.js: 幻灯片展示框架 一个专门用来做 HTML 幻灯片的框架，支持 HTML 和 Markdown 语法。 github: https://github.com/hakimel/reveal.js demo: http
阅读全文
摘要：我是一个小白我是一个小白我是一个小白喷我吧,哈哈 写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端css样式复制下就结束了,没有考虑过原理是啥贴下代码 <head> <meta charset="UTF-8"> <title></title> <style> p { display: in
阅读全文
摘要：伪元素的margin值挤压主体元素解决 主体是两个p标签，需要再其左侧添加一个竖线，很常见的需求 目标 前提条件 1. 右侧的文字个数不固定 问题 1. 需要让before元素为`float:left`； 2. 文字个数不固定时，整个元素的宽度是auto，根据文字的内容来算，此时使用 :before
阅读全文
摘要：项目创建 vue init webpack mytest001 安装viewerjs npm install viewerjs 删掉生成的项目里面的helloWord.vue 修改路由 创建一个index.vue index.vue代码: <template> <div id="index"> <u
阅读全文
摘要：需求 在开发过程中遇到这么一个需求，h5页面需要将一个html dom转化成图片，便于用户保存。 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在github上的星星数分别是 dom-to-image 4k ⭐️ html2canvas 13.7k
阅读全文
摘要：react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v16.1.0 支持async await git地址 demo 安装 npm i react-upl
阅读全文
摘要：效果预览 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/OBgBJJ 可交互视频 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https
阅读全文
摘要：对话框（别称模态框，浮层）是web项目中用于用户交互的重要部分，我们最常见的就是js中 alert()，confirm()，但是这个对话框的不美观，也不能自定义样式，所以在开发的过程中，一般根据自己自己的需求造轮子或者使用第三方的。 对话框的组成 常见的弹出框形式： 位置：屏幕的左上角，右上角，左下
阅读全文
摘要：在web项目中，有一个很重的模块就是登陆/注册模块，这个模块的主体部分就是一个form表单，这个form表单包含两个重要input组（用户名/密码），每个input组都包含label和input，而关于 label+input 的布局方案多种多样，不同的设计师有不同的设计风格，不同的前端工程师又有不
阅读全文
摘要：前言：我司是一个教育公司，最近要做一个入学诊断的项目，领导让我开始搭建一套基于vue的H5的开发环境。在网上搜集很多的适配方案，最终还是选定flexible方案。选择它的原因很简单： 它的github的的star高达8k+，证明用的人还是很多的（也就反应你踩的坑，前人几乎都踩过）； 里面有对应的教程
阅读全文
摘要：网上搜索了很久Vue项目搭建指南，并没有找到写的比较符合心意的，所以打算自己撸一个指南，集合众家之所长(不善于排版，有点逼死强迫症，如果觉得写的有问题，可以留言斧正，觉得写的太差的，可以留言哪里差， 有不好的地方改，欢迎调侃)。 搭建项目前准备工作 首先你需要一台电脑，建议做开发的电脑最好是内存 8
阅读全文
摘要：怎样用更少的美术成本创造出更生动的动画效果？今天就为大家介绍一套开源的2D骨骼动画框架和工具——DragonBones，它包含了桌面骨骼动画制作工具DragonBonesPro和一套多语言版本的DragonBones骨骼动画库。 下面为大家介绍DragonBones的常用术语和使用方法。 一、Dra
阅读全文
摘要：起因 一天在群里面朋友问了一个这么一个问题： 看了之后自己梳理了一遍，在此和大家分享一下，这个就要从客户端开发的过程来讲了； 原生开发 在移动互联网刚兴起的时候，最初的开发模式是通过swift或java开发原生应用，有一些网页跳转的处理，ios使用UIWebView（ios8之后增加了WKWebVi
阅读全文
摘要：在2018年年初，jetbrains公司通过调查6000名开发者来了解开发者的生态状态，最近，调查结果终于整理完毕，以下是得出的结果。一、 日常工作1.1）流行语言：今年，使用最受欢迎、最常用与最有前途的语言相较去年没有变化，最受欢迎的语言是Java，最常使用的是JavaScript，最有前途的是G
阅读全文
摘要：Web SQL数据库API是一个独立的规范，在浏览器层面提供了本地对结构化数据的存储，已经被很多现代浏览器支持了。 我们通过一个简单的例子来了解下如何使用Web SQL API在浏览器端创建数据库表并存储数据。 <!doctype html> <html> <head> <script> var e
阅读全文
摘要：我之前曾经写过一篇文章使用Cordova将您的前端JavaScript应用打包成手机原生应用，介绍了如何使用Cordova框架将您的用JavaScript和HTML开发的前端应用打包成某个手机平台(比如Android，iOS）的原生应用。 那么，您也许会有一些需求，需要在您的前端应用里使用到手机平台
阅读全文
摘要：原文：The Intl.RelativeTimeFormat API 作者：Mathias Bynens(@mathias) 现代 Web 应用程序通常使用“昨天”，“42秒前”或“3个月”之类的短语，而不是完整的日期和时间戳。这种相对时间格式已经变得非常普遍，以至于几个流行的库都实现了本地化格式化
阅读全文
摘要：上一个总标题：https://segmentfault.com/a/11...提问：你有对象了吗？答：没有。笨！new一个不就好了吗！ 问题点：为什么我要理解new一个对象的过程？答：不理解这个过程，你就不知道为什么只是new了一下，这个实例就能使用原型的各种方法。 new一个对象的过程：需要经历4
阅读全文
摘要：缘起：实现一个业务场景时，因为某某某原因，不能让客户对某些按钮进行1秒点10次的骚操作，所以需要实现多个按钮快速点击只执行最后一次。 代码 <!DOCTYPE html> <html> <head> <title>快速点击只执行最后一次</title> <style type="text/css">
阅读全文
摘要：导言 最近发掘了一个特别happy的网页小游戏--MikuTap。打开之后沉迷了一下午，导致开发工作没做完差点就要删库跑路了，还好boss瞥了我一眼就没下文了。于是第二天我就继续沉迷，随着一阵抽搐，这个游戏索然无味之后，冷静的我决定用canvas和web audio开发出一个低配版MikuTap。
阅读全文
摘要：在信息时代，大家都想做互联网相关商业项目。因为互联网信息的覆盖面更广，传播速度更快。互联网深入各行各业，对人们生活的影响越来越明显，互联网+已经成为不可逆转的大趋势。 当下，随着移动互联网的快速发展，如何获取移动的端的流量就成为商家能够实现快速盈利的一个切入点。今年在热议上中上线的小程序是未来10年
阅读全文
摘要：在现在前端圈大行其道的 React 和 Vue 中，可复用的组件可能是他们大受欢迎的原因之一， 在 HT 的产品中也有组件的概念，不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去实现的， 也就是说如果你有过使用 Canvas 的开发经验你就可以来封装自己的组件。 下面我以一个进
阅读全文
摘要：上个Q做了一波web性能优化,积累了一点点经验 记录分享一下。 先分享一个比较常用的接口前置 的优化方案吧 优化前首屏秒开大约在40%左右 首屏秒开大约提高了25% 先发一张优化成果图 前置原因 对于前后端分离的页面来说,一般的加载方式都是如下: 请求html页面 -> 浏览器解析html -> 请
阅读全文
摘要：flask_bootstrap Bootstrap 是 Twitter 开发的一个开源框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且这些网页还能兼容所有现代 Web 浏览器. Bootstrap 是客户端框架，因此不会直接涉及服务器。服务器需要做的只是提供引用了 Bootstrap
阅读全文
摘要：微信搜索小程序 查一查物流，或者扫一扫下图，欢迎来回复分享哦。 希望这个功能可以帮到你。简介地址：点击这里 快递接口用的快递100的api，不过有次数限制。 小程序用wepy框架开发的，方便快捷，写法类似vue，支持es6相关操作，已可以引入npm包，不过在微信开发者工具有以下注意事项。 es6:
阅读全文
摘要：先说一下我的另一博客地址: https://home.cnblogs.com/u/bllx/ FullCalendar的选择 前段时间，一直在开发考勤系统，当时为满足设计的需求，选了好几个插件，最后决定采用Fullcanlendar的插件。感觉这个插件可以满足现阶段的功能开发需求；因为设计图是日历块
阅读全文
摘要：网页显示数据库信息 使用我们刚学习的flask_sqlalchemy，在网页中显示数据库表中的数据。在开始运行程序前，确保数据库中执行过创建表和创建用户的操作，详见链接描述。 # 模板文件templates/list.html {% extends 'base.html' %} {% block t
阅读全文
摘要：添加分页功能 第一步：是对视图函数的改写，通过查询数据库数据，进行分页显示 # 修改清单显示的视图函数 @app.route('/list/') @app.route('/list/<int:page>') def todo_list(page=1): todos = Todo.query.pagi
阅读全文
摘要：本文是架构师 2018-10 月刊的卷首语，归纳于自笔者的技术之路系列文章，也是对 现代 Web 开发基础与工程实践 中的内容提点总结。 数据浪潮之间的前端工程师 十年来，波澜壮阔的移动互联网浪潮促进了 Web 技术的迅猛发展，随着浏览器性能、网络带宽等基础设施的提升，Web 也能够承载起包含复杂交
阅读全文
摘要：概述 最近，有客户向我们请求开发一个前端下拉控件，需求是显示了一个列表，其中包含可由用户单独选择的项目控件，该控件将在下拉列表中显示多选TreeView（树形图）。 如今WijmoJS已经实现了该控件——DropDownTree，本文将主要介绍如何创建自定义DropDownTree控件以及其源代码。
阅读全文
摘要：吐槽 今天，在vue中遇到 复杂表格的渲染 ，需要合并表头th的单元格，且合并单元格的那列的表头数据是动态数据，也就是不知道会有多少个表头列，而这几个表头列还分了好几个子表头。 这个需求在js里用Juicer模板很好做的，思路我是有的，但就是对于vue，我也算初学者，很多概念不是很懂，这就限制了思路
阅读全文
摘要：一·浏览器及浏览器内核 1.常见的浏览器 （1）IE浏览器 IE是微软公司旗下浏览器，是目国内用户量最多的浏览器。IE诞生于1994年，当时微软为了对抗市场份额占据将近百分之九十的网景Netscape Navigator，于是在Windows中开发了自己的浏览器Internet Explorer，自
阅读全文
摘要：首先安装mint-ui组件库 npm install mint-ui 在main.js中引入mint-ui和样式 import 'mint-ui/lib/style.css' import MintUi from 'mint-ui' Vue.use(MintUi) 然后在组件中引入lodeMore
阅读全文
摘要：场景1 在原生app中经常会使用到H5页面，比如说电商中的活动页，一些电商中的详情页，等等...这些页面都有一个特点，那就是在未来修改的可能性，和一次性的几率特别的大。所以用H5的页面是最睿智的一种选择。 一旦使用了H5那么就少不了和原生开发的一些交互（Android, IOS）如下的方案能够帮助你
阅读全文
摘要：写在前面 本期，跟大家分享一下如何在自己的手机上查看自己开发的app，彻底搞懂如何使用手机查看开发的app。首先，大家需要准备以下几样东西。 1、一台电脑。 2、一部手机。 3、还有一个自己开发的项目。 4、这个最重要，因为需要依托于这个插件。叫做草料二维码生成器，可以直接通过网址来生成二维码。 5
阅读全文
摘要：使用iview中的table表格时避免不了使用render函数渲染自定义内容，或者渲染组件。但是在正常使用时出现了props传值无法识别， 按照官网介绍使用props如下： render: (h, params) => { return h('div', [ h('Input', { props:
阅读全文
摘要：从很久之前就已经接触过了angularjs了，当时就已经了解到，angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后，再接触了vue.js，当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面。今天，就我们就来一步步解析vue.js响应式的原理，并且来实现一个简单的demo。
阅读全文
摘要：React中Ref 的使用 React v16.6.3 在典型的React数据流中，props是父组件与其子组件交互的唯一方式。要修改子项，请使用new props 重新呈现它。但是，在某些情况下，需要在典型数据流之外强制修改子项。要修改的子项可以是React组件的实例，也可以是DOM元素。对于这两
阅读全文
摘要：X-BUILD一套基于Webpack(v4.21.0)快速搭建H5场景开发环境的脚手架，只需要几分钟的时间就可以运行起来。X-BUILD是针对H5开发的一套自动化构建工具，致力于提升开发效率，减小开发难度。它可以让你在没有任何构建工具（例如 grunt 、 gulp 或 webpack 等工具）配置
阅读全文
摘要：Texture Merger 可将零散纹理拼合为整图，同时也可以解析SWF、GIF动画，制作Egret位图文本，导出可供Egret使用的配置文件，其纹理集制作功能在小游戏开发中可以起到降低小游戏包体的作用，是开发者们最为喜欢的靠谱软件开发工具之一。 下面就为大家介绍Texture Merger的使用
阅读全文
摘要：一个vue阅读器项目，目前已升级到2.0，阅读器支持横向分页并滑动翻页（没有动画，需要动画的可以自己设置，增加transitionDuration即可） 技术栈 vue全家桶+mint-ui github Fakin-Reader 部署 # install dependencies npm inst
阅读全文
摘要：1. 游戏访问连接 点击跳转 2. 九宫格拼图原理 图例原理： 上图的九宫格图例，每个格子都有一个(x,y)的坐标，假如格子9是空白格子，怎么知道6和8是它的直接相邻格子呢。这时候就体现出格子坐标(x,y)的作用了， 使用公式：|(x6 - x9)| + |(y6 - y9)| = 1，将空白格子9
阅读全文
摘要：react 移动端 兼容性问题和一些小细节 使用 ES6 的浏览器兼容性问题 react 对低版本的安卓webview 兼容性 iOS下 fixed与软键盘的问题 onClick 阻止冒泡 meta对于移动端的一些特殊属性 页面禁止复制、选中文本 1.使用 ES6 的浏览器兼容性问题 由于 Babe
阅读全文
摘要：一直觉得网易云音乐的用户体验是很不错的，很早就注意到了里面的鲸鱼音效，如下图，就是一个环形的跟着音乐节拍跳动的特效。 gif动图可能效果不太理想，可以直接在手机上体验 身为前端凭着本能的好奇心和探索心当然会研究一番，如何在页面上实现该效果？ 1.AudioContext 其实这类动效原理并不复杂，你
阅读全文
摘要：1.什么是跨域？ 浏览器对于javascript的同源策略的限制,例如a.com下面的js不能调用b.com中的js,对象或数据(因为a.com和b.com是不同域),所以跨域就出现了。同域的概念又是什么呢?所谓的同源是指，域名、协议、端口均为相同。 2.如何解决跨域？ JSONP:JSONP 是一
阅读全文
