面试官: 你了解过Babel吗？写过Babel插件吗? 答: 没有。卒；探索AJAX；前端每周清单第 52 期: Webpack 4.0，GraphQL 安全加固，去中心化的 Web；万物皆空之 JavaScript 原型；前端萌新眼中的Promise及使用；基于 Webpack 开发和构建多页面站点；TypeScript React Native 入门；理解Angular的Reactive Form
-
面试官: 你了解过Babel吗？写过Babel插件吗? 答: 没有。卒 也就前两天，面试大厂，其中更有那么一个问题: 你了解过Babel吗？ 了解过抽象语法树，又称AST，有学习过，也写过一个基于AST的 乞丐版模板引擎 ，先是词法解析token，然后生产抽象语法树，然后更改抽象语法树，当然这是插件做的事情，最后根据新的AST生成代码。 写过Babel插件吗 没有，只是看过…
-
探索AJAX 之前学习了JSONP可以发送请求去获取数据，JSONP传送门然后通过callback来异步的执行我们预先准备好的函数。 可是JSONP只能发送get请求，这是不是太单一了？需求很多的变化，对于复杂一点的需求的话，无法满足，所以我们来试试用AJAX来实现跨域。 开工 先实现一个点击按钮发送一个请求，这里就需要介绍了一个WEB…
-
前端每周清单第 52 期: Webpack 4.0，GraphQL 安全加固，去中心化的 Web前端每周清单第 52 期: Webpack 4.0，GraphQL 安全加固，去中心化的 Web 作者：王下邀月熊 编辑：徐川 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发…
-
万物皆空之 JavaScript 原型 ES6 的第一个版本发布于 15 年 6 月，而本文最早创作于 16 年，那也是笔者从事前端的早期。在那个时候， ES6 的众多特性仍处于 stage 阶段，也远没有现在这么普及，为了更轻松地写 JavaScript ，笔者曾花费了整整一天，仔细理解了一下原型——这个对于一个成熟的 JavaScript 开发者必须要跨越的大山。 ES6 带来了太多…
-
前端萌新眼中的Promise及使用 一个 Promise 就是一个代表了异步操作最终完成或者失败的对象。这是MDN上关于Promise的解释。在前端开发中，Promise经常被拿来用于处理异步和回调的问题，来规避回调地狱和更好排布异步相关的代码。本篇文章对于Promise以及相关的async/await记录一些自己的理解和体会。 一、Promise的三种状态 从字面的意思理解，P…
-
基于 Webpack 开发和构建多页面站点 基于 Webpack 开发、调试和构建多页面站点（普通 Web 站点）的前端工程化方案，同时适用于 PC 端和移动端。 项目地址 github.com/zhaotoday/w… 特性 前端工程化 集成 PostCSS、Sass 支持 EJS 模板引擎 支持响应式 支持模块化、组件化 支持开发、调试和构建 支持 JS、CSS …
-
TypeScript React Native 入门 上一篇我们介绍了TypeScript如何跟React搭配使用，这篇我们继续介绍如何在React Native中使用TS。 关于React Native，我之前写过一本React Native电子书， 如果不熟悉RN的话可以参考一下。 本文涵盖内容如下： TypeScript & React Native TSLint Jest …
-
理解Angular的Reactive Form 原文链接 官方文档并没有说明 Template-driven Form 与 Reactive Form 哪一个更好。由于之前开发过一个 Ionic2 项目，使用的是 Template-driven Form ，光是校验就有一坨代码，维护与开发简直惨不忍睹，所以个人更加推荐使用 Reactive Form 。 使用 Reactive Form （同步），我们会在代码…
-
前端字符编码小结导语 本文源于微信游戏春节王者摇心愿活动英雄语音祝福自定义输入模块开发过程，对踩过的前端字符编码的坑进行记录总结。 Unicode 字符 Unicode（中文：万国码、国际码、统一码、单一码）是计算机科学领域里的一…
-
JavaScript复制内容到剪贴板原文链接：https://github.com/axuebin/ar… 最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑。 常见方法 查了一下万能的Google，现在常见的方法主要是以…
-
IDEA 插件开发：React 项目插件 设计部分 因为平时在做项目的时候，总是会有一些重复代码的工作量，作为一个有追求的程序员，当然不会让自己一直重复这些劳动。于是，就有了IDEA插件开发这个方案了。IDEA插件开发的资料非常少，大部分都要阅读IDEA的源码来探索。 首先明确我的目标：根据模块和页面名称，自动初始化一系列的页面，其…
-
前端中的简单编程题-数组（1） 一边学习前端，一边通过博客的形式自己总结一些东西，当然也希望帮助一些和我一样开始学前端的小伙伴。 如果出现错误，请在评论中指出，我也好自己纠正自己的错误 author： thomaszhou 1. 判断是否是数组类型 2. 复制数组（slice和concat） 3. 类数组（NodeList）转数组（Array），函数…
-
支持所有JavaScript运行时的HTTP网络库-Fly.js Fly.js 官方支持的Javascript运行时包括：浏览器、node、微信小程序。这意味着你可以在这些平台使用同一份代码来发起http请求。值得一提是集成到web应用时（浏览器环境）， fly.js的大小只有4.7KB， 非常轻量。 统一的用户层API Fly.js 支持的JavaScript运行时是不同的，但提供的用户层API是统一的，API是基于Promis…
-
利用angular依赖注入的multi选项更好的组织代码（翻译） 在几乎所有的应用程序中都有一个将所有应用的端点都抛出的文件。如果你正在使用Angular，它可能看起来像这样： export const API = new InjectionToken(‘API’); const API_URL = `${environment.BASE_URL}/api/v1`; export const endpoints = { login: ‘${API_URL}/auth/login’, signup: ‘${API_URL}/auth/s…
-
webpack-4.0更新日志（翻译） 纯手打翻译，也有小部分比较生硬的翻译，原谅那部分我也没太懂:joy: 大改动 环境 不在支持Nodejs 4。源代码已经更新到一个较高的ecmascript版本。 使用 你必须在两种模式中选择一个（ mode 或者 –mode ）： production 或者 development …
-
webpack 4 发布了 原文：https://medium.com/webpack/webpack-4-released-today-6cdb994702d4 代号: Legato 今天我们愉快的宣布 webpack 4(Legato)正式发布了！你可以使用 yarn 或者 npm 获得它： $> yarn add webpack –dev 或者 $> npm i webpack –save-dev 为什么叫 Legato? 首先…
-
RequireJS源码分析（下） 这篇文章主要会讲述模块加载操作的主要流程，以及Module的主要功能。废话不多说，直接看代码吧。 模块加载使用方法： require.config({ paths: { jquery: ‘https://cdn.bootcss.com/jquery/3.2.1/jquery’ } }); require( , function ($) { $(function () { console.log(‘jQue…
-
React 深入系列（一）：React 中的元素、组件、实例和节点 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 React 中的元素、组件、实例和节点，是React中关系密切的4个概念，也是很容易让React 初学者迷惑的4个概念。现在，老干部就来详细地介绍这4个概念，以及它们之间的联系和区…
-
Travis CI 邂逅 GitHub、Maven、Fir.im 这篇文章的目的很简单，就是要实现当我们在 GitHub 上创建应用或库的时候，Travis CI 可以帮助我们构建应用，可以把应用每次打的tag提交到 GitHub 的 releases 上，也可以把库构建完的每次版本提交到 Maven 上，还可以把应用发布到 Fir.im 上，成功或失败邮件通知我们。 目录 Travis CI …
-
UTP 自动化测试平台系列之终章：前端探索之路 导语 UTP自动化测试平台是TMQ的一个联合项目，目的是方便大家更好地开展自动化测试建设工作，减少重复平台建设的成本，提高产品的自动化测试效率。但是随着项目规模与用户需求的不断增多，需要每个开发人员都需要对前后端进行快速迭代，造成了开发人员无法兼顾后端、前端和UI的开发工作，重构之路由此而生。 …
-
json — JavaScript 对象表示法 目的：实现 Python 对象和 JSON 字符串间的相互转化。 json 模块提供了一个类似于 pickle 的 API，用于将内存中的 Python 对象转换为 JavaScript Object Notation（JSON）的序列化表示形式。相较于 pickle，JSON 优势之一就是被许多语言实现和应用（特别是 JavaScript）。它被广泛用于 REST API …
-
webpack4升级指北2018年2月25日，刚过完年webpack就给了一个加班红包。webpack4经过1个月的缓冲期，终于发布了正式版，那么抛给广大开发者的问题又来了，我是不是要升级了呢？本文就站在一个之前用webpack3开发项目，现在打算升级…
-
CSS, SVG和canvas分别实现文本文字纹理叠加效果 这篇文章发布于 2018年02月27日，星期二，23:22，归类于canvas相关, css相关 ,SVG相关。 阅读 26 次, 今日 25 次 byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7395 本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。 本文这里所说的叠加，就是混合模式中的叠加…
-
前端神器：一行命令，React 组件转 Vue 组件 基于目前React和Vue比较火，开发 react-to-vue 工具的目的是为了进一步提高组件的可复用用性，让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具，转化的是基本的react component，而不是全部的react应用。而基本react component的定义更多是基于props和state来渲染的组件，其中也可以包括发请求。 …
-
webpack工程化集成React技术栈（一） 项目开始前，我们先聊一聊关于项目的一些说明。该项目起始于2017年初，当时公司主要技术栈为gulp+angular，鉴于react的火热的生态，在公司决定研发bss管理系统时选用react开发，目的也是为react native打下基础，以解决后期公司大前端技术栈的逐步成熟。（当时没有选择vue开发的主要原因是weex生态还不够特别成熟），既…
-
vue-cli 3.0 新特性速读 vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具，具有开箱即用并且提供简洁的自定义配置等功能。 vue-cli 从 2.0 到 3.0 的升级有太多的新东西可以说了，但是不可能在本文中列举所有的内容，这篇文章作为一个对比 2.0 升级功能的导读，让你快速了解 3.0 更新的内容。 一.创建项目： 创建项目命令的…
-
王下邀月熊_Chevalier的前端每周清单系列文章索引感谢 王下邀月熊_Chevalier 分享的前端每周清单，为方便大家阅读，特整理一份索引。 前端每周清单第 52 期: Webpack 4.0，GraphQL 安全加固，去中心化的 Web 前端每周清单第 51 期: React Context API 与模式变迁…
-
基于node.js和oss的后端签名直传 阿里云OSS服务端签名后直传 我们都知道，采用JS客户端直接签名，OSSAccessId和AccessKeySecret暴露在前端页面，可以被轻易获取，存在严重安全隐患。 这里提供了一种使用阿里云OSS服务器端签名后直传，避免这种危险的方法。由于阿里云OSS开发文档只提供了Java，PHP，Python和Go语言的例子，本Demo在此提供一个以Node.js…
-
如何快速生成JavaScript文档 记得有大神说过，尽量不要注释，除了JsDoc。JsDoc 可以帮助我们通过 JsDoc 的注释风格快速生成 Api 文档。比如lodash 文档。 JsDoc 可以让开发者养成良好的注释风格，并且可以让你注释和编写文档同步进行。 官方文档/英文 中文参考 github myJsDoc 模板预览 API 文档风格主要基于 jsDoc Te…
-
在React JS中使用D3 JS 原文地址: http://www.codedata.cn/hacknews/151968967348627533 在这个博客中，我们将看到如何使用ReactJS和D3JS绘制简单的折线图。 如果您对ReactJS不熟悉，请查看官方ReactJS网页。您还可以通过步骤视频系列查看我们的Learn ReactJS。 什么是D3.js D3.js 是一个Javascript库，用于创建交互式动态可视化。…
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
