Welcome 微信登录

首页 / 脚本样式 / JavaScript

JS的框架Polymer中的dom-if和is属性使用说明

JS的框架Polymer中的dom-if和is属性使用说明

我们经常会有根据某个属性的取值来觉得模板渲染的需求,那就是最基本的分支语句。Angular 中有 ng-if 可以用,那么 Polymer 中当然也有 dom-if。其实 dom-if 是个很简单的东西,它只是作为本篇话题的接入点,我想介绍的实际上是 is 这个属性。 dom-if 和之前介绍过的 dom-repeat 一样,都是通过 is 属性在 tempalte 元素上使用的,比如下面这个例子就是两个模板根据一个绑定才控件上的布尔值来决定谁该被渲染运...
探讨JavaScript中的Rest参数和参数默认值

探讨JavaScript中的Rest参数和参数默认值

Rest 参数通常,我们需要创建一个可变参数的函数,可变参数是指函数可以接受任意数量的参数。例如,String.prototype.concat 可以接受任何数量的字符串作为参数。使用 Rest 参数,ES6 为我们提供一种新的方式来创建可变参数的函数。我们来实现一个示例函数 containsAll,用于检查一个字符串中是否包含某些子字符串。例如,containsAll("banana", "b", "nan") 将返回true,containsAll("...
浅谈JavaScript的Polymer框架中的事件绑定

浅谈JavaScript的Polymer框架中的事件绑定

既然是一套完整的前端框架那就一定有提供事件绑定相关的支持。其实在之前的例子中就使用过事件绑定,只是没有单独系统地介绍过而已。 Polymer 的事件思想是对事件处理函数尽可能地都命名并定义到 VM 上,我觉得这个做法是在有意地把 VM 这一层隔离出来。 下面这个例子给按钮和其所在的 Shadow DOM Host 都绑定了个事件,点击按钮后两个事件都会触发。运行<script> var Polymer = { dom: "shadow" };...
JavaScript的Polymer框架中dom-repeat与VM的相关操作

JavaScript的Polymer框架中dom-repeat与VM的相关操作

各种框架都有把一个列表数据绑定到 DOM 上的功能,比如 Angular 会用 ng-repeat 来绑定。那么 Polymer 呢?其实这个级别的功能属于框架的扩展功能了,Angular 的 ng-repeat 也只是个 Directive 而已。Polymer 的 dom-repeat 也是这个级别的东西。 在 Polymer 中,一切都是 Directive 的概念。dom-module 用于定义模块,它本身也是一个 Directive。dom-r...
详解JavaScript的Polymer框架中的通知交互

详解JavaScript的Polymer框架中的通知交互

Polymer 以访问器属性的形式来定义有监听需求的属性(没有监听需求的属性依然是普通的属性形式定义)。模板中还可以采用「::」语法来将属性双向同步于目标元素的某个事件,这就是 Angular 中双向绑定的概念,甚至还要比它更纯粹、更贴近原理。 在 properties 中定义的属性如果没有添加 notify 并且没在模板中用到,那么它就是没有监听需求的,于是就会被定义成普通属性。否则都会被定义成访问器属性,下面例子就解释了这个问题运行<scrip...
原生js与jQuery实现简单的tab切换特效对比

原生js与jQuery实现简单的tab切换特效对比

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形。使用面非常广,下面我们用两种方法简单实现之。 首先,构建页面元素。页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动。而页签内容部分使用div承载即可。另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构:<div id="main"><ul id="tabbar" cla...
javascript中if和switch,==和===详解

javascript中if和switch,==和===详解

今天改插件BoxScroll的时候,因为if里面的条件判断多于两个,于是立马想着改写switch。改到一半,忽然记起来JSHint等代码质量检测工具中的一个要求,用===替换==,不用不可靠的强制转型。然后忽然猜想,改成switch是不是会降低效率啊?switch里面的实际判断是==还是===?有了想法,赶紧举个栗子,好一口吃掉:var a = "5";switch (a) {case 5:console.log("==");break;case ...
javascript设计模式之对象工厂函数与构造函数详解

javascript设计模式之对象工厂函数与构造函数详解

下面通过文字详解加代码分析的方式给大家分享下javascript设计模式之对象工厂函数与构造函数的相关知识。概述使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法。然而,除了这两种常用的对象创建方式,JavaScript还提供了其他方法创建对象。1).使用工厂函数创建对象我们可以编写一个函数,此函数的功能就是创建对象,可将其.概述使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法。然而,除了这两种常用的对象创...
js代码验证手机号码和电话号码是否合法

js代码验证手机号码和电话号码是否合法

这篇文章主要介绍了js代码验证手机号码和电话号码是否合法,手机号码和电话号码在某些网站都是必填项,为了提高用户体验度,一般要进行合法性校验的,具体代码如下:function Checkreg(){ .....function Checkreg(){//验证电话号码手机号码,包含,号段if(document.form.phone.value==""&&document.form.UserMobile.value==""){ alert("电话和手机号码至少选...
使用js复制链接中的部分文字的方法

使用js复制链接中的部分文字的方法

网页上面的链接一般鼠标放上去就是一个手指的形状,导致不能拖动鼠标进行复制,下面这段JS就是让你能够实现复制的,将这段代码保存成chrome的书签,需要复制的时候点击这个书签,然后按着ctrl键,就可以复制链接上面的文字了复制链接中的部分文字的实现代码如下:javascript: (function() {var h, checked = true,down = false;document.addEventListener("mouseover",func...
<< 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 >>