20191128 前端开发日报

《蚂蚁前端研发最佳实践》文字稿;我们一起学习 CSS image-set();es6总结;JavaScript 中, 5 种增加代码可读性的最佳实践;在前端 IPA & APK 还能这样玩;2019 TWeb 腾讯前端技术大会精彩回顾;package.json 详解;手动搭建一个webpack项目

  1. 《蚂蚁前端研发最佳实践》文字稿 以下是我在 2019.11.15 成都全栈大会 分享的文字稿,介绍了蚂蚁前端研发的最佳实践,其中我提取了三个比较重要的点,每个点都是我们实践和深入思考后的结果,希望能对大家有所启发,欢迎探讨。 招人:如果你如果对这套技术栈感兴趣,希望来一起打磨优化 umi 和 bigfish,我们招人,P6-P9 不限,发邮件到 sorrycc#gmai…
  2. es6总结数组的结构 var [a,b,c] = [1,2,3];console.log(a);console.log(b);console.log(c);
  3. JavaScript 中, 5 种增加代码可读性的最佳实践 作者:Milos Protic 译者:前端小智 来源:blog.risingstack 最近几天,公众号无套路抽奖现金 200,参与方式如下: 存而不论是一种对舆论场合的改善?(每月一次抽大鱼) 好消息:阿里云服务器2019Hi拼团优惠活动正在火热进行中,新老用户均可参与,2核1G云服务器仅需 79元 ,1核2G香港服务器仅需 719元/3年 …
  4. 在前端 IPA & APK 还能这样玩 近期公司为了方便管理内部多个不同版本的测试包,打算在公司内部搭建一个类似蒲公英/fir.im 的安装包管理平台。经过本人的一番搜索在 Github 上发现了 fabu.love 这个项目,基于该项目搭建的应用发布平台,可支持安装包管理、检查更新,灰度发布等功能。此外该项目采用前后端分离的开发方式进行开发,前端技术栈采用 Vue…
  5. package.json 详解Node 项目在项目根目录中名为 package.json 的文件中跟踪依赖关系和元数据。这是你项目的核心。它包含名称、描述和版本之类的信息,以及运行、开发以及有选择地将项目发布到 NPM 所需的信息。
  6. 手动搭建一个webpack项目 npm install webpack webpack-cli webpack-dev-server –g 依赖安装: npm install webpack webpack-cli webpack-dev-server –save-dev 三、创建 Js模块创建,模块化开发-模块接收暴露 这里需要知道的是:(es5和es6写法上的不同) eg: a.Js 暴露模块 module.exports=obj; || export default …
  7. 总结几个webpack打包优化的方法 项目越做越大,依赖包越来越多,打包文件太大 单页面应用首页白屏时间长,用户体验差 我们的目的 减小打包后的文件大小 首页按需引入文件 优化 webpack 打包时间 优化方式 1、 按需加载 1.1 路由组件按需加载 const router = [ { path: ‘/index’, component: resolve => require.ensure…
  8. Gracejs —— 全新的基于koa2的前后端分离框架 Gracejs (又称:koa-grace v2) 是全新的基于 koa v2.x 的MVC+RESTful架构的前后端分离框架。 一、简介 Gracejs是 koa-grace 的升级版,也可以叫koa-grace v2。 主要特性包括: 支持MVC架构,可以更便捷地生成服务端路由; 标准的RESTful架构,支持后端接口异步并发,页面性能更优; 一套Node环境经…
  9. 一文读懂JavaScript的并发模型和事件循环机制在浏览器实现中,每个单页都是一个独立进程,其中包含了JS引擎、GUI界面渲染、事件触发、定时触发器、异步HTTP请求等多个线程。
  10. vue源码阅读二:虚拟 DOM 是如何生成的?(上) 我们看源码,我觉得最好带着问题去看源码,这样我们会专注于一个点去看源码,不会被源码的一些其他功能,把我们带离最初想去的地方。本章主要的目的是,弄明白 vue 是如何生成虚拟 DOM 的。 从入口开始 我们从入口文件一步一步慢慢的分析。先看入口文件。 入口文件: web/entry-runtime-with-compiler.js …
  11. SpringBoot2.0整合WebSocket,实现后端数据实时推送 之前公司的某个系统为了实现推送技术,所用的技术都是Ajax轮询,这种方式浏览器需要不断的向服务器发出请求,显然这样会浪费很多的带宽等资源,所以研究了下WebSocket,本文将详细介绍下。 一、什么是WebSocket? WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议,能更好的节省服务器资源和带宽…
  12. 优雅地用Vue生成动态表单 开需求会了,产品说这次需求的表单比较多,目前有18个,后期的表单可能会有增加、修改。我作为这次的前端开发,看到这样的需求,心里知道要这样搞不得把自己累死,首先表单居多,还会有变更,以后维护起来也让人心力憔悴。 于是我提议做动态表单,做一个表单的配置系统,在系统里配置表单类型、表单得字段、以及对表单…
  13. 来聊聊前端的异步 出现的原因 JavaScript语言的执行环境是"单线程" 所谓"单线程",就是指一次只能只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。 单线程这种模式好处是实现起来比较简单,执行环境单一。坏处是只要有一个任务耗时很长,后面的任务…
  14. Vuex基本使用的总结–转载 在 Vue 的单页面应用中使用,需要使用 Vue.use(Vuex) 调用插件。 使用非常简单,只需要将其注入到Vue根实例中。 import Vuex from ‘vuex’ Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, getter: { doneTodos: (state, getters) => { return state.todos.fil…
  15. 在追寻极致体验的康庄大道上,React 玩出了花 感谢支持ayqy个人订阅号,每周义务推送1篇(only unique one)原创精品博文,话题包括但不限于前端、Node、Android、数学(WebGL)、语文(课外书读后感)、英语(文档翻译) 如果觉得弱水三千,一瓢太少,可以去 http://blog.ayqy.net 看个痛快 写在前面 Suspense 之后,又将迎来useTransition …
  16. 使用 Angular 打造微前端架构的 ToB 企业级应用 这篇文章其实已经准备了11个月了,因为虽然我们年初就开始使用 Angular 的微前端架构,但是产品一直没有正式发布,无法通过生产环境实践验证可行性,11月16日我们的产品正式灰度发布,所以是时候分享一下我们在使用 Angular 微前端这条路上的心得(踩过的坑)了额,希望和 Angular 社区一起成长一起进步,如果你对微前端…
  17. 5个大型实战项目总结,解密React Hooks(一):为何她独具魅力过去大半年里,我将React Hooks应用到了许多大型项目,其中5个全量重构,其他项目由于时间关系少量使用。
  18. Vue源码笔记 — 数据驱动–为什么通过 this.xxx 可以访问到 data 中定义的数据上面是一个简单的 Vue 示例,当运行 mounted 生命周期时,控制台会输出 Hello Vue!。那么为什么我们可以通过 this.message 可以访问到 data 中定义的数据,下面让我们一起分析一下。
  19. JavaScript函数_执行环境(十八) 目录: 1.什么是执行环境 2.浅谈作用域链 一、什么是执行环境 执行环境定义了变量或者函数有权访问的其他数据,决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象。环境中定义的所有变量和函数都保存在这个对象中。虽然我们在编写代码的时候无法访问这个对象,但解析器在处理数据时会在后台用到它…
  20. 将Swagger2文档导出为HTML或markdown等格式离线阅读网上有很多《使用swagger2构建API文档》的文章,该文档是一个在线文档,需要使用HTTP访问。但是在我们日常使用swagger接口文档的时候,有的时候需要接口文档离线访问,如将文档导出为html、markdown格式。又或者…
  21. [ 干货 ] 介绍4个开发 React 应用的实用技巧Hooks 自推出以来就很火, 它改变了我们编写React 代码的方式, 有助于我们写更简洁的代码。
  22. Vue中使用provide/inject实现页面reload的方法 在实际的Web开发项目中,经常会遇到在列表删除一条数据或者新增数据之后需要重新刷新当前页面的需求,以获得最新的列表数据。通常可以使用window.reload()或者router.go(0)刷新整个URL让当前页面重新加载来实现,但是会有闪烁,体验不好。在Vue中,可以使用provide / inject 组合来实现刷新这个功能,原理就是用v-if销毁…
  23. React 深入系列:1. React 中的元素、组件、实例和节点React 深入系列是 《React进阶之路》作者徐超笔下的文章,文章首发于老干部的大前端。文章简短精干,清晰明了,现将此系列文章分享在本专栏里,希望对您有所帮助。
  24. Vue SSR与React SSR从0到1开始搭建 随着前端路由的兴起,spa受到越来越多人的欢迎, 下面预先介绍spa的优缺点,方便同学们认识到ssr为什么会兴起 复制代码 spa优缺点 优点: 用户体验好, 不需要重新加载页面,web应用更具响应性和更令人着迷 减少了服务端的压力, 不需要去每个路径对应每个页面 基于上面一点,SPA相对对服务器压…
  25. 进阶的ajax——ajax实现临时文件下载 通过a标签 <a target="_blank" href="//www.xxx.com/download/file.txt" download="file">下载</a> 复制代码 通过form表单 <form action=’/download’ method=’post’> <input type="text" name="name" value="file"/> …
  26. 带你走进JS作用域(Scope)的世界 该文章是直接翻译国外一篇文章,关于作用域( Scope )。 都是基于原文处理的,其他的都是直接进行翻译可能有些生硬,所以为了行文方便,就做了一些简单的本地化处理。 同时也新增了自己的理解和对应的思考过程,如有不对,请在评论区指出 如果想直接根据 原文 学习,可以忽略此文。 如果你觉得可以,请多…
  27. leetCode解题记录4 – 寻找两个有序数组的中位数(JS, TS, PY版) 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2。 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n))。 你可以假设 nums1 和 nums2 不会同时为空。 示例 1: nums1 = nums2 = // 则中位数是 2.0 复制代码 示例 2: nums1 = nums2 = // 则中位数是 (2 …
  28. 前端跨域问题解决方式 出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓…
  29. webpack编译流程浅析 webpack 只支持JS模块,所有其他类型的模块,比如图片,css等,都需要通过对应的loader转成JS模块。所以在webpack中无论任何类型的资源,本质上都被当成JS模块处理。 Webpack 源码是一个插件的架构,他的很多功能都是通过诸多的内置插件实现的。 从配置文件读取 entry 开始,到最后输出 bundle.js 的过程,就是主线 …
  30. 通过事例重温一下常见的 JS 中 15 种数组操作(备忘清单)好消息:阿里云服务器2019Hi拼团优惠活动正在火热进行中,新老用户均可参与,2核1G云服务器仅需79元,1核2G香港服务器仅需719元/3年,更多服务器配置及价格请关注:Hi拼团,或点此了解“云上爆款2折特惠活动”。同…
  31. 【Jetty 基础知识】WebSocket 的用法总结 文章首发于公众号【大数据学徒】,感兴趣请搜索 dashujuxuetu 或者文末扫码关注。 因为 Apache Zeppelin 中使用了 Jetty,所以我需要补充一下 Jetty 的相关背景,以便阅读 Zeppelin 的相关代码,其中 WebSocket 是很重要的内容,因此通过阅读学习 Jetty 的 WebSocket API 文档 总结出了本文的内容。 内容提要: …
  32. JavaScript中的浅拷贝和深拷贝 我第一次接触 浅拷贝 和 深拷贝 的概念是在学 C 和 C++ 的时候,虽然现在已经差不多忘得干干净净了,但我记得一点的是它们和内存是有关系的。之后再看到这个概念在面试中提到,我天真的以为,浅拷贝就是这样子的: var a = { name: ‘老曹’ }; var b = a; 复制代码 后来大致搞懂后,才知道我是多么的无知… 在讲…

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流