20190607 前端开发日报

前端工程师如何成为全栈工程师?;Vue 框架原理相关知识点;【前端词典】 Vue 响应式原理其实很好懂;你真的会用 Promise 吗?;还可以这么玩?超实用 Typescript 内置类型与自定义类型;WebSocket,不再“轮询”;如何通过JavaScript API处理CSS;在JavaScript中将值转换为字符串的5种方法

  1. 前端工程师如何成为全栈工程师? 前端工程师如何成为全栈工程师? 这里有一个概念我们先要搞清楚,前端工程师做什么?全栈工程师又做什么? 人的精力是有限的,一个人不可能什么都懂。离开了项目本身,去谈全栈工程师还是前端工程师后端工程师,意义并不大。因为你会的再多,用不上也是没用的,技术更新很快,你一两年不用也就过时了。 如果...
  2. Vue 框架原理相关知识点 create和mounted 的区别 参考 juejin.im/post/5afd7e… juejin.im/post/5c6d48… MVVM框架的设计理念 为什么选择vue 为什么使用vue,首先要看和其他框架React/Angular的对比 React React 的特别是使用 JSX,有些人喜欢用,有些人不喜欢?看它的语法就知道 一个rend...
  3. 【前端词典】 Vue 响应式原理其实很好懂 这是十篇 Vue 系列文章的第三篇,这篇文章我们讲讲 Vue 最核心的功能之一 —— 响应式原理。 如何理解响应式 可以这样理解:当一个状态改变之后,与这个状态相关的事务也立即随之改变,从前端来看就是数据状态改变后相关 DOM 也随之改变。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。 ...
  4. 你真的会用 Promise 吗? 前言:回调地狱 试想一下,有 3 个异步请求,第二个需要依赖第一个请求的返回结果,第三个需要依赖第二个请求的返回结果,一般怎么做? try{ // 请求1 $.ajax({ url: url1, success: function(data1){ // 请求2 try{ $.ajax({ url: url1, data: data1, ...
  5. 还可以这么玩?超实用 Typescript 内置类型与自定义类型有时候我们也需要表格对应的搜索表单,需要其中一两个搜索项,如果刚接触 typescript 的同学可能会立刻这样写:
  6. WebSocket,不再“轮询” 1. 前言 本文先讲解WebSocket的应用场景和特点,然后通过前后端示例代码讲解,展示在实际的开发中的应用。 1.1. 应用场景 WebSocket是一种在单个TCP连接上进行全双工通信的协议, 是为了满足基于 web 的日益增长的实时通信需求而产生的。我们平时接触的大多数是HTTP的接口,但是在有些业务场景中满足不了我们的需求...
  7. 如何通过JavaScript API处理CSS 很多场景我们是需要借助JavaScript相关的API来帮助我们处理Web页面中的CSS。 CSSOM(CSS Object Model) 中提供了一些JavaScript的API处理CSS。除此之外,还可以通过JavaScript来操作 DOM元素中的 attribute 、样式和类来操作CSS。由于JSX和无数JavaScript框架等概念的出现,使得JavaScript API与DOM交互变得越来越流...
  8. 在JavaScript中将值转换为字符串的5种方法 如果您关注Airbnb的样式指南,首选方法是使用 “String()” :+1: 它也是我使用的那个,因为它是最明确的 - 让其他人轻松地遵循你的代码的意图 请记住,最好的代码不一定是最聪明的方式,它是最能将代码理解传达给他人的代码:100: const value = 12345; // Concat Empty String value + ''; // Template Strin...
  9. Vue核心50讲 | 第一回:Vue 与 MVVM 之间那些事儿书接上文,上一回咱们说到了如今的前端江湖早已是框架三分天下的格局。接下来,咱们就要说到主角 Vue 了。在说真正的 Vue 内容之前,咱们还要先来说说 Vue 与 MVVM 之间的那些事儿。
  10. 你知道HTML、CSS、JS、Services、PHP、ASP.NET 是什么来头么? 首先我们要知道访问网站的流程是什么?大家每天也访问。 假设大家在浏览器地址栏输入这个问题的地址 https://www.头条.com/question/22689579 HTML 与 CSS 当自己的电脑得到一个 html页面 (图中HTTP 响应中 body 里的内容)之后,就会对它进行解析。HTML 就是一种超文本标记语言。给大家举一些实例...
  11. nodejs 的 http.createServer 过程解析 戳蓝字「 高级前端进阶 」关注我们哦! 下面是nodejs创建一个服务器的代码。接下来我们一起分析这个过程。 var http = require('http'); http.createServer(function (request, response) { response.end('Hello World '); }).listen(9297); 首先我们去到lib/http.js模块看一下这个函数的代码...
  12. webpack学习之路(二)webpack-dev-server实现热更新 上一章对 webpack 的配置有了简单的认识。 这一章,我需要学习的是 webpack 热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器。 webpack热更新 webpack-dev-server 自动刷新 webpack-dev-server 为你提供了一个简单的 web 服务器,并且能够实时重新加载( live reloading )。 ...
  13. 【JS基础】类型转换知多少 开胃菜 先说一个题外话,我在工作中遇到一个问题,需要比较 "08:00" 和 "09:00" 的大小,最后我找到三种方法: 在两个字符串前后各拼接相同的年月日和秒,拼成完整的时间格式进行比较: var head = "2016-01-01 " var foot = ":00" var time1 = head + "0...
  14. 复习webpack4之如何编写loader 之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。 这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好...
  15. 尤雨溪大大在 6 月 4 日的 Vue3.0 的技术分享尤大大于 6 月 4 日,在深圳某科技公司做了一次 Vue 相关的技术分享。 这里我把现场的 PPT 分享给大家。 让大家了解 Vue3.0 相关的最新进展。 文章地址: [链接] [链接]
  16. 原生 JS 撸一个轮播图(支持拖拽切屏) 用惯了各种各样的组件,并没有真正意义上的封装一个可以拖拽切屏的轮播图,经过一番编写,发现写这样一个轮播图要想写的好,还真的是挺有难度,不同设备的不同事件完备性?事件触发时机的把控?如何更好的去封装?自适应窗口后的事件重置?等等...,看看swiper这个库的源码,就知道小事情也可以不简单。 现在写的这个...
  17. 12个常见的实战场景 - [webpack 第二篇] 目录结构如下: webpack.config.js配置如下: const path = require('path'); module.exports = { entry: './main.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') //必须是绝对路径 } }; 复制代码 以上是一个最基础的配置,我们接下来一步...
  18. 新手使用vue-router传参时注意事项1. 使用name和params组合传参 {代码...} 路由配置 {代码...} 获取参数 {代码...} 刷新参数丢失 显示 undefined {代码...} 注意:此方法第一次跳转是没有问题的,参数也可以传过去,但是刷新页面后,参数就没了 (p...
  19. 如何写一个 vue 插件 在开发项目的时候,我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置。但是官方 cli3 现在并不支持搭建 plugin 开发的项目。 还好,已经有大神(Kazupon)走在了我们前面,我们就用现成的 vue-cli-plugin-p11n 。 如果你没有安装 vue-cli,请先安装 npm i -g @vue/cli 复制代码 首先,搭建项目 ...
  20. MockJS快速入门 在前后端分离的开发环境中,前端同学需要等待后端同学给出接口及接口文档之后,才能继续开发。而MockJS可以让前端同学独立于后端同学进行开发,前端同学可以根据业务先梳理出接口文档并使用MockJS模拟后端接口。那么MockJS是如何模拟后端接口的呢?MockJS通过拦截特定的AJAX请求,并生成给定的数据类型的随机数,以此来...
  21. 大神是怎样用函数式 JavaScript 计算数组平均值的 译者按: 有时候一个算法的直观、简洁、高效是需要作出取舍的。 原文: FUNCTIONAL JAVASCRIPT: FIVE WAYS TO CALCULATE AN AVERAGE WITH ARRAY REDUCE 译者: Fundebug 本文采用意译,版权归原作者所有 函数式编程中用于操作数组的方法就像“毒品”一样,它让很多人爱...
  22. 翻译: JavaScript中对象解构的3种实际应用 (渣渣翻译,如果看翻译不开心可以看->原文, ) 现在你可能非常熟悉js中解构的概念了!解构这个概念来自2015年ES6草案, 但如果你需要更深一步的了解它, Mozilla有一篇更深入的文章说明它是如何工作的。(文章底部) 但是,了解解构如何工作并不等于我们了解了如何使用它。使用这三个解构模式可以让你的代码更加清晰...
  23. 前端bug录-移动端下载图片前天,快下班的时候,一朋友发来一个战绩图。这是要约我上分?(这兄弟一手 C 位吊打亲友)。我果断拒绝三连。结果,小韭菜问我,右边那个图怎么做?那好了,事情从这里开始
  24. 如何提升JSON.stringify()的性能?1. 熟悉的JSON.stringify() 在浏览器端或服务端,JSON.stringify()都是我们很常用的方法: 将 JSON object 存储到 localStorage 中; POST 请求中的 JSON body; 处理响应体中的 JSON 形式的数据; 甚至某些条件...
  25. 前端核心工具:yrn、npm、cnpm三者如何优雅的在一起使用 ? 一位用不好包管理器的前端,是一个入门级前端,一个用不好 webpack 的前端,是一个初级前端 三个包管理器是可以一起用的,只要你够胆大心细,就没任何问题! 在 JavaScript 编写中,我们尽量不要定义全局变量,封装函数尽量不要有副作用,因为全部变量的查询时间会比局部变量的查询慢,更是考虑在Node的环境中无法...
  26. 浅谈CSS calc()函数的用法css3 的 calc() 函数允许我们在属性值中执行数学操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。
  27. vue组件props传值,对象获取不到的问题 先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1、home.vue(父组件)--personal是被传的参数 <!--子组件--> <form-picker class="form-picker" :personal="personal" >...
  28. 用 Vue 开发自己的 Chrome 扩展[每日前端夜话0x7F] 每日前端夜话 0x7E 每日前端夜话,陪你聊前端。 每天晚上18:00准时推送。 正文共:3509 字 预计阅读时间: 10 分钟 翻译:疯狂的技术宅 来源: sitepoint 浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网...
  29. 巧用 ES6,轻松优化 Vue 代码 对 Web 来说 ES6 是一次重大更新。它引入了许多新功能,解决了 JavaScript 开发者面临的许多痛点。而且它的一些功能特别适合解决开发者使用 Vue.js 时出现的问题。本文会介绍 ES6 的四种有助于 Vue 的功能,探讨这些功能的工作原理,以及它能为你的应用和网站解决哪些问题。 简写方法定义 我要介绍的第一个功能主要...
  30. Web 前端测试指南 最近分享了关于前端测试的一些内容,关于开发如何通过测试来提升效率,常见的测试框架,以及什么的测试指标是我们关心的。 经常会遇到代码审查时候遭遇到非常多的"同事不理解" 经常会遇到线上产生很多未知的 bug 经常会遇到 Dev 和 测试理解的不一致 那么...
  31. vue2 配置scss2、配置 webpack.base.conf.js找到webpack.base.conf.js文件的module模块下面的rules添加以下代码
  32. #前端技术#【Node.js 技术栈】详见: 这个仓库记录了原作者的学习历程,旨在为 Node.js 学习者提供较详细的学习教程,侧重点倾向于 Node.js 服务端所涉及的技术栈。

    Node.js 技术栈
  33. Vue SSR技术方案落地实现—构建同构应用 1)、服务器端渲染:这种技术方案在前端领域处于蛮荒时代就已出现,当时的解决方案主要是后台开发通过模板引擎来设计(如:Java Web的JSP);简而言之,就是模板页面在后台获取到数据并填充,然后响应返回模板页面html字符串给浏览器渲染; 2、为什么要使用服务器端渲染? 1)、优化seo:它主要解决搜索引擎SEO优化(A...
  34. vue,angular,react框架对比 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。 View通过Controller来和Model联系,Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的。 用户User通过控制器Controller来操作模板Model从而达到视图View的变化。 2.MVP:是从MVC模式演变而来...

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

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

原文:20190607 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20190607.html)