![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Javascript框架开发之旅
牧客网络
牧客网络工作室,我们是基于HTML5的全栈技术开发团队。
前端:HTML5,javascript,jQuery,angular,react
后台:nodejs,mongodb,php,mysql
移动端:混合式开发,cordova,react native
不符合以上技术范畴的项目勿扰!
展开
-
js框架开发之旅--开始
这一系列文章翻译自dailyjs的Let's Make a Framework系列教程,作者是Alex R. Young。该教程介绍JavaScript web框架的开发过程,从2010年开始,每周四更新一篇。 小牧能力有限,力求遵照原文翻译。有些技术或方法的更新或变化,小牧会在文中进行注释。注释是小牧的个人观点,仅供参考,欢迎指正。 小牧目前在参与牧客网的创业项目,精力有限,但是尽量保证每周翻译 2013-09-30 11:24:18 · 828 阅读 · 1 评论 -
js框架开发剖析--AJAX
历史 XMLHttpRequest也是浏览器技术战争的产物。最早提出这个概念的是微软,他在1999年发布的IE5中,使用了ActiveX实现了这一功能。直到2006年XMLHttpRequest才进入了W3C的工作草案。翻译 2013-11-07 11:30:04 · 1440 阅读 · 3 评论 -
js框架开发之旅--事件三
我们点击一个元素,会触发它的默认事件,同时事件还会传播给他的父元素。 Prototype使用Event.stop()方法阻止默认事件和事件的传播。 jQuery遵循W3C的标准,给事件提供了更多的接口: event.preventDefault():阻止事件目标的默认事件触发。 event.stopPropagation(): 阻止事件在DOM树上传播。 event.stopImmediatePropagation(): 阻止当前元素的后续事件触发,同时阻止翻译 2013-11-06 16:33:53 · 758 阅读 · 1 评论 -
js框架开发之旅--事件二
由于老外的叙事实在罗嗦,因此我以后仅仅翻译重点的东西,或者自己进行整理总结,如有错误之处,还请看官指正。 W3C标准和IE的差异 W3C标准绑定事件的方法 element.addEventListener('click', function() { }, false); IE绑定事件的方法 var handler = function() { }; element.attac翻译 2013-11-05 09:40:53 · 1027 阅读 · 0 评论 -
js框架开发之旅--事件
这一篇我们将介绍事件的工作原理,和不同的框架中事件的实现方法,以及事件接口的设计。我会在最后选择一种接口的设计,来实现我们的事件功能。 原理 事件和Javascript的关系非常密切,你可以想象如果没有事件,页面怎么和用户进行交互。Javascript一出现的时候,就已经有事件功能了。最早的事件处理时写在html代码里的,如下: 你之前一定见过这样的写法。它最早出现在Nets翻译 2013-11-02 11:57:19 · 896 阅读 · 0 评论 -
js框架开发之旅--选择器
提供一个跨平台的选择器接口,对于一个框架来说至关重要。不管是XPath式的还是CSS式的选择器,浏览器的支持都存在差异。 为了理解选择器的重要性,我们可以回到90年代,看看在没有js框架的时候,人们是怎么做的。 Prototype不是简单的给document.getElementById一个别名,它可以查询多个id,并且通过继承给元素赋予更多的功能。 我们正真需要的是getElementsBySelector。我们不仅仅想通过id和tagname检索元素,我们还要对元素进行一系列操作。我们在定义样式时,经常翻译 2013-10-19 17:07:30 · 1185 阅读 · 0 评论 -
js框架开发之旅--原型和类
不是所有的js框架都有类的概念, Douglas Crockford在他的Classical Inheritance in JavaScript中讨论了基于类的对象模型。这是一个非常精彩的关于如何实现js继承的讨论。后来,他写了另一篇文章Prototypal Inheritance in JavaScript,他的结论是:不使用类对象模型,仅通过原型,也能完整的实现js继承。翻译 2013-10-10 14:34:13 · 3382 阅读 · 0 评论 -
js框架开发之旅--选择器三
上一篇我们讨论了如何实现一个选择器的引擎。选择器引擎使用基于正则表达式的分词和扫描器,把选择器拆分成可执行的部分。 这一部分我们继续讲解如何通过Searcher类实现节点的搜索。 搜索器 Searcher类使用分词器生产的规则来搜索DOM,搜索的实现基于Firefox的工作原理。看一下上篇提到的一个原则: 选择器的最后一部分(最右边部分)称为关键选择器。浏览器首先通过关键选择器翻译 2013-10-26 16:40:41 · 716 阅读 · 0 评论 -
js框架开发之旅--选择器二
这一篇我要演示如何实现一个选择器引擎。实现一个选择器比想象中的要麻烦,我们会重点讲那些最关键的技术。 要做一个好的选择器,你必须知道浏览器渲染页面的基本原理、DOM结构、CSS语法,还有浏览器是怎么通过选择器查找元素的。 CSS选择器 CSS选择器非常有用,他可以简化复杂结构的选择。解析任何东西都要先了解我们要操作的对象,我会把类库的范围限制在CSS2的一个子集内。 CSS2选翻译 2013-10-26 10:49:25 · 833 阅读 · 0 评论 -
js框架开发之旅--函数式编程
函数式编程首先让人想到了面向过程过程编程。自从面向对象的编程出现之后,面向过程编程也只有在编程入门的教程中才能用的到。 让我们先看一下函数式编程的特点: 专注于解决具体问题。把函数作为一等公民,并且可以作为变量来使用。避免数据的声明和变化。 想Erlang和Haskell都是函数式编程语言。js不是严格的函数式语言,但是比起Ruby,Python和Java它包含有更多函数式编程的特性翻译 2013-10-16 16:40:53 · 916 阅读 · 0 评论 -
js框架开发之旅--函数式编程二
上一篇我们给我们的类库里添加了each方法。这一篇我将展示如何在each功能的基础上添加更多的方法。我们会参考Underscore和Prototype的一些方法,还有最近流行的对Array.prototype的扩展。 过滤器 过滤器让你在列表里删除不满足条件的元素: turing.enumerable.filter([1, 2, 3, 4, 5, 6], function(n) {翻译 2013-10-17 11:29:10 · 813 阅读 · 0 评论 -
js框架开发之旅--对父类的访问
上一章我们讨论了基于原型的继承和基于类的继承。这一章我们继续介绍如何实现面向对象的js,我们要阐述turing.oo的原理,并且尝试去实现super方法。 更深层次的类的创建 Turing的方法Class.create方法创建一个类,使用new创建的过程中会调用初始化方法。方法非常简单: create: function() { var methods = null,翻译 2013-10-15 11:41:29 · 766 阅读 · 0 评论 -
js框架开发之旅--架构
这一篇我们要讨论框架的架构,并且确定我们框架的架构设计。 经过收集大家的意见反馈,我决定把这个框架取名turing.js。如果你了解阿兰·图灵,你就应该知道为什么取这个名字了,不了解的马上去查查看吧。我们的项目也算是为计算机科学史的普及做了一点儿贡献。 前期准备 这篇文章会涉及到下面一些框架的知识,如果你不了解,最好先去看看。 jQuery Prototy翻译 2013-10-09 14:29:46 · 1422 阅读 · 0 评论 -
js框架开发剖析--AJAX(跨域)
跨域请求非常的有用,他可以让你获取第三方服务的数据,如Twitter。跨域的请求比较麻烦,这是一般框架要提供的服务之一。 jQuery通过JSONP实现了跨域,它的文档里是这样描述的: jsonp类型在url添加一个添加一个字符串参数callback。服务器预先将json数据和回调函数名字拼接成一个规范的JSONP响应。在$.ajax()的参数中,我们也可以使用自定义的参数名代替callback。翻译 2013-11-08 16:54:57 · 1182 阅读 · 1 评论