17 小时前 / semlinker
近期我们团队的小伙伴小池同学分享了 “BetterScroll 2.0 发布：精益求精，与你同行” 这篇文章到团队内部群，看到了 插件化 的架构设计，阿宝哥突然来了兴趣，因为之前阿宝哥在团队内部也做过相关的分享。既然已经来了兴趣，那就决定开启 BetterScroll 2.0 源码的学习之旅。 接下来本文的重心将围绕 插件化 的架构设计展开，不过在分析 BetterScroll 2.0 插件化架构之前，我们先来简单了解一下 BetterScroll。 一、BetterScroll 简介 BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。
2 天前 / 冷星1024
王君，微医云服务团队前端工程师，一个切菜比切图还快的码农。 烹饪有菜谱，游戏有攻略，各个行业都存在一些快捷又高效的“套路”。而编程的“套路”就是设计模式。 提到设计模式，相信知道的同学都会脱口而出，五大基本原则（SOLID）和 23 种设计模式。SOLID 所指的五大基本原则分别是：单一功能原则、开放封闭原则、里式替换原则、接口隔离原则和依赖反转原则。逐字逐句诠释这五大基本原则违背了写这篇文章的初衷，引用社区大佬的理解，SOLID 可以简单概括为六个字，即“高内聚，低耦合”： 高层模块不依赖底层模块，即为依赖反转原则。
4 天前 / 冷星1024
往期推荐在线 IDE 开发入门之从零实现一个在线代码编辑器基于 React+Koa 实现一个 h5 页面可视化编辑器－Dooring 深度剖析 github star 数 15.1k 的开源项目 redux-thunkTS 核心知识点总结及项目实战案例分析前言笔者之前花了大量的时间在思考如何设计和实现 H5 页面可视化编辑器 H5-Dooring，从第一个版本到现在经历了很多次版本迭代和优化，也收到了很多宝贵的建议，目前刚好完成了移动端数据可视化的基本设计和落地方案，在这里特地总结和复盘一下。
6 天前 / qileilove
测试示例结论#探索更完整的前端测试策略 本文假设我们正在持续开发一个相对较大的前端项目，并且我们采用了域驱动的设计以及面向对象的编程模型。前端业务逻辑被划分为域模块/UI组件。因此，我们可能需要一个更完整的测试策略，以确保这样一个前端项目。 #通用前端测试 无论是传统测试模型还是连续交付模型，我们通常定义以下三种类型的测试： #E2E 端到端测试包括确保应用程序的集成组件如预期的功能。在真实的场景中测试整个应用程序，例如与数据库、网络、硬件和其他应用程序通信。 #集成测试 集成测试是软件开发生命周期的关键策略。
8 天前 / OPPO互联网技术
babel 插件、webpack 插件、vue-cli 插件，为啥这么多的优秀框架都是使用插件系统？插件化架构是什么？带来了什么好处？可以应用到什么场景呢？ 1. 插件化架构定义插件化架构又称微核架构，指的是软件的内核相对较小，主要功能和业务逻辑都通过插件实现。插件化架构一般有两个核心的概念：内核和插件。 内核（pluginCore）通常只包含系统运行的最小功能； 插件（plugin）则是互相独立的模块，一般会提供单一的功能。 内核一般会将要完成的所有业务进行抽象，抽象出最小粒度的基础接口，供插件方来调用。这样，插件开发的效率将会极大的提高。
9 天前 / 冯海涛
当我的团队进行税务系统模块开发的时候，我发现他们需要花费 80% 的时间去解决计算问题，尤其体现在表格（Grid）中的计算，这些时间花在： 写前台 js 代码（因为用户在表格中的输入会影响其他单元格，所以需要即时将运算后的新值呈现给用户看）写后台代码（因为用户对表格数据的更改会影响其他表格，所以要在用户点击保存时更新受影响表格的数据）实施修改计算方法，导致开发者需要修改代码于是我调研了税务其他模块的功能，发现税务系统大量使用表格控件，而其中或多或少都会涉及到计算问题。而处理计算的方法，都是采用硬编码。
9 天前 / 美团技术团队
总第 410 篇 2020 年 第 34 篇 Flutter 作为一种全新的响应式、跨平台、高性能的移动开发框架，在性能、稳定性和多端体验一致上都有着较好的表现，自开源以来，已经受到越来越多开发者的喜爱。 但是，Flutter 的引入往往带来包体积的增大，给很多研发团队带来了很大的困扰。美团外卖前端团队对 Flutter 的包大小问题进行了调研和实践，设计并实现了一套基于动态下发的包大小优化方案，希望对从事 Flutter 开发相关的同学能够带来一些启发或者帮助。一、背景 随着 Flutter 框架的不断发展和完善，业内越来越多的团队开始尝试并落地 Flutter 技术。
18 天前 / vivo互联网技术
【背景】 一年前 vivo 商城还是以 Java 为技术核心，前后台一起，Java 既要负责服务、数据库，也要负责页面的渲染。在早期这种开发模式也能够很好的运行。然而随着业务迭代的加快，前端技术的发展，这种开发模式的弊端越来越明显。主要突出的有以下两个方面： 前端技术栈架构繁杂且陈旧，导致迭代速度很难提升 到 2018 年 12 月，整个商城前端系统随着不同需求叠加积累的原因，造成了不同页面使用不同的技术，比较典型的有 jQuery，Vue，FreeMarker，artTemplate，这些不同的技术栈从开发来看，相同的内容，在不同的页面可能使用不同的技术栈...
27 天前 / Ryan众乐
导语：前端智能化，就是通过 AI/CV 技术，使前端工具链具备理解能力，进而辅助开发提升研发效率，比如实现基于设计稿智能布局和组件智能识别等。 本文要介绍的是我在前端智能化的实践：通过计算机视觉技术实现自动提取图片中的 UI 样式的能力。 具体效果如上图，当用户框选图片中包含组件的区域，算法能准确定位组件位置，并有效识别组件的 UI 样式。 样式提取方案本文基于 OpenCV-Python 实现图像的样式检测，主要分为三步：1. 从图片检测并分离组件区域；2. 基于组件区域进行形状检测；3. 对符合规则形状的组件进行样式计算。
30 天前 / 冷星1024
高清屏中 1px 线问题在移动端 web 开发中，UI 设计稿中设置边框为 1 像素，前端在开发过程中如果出现 border:1px，测试会发现在 retina 屏机型中，1px 会比较粗，即是较经典的移动端 1px 像素问题。 为什么高清屏下 1px 更宽高清屏（retina 屏）是指高 dpr 的设备，其物理像素的密度更大。又分为有两倍屏，三倍屏。 dpr:物理像素 /css 像素 在普通屏，1 个 css 像素对应 1 个物理像素；2 倍屏中，一个 css 像素对应 4 个物理像素；三倍屏中则是 9 个。 按照这样的置换规则后一张相同的图片在不同的设备上才会显示相同的大小。
35 天前 / sammffl
原文链接：appendto.com 我一直在关注最有趣的 Javascript 博客 （这是我工作的一部分 https://weekendjs.com/）。这里面有许多有趣的博客，超乎你的想象。有十多年前就开始的博客，也有一些相对较新的博客。一些博主是 Javascript 明星更多的是像你我这样的普通开发人员。 某些博客关注在某个具体的生态（像是 Angular、React 或者 Vue)， 还有一些关注更普遍的用法。 令人兴奋的是有真材实料的优质博客一年比一年多。并且有望继续保持下去。 有哪些人会在列表上：只有哪些经常写博客的人（至少每个月一篇）。
35 天前 / 张欢
Dennis Gaebel 是一名设计技术专家和作家，他热爱开源、CSS 架构、SVG、排版、提案、交互和基于模式的设计。 Webpack 5 的新特性阅读 1689 于 2019 年 2 月 6 日 6 分 如果您正在打包前端代码，很可能使用一个工具来实现。 这个工具极有可能是 Webpack。在本文中，我将分享 Webpack 5 的一些新功能， 以及在日常工作中继续使用它时应该注意的事项。 这个新版本包含了大量的新特性，虽然我不会详细介绍每个新特性，但是我将与您分享核心团队列出的一些重要特性。
39 天前 / Ryan众乐
写在最前面（不看也不会少一个亿） 最开始的一个小需求前两天项目中有个小需求：前端下载后台小哥返回的二进制流文件。 起初接到这个需求时，我感觉这很简单啊（虽然我不会，但可以百度啊，） 然后就写出了如下的代码： letblob=newBlob([res.data]); letfileName=`Cosen.csv`; if(window.navigator.msSaveOrOpenBlob){ navigator.msSaveBlob(blob,fileName); }else{ letlink=document.createElement("a"); letevt=document.createEvent("HTMLEvents"); evt.initEvent("click",false,false); link.href=URL.createObjectURL(blob); link.download=fileName...
39 天前 / Ryan众乐
四。坑点总结五。gitlab-ci 进阶 5.1 YML 的片段复用和模块化 5.2 gitlab-ci 提供的其他配置关键字一。概念介绍 1.1 gitlab-ci && 自动化部署工具的运行机制以 gitlab-ci 为例： (1) 通过在项目根目录下配置。gitlab-ci.yml 文件，可以控制 ci 流程的不同阶段，例如 install/ 检查 / 编译 / 部署服务器。gitlab 平台会扫描。gitlab-ci.yml 文件，并据此处理 ci 流程 (2) ci 流程在每次团队成员 push/merge 后之后触发。每当你 push/merge 一次，gitlab-ci 都会检查项目下有没有。
39 天前 / 开发者头条
同样是做前端，有的人工作 5 年工资没变化，有的人工作 2 年就已经年薪 20W。 这个现象或许前几年还不明显，但随着近几年前端技术疯了一般的快速发展，前端的代码逻辑逐渐变得复杂，人才水平的分化也越来越明显。 前端的入行门槛很低，即便是刚毕业的实习生，只要掌握了前端框架的基本用法，就能达到做项目的能力。许多公司对于前端的能力要求也很低，好像只需要懂一些 JS，会一般的 HTML+CSS 就可以了。 但前端想要做到高薪却很难，不像后端有着明确的发展路线，从支持几百人的访问，到支持几百万人的访问，薪资的成长清晰可见。