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

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

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

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

《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: 2016年回顾

翻译自:https://www.sitepoint.com/javascript-2016-in-review/

2016年是意义重大的,奇怪的,欢欣鼓舞 / 可怕的一年,这取决于你的观点。与其他事件相比,只专注于JavaScript可能看起来无关紧要,但它是每个Web开发人员的工作生活的一个巨大的一部分。

JavaScript 人气持续爆涨。不是每个人都喜欢这门语言,但是现在你可能很少听到十年前嘲笑的评论。就个人而言,我一直喜欢JavaScript – 即使在早期,令人沮丧的年头。那些从C++,Java或PHP方向过来使用它的人可能首先会感到困惑:JavaScript看起来似曾相识,却又如此陌生。克服你的推断,你会欣赏它简单的优雅,实用性和灵活性。(That said, date handling is still a nightmare!,这就是说,日期处理仍然是一场噩梦!愚人码头看不懂这句是什么意思。)

JavaScript在五月迎来了它第21个生日,让我们回顾一下它刚成熟的第一年……

ECMAScript演变

ES6 / 2015是这门语言自诞生以来最重要的更新。这份规范花了7年才完成,但现在浏览器和其他运行运行环境终于开始支持箭头函数,let,const,代理和更多令人喜悦的特性。ES6的兼容性也慢慢变得很好

如果你需要支持更老版本的浏览器,完全切换到ES6可能还有点早。更老版本的意思是,一年多前发布的任何东西。您可以使用编译器将ES6转译为ES5,如Babel,但是如果你不引入额外的构建步骤,开发就会变得复杂。

ES7/2016比起革命更像是一种进化。一个令人激动的新特性是async,它允许以同步的方式编写异步代码,而不需要回调或Promise的复杂语法(它让我一直很头疼)。 继续阅读

React入门:关于虚拟DOM(Virtual DOM)

Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI,当组件状态 state 有更改的时候,React 会自动调用组件的 render 方法重新渲染整个组件的 UI。

React 主要的目标是提供一套不同的, 高效的方案来更新 DOM.不是通过直接把 DOM 变成可变的数据, 而是通过构建 “Virtual DOM”, 虚拟的 DOM, 随后 React 处理真实的 DOM 上的更新来进行模拟相应的更新。

引入额外的一个层怎么就更快了呢?

那不是意味着浏览器的 DOM 操作不是最优的, 如果在上边加上一层能让整体变快的话?是有这个意思, 只不过 virtual DOM 在语义上和真实的 DOM 有所差别.最主要的是, virtual DOM 的操作, 不保证马上就会产生真实的效果.这样就使得 React 能够等到事件循环的结尾, 而在之前完全不用操作真实的 DOM。在这基础上, React 计算出几乎最小的 diff, 以最小的步骤将 diff 作用到真实的 DOM 上。批量处理 DOM 操作和作用最少的 diff 是应用自身都能做到的.任何应用做了这个, 都能变得跟 React 一样地高效。但人工处理出来非常繁琐, 而且容易出错. React 可以替你做到。

前面提到 virtual DOM 和真实的 DOM 有着不用的语义, 但同时也有明显不同的 API。

DOM 树上的节点被称为元素, 而 virtual DOM 是完全不同的抽象, 叫做 components。

component 的使用在 React 里极为重要, 因为 components 的存在让计算 DOM diff 更高效。 继续阅读

React入门:关于JSX语法

关于 JSX 语法请查看最新的 React 中文文档:
介绍 JSX
深入 JSX

———-以上内容 2017年8月10日 更新 ———

JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想直接使用纯Javascript代码写也是可以的,只是使用JSX,组件的结构和组件之间的关系看上去更加清晰。

看代码:

//使用JSX
React.render(
    <div>
        <div>
            <div>content</div>
        </div>
    </div>,
    document.getElementById('example')
);

//不使用JSX
React.render(
    React.createElement('div', null,
        React.createElement('div', null,
            React.createElement('div', null, 'content')
        )
    ),
    document.getElementById('example')
);

那么也就是说,我们写一个XML标签,实质上就是在调用React.createElement这个方法,并返回一个ReactElement对象。

查看API:http://www.css88.com/react/docs/top-level-api.html#react.createelement

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

这个方法的第一个参数可以是一个字符串,表示是一个HTML标准内的元素,或者是一个ReactClass类型的对象,表示我们之前封装好的自定义组件。第二个参数是一个对象,或者说是字典也可以,它保存了这个元素的所有固有属性(即传入后基本不会改变的值)。从第三个参数开始,之后的参数都被认作是元素的子元素。

转化

React JSX将类似XML的语法转化到原生的JavaScript,元素的标签、属性和子元素都会被当作参数传给React.createElement方法: 继续阅读

React入门:hello wrold

React是由Facebook开源的一个专注于“前端UI渲染“的JavaScript框架。它的重心是我们一般所说的MVC开发模式中的”V”,而这些得益于React所提供的一种虚拟DOM的概念。

简单的hello wrold

直接上手,看代码:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    <title>Hello World!</title>
      <script src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
      <script src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
  </head>
  <body>
  <div id="example"></div>
  <script type="text/jsx">
      React.render(
          <h1>Hello World!</h1>,
          document.getElementById("example"),
          function(){
              console.log("OK!")
          }
      )
  </script>
  </body>
</html>

Hello World!

入门点1:

这里引用了JSXTransformer.js,他的作用是将 JSX 语法转为 JavaScript 语法。生产环境中一般这一步放在服务端完成。

入门点2:

React.render()是非常常用的方法,渲染一个 ReactElement 到 DOM 中,放在指定的容器 DOM 元素下,返回一个到该组件的引用。如果 ReactElement 之前就被渲染到了指定的容器 DOM 元素中,该函数将会更新此 ReactElement,仅改变需要改变的 DOM 节点以展示最新的 React 组件。 继续阅读

React学习中几个注意点

最近学习React,碰到一些细节需要注意的地方。所以记录一下,内容很零散,后期再整理。

1.关于JSX 语法

React 不是一定要使用 JSX 语法,可以直接使用原生 JS。JSX语法看上去像是在Javascript代码里直接写起了XML标签,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,所以建议使用 JSX 是因为它能精确定义和反应组件及属性的树状结构,使得组件的结构和组件之间的关系看上去更加清晰。方便MXML和XAML的开发人员 – 因为他们已经使用过类似的语法;

2.HTML 标签 和 React 组件

在JSX语法中,遇到HTML标签(以<开头)就用HTML规则解析,遇到代码块(以{开头)就用JavaScript规则解析。React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

要渲染 React 模块,只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签

3.不建议作为 XML 属性名

由于 JSX 就是 JavaScript,一些标识符像 classfor 不建议作为 XML 属性名。作为替代,React DOM 使用 classNamehtmlFor 来做对应的属性。

4.大小写敏感

上面说了JSX是一个XML语法的预处理器。 XML 语法对大小写敏感,所以习惯了HTML的同学要特别注意这点,否则折腾了半天,都不知道错在哪里。比如:

var Events = React.createClass({
  clickHandler: function() {
    console.log('You got me!');
  },
  render: function() {
    return <div onClick={this.clickHandler}>
      Hello, world!
    </div>;
  }
});

React.render(
  <Events />,
  document.body
);

这里绑定click事件的onClickC是大写的。

暂时只有这么多,待续…