20191020 前端开发周报

提高开发效率之html,js,css 代码规范的潜规则;30分钟 小白级入手vue教程;5 个 JS 不良编码习惯,你占几个呢;前端工具库(持续更新);Vue3.0简单认识;有趣的前端跨域实现方式;基于 HTML5 WebGL 的医疗物流系统;Vue 关于移动端的那些事情(一)

  1. 提高开发效率之html,js,css 代码规范的潜规则 1.大驼峰命名法,首字母都大写 FirstOne 复制代码 2.小驼峰命名法,第一个单词首字母小写,其他跟大驼峰一样 firstOne 复制代码 3.蛇形命名法,单词之间用下划线拼接 first_one 复制代码 4.减号命名法,单词之间用减号分割 first-one 复制代码 这些命名法最大的好处就是可以轻易区分单词跟单词 代码规范…
  2. 30分钟 小白级入手vue教程 王眫子 刚刚毕业不久,小白实力, 把一些基础知识总结一下,也行对新人会有一些帮助 vue介绍 vue是一个前端框架,是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了…
  3. 5 个 JS 不良编码习惯,你占几个呢作者:Dmitri Pavlutin 译者:前端小智 来源:dmitripavlutin 阿里云最近在做活动,低至2折,有兴趣可以看看:[链接] 在阅读JavaScript代码时,你是否有过这种感觉 你几乎不明白代码的作用? 代码使用了很多 Java…
  4. 前端工具库(持续更新) README.md 前端工具库 本仓库主要收集了一些我常用的以及热门的工具库(排名不分先后),还有这些工具的文档、案例等。 目录 前端工具库 目录 Normalizr reselect …
  5. Vue3.0简单认识 更小 更快(*) 加强TypeScript支持(*) 加强API设计一致性 提高自身可维护性 开放更多底层功能 更快 Object.defineProperty -> Proxy (颗粒度更大) Virtual Dom 重构 更多编译优化:slot默认编译为函数(不存在父子组件强耦合),Momomorphic vnode factory,Compiler-generated…
  6. 有趣的前端跨域实现方式 官方解释 1、A网站通过ajax请求访问B网站的数据(即跨域名请求数据) 2、但是ajax请求只能向自己的服务器发送请求,不能进行跨域访问 原因不在服务器,而在于浏览器存在同源政策 3、什么是同源政策? 同源政策是浏览器为了保护用户信息安全,防止恶意网站窃取数据,只允许ajax请求自己的服务 …
  7. 基于 HTML5 WebGL 的医疗物流系统 前言 物联网( IoT ),简单的理解就是物体之间通过互联网进行链接。世界上的万事万物,都可以通过数据的改变进行智能化管理。IoT 的兴起在医疗行业中具有拯救生命的潜在作用。 不断的收集用户信息并且实时的进行诊断,所以未来 IoT 肯定在医疗行业的应用会呈覆盖性。下面是我最近做的一个医疗物流系统,用来观察医疗…
  8. Vue 关于移动端的那些事情(一) 最近公司项目可能会用到 vue 的技术,趁现在有时间,就开始搞移动端的适配,为了方便开发,我的想法是 (viewport+rem+flex) 。rem那块需要进行一个换算需要做一个适配处理,为了方便最好是根据规定的图 (本文采用iPhone6) 编写px,然后通过工具对px进行转换成 rem(px2rem) 。好了,需求已经理清了,开搞!!!。 行动…
  9. jQuery 源码分析(十) 数据缓存模块 data详解 jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据,避免了在JavaScript对象和DOM元素之间出现循环引用,以及由此而导致的内存泄漏。 数据缓存模块为DOM元素和JavaScript对象提供了统一的数据设置、读取和移除方法,在jQuery内部还为队列模块、动画模块、样式操作模块、事件系统提供基础功能,负责维…
  10. 一文轻松搞懂Vuex 概念: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式(官网地址: vuex.vuejs.org/zh/ )。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 换成我们大白话来说:Vuex就是一个状态管理模式,可以简单的理解为一个全局对象,然后我们可以修改这个全局对…
  11. js史上最精简防抖节流(你的比我精简,算我输) 前言 作为前端开发人员,相信大家对防抖和截流早已是十分熟悉了,初次听说这个玩意儿的时候我的第一反应是 防抖,防止抖动?节流,节约流水?? 于是乎百度了一波,终于弄懂。 就是,为了防止事件在短时间内被多次触发的两种解决方案。网上巴拉巴拉一堆说法, 总结: 防抖:你狂点按钮也没有,等你冷…
  12. 【重拾基础】耐人寻味的CSS属性white-space《耐人寻味的CSS属性white-space》,本文说的white-space是一个控制换行和空白处理的CSS属性。我曾经被这个属性烦死,一直没记住,今天决定还是写下来好好琢磨下。
  13. 彻底搞懂Vue中keep-alive的魔法(下) 上一节对 keep-alive 组件的分析,是从我画的一个流程图开始的。如果不想回过头看上一节的内容,可以参考以下的简单总结。 keep-alive 是源码内部定义的组件选项配置,它会先注册为全局组件供开发者全局使用,其中 render 函数定义了它的渲染过程 和普通组件一致,当父在创建…
  14. Vue3.0 响应式系统完全讲解(逐行) 关于响应式原理想必大家都很清楚了,下面我将会根据响应式API来具体讲解Vue3.0中的实现原理, 另外我只会针对 get , set 进行深入分析,本文包含以下API实现,推荐大家顺序阅读 effect reactive readonly computed ref 对了,大家一定要先知道怎么用哦~ 引子 先来段代码,大家可以直接复制哦,注意引…
  15. 一篇文章搞定前端性能优化面试虽然前端开发作为 GUI 开发的一种,但是存在其特殊性,前端的特殊性就在于“动态”二字,传统 GUI 开发,不管是桌面应用还是移动端应用都是需要预先下载的,只有先下载应用程序才会在本地操作系统运行,而前端不同,它是…
  16. TypeScript基础以及在Vue中的应用TypeScript推出已经很长时间了,在Angular项目中开发比较普遍,随着Vue 3.0的即将推出,TypeScript在Vue项目中使用也即将成为很大的趋势,笔者也是最近才开始研究如何在Vue项目中使用TypeScript进行项目的开发。
  17. 熟悉面试中常见的的 web 安全问题背景 之前出去面试的时候, 经常会被问到一些安全方面的问题。 安全涉及的领域很大, 我也仅仅是了解一些皮毛, 每次面试前都要找资料复习, 很麻烦。 所以我就根据之前搜集的一些资料和面试的经验,系统的梳理了…
  18. 浅谈webpack,实现从零到一 webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。 webpack 本身是基于node.js开发的 从 webpack v4.0.0开始,可以不用引入…
  19. vsCode 前端插件推荐-和插件配置 参考自网站: https://segmentfault.com/a/1190000011779959 插件安装完成之后,还要对一些插件进行配置,例如: vetur默认配置, 配置的过程: 打开 文件 > 首选项 > 用户设置(U) > 点击右上角—打开设置(json) // 执行文字相关的导航或操作时将用作文…
  20. 为什么Vue3.0使用Proxy实现数据监听?defineProperty表示不背这个锅 vue3.0中,响应式数据部分弃用了 Object.defineProperty ,使用 Proxy 来代替它。本文将主要通过以下方面来分析为什么vue选择弃用 Object.defineProperty 。 Object.defineProperty 真的无法监测数组下标的变化吗? 分析vue2.x中对数组 Observe 部分源码 对比 Object.defineProperty 和 Proxy …
  21. “寒冬”三年经验前端面试总结(含头条、百度、饿了么、滴滴等)之手写题(一)不论是寒冬还是暖冬,找工作之前都需要做好充足的准备,面试的时候才能做到游刃有余。此文是把我最近找工作准备的以及笔试面试中涉及到的手写题做一个总结。给自己,也给需要的同学。手写题是比较好准备的一个环…
  22. 从零开始再学 JavaScript 定时器 在写 setTimeout 和 setInterval 代码时,你是否有想过一下几点: 他们是怎么实现的? 面试时如果问你原理怎么回答? 为什么要了解定时器原理? 首先 setTimeout 和 setInterval 都不是 ECMAScript 规范或者任何 JavaScript 实现的一部分。它是由浏览器实现,并且在不同的浏览器也会有所差异。定时器…
  23. VUE入门实践(1) 1、简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 2、环境准备 2.1、Node.js安装(npm) 官网地址: https://nodejs.org/en/download/ 复制代码 …
  24. 协议层的攻击:HTTP 请求走私 作者:mengchen@知道创宇404实验室 日期:2019年10月10日 English version:https://paper.seebug.org/1049/ 1. 前言 最近在学习研究BlackHat的议题,其中有一篇议题——”HTTP Desync Attacks: Smashing into the Cell Next Door”引起了我极大地兴趣,在其中,作者讲述了HTTP走私攻击这一攻击手段,并且分…
  25. vuex + keep-alive实现tab标签页面缓存 在开发很多管理系统过程之中,常遇到这种需求,需要对打开路由页面进行缓存,然后在系统页眉提供方便查阅的tab标签进行切换以及对已经缓存页面进行数据刷新和清除数据操作。具体演示如下图所示: 在上面演示中实现了类似 window tab 标签页效果,会对当前数据进行缓存。在浏览器中实现对路由页面的缓存可以…
  26. javascript的一些命名约定 这篇小文章主要是通过一些例子来介绍一些Javascript中一些关于命名变量,函数,类或者是组件的通用约定。虽然这些规则并不是强制性的,但是呢,他们却被一些JS社区所广泛采用,所以,了解他们还是很有必要的。 Javascript命名约定:变量 由于Javascript是大小写敏感的,因此,如果有几个变量,其仅仅是大小写不一样,…
  27. 搞懂JS闭包闭包(Closure)是JS比较难懂的一个东西,或者说别人说的难以理解, 本文将以简洁的语言+面试题来深入浅出地介绍一下。
  28. 写给新手前端的各种文件上传攻略,从小图片到大文件断点续传 今年国庆假期终于可以憋在家里了不用出门了,不用出去看后脑了,真的是一种享受。这么好的光阴怎么浪费,睡觉、吃饭、打豆豆这怎么可能(耍多了也烦),完全不符合我们程序员的作风,赶紧起来把文章写完。 这篇文章比较基础,在国庆期间的业余时间写的,这几天又完善了下,力求把更多的前端所涉及到的关于文件上传的各…
  29. 前端代码质量-圈复杂度原理和实践写程序时时刻记着,这个将来要维护你写的程序的人是一个有严重暴力倾向,并且知道你住在哪里的精神变态者。
  30. Vue中JSX的基本用法,以及如何使用JSX二次封装Element UI的Table组件 JSX是React出的一种对JavaScript的语法扩展。 在Vue中大多数情况推荐使用模板语法,通过template中的Vue指令进行快速开发。但是template也是存在一些缺陷的,扩展难度大,造成逻辑冗余。这时候我们就需要 JavaScript 的完全编程能力,结合 render函数 与 JSX 进行功能扩展。 基础用法 1. 嵌入表达式 在JSX中,…
  31. Vue.set实际上是什么? 谈到 Vue.set 就要说响应式原理,所以得为你自己准备下这方面的理论知识。然而,一如即往,这并不难或者枯燥。准备点鳄梨和薯条,制作些鳄梨酱,然后我们再进入话题。 数据和响应式原理 在一个 Vue 组件中,无论你何时创建一个 data() 功能属性,都会返回一个对象。 Vue 在组件背后做了很多事情,来使得它具有响应…
  32. 面试一定会问到的-js事件循环 最近在看js事件循环,事件循环是js运行的核心,js 是单线程的, js 的异步事件就是依赖于事件循环机制,网上找了些资料,发现腾讯云这篇 js事件循环 写的很详细,下文基于这一篇文章,外加上自己的一些总结。 事件循环 首先,我们来解释下事件循环是个什么东西: 就我们所知,浏览器的js是单线程的,也就是说,在同…
  33. Vue之MVVM原理详解 MVVM是 Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式, View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,其核心是 ViewModel 通过 双向数据绑定 将 View 和 Model 连接起来了,这使得 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上 MVVM具体实…
  34. 优化 web 应用程序性能方案总结在开发 web 应用程序时候,性能都是必不可少的话题。而大部分的前端优化机制都已经被集成到前端打包工具 webpack 中去了,当然,事实上仍旧会有一些有趣的机制可以帮助 web 应用进行性能提升,在这里我们来聊一聊…
  35. HTML中的attribute属性和JavaScript中的property属性的区别 attribute:是HTML标签上的某个属性,如id、class、value等以及自定义属性 它的值只能是字符串,关于这个属性一共有三个相关的方法,setAttribute、getAttribute、removeAttribute; property:是js获取的DOM对象上的属性值,比如a,你可以将它看作为一个基本的js对象。 这个节点包括很多property,比如value,clas…
  36. 1.5万字概括ES6全部特性第三次阅读阮一峰老师的《ES6标准入门》了,以前阅读时不细心,很多地方都是一目十行。最近这次阅读都是逐个逐个字来读,发现很多以前都没有注意到的知识点,为了方便记忆和预览全部ES6特性,所以写下本文。
  37. 魅族官网基于 next.js 重构实践总结与分享在 2015 年,公司前端大佬猫哥基于 FIS3 深度定制开发了一套前端工程体系 mz-fis,该框架经历3年来的网站改版升级需求,都很好的完成了需求任务。 但随着项目越来越大,以及前端技术快速迭代。老项目的痛点越发明显。
  38. 【Vue原理】Vue源码阅读总结大会 – 终 写文章不容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看,请点击 下面链接 或者 拉到 下面 关注公众号 也可以吧 【Vue原理】Vue源码阅读总结大会 – 终 终于啊终于…
  39. 前端初级新人,如何撕去菜鸟标签 原文地址: github.com/ruizhengyun… 作为前端新人,我们常以菜鸟自居,主要是专业程度不高,还有就是自谦。其实,作为菜鸟的我们也想撕掉这类标签,我们也努力,可还是学不好前端,是真的不适合做这行还是方法不对,没人告诉我们?如果你觉得自己还处在菜鸟阶段的迷茫区,那可以看看本篇文章,希望看完之后你能得到想…
  40. 【DailyENJS第12期】V8引擎和JavaScript优化技巧 DailyENJS致力于翻译优秀的前端英文技术文章,为技术同学带来更好的技术视野。 V8是Google用来编译JavaScript的引擎。Firefox拥有自己的名为SpiderMonkey的引擎,与V8十分相似,但有所不同。我们将在本文中讨论V8引擎。 有关V8引擎的一些事实: 用C ++编写,并在Chrome和Node.js(以及Microsoft Ed…
  41. vue-cli+v-charts实现可视化图表 v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具,在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的…
  42. JS核心开发技巧 本文对核心开发技巧做一个梳理(对应的有一个非核心开发技巧,可以称之为齐淫技巧),持续更新… 本文借鉴了灵活运用JS开发技巧等文,进行了删减,只选核心的开发技巧。 所谓的核心开发技巧,是必须掌握的,形成肌肉记忆,不需要思考,例如往数组的头部添元素 unshift ,这样的操作是很常见的操作,作为前端开发…
  43. 简析vue 3 的数据响应系统 在10月5日尤大大Vue3的源代码正式发布了,闲暇之余也简单研究了下源码。 vue3 目前的版本是 Pre-Alpha ,源码仓库地址 vue-next ,有需要的朋友可以自行下载 Vue 的核心之一就是响应式系统,通过监听数据的变化,来驱动更新视图。因此,一拿到源码,就先研究了下它的数据监听机制。 当然,在介绍数据监听知识之前…
  44. 一周 GitHub 开源项目推荐:腾讯、美团、滴滴…… 一周 GitHub 开源项目推荐 点击链接或图片即可阅读 喜欢请分享到朋友圈哦 falcon-log-agent:滴滴开源的用于监控系统的日志采集 agent,可无缝对接 open-falcon falcon-log-agent 是一个开源版的日志采集工具,旨在从流式的日志中抓取、统计日志中的特征信息。 …
  45. 快来利用 Github 这个功能来创建让自己满意的项目模版吧我承认我实在想不出更好的标题了,因为本文涉及到的内容比较宽泛。但我保证,本文会尽可能做到抛砖引玉的效果。不仅仅是创建项目模版,写项目的时候需要考虑的东西本文也适合。
  46. 重学JavaScript(一) JavaScript的前世今生 最近一段时间,一直在研读框架源码,越深入,越发现自身基础知识的薄弱,因此最近打算重新回顾一遍JS的基础,旨在查漏补缺,厚积薄发。 第一篇文章主要想讲讲JS的发展历史,了解JS的本质、历史以及局限性。 第一次在掘金发表博客,希望能一直继续下去,毕竟坚持本身就是一件很酷的事情。 这次的故事就从Mosaic浏览…
  47. 已配置 4000+ 页面,携程前端组件化探索之 “乐高” 运营系统 作者简介 孙罡,携程市场部活动平台前端工程师,主要负责市场“乐高”平台搭建,组件开发,以及各种定制活动的开发工作。 一、前言 市场部活动组主要负责各种运营活动的相关开发,分为常规运营活动和定制运营活动。常规运营活动因为组件(模块)具有复用性,并…
  48. 精读《用 css grid 重新思考布局》Flex 与 Grid 相比就像功能键盘和触摸屏。触摸屏的控制力相比功能键盘来说就像是降维打击,因为功能键盘只能上下左右控制(x、y 轴),而触摸屏打破了布局障碍,直接从(z 轴)触达,这样 无论 UI 内部布局再复杂…
  49. ES6 尾调用和尾递归尾调用(Tail Call)是函数式编程的一个重要概念,本身非常简单,一句话就能说清楚,就是指某个函数的最后一步是调用另一个函数。
  50. 深入Vue系列 next-tick原理和源码解析 在 vue 的官方文档中有一个 API 叫做 nextTick,将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用这个方法,获取更新后的 DOM。 语法 vm.$nextTick( ); 复制代码 参数: { Function; } ; 复制代码 用法放在 Vue.nextTick() 回调函数中的执行的应该是 涉及 DOM 操…
  51. Promise的秘密(Promise原理解析以及实现)本篇文章将会带大家从分解promise入手,一步步实现一个promise。但阅读之前需要比较熟练地了解了解用法,结合用法看文章可能更容易理解。
  52. webpack简介及实践 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 二、 webpack整体架构 …
  53. 七个简单但棘手的 JS 面试问题作者:Dmitri Pavlutin翻译:疯狂的技术咋 原文:[链接] 未经允许严禁转载 在软件开发中,我认为最需要注意的是: 编码面试 有毒的主管或猪队友 不是 JavaScript,this,CSS,IE 浏览器,而是上述两点! 如果你参…
  54. Vue-cli3项目引入Typescript 假设已经有一个通过 vue-cli3 脚手架构建的 vue 项目 命令行安装 Typescript npm install –save-dev typescript npm install –save-dev @vue/cli-plugin-typescript 复制代码 编写 Typescript 配置 根目录下新建 tsconfig.json ,下面为一份配置实例( 点击查看所有配置项 )。值得注意的是,默认情况…
  55. 用Vue.js和Pusher创建实时聊天应用 现如今,即时通迅已经越来越普遍,并且用户体验也越来越自然和流畅。 本文将使用ChatKit加强过的Vue.js创建一个实时聊天应用,ChatKit服务为我们提供了一个创建聊天应用的后端,并且可以运行于任何设备上,让我们只需关注前端用户接口,这个接口通过ChatKit client包连接到ChatKit服务。 准备条件 这是一篇中到高…
  56. Vue3数据驱动源码解读 DEMO地址 ,先下载DEMO,打开index.html体验一下吧 阅读的时候最好是先把DEMO过一遍,然后带着问题来看这篇文章,不然可能会一脸懵逼 我的DEMO源码简化了非常非常多的代码,所以功能很基础,为了方便把流程先理清楚 不要死抓住细节不放,有些问题放一放,等把握全局之后就可以理解了 可以下载DEMO源码,…
  57. 如何用 Hooks 来实现 React Class Component 写法?Hooks 的 API 可以参照 React 官网。本文主要是结合 Demo 详细讲解如何用 Hooks 来实现 React Class Component 写法,让大家更深的理解 Hooks 的机制并且更快的入门。 注意:Rax 的写法和 React 是一致的,本文 D…
  58. Vue躬行记(2)——指令 Vue不仅内置了各类指令,包括条件渲染、事件处理等,还能注册自定义指令。 一、条件渲染 条件渲染的指令包括v-if、v-else、v-else-if和v-show。 1)v-if 该指令的功能和条件语句中的if类似,可根据表达式的计算结果,判断是否渲染分支中的元素和它所包含的子元素。在下面的示例中,当把数据对象的exist属性设为true…
  59. 基于vue-cli的webpack打包优化实践及探索转眼已经是2019年,短短三四年时间,webpack打包工具成为了前端开发中必备工具,曾经一度的面试题都是问,请问前端页面优化的方式有哪些?大家也是能够信手拈来的说出缓存、压缩文件、CSS雪碧图以及部署CDN等等各…
  60. Vue Class与Style绑定 操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。 表达式结果的类型除了字符串之外,还可以是 对象 或 数组 。 绑定HTML的class 对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换 class …

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

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


关注我

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

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

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