20180325前端开发周报

标签： 588View

Javascript Promise学习过程总结；javascript原生封装一个淡入淡出效果的函数；JavaScript 五大常见函数；2018 年 3 月 15 个有意思的 JavaScript 和 CSS 库；200行 JS 代码实现区块链；JS异步编程的浅思；JavaScript异步史；简述JavaScript模块化编程（二）

  1. 1、Javascript Promise学习过程总结

    JS早期实现异步都是采用回调方式callback来实现异步任务的。包括事件回调，setTimeout，setInterval, Ajax等，采取这样的方式写代码，功能实现没有问题，但是不够优雅清晰，容易出现回调地狱。 Promise Promise A plus中文规范 英文规范 实现过程（一） 同步基础框架 new Promise(function(resovle, r…

  2. 2、javascript原生封装一个淡入淡出效果的函数

    说到js的渐变显示与消失，多数朋友会想到JQuery里面的fadeIn()、fadeOut()或fadeToggle()。但如果仅仅是为了引入这样的一个效果，而去调用了庞大JQuery库？或者说我通过用原生js实现一些函数来提高自己~ 所以，我简单的研究了一下

  3. 3、JavaScript 五大常见函数

    在 JavaScript 中有一些问题会被拿出来经常讨论，这些问题每个人都有不同的思路，想要理解这些问题，最好的方法就是自己实现一遍，话不多说，开始正题。 数组扁平化 数组扁平化有很多方法，但最终最好的方法就是递归，实现一个指定深度的扁平化方法，这样基本的套路都会了解。 function flattenDepth(array, depth…

  4. 4、2018 年 3 月 15 个有意思的 JavaScript 和 CSS 库

    Tutorialzine 旨在让你了解最新最酷的 Web 发展趋势。这就是我们每个月为何都会发布一些我们偶然发现并认为值得你关注的优秀资源的原因。 BasicScroll 该库使你可以在你的设计中添加 parallax 滚动动画效果。你可以直接在你的 CSS 中使用变量和属性，或者使用 JS 来获得更好的动画效果。它运行非常流畅…

  5. 5、200行 JS 代码实现区块链

  6. 6、JS异步编程的浅思

    最近使用egg写一个node项目时，被它的异步流控制震惊的泪流满面。话不多说，先上代码体验一下。 async function pay() { try { let user = await getUserByDB(); if (!user) { user = await createUserByDB(); } let order = await getOrderByDB(); if (!o…

  7. 7、JavaScript异步史

    什么是异步编程 什么是异步编程，异步编程简单来说就是：执行一个指令不会马上返回结果而执行下一个任务，而是等到特定的事件触发后，才能得到结果。 异步编程时就需要指定异步任务完成后需要执行的指令，总的来说有以下几种“指定异步指令”的方式： 属性 回调 Promi

  8. 8、简述JavaScript模块化编程（二）

    前置阅读：简述JavaScript模块化（一） 在前面一文中，我们对前端模块化所经历的三个阶段进行了了解： CommonJs,由于是同步的，所有主要应用于服务器端，以Node.js为代表。 AMD，异步模块定义

  9. 9、十倍效能提升：Web 基础研发体系的建立

    1 导读 web 基础研发体系指的是， web 研发中一线工程师所直接操作的技术、工具，以及所属组织架构的总和。在过去提升企业研发效能的讨论中，围绕的主题基本都是——”通过云计算、云存储等方式将底层核心技术封装成基础设施“。而我们在实践中发现，在 互联网渗入到各行各业，业务爆发 …

  10. 10、潜入理解ES6-Promise用法小结

    挂起 已成功 已完成 其中后两种都是异步操作完成后的状态 Promise做保证 Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。 MDN对Promise的定义如上，可以理解为此对象做了一些保证，告知我们异步操作的状态。具体如下： 当前事件队列执行完成之后，再…

  11. 11、别人问你http协议，到底是想问什么？

    本文是阅读《图解http》之后的总结，可能会很长。PS：这本书通俗易懂，适合前端工程师阅读，是非常优秀的http入门书籍。 当你看到这篇文章，我默认你已经稍微了解什么是http(超文本传输协议)，url(统一资源定位符)，

  12. 12、做好准备：新的 V8 即将到来，Node.js 的性能正在改变

    原文地址：GET READY: A NEW V8 IS COMING, NODE.JS PERFORMANCE IS CHANGING. 原文作者：Node.js Foundation 译文出自：掘金翻译计划 本文永久链接：github.com/xitu/go

  13. 13、vue写的功能最齐全的cnode社区网站

    react版开发之后开发的vue版， 其实vue版跟react版结构基本上是没多大变化的，只是语法上不同。 这是目前react版和vue版功能最齐全的第三方cnode版本了！ 如果你是刚接触react或vue这恰好是一个好机会 react版cnode点这里 源

  14. 14、还在用 JSON？Google Protocol Buffers 更快更小（原理篇）

    背景 随手记客户端与服务端交互的过程中，对部分数据的传输大小和效率有较高的要求，普通的数据格式如 JSON 或者 XML 已经不能满足，因此决定采用 Google 推出的 Protocol Buffers 以达到数据高效传输。 介绍 Protocol buffers (https://developers.google.com/protocol-buffers/)为 Goog…

  15. 15、一些运用webpack的方法或者说策略

    webpack可以说不用就难受，那么它有哪些我们需要注意的呢？ <1> webpack的发布策略 在实际开发中，一般会有两套项目方案： 一套是开发期间的项目，包含了测试文件、测试数据、开发工具、测试工具等相关配置，有利于项目的开发和测试，但是这些文件仅用于开发，发布项目时候需要剔除； 另一套…

  16. 16、详解promise

    promise是什么？ JavaScript 和 node 都是单线程非阻塞的运行方式，所以会出现一个异步回调的问题。promise就是为了解决这类问题 前端常见的异步操作有: setTimeout setInterval ajax 现在基本都使用async和

  17. 17、JS进阶(2)：人人都能懂的原型对象

    凡是搞前端开发的或者玩 JavaScript 的同学都知道，原型对象和原型链是 JavaScript 中最为重要的知识点之一，也是前端面试必问的题目，所以，掌握好原型和原型链势在必行。因此，我会用两篇文章(甚至更多)来分别讲解原型对象以及原型链。 在上一篇文章中，我们详细介绍了构造函数的执行过程以及返回值，如果没有看的…

  18. 18、同时支持Vue/mpvue/weex的http请求库，最大可能的实现不同平台间的代码复用

    Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它，您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node中都能正常运行。同时可以方便配合 Vue家族的框架，最大可能的实现 Write Once Run Everywhere 。 Github: github.com/wendux/fly 问题 随着 Weex 、m…

  19. 19、精读《webpack4.0 升级指南》

    本周精读的是 webpack4.0 一些变化，以及 typescript 该怎么做才能最大化利用 webpack4.0 的所有特性。 1 引言 前段时间尝试了 parcel 作为构建工具，就像农村人享受了都市的生活，就再也回不去了一样，发现无配置真是前端构建工

  20. 20、我的HTML会说话——从实用出发，谈谈HTML的语义化

    即使要多写几行css，也最好让html语义化：与同为人类的程序员沟通，帮助程序员快速掌握当前代码。这一点其实是可以通过注释来实现的，不过用上语义化HTML多多少少可以省点注释，哈哈。 与同为代码构筑的系统（例如残疾人士阅读器以及搜索引擎爬虫等）沟通，帮助其快速、准确达到目的。由于这类系统与人类的智能相比起来实在有限，因此需…

  21. 21、手写一个Promise

    Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦成功就不允许失败，一旦失败就不允许成功。 function Promise(excutor) { let self = this self.status = ‘pending’ self.value = null self.reason = null function resolve(value) { if (…

  22. 22、带你了解我喜欢Vue的10个方面

    我喜欢 Vue。当我在 2016 年第一次接触它时，也许那时我已经对 JavaScript 框架感到疲劳了，因为我已经具有Backbone、Angular、React 等框架的经验，没有太多的热情去尝试一个新的框架。直到我在 Hacker News 上读到一份评论，其描述 Vue 是类似于“新 jQuery” 的 JavaScript 框架，从而激发了我的好奇心。在那之前，我已…

  23. 23、别人问你http协议，到底是想问什么？（二）http与缓存

    上一篇文章我们讨论了TCP三次握手，http请求头、响应头，Content-Type字段，如何使用node控制这个字段等。我这篇文章将从http状态码入手，讨论写常用的http方法和控制缓存。 我们调试一个接口时，喜欢的数

  24. 24、Vue-rap 构建基于 Vue 的流应用

    前几年前端还是 html+css+js 简单的配合,还记得那几年公司招前端要求很低,工资开的也低,前端需要学习的东西很低,一个新人(特别是刚出来的应届毕业生)只需要简单的培训下就可以快速进入公司前端的工作; 这几年不同了,新的技术全部出来了Angularj

  25. 25、《50道CSS基础面试题（附答案）》中的答案真的就只是答案吗？

    背景 想想自己为什么要写这个，难道不是因为这篇《50道CSS基础面试题（附答案）》文章最近被转载的多，比较多而凑热闹蹭热点？显然，肯定是因为这样我才打算写的。而且还有就是，我的公众号也很久没有更新了，微…

  26. 26、JS中的事件顺序(事件捕获与冒泡)

    如果一个元素和它的祖先元素注册了同一类型的事件函数(例如点击等), 那么当事件发生时事件函数调用的顺序是什么呢? 比如, 考虑如下嵌套的元素: ———————————– | outer | | ————————- | | |inner | | | ———–…

  27. 27、Vue Technology LLC 招人了

    Vue Technology LLC 招人了! 职位 全职开源开发者 职责内容 参与 Vue.js 官方项目的开发和维护。包括但不限于：

  28. 28、如何使用 JavaScript 实现一门编程语言(3) —— Input stream

    这是最简单的部分。我们将创建一个“流对象”，它提供了从字符串中读取字符的操作。其中4个方法： peek() – 返回下一个值，但不从流中移除它。 next() – 返回下一个值，并将其从流中丢弃。 eof() – 当且仅当流中没有更多值时才返回true。 croak(msg) – throw new Error(msg) 之所以包括最后一个，…

  29. 29、用CSS实现Tab页切换效果

    用CSS实现Tab切换效果 最近切一个页面的时候涉及到了一个tab切换的部分，因为不想用js想着能不能用纯CSS的选择器来实现切换效果。搜了一下大致有下面三种写法。 利用:hover选择器 缺点：只有鼠标在元素上面的时候才有效果，无法实现选中和默认显示某一

  30. 30、vue-design：用 Vue 和 Electron 开发最好的页面可视化构建程序

    ✨ Features: 使用electron构建的桌面端应用 通过可拖拽的组件设计页面 保存为.vue文件 保存/导入一个项目 开发步骤 git clone https://github.com/L-Chris/vue-design.git cd vue-design # install dependencies npm install # serve with with-…

  31. 31、Vant 1.0 发布：轻量、可靠的移动端 Vue 组件库

    Vant 是有赞前端团队维护的移动端 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant 可以快速搭建出风格统一的页面，提升开发效率。 Vant 一、关于 1.0 距离 Vant 首次发布 刚好过去了半年时间，在这半年时间里 Vant 团队广泛吸纳社区的反馈和建议，持续对组件进行打磨、优化，使得 Vant 逐渐成…

  32. 32、手动实现一个满足promises-aplus-tests的Promise

    (该部分转载自 blog.csdn.net/u010576399/… ) Promise对象是CommonJS工作组提出的一种规范，目的是为异步操作提供统一接口. 那么，什么是Promises？ 首先，它是一个对象，也就是说与其他JavaScript对象的用法，没有什么两样；其次，它起到代理作用（proxy），充当异步操作与回调函数之间的中介。它使得异步操作具备…

  33. 33、手拉手，用Vue开发动态刷新Echarts组件

    需求背景：dashboard作为目前企业中后台产品的“门面”，如何更加实时、高效、炫酷的对统计数据进行展示，是值得前端开发工程师和UI设计师共同思考的一个问题。今天就从0开始，封装一个动态渲染数据的Echarts折线图…

  34. 34、如何使用 JavaScript 实现一门编程语言(5) —— AST

    在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。 之前我们讲过，parser将构建一个忠实地表示程序语义的数据结构。这里的AST节点则是一个普通的JavaScript…

  35. 35、JavaScript对象入门指南

    前言 不少开发对JavaScript实现面向对象编程存在一知半解，并且不少的在项目实践中写的都是面向过程编程的代码，因此，希望能从零入手介绍面向对象的一些概念到实现简单的面向对象的例子让大家包括我自己加深对面向对象的认知。硬文一篇，希望能对大家有帮助 ^v^ 对象基础 概念 对象是一个包含相关数据和方法的…

  36. 36、从零配置Webpack4.0搭建一个React工程

    最近一直大部分精力都在搞App以及Node。前端这块作为初心，还是不能落下。这里不用cli。一步一步记录从零配置Webpack，来搭建起React项目。复习一下Webpack的配置。以及一些前端工程化的一些思考 前段工程化思考 说道前端工程化，最重要的一个目的

  37. 之前其实谈到了 双向同步在 Vue 中的实现方法 ，尽管 Vue 在 2.x 移除了 .sync ，在 2.3.0+ 又重新引入。这一次也并不能简单归纳为「重新引入」，而和 v-model 一样，改为了一种语法糖。 先来重新看下 Vue 官方对于 .sync 的定义： <comp :foo.sync="bar"></comp> <!-…

  38. 38、express+mongodb+vue实现增删改查-全栈之路

    vue element mongodb express 效果图 前言 最近一直想学下node,毕竟会node的前端更有市场。但是光看不练，感觉还是少了点什么，就去github上看别人写的项目，收获颇丰，于是准备自己照葫芦画瓢写一个。 作为程序员，一

  39. 39、你应该要知道的Vue.js

    原文：你应该要知道的Vue.js 组件data为什么必须是函数？ 因为组件可能被多处使用，但他们的data是私有的，所以每个组件都要return一个新的data对象 组件通信 父子组件通信：$on、$emit 非父子组件的通信: event bus 复杂情况

  40. 40、Vuejs——（5）过渡,动画

    进入/离开 &amp; 列表过渡 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如

喜欢这篇文章的朋友，欢迎收藏、分享、评论，帮我上热门，你的支持，是我每日更新的动力！

喜欢前端的朋友可以点击关注一下我微博，每日分享精彩的前端文章！

关注我

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

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

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