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

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

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