2020 有哪些不容错过的前端技术趋势？；记一次ts全栈开发（前端篇）；前端面试必备技巧（二）重难点梳理；基于 webpack 优化老项目 ；《前端那些事》如何更好管理 Api 接口；GitHub 迎来重大变更：可以直接用 VSCode 编码了；前端监控总结；【JavaScript】高频面试题-在地址栏输入网址之后都干了什么?
-
“四位技术人不四、杜欢、海波和堂主对 2020 年前端发展趋势进行了展望，同时也阐述 2020 年前端从业者可能将要面临的挑战。”
-
主要页面 购物车页面 登录注册页面 个人中心页面 首页 网站截图 环境配置 cnpm i react react-dom @types/react @types/react-dom react-router-dom @types/react-router-dom react-transition-group @types/react-transition-group react-swipe @types/react-swipe antd qs @types/q…
-
针对面试中出镜率比较高的重难点知识梳理。 相比于第一篇前端面试必备技巧，本篇文章更贴合今年的面试实际。第一篇比较全面，也比较基础，建议先看一遍上一篇再看本篇会更容易理解。 一、ES6常见用法 关于 ES6（泛指 ECMAScript 2015 及以后的版本）几乎是面试必问的，一般的问法是：“平常会使用 ES6 吗？列举几…
-
项目技术栈是 dva + antd-mobile ，由于是早期项目，项目里 webpack 版本用的是 3.5.6 ，所以有些配置我会加上 webpack 4.x 版本的写法。有些 plugin 或者相关配置列出的较少或者讲解比较浅显，可以到 webpack 官网或者对应的 plugin Github 上查看详细的参数配置哟。有不足之处还请指正 :pray:。 Roadhog 官方介绍…
-
前沿：自从前端和后端分家之后，前后端接口对接就成为了家常，“谁”也离不开谁，而对接接口的过程就离不开接口文档，比较主流就是Swagger(强大的API文档工具),当然今天它不是主角，顶多也就是个辅助。这篇文章旨在梳理如何在前端项目中更好的去管理跟后端“对接”的接口 聊接口管理，离不开请求库，vue技术栈中请求库谈及…
-
GitHub 迎来重大变更：可以直接用 VSCode 编码了
GitHub在本周的Satellite 2020活动中宣布了一些新功能和更新，涵盖了云、协作、安全性等。 与其他技术公司一样，由于COVID-19危机，微软拥有的代码托管平台已选择将其年度开发者活动移至在线，Satellite 2020也是GitHub本年度的首次虚拟会议。 GitHub Codespaces 这次活动最大的亮点是一个…
-
一般一个完整的前端项目需要包含异常监控，我们需要在项目出现异常的时候第一时间通知到我们开发，然后及时修复bug。 现有方案 Fundebug 传送门 bugsnag 传送门 betterjs 传送门 sentry 传送门 异常类型 从前端的角度来说，前端需要关注的异常一般包含一下两种： 原生js错误 …
-
【JavaScript】高频面试题-在地址栏输入网址之后都干了什么?
1. 客户端、服务器端 客户端：可以向服务器发请求，并接收返回的内容进行处理 服务器端：能够接收客户端请求，并且把相关资源信息返回给客户端的 => 当前电脑既可以充当服务端又可以充当客户端。因此，如何区分是服务端还是客户端：不是针对于某一台机器的，而是针对于功能、需求的 2….
-
本文分享了去年 12 月 Flutter Web 发布 beta 版以来的最新进展。
-
Vue 新手经常问的一个常见问题。可以将字符串、数组、数字和对象作为props传递。但是你能把一个函数当作一个props来传递吗? 虽然可以将函数作为props传递，但这种方式不好。相反，Vue 有一个专门为解决这问题而设计的功能，接下来，我们来看看。 向组件传入函数 获取一个函数或方法并将其作为一个prop传递给…
-
话说"天下大事 合久必分分久必合", WEB开发也是如此; 从过去的JSP、PHP到现在的vue+后端、react+后端、angular+后端… 前后端分离的开发模式已经有好多个年头了,在此期间诞生了很多优秀的前端框架、后端框架、开发模式; 然而，现在服务端渲染又再次被很多人提起，应用在各种项目中；相信伴随硬件技术和网络的…
-
混合开发 Cordova+Ionic+Angular 创建 iOS 及安卓项目
公司有项目是使用混合开发 Cordova+Ionic+Angular 模式编写的，因为我们部门接手了这个项目，因此不得不熟悉一下 Cordova+Ionic+Angular 模式。 先简单谈一下混合开发，我最早是在2016年年底接触的混合开发，当时组内考虑使用 RN 进行项目开发，于是我借着闲暇时间看了一些 RN 方面的技术，也尝试着做了一些小项目……
-
我们都知道一个angular应用通常会有多个模块(Module)组成。而我们又会在一个模块下写多个组件，让我们了解一些模块与组件的基本构造吧。
-
2020年您应该知道的7种前端JavaScript趋势和工具
JavaScript世界正在快速发展。 前端开发(和Web开发)的世界发展迅速。 今天，如果您不在Webpack，React Hooks，Jest，Vue和NG元素之上，那么您会开始感到差距越来越大。 但是，情况正在发生变化。 尽管前端丛林中的开发人员和技术人员的数量每年都在激增，但生态系统仍渴望实现标准化。 新技术和工具的出现已经…
-
【带着canvas去流浪（15）】threejs fundamentals翻译系列1-scene graph
示例代码托管在： http://www.github.com/dashnowords/blogs 博客园地址： 《大史住在大前端》原创博文目录 华为云社区地址： 【你要的前端打怪升级指南】 原文地址： https://threejsfundamentals.org/threejs/lessons/threejs-scenegraph.html 笔者按：别关键词保持原英文单词，…
-
微软：编程语言 TypeScript 3.9 可将编译时间缩短 40％
近日，微软的 TypeScript 团队发布了这一年轻编程语言的 3.9 版本，这是 JavaScript 的超集，可将其编译为 JavaScript 代码，在浏览器中或浏览器外的 Node.js 上运行。
-
首先我们这次的源码分析不仅仅是通过源码分析其实现原理，我们偶尔还会通过Vue项目编写的测试用例了解更多细节。 原理结构 根据官方的指导图来看，数据( data )在变更的时候会触发 setter 而引起通知事件( notify )，告知 Watcher 数据已经变了，然后 Watcher 再出发重新渲染事件( re-render )，会调用组…
-
根据学术上函数的定义，函数即是一种描述集合和集合之间的 转换关系 ，输入通过函数都会返回 有且只有一个 输出值。 函数 实际上是一个 关系 ，或者说是一种映射，而这种映射关系是可以组合的。 在我们的编程世界中，我们需要处理的其实也只有“数据”和“关系”，而关系就是函数。我们所谓的 编程工作 也不过就是在…
-
pc-pcm-wave：一个简单录音波纹 Preact 组件
README.md pc-pcm-wave 一个简单的pcm波纹效果, 适用于preact项目,hooks编写, 有如下特性 可自定义状态数量 可自定义线的数量、粗细、颜色、波速、振幅、延迟等参数 Live Demo L…
-
在数据中台做 BI 工具经常面对海量数据的渲染处理，除了组件本身性能优化之外，经常要排查整体页面性能瓶颈点，尤其是维护一些性能做得并不好的旧代码时。
-
往文件的固定的行写入数据： 需要用到时nodejs的fs模块和path模块 用到fs模块的方法 readFileSync & writeFileSync ； readFileSync 是读取文件内容， writeFileSync 是向文件写入内容； 实现思路： 1：读取文件内容并把读取到的内容以换行符切割成数组 2：向数组的插入内容（用splice…
-
react+webpack4.x搭建前端项目（六）webpack的多模块打包配置
我们接着上一篇文章 react+webpack4.x搭建前端项目（五）多页面配置 来进行配置模块的单独打包方式（下边简称多app打包） 多app打包的意思是：多个模块单独打包，模块之间的资源互相不依赖，某一模块的资源打包在该模块下。这是和多页面最不大的不同，打包资源再多页面之间其实是公用的，bundle包资源也具有相互依赖…
-
这是基于 webpack 4.0 实现的react框架，其中包含项目常用的配置，webpack打包分离压缩优化处理，可供快速开发使用. 目录结构 |———— build webpack配置文件 |———— config/ 配置文件 |———— dist/ 项目打包文件 |———— node_modules/ 第三方模块 …
-
使用字符串可能是一项繁琐的任务，因为有许多不同的用例。例如，将字符串转换为驼峰大小写这样的简单任务可能需要几行代码才能达到最终目标。 function camelize(str) { return str.replace(/(?:^w| |bw|s+)/g, function(match, index) { …
-
背景： 想要实现图片持续滚动，既然使用js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑一下，可以一像素一像素的感动，则很平滑，如果加了过渡动画，当图片重置为0时，会有往回倒的动画效果，跟预期不符。 原理： 图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片…
-
js具有自动垃圾回收机制，换句话说，执行环境会管理代码执行过程中使用的内存。 js垃圾回收的原理 执行环境会找出那些不再继续使用的变量，然后释放其占用的内存。 js垃圾回收的策略 标记清除 当变量进入环境时，就将这个变量标记为“进入环境”，而当变量离开环境时，则将其标记为“离开环境”。 标记变量方式看具体…
-
“就大的趋势来讲，前端整体上还是在不断借鉴计算机其它领域的优秀实践，来帮助我们更方便地解决人机交互问题。本文着眼于支撑这些功能的一个底层编程概念 Continuation，期望能够在了解它之后，大家对这几个功能有进一步的理解和掌握。”
-
新公司之前的项目还没做前后台分离,利用没项目的这段时间,先搞一个后台管理系统,熟悉熟悉业务,项目是基于vue+elementUI,虽然接触过一段时间vue,但是没干过后台管理这种活啊,在此记录一下在做的过程中学习到的一些知识点,方便日后查阅。 效果 实现 1.页面区域划分 想要的效果 点击左侧选项,右侧Right…
-
在我们面试过程中，面试官经常会问到这么一个问题，那就是从在浏览器地址栏中输入URL到页面显示，浏览器到底发生了什么？这个问题看起来是老生常谈，但是这个问题回答的好坏，确实可以很好的反映出面试者知识的广…
-
双向数据绑定的概念，相信大家都耳熟能详，简单来说，数据变化更新视图，视图变化更新数据。为了实现这一效果，在 Vue 中，采用了 数据劫持结合发布订阅者模式 的方式来实现。 通过 Object.defineProperty() 实现数据劫持，监听数据的变化。 通过 发布者 Dep() 订阅者 Watcher 实现发布订阅者模式，达到视图与数…
-
实现一个封装ajax器，功能有 限制一次同时发送的ajax请求数量m个 timeout限制 重试n次 解题思路 强调下，我的想法和代码只是尝试回答面试问题，并不能直接在正式的业务场景里使用，但希望也能给你们带去思考。另外，我的解决方案是基于promise完成的。 首先，限制条件1在我的理解中，发送的请求还有m个…
-
React hooks + Mobx + typescript + EggJs从0到1打造一款仿网易云音乐APP（二）
该项目会以 React 全家桶 (会使用 16.8 最新 API 及 hooks) 以及 mobx 数据流方案为基础打造的一款高质量的移动端音乐类 WebApp 。 涉及的技术栈主要有： react v16.8 全家桶 (react，react-router) : 用于构建用户界面的 MVVM 框架 mobx 前端数据流方案 immutable: Facebook 历时三年开发出的进行持久…
-
如果两个或多个元素很接近，那么用户就会认为它们以某种方式属于彼此。当对多个设计元素进行分组时，用户可以根据它们之间的空间大小来决定它们之间的关系。没有间距，用户将很难浏览页面并知道哪些内容相关而哪…
-
JavaScript面向对象详解(一) ES6之前的JavaScript面向对象比较不好理解，涉及到很多知识和思想。 ES6增加了class和extends来实现类的封装和继承，但是通过babel转换成ES5之后还是之前的一套逻辑。 这里，我打算用四篇文章，来讲解一下关于ES5中面向对象的知识体系，一起学习一下吧！ 一. JavaScript的对象 1…
-
“从最初的 Hybrid App，到 React Native 再到如今的小程序，单维度的监控手段已经不足以帮助开发人员及时发现与定位问题。IVWEB 团队在不断的业务实践中，沉淀出了一套比较完善的监控方案。”
-
前言 ES5 的对象属性名都是字符串，这容易造成属性名冲突的问题。比如，你使用别人的模块/对象, 又想为之添加新的属性,这就容易使得新属性名与原有属性名冲突。这就是 ES6 引入Symbol的原因，symbol能够保证每个属性的名字独一无二。 一、Symbol介绍 Symbol是 ES6 引入了一种新的原始数据类型，它是一种特殊的、不…
-
老实说，虽然我做过许多前端开发，但我并不擅长 CSS。当我陷入困境时，EnjoyCSS 是我的大救星。EnjoyCSS 提供了一个简单的交互界面，帮助我设计元素，然后自动输出相应的 CSS 代码。
-
在 APP 开发过程中，为了实现页面的灵活性与开发的高效性，原生与 H5 互调一个很常用的手段。这里简单介绍下安卓端的原生 JS 互调： 一、JS 调安卓 安卓 WebView 初始化： webView = new WebView(this); WebSettings settings = webView.getSettings(); // 设置支持 javaScript 脚步语言 settings.setJavaScriptEnabl…
-
示例版本为 Element-ui 2.13.1 + Vue 2.6.11 本人是做后台开发的，由于公司业务要求需要将前后台模块进行分离，两年前选择使用 vue-element-admin 项目进行前台的开发，该框架集成了很多功能，特别适合对 Vue 很陌生的新手，公司项目组成员接受程度普遍较高。 在使用过程中 表格 是必不可少的一个控件…
-
使用Vue3 composition-api重写一个抽象可复用的增删改查页面
vue3.0 beta版本已经发布一段时间了，尝试着用composition-api来重写一个简单的后台管理系统中的增删改查。 对于常用的增删改查的后台管理页面，通常的为 表格+详情页 的模式，主要包含如下几个功能： 表格用于展示数据内容 点击表格中的一项，能够弹出详情页进行编辑。 保存或取消更新表格数据。 …
-
vue中使用websocket/vue-socket.io/socket.io-client
因为项目需要在vue用到websocket所以找了很多帖子与资料，但是原生的需要封装逻辑比较复杂，对于仅仅是使用学习成本比较大，第三方插件的话我找的有vue-socket.io、socket.io、socket.io-client，其中vue-socket….
-
自上一篇写关于diff的文章到现在已经过了二十天多，利用业余时间和10天婚假的闲暇，终于搞懂了React源码中的调度原理。当费劲一番周折终于调试到将更新与调度任务连接在一起的核心逻辑那一刻，忧愁的嘴角终于露出…
-
最近脑子里有冒出“多看点书”的想法，但我个人不是很喜欢翻阅纸质书籍，另一方面也是因为我能抽出来看书的时间比较琐碎，所以就干脆用 app 看电子书了（如果有比较完整的阅读时间，还是建议看纸质书籍，排版看起来更舒服点）。考虑到平时工作遇到的大部分问题还是 javascript 强相关的，于是我选择从《Javascript权威指南…
-
Flutter Web 网站之 ScrollView + GridView 优化
往期 Flutter Web网站搭建教程 Flutter Web 网站之主页框架搭建 Flutter Web网站之Jetpack成型 上期回顾 上期我们做了简单的分包处理，然后就用了SingleChildScrollView+GridView为主要的框架实现了网格布局以及上下滑动效果，Chrome Web以及原生体验并没有发现什么问题，可…
-
看到这里你要懵逼了，我为什么又要写一遍。emmmm…因为我需求变了，直接拿到 exif 部分的数据，然后 base64 提交。（giao） 测试地址
-
AST 和 babel、vue、prettier 的编译原理
本文概要 本文将通过以下几个方面对AST进行学习： 1. 为什么要了解AST，简要说明AST在开发中的重要性； 什么是AST，对AST有一个直观的认识； AST是如何生成的，分析将代码解析成AST的原理； AST的具体应用，通过…
-
Proxy 是一个 ES6 特性，可以用来监控给定对象的访问方式。比如说，我们有一个对象 alice ，它包含关于 Alice 的一些信息，诸如生日、年龄、身高、体重以及 BMI 值。 const alice = { birthdate: ‘2000-04-06’, age: 20, height: 170, weight: 65, bmi: 22.5, }; 复制代码 对象中的属性可以像这样来读取…
-
MXFlutter上线Flutter pub.dev 三步接入现有工程
相关进展： MXFlutter 2020年 Roadmap 更多 MXFlutter 信息，请关注掘金 MXFlutter Team账号的相关文章MXFlutter MXFlutter 自去年发布预览版之后，经过不断优化和重构 v0.2.1 已在iOS 线上APP使用，同时支持 Android 平台。由于整个框架的复杂性，业务接入步骤繁多，近期经过一系列的改造和重构，现…
-
搭建一个vue-cli4+webpack移动端框架（开箱即用）
这是基于 vue-cli4 实现的移动端框架，其中包含项目常用的配置，组件封装及webpack优化方法，可供快速开发使用。 技术栈：vue-cli4 + webpack4 + vant + axios + less + postcss-px2rem 源码 github.com/Michael-lzg… // 安装依赖 npm install // 本地启动 npm run dev // 生产打包 npm run build 复制代码 …
-
作者：令夕 原文链接：https://juejin.im/post/5e92ad7a518825736c5b91cd 最近在做网站换肤的需求，也就是主题切换。那么如何切换主题的颜色呢？以下是网站换肤的实现以及基于换肤拓展的一些方案分享给大家，希望大家在做类似需求的时候能够有些参考。 覆盖样式实现 //&n…
-
大家好，我是六六。学习了很长时间，为此想做一个项目来锻炼一下自己，于是便看上了蘑菇街（有很多漂亮的衣服和美女哈哈哈）。所以打算从零仿照蘑菇街官网来做一个项目，现在项目终于上线了。对于项目有任何问题或者建议都可以评论，我欢迎大家来提意见。 github地址： github.com/6sy/myShop 2项目介绍 登…
-
学习还是工作中, 都有可能需要我们把域名升级为HTTPS,比如, 你要使用开发微信公众, 小程序相关应用, 在初始化的时候, 就要求我们填写HTTS的域名作为验证 本文记录了一次HTTPS域名配置的完整过程
-
Vue的过滤器filters在Element表格el-table中的应用 （Vue「过滤器」的使用，自定义过滤器 filters ）
filters 不会修改数据，只是改变用户看到的输出（效果） （计算属性 computed ，方法 methods 都是通过修改数据来处理数据格式的输出显示）。 2.使用场景： 需要格式化数据的情况，比如我们需要处理 时间、价格等数据格式的输出 / 显示。 比如后端给你返回一个 年月日的日期字符串 ，前端需要展示…
-
熟悉我的朋友可能会知道，我一向是不写热点的。为什么不写呢？是因为我不关注热点吗？其实也不是。有些事件我还是很关注的，也确实有不少想法和观点。 但我一直奉行一个原则，就是： 要做有生命力的内容 。 对于前端工程师来说, 正则表达式也许是 javascript 语言中最晦涩难懂的, 但是也往往是最简洁的.工作中遇到的…
-
实际项目中关于 JavaScript 中 Promises 的 5 种最佳实践
在学习了 Promise 的基本用法后，本文希望可以帮助你在实际项目中更好地使用 Promise。 使用 Promise.all，Promise.race 和 Promise.prototype.then 来改善代码质量。 Promise.all Promise.all 实际上是一个 Promise，接收一个 Promise 数组（或一个可迭代的对象）做为参数。然后当其中所有的 Promise 都变为 reso…
-
function f() { if (a) { return } if (b) { return } if (c) { return } // …many codes } 复制代码 推测当事人心理：需求要做这个功能，需要加一个条件。好的，就在最前面加一下 函数有很多参数 function f(a, b, c, d, config, isAdmin, isEdit, isAdd) { // …many codes } …
-
这份 Java Web 必读书单，值得所有 Java 工程师一看
点击蓝色“程序员书单”关注我哟 加个“星标”，每天带你读好书！ 经过了10多年的发展，Java Web从开发框架到社区都已经非常成熟，而目前市面上最流行的Java Web框架已然是Spring全家桶，从过去的Spring，SpringMVC，再到SpringBoot。而曾经流行的JSP和servlet，随着前后端分离的趋势，以及Spring这类框架的冲击，也逐…
-
简单来说变化检测就是Angular用来检测视图与模型之间绑定的值是否发生了改变，当检测到模型中绑定的值发生改变时，则同步到视图上，反之，当检测到视图上绑定的值发生改变时，则回调对应的绑定函数。
-
:eyes::+1: 一款基于Bmob后端云轻量级的访问量&点赞插件 官方文档 官方文档： ViLikeJS ： ViLikeJS Demo 特性 简单功能简单实现，封装十几行代码实现超轻量的JS插件。 无需在个人服务器上搭建后端系统，数据访问更加安全。 借助Bmob创建后端平台，创建、管理更加方便快捷。 什么情况…
-
在webpack中，我们发现配置我们能天然的使用esmodule这种模块化语法，那大家有没有好奇过呢？他究竟是怎么实现的呢？下面一起来探究一下，webpack究竟是怎么解析打包esmodule语法的。 在研究之前，我们需要有一定的node的基础知识，应为我们如果想要实现webpack类似的功能，那么，我们必须要借助node的一些模块，比如…
更多内容请关注公众号【前端开发博客】每日更新
