2017年最值得学习的前端框架和技术

JavaScript 的普及造就了一个非常活跃的技术,框架和库的生态系统。 这个生态系统不断涌现多式多样的框架和技术,对许多人来说都是高度的混乱。 那么你应该关注什么样的技术呢?

你应该在哪里方面投入时间来获得最大收益呢? 目前公司招聘哪些技术栈呢? 哪些技术增长潜力最大呢?

现在最重要的技术是什么?这篇文章高度概括了你需要知道的内容,你可以通过文章中的链接了解所有关于它的一些信息。

记住,当你在学习一些实际的代码时,您可以在 Codepen.io 上交互式地执行代码。如果你还在学习 ES6 ,您可以看看如何使用 Babel REPL 进行转译。 继续阅读

2017年成为全栈开发工程师的权威指南

根据 2016年 Stack Overflow 开发者调查 显示,全栈开发工程师是当今最受欢迎的开发者职业。 毫无疑问,有许多在线和现场教学课程可以帮助你成为全栈开发工程师,甚至帮助这些新开发人员找到高薪编程开发工作。

国内外有很流行的在线课程,比如: LyndaUdacityCourseraThinkful全栈开发工程师远程就业班带你轻松搞定node.js从前端小工到 BAT 中高级工程师的必备技能Vue2.0全栈实战项目WEB前端开发零基础课程React 大神进阶 等等。

除了这些在线课程,还有许多 现场教学课程 正在教人们成为 Web 开发人员所需的技能。

在这篇文章中,我不会讨论哪些在线或现场教学课程比较好。相反,我将提供一份我认为当今要成为一个全栈开发工程师所需最重要技能的权威指南,如果你以前从未编写过代码的话,或许可以获得一份好工作。我会从三个方面列出成为一个全栈开发工程师所需的最重要技能: 继续阅读

基于 Google Code Prettify 实现的WordPress代码高亮插件——WP-googlecodeprettify

WP-googlecodeprettify一个基于 Google Code Prettify 实现的WordPress代码高亮插件,在TinyMCE编辑器中提供了一个插入代码的按钮。在文本编辑器中,加入了pre-js,pre-css,pre-html 3个快捷按钮;

GitHub 开源地址:https://github.com/feiwen8772/wp-googlecodeprettify

代码高亮效果:http://www.css88.com/archives/4728

更新信息

2017年06月12日 v2.0 更新:

  • fix bug:WordPress更新,导致插件脚本报错。
  • 重构了可视化编辑器插入代码的功能。
  • 新增:代码复制到微信公众号文章中可以正常显示。

继续阅读

2017年最佳JavaScript框架,库和工具

JavaScript框架,库和工具似乎比他们的开发人员多出很多。截至2017年5月,在 GitHub 上快速搜索 JavaScript 项目显示已经超过110万个。npmjs.org 有 50 万个可用的软件包,每月下载量近100亿次。

2017.05.29:该文章已更新,以反映 JavaScript 生态的当前状态。

本文将努力解释最流行的客户端 JavaScript 框架、库和工具之间的基本内容和差异。他们对你来说是否是 “最好的” 选择是另一个问题。选择一些东西,坚持一段时间。你需要知道的是:你最喜欢的选项终将被“更好”的东西取代,无论你选择什么! 继续阅读

使用 Vue.js 2.0 开发单页应用

早在去年9月份,流行的 JavaScript 框架 Vue.js 就发布了 V2 版本,从那时起,我就一直很想尝试一下,看看它是如何工作的。作为一个非常熟悉 Angular 和 React 的人,我很期待看到他们与 Vue 之间的相似之处和差异。

Vue.js 2.0 运行时有优秀的性能统计数据,相对较小的有效负载(通过压缩和gzip,Vue 打包运行时的版本仅有16kb),除此之外还更新配套库 vue-router 和 vuex(Vue 的状态管理库)。仅仅在一篇文章中很难覆盖相关的知识,但请留意后续的文章,我们将更深入地研究一些与核心框架很好地结合的库。 继续阅读

JavaScript ES2015 中对象继承的模式

随着期待已久的ES2015(以前称为ES6)到来,JavaScript 配备了专门用于定义 类(classes) 的语法。在这篇文章中,我将探索如何利用类语法用较小的部分来组成一个类。

将层次结构的深度保持在最低限度对于保持代码整洁很重要。这有助于你了解如何巧妙的分割类。对于一个大的代码库,一个选择是用较小的部分创建类;再组合成一个大类。这也是避免重复代码的常见策略。

想像一下,我们正在构建一个游戏,玩家生活在动物世界中。有些是朋友,其他的是敌人(像狗,可能会说所有的猫都是敌人)。我们可以创建一个 HostileAnimal 类,它扩展了类 Animal,作为 Cat 的基类。在某些时候,我们决定添加机器人来伤害人类。我们首先做的是创建 Robot 类。我们现在有两个类具有相似的属性。例如,HostileAnimalRobot 都有 attack() (攻击)方法。

如果我们可以以某种方式在一个单独的类或对象中定义一个称为 Hostile 类来表示敌对, 那么我们可以让 CatRobot 可以重复使用这个类。我们可以以各种方式做到这一点。

多重继承 是传统的 OOP 语言支持的一项功能。顾名思义,它给我们带来一种能力:创建一个继承自多个基类的类。看看 Cat 类如何在以下 Python 代码中扩展多个基类: 继续阅读

2017 年用于 UI 设计的 CSS3 和 JavaScript 动画库(TOP 9)

前端网页设计在过去的十年里经历了一场革命。在2007年,我们大多数人仍在设计静态杂志布局,在2017年,我们重新设计了数字机器,有成千上万的调整、协调、移动的部件。

简单的说,很好的UI设计师还需要成为很好的动画师 – 需要对网络动画技术有一个很好的理解。

这是我们指南中最新更新的,帮助你为每个任务选择正确的动画库。我们将通过 9 个免费的、编码良好的动画库,最适合于UI设计,它们的优点和缺点,以及何时选择它们。

请记住,我们是从一个熟悉代码的UI设计师(而不是从代精通代码的开发人员)的角度来看待每个库。这些库中有一些是纯 CSS 实现的。其他是JavaScript 的,但是,除了了解基本的 HTML/CSS 之外,使用他们你不需要更多的其他知识。链接一个动画库 – 添加一个 CSS 类 即可。
继续阅读

《React.js 小书》— 也许是最好的 React.js 入门教程

先放《React.js 小书》在线免费阅读地址:huziketang.com/books/react

React.js 是 Facebook 推出的一个用户帮助我们更方便构建大型 Web 应用程序的视图库。经过了多年的发展和开发,React.js 已经日趋成熟并且被大量地应用在了各种项目当中,和 Angular.js、Vue.js 一起并称为 Web 前端开发的三大框架(库)。已经越来越多的公司把熟练掌握 React.js 开发作为 Web 前端人才甄选的重要指标。

学习 React.js 已经逐渐成为了 Web 前端开发的必经之路之一。但 React.js 因为其颠覆性的 JSX、Virtual DOM、CSS in JS 的特性,以及它本身所带来的函数式编程的思想,给 Web 前端开发带来便利的同时也增加了学习的门槛。很多从 jQuery、DOM API 编程经历过来的初学者可能学习起来会非常吃力,感觉很多概念生涩难懂、匪夷所思。

而《React.js 小书》(在线免费阅读:huziketang.com/books/react)就是解决这一问题而生。《React.js 小书》是一本开源的、免费的、专业的 React.js 入门教程。作者具有丰富的 React.js 一线开发经验,并且熟知 React.js 学习过程中可能会经历的心路历程。所以, 《React.js 小书》抛弃了已有的教程的束缚,经过对从初学者心理角度出发,从刚入门者的认知角度出发,用读者已有的知识一步步地解决、优化一个一个问题,把读者的思维方式逐渐地在不知不觉中转变成 React.js 的思维方式。
继续阅读

面向对象的 JavaScript – 深入了解 ES6 类

通常我们需要在我们的程序中代表一个想法或概念 —— 也许是一个汽车引擎,电脑文件,路由器或温度读数。在代码中直接表示这些概念分为两部分:数据表示其状态和函数来表示行为。类给我们一个方便的语法来定义对象的状态和行为,来表示我们的这些概念。它们使我们的代码更安全,保证一个初始化函数能被调用,并且它们使得我们能更容易地定义一组固定的函数,来对数据进行操作并保持有效状态。如果你能把某些事物看成一个独立的实体,你可能应该定义一个类来表示你的程序中的“事物”。
继续阅读

如何使用 Vue 2 构建简单的单页应用程序(第 2 部分)

本教程的第1部分中讨论了构建单页应用程序的基础知识,页面链接由 Vue 自动完成。 在本教程中,您将学习如何:

  • 传递路径参数
  • 使用路由保护,设置未经认证的用户可访问路由。

从上一个教程结束开始,你可以打开 GitHub 仓库,克隆并继续完成应用程序。 继续阅读