20190903 前端开发周报

Vue插槽,你想了解的都在这里;前端20个灵魂拷问 彻底搞明白你就是中级前端工程师 【下篇】;吃饱了撑的系列之JavaScript模拟多线程并发;Javascript基础篇: 常见的Dom基本操作方法;Vue — 使用Mixins;Rollup.js是什么?;Javascript并发模型和事件循环;前端跨域问题及解决方案

  1. Vue插槽,你想了解的都在这里 插槽将 <slot></slot> 作为子组件承载分发的载体,简单的用法如下 10.1.1 基础用法 var child = { template: `<div class="child"><slot></slot></div>` } var vm = new Vue({ el: ‘#app’, components: { child }, template: `<div id="app&qu…
  2. 前端20个灵魂拷问 彻底搞明白你就是中级前端工程师 【下篇】最近一些跨平台技术,React-native和flutter之类的,比较火。但是,我还是不准备把它们放进来,因为那是为做App而生,我想把Electron这个桌面端跨平台的技术放进来。理由是什么,后面说
  3. 吃饱了撑的系列之JavaScript模拟多线程并发 20190901 前端开发日报 吃饱了撑的系列之JavaScript模拟多线程并发;Javascript基础篇: 常见的Dom基本操作方法;算法修炼之Javascript版剑指Offer – 反…
  4. Javascript基础篇: 常见的Dom基本操作方法 通过ID选取元素是最简单和常用的选取元素的方法,ID选择器性能优于其他选择器 var title = document.getElementById("title"); 复制代码 ID不存在,则返回null 1.2、名称选择器 基于name属性的值选取元素区别于ID选择器。 其一: name属性值 不是必须惟一,多个元素可以能同样的名称; 其二: name属性只…
  5. Vue — 使用Mixins 当你的项目越来越大,你可能会发现在相似的组件里一遍又一遍的在复制粘贴相同的代码段(data,method,watcher等)。当然,你也可以把这些独立文件(指相似的组件)写成一个组件,然后用props来定制它,但是使用太多的props很容易导致混乱。为了避免这个问题,大多数人仅仅还是继续选择添加重复的代码,尽管感觉有更好的…
  6. Rollup.js是什么? Rollup 是前端模块化的一个打包工具,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。 Rollup 对代码模块可以使用新的标准化格式,如:ES6,而不是先前的解决方案,如:CommonJS 和 AMD。 Rollup 被广泛用于 Javascript libraries 的打包 Quick Start rollup-starter-lib rol…
  7. Javascript并发模型和事件循环 函数调用形成一个栈帧 function foo(b) { var a = 10; return a + b + 11; } function bar(x) { var y = 3; return foo(x * y); } console.log(bar(7)); // 42 复制代码 当调用bar时,创建了第一个帧,帧中包含了bar的参数和局部变量 当bar中调用foo时,第二个帧就被创建,并被压到第一个帧之…
  8. 前端跨域问题及解决方案 同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到 XSS、CSFR 等攻击。 同源策略限制内容有: Cookie、LocalStorage、IndexedDB 等存储性内容 对 DOM 节点的访问与操作 AJAX 请求不能发送 所谓同源是指**"协议+域名+端口"**三者相同,…
  9. NoahV,百度智能运维前端框架开源了 作者简介 喻友文    百度高级前端研发工程师 负责百度智能运维产品(Noah)的前端研发工作,在前端框架、前端工程化等方向有广泛的实践经验。 干货概览 在前面的文章中为大家介绍了百度智能运维团队研发的各类运维管理平台,包括百度内部的…
  10. 学习React应该具备的JavaScript基础知识 React是众多主流JavaScript框架之一,如果想要较好的掌握React,那么对于JavaScript方面的知识还是非常重要的。但在很多开发者眼里反而顾此失彼,觉得掌握了JavaScript框架就可以无敌,事实上并非如此,至少Web发展至今,HTML、CSS和JavaScript还是Web三大基石。只有更好的掌握这些基础,在平时的工作中才能游刃有余。在…
  11. 【干货】前端进阶应该知道的这些调试方法平时工作量大并且很忙,也就意味着难免会在写代码的时候一不小心写出BUG。如果测试一旦没有测到,代码上到现网往往就是事故,很多同学在这种时候手忙脚乱,不知道怎么调试解决。本文就这点主要讲一下平时前端调试…
  12. React、Vue在IE的兼容问题 近期项目需要兼容IE 重大的任务留到我的肩上 左翻翻右找找 小问题难倒英雄汉 解决了一些后抓紧写篇总结 避免各位和我一样 脑袋抓爆 头发掉一地 Vue在IE10中无法获取父元素 原始 let parent = this.$el.parentElement 解决 这玩意还能咋解决 用原生呗 class、id 都行 let parent = document.getEl…
  13. 分享VUE实用的富文本MarkDown 最近在做一个博客的过程中,写文章这个需求可以说是最重要的,这对比markdown和quill-editor两者,我还是更喜欢markdown这样的富文本工具,那VUE项目如何去使用markdown富文本工具,以及如何在页面上显示我们所记录的markdown文本呢 接下来就以我博客为例子来分享给大家这款实用的富文本 安装 这里我们需要安装2个…
  14. 面试分享:1 年经验初探前端社招 本文首发于 我的Github 。 年中决定离开当前所在的公司,想受一受外面社会的毒打。也面了 2 家还不错的公司(字节跳动 和 拼多多),在此记录分享一下。 字节跳动 字节跳动的技术面试都是以视频面试的形式进行的。 第 1 轮 1.1 自我介绍 1.2 js 基本知识 主要考察 js 中的基本类型、 typeof 和 instanceof …
  15. JS数组基本操作——数组遍历到底有多少种方式?源于一次面试,一起面试的同事问面试者的一个问题:数组遍历有哪些方式?想来数组操作是平时开发中的常用技能,面试者吞吞吐吐大概就说出了两种方式吧,最后就淘汰掉啦(面试者是个很认真的妹纸,面试都在简单做…
  16. 深入JavaScript(一)工作原理 平时我们只管写代码 然后通过浏览器或者Node执行 并未深层次探究 大多数人都听过引擎 例如V8 也知道JavaScript是一门单线程语言 这篇文章简述代码执行过程 后续对每一步进行深入探究 运转过程 JavaScript代码的整个执行过程需要 引擎、作用域、编译器 的合作完成 编译器 负责词法分析 语法分析 代码生成供…
  17. 你不知道WebSocket吗? WebSocket是一种在单个TCP连接上进行全双工通信的协议。这里我们发现了一个有趣的词:”全双工”,那我们就来简单了解下通信方式有哪些! 单工 通信双方中,一方固定为发送端,一方则固定为接收端。信息只能沿一个方向传输。 例如计算机与打印机之间的通信是单工模式 说的简单些就是:我打你你只能忍着! …
  18. vue父子组件通信高级用法vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。
  19. 前端安全系列 | XST XST 的全称是 Cross-Site Tracing,中文译作“ 跨站式追踪攻击 ”。具体而言,是客户端发 TRACE / TRACK 请求至服务器,如果服务器按照标准实现了 TRACE / TRACK 响应,则在 response body 里会返回此次请求的完整头信息。 通过这种方式,客户端可以获取某些敏感的 header 字段,例如 httpOnly 的 Cookie 等。 可见 XS…
  20. 基于数据类型的 Vue 动态表单组件 方便不想看完全篇文章的童鞋,简单总结一下,这是篇软广,主要是推广自己在业务中沉淀的一个开源组件 vue-dynamic-form-component 。基于element-ui实现的 vue组件,只需编写类似async-validator的规则,自动生成对应的表单,支持常见输入类型的同时,支持嵌套对象、hashmap、多维数组等复杂类型。有需要的童鞋欢迎使用…
  21. javaScript自带的深拷贝 译注:通过引用调用可能有点绕,你就当做"用引用作为参数调用"。 JavaScript通过引用传递所有的东西。如果你不知道这句话的意思,那么看下这个例子: function mutate(obj) { obj.a = true; } const obj = {a: false}; mutate(obj) console.log(obj.a); // true 复制代码 函数 mutate 更改了作为参…
  22. 前端需要了解的 HTTP 和安全相关的头信息 前言 WEB 应用越来越复杂,前端所承担的也不再仅仅是切图、写界面的任务。作为一个前端工程师,掌握必要的 WEB 安全相关的知识,也是必要的。 这里收集整理了 HTTP 中和安全相关的头信息内容,了解这些头信息,在提升网站的安全性上,是有不少帮助的。 安全相关的头信息 Content-Security-Policy …
  23. 收集错误信息及堆栈-前端监控之数据收集篇 js错误是第一指标,任何一个js错误都有可能导致阻塞,影响我们页面的正常运转。 本篇主要对js错误收集的分享 1. 了解异常发生的情况和影响 注: 了解异常发生的情况及影响, 有助于我们选择合适方式进行异常捕获处理 任何一个js异常的发生都会导致当前代码块不能正常执行 那么那些情况会导致js异常阻塞呢? …
  24. 一文彻底理解 JS原型链 前言: JS原型是面试时候极为重要一个知识点,很多小伙伴都说知道,看过,却只能答出一二,真正能够讲清楚的很少,希望这边文章能够帮助正在学习JS原型的小伙伴们。 一、 构造函数,原型对象以及实例对象之间的关系           1 构造函数(constructor)中有 prototype 属性, …
  25. 正确姿势开发vue后台管理系统 相信许多人和我一样刚接触 vue 时看文档都很枯燥,看完 vue,还有 vueRouter 、vuex 、vue-cli、es6 (学不动了。。。 ) 对于看完教程之后又迟迟不能上手实际项目,只能写一些简单的小demo,这肯定和实际生产工作是有出入的,于是乎我就打算自己从零开始使用最新的技术栈搭建一个vue后台管理系统,依此加深对理论知识的学…
  26. JavaScript 基础知识点 JavaScript (JS) 是一种 编程语言 ,为通常用于 客户端(client-side) 的网页动态脚本,不过,也常通过像 Node.js 这样的包,用于 服务器端(server-side) 。 今天,发一篇关于 Js基础知识点 的文章,为更多的新人指路。总会有人在你的前方为你探路,前行之路,你不孤单~ 先来个目录结构 ───1、变…
  27. 前端小纠结-axios.js的实战经验 原文地址 总结一下使用 Axios.js 的遇到的注意事项,如有不对欢迎指正。 本文不是一篇分析源码的文章,如果需要看源码解析看这里 axios实例应用及源码剖析 – xhr篇 (走心教程) ,写的非常不错。 axios.js的流程图 先放张图镇楼,后续的问题需要多看看这张图。 axios.js版本问题 之前没有注…
  28. 你可能不知道的 64 个非常实用的 JS 小技巧 前言 何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步。 每写好一篇文章,都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、…
  29. 前端实现打印图像功能 前提:后台返回是绘制医用心电波形报告的数据,前端通过canvas在网页上绘制再进行打印并生成PDF文档! 一.  尝试LODOP打印插件 之前前端表单打印功能有使用过LODOP打印插件,需安装相应的LODOP的打印软件,lodop的使用方法2种。第一种方式是通过收集前端标签内容元素成对象 var   htmlstr= $("#ECGR…
  30. 论一个前端工程师如何快速学习,成长。准备自己的35岁 【-原创精读】前端工程师这个岗位,真的是反人性的 我们来思考一个问题: 一个6年左右经验的前端工程师: 前面两年在用jQuery 期间一直在用React-native(一步一步踩坑过来的那种) 最近两年还在写微信小程序 下面一个2年经验…
  31. 后会无期之jshttp解析(2) 从小到大都是优,你让我怎么从良 昨天解读了 fresh 这个库,我们了解了服务器是如何对比文件是否更新了,其中用到了etag,那么今天我们就趁热打铁,了解下etag是怎么生成的,同样是来自jshttp的 ETag 库。 ETag ETag是干什么的,这里摘读下MDN的官方解释 如果给定URL中的资源更改,则一定要生成新的Etag值。 …
  32. css如何实现n宫格布局?常见应用场景 现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在. 带边框, 常用在”功能导航”页面 无边框, 常用在首页分类 设计目标 在scss环境下, 通过mixin实现n宫格, 并且可以支持”有无边…
  33. 前端培训-中级阶段(13、15)- web网络攻击、CSP内容安全策略(2019-08-29期)前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(…
  34. vue+iview表单校验 描述问题: select学生类别,根据类别展示相应的内容,直接点击保存按钮,此时出现校验信息,如下图所示: a.当使用v-show时,校验规则能消失,但表单提交校验不通过 b.当使用v-if时,表单校验通过,但是校验规则会保留上一次的校验记录 解决方案: v-show与isUg结合处理 <FormItem v-show="isU…
  35. Redux 和 Vuex 的对比 同样是状态管理库,Vuex 跟 Redux 差不多,几乎与 Redux 的理念一模一样。个人感觉 Vuex 使用起来要比 Redux 简单好懂,也许是因为学了 Redux 理解 Vuex 就简单了。下面来简单对比一下两者,对比可以帮助我们更好的学会使用他们, 没有代码。 1. 核心概念对比 Redux 的核心概念 Vuex 的核心概念 …
  36. 让React组件如文档般展示的6大工具React鼓励我们使用组件构建模块化程序。模块化给我们带来了非常多的好处,包括提高了可重用性。然而,如果你是为了贡献和复用组件,最好得让你的组件容易被找到、理解和使用。你需要将其文档化。
  37. Vue.js技术细节 为了方便 Vue 实例跟踪每个节点的身份,从而重用和重新排列现有元素,需要为每项提供一个唯一的 key 属性。理想的 key 属性值是每项都有并且唯一的 id 。 key 的工作方式类似于一个属性,所以需要用 v-bind 来绑定动态值。 生命周期函数表 生命周期函数 含义 beforeCr…
  38. Web前端学习笔记 HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。MDN解释 HTML5 是 W3C 与 WHATWG 合作制定的下一代 HTML 标准。 现代浏览器都已支持Html5 Html5重要常用的知识点介绍。 文档的类型声明 <!DOCTYPE> 声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML …
  39. vue递归组件实战之简单树形控件1、递归组件-简单树形控件预览及问题 在编写树形组件时遇到的问题: 组件如何才能递归调用? 递归组件点击事件如何传递? 2、树形控件基本结构及样式 {代码…} 3、组件目录及数据结构 目录结构vue-tree VueTree….
  40. vue-cli 3.0脚手架,从入门到放弃(二) 想写好代码,和用好一个工具是离不开的, 一般我们使用的工具有 HuilderX,sublimetext3,vscode,webstorm等,个人目前使用的是hb,和vscode,可以根据个人爱好各自选择,但一定要熟练。 vue-cli3.0目录结构 这是创建完项目后的基础目录结构,这里我导入了bootstrap框架。接下来从上到下的看一下每个文件…
  41. GitHub 上的 5 个高赞机器学习项目 对于程序员而言,Github无疑是一个巨大的宝库,其全球注册用户超过3100万,仓库数量突破一个亿。(2018年年底统计数据) 但我们也要认识到,拥有如此庞杂的项目和用户,泥沙俱下,垃圾项目也不少,要从中找到找到优质的项目,不亚于从沙里淘金。好在Github对每个项目都设有一个星级,如果用户对项目感兴趣,可…
  42. vuex模块化(module) 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter。 命名空间 默认情况下,模块内部的 action、mutation 和 getter 是注…
  43. JavaScript之深入理解闭包闭包的概念:《JavaScript权威指南》:函数对象可以通过作用域链相互关联起来,函数体内部的变量可以保存在函数作用域内,这种特性称为“闭包”。
  44. 看视频 轻松搞定 高频 JavaScript 手写面试题大厂面试中最喜欢考手写代码,不仅可以看到个人的编程习惯,还能层层递进,展示出个人学习的深度,看视频轻松掌握高频 JavaScript 手写面试题:
  45. javascript异步解决方案 回调函数可以解决存在的异步问题,但回调函数分为,同步与异步: 1.2 回调函数可以解决异步问题 callback 回调函数本身是我们约定俗成的一种叫法,我们定义它,但是并不会自己去执行它,它最终被其他人执行了。 ==优点==:比较容易理解; ==缺点==:1.高耦合,维护困难,回调地狱;2.每个任…
  46. JS中的渣对象 本篇文章主要讲解了JS中对象属性赋值时,会出现的种种情况,在开始之前,为了加深大家的印象,我们来假设一个场景。 让我们来先编个故事 这是一个凄惨/圆满的爱情故事,让我们慢慢来说。 很久以前,有一个很漂亮的女孩,她叫做 小菊 。 var 小菊 = { face: ‘beauty’ } 复制代码 然后呢有一个小屁孩叫做 小明…
  47. 白话 Javascript 原型 如果你看过很多关于 Javascript 原型的文章,还没弄明白或曾经弄明白了现在又糊里糊涂不太清楚,那这篇文章很适合你。 我将用大白话讲讲什么是 Javascript 原型。那我们开始。 第一个吃螃蟹的大明星 曾经有个荒无人烟的小岛,虽然它从未有人涉足,但它却有一个响亮的名字 —— Javascript。 …
  48. Nodejs调试的各种姿势对于绝大部分前端人员,对JavaScript的调试更多停留在浏览器中,类似console.log和debugger,但这种方式对代码侵入性较高,甚至需要刷新页面或重启编译器。转向服务端后,没有浏览器界面,如果仅停留在原来的调试…
  49. vue项目开发规范总结 文件名要为多个单词,且语义明确,同时要为大写驼峰 组件名应该始终是多个单词的,根组件 App 以及 、 之类的 Vue 内置组件除外。 反例: Vue.component(‘todo’, { // … }) 复制代码 好例: export default { name: ‘TodoItem’, // … } 复制代码 组件数据data必须为一个函数 反例…
  50. Node.js 之 Module 模块 采用了 Commonjs 规范,通过 module.exports、require 来导出和导入模块。模块加载机制中,采用了延迟加载的策略。就是说在用到的情况下,系统模块才会被加载,等加载完成后会放到 binding_cache 中。 分类(模块类型) 系统模块 http、buffer、fs 第三方模块 第三方维护的模块,比如 express、koa、mo…
  51. JS 前20个常用字符串方法及使用方式为了回馈读者,《大迁世界》不定期举行(每个月一到三次),现金抽奖活动,保底200,外加用户赞赏,希望你能成为大迁世界的小锦鲤,快来试试吧
  52. 带着问题看React-Redux源码我在读React-Redux源码的过程中,很自然的要去网上找一些参考文章,但发现这些文章基本都没有讲的很透彻,很多时候就是平铺直叙把API挨个讲一下,而且只讲某一行代码是做什么的,却没有结合应用场景和用法解释清…
  53. Vue 构建多页应用实例 经过对单页应用配置的了解,相信大家应该对如何构建一个 Vue 单页应用项目已经有所收获和体会,在大部分实际场景中,我们都可以构建单页应用来进行项目的开发和迭代,然而对于项目复杂度过高或者页面模块之间差异化较大的项目,我们可以选择构建多页应用来实现。那么什么是多页应用,如何构建一个多页应用便是本文所要阐…
  54. 基于Vue CLI3 搭建五脏俱全的移动端H5应用 之前开发vue项目,一直是自己搭建脚手架,并没有使用配套的Vue-CLI。一、是3.0之前的CLI无明显优势,配置繁琐;二、是觉得自己从零配置项目可控性更强。 Vue-CLI 3.0 于去年8月份就已发布,却一直没去了解。近日,有新Vue H5项目开发,就想着用Vue CLI3.0脚手架构建项目。并记录一下构建使用过程。 使用脚手架最好的…
  55. OpenCensus Web:前端性能监控与数据化运营的未来方案 概述 谷歌推出了一个名为OpenCensus Web的OpenCensus扩展,它是一个用于收集网页应用程序性能和行为监控数据的库。该库侧重于在浏览器中执行的前端Web应用程序代码,允许它收集用户端性能数据。它仍处于alpha阶段,API可能会发生变化。 OpenCensus Web与三个应用程序组件交互,即前端Web服务器,Browser JS…
  56. 深入了解 JavaScript 内存泄露用户一般不会在一个 Web 页面停留比较久,即使有一点内存泄漏,重载页面内存也会跟着释放。而且浏览器也有自动回收内存的机制,所以我们前端其实并没有像 C、C++ 这类语言一样,特别关注内存泄漏的问题。
  57. 从零开始搭建 Vue 脚手架工具(一) 在实际的开发过程中,从零开始建立项目的结构是一件让人头疼的事情,所以各种各样的脚手架工具应运而生。它们功能丰富,但最核心的功能都是能够快速搭建一个完整的项目的结构,开发者只需要在生成的项目结构的基础上进行开发即可,非常简单高效。 接下来就让我们一来看看一个脚手架是如何从0开始搭建的吧。 整体架构…
  58. Element ui表格组件+sortablejs实现行拖拽排序运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便
  59. 七篇前端面试必考知识点,助你一臂之力 文章大部分内容是做一些知识点的总结,不会面面俱到,对于一些具体的实现步骤和底层原理的代码并不会贴出来,不然篇幅实在是太长啦 不过不必担心,相关知识点的详细讲解会贴出文章链接供大家参考,这些都是博主平常写的笔记和看过的一些优秀的博文,希望能够帮助你查漏补缺,梳理起你的前端知识体系~ 文章内容较多,…
  60. 从今天开始,成为一名了不起的 JavaScript 工程师 一部站在工程师角度,帮助前端工程师提升能力和视野的书上架了! 点击下方阅读原文可直接查看详情

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

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


关注我

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

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

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