我来了……

Javascript|Nodejs

程序语言进阶之DSL与AST实战解析

16

chalecao 发布于 2018-10-13

程序语言进阶之DSL与AST实战解析 在线视频课程地址: http://t.cn/R3XoQJA GIT代码: https://github.com/chalecao/parse_css_in_js   前端进阶系列课程 《用JavaScript自己写Virtual DOM》:http://t.cn/REeKJp0 《前端函数式编程FP易学易用》:http://t.cn/REeKVSk 《前端自己用NodeJS编写区块链BlockChain》:http://t.cn/REeoF7v 《程序语言进阶之DSL与AST实战解析》:http://t.cn/R3XoQJA 适用人群 建议先学习《  用JavaScript自己写Virtual DOM  》,本节课讲解AST...

阅读(734)

支持任意端的基于Chrome devTools远程调试技术方案

3

chalecao 发布于 2018-09-22

移动端页面因为开发采用的方案不同,调试方法也有差别。H5页面调试方案分为两种:基于调试框架支持的调试方案 和 基于原生系统支持的调试方法。本篇文章基于在天猫超市目前做的远程调试研究,介绍anydebugger调试技术方案,理论上支持任意环境下的web页面调试。基础知识参考:chrome dev远程调试android 和ios 基于调试框架支持的调试方案 先比较一下现有的调试框架: 能力\框架 weinre anyproxy spy-debugger Vorlon vConsole jsConsole whistle ghostlab React Native (Hybrid) Weex (Hybrid) 介绍 老牌调试框架 阿里系请求代理工具 包装了weinre和anyp...

阅读(91)

数据监听之VM原理分析与实现

1

chalecao 发布于 2018-09-10

数据监听之VM原理分析与实现 课程地址: Github代码: 前端进阶系列课程 《用JavaScript自己写MVVM前端框架》:http://t.cn/REeKJp0 《前端函数式编程FP易学易用》:http://t.cn/REeKVSk 《前端自己用NodeJS编写区块链BlockChain》:http://t.cn/REeoF7v 《程序语言进阶之DSL与AST实战解析》:http://t.cn/R3XoQJA   课程内容 第一章: JSX回顾 JSX编译原理 第二章:实现数据监听的方法 Object.define方法 ES6之Proxy与Reflect 第三章:实现数据监听   第一章: JSX回顾  回顾一下之前我们学过的《 用JavaS...

阅读(103)

基于ES6标签模板实现事件绑定与数据监听

1

chalecao 发布于 2018-09-05

 ES6 字符与标签模板 ES6 字符模板 `hello ${name}` 标签模板: function `hello ${name}` 字符模板是ES6模板功能的增强。字符模板前面的function类似标签声明。举个例子: function tpl(template){ console.log(template) console.log(arguments) } let content = tpl`Hello ${1} tpl ${2}`; 输出结果: >["Hello ", " tpl ", ""] >{0: ["Hello ", " tpl ", ""], 1: 1, 2: 2} 看出猫腻了吗?标签模板会把字符模板拆分开,把数据和模板片段传到标签函数里。...

阅读(136)

~(按位非), &(与), |(或)以及^(异或)的二进制使用

chalecao 发布于 2018-07-11

基础知识: &位与:与(x&y)两二进制上下比较只有位值都为1时才取1,否则取0 例如:14&15  (14  二进制  1110 15 二进制         1111 &与的结果          1110  —-》结果14) |位或:与(x|y)两二进制上下比较只有位值都为0时才取0,否则取1 14|15  (14  二进制  1110 15 二进制      1111 |与的结果       1111 —-》结果15) ^位异或:与(x^y)两二进制上下比较只有位不相等时才取1,否则取零 14^15  (14  二进制  1110 15    二进制   1111 ^与的结果      0001 —...

阅读(207)

函数式编程处理IF块

chalecao 发布于 2018-06-25

曾几何时,经常有人问我,“如果让你用函数式编程来实现X,该怎么做?”我比较喜欢这类的问题。我尽最大能力思考这类有趣的问题。本篇文章,我用一种更加函数式的方式来实现优雅处理IF函数块的问题。下面的代码有一个if块,但是没有else。 // A basic redux-thunk action that only dispatches when value exists const someAction = value => dispatch => { const item = getItem(value) if (item != null) { dispatch({ type: 'ACTION', item }) } } 这里我们需要判断item有值的时候走di...

阅读(313)

JS和CSS使用的一些小技巧

2

chalecao 发布于 2018-04-12

定制间隔线 需要上面这样一条虚线,怎么搞? 方法一: border-top: 1px dashed #eee; 方法二: //基于渐变 .dash { height: 1px; background-image: linear-gradient(90deg, #eee 0%, #eee 50%, transparent 50%, transparent 100%); background-size: 15px 1px; margin: 9px 0; } PS: 看过一篇文章,一位大牛用css渐变写了超级玛丽:链接 append与appendChild 这里说的append是dom的方法,目前处于草案,虽然有很多浏览器支持,但是在开发h5页面时,偶尔还是会有报错,有些极个别...

阅读(544)

ES6黑科技之 … 拆箱与装箱

chalecao 发布于 2018-03-15

你用过 … 吗? 没用过的话,你太low了。 const test = (...args)=>{ } 你肯定写过这种代码,这个比较简单,就是对不定长入参的封装,args是一个数组,入参个数就是args的长度。 名词解释 用…把数据拼在一起 称为装箱,把数据结构才开,称为拆箱 高级用法 还有更高级的用法, let aa = {11:22,33:44} let bb = {11:22,33:44,55:{66:77,88:99}} let cc = {11:22,33:44,55:{66:77,88:110,99:120}} let dd = {...aa,...bb,...cc} ------out--- dd = {"11":22,"33":...

阅读(548)

前端模块化打包新行情2

chalecao 发布于 2018-03-13

关于前端打包技术行情,参考我的上一篇文章:前端打包技术行情 模块化开发仍是前端开发的主要开发方式,但是打包和以往不同了。以往的模块化开发,往往是大家熟知的基于第三方框架做的模块化,比如AMD和CMD等,都需要借助第三方模块加载器。打包的过程也是分析文件依赖,比如把依赖超过4次的文件打包到core.js里面,然后保留一个入口文件,多个页面就是多个入口这样。最后把静态资源发布到cdn,整个流程也还好,只是不太方便。 现在模块化开发,主流都是基于ES6的模块开发,基于es6 pollyfill和第三方打包工具tree shake的技术,可以实现比较好的兼容性和性能。现在h5开发占半壁江山,更是如此。现在主流的开发模式是以页面为区分,以性能为导向,强调页面秒开,加载和响应速度。每...

阅读(422)

script标签的defer与async

1

chalecao 发布于 2018-03-13

javascript知识点 <script src="script.js"></script>没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。 <script async src="script.js"></script>有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。加载完之后,会执行js,此时会阻断文档渲染。 <script defer src="myscript.js"></script>有 defer,加载后续...

阅读(418)

判断内容区域是否滚动到底部

chalecao 发布于 2018-03-07

逻辑 判断内容滚动到底需要知道的信息 内容区域的真实高度(也就是滚动区域) 滚动条距离顶部的位置 内容区域的可见高度 分别对应下面的三个API。 element.scrollHeight 获取元素内容高度,,,【只读属性】 element.scrollTop 可以获取或者设置元素的偏移值,常用于,计算滚动条的位置,当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0. element.clientHeight 读取元素的可见高度【只读属性】 下面直接引用MDN上面的一个经典的公式 判定元素是否滚动到底 如果元素滚动到底,下面等式返回true,没有则返回false. element.scrollHeight – element.sc...

阅读(402)

canvas图片处理与动画

12

chalecao 发布于 2018-03-05

canvas绘制圆角图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="background: rgba(199,237,204,1)"> <div style="display:flex; flex-direction: row"> <!--通过style方式为canvas设置宽高在火狐浏览器上导致绘制内容纵向拉伸。。。--> <canvas id="drawing" width="4...

阅读(479)

函数式编程的理解与应用

5

chalecao 发布于 2018-01-20

年底业务需要做大改版,正好这个机会把我负责的源码页面做了个大升级,不仅升级了业务架构,主要还是细分了模块和组件,优化了LESS分级结构,让代码看的更清爽,就是这样。 我最近制作了一套函数式编程视频教程:《前端函数式编程易学易用》:http://study.163.com/course/introduction.htm?courseId=1004884007 欢迎大家交流学习! 说起函数编程,大家都比较熟悉。但是说起函数式编程,大家可能会想到之前看过的函子Functor、Monad等许多术语。但在实际应用中,或许我们根本用不到这么复杂的用法,而只是需要理解函数式编程的思想和理念就可以了。 话说,41年前,Fortran 语言的发明者John Backus在获得图灵奖的大会上...

阅读(584)

IMMUTABLE 详解

2

chalecao 发布于 2018-01-20

有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了。这些至少说明 Immutable 是很有价值的,同时我也明白了Object.assign 这个API为什么设计成浅拷贝了,拷贝的对象树底层的节点还是公用的,这样高效而且节省内存。下面我们来一探究竟。 JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象。如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2。虽然这样做可以节约内存,但当应用复杂后...

阅读(451)

JavaScript函数式编程

chalecao 发布于 2017-12-21

转载,原文:https://zhuanlan.zhihu.com/p/21714695 一、引言 说到函数式编程,大家可能第一印象都是学院派的那些晦涩难懂的代码,充满了一大堆抽象的不知所云的符号,似乎只有大学里的计算机教授才会使用这些东西。在曾经的某个时代可能确实如此,但是近年来随着技术的发展,函数式编程已经在实际生产中发挥巨大的作用了,越来越多的语言开始加入闭包,匿名函数等非常典型的函数式编程的特性,从某种程度上来讲,函数式编程正在逐步“同化”命令式编程。 JavaScript 作为一种典型的多范式编程语言,这两年随着React的火热,函数式编程的概念也开始流行起来,RxJS、cycleJS、lodashJS、underscoreJS等多种开源库都使用了函数式的特性。所...

阅读(571)

那用gulp+Babel来搭建ES6环境

2

chalecao 发布于 2017-12-05

那至于怎么使用gulp构建工具这一问题这里就略过咯(可以参考我之前发过的有关gulp的文章进行学习)。 在讲如何使用gulp来搭建ES6环境之前,先来介绍一下一个有用的插件——gulp-load-plugins(模块化管理插件)。 当然,下面这里其实也是可以跳过的啦。就当普及知识,如果已经知道,可以直接跳过。 先来看看我们在没使用该插件之前是如何做的吧。一般情况下,gulpfile.js中的模块需要一个个加载。如: var gulp = require('gulp'), jshint = require('gulp-jshint'), // 校验js的工具 uglify = require('gulp-uglify'), // 压缩js concat = require(...

阅读(547)

前端开发测试工具mocha-in-browser

1

chalecao 发布于 2017-10-23

mocha-in-browser mocha in browser which can auto load test cases from user config file and can also provide useful test util methods。 GIT: https://github.com/chalecao/mocha-in-browser usage install mocha-in-browser npm install mocha-in-browser --save-dev mocha-in-browser 是问了方便你更好的编写mocha测试代码,如果在项目中使用,你还需要安装mocha, package.json中的配置参考: ... "...

阅读(746)

需要了解的前端架构

1

chalecao 发布于 2017-10-22

未经允许不得转载:前端学堂fed123 » 需要了解的前端架构

阅读(812)

Node.js 代码规范约定

chalecao 发布于 2017-10-13

Node.js 代码规范 这里只是简单约定,并不是强制。 空格缩进 使用2个空格而不是 tab 来进行代码缩进,同时绝对不要混用空格和 tab 。 Sublime Text 2 设置(Preferences > Settings – User): "tab_size": 2, "translate_tabs_to_spaces": true 换行 使用 UNIX 风格的换行符 (\n),同时在每个文件的结尾添加一个换行符。 Windows 风格的换行符 (\r\n) 是绝对禁止出现在任何项目中的。 Sublime Text 2 设置(Preferences > Settings – User): "default_line_ending...

阅读(591)

使用 Service Workers提升体验

2

chalecao 发布于 2017-10-12

有一个困扰 web 用户多年的难题——丢失网络连接。即使是世界上最好的 web app,如果下载不了它,也是非常糟糕的体验。如今虽然已经有很多种技术去尝试着解决这一问题。而随着离线页面的出现,一些问题已经得到了解决。但是,最重要的问题是,仍然没有一个好的统筹机制对资源缓存和自定义的网络请求进行控制。 之前的尝试 — AppCache — 看起来是个不错的方法,因为它可以很容易地指定需要离线缓存的资源。但是,它假定你使用时会遵循诸多规则,如果你不严格遵循这些规则,它会把你的APP搞得一团糟。关于APPCache的更多详情,请看Jake Archibald的文章: Application Cache is a Douchebag. 注意:  从Firefox44起,当使用 A...

阅读(785)

基于node开发的http请求代理程序proxy-ajax

2

chalecao 发布于 2017-09-05

今天把项目中的反向代理脚本程序抽成了一个插件,通过配置文件配置代理的http请求,这样使用起来比较方便,每位开发成员都可以用自己配置的代理调试代码。

阅读(1943)

React属性(propTypes)校验

1

chalecao 发布于 2017-08-30

随着应用不断变大,保证组件被正确使用变得非常有用。为此我们引入propTypes。React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。注意为了性能考虑,只在开发环境验证 propTypes。下面用例子来说明不同验证器的区别: 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859React.createClass({ propTypes: { // 可以声明...

阅读(647)

Angular中模型监听之$watch

1

chalecao 发布于 2017-08-29

在编写Angular的应用中,有时候需要把两个不相干的事件关联起来,但是又没有回调函数可以用。这时候$watch就派上用场了。我们可以监听某个动作的数据模型,然后在模型数据变化时,做出对应的响应。

阅读(949)

AngularJS与Backbone谁更适合

7

chalecao 发布于 2017-08-29

将不同的思想和工具进行对比,是一种更好地理解它们的方式。在本文中,我首先将列举在创建web应用程序时需要重复进行的各项任务,随后为你展现Backbone和Angular将如何帮助你完成这些工作。

阅读(874)