20181205 前端开发日报-前端开发博客

JavaScript之跨域解决方式；Web 后端开发者也需要了解的跨域问题；前端er，你真的会用 async 吗？；Webhook到底是个啥？；前端技术周刊 2018-12-03：DOM；你想知道关于package-lock.json的一切，但是太害怕了问了？；如何优雅处理前端异常？；javascript忍者秘籍-第四章理解函数调用

JavaScript之跨域解决方式平时工作中经常被 JavaScript 跨域问题所困扰，其实有很多种解决方式，下面给大家介绍常用的几种： 1.jsonp解决跨域问题客户端代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jsonp-跨域</title> <script type="text/ja…
Web 后端开发者也需要了解的跨域问题 Web 后端开发者很少会去充分了解跨域问题，原因是他们很少和 JavaScript 打交道。但是作为一个 Web 开发者，知道跨域请求和如何解决跨域问题可以和前端开发者在沟通上变得更为顺畅。这篇文章会介绍和跨域请求相关的一些概念，以及如何在后端（Python）解决浏览器的跨域请求问题。一、什么是跨域请求…
前端er，你真的会用 async 吗？现在已经到 8102 年的尾声了，前端各方面的技术发展也层出不穷，VueConf TO 2018 大会也发布了 Vue 3.0的计划。而在我们（我）的日常中也经常用 Vue 来编写一些项目。那么，就少不了 ES6 的登场了。那么话说回来，你真的会用 ES6 的 async 异步函数吗？ 1、async 介绍先上 MDN 介绍： developer.mozilla.org/zh-C…
Webhook到底是个啥？服务器： Jenkins Server Git Server App Server 关键词： nodejs ngrok github webhook 在配置Jenkins实现前端自动化构建的过程中，对于自动化的过程理解很模糊，只是知道Jenkins服务器，Git仓库和后端应用服务器这三个概念。 git push之后，Git如何通知Jenkins对应Job的工作区实时构建？答案就是：G…
前端技术周刊 2018-12-03：DOMChrome 71 开始将试用 SXG 功能，它是由 IETF 提出，Web Package 协议规范下的 Signed HTTP Exchanges 功能的缩写。该技术使得一个第三方服务器可以直接向用户提供可靠资源，且不用与原站共享 HTTPS 证书密钥。
你想知道关于package-lock.json的一切，但是太害怕了问了？如果你已经将节点包管理(npm)更新到版本5.x.x，看起来一切似乎都很顺利。等等，这是什么?用 npm 初始化项目的会自动创建了一个新文件 package-lock.json。如果打开它，它看起来有点像 package.json 的依赖项，但…
如何优雅处理前端异常？前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。一、为什么要处理异常？异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。 1.增强用户体验； 2.远程定位问题； 3.未雨…
javascript忍者秘籍-第四章理解函数调用调用函数时，隐式的函数参数 this 和 arguments 会被静默的传递给函数 this 表示调用函数的上下文对象 arguments 表示函数调用过程中传递的所有参数。通过 arguments 参数可以访问函数调用过程中传递的实际参数。函数调用的方式对函数的隐式参数有很大的影响 4.1 隐式的函数参数 arguments 和 this …
js全屏模式轻松掌握[局部元素全屏展示]我第一次对网页全屏模式有概念，是那种网页播放视频的全屏播放的那种。感觉很强，前几个星期有个需求也是关于全屏模式的，接触之后才知道全屏模式并不神秘，是个很容易掌握的技能…
Vue项目中使用better-scroll实现一个轮播图 better-scroll是一个非常非常强大的第三方库在移动端利用这个库不仅可以实现一个非常类似原生ScrollView的效果也可以实现一个轮播图的效果这里就先记录一下自己实现这个效果的一些过程吧思路 1.首先要确定自己的HTML结构基本结构就是一个wrapper包含一个content 2.其次需要明白的一个页面可以滚动的原理在于…
关于var a = 2; JS干了什么？又是一年临近年底了，年底制定下了许多计划，正在一点一点实现，最近在开始读《你不知道的Javascript》了，也会慢慢把读书笔记通过博客的形式输出出来，让自己印象更深刻，今天就来聊聊JS中的 var a = 2; 这行代码发生了什么？编译对于编程语言来说都会有一个编译的过程，一段代码在执行前大多都会经历下面几…
小白带你学习Vuex 在做一些Vue项目时，如果遇到嵌套多层的组件间的数据同步和通信将会非常麻烦，另外如果一些数据交互是分散在各个组件的，很可能会重复获取数据，或者接口数据的返回有更改时，不能及时的定位，所以如果能在全局对数据进行统一的状态管理将会非常方便。 Vuex是Vue官方推荐的状态管理利器。基础知识 Vuex…
解析 Angular 7 的十大特性 Angular 是最流行的 Web 应用程序开发框架之一。随着 Angular 7 的发布，它为 Web 开发人员带来了更多功能，包括核心框架、Angular Material、与主要版本保持同步的 CLI 和工具链，并且还有了几个主要合作伙伴。我们将在本文中介绍 Angular 团队发布的一些新功能。Angular 7 主要关注 Ivy 项目，重写 Angular 编译器…
从零实现Vue的Toast插件实现一个简单的Toast插件，方便迁移到不同的项目中，用来全局提示、警告一些信息。概述：在前端项目中，有时会需要通知、提示一些信息给用户，尤其是在后台系统中，操作的正确与否，都需要给与用户一些信息。 1. 实例在Vue组件的 methods 内，调用如下代码 this.$toast({ content: "可自动关闭&qu…
javaScript链式调用链式调用是我们平常经常会用到，比如JQuery中的$(‘id’).eq(0), 还有lodash中的_.chain().push()。这些都是平常会用到的，但是都是已经封装好的，我们知道用起来很方便却不知道实现的原理是什么。其实呢它…
webpack4之splitChunks拆拆拆本文讲解的是最近在做的一个多页面项目，结合webpack4的splitChunks进行代码包分拆的过程项目框架项目有home和topic两个入口文件,主要包括： react、mobx、antd作为项目的基本框架， echarts和d3(画图)是项目中部分页面用到比较大的组件库 src下的工作的组件和代码其他的非公共代码。 …
前端入门12-JavaScript语法之函数
如何在vue项目中优雅的使用SVG 本文旨在介绍如何在项目中配置和方便的使用svg图标。本文以vue项目为例，当然在react中的使用原理基本相似。 svg图标可以直接通过img标签来使用，也可当做icon来使用。本文是参考了鑫旭大佬的文章：SVG Sprite技术介绍。 2、配置安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下…
前端与编译原理——用JS写一个JS解释器说起编译原理，印象往往只停留在本科时那些枯燥的课程和晦涩的概念。作为前端开发者，编译原理似乎离我们很远，对它的理解很可能仅仅局限于“抽象语法树（AST）”。但这仅仅是个开头而已。编译原理的使用，甚至能让…
「译」React Fiber 那些事: 深入解析新的协调算法React 是一个用于构建用户交互界面的 JavaScript 库，其核心机制就是跟踪组件的状态变化，并将更新的状态映射到到新的界面。在 React 中，我们将此过程称之为协调。我们调用 setState 方法来改变状态，而框架本…
Show me the code，babel 7 最佳实践本文首发于 github 博客如对你有帮助是我的荣幸，你的 star 是对我最大的支持！大家都知道 babel 是兼容对 ES6 支持不完善的低版本浏览器的转换编译器。而 babel 其实主要做的只有两件事情：语法转换新 API 的 polyfill 兼容那么废话少说，我们直接点，直接说说常见几个场景下兼容旧版浏…
记一次简单的vue组件单元测试记录一些在为项目引入单元测试时的一些困惑，希望可以对社区的小伙伴们有所启迪，少走一些弯路少踩一些坑。 jest, mocha, karma, chai, sinon, jsmine, vue-test-utils都是些什么东西? chai，sinon是什么？为什么以spec.js命名？如何为聊天的文字消息组件写单元测试？运行在哪个目录下？ …
Spring Cloud 微服务架构下的 WebSocket 解决方案 WebSocket在现代浏览器中的应用已经算是比较普遍了，在某些业务场景下，要求必须能够在服务器端推送消息至客户端。在没有WebSocket的年代，我们使用过dwr，在那个时候dwr真实一个非常棒的方案。但是在WebSocket兴起之后，我们更愿意使用标准实现来解决问题、首先交代一下，本篇文章不讲解WebSocket的配置，主要讲的是…
《前端码农之蜕变 — AST（抽象语法树）》javascript转译、代码压缩、css预处理器、elint、pretiier等模块不会在生产环境用到，但它们在开发过程中充当着重要的角色。所有的上述工具，不管怎样，都建立在了AST这个巨人的肩膀上。（by 岁月是把杀猪刀）
This in JavaScript 这篇文章我们来理解下js中的 this 关键字在开始之前，我们先定义几个规则函数作为方法调用，也就是用 . 的方式用 new 的方式用 apply ， call ， bind 的方式函数作为自由函数调用第一种规则，函数作为方法调用 this 指向的就是…
【20181204 前端开发日报】前端请求的那些事儿；初学者使用json+ajax作注册判断的时候容易犯的一个错误；浏览器事件循环机制与Vue nextTick的实现；8张图帮你一步步看清 async/await 和 promise 的…详情→
# CSS 绝对定位释义那么按照默认的盒子模型，两个平级的DIV一上一下，占满整个父亲DIV。如果想要让第二个DIV覆盖第一个怎么办？