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

如何用 CSS 网格快速做出网站原型；ES6 Promise 用法（我见过最简洁优秀的文章）；大前端神器安利之 Puppeteer；Json最强攻略；20171221 前端开发日报；WebSocket之JavaScript例子；javascript打怪升级–把业务逻辑当练习题做；《深入浅出 Webpack》

如何用 CSS 网格快速做出网站原型简评：CSS 网格模块是创建网站模型的绝佳工具。它是我尝试过的任何其他系统中最快让你体验布局的工具。我们的网格我们将从模仿一个经典网站的非常基本的网格开始：首先，我将解释我们需要的 HTML 和 CSS 代码…
ES6 Promise 用法（我见过最简洁优秀的文章）一、认识promise对象         FIREFOX 控制台直接输入  Promise      &nbsp
大前端神器安利之 Puppeteer Puppeteer(中文翻译”木偶”) 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具，它是一个Node库，提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome 。也可以配置为使用完整（非无头）的 Chrome。Chrome素来在浏览器界稳执牛耳，因此，Chrome Headless 必将成为 web 应用自动化测试的行业标杆。使用P…
Json最强攻略前言无论是前端解析后端的数据还是做全栈的技术需要，你都可能多少需要知道些json的技术点，从json的标准格式到json的格式转换与传输，再到中转的处理。本文小编与你一起回顾json的最强知识点攻略。概念 javascript的对象
【20171221 前端开发日报】2018 年你应该知道的 Vue.js 的 11 个组件库；欢迎来到新时代，HTML 5.2 已成为 W3C 新推荐标准；TypeScript, Angular 和移动端的跨平台开发；可能是最全的Vue-TypeScript教程(附实例代码和一键构建工具)；css sprites…详情→
WebSocket之JavaScript例子编辑推荐: 本文来自于cnblogs,文章主要用案例说明，WebSocket通讯详细，代码及数据等方面介绍。一、详细代码案例详细解读一个简单html5 WebSocket的Js实例教程,附带完整的javascript websocket实例源码，以及实例代码效果演示页面，并对本实例的核心代码进行了深入解读。从WebSocket…
javascript打怪升级–把业务逻辑当练习题做1.前言开发项目和出没社区有一段时间了，会遇上一些比较有印象业务需求。这些业务需求，可能是自己开发项目遇上的，可能是在社区看到的业务需求，或者其他情况接触到的需求，但是这些业务需求的实现逻辑都值得一…
《深入浅出 Webpack》评价 Webpack 凭借强大的功能与良好的使用体验，已经成为目前最流行，社区最活跃的打包工具，是现代 Web 开发必须掌握的技能之一。作者结合自身的实战经验，介绍了 Webpack 的使用与常见优化方法、并深入讲解了 Webpack 原理与架构，相信各阶段的 Webpack 用户都能通过本书得到启发。 — LeanClo…
JavaScript异步编程大冒险: Async/Await Async/Await 也就是大家知道的异步函数，它是一个用来控制 JavaScript 异步流程的一个记号。而在很多现代浏览器上也曾实现过这样的设想。它的灵感来源于C# 和 F#，现在 Async/Await 在ES2017已经平稳着陆。通常我们认为 async function 是一个能返回 Promise 的 function 。你也可以在 async function …
[译] 10 个常见的 JavaScript Bug 译者按：安全起见，在开发中我基本不用==。原文: 10 COMMON JAVASCRIPT BUGS AND HOW TO AVOID THEM 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。就算最牛的JavaScript开发者也会犯错。有时候导致程序的执行结果和预期…
GitLab+Jenkins+Rsync+PM2实现Node项目的持续集成与自动部署前言最原始的软件开发流程是，在本地搭建好环境，进行开发测试，然后去服务器上搭建环境，手动上传代码，运行测试，然后启动服务。实际上，近些年来出现了很多的工具，使得这些步骤可以自动化，大大降低人工出错…
Javascript 之中的 class/构造函数/工厂函数到了ES6时代，我们创建对象的手段又增加了，在不同的场景下我们可以选择不同的方法来建立。现在就主要有三种方法来构建对象，class关键字，构造函数，工厂函数。他们都是创建对象的手段，但是却又有不同的地方，平时开发时，也需要针对这不同来选择。首先我们来看一下，这三种方法是怎样的 // class 关键字，ES6新…
基于react16 webpack3 搭建前端spa基础框架 react-router的4种异步加载方式这两天看了下 react 的文档，准备搭建一套适用的基本 react 开发架子。由于我一直使用的是 vue ，很少使用过 react 进行项目的开发，因此此构建主要参考的是 vue 的项目经验。项目主要会涉及到的知识点 webpack 配置及其优化 react-router 升级为4.0之后的使用 react-router-dom react-router-c…
适用于 Vue 2.0 的功能强大的 Contextmenu 组件适用于 Vue 2.0 的 ContextMenu 组件。中文 | English 安装 $ yarn add v-contextmenu # npm i -S v-contextmenu 概览
我的第一个python web开发框架（18）——前台页面与接口整合由于我们前后台系统没有分开，所以前台页面调用接口时，可以直接使用后台管理系统已经完成的接口，不过后台管理系统接口的访问加上了登录验证，所以需要将前台要用到的接口进行处理，让它们设置到白名单当中我们打开main.py文件，在勾子函数中 @hook(‘before_request’) 中找到下面代码 # 过滤不用做任何操作的…
关于react我的理解与总结 React react认识有一段解释很透彻：用脚本进行DOM操作的代价很昂贵。有个贴切的比喻，把DOM和JavaScript各自想象为一个岛屿，它们之间用收费桥梁连接，js每次访问DOM，都要途径这座桥，并交纳“过桥费”,访问DOM的次数越多，费用也就越高
RN Webview与Web的通信与调试原文链接：https://mrzhang123.github.io/… React Native Version:0.51 RN 在 0.37 版本中加入了WebView功能，所以想要在使用WebView,版本必须>=0.37，发送的 message 只能是字符串，所以需要将其他格式的数…
SpringBoot+SpringSecurity处理Ajax登录请求最近在项目中遇到了这样一个问题：前后端分离，前端用Vue来做，所有的数据请求都使用vue-resource，没有使用表单，因此数据交互都是使用JSON，后台使用Spring Boot，权限验证使用了Spring Security，因为之前用Sp…
javascript对象不完全探索记录04：小伙子，你对象咋来的？中篇 – 现出你的原型温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命在上一篇博文javascript对象不完全探索记录03：小伙子，你对象咋来的？上篇，中大概说了说在js中，比较好理解的对象创建方式，分别是直接定…
后端工程师入门前端页面重构（一）：口诀大家好，我是 KnewHow，一名前 Java 开发工程师。为什么要说是「前」呢？这要从两周前我加入一家新公司说起。入职第一天，实习导师告诉我会有一个月的新人引导计划，当时心里还是美滋滋的，觉得这个公司比较人性化，没有把工程师当劳动力使。但随后，我就被震撼到了。因为面试时就得知公司崇尚的是…
现代前端：对视觉和交互的探索今年我作为分享者参与了阿里D2会议，做了一个关于B站近来对视觉和交互方面探索的分享。在这里，我将以一篇文章的方式，将分享里PPT的内容再论述一遍，算是加深印象，也方便未来鞭策自己。 PPT在此：现代前端-对视觉和交互的探索圈内的大家想必都明白一个现状——现在的WEB前端圈子、尤其是国内的前端圈子，…
webpack3 编译兼容 IE8- 的正确姿势上一篇中的方法在 webpack 更新后，uglify 缓存地址也发生了变化，需要重新找地址。后来测试发现不论是 uglify-js2 uglify-js3 都是支持 IE8 兼容处理的。但在 webpack.optimize.UglifyJsPlugin 中加配置参数却无效。(webpack 的锅) 总不能每次都手动去找 webpack 缓存路径进行…
Git 二分调试法，火速定位疑难Bug你一定遇到过，一个很久没修改过的功能，莫名其妙的出现了问题？肉眼查代码、屡逻辑完全找不到问题点？前两天还好好的功能，怎么这个今天就不行了？这两天改动了这么多代码，到底是那一次改动引发的 Bug？这样非…
JS维护nginx反向代理，妈妈再也不用担心我跨域了 “跨域了，咋搞啊！” “问你自己啊，我们后台不配合解决的。” “你们写几句话就好了啊，cors、jsonp、header ……” “搞不来！不合法！不安全！……” “卧槽，这接口又跨域了，我CNMLGB” “你TM不会自己url-get、form-post、写nginx代理啊！” …… 几个月后 “这接口跨域了！” “写反向代理啊，上次你不是…
Angular2+去除url中的# Angular官方指出：如果没有足够使用hash风格（#）的理由，还是尽量使用HTML5模式的路由风格；如果配置了hash风格，在微信支付或是Angular的深路径依然会出404的问题；当你需要使用GA等工具时，由于无法获取#号后的URL，导致每次路由切换都给其发送一个路径； ‘#’有点…
遗世独立的组件——Angular应用中的单组件构建本文内容提取自《2017成都WEB前端交流大会》中的主题演讲。 Angular 是一款面向构建工具友好的框架，除了部分特殊场景之外，所有实际应用中都需要将应用构建后再部署发布。大部分时候，我们都会将应用作为整体进行构建，不过，有些时候我们需要单独构建应用的一部分，而不影响应用主体。例如，在下面这个例子中…
精读《When You “Git” in Trouble- a Version Control Story》本期精读的文章是：When You “Git” in Trouble- a Version Control Story 1 引言 git 作为目前最流行的版本控制系统，它拥有众多的用户并管理着数量庞大的实际软件项目。本文主要通过一个实
创建无障碍 React 应用使用 React 库创建可复用的模块组件在项目之间共享是一个非常好的开发方式。但是应该如何确保你的 React 应用适用于所有人？Scott 将通过一个详细且及时的教程来带领我们创建无障碍的 React 应用。学习 React 时间回到 2017 年 2 月，我从加拿大的金斯顿坐火车到多伦多。为什么我要经受这两小时的长途跋涉？…
#前端技术#【React 新手学习包（英）】详见：五部分免费视频课程 + 互动式编程示例，助你打开 React 的学习之门。