雨夜带刀's Blog

从 Web Components 到 React 谈前端组件化

前端的社区非常活跃,各种底层的框架和库层出不穷,而在这些框架和库的基础上也涌现出了一批又一批用各自的思想来实现的 UI 组件。前端本身的工作领域就专注在 UI 展现层上,一套好用的 UI 组件能提升团队的工作效率,但是这些组件的通用性和移植性并不强。

W3C 提出来的 Web Components 标准化的组件化方案,尝试去解决上面提到的各自为战的问题,在其刚提出来的那段时间确实火了一阵子,Google 的开发团队也在此基础上推出了基于 Web Components 的框架 Polymer。

先来看看使用 Web Components 如何定义一个组件。

<hello-world>
<!-- Shadow dom -->
<style>
.para { background: orange; color: #fff;}
</style>
<div>
    <button onclick="handleClick()">Say Hello</button>
    <p class="para"></p>
</div>
<script>
    var handleClick = function(event) {
        window.event.target.nextElementSibling.textContent = 'Hello World!';
    };
</script>
<!-- /Shadow dom -->
</hello-world>

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 的功能。

头像

雨夜带刀

主要折腾前端
现居北京

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