- 浏览: 57512 次
- 性别:
- 来自: 北京
文章列表
Custom Element
- 博客分类:
- web Components
Custom Element
自定义标签
两个硬性要求:
1、标签名必须带横杠'-',如<my-tag>
2、其prototype扩展自HTMLElement
注册自定义标签:
document.registerElement(tagName, prototype);
Demo:
<template>
<!-- Full of image slider awesomeness -->
</template>
<script>
// Grab our template full of ...
Shadow DOM
- 博客分类:
- web Components
Shadow DOM
Shadow Host
Shadow Root
Shadow Boundary
创建一个shadow DOM:选择一个元素然后调用createShadowRoot()方法,这样将返回一个文档片段(document fragment),可以在这个文档片段上添加内容。
调用createShadowRoot()方法的这个元素,称为Shadow Host。Shadow Host是Shadow DOM中唯一对用户可见的元素。
由createShadowRoot()方法创建返回的文档片段(document fragment)称为Shadow Root。Sha ...
HTML template
- 博客分类:
- web Components
<template>标签元素
template元素用于声明HTML片段,该HTML片段可以通过脚本(script)被克隆以及插入到文档中。
而在浏览器的渲染过程中,template元素内的内容是不会被渲染的。
template.content:
返回template标签内的内容, ...
Web Components
- 博客分类:
- web Components
Web Components是一系列前沿的规范,它使得:
1 构建组件(widgets)成为可能;
2 重用更为可靠
3 。。。
Web Components由四个模块组成:
Shadow DOM - 提供DOM和样式的封装
HTML Templates(HTML 模板) - 提供可复用的DOM元素作为脚手架
Custom Elements(自定义元素)- 扩展HTML已有的标签元素和DOM对象
HTML Imports (HTML 导入) - 使Web组件打包,分享、分发以及重用成为可能
HTML import
- 博客分类:
- web Components
<link rel="import" href="">
1、使用link标签导入
2、link标签的rel属性值为import
3、link标签的href属性值为需要导入的资源
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel=&qu ...
JavaScript异常处理
- 博客分类:
- JavaScript
window.localStorage在尝试写入数据超过容量限制时会抛异常,在Safari的隐私浏览模式下也会如此。因此,需要把调用放到try-catch语句里面:
try {
localStorage.setItem('date', Date.now());
} catch (error) {
reportError(error);
}
有时候,需要把回调函数的代码放到try-catch里面,因为回调也可以调用其他会抛出异常的API。
listeners.forEach(function(lietener){
try {
lis ...
// A test suite in Jasmine
describe('My Function', function() {
var t;
// Similar to setup
beforeEach(function() {
t = true;
});
afterEach(function() {
t = null;
});
it('should perform action 1', function() {
expect(t).toBeTruthy( ...
Node.js是一个让JavaScript运行在服务端的开发平台,它采用了单线程、异步式I/O、事件驱动式的程序设计模型。它实现了诸如文件系统、模块、包、操作系统API、网络通信等Core JavaScript没有或者不完善的功能。
传统意义上,JavaScript是由ECMAScript、文档对象模型(DOM)和浏览器对象模型(BOM)组成的,而Mozilla则指出JavaScript由Core JavaScript和Client JavaScript组成。
Node.js中所谓的JavaScript只是Core JavaScript,或者说是E ...
AMD
- 博客分类:
- JavaScript
AMD(异步模块定义),规范提供了定义模块,异步加载模块的依赖的机制。
规范只定义了一个函数“define”,它是全局变量。函数的描述为:
define(id?, dependencies?, factory);
第一个参数,id,是个字符串, ...
声明数组:
var arr = [];
var arr = new Array();
向数组中添加元素:
arr[arr.length] = newElement;
arr.push();
arr.unshift();
push()和unshift()方法返回新数组的长度。
从数组中删除元素:
arr.pop();
arr.shift();
pop()和unshift()方法返回被删除的数组元素。
JavaScript基础知识
- 博客分类:
- JavaScript
现在应该使用的5个数组方法
ECMAScript 5 发布时,为数组提供了一些新的方法。然后,由于缺乏浏览器的支持,却迟迟未得到广泛的使用。
本文列举了9个ES5数组方法中的其中5个的使用方法和应用场景。
1)indexOf
...
textarea 禁用拖动改变大小
- 博客分类:
- CSS
1、标签
<textarea id="description"></textarea>
2、CSS样式规则
#description {
resize: none;
}
AngularJS自定义指令标签
- 博客分类:
- angular
创建一个模块
var app = angular.module('app', []);
创建一个简单指令标签
app.directive('alert', function(){
return {
template: '<div class="alert">' +
'<span class="alert-topic">' +
'something went wrong!' +
'</span>' +
'< ...