执行 innerHTML 里的 <script>

- Posted in 编程 by
背景 有时候我们会有把一整段 HTML 动态塞进页面的需求,例如渲染了一个模板,从服务器端获取了一段广告代码等。一般情况下我们使用 container.innerHTML 即可。但是当 HTML 中出现 script 标签时,直接使用 innerHTML 并不会执行它。 一个例子 <div id="test">Hello HTML</div> <script> Read more

理解 Web 缓存

- Posted in 编程 by
Web 缓存 提到 Web 缓存大家都会觉得很简单,不就是检查资源是否有缓存,如果有就加以利用。如果追究下去,多数人还能扯出 cache-control, last-modified, etag 之类的名词,但如果真的考究一下这些字段之间有什么区别,又是怎么工作的,其实很多人只有一个极为模糊的认识,所以写一篇文章来梳理一下 Web Read more

从零开始的 Redux 教程

- Posted in 编程 by
前端生态日新月异, flux 已经过时(恩然而我都还没有来得及学),redux 成了状态管理的标配,每一个前端开发者都应该学习。然而因为 redux 的多种概念着实让新手费解,很多人沉浸在 react 全家桶的配置无法自拔。所以我试着丢开 react,理清楚 redux 本身的几个主要概念,并争取循序渐进的讲解 redux Read more

JSONP 实现

- Posted in 编程 by
JSONP 是解决跨域问题的一种方案,不同于 JSON,其并不是一种数据交换格式,而只是一种绕过跨域的技巧。 JSONP JSONP 的原理非常简单,为了克服跨域问题,利用没有跨域限制的 script 标签加载预设的 callback 将内容传递给 js。一般来说我们约定通过一个参数来告诉服务器 JSONP Read more

利用 generator 解决回调地狱

- Posted in 编程 by
在 JS 中,常常出现多个异步操作需要逐步完成的情况,例如相继获取多个 API 的结果,最简单的方法是通过嵌套的回调实现: function sleep(cb){ setTimeout(cb, 1000) } function getAuthor(cb){ sleep(() => { cb('codefalling') }) } function getBlog(cb, author){ sleep(() => { if (author === 'codefalling') { cb('https://codefalling.com') } }) } Read more

Javascript中的var和let

- Posted in 编程 by
我们先来看一个常见的例子, function func(){ for (var i = 0; i < 10; i++) { setTimeout(function(){ console.log(i) },1000) } } func() 输出的结果并不是我们预期的 0-9,而是输出了十个 10。而当我们把其中的 var 改成 let,结果就成了 0-9。 原因 var 使用的是函数作用域,即 for 循环中的 var i 实际上在整个 func Read more

AngularJS number input 的双向绑定

- Posted in 编程 by
来自于开发中偶然遇到的一个问题,看下面的例子: <div ng-app> <div ng-controller="TodoCtrl"> <input type="number" ng-model="value" size="30" > <input type="button" ng-click="change()" class="btn-primary" value="TEST" > </div> </div> function TodoCtrl($scope) { $scope.change = function() { $scope.value = '' } } 可以在 JSFiddle Read more

不要误用箭头函数

- Posted in 编程 by
随着 ES6 的到来,我们也迎来了很多清晰简洁的语法糖。箭头函数(arrow function)就是其中一个。关于箭头函数的简单介绍可以参见:箭头函数-廖雪峰的官方网站。 看起来似乎我们可以直接用箭头函数替代原有的函数表达式即可,因为看起啦我们总是希望函数能够继承当前作用域的 Read more

VirtualDOM实现的简单实践

- Posted in 编程 by
React最近在前端圈几乎无人不知,和人聊天不聊几句React都不好意思说自己是学前端的,VirtualDOM功不可没。正好最近在找前端方面的实习,于是便研究了下VirtualDOM的算法,实现了一个非常简陋的版本以帮助自己理解。 什么是 VirtualDOM 面临的问题 受制于标准的原因,DOM Read more

在ES5中模拟拓展运算符

- Posted in 编程 by
JavaScript 在 ES6 中引入了拓展运算符, 可以把可遍历对象(例如数组)直接拓展为参数列表。例如数组 var args = [1, 2, 3] console.log(Math.max(args)) // output: NaN, 因为 Math.max 的参数不是数组 console.log(Math.max(...args)) // output: 3 简单的模拟 上面的例子在 ES5 中其实也很容易实现,只要用 apply 就可以了 apply 的用法 Read more