20190306 前端开发日报

Vue 性能优化:如何实现延迟加载和代码拆分?;「前端面试题系列8」数组去重(10 种浓缩版);如何优雅的在 vue 中添加权限控制;你也许不知道的Vuejs – 最佳实践(3);7 个开放式的 CSS 面试题及回答策略;Vue简史;vue+webpack4多页面打包配置;李狗蛋和二狗子因为 HTTP or RPC 打起来了

  1. Vue 性能优化:如何实现延迟加载和代码拆分? 移动优先方法已经成为一种标准,但不确定的网络条件导致应用程序快速加载变得越来越困难。在本系列文章中,我将深入探讨我们在 Storefront 应用程序中所使用的 Vue 性能优化技术,你们也可以在自己的 Vue 应用程序中使用它们来实现快速加载。 Webpack 捆绑的工作原理 本系列文章中的大多数技巧都与如何使 JS 包变得…
  2. 「前端面试题系列8」数组去重(10 种浓缩版)前言 这是前端面试题系列的第 8 篇,你可能错过了前面的篇章,可以在这里找到: JavaScript 中的事件机制(从原生到框架) 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法 伪类与伪元素的区别及实战…
  3. 如何优雅的在 vue 中添加权限控制 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作。作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制。 需求 因为这是一个工作上的业务需求,所以对于我来说主要有两个地方需要进行权限控制。 第一个是侧边菜单栏,需要控…
  4. 你也许不知道的Vuejs – 最佳实践(3) 相信大多数使用 Vue 项目都会面临国际化的问题,而 vue-i18n 便是国际化的不二之选,它用起来非常简单,但是同时也会带来一些问题和挑战。本篇是个人在项目上国际化时一些经验的总结,希望能在国际化的道路上帮到你。 基本使用 vue-i18n 官方文档介绍的很清楚,先在 src/lang 目录下分别创建…
  5. 7 个开放式的 CSS 面试题及回答策略这个问题可以让面试官了解求职者使用 CSS 的经验。它还可以告诉面试官该人是否将该技能作为业余爱好或在学术或专业环境中学习。
  6. Vue简史 题记 “谁掌握了过去,谁就掌握了未来”——乔治.奥威尔 前言 发端于2013年的个人项目,已然成为全世界三大前端框架之一,在中国大陆更是前端首选。 它的设计思想、编码技巧也被众多的框架借鉴、模仿。 学习研究Vue的演进,对于前端同学来说,是提高自身认识和水平的法门。 纪略 Ø 2013年,在Google工…
  7. vue+webpack4多页面打包配置多页面配置通常有两种形式,一种是多页面多配置,一种是多页面单配置。因为webpack(3.1以上)可以直接处理一个配置对象的数组,所以可以为每个页面单独写一份配置。  通常来讲,多配置的优点是配置灵活、独立,…
  8. 李狗蛋和二狗子因为 HTTP or RPC 打起来了 从前有两个程序员,一个叫李狗蛋一个叫二狗子,正在启动一个 web 项目。李狗蛋说我们系统交互就用HTTP听我的准没错。二狗子说,为什么我们不用RPC呢听我的准没错?李狗蛋说凭什么要听你?二狗子说那凭什么要听你的?李狗蛋说老子说用HTTP就用HTTP老子天下第一。二狗子脸无表情说了一声,滚…
  9. 让我们用gulp写个前端脚手架 公司有个新项目要做官网,需要支持国际化,UI设计了很多页面,老板着急要于是我们就直接用 html + css + jquery分工开发了, ,做出来的项目结构是这样的(直接部署到服务器上): 等到项目维护迭代的时候就很麻烦,遇到了很多问题: 每个html页面都有导航、footer、head等公共页面,修改需…
  10. 手摸手,一起从0到1走进vue的世界(一) 写在前面 相信进来的小伙伴都对vue有一定的了解或者使用,毕竟现在前端最火的框架之一,vue是最好学的和入门相对简单,毕竟是中文吧,亲切感倍增,鄙人呢,现在的工作用的主要框架也是vue,平时喜欢追根溯源,最近身边很多小伙伴去面试或者做面试官,反馈的某某大佬,写代码棒棒的,但在原理和使用场景方面不够透彻,…
  11. 从手机端 H5 制作来看 WEB 动画的术与道 我们在微信朋友圈里经常看到很多人分享 H5 的链接,有的科技感十足,有的展示炫目,有的非常有创意,各大公司也把H5作为他们品牌传播,活动预热的很好方式。企业商户对于这种方式也很有好感,从而导致了 H5 制作行业涌进大批从业者。这几年做过几十个 H5 ,每一次都在思考动画与技术的关系,于是记录下来。 H5 当你…
  12. ES6 Promise 执行解析 作为一门单线程的语言,刚学习 JavaScript 语言的时候,我曾怀疑过 JavaScript 在处理 ajax 数据请求,文件解析等过程效率会很低,而且在执行这些任务较大的代码中,会严重阻塞后面代码的执行。但让人兴奋的是,这门语言具有异步加载的特性。 事件循环 1. 含义 javascript 提供一种机制来处理程序中多个块的执行,…
  13. Javascript – Generator-Yield/Next 和 Async-Await Generator (ES6) generator 函数是一个可以根据用户需求,在不同的时间间隔返回多个值,并能管理其内部状态的函数。如果一个函数使用了function* 语法,那么它就变成了一个 generator 函数。 它们与正常函数不同,正常函数在单次执行中完成运行,而 generator 函数可以被暂停和恢复 。它们确实会运行完成,但触发…
  14. webpack系列-插件机制杂记 系列文章 Webpack系列-第一篇基础杂记 webpack系列-插件机制杂记 前言 webpack本身并不难,他所完成的各种复杂炫酷的功能都依赖于他的插件机制。或许我们在日常的开发需求中并不需要自己动手写一个插件,然而,了解其中的机制也是一种学习的方向,当插件出现问题时,我们也能够自己来定位。 Tapable Webpac…
  15. Vue 的小奇技(第六篇):在 Vue.js 2.6 中不使用 Vuex 来创建 store 特别声明:本文是作者Alex Jover 发布在VueDose 上的一个系列。 版权归作者所有。 译者在翻译前已经和作者沟通得到了翻译整个系列的授权。 为了不影响大家阅读,获得授权的记录会放在本文的最后。 Vue.js 2.6 介绍了一些新的特性,其中我喜欢的一个就是全局 API:Vue.observable 现在你可以在…
  16. Vue 开发经验小记 white-space : nowrap overflow: hidden text-overflow : ellipsis 复制代码 3.显示宽高相等的图片,宽度为屏幕宽度,高度与宽度相等 <div class="image-header"> <img :src="food.image"/> </div> .image-header position: relative width:100% height: 0 …
  17. Vue源码简析之视图生成(上) new Vue({ el: ‘#app’, template: ‘<div>{{msg}}</div>’, data: { msg: ‘hello vue’ } }) 复制代码 最终会生成 <div>hello vue</div> 的视图,下面来分析一下流程。 new Vue() function Vue (options) { if (process.env.NODE_ENV !== ‘production’ && !(thi…
  18. 前端进击的巨人(八):浅谈函数防抖与节流本篇课题,或许早已是烂大街的解读文章。不过春招系列面试下来,不少伙伴们还是似懂非懂地栽倒在(~面试官~)深意的笑容之下,权当温故知新。
  19. JS 中的面向对象 prototype class 面向对象编程是将事物看成一个个对象,对象有自己的属性有自己的方法。 比如人,我们先定义一个对象模板,我们可以定义一些属性 比如,名字年龄和功能,比如走路。我们把这个叫做类。 然后帮们将具体数据传入模板,成为一个个具体的人,我们将它叫做实例。 JS 中面向对象是使用原型( prototype )实现的。 fu…
  20. SpringBoot 实战 (十六) | 整合 WebSocket 基于 STOMP 协议实现广播消息 前言 如题,今天介绍的是 SpringBoot 整合 WebSocket 实现广播消息。 什么是 WebSocket ? WebSocket 为浏览器和服务器提供了双工异步通信的功能,即浏览器可以向服务器发送信息,反之也成立。 WebSocket 是通过一个 socket 来实现双工异步通信能力的,但直接使用 WebSocket ( 或者 SockJS:WebSocket 协议的模…
  21. WebSocket 从入门到写出开源库 我已经 2 个月没有发文了,看到有人问: ‘那个专注爬虫小奎因去哪了?’,我就赶紧跳出来了。 另外说明一下,德玛西亚之翼-奎因这个 ID 现在换成了 AsyncIns 我计划在今年的夏天去北京,在去之前我需要做好技术准备,所以最近一直是在学习。我的学习方式很简单明了:看文档、读源码、造轮子。造轮子是我认…
  22. 学习 PixiJS — 交互工具Pixi 内置一组功能有限的用于鼠标交互和触摸交互的方法,但是对于游戏和应用程序所需的丰富交互性,建议使用第三方库来简化操作,这篇文章介绍的是 Tink 库,它有通用的指针对象、拖放精灵、按钮对象、键盘控制 …
  23. vueX10分钟入门通过本文你将: 1.知道什么是vueX. 2.知道为什么要用VueX. 3.能跑一个VueX的例子。 4.了解相关概念,面试的时候能说出一个所以然 5.项目中用Vuex知道该学什么东西。 好,走起。 1.什么是vueX? {代码…} 翻译成人…
  24. Spring Boot 2.0.2+Ajax解决跨域请求的问题 问题描述 后端域名为A.abc.com,前端域名为B.abc.com。浏览器在访问时,会出现跨域访问。浏览器对于javascript的同源策略的限制。 HTTP请求时,请求本身会返回200,但是返回结果不会走success,并且会在浏览器console中提示: 已拦截跨源请求:同源策略禁止读取位于 https://www.baidu.com/ 的远程资源。(原因:C…
  25. 揭秘JavaScript中“神秘”的this关键字 当我开始学习 JavaScript 时,花了一些时间来理解 JavaScript 中的 this 关键字并且能够快速识别 this 关键字所指向的对象。我发现理解 this 关键字最困难的事情是,您通常会忘记在您已阅读或观看过一些 JavaScript 课程或资源中解释的不同案例情况。在 ES6 中引入箭头函数后,事情变得更加混乱,因为箭头函数 this 以不…
  26. React与Vue模板使用比较(一、vue模板与React JSX比较) 本人原为React开发者,现在转战Vue。在这些天接触Vue的日子里,说说自己的感觉:同样的登山活动,React就像父亲,给你必要的登山工具就让你出发了;Vue就像母亲,在你登山之前为你准备好了所有东西,唠唠叨叨了一波,规划了路线,给了你厚厚的导航指南,才让你出发。 本文目的 方便React开发者更快的上手Vue …
  27. jsproxy: 一个基于浏览器端 JS 实现的在线代理 在线预览 https://www.gk.jsproxy.tk (目前仍在更新中,最好使用隐身模式访问,避免缓存导致的问题) 安装部署 依赖 OpenResty acme.sh node.js / webpack / webpack-cli CentOS7 可执行 ./server/setup.sh 一键安装。 配置 首先需要一个域名,例如 example.com,解析 @ 和 * …

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

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


关注我

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

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

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