雨夜带刀's Blog

React 的骨架 JSX

为什么需要JSX

JSX 是 Facebook 团队提出的一个语法方案,可以在 JavaScript 的代码直接中使用 HTML 标签来编写 JavaScript 对象。其使用的是 XML-like 语法,这种语法方案需要通过 JSXTransformer 来进行编译转换成真实可用的 JavaScript 代码。

React 是基于组件的开发思想,React 认为一个组件可以是一个完全独立的没有任何其他依赖的模块文件。一个组件中可以有自己的样式(Inline Style)和结构(JSX编写的HTML)。

在 React 和 JSX 之前,一个组件如果要包含 HTML 结构将面临如下几个问题:

  1. 组件的 HTML 直接写在页面中,那么组件的结构和行为是分离的;

  2. 组件的 HTML 直接用字符串的形势插入到 JavaScript 代码中,那么就会出现一大段的字符串拼接,开发人员需要很小心的确保字符串拼接时没有因为少了一个符号而导致整个代码无法运行;

  3. 使用 MVC 分层的思想,引入模板引擎,那么该如何引入模板文件的片段呢;

JSX 很好的解决了这些问题。

React 高效开发环境的搭建

前言

React 是 Facebook 开源出来的目前比较流行和热门的前端框架,因其基于组件的开发符合当下和未来的前端发展趋势。

React 还引入了 JSX 语法,对于初次接触 JSX 的人可能会感觉有点别扭,但是当你用过一遍之后就会发觉已经对其爱不释手了。不得不赞叹 Facebook 的开发者,为了能让开发更简便,而想出来的牛逼的解决方案。当你深入使用 React,你会发觉整个 React 的设计思想都是令人叹为观止的。

OPTIONS 方法在跨域请求(CORS)中的应用

OPTIONS 方法比较少见,该方法用于请求服务器告知其支持哪些其他的功能和方法。通过 OPTIONS 方法,可以询问服务器具体支持哪些方法,或者服务器会使用什么样的方法来处理一些特殊资源。可以说这是一个探测性的方法,客户端通过该方法可以在不访问服务器上实际资源的情况下就知道处理该资源的最优方式。

既然比较少见,什么情况下会使用这个方法呢?

最近在做跨域文件上传的时候,浏览器会自动发起一个 OPTIONS 方法到服务器。

如果只是普通的 ajax 请求,也不会发起这个请求,只有当 ajax 请求绑定了 upload 的事件并且跨域的时候,就会自动发起这个请求。

Boyer Moore 字符串搜索算法之 JavaScript 实现

最近碰到的一个需求需要借助字符串的快速搜索算法,于是看了一些有关字符串搜索的一些算法,最先看的是 KMP 算法,看完之后发现还有更优的算法,那就是 Boyer Moore 算法。编辑器的文本搜索、GNU 的 grep 都有使用 Boyer Moore 算法,那么效率应该是经过权威验证的。

虽然网上有不少介绍资料,但我还是从一个算法小白所理解的算法原理来尝试解析该算法,算法大神可绕道了。

从头至尾搜索一个字符串,看这个被搜索的字符串是否包含指定的子串,有则返回其位置,没有则返回 -1,相当于使用自己的算法来实现 JavaScript 中的 String.prototype.indexOf 的功能。

使用 gulp-seajs-combo 合并 seajs 模块

在之前的 前端自动化构建和发布系统的设计(一) 中我有提到过使用 gulp-seajs-combo 合并 JS 模块的问题。在那篇文章中只提供了简单的 demo,当然在 github 上有详细的文档以及测试用例,尽管如此,还是会有人对使用会有诸多疑惑,希望能在看完此文后对使用 gulp-seajs-combo 合并 seajs 模块有更深入的了解。

无论是使用什么样的模块化开发模式,不管是 AMD 还是 CMD,抑或是其他类型的模块化规范,在开发时都会将一个大的应用或功能分割成一些小模块,而到了生产环境,为了能节省 HTTP 请求数,会希望将原来的小模块进行合并。

在开发环境,模块加载器解决了模块的依赖和加载的问题,由于客户端 JS 的使用特性,依赖和加载是绕不开的两个问题,不管你用的是小而美的模块加载器还是看起来很高大上的框架。在生产环境中,对模块按照依赖进行合并,这就是合并工具应该做的事情。

头像

雨夜带刀

主要折腾前端
现居北京

第 4 页,共 18 页« 最新...23456...10...最旧 »