Web
关注
分享
扫一扫
文章平均质量分 92
主要介绍 Web 前端开发中遇到的问题或者有趣的知识
FantasticLBP
95后 iOS 资深工程师，关注大前端领域的技术栈。组件化、模块化、多端融合能力、动态化、架构设计、workflow、ci、cd 脚本等。
如果想和我交流，请联系我微博： http://weibo.com/u/3194053975
展开
-
从 Flutter 和前端角度出发，聊聊单线程模型下如何保证 UI 流畅性
文章主题是“单线程模型下如何保证 UI 的流畅性”。该话题针对的是 Flutter 性能原理展开的，但是 dart 语言就是 js 的延伸，很多概念和机制都是一样的。具体不细聊。此外 js 也是单线程模型，在界面展示和 IO 等方面和 dart 类似。所以结合对比讲一下，帮助梳理和类比，更加容易掌握本文的主题，和知识的横向拓展。先从前端角度出发，分析下 event loop 和事件队列模型。再从 Flutter 层出发聊聊 dart 侧的事件队列和同步异步任务之间的关系。一、单线程模型的设计1. .原创 2021-06-21 07:37:56 · 332 阅读 · 0 评论 -
Electron：PC 端多端融合方案
每天都要写第二天的 todoList。有一天在写的时候突然想到，为了让自己清楚知道自己需要做啥、做了多少、还剩多少没做，想写一个电脑端程序，在技术选型的时候就选了 electron。一、 方案选型3天时间写了个 PC 端应用程序。先看看结果吧为什么要选 electron 作为 pc 端开发方案？史前时代，以 MFC 为代表的技术栈，开发效率较低，维护成本高。后来使用 QT 技术...原创 2020-05-04 18:53:45 · 2122 阅读 · 0 评论 -
规范化团队 git 提交信息
同一个工程项目，为了方便管理，git 的 commit 信息最好按照一定的格式规范，以便在需要的时候方便使用。什么是方便的时候，比如出现了一个线上 bug，所以需要回滚操作，知道了提交信息可以方便的定位问题。代码 review 的时候也知道了该次 commit 干了什么，所以 commit 标准化好处很多，不再举例。实现可以马上想到的是利用 shell 结合 git hook 实现在 g...原创 2020-04-02 02:44:00 · 267 阅读 · 0 评论 -
前端模块化演进之路
有这样一个场景，客户端运行很久，但是法务部和数据部需要收集用户的一些信息，这些信息收集好之后需要进行相应的数据处理，之后上报到服务端。客户端提供一个纯粹的 JS 执行引擎，不需要 WebView 容器。iOS 端有成熟的 JavaScriptCore、Android 可以使用 V8 引擎。这样一个引擎配套有一个 SDK，访问 Native 的基础能力和数据运算能力，可以看成是一个阉割版的 Hybr...原创 2020-04-02 02:10:26 · 244 阅读 · 0 评论 -
富文本编辑器原理探索
经常在做企业网站的管理系统的时候需要用到富文本编辑器，之前基本上都是直接去 npm 或者 github 上面搜找一些排名考前或者 readme 写的好的库，直接拿来用。万变不离其宗，是时候探索下本质了。contenteditable要想实现富文本需要开启“编辑”的能力，系统提供了一个 api：contenteditable 允许我们对内容进行编辑。下面是来自 MDN 的官方解释。The...原创 2020-04-02 02:08:22 · 525 阅读 · 0 评论 -
Vue 小结
本次串讲的主要目的在于给我们移动端的同学揭秘下目前前端开发的现状，和一些典型框架或者说是库的产生背景、以及设计思想和解决了什么样的问题。以 Vue.js 为例。此次讲解围绕以下几个方面展开：MV* 框架模式Vue.js 的概述Vue MVVM 的实现Vue 与 React 的对比有 Vue 基础如何快速上手 WeexMV* 框架模式历史最早期的 Web 开发是洪荒时代，开发...原创 2020-04-02 02:07:06 · 346 阅读 · 0 评论 -
大前端动画
大前端开发中经常会遇到动画的开发，那么什么是动画？在物理学中运动就是研究物体在时间维度和空间维度上改变的现象，所以动画也一样，动画主要研究2个因素，发生运动物体的时间和空间。Web前端开发中的动画在 Web 前端开发中实现动画有2种方式。要么依靠 CSS 实现动画，要么依靠 JS 控制实现动画。CSS 实现动画首先要说 CSS 中的4个概念：animation、transition、t...原创 2020-04-02 02:04:32 · 217 阅读 · 0 评论 -
Chrome 调试技巧
写在前面Chrome 有非常强大的调试功能本文包括浏览器调试，不包括web移动端调试。本文调试均在chrome浏览器进行alert这个不用多说了，不言自明console基本输出想必大家都在用console.log在控制台输出点东西，其实console还有其它的方法：console.log("打印字符串");//在控制台打印自定义字符串console.error("我是个错误...原创 2020-04-02 02:03:29 · 193 阅读 · 0 评论 -
动画控制的另一种技术
在 HTML5 的时代里我们可以通过 css3 的 animation 和 kerframes 配合使用动画；也可以使用 css 的 transform 控制动画；在 JS 里面我们通常用 setTimeout 和 setInterval 来控制动画时间。setTimeout 和 setInterval 对于控制动画时间不是很准确，因为它是靠电脑的刷新频率。并且当浏览器切换到其他页面或者最小化的...原创 2020-04-02 02:02:27 · 115 阅读 · 0 评论 -
webpack 从入门到精通
小实验我们一步步打包一个小项目看看 webpack 是如何工作的。先写一个 hello.jsfunction hello(messgae){ alert(messgae);}然后对其打包，发现终端报错。解决后知道在 webpack 2.0 的时候，我们打包一个 js 文件可能是这样的，比如将 hello.js 打包为 hello.bundle.js 。webpack he...原创 2020-04-02 01:53:40 · 327 阅读 · 0 评论 -
基于 Web 的反爬虫技术方案
对于内容型的公司，数据的安全性很重要。对于内容公司来说，数据的重要性不言而喻。比如你一个做在线教育的平台，题目的数据很重要吧，但是被别人通过爬虫技术全部爬走了？如果核心竞争力都被拿走了，那就是凉凉。再比说有个独立开发者想抄袭你的产品，通过抓包和爬虫手段将你核心的数据拿走，然后短期内做个网站和 App，短期内成为你的劲敌。一、爬虫手段目前爬虫技术都是从渲染好的 html 页面直接找到感兴趣的...原创 2020-04-02 01:51:59 · 1760 阅读 · 2 评论 -
h5自定义对象
一、方式一在很早以前我们自定义元素的属性要通过 user-defined-attribute="value"的方式来设置自己需要的属性设置自定义属性<h1 user-defined-attribute="share">杭城小刘</h1>获取自定义属性document.getElementsByTagName("h1")[0].getAttribute("user...原创 2020-04-02 01:49:48 · 381 阅读 · 0 评论 -
Vue 技术的小技巧
Vue 项目开发中经常遇到事件阻止冒泡的需求。在传统的写法上就是调用 event.preventDefault()、event.stopPropagation()。尽管我们可以在 methods 里面这样写，但是更好的规范是：methods 只做数据的逻辑处理，而不是去处理 DOM 相关的细节（阻止事件冒泡）为了解决这个问题， Vue 为 v-on 提供了事件修饰符。通过.表示的指令后...原创 2020-03-31 21:55:32 · 368 阅读 · 0 评论 -
CSS 实现埋点统计
当一个网站或者 App 的规模达到一定程度，需要分析用户在 App 或者网站的相应操作，则需要埋点统计用户行为，这个不用多说，具体实现有 JS 脚本写好埋点事件并调接口，今天 get 到一种新的埋点统计方式保证耳目一新。下面代码简单示范一下。//index.html<!DOCTYPE html><html><head lang="en"> ...原创 2020-03-31 21:54:21 · 350 阅读 · 0 评论 -
正则表达式
\d ：匹配一个数字\w : 匹配任意一个字母或数字. : 可以匹配任意字符串* : 可以匹配任意个字符（包括0个）+: 至少一个字符? : 表示0个或1个字符{n} :表示n个字符{n-m} : 表示n-m个字符[ ] ：表示范围[0-9a-zA-Z\_] : 可以匹配一个数字、字母或者下划线[0-9a-zA-Z\_]+: 可以匹配...原创 2020-03-31 21:53:26 · 131 阅读 · 0 评论 -
last-child 与 last-of-type
在做 Hybrid 的时候就使用到 NSURLProtocol，对于网络监控依旧可以使用它，所以本文就总结下 NSURLProtocol 的应用场景和如何用一、 NSURLProtocol 是什么NSURLProtocol 是 Foundation 框架中 URL Loading System 的一部分。它可以让开发者可以在不修改应用内原始请求代码的情况下，去改变 URL 加载的全部细节。...原创 2020-03-31 21:45:36 · 222 阅读 · 0 评论