mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以比较容易阅读.做前端的话,还是要多看优秀源码,这个模板引擎的知名度还算挺高,所以其源码也肯定有值得一读的地方. 本人前端小菜,写这篇博文纯属自己记录一下以便做备忘,同时也想分享一下,希望对园友有帮助.若解读中有不当之处,还望指出. 如果没用过这个模板引擎,建议 去 https://github.co…

作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行渲染.html中可能会混有一些php(或者php中混有一些html).在服务端将数据与模板进行拼装,生成要返回浏览器端的html串. 这与我们现在做一个普通网页没什么区别.只不过现在,我们更常使用模板技术来解决前后端耦合的问题. 前端使用模板引擎,在html中写一些标签,与数据与逻辑基本无关.后端在…

underscore 源码解读 API文档浏览器 JavaScript 中加号操作符细节 抛弃 jQuery,拥抱原生 JS 从 0 开始学习 GitHub 系列之「加入 GitHub」 js实现克隆一个对象 js之封装sort实现json格式数据的排序 js之replace实现简单模板替换引擎 请描述一下 cookies,sessionStorage 和 localStorage 的区别? 正则入门小随 jQuery中的deferred对象的使用(一) 基于Bootstrap的CSS3下拉菜单…

前言 预备 不知道你有没有想过,假如把游戏世界比作一辆汽车,那么这辆"汽车"是如何启动,又是如何持续运转的呢? 如题,本文的内容主要为 Cocos Creator 引擎的启动流程和主循环. 而在主循环的内容中还会涉及到:组件的生命周期和计时器.缓动系统.动画系统和物理系统等... 本文会在宏观上为大家解读主循环与各个模块之间的关系,对于各个模块也会简单介绍,但不会深入到模块的具体实现. 因为如果把每个模块都"摸"一遍,那这篇文章怕是写不完了. Go! 希望大家看完这…

1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转换成字符串.以及转换成怎样的字符串——序列化 —— JSON.stringify 接口: 以及如何将一个有效字符串转换成js对象——反序列化—— JSON.parse 接口: 2. 关于作者 json作者是 道格拉斯.克劳福德 ,是一位js大牛,写过一本<javascript语言精粹>,相信不少朋…

1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转换成字符串.以及转换成怎样的字符串——序列化 —— JSON.stringify 接口: 以及如何将一个有效字符串转换成js对象——反序列化—— JSON.parse 接口: 2. 关于作者 json作者是 道格拉斯.克劳福德 ,是一位js大牛,写过一本<javascript语言精粹>,相信不少朋…

阅读优秀的js插件和库源码,可以加深我们对web开发的理解和提高js能力,本人能力有限,只能粗略读懂一些小型插件,这里带来对fastclick源码的解读,望各位大神不吝指教~! fastclick诞生背景与使用 在解读源码前,还是简单介绍下fastclick: 诞生背景 我们都知道,在移动端页面开发上,会出现一个问题,click事件会有300ms的延迟,这让用户感觉很不爽,感觉像是网页卡顿了一样,实际上,这是浏览器为了更好的判断用户的双击行为,移动浏览器都支持双击缩放或双击滚动的操作,比如一个链…

简介 一款简单好用的前端模板引擎 用法 <script type="text/javascript" src="js/doT.min.js"></script> ! 和 = 的用法与区别 <!--用户信息--> <div class="ibBox yhxx" id="userInfo"> <script id="userTemplate" type=&q…

引言 如今,主流的前端框架React,Vue和Angular在前端领域已成三足鼎立之势,基于前端技术栈的发展现状,大大小小的公司或多或少也会使用其中某一项或者多项技术栈,那么掌握并熟练使用其中至少一种也成为了前端人员必不可少的技能饭碗.当然,框架的部分实现细节也常成为面试中的考察要点,因此,一方面为了应付面试官的连番追问,另一方面为了提升自己的技能水平,还是有必要对框架的底层实现原理有一定的涉猎. 当然对于主攻哪门技术栈没有严格的要求,挑选你自己喜欢的就好,在面试中面试官一般会先问你最熟悉的是哪…

目录 1. 3DTiles 数据集的类型 2. 创建瓦片树 2.1. 请求入口文件 2.2. 创建树结构 2.3. 瓦片缓存机制带来的能力 3. 瓦片树的遍历更新 3.1. 三个大步骤 3.2. 遍历器 3.3. 选择瓦片 3.4. 请求并解析瓦片内容 3.5. 更新瓦片并创建 DrawCommand 3.6. prePassesUpdate 也能创建 DrawCommand 3.7. 自定义着色器 3.8. 样式引擎 3.9. 其它 4. 本文总结 3DTiles 与 I3S 是竞争关系,可是…

之前面试时老问一个问题seajs 是怎么加载js 文件的 在网上找一些资料,觉得这个写的不错就转载了,记录一下,也学习一下 seajs 源码解读 seajs 简单介绍 seajs是前端应用模块化开发的一种很好的解决方案.对于多人协作开发的.复杂庞大的前端项目尤其有用.简单的介绍不多说,大家可以到seajs的官网seajs.org参看介绍.本文主要简单地解读一下seajs的源码和模块化原理.如果有描述不实的地方,希望大家指正和交流.注:本文的解析是基于seajs的2.2.1版本. 目录结构 解压s…

本文对Jfinal的启动源码做解释说明. PS:Jfinal启动容器可基于Tomcat/Jetty等web容器启动,本文基于Jetty的启动方式做启动源码的解读和分析,tomcat类似. 入口  JFinalConfig的继承类的Main方法为入口,实例代码继承类为:DemoConfig,Main方法如下: public static void main(String[] args) { /** * 特别注意:Eclipse 之下建议的启动方式 */ JFinal.start("WebRoot&…

本文对Jfinal的启动源码做解释说明. PS:Jfinal启动容器可基于Tomcat/Jetty等web容器启动,本文基于Jetty的启动方式做启动源码的解读和分析,tomcat类似. 入口  JFinalConfig的继承类的Main方法为入口,实例代码继承类为:DemoConfig,Main方法如下: public static void main(String[] args) { /** * 特别注意:Eclipse 之下建议的启动方式 */ JFinal.start("WebRoot&…

koa是有express原班人马打造的基于node.js的下一代web开发框架.koa 1.0使用generator实现异步,相比于回调简单和优雅和不少.koa团队并没有止步于koa 1.0, 随着node.js开始支持async/await,他们又马不停蹄的发布了koa 2.0,koa2完全使用Promise并配合async/await来实现异步,使得异步操作更臻完美. 一.快速开始 koa使用起来非常简单,安装好node.js后执行以下命令安装koa: npm init npm instal…

Prometheus 源码解读(一) Prometheus 是云原生监控领域的事实标准,越来越来的开源项目开始支持 Prometheus 监控数据格式.从本篇开始,我将和大家一起阅读分析 Prometheus 源码.学习 Prometheus 的设计理念,了解 Prometheus 的局限性与不足.本系列分八个板块逐一拆解 Prometheus 源码.本文基于 Prometheus v2.13.0. 工作原理与架构 时序数据库模块(TSDB) 配置文件加载模块(Configuration Rel…

前言 前面我们说到,当组件更新时,实例化渲染 watcher 时传递的 updateComponent 方法会被执行: const updateComponent = () => { // 执行 vm._render() 函数,得到 虚拟 VNode,并将 VNode 传递给 vm._update 方法,接下来就该到 patch 阶段了 vm._update(vm._render(), hydrating) } 首先会先执行 vm._render() 函数,得到组件的 VNode,并将 VNod…

自从进入七月以来,我的 underscore 源码解读系列 更新缓慢,再这样下去,今年更完的目标似乎要落空,赶紧写一篇压压惊. 前文 跟大家简单介绍了下 ES5 中的 bind 方法以及使用场景(没读过的同学建议先看看),毕竟 bind 是 ES5 的东西,低版本 IE 不支持.今天就根据 underscore 的实现,来聊一聊如何实现一个 bind 的 polyfill. 之前在 ECMAScript 5(ES5) 中 bind 方法简介备忘 一文中,给出了一个 "穷人版" 的 po…

前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码. 个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离. 为了理解模板引擎原理(zhaungbi),所以我折腾了一个简化版的模板引擎.可以实现数据绑定,三元表达式, for 循环和 if 判断. 如何实现三元表达式, for 循环和 if 判断,将在下一篇介绍. HTML 模板 下面是我定义好的html 模板字符串. var template = ` <div> &l…

前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码.个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.为了理解模板引擎原理(zhaungbi),所以我折腾了一个简化版的模板引擎.可以实现数据绑定,三元表达式, for 循环和 if 判断.如何实现三元表达式, for 循环和 if 判断,将在下一篇介绍. HTML 模板 下面是我定义好的html 模板字符串. var template = ` <div> <s…

本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem && (elem.nodeType === 3 || elem.nodeType ===8)){  //触发的元素节点不能是文本节点和注释节点 return; } var cache, exclusive, i, cur, old, ontype, special, handle, eventPath,…

本课还是来讲解一下jQuery是如何实现它的事件系统的.这一课我们先来讲一下jQuery.event.remove的源码解读. remove方法的目的是,根据用户传参,找到事件队列,从里面把匹配的handleObj对象移除,在参数不足的情况下,可能移除多个或所有的handleObj.当队列的长度为0(当某事件的事件处理函数数组为空时,就代表此类型事件没有事件处理函数了,因此移除此事件)时,就移除相应的事件,当events为空对象(events是元素绑定的所有事件类型的集合,当它为空时,就代表元素…

JST(JavaScript Trimpath)前端模板引擎简介及应用 今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上找了找对应的资料,细细的品味了一下.现在把应用总结下. 1.Trimpath简介 Trimpath JavaScript 是个轻量级的,基于JavaScript的,跨浏览器,采用APL/GPL开放源代码协议的,可以让你轻松进行基于模板编程方式的纯JS引擎.  它有如下的特点:     ①.采用标准的…

开始 Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代. 它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式. 这是一个现代的,HTML5-ready 的 CSS 重置样式集.著名的bootstrap就使用了它,github的地址为:https://github.com/necolas/normalize.css/, 据作者描述,Normali…

1.源码缩影 !(function (name, definition) { var hasDefine = typeof define === 'function', //检查上下文环境是否为AMD或CMD hasExports = typeof module !== 'undefined' && module.exports; //检查上下文环境是否为Node if (hasDefine) { define(definition); //AMD环境或CMD环境 } else if (h…

从本节开始,将逐步阅读nsq各模块的代码. 读一份代码,我的思路一般是: 1.了解用法,知道了怎么使用,对理解代码有宏观上有很大帮助. 2.了解各大模块的功能特点,同时再想想,如果让自己来实现这些模块,会是怎么样的思路. 3.开始上手试读,为不打击阅读的积极性,可以选择一个简单的模块,或者某一个功能点开始读.对nsq而言,打开源码的目录看一下,发现nsqlookupd和nsqadmin的代码相对较少,而nsqd的代码量较多.再比较nsqlookupd和nsqadmin,发现nsqadmin下还有…

前言 Session,又称为"会话控制",存储特定用户会话所需的属性及配置信息.存于服务器,在整个用户会话中一直存在. 然而: session 到底是什么? session 是存在服务器内存里,还是web服务器原生支持? http请求是无状态的,为什么每次服务器能取到你的 session 呢? 关闭浏览器会过期吗? 本文将从 koa-session(koa官方维护的session中间件) 的源码详细解读 session 的机制原理.希望大家读完后,会对 session 的本质,以及 s…

最近把 vue-cli@2.x 和 create-react-app 的源码都看了一遍.由于现在官方推荐使用 vue-cli@3.0 ,改动比较大,所以就不写关于 vue-cli 的了(据说是因为 vue-cli@2.x 创建项目时操作有点太复杂了,于是犹雨溪大大就借鉴了 create-react-app 的思想,搞出了个零配置的 vue-cli@3.0 ,有兴趣的小伙伴可以去自己看一下哈).这篇随笔只讲解 create-react-app 的实现,但是,因为 create-react-app源…

概述:Apache Beam WordCount编程实战及源码解读,并通过intellij IDEA和terminal两种方式调试运行WordCount程序,Apache Beam对大数据的批处理和流处理,提供一套先进的统一的编程模型,并可以运行大数据处理引擎上.完整项目Github源码 负责公司大数据处理相关架构,但是具有多样性,极大的增加了开发成本,急需统一编程处理,Apache Beam,一处编程,处处运行,故将折腾成果分享出来. 1.Apache Beam编程实战–前言,Apache B…

Spring源码-循环依赖源码解读 笔者最近无论是看书还是从网上找资料,都没发现对Spring源码是怎么解决循环依赖这一问题的详解,大家都是解释了Spring解决循环依赖的想法(有的解释也不准确,在<Spring源码深度解析>作者也是看别人的博客说明了一下),没有从源码的角度分析是怎么解决循环依赖的,笔者就把自己看源码的过程写一下. 写这一篇文章算是个引路的,Spring为了程序的健壮性做了大量分析校验,调用的方法繁多复杂,我这篇文章为读者清理出解决循环依赖的流程. Spring中对象可以配置…

artTemplate-优秀的前端模板引擎 1.html中引入artTemplate的js文件: <script type="text/javascript" src="./js/jquery-3.3.1.js"></script> <script type="text/javascript" src="./artTemplate/template-native.js"></scrip…