20200512 前端开发日报

前端面试必备技巧（二）重难点梳理；4月份Github上热门的JavaScript开源项目；2020年您应该知道的7种前端JavaScript趋势和工具；前端获取图片 exif 流信息；HTTP升级HTTPS全过程记录；javascript正则深入以及10个非常有意思的正则实战；搭建一个vue-cli4+webpack移动端框架（开箱即用）；Angular变化检测

1. 前端面试必备技巧（二）重难点梳理

   针对面试中出镜率比较高的重难点知识梳理。 相比于第一篇前端面试必备技巧，本篇文章更贴合今年的面试实际。第一篇比较全面，也比较基础，建议先看一遍上一篇再看本篇会更容易理解。 一、ES6常见用法 关于 ES6（泛指 ECMAScript 2015 及以后的版本）几乎是面试必问的，一般的问法是：“平常会使用 ES6 吗？列举几…

2. 4月份Github上热门的JavaScript开源项目

   4月份GitHub上热门的JavaScript开源项目排行已经出炉啦，一起来看看上榜详情吧： 1. covid19india-react https://github.com/covid19india/covid19india-react Star 3180 这是一个自愿者驱动的众包数据库，用于印度的COVID-19统计和患者追踪。 2. jitsi-meet https://github.com/jitsi/jitsi-meet St…

3. 2020年您应该知道的7种前端JavaScript趋势和工具

   JavaScript世界正在快速发展。 前端开发(和Web开发)的世界发展迅速。 今天，如果您不在Webpack，React Hooks，Jest，Vue和NG元素之上，那么您会开始感到差距越来越大。 但是，情况正在发生变化。 尽管前端丛林中的开发人员和技术人员的数量每年都在激增，但生态系统仍渴望实现标准化。 新技术和工具的出现已经…

4. 前端获取图片 exif 流信息

   看到这里你要懵逼了，我为什么又要写一遍。emmmm…因为我需求变了，直接拿到 exif 部分的数据，然后 base64 提交。（giao） 测试地址

5. HTTP升级HTTPS全过程记录

   学习还是工作中, 都有可能需要我们把域名升级为HTTPS,比如, 你要使用开发微信公众, 小程序相关应用, 在初始化的时候, 就要求我们填写HTTS的域名作为验证 本文记录了一次HTTPS域名配置的完整过程

6. javascript正则深入以及10个非常有意思的正则实战

   熟悉我的朋友可能会知道，我一向是不写热点的。为什么不写呢？是因为我不关注热点吗？其实也不是。有些事件我还是很关注的，也确实有不少想法和观点。 但我一直奉行一个原则，就是： 要做有生命力的内容 。 对于前端工程师来说, 正则表达式也许是 javascript 语言中最晦涩难懂的, 但是也往往是最简洁的.工作中遇到的…

7. 搭建一个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 复制代码 …

8. Angular变化检测

   简单来说变化检测就是Angular用来检测视图与模型之间绑定的值是否发生了改变，当检测到模型中绑定的值发生改变时，则同步到视图上，反之，当检测到视图上绑定的值发生改变时，则回调对应的绑定函数。

9. 带你探究webpack究竟是如何解析打包模块语法的

   在webpack中，我们发现配置我们能天然的使用esmodule这种模块化语法，那大家有没有好奇过呢？他究竟是怎么实现的呢？下面一起来探究一下，webpack究竟是怎么解析打包esmodule语法的。 在研究之前，我们需要有一定的node的基础知识，应为我们如果想要实现webpack类似的功能，那么，我们必须要借助node的一些模块，比如…

10. 用 jsDelivr 免费加速 GitHub Pages 的静态资源

    挺久以前就有网友给我的 GitHub Pages 博客模板提 Issue，说希望能增加 CDN 用于加速静态资源的加载，由于懒，一直没有动。 最近偶尔要打开自己博客看下 Wiki 的时候，要等挺久，比较痛苦，碰巧昨天晚上看到这样一篇帖子：GitHub 图床的正确用法，通过 jsDelivr CDN 全球加速，感觉很适合我的需求场景，于是决…

11. vue-element-admin集成Keycloak实现统一身份验证、权限控制

    vue-element-admin 是一个在github拥有极高star数的后台前端解决方案，基于 vue 和 element-ui 实现。vue本身易上手，element-ui组件丰富，即便后端开发人员使用vue-element-admin也能较快的开发出不错的管理后台。但是，当公司内部有多个后台系统的时候，直接使用vue-element-admin内置的登录、身份验证功能时，无法达…

12. 1.jQuery选择器的简单实现和笔记

    # 引入jQuery工具库 ## 下载地址 – cdn:http://www.jq22.com/cdn/#a2 – 下载地址:http://www.jq22.com/jquery-info122 # 文档查询 – 中文:https://www.jquery123.com/ – 英文:https://jquery.com ## 引入jQuery “`js <script src="./jQuery.js…

13. webpack 搭建简单 React 项目

    这是基于 webpack 4.0 实现的react框架，其中包含项目常用的配置，webpack打包分离压缩优化处理，可供快速开发使用. 目录结构 |———— build webpack配置文件 |———— config/ 配置文件 |———— dist/ 项目打包文件 |———— node_modules/ 第三方模块 …

14. js实现单张或多张图片持续无缝滚动

    背景： 想要实现图片持续滚动，既然使用js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑一下，可以一像素一像素的感动，则很平滑，如果加了过渡动画，当图片重置为0时，会有往回倒的动画效果，跟预期不符。 原理： 图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片…

15. vue+element 后台管理侧边导航栏

    新公司之前的项目还没做前后台分离,利用没项目的这段时间,先搞一个后台管理系统,熟悉熟悉业务,项目是基于vue+elementUI,虽然接触过一段时间vue,但是没干过后台管理这种活啊,在此记录一下在做的过程中学习到的一些知识点,方便日后查阅。 效果 实现 1.页面区域划分 想要的效果 点击左侧选项,右侧Right…

16. vue双向数据绑定原理图(简易)

    双向数据绑定的概念，相信大家都耳熟能详，简单来说，数据变化更新视图，视图变化更新数据。为了实现这一效果，在 Vue 中，采用了 数据劫持结合发布订阅者模式 的方式来实现。 通过 Object.defineProperty() 实现数据劫持，监听数据的变化。 通过 发布者 Dep() 订阅者 Watcher 实现发布订阅者模式，达到视图与数…

17. 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 历时三年开发出的进行持久…

18. JavaScript面向对象详解（一）

    JavaScript面向对象详解(一) ES6之前的JavaScript面向对象比较不好理解，涉及到很多知识和思想。 ES6增加了class和extends来实现类的封装和继承，但是通过babel转换成ES5之后还是之前的一套逻辑。 这里，我打算用四篇文章，来讲解一下关于ES5中面向对象的知识体系，一起学习一下吧！ 一. JavaScript的对象 1…

19. 混合开发 Cordova+Ionic+Angular 创建 iOS 及安卓项目

    公司有项目是使用混合开发 Cordova+Ionic+Angular 模式编写的，因为我们部门接手了这个项目，因此不得不熟悉一下 Cordova+Ionic+Angular 模式。 先简单谈一下混合开发，我最早是在2016年年底接触的混合开发，当时组内考虑使用 RN 进行项目开发，于是我借着闲暇时间看了一些 RN 方面的技术，也尝试着做了一些小项目……

20. 前端开发在线工具推荐

    老实说，虽然我做过许多前端开发，但我并不擅长 CSS。当我陷入困境时，EnjoyCSS 是我的大救星。EnjoyCSS 提供了一个简单的交互界面，帮助我设计元素，然后自动输出相应的 CSS 代码。

21. 安卓 JS 互调 & 安卓开发过程中遇到的一些问题

    在 APP 开发过程中，为了实现页面的灵活性与开发的高效性，原生与 H5 互调一个很常用的手段。这里简单介绍下安卓端的原生 JS 互调： 一、JS 调安卓 安卓 WebView 初始化： webView = new WebView(this); WebSettings settings = webView.getSettings(); // 设置支持 javaScript 脚步语言 settings.setJavaScriptEnabl…

22. vue中使用websocket/vue-socket.io/socket.io-client

    因为项目需要在vue用到websocket所以找了很多帖子与资料，但是原生的需要封装逻辑比较复杂，对于仅仅是使用学习成本比较大，第三方插件的话我找的有vue-socket.io、socket.io、socket.io-client，其中vue-socket….

23. 【带着canvas去流浪（15）】threejs fundamentals翻译系列1-scene graph

    示例代码托管在： http://www.github.com/dashnowords/blogs 博客园地址： 《大史住在大前端》原创博文目录 华为云社区地址： 【你要的前端打怪升级指南】 原文地址： https://threejsfundamentals.org/threejs/lessons/threejs-scenegraph.html 笔者按：别关键词保持原英文单词，…

24. Node.js为什么需要C++扩展？

    关注「 前端向后 」微信公众号，你将收获一系列「用 心 原创」的高质量技术文章，主题包括但不限于前端、Node.js以及服务端技术 一.概念 本质上，Node.js 扩展就是 C++动态链接库： Addons are dynamically-linked shared objects written in C++. 相当于 JS 通往 C/C++世界的一扇门 ： Addons provide an…

25. Atomic CSS-in-js

    原文： Atomic CSS-in-JS 时间：2020/04/27 作者： Sébastien Lorber 译者：ziven27 翻译时间：2020/05/10 译者：国内大家都去搞 JS 去了，可以看到我们有可以与 REACT 抗衡的 VUE。却显见有类似 CSS-in-js, OOCSS，BEM，Atomic CSS … 的 CSS 解决方案出现？这是为什么呢？ 随着 Fac…

26. 前端升级打怪路：JS数据类型和运算符（十二）

    十进制转二进制 二进制转十进制 用十六进制表示二进制 为什么用十六进制 ン因为二进制写起来太慢了:011110001011010 记住8421对应XXXX 从右往左每四位改写成一位:110001011010 得到3,12,5,10;把大于9的数字改为 ABCDEF 于是得到3C5A,你也可以用计算器的程序员模式 ンHEX表示16进制,BIN表示2进制 ンOCT表示8进制,…

更多内容请关注公众号【前端开发博客】每日更新