javascript
文章平均质量分 71
caiwanxia
Nothing is impossible
展开
-
使用<yield>标签来包含内部HTML
标签是riot的特殊核心功能,可以在运行时将自定义标签的内部模板进行编译和插入,这个技术使你可以用从服务端渲染生成的html内容来扩展你的标签模板例如使用下面的 riot 标签 my-post { opts.title } this.id = 666你可以在应用中随时包含 标签 title="What a great title"> id="my-conte原创 2016-08-31 11:38:43 · 842 阅读 · 0 评论 -
riot实现spinner标签
html in spinner.tag js in spinner.tag var ths=this; this.on("mount",function(){ if(!opts.change原创 2016-10-26 19:09:43 · 472 阅读 · 0 评论 -
怎么写一个jquery插件
创建插件看来 jQuery 你已经用得很爽了,想学习如何自己编写插件。非常好,这篇文档正适合你。用插件和方法来扩展 jQuery 非常强大,把最聪明的功能封装到插件中可以为你及团队节省大量开发时间。开始要编写一个 jQuery 插件,需要为 jQuery.fn 对象增加一个新的函数属性,属性名就是插件的名字jQuery.fn.myPlugin = function() {原创 2016-11-08 10:10:52 · 6010 阅读 · 0 评论 -
javascript留痕的命令模式模拟
Title //基于上一个demo做一个命令历史留痕的效果 /** * N次命令:up up up left left down down * 把这7次命令存到命令集合里面 * 【up up up left left】 * 当你点击回退按钮的时候 原命令集合.pop原创 2016-10-17 21:43:58 · 621 阅读 · 0 评论 -
riot实现页面导航栏标签的编写
app.tag file { title } { page.title || 'Not found' } { page.body || 'Specified id is not found.' } var self = this self.data = [ { id原创 2016-10-27 20:46:32 · 1773 阅读 · 0 评论 -
Javascript 责任链模式
责任链模式可以用来消除请求的发送者和接受者之间的耦合。这是通过实现一个由隐式地对请求进行处理的对象组成的链而做到的。链中的每个对象可以处理请求,也可以将其传给下一个对象。javascript内部就是使用这个模式来处理时间捕获和冒泡的问题。责任链模式中的角色: 发出者、接受者责任链模式的流程:发送者知道链中的第一个接受者,它向这个接收者发出来的请求;每一个接收者都对请求进行分析,要么处理它,原创 2016-10-18 20:41:19 · 641 阅读 · 0 评论 -
riot实现bubble
{opts.bubble.text} this.showBubble = () =>{ clearTimeout(this._timer); this.isvisible = true; }; this.hideBubble = () =>{ th原创 2016-10-28 17:59:46 · 348 阅读 · 0 评论 -
用JavaScript模拟Java的set
最近写extjs的时候有个应用场景:我需要获取几个store中的数据,但是几个store中有重复数据,于是想到了java中得set有去重复得功能,由于ES6中新加了set,但是版本问题,怕不兼容,所以选择了自己实现一个Set.function Set() { this.elements = new Array(); //获取Set元素个数 this.size = fun原创 2016-10-19 14:51:48 · 400 阅读 · 0 评论 -
riot自定义todo标签
为什么需要一个新的 UI 库?前端世界的库已经太多了,但坦白说我们认为终极解决方案仍有待探索。我们相信 Riot 为解决前端开发的难题提供了正确的方向。React 似乎能够解决问题,但其自身仍有重大弱点,这些弱点正是 Riot 要克服的。理由如下:1. 自定义标签Riot 在所有浏览器上支持自定义标签。 {opts.title}原创 2016-11-11 11:24:23 · 579 阅读 · 0 评论 -
谈谈响应式编程
随着前端框架react,angular以及vue的流行,响应式编程也开始在前端领域得以广泛应用。因此,了解并且理解响应式编程有助于更好地学习这些框架,同时利用好响应式编程的相关工具,可以让编程更加轻松。什么是响应式编程和平常经常听说的面向对象编程和函数式编程一样,响应式编程(Reactive Programming)就是一个编程范式,但是与其他编程范式不同的是它是基于数据流和变化传播的。我原创 2016-10-31 11:33:52 · 4644 阅读 · 0 评论 -
riot实现一个记时组件
思路:该记时组件有2个属性,一个title, 一个times时间显示,times 由 hh:mm:ss 组成,应该有个定时器,让ss每秒+1; {title}{ times } this.time = opts.start || 0; this.title = opts.title || "Seconds Elapsed :原创 2016-10-25 20:37:40 · 544 阅读 · 0 评论 -
javascript实现proxy模式
script> //代理模式(proxy): 代理也是对象,他的目的就是为了节制(控制)对本体对象的访问 extjs就采用了很多中代理模式 //图书馆(本体对象,实例化读书馆需要消耗很多的资源) var LibraryInterface = new BH.Interface('LibraryInterface',['addbook','findbook','checkout原创 2016-09-29 17:11:47 · 837 阅读 · 0 评论 -
Riot视频学习
Riot特点自定义标签;优雅的语法;虚拟dom;非常小的特点;非大公司作后盾,多人贡献的代码为什么学习Riot(优势)angularJs, react体积太大,不太适合移动端;公用组件组件化;轻量级MVM框架;引入概念少,容易入门;操作数据代替操作dom提高开发效率;代码量少,修改起来更容易,容易维护;Riot的应用场景因为体积小适合移动端开发;多页原创 2016-08-26 16:27:05 · 593 阅读 · 0 评论 -
Js 对象中使用[] 和 . 的区别
原创 2016-09-08 21:09:22 · 4624 阅读 · 3 评论 -
javascript中的命令模式
html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script type="text/javascript" charset="utf-8" src="common.js">script> script type="text/javascript" charset="utf-8"原创 2016-10-10 21:22:19 · 367 阅读 · 0 评论 -
javascirpt用享元模式实现日历
html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script type="text/javascript" charset="utf-8" src="common.js">script> script type="text/javascript" charset="utf-8">原创 2016-09-27 11:39:32 · 231 阅读 · 0 评论 -
Javascript 命令模式结合HTML5实现动画效果
html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script type="text/javascript" charset="utf-8" src="common.js">script> script type="text/javascript" charset="utf-8"原创 2016-10-12 21:34:59 · 756 阅读 · 0 评论 -
riot 分页标签的封装
html in pagination tag1}> 每页显示: {limit} 条 10 20 50 100 1} type="button" class="btn btn-default btn-first" onclick="{first}">原创 2016-10-24 20:57:03 · 297 阅读 · 0 评论 -
javascript桥接设计模式
Title //桥接模式:主要作用就是把抽象和现实分离开来,是他们可以完全独立变化 //应用场景,事件监听回调机制 //用户点击一个按钮,向服务器端发送消息 //当页面加载完毕之后执行函数体window.onload $(function(){ //1.前台业务逻辑原创 2016-10-14 09:19:03 · 407 阅读 · 0 评论 -
javascript工厂模式
粗粒度和细粒度万事万物都是object:卖车的商店-》卖车-》生产车-》factory搭建一个工厂的环境卖车的商店super shop卖车 Title //粗粒度和细粒度 //万事万物都是object:卖车的商店-》卖车-》生产车-》factory //搭建一个工厂的环境 //卖车的原创 2016-10-14 09:23:50 · 264 阅读 · 0 评论 -
Javascript封装常用方法
创建一个接口需要传入2个参数,一个name,一个是该接口包含哪些方法var BH = {};BH.Interface = function(name,methods){ //判断接口的参数个数 if(arguments.length !=2){ throw new Error('this instance interface constructor argum原创 2016-10-14 11:33:19 · 299 阅读 · 0 评论 -
Javascript 多浏览器兼容性问题及解决方案
一、document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName"];Firefox 下,只能使用document.formName.elements["elementName"]。 解决方原创 2016-10-31 15:18:21 · 279 阅读 · 0 评论