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

JavaScript防抖节流原理；JS 总结之原型；css、js阻塞；vuex的基础；Javascript时间构造的诡异；前端技能拾遗；webpack性能榨汁机；JavaScript数据处理之数组操作

JavaScript防抖节流原理你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作这些需求都可以通过函数防抖动来实现。如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作防抖和节流的作用都是防止函数多次调用。区别在于，假…
JS 总结之原型在 JavaScript 中，函数也是属于对象，可以像其他对象一样访问属性，其中便有一个属性叫原型 prototype，值为一个对象，默认，原型有一个 constructor 属性，指向了构造函数本身。
css、js阻塞大家是不是会遇到这样的一个问题，页面加载速度过慢，浏览器老在转圈圈，页面部分内容需要花费较多的时间才能加载出来？
vuex的基础编辑推荐: 本文来自csdn，文章介绍了vuex的概念、状态管理、如何使用vuex以及vuex的核心有哪些等。 vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化…
Javascript时间构造的诡异JavaScript为我们提供了不是很好用的Date作为时间日期对象，除了接口设计怪异之外，还有一些隐藏很深的bug，先看接口设计：
前端技能拾遗解释型语言与编译型语言的区别翻译时间的不同。编译型语言在程序执行之前，有一个单独的编译过程，将程序翻译成机器语言，以后执行这个程序的时候，就不用再进行翻译了。解释型语言，是在运行的时候将程序翻译成…
webpack性能榨汁机最近对项目的本地开发环境进行了打包速度优化，原有项目，网上能搜到的优化方案基本都加了，在16年低配mac pro 上打包时间为25秒多，但我发现细节做一些调整可能大大降低打包时间，最终优化到7秒多 dll 原有项目是线上和本地公用一套dll配置，因为antd这类ui库需要按需加载所以不能放到dll中，这时可以单独写一个dll…
JavaScript数据处理之数组操作在JavaScript中，数组是数据类型中非常重要的一环。所传入的数据一般也都需要转化为数组，然后通过数组所提供的API来对数据进行处理，当然它可能本身传来的就是数组。此外，在函数式编程中，数组也提供了不少的API来帮助我们实现函数式编程，从而使代码变得更为可读，因此对数组的一些操作进行一个总结还是很有必要的。 …
JavaScript数据处理之字符串字符串在编程中占据着举足轻重的作用，我们通常会使用字符串来储存一些文字之类的信息，以便计算机能够对这些信息进行检索或理解。因此首先我们先来看看JavaScript是如何来对字符串进行处理的。 1.1 创建字符串在JavaScript中有三种方法来创建字符串： const string1 = ‘string 1’ const string2 =…
VUE缓存：动态keep-alive 路总归是有的，就看愿不愿意剑走偏锋了。场景在最近的开发中，设计有A、B、C三个页面，试想这样一个场景需求：离开B页面进入C页面，缓存B页面数据（keepAlive: true）离开B页面进入A页面，不缓存B页面数据（keepAlive: false) 概念 keep-alive keep-alive 包裹动态组…
用 React 和 Node.js 实现受保护的路由和权限验证上周末我想挖掘一些没有 Redux-Saga 这种花里胡哨的东西的纯粹的React。所以我创建了一个小项目，在Strapi — 一个包括了可扩展的管理后台面板和一些内置功能（授权，上传，权限控制…）的 Node.js 框架的配合下，仅使用 Create React App 创建一个小模板来实现授权流程。在本教程中，我们会使用Str…
Node.js 指南（HTTP事务的剖析）本指南的目的是让你充分了解Node.js HTTP处理的过程，我们假设你在一般意义上知道HTTP请求的工作方式，无论语言或编程环境如何，我们还假设你对Node.js EventEmitters和Streams有点熟悉，如果你对它们不太熟悉，…
入门-vuex我是一个刚刚学习vuex的小白，这两天主要连着官网和资料还有项目里的vuex在学习，在这里记下自己学习的一些总结，一方面是我自己的学习提升，也希望对你有所帮助。首先我们来理解下为什么要用vuex？我们先来捋下…
开源干货.NET Core + Vue.js通用动态权限(RBAC)管理系统框架[DncZeus]开源“Zeus”–中文译为宙斯，是古希腊神话中的众神之王，奥林匹斯十二主神之首，统治宇宙万物的至高无上的主神（在古希腊神话中主神专指宙斯），人们常用“众神和人类的父亲”、“神王”来称呼他，是希腊神话诸神中最伟大…
个推前端微服务化：突破传统 SPA 瓶颈本文作者：个推高级前端开发工程师沈创目前的前端领域，单页面应用（SPA）大行其道。而随着时间的推移以及应用功能的丰富，这些应用变得越来越庞大也越来越难以维护。于是“微前端”这一概念应运而生。 “微前端”出自2016 年的 ThoughtWorks 技术雷达，指将项目拆分成一个…
Vue2.5从0开发猫眼该项目已经写了非常详细的文档，帮助刚学习vue能够一步一步操作。链接地址( cxp1539.github.io/vue-maoyan/ ) 有疑问的可以到github提issue，共同探讨学习。如果该项目对于您有所帮助，希望您可以点到github star 能支持一下 ^_^ github地址( github.com/cxp1539/vue… ) 为什么想写这个项目？这一…
React 之 setState 原理分析一、setState异步更新我们都知道，React通过this.state来访问state，通过this.setState()方法来更新state。当this.setState()方法被调用的时候，React会重新调用render方法来重新渲染UI 首先如果直接在setState后面获取state的值是获取不到的。在React内部机制能检测到的地方，setState就是…
前端模块化详解(完整版)在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等…
Chrome断点JS寻找淘宝签名sign 这是崔斯特的第八十篇原创文章 Chrome断点JS寻找淘宝签名sign (๑• . •๑) 写了这篇文章淘宝sign加密算法之后，很多人问我Chrome断点调试怎么做，今天会尽量详细聊聊。如果你用使用过Pycharm的断点，会更好理解。我们还是以淘宝为例，使用Chrome的移动请求头打开这个网站， https://s.m.taobao.com/h5?q=%E…
如何在vscode里面调试js和node.js 一般大家调试都是在浏览器端调试js的，不过有些时候也想和后台一样在代码工具里面调试js或者node.js，下面介绍下怎样在vscode里面走断点。 1，用来调试js 一：在左侧扩展中搜索Debugger for Chrome并点击安装：二：在自己的html工程目录下面点击f5,或者在左侧选择调试按钮，在上方 …
JS 基础： toLowerCase 和 toUpperCase 的实现此题要求实现一个大写转小写的函数，当时脑海中第一时间浮现的是，js不是提供了一个toLowerCase函数么？于是我毫不犹豫的写下了答案：
Javascript 中的深浅拷贝工作中经常会遇到需要复制 JS 数据的时候，遇到 bug 时实在令人头疼；面试中也经常会被问到如何实现一个数据的深浅拷贝，但是你对其中的原理清晰吗？一起来看一下吧！
单线程的js是如何工作的 js在诞生初期就确定了其单线程的定位，也就是说，所有任务需要排队，前一个行行执行，前面的执行完，才会执行后面的。如果前一个任务耗时很长，后一个任务就不得不一直等着。在讨论单线程的js时，我们先来看看为什么js要是单线程的。让js变成多线程的不行么 ~~ 为什么js是单线程 js诞生初只是为了实现一…
【20181222 前端开发日报】【开源】合摩 WeexBox 正式发布；前端开发中，滑动展现日志麻烦？这个组件来帮你；从零实现Vue的组件库（二）-Slider组件实现；聊聊前端面试之输出顺序；浅析Promise原理…详情→
初识 Web Component 组件化这个词应该大家耳朵都听起茧巴了在 Vue React Angular 三个大佬的带领下 , 我们前端是否终于告别了粘贴复制的 "组件化" 时代 Antd ElementUi 这些高质量且开箱即用的 ui 库更是让组件化开发更上一层楼. 如果不编译或者原生可以实现所谓的组件化吗? w3c 给了我们 web component 的解决方案 …
换个角度看 JavaScript 中的 (this) => { 整理 (JavaScript 深入之从 ECMAScript 规范解读 this ) } 这篇文章的产生，是基于冴羽大大的 JavaScript 深入之从 ECMAScript 规范解读 this 的思考，这是对应掘金链接，文中详细的论述了前因后果，建议各位都可以去了解一下，很有帮助，并且这篇文章在写作时，也有冴羽大大的帮助，再次表示感谢~ 文中的 ES5 规范是参考颜海镜大大的译本，也在这里表示感谢。那为什么…
Promise 源码分析then/promise项目是基于Promises/A+标准实现的Promise库，从这个项目当中，我们来看Promise的原理是什么，它是如何做到的，从而更加熟悉Promise
JavaScript运行机制Event Loop JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事假定 JavaScript 同时有两个线程，一个线程在某个 DOM 节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞生， JavaScript 就是单线程，这已经成了这门语言的核心特征，将来也…