SF
学习笔记
学习笔记
注册登录
关注博客
注册登录
主页
关于
RSS
Change Detection And Batch Update
TTFB
2016-09-23
阅读 10 分钟
4.2k
在传统的WEB开发中,当与用户或服务器发生交互时,需要我们手动获取数据并更新DOM,这个过程是繁琐的、易错的。特别是当页面功能过于复杂时,我们既要关注数据的变化,又要维护DOM的更新,这样写出来的代码是很难维护的。新一代的框架或库,例如Angular、React、Vue等等让我们的关注点只在数据上,当数据更新时,这些框...
Angular2 Dependency Injection
TTFB
2016-04-20
阅读 10 分钟
4.7k
依赖注入是Angular的核心概念之一。通过依赖注入,我们可以将复杂、繁琐的对象管理工作交给Angular,将我们的工作重心更好的放在业务上。依赖注入本身是后端编码的概念,熟悉Spring框架的对其应该不陌生,Angular1首次将依赖注入引入前端开发,Angular2继续将其发扬光大,同时又很好的解决了Angular1中依赖注入所遗留的...
jQuery Deferred
TTFB
2016-01-21
阅读 4 分钟
3.5k
Deferred是从1.5版本引入的一个核心特性之一,主要是为了解决Callback Hell,老生常谈的问题,这里就不多赘述了。本文旨在剖析Deferred的内部实现,让大家能够深入了解Deferred。
jQuery Callbacks
TTFB
2016-01-19
阅读 5 分钟
6.8k
$.Callbacks用来管理函数队列。采用了观察者模式,通过add添加操作到队列当中,通过fire去执行这些操作。实际上$.Callbacks是1.7版本从$.Deferred对象当中分离出来的,主要是实现$.Deferred功能。
React Server Render
TTFB
2015-09-11
阅读 10 分钟
10.8k
一直想用React做些东西,苦于没有实际项目练手,所以一直都是自己在搞些小玩意儿,做过用React Router构建的内部订餐系统,是个SPA,也在社区分享过。由于一个人做全栈开发,数据库(mongodb)全靠自己设,需求全靠自己编,页面全靠自己扯,心好累,感觉不会在爱了!SPA用来构建内部的系统完全没问题,但是用来做门户、...
React Component Lifecycle
TTFB
2015-08-31
阅读 10 分钟
30.6k
概述 我们先来理一理React的生命周期方法有哪些: componentWillMount 渲染前调用一次,这个时候DOM结构还没有渲染。 componentDidMount 渲染完成后调用一次,这个时候DOM结构已经渲染了。这个时候就可以初始化其他框架的设置了,如果利用jQuery绑定事件等等。 componentWillReceiveProps 初始化渲染不会调用,在接收到...
触屏版开发总结
TTFB
2015-06-30
阅读 5 分钟
5.6k
前段时间刚刚完成公司触屏版项目,我觉得很有必要写一篇文章总结下自己的心得和踩过的坑。每次回头看看自己写的代码,都有不一样的体会,不过大致感觉都是惊人的相似:这TM写的是啥?这TM写的又是啥?
How to choose template engine
TTFB
2015-06-01
阅读 3 分钟
5k
后端渲染页面的开发方式目前还占据着主导的地位,虽然像Backbone、Angular、Reactjs等技术很火,但是在国内的普及和应用还远远不够。单页,前端渲染页面的方式想要成为主流还有很长的路要走。在我接触的语言中,后端开发的模式基本以MVC为主,V当然所谓的View了,如Java的Jsp、Velocity、Freemark,再如Node的Ejs、Jade...
Handlebars—semantic template engine
TTFB
2015-05-26
阅读 7 分钟
8k
刚接触前端的时候,师傅就给我推荐了Handlebars,自己也蛮喜欢它的语法。到现在,Handlebars都已经更新到3.0.3了,是时候重新过一遍文档了。
React Reflux
TTFB
2015-05-25
阅读 13 分钟
42.9k
Reflux是根据React的flux创建的单向数据流类库。 Reflux的单向数据流模式主要由actions和stores组成。例如,当组件list新增item时,会调用actions的某个方法(如addItem(data)),并将新的数据当参数传递进去,通过事件机制,数据会传递到stroes中,stores可以向服务器发起请求,并更新数据数据库。数据更新成功后,还是...
Reactjs Mixins
TTFB
2015-04-24
阅读 4 分钟
14.5k
看到上面的代码,直接吐血而亡啊,写的是什么几把玩意儿。还好只写了两个组件,要是多个组件,相同的代码就会重复多遍。相信大家看到上面的代码也会发现一个致命的问题:可维护性太差差差!
React学习笔记—类名操作
TTFB
2015-04-17
阅读 3 分钟
10.2k
代码看起来要舒服些,但是还有一个问题,语义太差,阅读维护起来确实不大容易。为了解决这种类似组件className初始化或者动态切换的效果,React提供了工具ClassSet。
React学习笔记—简易信息管理,实现CUD
TTFB
2015-04-15
阅读 6 分钟
5.8k
需求 利用React实现一个简易的信息管理系统。 写的不太好,欢迎熟悉React的大神来找茬。真心感激! 分析 编写React就是不断构建组件的过程,首先要根据需求进行UI的划分: {代码...} 编码 服务端 没有用到服务器,采用了数据模拟的方式 {代码...} 页面 {代码...} 组件 StudentBox {代码...} StudentList {代码...} Stude...
React学习笔记—虚拟DOM
TTFB
2015-04-15
阅读 2 分钟
24.9k
React对底层的代码作了封装,在大多数情况下,我们不需要直接去操作DOM。但是有时候我们还是需要使用到底层的代码的,比如输入框获取焦点,这个时候可以通过第三方的类库或者React提供的API实现。
React学习笔记—表单
TTFB
2015-04-15
阅读 2 分钟
17.4k
表单组件像 <input>、<textarea> 不同于其它的原生组件,因为它们会随着用户交互而改变。这些组件提供了接口方便我们管理这些交互。
React学习笔记—属性转移
TTFB
2015-04-13
阅读 2 分钟
6.8k
var { checked, ...other } = this.props;使用了ES7的结构化赋值,所以引入时要加入harmony,如下:
React学习笔记—组件复用
TTFB
2015-04-13
阅读 4 分钟
18.3k
当我们在设计接口的时候,将一些常见的设计元素(如按钮、表单、布局等)拆分成有着良好接口的可重用的组件。这样的话,下次你构建UI的时候只要写少量的代码。
React学习笔记—组件组合
TTFB
2015-04-13
阅读 3 分钟
11.7k
我们在编程的时候碰到相同的功能,可以通过抽出公共方法或者类来实现复用。当我们构建新的组件的时候,尽量保持我们的组件同业务逻辑分离,将相同功能的组件抽出一个组件库,通过复用这些组件库来提高我们代码的重用性。
React学习笔记—UI交互
TTFB
2015-04-03
阅读 5 分钟
22.5k
props 先看个简单的例子: {代码...} 看代码就很容易理解:通过this.props我们可以拿到组件使用时的属性。稍微改变下代码,我们打印出this.props瞅瞅: {代码...} 浏览器页面效果: 可以看出this.props就是组件的属性集合,稍微改下代码,再来看看: {代码...} 浏览器页面效果: 这个时候多了一个children的属性,React...
React学习笔记—JSX
TTFB
2015-04-03
阅读 4 分钟
47.5k
使用React,不一定非要使用JSX语法,可以使用原生的JS进行开发。但是React作者强烈建议我们使用JSX,因为JSX在定义类似HTML这种树形结构时,十分的简单明了。简明的代码结构更利于开发和维护。 XML有着开闭标签,在构建复杂的树形结构时,比函数调用和对象字面量更易读。看个直接的对比:
React学习笔记—数据展示
TTFB
2015-04-02
阅读 4 分钟
13.2k
我们使用UI最基本的事就是用来展现数据。React使得展现数据变得简单,并且当数据改变时,React能自动保持UI的更新。 开始 创建一个简单的Demo: {代码...} 以后所有代码示例的HTML都是用上面的代码,只关注JavaScript的编写。 {代码...} React.createClass 用来创建一个组件类,前面也说了,编写React代码主要就是构建通...
React学习笔记—Why React?
TTFB
2015-04-01
阅读 1 分钟
7.5k
React是Facebook和Instagram用来创建用户界面的JavaScript库。很多人将React认为是MVC中的V。 React的创建是为了解决一个问题:如何构建一个数据交互频繁的大型应用程序?为了实现这个目标,React运用了两个思想:
angularjs学习笔记—事件指令
TTFB
2015-03-30
阅读 7 分钟
60k
ngClick 适用标签:所有触发条件:单击 {代码...} ngDblclick 适用标签:所有触发条件:双击 {代码...} ngBlur 适用标签: a input select textarea 触发条件:失去焦点 {代码...} ngFocus 适用标签: a input select textarea 触发条件:获取焦点 {代码...} ngChange 适用标签:input触发条件:model更新 输入框的内容...
angularjs学习笔记—指令input
TTFB
2015-03-30
阅读 7 分钟
52.6k
input[text] input一般和ngModel结合使用来实现双向绑定,同时angular提供了很多表单校验的指令 required 必填 ngRequired 必填(ngRequired可以控制是否是必填校验) ngMinlength 最小长度 ngMaxlength 最大长度 pattern 正则匹配 ngPattern 正则匹配 ngChange 内容改变时触发 ngTrim 是否trim数据,默认true {代码...}...
angularjs学习笔记—指令a,ngHref
TTFB
2015-03-28
阅读 1 分钟
30.1k
angularjs的执行都是在DOM渲染完成之后,如果我们在angularjs执行这个表达式之前点击了链接,那么就直接访问了/avatar/{{hash}},一般都会跳转到404页面,用户体验太烂了。
angularjs学习笔记—工具方法
TTFB
2015-03-27
阅读 4 分钟
24.5k
angular.bind(self, fn, args) 作用:返回一个新的函数,绑定这个函数的this指向self 参数: self:新函数的上下文对象 fn:需要绑定的函数 args:传递给函数的参数 返回值:this指向self的新函数 {代码...} 注意:bind会根据你的参数类型来决定调用call或apply,所以args可以是一个个数据,也可以是一个数组哦。 angula...
CoffeeScript—面向对象
TTFB
2015-03-24
阅读 6 分钟
10k
自从面向对象的编程思想出现以来,这个概念已经被炒烂了,只要编程开发大家都会拿面向对象来说事,好像只要跟面向对象沾边就会显得逼格很高一样,不过确实逼格提高了。要知道,面向对象只是一种手段,最终目的是为了提高我们项目的重用性、灵活性和扩展性。
JavaScript常用的数组方法——ES3
TTFB
2015-03-17
阅读 3 分钟
10.8k
join(sep) 功能:将数组元素通过指定的字符连接成字符串 参数: sep:拼接字符串 返回值:拼接后的字符串 注意:数组本身不发生变化 {代码...} reverse() 功能:将数组元素颠倒顺序 参数:无 注意:操作的是数组本身,数组元素颠倒 {代码...} sort(fn) 功能:将数组元素排序 参数: fn(a,b):比较函数 注意:操作的是数组...