替换 for in循环

由于每次迭代操作要搜索实例或原型的属性,for in循环每次迭代都要付出更多开销,因此它比其他类型循环执行速度慢一些。在同样的循环迭代操作中,其他类型循环执行速度比for in循环快7倍之多,因此推荐这样做:除非需要对数目不详的对象属性进行操作,否则避免使用for in循环。例如,迭代遍历一个有限的、已知的属性列表,使用其他循环类型更快,具体的使用模式如下:
var props = [“prop1”, “prop2”],
i = 0;
while (i < props.length){    process(object[props[i]]); } 此代码创建一个由成员和属性名构 成的队列。while循环用于遍历这几个属性并处理所对应的对象成员,而不是遍历对象的每个属性。此代码只关注感兴趣的属性,节约了循环时间。

解决问题的思路和设计代码的思路

解决问题的思路:
1.出现问题,除非是特别容易重现的,可以直接重现来解决,或者某个模块做过大的修改,之前的版本已经差别很大,有些问题不用再调查。否则每个能重现的问题都是巨大的福利,因为很多客户的问题都是没有重现环境的,所以要把握好能够重现的机会,不论多困难,找出背后的原因,而不是想着用新版本看能不能解决。因为这个问题在新的版本中可能被掩盖了,再找出这个问题就难了,就成了定时炸弹。你看,今天我们这个问题最后揪出多少严重问题,今天如果不在我的环境中重现,还不知道猴年马月能发现,那个时候花费的就不是一晚上。而且今天晚上发现了一连串的问题,这就是辛苦的收获。
2.而且发现一个线索必须要重视,比如onResize的问题,我说这个肯定是问题,贾贝说后面jschart会被覆盖,认为也许这个就不是错误,结果这个onResize中暴露了很多问题,尤其是删模型不删数据属性这种严重问题,所以千万不要放过一个线索。
3.还有就是用搜索代码的方法不能解决所有问题,比如今晚的,谁能想到是仪表盘上的别的模型的参数导致的问题,这样搜代码根本想不到这个问题。
4.你们没有做过支持真正产品的工程师,那时候就知道这些信息是多么宝贵,我现在后台的很多问题就是,有可能跑几个小时跑出一次错误,而且是内存错误,根本不知道怎么引起的,这种没有线索的问题排查起来就是殚精竭虑。
5.通过这种联合调试代码的方式配合,虽然花费了大量精力,异常辛苦,但是成果非常显著,这个即使我们坐在一个桌子旁边,也就是这个配合效率。所以希望形成一个解决问题的方法论,学到点思维方式,也是值得的。你会发现,正确的思维方式和解决问题的方式,是可以解决大部分问题,同样在设计新功能的时候一样可以用到。这就是珍贵的软能力。
6.今天用到的很多协调、配合方式、解决问题的方式(我对代码比较熟悉,董老师的环境中出现了bug, 我告诉他设置断点的位置,查看变量应该是什么值,断点场景中是什么值,以此来判断问题)也是在做项目管理中必备技能,否则很少几个人都协调不了,遇到问题也无法互相帮助,也无法统一代码质量和设计原则,更不要说几十个人,几百个人配合做一件事情了。

产品设计思路:
1.你要仔细思考我每次用的逻辑,第一如何保证行为是合理的,让使用者不会产生疑惑,不会被质疑的,同时还要在设计和实现上也是更容易的,更不需要增加各种不必要的分支的,更容易被抽象的
2.以后要有习惯把重要的数据结构通过注释的形式写在初始化函数或者对应的类前面。弱类型脚本语言最恐怖的就是数据结构的不稳定,查问题都不知道怎么查。
3.如果涉及到的点比较多.仔细思考想清楚,把每个点都记录到文档上,然后再把它们一点点放到一个设计的流程图里去,看这些点哪个被if覆盖,那个被elseif覆盖,哪个被else覆盖。用这样的方法,最后所有的需求都不会漏,同时设计还足够干净,不至于想到哪写到哪
记住,以后每次都得给我用这种设计方法:
1. 列出所有需要完成的行为;平时这些点一定不要漏,都是素材,一定记录下来,有可能现在没时间看。这些都是刚才第一步需要的素材。等到设计都做好了,它们都被考虑到了,它们就没用了。
2. 仔细思考有没有哪种行为没有被覆盖,保证需求足够完整。这是产品需求的穷举;
3. 仔细思考这些行为的分类,站在用户角度思考,是不是用户看到的类似的行为都得到同一类结果。这是产品需求的抽象总结;
4. 开始设计具体的实现逻辑,看上述的需求如果被设计全部覆盖,而且代码量最小,于是抽象的最好,封装的最好;
5.思考这个设计跟之前的哪个设计相关,是不是应该合并,还是扩展。
6. 思考这个设计本身有没有扩展性,会不会未来有新的变化可以轻松应对。

你把这个原则记到重要的地方,每次都这么去贯彻,再结合不停的模仿,设计能力和分析能力一定会提高,动手能力也一定能提高。

包括上次的两套模型参数的维护,使用,修改,合并也一样的设计思路。

不能每次都让我给掰开了揉碎了这么解释,会耽误我很大的精力,我的精力分散越多,这样项目的进度会受影响更大。当然,这个也不是一次两次就能完全融会贯通,只要有这个理念和意识,然后一点点强化,总能解决。

然后就是平时这些点一定不要漏,都是素材,一定记录下来,有可能现在没时间看。这些都是刚才第一步需要的素材。等到设计都做好了,它们都被考虑到了,它们就没用了。

这就是书越读越厚的过程,后面几步就是书越读越薄的过程。

关键是需求怎么来的
我们在考虑的时候,就是需求不全,考虑容易出现偏差
这个其实是需求的取舍问题
大产品经理->产品经理->研发人员的推演和延伸、扩展,现在我就是大产品经理和产品经理,你们在做的过程中也反向向产品经理的角色渗透一部分,小公司都不会分的那么清晰。所以多思考,多沟通。拿不定主意,不知道把控风险的,我会把控,因为我要让产品适应市场,让产品生存,让产品盈利。
平时大家可以多关注别的产品,多关注别的产品的功能逻辑,以及一些优秀的产品经理的思考问题的方式,以及优秀的产品的设计。但是,我更建议大家多关注一些具体的技术实现,它跟产品管理完全不是一套路,也不是一个方向。当然,落地最重要,具体的经验最重要,空有理论是最没有价值的。从实践中总结出自己的经验,再去看优秀的产品和技术经验,再去碰撞是最有效的路。否则容易要么闭门造车,要么空中楼阁。

设计方法

记住,以后每次都得给我用这种设计方法:
1. 列出所有需要完成的行为;
2. 仔细思考有没有哪种行为没有被覆盖,保证需求足够完整。这是产品需求的穷举;
3. 仔细思考这些行为的分类,站在用户角度思考,是不是用户看到的类似的行为都得到同一类结果。这是产品需求的抽象总结;
4. 开始设计具体的实现逻辑,看上述的需求如果被设计全部覆盖,而且代码量最小,于是抽象的最好,封装的最好;
5.思考这个设计跟之前的哪个设计相关,是不是应该合并,还是扩展。
6. 思考这个设计本身有没有扩展性,会不会未来有新的变化可以轻松应对。

解决问题的方式,先从根源起

一个重要的思考方式,遇到问题,先想下这个问题在几个地方可以解决,或者说先想下这个问题是怎么来的,应该在什么地方解决

场景: 获取页面文章图片的html,在php通过正在解析出其中的图片, 图片的一般使用src来指明链接地址, 但是爱微帮使用的是original

首先想到的是怎么通过正则匹配兼容这种问题.浪费时间因为正则不好写

换个思路获取文章图片的html就吧img标签的origal转为src,这种思路很好,保持了服务器端的统一, 因为这个网站使用orignal,其他网站可能是imgurl, 所以在抓取端进行转换,每个网站单独处理自己的问题,服务器段只接受一种方式

这种也是view和model分离的一种思想!

组件的生命周期

组件在高内聚的同时,往往需要暴露一些接口供外界调用,从而能够适应复杂的页面需求,例如提交订单页面需要在支付密码组件启动完成后绑定提交时的检查。Web Components、React 等都选择了生命周期事件/方法,我们也是一样。

组件的生命周期:

一个组件的完整生命周期包括:

init,初始化组件根节点和配置
fetch,加载 css 和 js 资源
render,内容渲染,默认的渲染内容方式是 BigRender
ready,进行数据绑定等操作
update,数据更新
destroy,解除所有事件监听,删除所有组件节点
组件提供 pause、resume 方法以方便进行生命周期控制。各个阶段使用 Promise 串行进行,异步的管理更清晰。使用自定义语义事件,在修改默认行为、组件间通信上充分利用了 YUI 强大的自定义事件体系,有效降低了开发维护成本。

设计模式

原创文章,转载请务必将下面这段话置于文章开头处。
本文转发自Jason’s Blog原文链接http://www.jasongj.com/design_pattern/summary/

OOP三大基本特性

封装

封装,也就是把客观事物封装成抽象的类,并且类可以把自己的属性和方法只让可信的类操作,对不可信的进行信息隐藏。

继承

继承是指这样一种能力,它可以使用现有的类的所有功能,并在无需重新编写原来类的情况下对这些功能进行扩展。

多态

多态指一个类实例的相同方法在不同情形有不同的表现形式。具体来说就是不同实现类对公共接口有不同的实现方式,但这些操作可以通过相同的方式(公共接口)予以调用。

OOD大原则

面向对象设计(OOD)有大原则(是的,你没看错,是七大原则,不是六大原则),它们互相补充。

开-闭原则

Open-Close Principle(OCP),即开-闭原则。开,指的是对扩展开放,即要支持方便地扩展;闭,指的是对修改关闭,即要严格限制对已有内容的修改。开-闭原则是最抽象也是最重要的OOD原则。简单工厂模式工厂方法模式抽象工厂模式中都提到了如何通过良好的设计遵循开-闭原则。

里氏替换原则

Liskov Substitution Principle(LSP),即里氏替换原则。该原则规定“子类必须能够替换其父类,否则不应当设计为其子类”。换句话说,父类出现的地方,都应该能由其子类代替。所以,子类只能去扩展基类,而不是隐藏或者覆盖基类。

依赖倒置原则

Dependence Inversion Principle(DIP),依赖倒置原则。它讲的是“设计和实现要依赖于抽象而非具体”。一方面抽象化更符合人的思维习惯;另一方面,根据里氏替换原则,可以很容易将原则的抽象替换为扩展后的具体,这样可以很好的支持开-闭原则。

接口隔离原则

Interface Segration Principle(ISP),接口隔离原则,“将大的接口打散成多个小的独立的接口”。由于Java类支持实现多个接口,可以很容易的让类具有多种接口的特征,同时每个类可以选择性地只实现目标接口。

单一职责原则

Single Responsibility Principle(SRP),单一职责原则。它讲的是,不要存在多于一个导致类变更的原因,是高内聚低耦合的一个体现。

迪米特法则/最少知道原则

Law of Demeter or Least Knowledge Principle(LoD or LKP),迪米特法则或最少知道原则。它讲的是“一个对象就尽可能少的去了解其它对象”,从而实现松耦合。如果一个类的职责过多,由于多个职责耦合在了一起,任何一个职责的变更都可能引起其它职责的问题,严重影响了代码的可维护性和可重用性。

合成/聚合复用原则

Composite/Aggregate Reuse Principle(CARP / CRP),合成/聚合复用原则。如果新对象的某些功能在别的已经创建好的对象里面已经实现,那么应当尽量使用别的对象提供的功能,使之成为新对象的一部分,而不要再重新创建。新对象可通过向这些对象的委派达到复用已有功能的效果。简而言之,要尽量使用合成/聚合,而非使用继承。《Java设计模式(九) 桥接模式》中介绍的桥接模式即是对这一原则的典型应用。

设计模式

什么是设计模式

可以用一句话概括设计模式———设计模式是一种利用OOP的封闭、继承和多态三大特性,同时在遵循单一职责原则、开闭原则、里氏替换原则、迪米特法则、依赖倒置原则、接口隔离原则及合成/聚合复用原则的前提下,被总结出来的经过反复实践并被多数人知晓且经过分类和设计的可重用的软件设计方式。

设计模式十万个为什么

为什么要用设计模式

设计模式是高级软件工程师和架构师面试基本必问的项目(先通过面试进入这个门槛我们再谈其它)设计模式是经过大量实践检验的安全高效可复用的解决方案。不要重复发明轮子,而且大多数时候你发明的轮子还没有已有的好设计模式是被主流工程师/架构师所广泛接受和使用的,你使用它,方便与别人沟通,也方便别人code review(这个够实在吧)使用设计模式可以帮你快速解决80%的代码设计问题,从而让你更专注于业务本身设计模式本身是对几大特性的利用和对几大设计原则的践行,代码量积累到一定程度,你会发现你已经或多或少的在使用某些设计模式了架构师或者team leader教授初级工程师设计模式,可以很方便的以大家认可以方式提高初级工程师的代码设计水平,从而有利于提高团队工程实力

是不是一定要尽可能使用设计模式

每个设计模式都有其适合范围,并解决特定问题。所以项目实践中应该针对特定使用场景选用合适的设计模式,如果某些场景下现在的设计模式都不能很完全的解决问题,那也不必拘泥于设计模式本身。实际上,学习和使用设计模式本身并不是目的,目的是通过学习和使用它,强化面向对象设计思路并用合适的方法解决工程问题。

设计模式有时并非最优解

有些人认为,在某些特定场景下,设计模式并非最优方案,而自己的解决方案可能会更好。这个问题得分两个方面来讨论:一方面,如上文所述,所有设计模式都有其适用场景,“one size does not fit all”;另一方面,确实有可能自己设计的方案比设计模式更适合,但这并不影响你学习并使用设计模式,因为设计模式经过大量实战检验能在绝大多数情况下提供良好方案。

设计模式太教条化

设计模式虽然都有其相对固定的实现方式,但是它的精髓是利用OOP的三大特性,遵循OOD七大原则决定项目问题。所以学习设计模式的目的不是学习设计模式的固定实现方式本身,而是其思想。

我有自己的一套思路,没必要引导团队成员学习设计模式

设计模式是被广泛接受和使用的,引导团队成员使用设计模式可以减少沟通成本,而更专注于业务本身。也许你有自己的一套思路,但是你怎么能保证团队成员一定认可你的思路,进而将你的思路贯彻实施呢?统一使用设计模式能让团队只使用20%的精力决解80%的问题。其它20%的问题,才是你需要花精力解决的。

最近关于javascript编程的查询,思考

查了好久的MVC,才发现自己其实找的是组件的写法,瞬间感觉自己非常low.

1.组件化,
2.模块化
3.MVC

首先, 要想清楚一个问题, 为什么我们要优雅地封装代码? 并不是为了让它有设计感, 而是为了降低编写的逻辑难度, 减少由于复杂/不缜密的逻辑造成的 bug, 提高代码的健壮性, 可维护性, 很多时候还有可重用性.

为了达成这些目的, 有一个大家都经常提到的关键词, 叫 “低耦合”. 这种低耦合可以体现在任何东西上, 比如类, 方法, 变量.

还有个我非常重视的实现细节: 依赖状态变量而不是事件 (其实就是把 MVC 的思想拿出来), 并在这个基础上处理好 timeout (善用 clearTimeout).

放在字符串首或尾,直接用“&”,公式:=A1&B1,或者=B1&A1;
放在字符串中间,假设A1单元格中为12345,B1单元格中为#,则C1中请输入公式:=LEFT(A1,3)&B1&RIGHT(A1,2),C1中就会显示为123#45。

前端攻略-从路人甲到英雄无敌二:JavaScript 与不断演化的框架

王下邀月熊_Chevalier 5月26日发布

本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part

JavaScript Basics

作为目前最流行的跨平台语言之一,JavaScript几乎出现在了所有的地方,但是千里之行始于足下,我们还是要先来理解JavaScript的一些基础知识。

Language

在学习怎么将JavaScript应用到Web开发之前,我们还是要看下JavaScript的基本语法。推荐阅读Mozilla Developer Network的 Language basics crash course。本教程会导引学习譬如基本的变量、流程控制与函数等等语言基础部分。

读完了这个,你就可以读MDN的 JavaScript guide中的剩余部分:

语法与类型

流程控制与异常处理

循环与迭代

函数

JavaScript Introduction,可以参考里面的Reference部分,有很多推荐的阅读参考

同样的,不要死记硬背,你可以在你记不住的时候多看看,当然,最好的是能形成你自己的阅读笔记或者知识体系框架,譬如这个。你应当专注于理解变量初始化、循环以及函数等等关键的知识点,譬如for-in、forEach、for-of的区别,this的N种绑定方法等。如果你实在觉得这货太单调了,那也能直接跳过,以后发现啥东西不理解的时候再滚回来瞅一眼。在实践中学习可能能让你理解地更好。

读书读累了,那可以看看视频换个脑子,这个Codecademy提供的 JavaScript系列教程 不错,可以随手看也很有意思。另一个,如果你还有时间,可以看看 Eloquent JavaScript 中的相关章节来加深你的记忆。 Eloquent JavaScript 是个非常优秀的在线的免费的JavaScript学习工具书。

Interactivity

到这一步你应该已经对JavaScript这门语言本身的基础知识有了了解,那么下一步就是学会如何应用到Web项目开发中。你首先需要来瞅几眼文档对象模型 (DOM)来理解JavaScript是如何完成与网页的交互的。文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。如果要做进一步了解的话推荐阅读CSSTricks出品的What is the DOM,它也提供了简单而直接的对于DOM的介绍。

好像刚才那段对DOM的介绍有点照本宣科,CSS Tricks里是这么说的,关于DOM与HTML的区别。可能你在HTML代码中写了个

元素,但是忘了写,没关系,浏览器会自动帮你插入到DOM中,你可以利用JavaScript来控制该节点并且赋予样式,尽管它从未出现在你的HTML中。

这里提供了一个简单的例子,通过JavaScript是如何改变某个DOM元素里的内容来展示基本的JavaScript与DOM树的交互,首先需要选择到对应DOM节点

var container =document.getElementById(“container”);

然后使用该DOM节点的属性来改变其内容

container.innerHTML = ‘New Content!’;

这只是一个简单的例子,你还可以用JavaScript DOM API干更多的事情,你可以阅读以下的MDN的教程来进行了解, The Document Object Model.

Events

使用DOM进行Web与XML开发示例

怎么创建一个DOM树

DOM介绍

利用选择器来定位DOM节点

老生常谈了,不能舍本逐末,还是要专注于理解概念而不是简单地表达式使用,要在心中默问自己几个问题:

DOM是什么鬼?

怎么查询元素?

怎么进行事件监听?

怎么改变DOM节点的属性?

对于常见的JavaScript与DOM之间的交互, 可以参考PlainJS出品的 JavaScript Functions and Helpers 。这个站点会给你提供很多的例子,譬如如何操作DOM元素样式 或者 怎么添加键盘事件响应等等。如果你希望再深入一点,同样推荐Eloquent JavaScript中的DOM介绍的章节。

Inspector

在浏览器中,我们可以用开发者工具来调试客户端运行的JavaScript代码,譬如Firefox的Firebug和Chrome的开发者工具,可以帮你审视网页源代码,追踪JavaScript的执行过程和结果,打印出调试语句,还能瞅瞅譬如网络请求、Cookie等等资源。这个 tutorial 是关于如何使用Chrome的开发者工具,如果你是火狐的话,瞅瞅这个 tutorial

Practicing the basics

上面聊完了基础的语法和交互操作,但是对于不知道有多少个坑的JS而言不过沧海一粟,不过我把一些新的东西放到了最后一节介绍,这边先放松放松,做点小实验玩玩。

Experiment 1

实验1里让我们把目光投向 AirBnB, 打开你浏览器的page inspector, 然后点击 console tab。这样你就可以在页面上执行一些JavaScript脚本了,你可以尝试着控制一些界面元素,改个字体样式啥的。

我选用airbnb的网站作为介绍是因为它的CSS类命名比较直接,并且没有被编译器混淆过,当然,你也可以看看百度啊之类的调试。

选择一个拥有唯一类名的header标签,改变其文字内容

移除页面上的随机一个元素

改变任意元素的CSS属性

将一块区域的高度减小250px

改变一个组件,譬如panel的可见性

定义一个叫做 doSomething 的函数,让它弹出“Hello world”,并且执行它

为某个文本块添加一个点击响应事件

如果你在那边卡住了,别忘了去看看JavaScript Functions and Helpers 指南,我在这边也给一个小小的例子:

var header = document.querySelector(‘.text-branding’) header.innerText = ‘Boop’

这个实验的主要目的就是回顾下你学到的JavaScript的基本语法以及一些DOM操作的知识。

Experiment 2

第二个实验使用 CodePen-JonathanZWhite编写一个较大较复杂的JavaScript交互项目,会用到一些programmatic logic 。这个实验的关注点会综合你在前端攻略-从路人甲到英雄无敌中学到的关于HTML与CSS的知识,这边有几个参考项目:

Periodic Table点击预览

Mood Color Generator点击预览

Calculator点击预览

JavaScript Quiz点击预览

Playable Canvas Asteroids点击预览

More JavaScript

看过了基础知识,动手做了几个小实验,下面我们会进入一些更有难度的概念的学习。这边的列举的概念可能之间并么有什么必然的练习,不过我还是把它们放在了一起是因为它们能有助于你通往专家的道路,并且也能有助于你理解下面关于框架部分的讲解。

Language

实际上JavaScript并不是一门浅薄的语言,虽然它只用了短短一周时间就创建出来了,它包含了很多高级的概念与用法(并且因为历史版本问题存在着大量的Polyfill)。这里是列举出了常见的概念,同样地Eloquent JavaScript也攘括了这些点:

原型与继承

作用域

闭包

回环

事件冒泡

Apply, call, and bind

Callbacks and promises

变量与提升

Currying

Imperative vs. Declarative(命令式VS声明式)

就如同常见的两种编程方式,JavaScript与DOM交互的方式也分为命令式与声明式。一般来说,声明式编程关注于发生了啥,而命令式则同时关注与咋发生的。

var hero = document.querySelector(‘.hero’) hero.addEventListener(‘click’, function() { var newChild = document.createElement(‘p’) newChild.appendChild(document.createTextNode(‘Hello world!’)) newChild.setAttribute(‘class’, ‘text’) newChild.setAttribute(‘data-info’, ‘header’) hero.appendChild(newChild) }) }

上面这个小例子就是典型的命令式编程,我们手动地查找到某个元素,然后将UI状态存储在DOM中,换言之,就是关注于如何达成某个目标。命令式编程的优势在于很直观,不过缺点也很明显,整个程序的健壮性很差,也不易于扩展。譬如如果某人把那个元素的类名从hero变成了villain,那么事件监听器就永远不会被调用了。

声明式编程可以较好地解决这个问题,刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理,这样就能让开发者专注于发生了啥,这里推荐一波 The State Of JavaScript — A Shift From Imperative To Declarative 与 Three D’s of Web Development #1: Declarative vs. Imperative。本指南并没有一上来先给你看Angular或者React的HelloWord,而是告诉你命令式的做法和声明式的区别在哪,这样你就能更好地理解为啥我们会需要框架。

响应式与声明式也可以看看笔者在我的前端之路里面提到的从以DOM操作为核心到数据流驱动的页面,关注发生了啥本质上就是关注状态与数据,而不是额外的操作。

Ajax

虽然已经有了很多关于Ajax的教程指南,还是建议你阅读下官方的Ajax 介绍。Ajax即是一个允许Web页面通过JavaScript与服务端完成交互的技术,Ajax也是前后端分离的一个基石。

譬如,如果你要去提交一个表单,那么就要先收集下输入的内容然后通过HTTP请求发送到服务端。你在发Twitter的时候,就是Twitter客户端发送HTTP请求到Twitter的服务器,然后根据服务端响应来修正页面状态。推荐阅读下 What is Ajax来深入理解Ajax,如果还是觉得有些疑惑,那可以看看 Explain it like i’m 5, what is Ajax,要是还不够,那就回到eloquentjavascript chapter 关于HTTP的章节吧。

早期,笔者是习惯用jQuery的$.ajax来进行Ajax操作,不过现在已经慢慢统一到了标准的 Fetch,你可以看看由 Dan Walsh写的文章来多了解下Fetch,它涵盖了Fetch的工作原理与基本的用法。因为Fetch在部分低版本浏览器上还不能使用,因此我们会选择一些Fetch polyfill ,文档是 这里

jQuery

一些jQuery使用技巧

也需要你压根用不到jQuery

到这里,咱们一直是用单纯的JavaScript来进行节点操作,怪麻烦的说,而且在不同的浏览器里还有写不同的Polyfill。实际上,已经有了大量的DOM节点的操作库来帮我们简化常用代码,其中最著名的就是jQuery,一个当年前端程序猿的标配。要记住,jQuery是一个典型的命令式的操作库,它编写与前端井喷之前,在那个年代有着无可比拟的先进行。虽然今天,我们应该用像Angular、React这样的声明式编程的框架来进行复杂UI界面的编写,但是仍然是推荐学习下jQuery,毕竟还有大量的项目仍然是基于jQuery的。

jQuery官方提供了一个Learning Center,是不错的基础学习的教程,它会一步一步带你学习重要的概念,譬如animations 与 event handling。如果你想要更多的学习资源,那么可以参考Codecademy的 jQuery course

不过一定要记住,jQuery并不是唯一的进行DOM操作的库, PlainJS 和 You Might Not Need jQuery 也提供了基于原本的JavaScript代码怎么实现常见的jQuery中的操作。

ES5 vs. ES6

在现代的前端开发中,另一个绕不过去的概念就是ECMAScript。现在主要有两个常用的JavaScript版本,分布是ES5和ES6,它们呢都是JavaScript使用的ECMAScript标准。你可以把它们看做不同版本的JavaScript,ES5是在2009年定稿,然后使用至今。而ES6, 也叫作ES2015,是一个新的标准,它提供了很多譬如常量, 以及 模板字符串等等特性。ES6是兼容ES5的,不像Python3和Python2,并且很多ES6带来的语法特性都是在ES5的封装的基础上,譬如ES6中的类是基于JavaScript prototypal inheritancesyntactical sugar

这里推荐一个不错的ES6的教程ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning 以及Dan Wahlin的Getting Started with ES6 — The Next Version of JavaScript.。看完了这些,你也可以看看ES5和ES6特性的详细列表: ES6 Features以及 Github repository 。

More Practice

恭喜你,成功到达存档点,你已经学了不少关于JavaScript的知识了,下面让我们来温习一波。

Experiment 3

Experiment 3 着重于如何利用jQuery进行常见的DOM节点操作,本实验中,我们会以一种更加结构化的方式。我是选择了Flipboard的主页作为范本,你可以参考下Codecademy的Flipboard’s home page and add interactivity with JavaScript 教程。

Experiment 4

按照惯例,实验4呢又把你学过的HTML和CSS的知识跟JavaScript的知识混杂到了一起进行锻炼,这是一个关于钟的实验,各种各样的钟。在动手之前推荐你看看 Decoupling Your HTML, CSS, and JavaScript来了解下JavaScript混入的情况下基本的CSS类名命名规范。同样的,我也准备了一系列的CodePen来当做你的教材:

Flat Clock点击预览

jQuery Wall Clock点击预览

Fancy Clock点击预览

Retro Clock点击预览

Simple JavaScript Clock点击预览

如果你要更多的例子,请在CodePen上搜索 clock。你可以选择先写基本的HTML与CSS样式然后再加上JavaScript逻辑,也可以先写JavaScript逻辑代码然后再放入到样式中。你可以选择用jQuery,不过尽量还是用纯粹的JavaScript代码吧。

JavaScript Frameworks

小怪清完了,下面开始刷BOSS了,拿起你的剑吧勇士,美丽的公主就在前方。我们在这一章节会开始介绍常用的JavaScript框架。我们不提倡重复造轮子,但是一定要理解轮子并且能给它上上油或者换换螺丝钉,这些JavaScript框架可以帮你更好地组织你的代码。它们为前端开发者提供了可复用的解决方案,就好像所谓的设计模式一样,它可以用来解决状态管理、路由以及性能优化等等,正是因为有了这些框架,我们才能更好地构建web apps

贪多嚼不烂,我不打算介绍所有的JavaScript框架,不过还是列个目录下来,这些框架包括但不限于AngularReact + FluxEmberAurelia,Vue, 以及 Meteor。你并不需要学习所有的框架,选择一个然后深入,最合适自己的才是最好的。

便如译者在文首所说,我们并不能盲目地追赶框架,而是要理解框架背后的思想与原则。另一个在译者自己的实践中,会尽可能的基于ES6进行抽象,这样保证了即使换框架也能有很好地兼容于复用。

Architectural Patterns

在学习框架之前,首先要了解下常用的架构模式:

model-view-controller

model-view-viewmodel

model–view–presenter

这些模式可以用来创建清晰的多层应用关注分离 。关注分离是一个设计原则,即是讲一个巨石型应用切分到不同的领域专注层,譬如前面我们都是在HTML中保留应用状态,而你可以使用一个JavaScript对象,或者说是Model层来存储应用状态。如果你想要了解地更多,可以先看下Chrome Developers里对于MVC的讲解,然后阅读Understanding MVC And MVP (For JavaScript And Backbone Developers)。阅读这篇文章的时候不要在意有没有学过Backbone,只要关注MVC与MVP比较的部分。 Addy Osman也写了另一篇关于MVVM的文章Understanding MVVM — A Guide For JavaScript Developers。如果你想了解MVC的源起,可以参考Martin Fowler的 GUI Architectures。最后,阅读这篇JavaScript MV* Patterns, Learning JavaScript Design Patterns也是个很不错的在线免费电子书。

Design Patterns

JavaScript的框架也并没有重复造轮子,很多还是基于已有的设计模式,你可以认为设计模式是在软件开发中用于解决通用问题的可复用的方法。尽管理解设计模式并不是学习一个框架的前提,不过我还是建议你可以先了解一些:

Decorator

Factory

Singleton

Revealing module

Facade

Observer

理解这些设计模式不仅会让你变成一个更好地设计师,也能有助于你更好地理解这些框架。

AngularJS

AngularJS 是一个 JavaScript MVC框架,不过有时候也是一个 MVVM框架。它由在2010年由Google进行维护并且迅速在社区刮起了一波浪潮。

Angular是一个典型的声明式框架,这里推荐一个阅读,可以帮你理解命令式编程到声明式编程的转变:How is AngularJS different from jQuery。如果你希望了解更多关于Angular的知识,可以参考Angulardocumentation。还有一个叫做 Angular Cat 的渐进教程。 angular2-education 是一个由 Tim Jacobi.整理的完整的关于angular2的教程,另外,还有John Papa编写的 最佳实践指南 。

React + Flux

Angular帮助开发者解决了很多前端系统构建中遇到的问题,不过Angular 1存在着极大的性能问题。今年才出的Angular 2也是组件化思维,不过太过庞大。另一个常用的小而美的工具就是 React,专注于用户交互的构建。React可以认为是MVC层中的View层,React只是一个Library,通常与 Flux或者Redux一起结合起来使用。

Facebook最早设计React与Flux是为了解决MVC中的一些缺陷与扩展问题,可以参考著名的Hacker Way: Rethinking Web App Development at Facebook演讲,这里介绍了Flux的起源。首先,我们来学习React,推荐是直接看React 官方文档,然后看看React.js Introduction For People Who Know Just Enough jQuery To Get By 来帮你从jQuery思维转移到React思维。

可以参照译者的React Introduction来获取更多关于React参考资料的东东

在你对React有了基本的了解之后,下面就可以开始学习Flux了,同样的首先推荐官方Flux文档。然后你可以看看Awesome React, 这里包含了很多你可以慢慢咀嚼的内容。

Practicing with Frameworks

又到了实践环节了,现在你已经对于JavaScript框架与架构模式有了基本的了解,是时候带一波节奏了。在这两个实验中,注意体会架构设计的理念,首先要保证 DRY, 然后有一个 清晰的分层概念, 最后要注意单一职责原则.

Experiment 5

实验5是不用框架重构著名的TodoMVC,换言之,就是用最基础的JavaScript代码来实现一个TodoMVC。本实验的目的就是为了向你展示在没有框架介入的情况下怎么构建一个完整的MVC应用

你可以参考 TodoMVC,第一步就是创建一个新的本地项目然后建立三个基本的组件,你可以参考Github repository这里的完整代码。如果你觉得现在的自己能力还不足以Hold住整个项目,表担心,先把它们下载下来,然后慢慢实践。

Experiment 6

Experiment 6 就是跟着Scotch.io的教程来实现一个下面这样的站点:

Build an Etsy Clone with Angular and Stamplay 会教你怎么基于Angular来构建一个网站,提供APIs并且在一个大型的项目中进行架构组织。学完了这些之后,你要能理解以下这些问题:

啥是web app?

怎么用Angular实践 MVC/MVVM?

API是啥,肿么用?

怎么组织与管理一个大型的CodeBase?

将一个UI切分为声明式组件的好处在哪?

如果这个教程还不够,那还可以看看Build a Real-Time Status Update App with AngularJS & Firebase

Experiment 7

第7个实验是将React与Flux综合使用,即利用React来构建一个TODOMVC。你可以参考Facebook’s Flux documentation site这个教程,它会教你一步一步地从零开始构建界面然后将Flux应用到整个Web项目中。通过了第一关,就可以移步到 怎么利用React、Redux与Immutable.js构建一个TodoMVC 以及 利用Flux与React构建一个微博客

Stay current

就像前端一样,JavaScript也永远不会停下前进的步伐。

下面列举了一系列博客,多读读,能够随时了解最新的发展与消息:

Smashing Magazine

JavaScript Weekly

Ng Weekly

Reddit JavaScript

JavaScript Jabber

Learn by example

Styleguides

AirBnB JavaScript Styleguide

Principles of Writing Consistent, Idiomatic JavaScript

Node Styleguide

MDN Coding Style

Codebases

Lodash

Underscore

Babel

Ghost

NodeBB

KeystoneJS

Further Reading

web-frontend-practice-handbook

5月26日发布