从北京回到二三线城市，你的前端什么水平？；Ract vs Angular vs Vue.js——2019 该选谁？（更新版）；HTML5 容器入门解析：支付宝 Hybrid 方案原理与实战；「中高级前端」高性能渲染十万条数据；不会手写vue-cli脚手架，leader竟要辞退我；前端知识点之JavaScript系列1-20；JS模拟浏览器全局搜索功能实现；用Vue实现一款属于自己的树形组件
-
从北京回到二三线城市，你的前端什么水平？ 昨天周末，土哥回了趟农村老家，暂别了城市的喧嚣。 回到家的晚上，我妈跟我闲聊了一会儿，说我家附近一个邻居，她家儿子之前在北京从事编程工作，现在想回太原发展。知道我也是搞软件开发的，就串门来我家打听情况，顺便唠唠家常，说回来也好，离家近点，父母也放心。至于挣多挣少，看个人能力。 我妈对这个不太了…
-
Ract vs Angular vs Vue.js——2019 该选谁？（更新版） 我们在 2018 年分布了一篇比较 React 和 Angular 的文章，而在 2019 年，由于每个框架的快速版本迭代，我们将再次比较两者以及市场上的新玩家 Vue.js，分享每个前端框架的优缺点，从而帮助开发者为产品开发中的每个单独案例找到最适合他们开发需求的正确选择。 之前我们发布了一篇 文章 ，比较了 Angular 与 React。…
-
HTML5 容器入门解析：支付宝 Hybrid 方案原理与实战 根据公开的 2018 年移动互联网行业分析报告，目前支付宝的月活跃用户已经超过 QQ ，成为国内第二大 App。 支付宝一开始仅仅只是一个单体应用的工具型 App，让用户可以在手机完成支付宝相关的业务查询和操作。2013 年后，支付宝逐步转型为平台型 App， 平台型 App 具有服务化、模块化、工具组件化的特点。这…
-
「中高级前端」高性能渲染十万条数据 在实际工作中，我们很少会遇到一次性需要向页面中插入数十万条数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。 最粗暴的做法（一次性渲染） <ul id="container"></ul> 复制代码 // 记录任务开…
-
不会手写vue-cli脚手架，leader竟要辞退我 遥想当年，土哥入行之初，因为不会从零手写一个适合公司项目vue-cli脚手架，差点被leader劝退。 还记得那个时候，我还是个工作没几年的前端新人，在公司搭建vue项目也是从一个npm install vue-cli -g的命令行开始的。 傻瓜式操作，几条命令轻松搞定。 我觉得，官方提供的vue-cli脚手架很友好，不用想vue+webpack的…
-
前端知识点之JavaScript系列1-20 答案是肯定的，那为什么不是 呢？ 知识 首先看看官网上： paserInt的用法 parseInt() 函数解析一个字符串参数，通过基数解析，返回一个整数或者NAN parseInt() 的两个参数分别是string和radix string就是要解析的字符串，radix就是基数 注意： 基数不在2-36之间，则返回值就是NAN map …
-
JS模拟浏览器全局搜索功能实现 需要像浏览器的全局搜索一样，搜索指定模块的对应值，然后将匹配到的内容添加背景颜色等。 思路 需要取到当前指定区域的所有内容 然后在取到的内容中找到搜索的内容加上对应的背景颜色 最后在将修改后的内容渲染到页面上 实现 利用innerHTML取到对应模块的内容 编写对应的正则表达式来匹配搜索的内容 …
-
用Vue实现一款属于自己的树形组件 当你首次进入这个界面的时候 它会给我们展示的是一级的内容 点击一级就展开二级 点击二级就展示下一级的内容 如果有子集的话下面会有个小箭头 如果没有子集的话就没有小箭头 这是一个细节 当点击展开全部子集的时候 当再次点击合上然后再次点击展开 还是一次性展开全部子集在我们页面上 性能优化 我们要求我…
-
面试官：请你谈一谈vue的双向绑定原理（面试简答三） Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新。 具体说一下Object.defineProperty： Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。 Object.defineProperty(o…
-
2019最新web前端学习路线：前端从初级入门到入坟到高级进阶 2019最新web前端学习路线：从初级入门到入坟到高级进阶 我的前端学习路线-从初级入门到高级架构 初中级阶段 一、前端基础阶段 HTML CSS JavaScript DOM BOM 二、前端中级阶段 HTML5 CSS3 bootstarp Canvas JQuery 三、后台技术阶段 Node.js MongoDB Koa EJS 四…
-
每天一点网站优化之：给vue应用添加骨架屏 骨架屏是在页面数据尚未加载完成前先给用户展示出页面的大致结构, 解决了js加载时间过长页面白页的问题，同时，相对于loading动画，骨架屏的过渡效果更加平滑，用户体验更好。 骨架屏可以由开发人员手动编写，这篇文章中我们使用chrome推出的Node库puppeteer，自动为页面生成相应的骨架屏。 这篇文章主要分为以下几点 …
-
Web 应用程序测试完整指南（如何测试网站） 文本 什么是Web测试? Web测试的类型 测试网站时要考虑的要点 Web测试常见问题解答 结论 Web应用程序测试完整指南（如何测试网站） 完整的Web应用程序测试指南：如何测试网站 我们都…
-
纯js-普通轮播图、卡片式轮播图 卡片式轮播图 普通轮播图 功能： * 可控制是否自动轮播 * 左右箭头切换上一张，下一张，节流处理 * 鼠标放到箭头上，图片停止自动轮播，鼠标移开接着继续播放 * 点击小圆点可跳转到对应顺序的图片 * 移动端可左滑、右滑切换 复制代码 普通轮播图-演示 普通轮播图-源码 思路： 如…
-
NestJs学习之旅(9)——拦截器 欢迎持续关注 NestJs之旅 系列文章 拦截器是一个实现了 NestInterceptor 接口且被 @Injectable 装饰器修饰的类。 拦截器是基于AOP编程思想的一种应用，以下是常用的功能： 在方法执行之前或之后执行 额外的逻辑 ，这些逻辑一般不属于业务的一部分 转换 函数执行结果 转换 函数执行…
-
把 WebAssembly 用于提升速度和代码重用有这样一种技术，可以把用高级语言编写的非 Web 程序转换成为 Web 准备的二进制模块，而无需对 Web 程序的源代码进行任何更改即可完成这种转换。浏览器可以有效地下载新翻译的模块并在沙箱中执行。执行的 Web 模…
-
Three.js开发指南-Scene 在Three.js中最基础的就是THREE.Scene(建立一个场景)，我们拥有一个场景后才能往场景里添加摄像机、对象和光源，让用户能看到东西在浏览器上。 THREE.Sence 对象有时候被称为场景图，可以用来保存所有图形场景的必要信息。在Three.js中，这意味这 THREE.Sence 保存所有对象、光源和渲染所需要的其他对象。有趣的是…
-
重读 Redux 源码的感悟 大道至简的createStore 相信80%的人都能看懂createStore.js里80%代码(剩下的20%估计就是中间件相关的代码了)。软件开发里仍然是大道至简，因为它讲究的是高内聚，内耦合，即便是内部无比复杂，但是暴露给别人看到一定是简单的一面。 其实整个Redux源码总共也就9个文件，还算上了凑数的index.js。但它所蕴含…
-
前端代码封装 首先说明，前端架构代码封装，不是说设计模式，而是封装约定俗成的规矩， 这个规矩多半是由编程语言缺点造成的 。 1. 使用者和开发者区别 先看例子 class ClassName { // 开发者的方法名 static _getBase64ByCb (file, cb) { // todo } // 使用者的方法名 getBase64 () { const file = this.file let ba…
-
手摸手 Webpack 多入口配置实践最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这…
-
canvas生成带二维码的海报踩坑绘制渲染的时候图像不显示：是因为图片异步加载，所以canvas的操作需要放在onload事件中，否则图片会不显示，因为图片不止一张，建议放在promise中，用async，await调用
-
JavaScript：如何获取某一天所在的星期我们这里来获取今天所在星期的始末日期，我们可以通过(new Date).getDay()来获取今天是星期几，然后再通过这个减去或者加上一定的天数，就是这个星期的开始日期和结束日期。
-
Faster than faster——RN新架构中的JavaScript Interface 随着Flutter等新框架的崛起，React Native正经受着越来越大的挑战，RN性能上的瓶颈愈发明显。为了在与Flutter等框架的对抗中保持竞争力，RN酝酿在架构上进行了一次非常大的升级。于是，在一篇ReactConf 2018的演讲 React Native’s New Architecture 中，RN官方向我们引出了三个新的概念：JSI，Fabric和TurboModule。随后…
-
如何在 Laravel 中正确地返回 HTTP 状态码写 API 时其中有一个重要的地方是更好的处理响应状态码。以前，我一般会使用不常用的 Integer 类型数字作为 HTTP 状态码 。看下面的这个例子：
-
在生产环境中使用原生JavaScript模块 原文地址： philipwalton.com/articles/us… 原文作者：PHILIP WALTON 译者：龚亮 ，校对：刘辉 声明：本翻译仅做学习交流使用，转载请注明来源 两年前，我写了一篇有关module/nomodule技术的文章，这项技术允许你在编写ES2015+代码时，使用打包器和转换器生成两个版本的代码库，一个具有现代语法的版本（通过 …
-
Javascript抽象语法树下篇(实践篇) 需要一个解析器，将代码转换为AST 需要一个遍历器，能够遍历AST,并能够方便的对AST节点进行增删改查等操作 需要一个代码生成器，能够将AST转换为代码 esprima与babel 常用的满足上述3个要点的工具包有两个，一个是 esprima ，一个是 babel esprima相关包及使用如下 const esprima = require(‘esprima…
-
Javascript抽象语法树上篇(基础篇) 日常工作中，我们会碰到js代码解析的场景，比如分析代码中require了哪些包，有些什么关键API调用，大部分情况使用正则表达式来处理，可一旦场景复杂，或者依赖于代码上下文时，正则就很难处理了，这时候就要用到抽象语法树。常见的uglify、eslint、babel、webpack等等都是基于抽象语法树来处理的，如此强大，有必要好好…
-
说说 HTTP 与 TCP 的关系 HTTP与TCP的关系？ HTTP是应用层协议。TCP是传输层协议。HTTP是建立在TCP协议之上。 完成一次http请求到底发生了什么？ 在http1.0阶段，完成一次http请求之后，就会断开http连接，同时TCP连接也会断开。 所以每次HTTP请求都会先建立TCP连接，然后建立HTTP连接。这样代价有些大，也不符合…
-
一周 GitHub 开源项目推荐：哔哩哔哩、阿里巴巴、滴滴…… 一周 GitHub 开源项目推荐 点击链接或图片即可阅读 喜欢请分享到朋友圈哦 Levin：滴滴开源的数据闪电加载方案 Levin 针对低频更新、静态使用、大规模数据的快速加载解决方案，具备简单易用、效率高、性能好、内存省等优点。Levin 内部应用实践效果：落地服务冷启动和热加…
-
深入 JS 对象属性为了回馈读者，《大迁世界》不定期举行(每个月一到三次)，现金抽奖活动，保底200，外加用户赞赏，希望你能成为大迁世界的小锦鲤，快来试试吧
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
