20180622 前端开发日报

JS实现异步timeout;浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层;Vue + Koa 搭建 ACM OJ;一套比较完整的前端技术选型,需要规整哪些东西,你知道不?;我写了一本书《深入浅出 HTTPS:从原理的实战》;深入理解javascript系列(十七):函数柯里化;聊聊北京大部分前端从业者所面临的困境;从零开始React项目架构(五)

  1. JS实现异步timeout Promise已经作为JS的ES6标准,已经正式进入了浏览器环境和Node.js环境,但是对于程序员的需求来说,现在的Promise的功能还是有点不足的,比如说,我要设定一组Timeout该怎么做呢? 传统的同步方法实现起来很简单 let count = 10; const func = () => { if(count > 0) { setTimeout(func, 1000); ...
  2. 浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层 开始之前 随着业务的不断累积,目前我们 ToC 端主要项目 ,除去 node_modules , build 配置文件 , dist 静态资源文件 的代码量为 137521 行, 后台管理系统下各个子应用代码 除去依赖等文件的总行数也达到 100w 多一点。 本文会在主要描述以 Vue 技术栈 为 技术主体 , ToC 端 项目 业务主体 ,在构建过程中,...
  3. Vue + Koa 搭建 ACM OJ 花了两个多月时间,我与 lazzzis 完成了第二版本的Putong OJ,因为中间忙着春招以及毕业设计等,项目最近才正式上线。 项目线上地址:acm.cjlu.edu.cn/ 项目前端地址: github.com/acm309/Puto… 项目后端地址: github.com/acm309/Puto… 这里求一下star啊(^o^)/~ 本OJ前端架构为 Vue2.5 + vue-router +...
  4. 一套比较完整的前端技术选型,需要规整哪些东西,你知道不? 1. 背景及现状 随着前端开发复杂度的日益增加,各种优秀的组件框架也遍地开花。同时,我们面临业务规模的快速发展和工程师团队的不断扩张,如何解决资源整合、模块开发、项目部署、性能优化等问题势在必行。 2. 目标 根据背景和现状的分析,我们现制订一个规范化的前端工
  5. 我写了一本书《深入浅出 HTTPS:从原理的实战》 花了一年半的时间,写了一本书《深入浅出HTTPS:从原理的实战》,目前已经可以购买了,对密码学和 HTTPS 感兴趣的同学可以关注下。 这篇博文是本书的前言,解释了我和这本书的渊源、写书的原因、写作过程中的一些心得体会、包括本书的章节设置等等。 我的 HTTPS 学习之旅 ...
  6. 深入理解javascript系列(十七):函数柯里化 之前的系列,我们介绍了什么是高阶函数。所有以函数作为参数的函数,都可以叫作高阶函数。并且我们常常利用高阶函数来封装一些公共逻辑。本次,我们要继续学习,继续记录,柯里化。柯里化,其实就是高阶函数的一种特殊用法。柯里化是指这样一个函数(假设叫做createCurr
  7. 聊聊北京大部分前端从业者所面临的困境 国内一线城市,首推北京、上海、广州、深圳,而在这四个强一线城市中互联网氛围最浓厚的,尤其以北京最为典型。那么我们就从北京这个大背景下开始聊起。 从闲谈说开去 从今天起,我拥有了一个新朋友,他叫王小闰(花名),目前在北京西二旗附近从事前端开发。今天他在微信上跟我
  8. 从零开始React项目架构(五) 前言 作为一个项目而言,单元测试应该是必备的一部分,也是最容易被大家忽略的一部分,这篇文章就介绍一下jest 和 enzyme。 Jest 特点: 测试用例并行执行,更高效 强大的 Mock 功能 内置的代码覆盖率检查,不需要在引入额外的工具 集成 JSD
  9. vue项目实现github在线预览效果 最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目,有点小激动,想把它上传到 github 并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好。写下这篇文章(这也是我在掘金写的第一篇文章),如果有同学刚好遇到同样问题,希望对你们有所帮助。 这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目...
  10. 这可能是vue-cli最全的解析了…… 题言: 相信很多vue新手,都像我一样,只是知道可以用vue-cli直接生成一个vue项目的架构,并不明白,他究竟是怎么运行的,现在我们一起来研究一下。。。 一、安装vue-cli,相信你既然会用到vue-cli,自然node环境是OK的,直接命令行下安装 n
  11. 大话大前端时代:Vue 与 iOS 的组件化(上) 由于原文太长,所以我们把文章分成上下篇发出来。上篇主要描述 Vue 的组件化;下篇主要描述 ios 的组件化,以及两者的对比。这篇文章是作者去年 9 月发布的,虽然过了些时日,但还是很值得多读几遍的。 0. 序 现在大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最...
  12. SpriteJS:一款简单的跨终端 canvas 绘图框架 SpriteJS 是一款由360奇舞团开源,月影大大亲自操刀的跨终端 Canvas 绘图框架,可以基于 canvas 快速绘制结构化 UI、动画和交互效果,并发布到任何拥有canvas环境的平台上(比如浏览器、小程序和node)。 官方网站:http://spritejs.org Github地址:https://github.com/spritejs/spr...
  13. Vue 服务端渲染 or 预渲染 简介 关于 Vue 的 SPA 说的已经太多太多了,它为我们带来了极速的开发体验,极强的开发效率。可能唯一有些许不足的就是,当我们对 seo 很在乎的时候,我们如何去处理 SEO 的需求。 关于 SEO ,Vue 也有现成的解决方案: Vue 服务端渲染 那么 什么是服务端渲染 服务端将完整的页面 html ...
  14. Node.js中TCP及聊天室的实现 OSI网络模型分七层,由下至上分别为: 物理层 、 数据链路层 、 网络层 、 传输层 、 会话层 、 表示层 、 应用层 ,TCP协议处于传输层。 Node.js中TCP Node.js中的 net 模块提供了对TCP协议的封装,使用 net 模块可以轻松的构建一个TCP服务器,或构建一个连接TCP服务器的客户端。 net模块创建一个服务器 let...
  15. 使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入行的时候,从svn上把代码checkout下来,看到同事写的代码,大括号居然换行了。心中暗骂,这个人是不是个**,大括号为什么要换行?年轻气盛的我,居然满腔怒火,将...
  16. Vue.use源码学习 由于最近在做一些前端的项目,并且接手了Weex的项目,所以难免和Vue打起了交道,js也是从入门到学习中。项目里用到了Vue的插件机制,所以看了看Vue.use的源码,还是比较简单的,适合新手阅读,所以记录下来以免遗忘。 感谢 本文最后一章节 是参考了 eros 这个开源项目的,感谢eros项目组的开发。...
  17. js利用H5的requestAnimationFrame()API实现动画效果 为什么要使用requestAnimationFrame: 我们知道,浏览器实现动画绘制无非就是css3的动画属性 transition , aniamtion 和JavaScript的 setTImeOut 和 setInterval 方法(进行DOM的样式循环改变达到动画效果)。说到这可能很多同学都有疑问了,既然有CSS的动画属性这么方便的...
  18. 原生JS实现一个无缝轮播图插件(支持vue) 轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使用UI组件。在轮播图部分,本来在vue里面写了一下,但是发
  19. ajax 跨域难题 - 原生 JS 和 jQuery 的实现对比 讲解顺序: AJAX 的概念及由来 JS 和 jQuery 中的 ajax 浏览器机制 AJAX 跨域 AJAX 的概念 在讲解 AJAX 的概念之前,我先提一个问题。 这是一个典型的 B/S 模式。 PS. B/S结构(Browser/Se
  20. babel 配置整理 babel 是一个 JavaScript 编译器,借助转换器可以使用最新的语法,而不必等待浏览器支持。但是只支持语法转换,而不支持新增 API。因此使用 babel 就分为两方面:语法转码和 API 支持。 安装 yarn add -D babel-cli babel-core babel-preset-env 在 web 项目根目录下,创建.babelrc 配置文件,配置 { "p...
  21. so easy 前端简单实现多语言 so easy 前端实现多语言 ​ 每个公司业务不一样,此解决方案仅做参考 。 Git demo地址 前言 其实现在开发者解决多语言普遍三种解决方案: 第一个是为每个页面提供每种语言的相关页面
  22. 【JSConf EU 2018】主题总结 (部分主题已有中文文章) JavaScript 开发者大会 是一个围绕 JavaScript 开发者为中心的活动,全球各地都有分支,包括 JSConf EU、JSConf US、JSConf AU 等等,当然,最为国内开发者熟悉的便是我们的 JSConf CN 了。 历时两天的 JSConf EU 2018 刚刚结束,总结了下还是有不少有趣的点,包括错误处理、BigInt、deno、无障碍性访问、事件循环...
  23. 20180621 前端开发日报】[开源] SpriteJS — 一款简单的跨终端 canvas 绘图框架;web-audio-api可视化音乐播放器,实现暂停切换歌曲功能,粉色系专场~;深入理解javascript系列(十二):函数与函数式编程(1);【Html5实战】7小时开发出手机...详情→ ​​​
    20180621 前端开发日报
  24. 说说vue项目中自动添加前缀的那些事 目前,vue-cli初始化的项目中已经自动帮我们配置好postcss了,而其中我们非常常用的一个插件就是autoprefixer,浏览器属性前缀自动补全:例如我写一个需要兼容属性:.head { display: flex; } 编译后的自动帮我们补全
  25. 使用Nuxt.js简单的服务器端渲染,路由和页面转换CSS-Tricks 有点罗嗦的标题,是吧?什么是服务器端渲染?它与路由和页面转换有什么关系?什么是Nuxt.js?有趣的是,尽管听起来很复杂,但使用Nuxt.js并探索其好处并不困难。让我们开始吧! 服务器端渲染 最近你可能听说过人们在谈论服务器端渲染。我们研究了
  26. 不要混淆nodejs和浏览器中的event loop - CNode技术社区 2018/5/8更新: 距离这篇文章完笔虽然才两个月,但是我已经对各种细节忘记得差不多(不常用的东西马上就忘记了,大脑内存不足会经常自动腾出空间记忆别的事情),各位如果有任何疑问我大概率是回答不上来,非常抱歉。另外我觉得深入折腾这种东西意义其实不是太大
  27. Node.JS用Path将相对路径转为绝对路径 之前介绍过 用JavaScript将相对路径转为绝对路径的方法 :  其实在Node.JS中更简单,直接用 path中的方法即可: var path = require('path') var dir = path.resolve('../oncedir') 测试 $ node test C:githuboncedir Path的其他常用方法: path.normalize(p) 规范化字符串路径,注意 ...
  28. Angular 动画的两种方式及添加购物车动画 在前端应用中,动画是一个常见的场景。在使用了一系列的动画库之后,终于需要自己来实现一个动画了。这次的动画则是基于 Angular 框架。我的场景是一个类似于添加购物车的动画。在这个场景里,需要两个动画,一个是购物车数量的增加动画,一个则是折叠页面元素的动画。 在实现的过程上,我采用了两种不同的 Angular 动...

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

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

原创文章:20180622 前端开发日报 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/fe-daily-20180622.html)