勇往直前的专栏

作者简介Jade Gu，携程高级前端开发专家，负责度假前端框架设计和 Node.js 基础设施建设等工作。这篇文章将简略地介绍我们当前的无线前端架构设计及其演进之路。主要内容包含以下几个部分，希望我们的经验能带给大家一些启发。1）当前的前端方案及其解决的问题2）现在面对的新挑战3）我们的前端方案设计和选择。一、当前的前端方案及其解决的问题1.1 当前方案的技术背景将时间调回到 2016 年。我们已经将几个核心的前端应用，从 C# ASP.NET 迁移到了 Node.js。.

浏览器基本原理我叫小风，是Windows帝国一个普通的上班族。今天，我入职了一家浏览器公司，公司的主营业务是为人类提供Internet上网服务，我的岗位是负责执行JavaScript代码。上午的晨会上，认识了负责网络连接的老白，所有网络请求都得找他帮忙，还有负责存储管理的小黑，什么Cookie，LocalStorage，SessionStorage之类的都归他管。哦，差点忘了，还有一个妹子小雪，她负责网页渲染。随后主管安排了我的工作：老白从网络取回网页之后交给小雪来解析渲染，遇到网页中的

学过网页开发就会知道，CSS 不能算编程语言，只是网页样式的一种描述方法。为了让 CSS 也能适用软件工程方法，程序员想了各种办法，让它变得像一门编程语言。从最早的Less、SASS，到后来的 PostCSS，再到最近的 CSS in JS，都是为了解决这个问题。本文介绍的 CSS Modules 有所不同。它不是将 CSS 改造成编程语言，而是功能很单纯，只加入了局部作用域和模块依赖...

公司的新项目要启动了，需要使用 Angular 4.0，并且使用 webpack 工具进行打包。所以就需要安装 node。node 的安装很简单，在 node 的官网 nodejs.org 去下载 msi 安装包，目前 node 最新的版本是 v8.1.2(打开这个官网，会根据你的系统为你推荐最合适的版)如果下载很慢，可以到我百度网盘去下载 http://pan.baidu.com/s/1...

思维盲区我最开始学习使用 dva 是从《12 步 30 分钟，完成用户管理的 CURD 应用》开始的，这同时也是 dva 的官方教程。然而因为领悟能力太差，最开始完全没理解。前 4 步还跟得上，第 5 步创建 model 和改造 service 就懵逼了。硬着头皮照抄代码，抄到最后数据没出来，我还不知道自己哪儿错了。大写的尴尬。现在再看这篇教程，发现从第 5 步的 model 开始，d...

npm介绍说明：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等） 使用npm安装插件：命令提示符执行npm install <name> [-g] [--save-dev] <name>：node插件名称。  例：npm install gulp-less --save-dev-g：全局...

当时学习 Grunt 的时候，真是很头疼。分了两个时间段，学习了两次才硬啃下来，之后才能用在项目中。主要原因我认为是学习资料和文档上面写的太高端了。这类的文档或者资料有个显著特点，上来先简单介绍一下这个玩意（Grunt 是一个 JavaScript 任务运行器），然后就是如何安装，直接给你配置文件的语法，如何使用插件，新手往往看完还不知所以然。就像我第一次学习的时候，只是大体知道 Grun...

FAST, RELIABLE, AND SECURE DEPENDENCY MANAGEMENT.就在前不久， Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm 。咱虽然是个半桶水的咸鱼前端，不过也得跟上 Javascript 这股潮 (hong) 流 (huang) 的脚步，所以便有了下面这篇文章。大概的浅尝了一下这个自称是又快又可信赖又安全的包管理，所以写...

工程目录       以编写一个命令行程序为例，一般我们会同时提供命令行模式和 API 模式两种使用方式，并且我们会借助三方包来编写代码。除了代码外，一个完整的程序也应该有自己的文档和测试用例。因此，一个标准的工程目录都看起来像下边这样。- /home/user/workspace/node-echo/ # 工程目录 - bin/ # 存放命令行相关代码 ...

学习的原因还是起源于大牛github项目的博客源码，看得我一头雾水...import Vue from 'vue';import App from './App';import router from './route';import axios from 'axios';import './less/index';于是赶快上了阮一峰大牛的《ES6标准入门》这辆车，学习了：1.项...

React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。代码结构 组件之间的通信对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。为了解决这个问题，2014年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内...

异步编程对 JavaScript 语言太重要。JavaScript 只有一根线程，如果没有异步编程，根本没法用，非卡死不可。以前，异步编程的方法，大概有下面四种。回调函数 事件监听 发布/订阅 Promise 对象ECMAScript 6 （简称 ES6 ）作为下一代 JavaScript 语言，将 JavaScript 异步编程带入了一个全新的阶段。这组系列文章的主题，...

一、参数的求值策略Thunk函数早在上个世纪60年代就诞生了。那时，编程语言刚刚起步，计算机学家还在研究，编译器怎么写比较好。一个争论的焦点是"求值策略"，即函数的参数到底应该何时求值。var x = 1;function f(m){ return m * 2; }f(x + 5)上面代码先定义函数 f，然后向它传入表达式 x + 5 。请问，这...

React Router 4.0 （以下简称 RR4） 已经正式发布，它遵循React的设计理念，即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件（还有若干对象和方法），具有声明式（引入即用），可组合性的特点。http://www.jianshu.com/p/e3adc9b5f75cRR4 本次采用单代码仓库模型架构（monorepo），这意味者这个仓库里面有若干相互独立的包，分...

 NPM npm是Node.js能够如此成功的主要原因之一。npm团队做了很多的工作，以确保npm保持向后兼容，并在不同的环境中保持一致。npm是围绕着语义版本控制（semver）的思想而设计的，下面是从他们的网站摘抄过来的：给定一个版本号：主版本号.次版本号.补丁版本号， 以下这三种情况需要增加相应的版本号:主版本号： 当API发生改变，并与之前的版本不兼容的时候 次版...

1、背景前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端HTML页面通过AJAX调用后端的RESTFUL...

【优快云 编者按】从上世纪 90 年代中期发行以来，JavaScript 就已经成为最流行的 Web 开发语言之一了。尽管 JavaScript 最初只是一个浏览器脚本语言，但是近几年，我们已经能够明显看到它在不断地演变：在桌面端、移动设备和服务端 Web App 领域都有所发展。“任何能够用 JavaScript 实现的应用系统，最终都必将用 JavaScript 实现”，Jeff At...

作者 |浪里行舟前言浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面大家最耳熟能详的可能就是Webkit内核了，Webkit...

在react开发中，经常会遇到组件重复渲染的问题，父组件一个state的变化，就会导致以该组件的所有子组件都重写render，尽管绝大多数子组件的props没有变化render什么时候会触发首先，先上一张react生命周期图：这张图将react的生命周期分为了三个阶段：生成期、存在期、销毁期，这样在create、props、state、unMount状态变化时我们可以清楚的看到re...

作者 | javinpaul译者 | 无明之前我们已经介绍了 2019 年 Vue 学习路线图，而 React 作为当前应用最广泛的前端框架，在 Facebook 的支持下，近年来实现了飞越式的发展，所以，我们将在下文中介绍 2019 年 React 学习路线图，希望给想学 React 的开发者一些借鉴。这就是 2018 年的 React 路线图。它非常全面，2018 年剩下的...

作者｜Anthony Gore译者｜无明如果你是 Vue 开发新手，可能已经听过很多行话术语，比如单页面应用程序、异步组件、服务器端渲染，等等。你可能还听说过与 Vue 有关的一些工具和库，比如 Vuex、Webpack、Vue CLI 和 Nuxt。浸没在术语和工具的浩瀚海洋中难免会令人感到沮丧，但其实并不是只有你一个人有这种感受，所有经验水平的开发人员都会持续感觉到这种莫名...

天下视频唯弹幕不破说起弹幕看过视频的都不会陌生，那满屏充满着飘逸评论的效果，让人如痴如醉，无法自拔最近也是因为在学习关于canvas的知识，所以今天就想和大家分享一个关于弹幕的故事那么究竟弹幕是怎样炼成的呢？ 我们且往下看(look)看什么？看效果效果图已经呈现给各位了，那么是不是有点小激动呢？是的，感慨万分，思绪宁乱，无语凝噎无论以后我们的工作中是否会遇到这样的需...

提问内容我看过非常多的人都这样说，我总结他们理由几乎都是react显得牛皮。有人能够给我真正去分析react做项目牛逼在哪吗，vue和react，我用vue多，我是觉得简单好用，做项目快，写同一个项目，react代码肯定比vue多，vue的一些操作都太轻便了，组件设计的好的话，每个组件代码很少，并且还是html，js，css分离看着十分清晰，我觉得react比vue方便的地方就是props...

1. 大神寻找Github、微博、知乎等技术社区上比较活跃、影响力大的圈内大神，供大家膜拜！视野所限，未必全面，欢迎大家推荐、自荐。排名不分先后，序号只为标记方便。提供信息只为学习交流之用，如有冒犯，请见谅；如果涉及隐私或不愿公开内容，请联系我。1.1 国际 Chris Coyier Codepen创始人，css-tricks站长。 联系方式： CodePen、 ...

一、概述　　以列表页中的标准列表为主　　　　Ant Design Pro 默认通过只需浏览器单方面就可处理的 HashHistory 来完成路由。如果要切换为 BrowserHistory，那在 src/index.js 中也有对应的内容可以直接修改，但需要在后端服务器进行相应路由配置。 二、详述加载过程图 2.1、菜单→路由→组件　　在左侧的导航栏点击 列...

ESLint的使用 ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。首先，安装 ESLint。$ npm i -g eslint然后，安装 Airbnb 语法规则，以及 import、a11y、react 插件。$ npm i -g eslint-config-airbnb$ npm i -g eslint-plugin-i...

一、简介Eslint是一个开源的JavaScript代码检查工具，其作者是大名鼎鼎的“红宝书”《JavaScript高级程序设计》作者 Nicholas C. Zakas。Nicholas C. Zakas 在他的多部著作中都有涉及到JavaScript的代码风格问题，而eslint正是用来统一JavaScript代码风格的工具。二、使用的目的和原因1. 统一代码风格，减少review...

一、终极解决异步操作是 JavaScript 编程的麻烦事，麻烦到一直有人提出各种各样的方案，试图解决这个问题。从最早的回调函数，到 Promise 对象，再到 Generator 函数，每次都有所改进，但又让人觉得不彻底。它们都有额外的复杂性，都需要理解抽象的底层运行机制。异步I/O不就是读取一个文件吗，干嘛要搞得这么复杂？异步编程的最高境界，就是根本不用关心它是不是异步。...

真正学会 React 是一个漫长的过程。你会发现，它不是一个库，也不是一个框架，而是一个庞大的体系。想要发挥它的威力，整个技术栈都要配合它改造。你要学习一整套解决方案，从后端到前端，都是全新的做法。举例来说，React 不使用 HTML，而使用 JSX 。它打算抛弃 DOM，要求开发者不要使用任何 DOM 方法。它甚至还抛弃了 SQL ，自己发明了一套查询语言 GraphQL 。当...

随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的...

要点梗概React 应用主要的性能问题在于多余的处理和组件的 DOM 比对。为了避免这些性能陷阱，你应该尽可能的在 shouldComponentUpdate 中返回 false 。简而言之，归结于如下两点： 加速shouldComponentUpdate 的检查 简化shouldComponentUpdate 的检查 免责声明！文章中的示例是用 React +...

学习Javascript，最难的地方是什么？我觉得，Object（对象）最难。因为Javascript的Object模型很独特，和其他语言都不一样，初学者不容易掌握。下面就是我的学习笔记，希望对大家学习这个部分有所帮助。我主要参考了以下两本书籍：《面向对象的Javascript》（Object-Oriented JavaScript）《Javascript高级程序设计（第二...

this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，　　function test(){　　　　this.x = 1;　　}随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。下面分四种情况，详细讨论this的用法。情况一：纯粹的函数调用这是...

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。　　v...

        Underscore封装了常用的JavaScript对象操作方法，用于提高开发效率。它本身与我们介绍的主题“Backbone”没有半毛钱的关系，因此你可以完全不理会“Backbone”的概念来学习它，或将它单独运用到任何一个页面。（另外，Underscore还可以被使用在Node.js运行环境。）        在学习Underscore之前，你应该先保存它的API地址，因为你...

<script type="text/javascript">$(document).ready(function(){var month = new Number(${month!1});var year = ${year!};$("#yearSelected").text(year);$("#div"+year).hide();    $("#months li").e...

       有些东西,对于初学者来说,可能看不懂,我在这里只是想说一下,JS里面有这么个情况,并不是说让你掌握,你只需要大致浏览一下就可以了。// 所有在双斜杠之后的内容都属于注释//变量是表示值的一个符号名字//变量通过var关键字来声明,案例:var x;//声明一个变量x //值可以通过等号赋值给变量x=0;  //现在变量x的值为0x //=>0:通...

<!--鼠标滑过表格行变色效果开始--><script type="text/javascript">        /* 当鼠标移到表格上是，当前一行背景变色 */      $(document).ready(function(){            $(".g-sun-li tr td").mouseover(function(){           ...

function checkAmount() {          var amount = $("#amount").val();if(amount!= null && amount != ""&&amount!="0"){var exp = /^(([1-9]\d*)|\d)(\.\d{1,2})?$/;if(!exp.test(amount)){...

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具...