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

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

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