Js越来越强大了，超乎我的想象，以前JS仅仅只能通过ajax与后台交互，后来又有了Node.js,JS可以用于服务端，然后今天我又发现了JS的动态语言。明天呢？也许不少前端的小伙伴会说，慢些吧，慢些吧，太快的我承受不住。的确，我们每天的时间有限。单身的朋友忙着加班，有对象的朋友，每天除了工作之外，得花时间陪陪对象，有了孩子的朋友，每天还得花点时间陪陪孩子。学习的时间哪会有这么多呢？虽然不少人说，可以利用地铁的时间、午休的时间学习，但是真到那个时候不一定有人一定能沉得下心去学习。

所以我们对于学习，就必须有选择性，这个选择性就是你自己的职业定位，你觉得那些比较适合你，同时你很感兴趣的。当然了，工作中学习也很重要。

一、介绍

源码地址: https://github.com/shepherdwind/velocity.js

velocity.js是velocity模板语法的javascript实现。

特征:

  • 支持客户端和服务器端使用
  • 语法分析和模板渲染分离
  • 基本完全支持velocity语法
  • Vim Syntax

浏览器兼容性:

兼容支持es5的浏览器，可以通过测试来验证test case。

对于低端浏览器需要实现以下方法

  1. Array.prototype的map, forEach, some, filter, every, indexOf
  2. Date.now
  3. Object.keys

二、 安装

npm install velocityjs或者cnpm install velocityjs

二、 使用

git clone https://github.com/shepherdwind/velocity.js.git
cd velocity.js
cd examples

运行对应的index.html即可

index.html内容，可以在克隆下的代码库中找到。

<!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>Velocity Test</title>

    </head>

    <body>

    <script id="tmpl" type="text/tmplate">

        #foreach($item in $items)

            $item.a

        #end

    </script>

    hello world

    <div class="foo"></div>

    <script src="bundle.js"></script>

    </body>

    </html>

运行结果如下:

Velocity.js初步的更多相关文章

  1. velocity.js用法整理1

    velocity.js 此框架相对于JQ的运动算法, 有很大的优势. 例如,A和B两个元素,position:absolute;  top:0; 现在让A元素用JQ的animate,B用velocit ...

  2. JQuery动画插件Velocity.js发布：更快的动画切换速度

    5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...

  3. Velocity.js发布：更快的动画切换速度

    Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate ...

  4. javascript动画：velocity.js学习

    第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...

  5. Velocity.js的使用

    前面的话 Velocity是一款优秀的JS动画库,完全可以作为jQuery的animate的替代品.需要动画功能时,使用Velocity是一个好选择.本文将详细介绍Velocity.js的使用 概述 ...

  6. jQuery动画切换引擎插件Velocity.js

    Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...

  7. Velocity.js初识

    Velocity.js官网:http://julian.com/research/velocity/ 兼容IE8和Android2.3 Velocity.js基本用法 效果图: CSS .box{ w ...

  8. velocity.js 动画插件

    1. velocity.js 插件介绍 Velocity 是独立于jQuery的,但两者可以结合使用的动画插件.用法类似 jq 的 animate ,但是支持更高级动画. ( 颜色动画.转换动画(tr ...

  9. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

随机推荐

  1. oracle逐步学习总结之约束（基础五）

    原创作品,转自请在文章明显位置注明出处:https://www.cnblogs.com/sunshine5683/p/10167717.html oracle中的约束主要有非空约束(not null) ...

  2. C++ vector 排序

    C++ vector 排序 C++中当 vector 中的数据类型为基本类型时我们调用std::sort函数很容易实现 vector中数据成员的升序和降序排序,然而当vector中的数据类型为自定义结 ...

  3. 洛谷P4396 [AHOI2013]作业(树套树)

    题意 题目链接 Sol 为什么一堆分块呀..三维数点不应该是套路离线/可持久化+树套树么.. 亲测树状数组套权值线段树可过 复杂度\(O(nlog^2n)\),空间\(O(nlogn)\)(离线) # ...

  4. canvas与svg特性和使用对比

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  5. AngularJS学习之 登录表单 清爽验证（边学边更新）

    注册过程的确好多需要验证的,但是注册成功之后的登录就简单多了, 只要用户 输入 用户名和密码, ajax向后台提交登录请求, 根据返回的结果确定用户名或者密码是否正确即可登录. 所以这个登录表单的验证 ...

  6. Nginx控制并发连接数

    ngx_http_limit_conn_module这个模块用于限制每个定义的key值的连接数,特别是单IP的连接数. 不是所有的连接数都会被计数.一个符合计数要求的连接是整个请求头已经被读取的连接. ...

  7. arm64 调试环境搭建及 ROP 实战

    前言 比赛的一个 arm 64 位的 pwn 题,通过这个题实践了 arm 64 下的 rop 以及调试环境搭建的方式. 题目文件 https://gitee.com/hac425/blog_data ...

  8. 【jdk源码3】HashMap源码学习

    可以毫不夸张的说,HashMap是容器类中用的最频繁的一个,而Java也对它进行优化,在jdk1.7及以前,当将相同Hash值的对象以key的身份放到HashMap中,HashMap的性能将由O(1) ...

  9. 团队项目第二阶段个人进展——Day1

    一.昨天工作总结 冲刺第一天,查看了第一阶段的代码 二.遇到的问题 写个的代码发现看不懂了 三.今日工作规划 重新设计页面布局

  10. 使用angular-cli脚手架快速搭建项目

    第一步 安装全局的angular-cli, npm install -g @angular/cli 或者 cnpm install -g @angular/cli@v1.0.0-rc.2 – 国内淘宝 ...