category : JavaScript|NodeJs

前端打包技术行情

最近忙了不少,顺便研究了一下打包的一些技术行情。话说前端代码为什么要打包?我最早写前端的时候,那是不打包的。当然技术只是用了简单的jQuery和backbone。后来做angular,有前端模块化开发的思想的时候,前端就需要考虑打包了。为什么,因为单个js文件引入到页面是跑不起来的,不像之间简单页面,一个js文件就搞定了。对于现在大型的工程化应用,前端一般都是有组件化、模块化的开发思路,这样可以实现组件或者模块或者通用逻辑的复用。所以在代码部署的时候需要打包工具来找到当前页面需要哪些js代码组合起来才能正常运行。

前端构建C语言解释执行环境调研

关于编译器有没想过在浏览器中直接运行其他语言?有没有想过写完c语言,能够立即在浏览器上编译运行。其实也没什么卵用了。只不过是的确可以基于js语言来构造其他语言的解析器。 编译执行与解释执行一种高级编程语言,从源代码开始,一直到被执行生成相应的动作,大约经历了这几个步骤:12 编译 执行 执行源代码====>(中间表示形式====>)基本操作序列====>生成最终动作 编译型和解释型语言的不同指出只是在于,这些过程发生的时机不一样。 编译型语言的代表是C,源代码被编译之后生成中间文件(.o和.obj),然后用连接器和汇编器生成机器码,也就是一系列基本操作的序列,机器码最后被执行生成最终动作。 解释型的语言以Ruby为例,也经历了这些步骤,不同的是,C语言会把那些从源代码“变”来的基本操作序列(保存)起来,而Ruby直接将这些生成的基本操作序列(Ruby虚拟机)指令丢给Ruby虚拟机执行然后产生动作了。 所以我们看到的现象是,编译型语言要先编译再运行,而解释性语言直接“运行”源代码。除了BASIC这样特别早期的解释型语言,是直接解释执行,现在的解释型语言都采取将代码编译为某种特定的虚拟机代码或者机器码的形式,然后再执行那些编译好的代码。BASIC这种直接解释的,我们可以将他的基本操作序列理解为直接执行基本操作的那些函数。 现在关于解释和编译的界限也不是特别清晰了。Java需要预先把代码编译成虚拟机指令的,然后在运行这些虚拟机指令,有的教科书上会成为混合型或者半编译型。像Python和lua这样就更不好分了,可以直接解释源代码运行,也可以编译为虚拟机指令然后再运行。php编译之后的结果可以被Web Server缓存起来,甚至还可以先被翻译为C++,然后再编译。.NET 的CLR运行时是Windows的组成部分,编译好的.NET 系列语言的代码直接生成可执行文件,然后被“直接”执行,看起来跟C没有什么太大的差别。JavaScript可以被V8引擎编译为机器码然后执行,如果在node.js下,这个编译结果被缓存起来了,你说这跟编译好再执行的C有什么区别。 基于JavaScript构造c语言运行环境目前有三种基本的方案:1)基于JS构建c语言解析执行环境(论文中方案,前端解析执行)论文中采用PEG( parsing expression grammar)解析表达式语法编写c语言解析器,在调研中发现还有类似的解决方案chevrotain,主要基于LL(K)词法分析。参考:peg方案 - https://pegjs.org/ , LL(K)方案 - https://github.com/SAP/chevrotain

nodejs子进程之child_process

模块概览在node中,child_process这个模块非常重要。掌握了它,等于在node的世界开启了一扇新的大门。熟悉shell脚本的同学,可以用它来完成很多有意思的事情,比如文件压缩、增量部署等,感兴趣的同学,看文本文后可以尝试下。

前端测试方法+工具

天气小雨,不宜出门。只好在家好好修炼,正好准备总结一下测试相关的知识。主要总结以下项目中用到的前端测试工具: mocha-phantomjs+chai来实现自动化单元测试 nightWatch 实现端到端的集成测试

多行超出尾部展示省略号(改进)

前言之前写过一个多行自动显示省略号的文章,网上也能查到很多资料。超出两行展示省略号, 这两天抽时间做了一个退化处理,就是支持-webkit-box属性的浏览器中采用css来控制,不支持这一属性的浏览器如IE9以上、火狐浏览器,则使用JS动态计算的方法裁剪文本,在文本末未追加省略号(…)。在这个过程中,出乎意外的发现了chrome浏览器的一个bug,版本 55.0.2883.87 m.

polyfill,shim,shiv之间有什么区别?

什么是polyfill和shim搜索了一下:在JavaScript的世界里,有两个词经常被提到,shim和polyfill.它们指的都是什么,又有什么区别?一个shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现;一个polyfill就是一个用在浏览器API上的shim.我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill.然后新旧浏览器就都可以使用这个API了。