Eyas
Eyas
## action creator 在使用redux的过程中，经常会使用一种函数叫action creator，他们专门为触发action而生，应用逻辑基本都是在这里执行，一个redux应用充斥着大批大批的action creator，所以action creator的模块化非常重要，否则项目进行到一定程度时将变得非常难以维护 ### 模块化 通常我们将action的操作类型进行分组，比如一个post.js里面专门操作文章，photo.js里面专门操作相册。 ### 组件绑定 action creator 在 react 应用中，绑定 action creator 使用 `bindActionCreators` 函数，参数传入一个都是纯函数的对象，将会把里面的函数全部放到props中。 如果对象中的元素不是函数，将会被 `完全忽略` 那么问题来了，如果我传入两个相同名字的函数的时候，肯定有一个会被覆盖。 ``` js // post.js export...
前端博客缓存机制
继上一篇文章 #2 ，使用github api搭建了一个博客，托管于github pages。这么做优点很显著，功能齐全，seo友好，issues页面也好看，github用户互动方便等等。但是，在某些方面收到了阻碍。 ## 遇到的问题 - 接口偏慢，有部分网络还把github墙了 - 接口访问次数受限，对于普通的api请求限制为了每个ip每小时最多请求60次 ## 解决方案 给网站加个缓存，把每次请求回来的数据存到浏览器，需要数据的时候从浏览器中拿。由于数据来源于缓存，速度回非常快 ### 流程 当应用需要请求数据时，首先检查一下本地缓存中是否存在数据，如果存在则从缓存中获取，直接返回给应用，如果不存在，就先请求api，请求成功后先将数据存到缓存中，再从缓存中读取数据，返回给应用。这样，应用的数据统一都来自缓存，而api请求成功后，都统一存到缓存，这样统一流程更方便实现与维护。 ### 缓存更新机制 考虑一下几个问题： - 这是博客应用，而且github还有一个永远最新的备份。所以应用数据有所延时其实完全没关系 - 网站流量很小，页面请求不多 - 博客都是文章，文章都是字，读文章不会经常刷新页面 结论是： **每当进入首页的时候刷新列表，而且还是后台静默更新。进入文章详情后，更新文章的评论数据。** 因为评论数据无法一次性全拿回来 ###...
ES6 基础语法
参考文献： http://es6.ruanyifeng.com/ # babel ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。目前浏览器已实现大部分的ES6特性，但是为了兼容性我们需要使用工具babel编译为es5代码。才能让应用正常运行 在浏览器可以使用 chrome 插件 [`Scratch Js`](https://chrome.google.com/webstore/detail/scratch-js/alploljligeomonipppgaahpkenfnfkn) 尝试编写es6，并查看编译后的代码 或者到 babel 在线编译尝试 https://babeljs.io/repl/ # let && const var 声明的变量在整个当前作用域有效，let 和 const声明的变量在代码块有效（块级作用域），cont 声明的变量为常量，不能重新赋值 ``` js for(var i =...
- 官网： http://redux.js.org/ - 中文文档： http://cn.redux.js.org/ 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。惟一改变 state 的办法是触发 action，一个描述发生什么的对象。为了描述 action 如何改变 state 树，你需要编写 reducers。 # 三大原则 - 单一数据源:整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree...
- 官网： https://facebook.github.io/react/ - 中文文档： http://reactjs.cn/react/docs/getting-started.html React是Facebook开源的一个用于构建用户界面的Javascript库,专注于MVC架构中的V，即视图。 # 组件 我们可以创建一个有特殊功能的组件，在需要的地方可以反复的用。在编写应用的时候，我们是编写一个又一个的组件，然后组合成一个完整应用。 ## 定义组件 继承 React 的 Component 类可以创建一个组件 ``` jsx class Hello extends React.Component{ constructor(props, context){ super() this.state = {} //...
官方网站：http://requirejs.org/ 用途： - 实现js文件的异步加载 - 管理模块之间的依赖性，便于代码的编写和维护 ## 入口文件 在引入`requirejs`文件的`script`标签中使用`data-main`定义入口文件，入口文件得js后缀可省略 ``` html ``` ### requirejs 配置 在入口文件的头部，或者在引入requirejs前，定义requirejs的配置 ``` js require.config({ baseUrl: '/', // 基础路径 path:{ // path 定义文件路径，相当于给路径取个别名 backbone: 'js/lib/backbone.js', underscore:...
## jQuery && $ 在jquery中， `$` 变量是 `jQuery` 变量的简写 ``` jQuery === $ // true ``` ### $ 方法 - $ 方法接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素 - $ 方法接收原始 HTML 标记字符串，动态创建由 jQuery...
目标：熟练掌握JavaScript基础知识与面向对象概念 # 大纲 - 基本概念 - 语法 - 基本数据类型 - 操作符 - 引用类型 - Object - Array - Function - 包装类型 - 执行环境 - 闭包 - this - 面向对象 -...
# 一等函数 “一等公民”函数可以去任何可以去的地方，很少有限制 - 函数可以存储为变量 - 可以作为数组的一个元素 - 作为对象的成员变量 - 可在使用时创建 - 可以被传递给另一个函数（作为参数） - 可以被另一个函数返回（作为返回值） ### 纯函数 > 纯函数是这样一种函数，即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用 - 函数可以自给自足 - 无副作用 - 副作用是在计算结果的过程中，系统状态的一种变化，或者与外部世界进行的可观察的交互 - 只要是跟函数外部环境发生的交互就都是副作用 纯函数的好处 - 可缓存...
# what is lowdb 项目地址：https://github.com/typicode/lowdb 当我第一次接触到 lowdb 的时候，被它的方便小巧，使用简单的吸引住了。lowdb 是一个轻量级的数据库。可用于服务端与前端。在服务端，以一个json文件形式永久存储数据。在前端，可使用 localStorage 永久存储。另外，无论前后端，都可以使用内存作为存储。 # why lowdb 其实喜欢这个工具的原因，是有以下几点： - 操作api 是完全基于 [lodash](https://github.com/lodash/lodash) 的，[lodash API](https://lodash.com/docs) 非常强大与方便，相当于有了一个强大且熟悉的 ORM - 数据库轻巧，基本不怎么消耗内存空间 - 体积小巧，lodash是我一直使用的工具，添加了lowdb后打包文件只增加了 2.x KB 的体积...