JavaScript——misc

 

目录

5分钟实用入门

基础串烧

ruanyf前端培训:

第一讲:前端开发的历史和趋势

第二讲:React 技术栈

第三讲:Node 应用开发

第四讲:前端工程简介

JS源码:


 

 

5分钟实用入门

核心思想:选择元素,对其操作

http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html

【目录】

  一、选择网页元素

  二、改变结果集

  三、链式操作

  四、元素的操作:取值和赋值

  五、元素的操作:移动

  六、元素的操作:复制、删除和创建

  七、工具方法

  八、事件操作

  九、特殊效果


基础串烧

Shrine 09:36
完全理解jQuery源代码,在前端行业算什么水平? - 知乎
https://www.zhihu.com/question/20521802

说明你
1 精通正则表达式
2 了解闭包
3 了解原型链
4 精通 DOM API
5 了解各种设计模式(事件、Promise、伪重载、装饰器模式等)
6 精通 DOM 事件
7 了解旧浏览器的各种特性(bug)
8 了解模块化
9 了解浏览器渲染原理
10 精通 AJAX
11 了解 HTTP 请求
可以秒杀中国 80% 的前端。
 

Shrine 10:26
https://juejin.im/entry/5a39d3976fb9a0450e7640c6
 

Shrine 10:27
[知乎问答:前端发展太快,很多刚毕业的小伙只会react,招个jquery技能的外包已经很难了,如何看? - 阅读 - 掘金 : https://juejin.im/entry/5a39d3976fb9a0450e7640c6]
 

Shrine 10:27
初学前端的时候,必看的一本书叫《JavaScript DOM编程艺术》,也由此接触到jQuery。功能强大的选择器,易用的链式调用,丰富的插件,占据了自己很长一段时间的前端视野。再之后为了了解清楚它的原理,去读了一部分源码,封装自己的插件,读《JavaScript高级程序设计》来了解更深层一些的语言机制。
 

Shrine 10:28
https://www.cnblogs.com/wuyinghong/p/3664987.html
 

Shrine 10:28

《JavaScript DOM编程艺术》
[实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等 - 风沙渡 - 博客园 : https://www.cnblogs.com/wuyinghong/p/3664987.html]

Shrine 10:28
预留退路、分离javascript、以及实现向后兼容
 

Shrine 10:31
《JavaScript DOM编程艺术 (第2版)》——此书对JavaScript的语言特性涉及较少,只讲了些最基本的,一笔带过;5、如果实际做产品,还需继续研读《JavaScript高级程序设计》、《JavaScript 权威指南》等。
 

Shrine 10:43
在所有的产品设计过程中,选择最适用的工具去解决问题是最基本的原则。具体到网页设计工作,这意味着:

  • 我们将使用(X)HTML去搭建文档的结构;
  • 使用CSS去设置文档的呈现效果;
  • 使用DOM脚本去实现文档的行为;
     

Shrine 10:43
https://www.cnblogs.com/GreenLeaves/p/5753528.html
 

Shrine 10:53
[CSS-DOM介绍 - 郑小超 - 博客园 : https://www.cnblogs.com/GreenLeaves/p/5753528.html]

由于函数可以在不同的运行环境执行,所以需要有一种机制,能够在函数体内部获得当前的运行环境(context)。所以,this就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。

http://www.ruanyifeng.com/blog/2018/06/javascript-this.html


ruanyf前端培训:

第一讲:前端开发的历史和趋势

  1. 前端开发的历史演变
  2. 前端 MVC 框架的兴起
  3. 前后端分离
  4. 全栈工程师
  5. 前端开发的未来

第二讲:React 技术栈

  1. React 的基本用法
  2. React 应用的架构

第三讲:Node 应用开发

  1. Node 的基本用法
  2. Restful API
  3. Express 框架搭建 Web 应用

第四讲:前端工程简介

  1. 持续集成
  2. 静态代码检查
  3. 单元测试
  4. 功能测试
  5. 持续集成服务 Travis CI

JS 源码阅读推荐

本文链接:https://blog.csdn.net/himayan46/article/details/38078235
学习任何程序设计语言,看书都只是开始的一小步而已,多看别人写的代码,自己动手多写代码才能让自己更上一层楼。Javascript的语言使用更是如此,由于javascript运行环境是浏览器,长久以来JavaScript兼容性一直是web开发者的一个主要问题。在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬。其结果就是很多网页不能在各种浏览器上都有一样的表现,甚至根本不能跨浏览器。但基本上都遵循ECMA-262。努力并坚持一定会提高的。来自http://furzoom.com/category/web/javascript/

javascript源码


backbone

Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESRful JSON接口连接到应用程序。


angular

AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发者可以使用HTML来声明动态内容,从而使得Web开发和测试工作变得更加容易。AngularJS入门教程。

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。


Ember

Emberjs是一个用于创建 web 应用的 JavaScript MVC 框架,采用基于字符串的Handlebars模板,支持双向绑定、观察者模式、计

算属性(依赖其他属性动态变化)、自动更新模板、路由控制、状态机等。

ES6模版方法:Handlebar杀手?

https://www.zcfy.cc/article/es6-template-literals-the-handlebars-killer

微模板是最好的解决方案

真实的答案是,我认为,我们的解决方案没有比Handlebars之类的模板更有表现力,这是一个“整体模板”的基础概念,但在它已有的表现中被突破了。

如果你花费了很多时间去做React,或任何函数式编程,那么你已经相当熟悉模板的拆分概念 - 在复杂的情况和条件下 - 在一系列更小的模板中更容易去管理等。我相信这就是我们能用 模板语法 的先进性。我们已有的模板做了很多复杂的事情!让我们把它们拆分成更小巧的模板吧:

Ember 和 Angular 优缺点:

用ng做过后台产品,也用ember写了个todomvc项目(参见https://www.github.com/paseo/ember-todo)
下面纯属个人感受。
相比两者,ember提供了很完善的整体web解决方案,文件组织,数据层管理,组件管理,单元测试,打包编译发布等等,这些使用ember-cli命令行工具,一行指令就解决。对于没有时间和经验折腾工程化的人来说,使用ember可以把关注点解放出来专注在实现产品上,极大提高开发效率。
ng做不到这点,它只是一个框架,工程化的东西还是要自己DIY,而且它的技术实现比较晦涩,碰到坑需要足够的前端功力来填。
相对的,ember的完整性带来了更多的束缚,ng则自由的多,在会的人手里,ng带来的效率提升也是非常巨大,参考阿里云控制台前端团队。

正如前面的fighterleslie 说的,Ember的生态更加完备,包括数据处理、工具、插件几乎一个项目需要用到的东西它都有,在学习Ember.js期间改造过一个TodoMVC(GitHub - ubuntuvim/todos_v2: 一个基于ember.js实现的TODO项目,预览地址:http://www.ddlisting.com)项目,直接在模板上处理{{action}},以及模板的自动更新实在是太棒了!

Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板。


。。。

一觉醒来前端又出了三个框架。。。只服你们前端


lazyLoad

Lazy Load 是一个用 JavaScript 编写的 JQuery 插件。它可以延迟加载长页面中的图片,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置。这与图片预加载的处理方式正好是相反的。

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度, 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担。


oz

OzJS才不是神马脚本加载器呢!人家是一个在浏览器端运行时中(就是说它主要服务于语言层级,而不是文件层级。ozma.js可以在静态构建环节中基于同等机制更好的处理文件)为大型或复杂JS程序提供长期以来严重缺失(你懂得!)的模块机制的微!内!核!它兼容当前的事实标准(AMD,NodeJS/CommonJS 和传统的 module pattern)。


sea

Sea.js提供简单、极致的模块化开发体验。追求简单、自然的代码书写和组织方式,具有以下核心特性:

简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码。
自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。
Sea.js还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口。


sizzle

Sizzle是一个纯javascript CSS选择器引擎。

一般选择器的匹配模式(包括jq1.2之前),都是一个顺序的思维方式,在需要递进式匹配时,比如$(‘div span’) 这样的匹配时,执行的操作都是先匹配页面中div然后再匹配它的节点下的span标签,之后返回结果。
Sizzle则采取了相反Right To Left的实现方式,先搜寻页面中所有的span标签,再其后的操作中才去判断它的父节点(包括父节点以上)是否为div,是则压入数组,否则pass,进入下一判断,最后返回该操作序列。


underscore

Underscore.js是一个很精干的库,压缩后只有4KB。它提供了几十种函数式编程的方法,大大方便了Javascript的编程。MVC框架backbone.js就是基于这个库。
它定义了一个下划线(_)对象,函数库的所有方法都属于这个对象。这些方法大致上可以分成:集合(collection)、数组(array)、函数(function)、对象(object)和工具(utility)五大类。

https://www.cnblogs.com/fu-fu/p/7232745.html

腻害。。。

提示:源码下载地址为每个框架介绍的第一个链接哦。

有时间我会把每一个框架/库的使用的实例放上的,敬请关注。
--------------------- 
版权声明:本文为CSDN博主「枫竹梦」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/furzoom/article/details/38078235


JS源码:

http://www.ecma-international.org/ecma-262/7.0/ 这是标准
https://github.com/v8/v8 这是谷歌的实现

新手应该如何读Google V8引擎源代码? - 知乎 https://www.zhihu.com/question/39014659

不适合新手看:

作者:helloworld
链接:https://www.zhihu.com/question/39014659/answer/81983206
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

新手的不太建议读v8源代码。我记得某个v8的developer在wingolog一系列关于v8分析的文章(posts tagged "v8")的comment里,或者是Lars,曾经提到v8不是用来学的,因为它存在的目的就是为了最高性能,里面用了大量的奇巧淫技,比如说small integer表示,比如说把浮点数转化成字符串的Grisus3算法(http://florian.loitsch.com/publications/dtoa-pldi2010.pdf?attredirects=0). 另外,处于速度考虑,v8和普通的编译器/虚拟机不太一样,没有太多control flow analysis和data flow analysis(至少我看的时候是这样)。

需要知道的是,Lars原来是做Hotspot VM的,里面大量的思想来自大神Urs Hölzle。大名鼎鼎的on stack replacement,polymorphic inline cache等等完全可以在Urs Hölzle二十年前的博士论文里可以找的到,所以要看懂v8这些理论少不了; V8里的hydrogen指令更是用来自Hotspot的C1Visualizer可以看,所以我想如果要学习的话,还不如先看看wingolog的这一系列v8文章:posts tagged "v8",以及Urs Hölzle的博士论文和相关论文http://i.stanford.edu/pub/cstr/reports/cs/tr/94/1520/CS-TR-94-1520.pdf,最后最好还要熟悉virtual machine的实现。比如各种GC算法,不然看v8里的对象管理你就直接晕了。

有了这些理论打底,熟悉一般的compiler和virtual machine implementation,而且还熟悉ecmascript spec,熟悉C++的话,倒是可以开始看了...

但如果你这些都熟悉,那看v8干嘛呢?给它做code review? 

比较有意思的是这些理论都熟悉了,然后比较各种javascript的实现。比如在对象表示上mozilla就不是v8的smi tag,而是利用NaN boxing;比如是直接inteprete还是像v8那样有highlevel IR和lowlevel IR;等等。这才是有意思的地方呐


Serverless For Frontend 前世今生 - 天猪的文章 - 知乎

https://zhuanlan.zhihu.com/p/77095720

Sam Newman 提出了 Backends For Frontends :简称之为 BFF,最重要的是:服务自治 ,谁使用谁开发,带来了灵活与高效。BFF 根据团队的技术栈来选型,在我们的业务场景中,相对较优,生态最活跃,最能被前端接受的 Node.js。BFF 层一直都存在,因为 领域模型 - UI 模型 的转换是必然会存在的,区别只是在于维护者是谁。GraphQL 之类的网关可以视为通用型的 BFF。

此时,研发角色又转变为:后端研发,专注于业务建模,维护中间件服务和业务微服务。全栈研发,专注于处理 Web 层,比模板层更进一步,接管 BFF 层。其中全栈研发又有两种来源:

- 从前端进化过来的,一般会选择 Node.js 作为技术栈,使用诸如 Egg 等框架来降低前端同学的上手成本。

- 前端资源严重不足,于是赋能后端,助其转变为全栈,使用 Ant Design、Umi 等降低后端同学的上手成本。

蚂蚁 Serverless for frontend:—— 一句话阐述:让纯前端开发者,只需写几个 Function 即可使用到后端相关的能力。

Underscore 和 Lodash 已经这么流行了,为什么还要学习好像雷同的 Ramda 呢?

回答是,前两者的参数位置不对,把处理的数据放到了第一个参数。

Ramda 的数据一律放在最后一个参数,理念是"function first,data last"。

除了数据放在最后一个参数,Ramda 还有一个特点:所有方法都支持柯里化。


总结:只要不是基础框架,像你说的这些我更愿意称为“开发套件”,这些东西的好处就是帮你省了一些脏活累活,当然,对于有把控能力的开发者来说,选不选择这些套件其实已经不重要了,你的问题不在于你选择了谁,而在于你准备投入谁,开发套件这种东西你根本没必要投入,会用就行,要不然你根本跟不上版本迭代,掌握std开发,其他的都不是问题,你更应该投入的是与语言或者框架无关的东西,比如基础通信协议扩展(TCP/UDP),试着自己写个通信协议,而不是去关注太多框架之类的东西框架这种东西学个概念就行了

作者:Mr.Panda
链接:https://www.zhihu.com/question/329910651/answer/719217826
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


2 年前入坑 thinkjs ,现在有没有必要改换 eggjs ? - 天猪的回答 - 知乎 https://www.zhihu.com/question/294406281/answer/497817723

ThinkJS / Sails / LoopBack 等属于上层框架;
Egg 是微内核 + 插件模式,为上层框架服务;
它们不是一个层面的概念,无法直接对比。

Egg 的定位是『框架的框架』,它只是在 Koa 基础上,约定了一套加载规范,实现了一个 『微内核』,在这之上提供了『插件机制』『上层框架机制』

『框架』是对适合特定业务场景的最佳实践的约束和封装。

所谓『上层业务框架』,指的是团队的技术负责人,根据自己团队的业务场景、技术架构、上下游技术栈、运维基建等,去定制一个适合自己业务场景的上层框架。

上层框架这个诉求其实一直都存在着,每一个基于 Koa 的团队,一般都会在它之上封装一套自己的规范和框架,但其实是有很多共同点是可以拿出来复用的。Egg 的定位就是两者之间,让这些团队既能方便的定制自己的框架,又能互相共享一套规范和生态,不用从头造轮子。

简单的说,一个上层框架就是把 Egg + 需要的插件列表 + 默认的配置 + 自定义的加载规范封装成一个独立的 npm 包,应用开发者直接基于这个框架来开发业务。

带来的好处呢? 

  • 统一的技术选型 / 统一的默认配置 / 统一的部署方案 / 统一的约束。
  • 便于统一管控,升级,维护。
  • 为你的业务场景量身定制的同时,又能共享生态。

在 Egg 里面封装上层框架的成本也非常之低,几行代码搞定:


Node.js 比较适合处理 IO 密集型任务,如果你只是查查数据库,简单的处理返回给前端应该没什么压力,如果有很大的计算量,建议还是把计算量大的部分独立出来,我们在使用 Node.js 导出excel时超过 10 万行数据进行处理就可能会把服务给搞挂,Node.js 做 CPU 密集型的任务还是有一定的瓶颈


React 技术栈系列教程:


随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制。
(1) Cookie、LocalStorage 和 IndexDB 无法读取。
(2) DOM 无法获得。
(3) AJAX 请求不能发送。
 

对于完全不同源的网站,目前有三种方法,可以解决跨域窗口的通信问题。
片段识别符(fragment identifier)
window.name
跨文档通信API(Cross-document messaging)

AJAX
同源政策规定,AJAX请求只能发给同源的网址,否则就报错。
除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制。
- JSONP
- WebSocket
- CORS


尾调用优化:

-  把所有用到的内部变量改写成函数的参数;

- 柯里化;

ES6的尾调用优化只在严格模式下开启,正常模式是无效的。
这是因为在正常模式下,函数内部有两个变量,可以跟踪函数的调用栈。
- arguments:返回调用时函数的参数。
- func.caller:返回调用当前函数的那个函数。
尾调用优化发生时,函数的调用栈会改写,因此上面两个变量就会失真。严格模式禁用这两个变量,所以尾调用模式仅在严格模式下生效。

虽然Python没有尾递归优化,但是我们可以用yield替换return来改造原来伪尾递归函数,把他变成一个生成器。然后我只要不断循环用_next_()方法去拿值,知道拿到的不是生成器而是数值就返回。核心点的地方是在g=g.__next__()这里。我通过next拿到的生成器然后又给生成器g,这个生成器是携带了我们的计算数据的。

Python当中的尾递归优化 - 张麒麟的文章 - 知乎 https://zhuanlan.zhihu.com/p/72564126


原文地址:https://www.cnblogs.com/cx2016/p/12926176.html