- 博客(176)
- 收藏
- 关注
RSS订阅原创 Broccoli & Babel使用示例
1 创建项目工程目录：test2 在test下执行npm init按提示填写package.json文件3 安装broccoli命令行工具broccoli-clinpm install -g broccoli-cli4 在test目录下安装broccoli依赖npm install --save-dev broccoli5 在test目录下安装broccol
2015-07-19 20:08:48
871
原创 ECMAScript 6新特性之Proxy
ECMAScript 6中新增了一个全局构造函数：Proxy。该构造函数可以接收两个参数：一个目标对象，一个处理对象。代码示例：var target = {};var handler = {};var proxy = new Proxy(target, handler);proxy将具有与target类似的内部属性/方法；handler可以作为proxy方法的拦截器。
2015-07-19 19:25:31
1174
原创 CSS之BFC
BFC（Block Formatting Context，块格式上下文）具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。在CSS3中，BFC叫做Flow Root。在CSS2.1中，有三种定位方案——普通流（Normal Flow），浮动（Float）和绝对定位（Absolute Positioning）。（1）如何触发BFC？
2015-07-18 16:26:10
685
原创 JavaScript变量提升示例
直接先看两段代码 function getSum() { var sum = a + b; var a = 1; var b = 2; return sum; } getSum(); function getSum() {
2015-07-05 16:55:27
798
原创 ECMAScript 6 新特性
1 字符串处理新方法（1）includes() 判断字符串中是否包含某个子串，若包含则返回true，否则返回false（2）startsWith() 判断字符串是否以某个子串开始，若是则返回true，否则返回false（3）endsWith() 判断字符串是否以某个子串结束，若是则返回true，否则返回false以上
2015-03-28 19:05:16
869
原创 Jasmine 语法
// A test suite in Jasminedescribe('My Function', function() { var t; // Similar to setup beforeEach(function() { t = true; }); afterEach(function() {
2015-03-28 15:45:03
818
原创 AngularJS 2.0 尝鲜
Angular 2.0 目前还处在制定完善中，尚未正式发布。本文通过AngularJS官网的一个例子，介绍AngularJS的一些新特性、新写法（这些内容到正式发布时可能会有改动）。（1）创建一个Angular 2工程目录， 如创建一个文件夹并命名为angular2（2）从GitHub repository上clone一份项目种子，该种子提供了快速开发所需的资源，包括A
2015-03-28 14:18:45
1485
原创 使用gulp搭建web服务器
gulp是一个node.js模块，也是前端自动化任务构建工具。使用gulp，可以做以下工作：文件拷贝、文件合并、文本替换、图片压缩、CSS压缩、js压缩等等，当然这些工作主要是依靠gulp的相应插件来完成的。本系列将介绍如何使用gulp来搭建一个Web服务器，并在这个服务器上完成上述一些工作。（1）初始化安装创建一个项目目录：gulp在这个目录下执行npm inst
2015-03-09 21:00:11
1578
原创 Less
Less 既可以在客户端编译也可以在服务端编译；在客户端编译时，能够看到实时的样式效果，且客户端编译不会保存编译后的产出结果，而刷新浏览器时会重新编译一次；在服务端编译时，可以将编译后的产出结果保存为静态的CSS文件。Less能够提高书写CSS代码的效率，可视为CSS的编程语言。它包含了内置的函数，变量等等。这些特性使代码重用、维护等等更为方便。（1）在客户端编译示例：
2015-03-08 17:03:01
452
原创 跨域问题
解决跨域问题，可以采用以下方法：1 后端服务代理2 使用JSONP -- JSONP只支持GET方式的请求，不支持POST方式的请求3 使用HTML5提供的XMLHttpRequest Level 2 使用方法：在服务器端设置 header('Access-Control-Allow-Origin: *'); header('Access-Control-All
2015-03-08 14:46:10
391
原创 Shadow DOM获取Shadow host的内容
在Shadow DOM（二）中，介绍了与Shadow DOM相关的概念，包括Shadow host等等。本文将重点介绍如何将Light DOM中的内容传到Shadow DOM中。而在Shadow DOM 与HTML Templates一文的示例中可以看到Shadow host： Hello World!的内容在该节点创建并附加Shadow Root后并没有在浏览器中得到渲染，也就是说Sha
2015-02-06 21:33:43
2608
原创 Shadow DOM 与 HTML Templates
在之前的Web Components系列文章中，简单介绍了Web Components概要，HTML Templates，Shadow DOM，Shadow DOM（二）。本文将在此基础上，介绍Shadow DOM与HTML Templates如何一起协作。在Shadow DOM（二）中，介绍了如何创建Shadow DOM：通过调用createShadowRoot()方法创建root节
2015-02-05 23:01:44
1199
原创 Shadow DOM（二）
在前一篇博文中，简单地介绍了Shadow DOM是什么。本文，将重点介绍Shadow DOM能做什么、如何创建Shadow DOM以及Shadow DOM的相关概念。Shadow DOM 能做什么简单地说，有了Shadow DOM（若浏览器支持该规范），开发者可以封装HTML标签，CSS样式以及JavaScript，提供一个新的作用域空间。Shadow DOM结合后续将介绍的其他Web
2015-02-04 21:37:33
2214
1
原创 Shadow DOM
Shadow DOM是什么Shadow DOM是Web Components规范中的一个组成部分。Web Components的概要介绍，可以参考之前的几篇博文：Web Components概述、HTML Templates。在介绍Shadow DOM之前，可以先看一个例子。新建一个HTML页面，代码如下： Demo 在浏览器中
2015-02-01 23:06:03
3678
原创 CSS之渐变效果
1 线性渐变语法1：E {background-image: linear-gradient(color, color);}可以包含多个颜色点。语法2：E {background-image: linear-gradient(to top, color, color);}E {background-image: linear-gradient(to right bottom
2015-02-01 19:52:40
513
原创 CSS之边框及盒子效果
1 border-radius语法：E {border-v-h-radius: x y;} /* v:[top, bottom], h:[left, right] */2 border-image-source语法：E {border-image-source: url();}3 border-image-slice语法：E {border-image-slic
2015-02-01 19:20:39
647
原创 CSS之背景
1 background-attachmentbackground-attachment: scroll | fixed | local 2 background-repeatbackground-repeat: repeat | no-repeat | repeat-x | repeat-y | space | round 3 多背景图语法：E { b
2015-02-01 17:40:10
392
原创 CSS之多列布局
1 设置列数语法：E { column-count: number; }示例：p { column-count: 2; }2 设置列宽语法：E { column-width: length; }示例：p { width: 710px; column-width: 150px;}3 设置列填充E { column-fill: keywor
2015-01-31 17:05:38
467
原创 CSS之文本效果
1 文本阴影效果语法1：E {text-shadow: x y;} /* x, y为偏移量，取值可正可负， 默认为黑色 */语法2：E {text-shadow： x y color;}语法3：E {text-shadow: x y blur-radius color; }示例：.txt-sha { text-shadow: 2px 2px 2px #eee; }
2015-01-31 16:43:05
465
原创 CSS之选择器
1 属性选择器E[attr] {... } /* 匹配具有某个属性的元素 */E[attr="value"] { ... } /* 匹配具有某个属性且其值为特定value的元素 */E[attr~="value"] { ... } /* 匹配具有某个属性且其值包含value值的元素 */E[attr|="value"] { ... } /* 语言属性选择器 */E[attr^="valu
2015-01-31 15:22:43
399
原创 CSS之Media Query
Media Query 使用方式1 通过link标签2 通过@import@import url('file') logic media and (expression);3 在CSS文件中使用 @media@media logic media and (expression) { rules}/*以下两种方式等同*/@media all a
2015-01-31 15:13:35
632
翻译 创建自定义的Polymer元素
要创建一个新的Polymer元素，需要：1 加载polymer.html（Polymer的核心）。2 使用声明自定义的元素。在下面的示例中，定义了一个元素，使用HTML Import加载polymer.html依赖，然后将该页面保存为my-element.html。my-element.html Hello from my-eleme
2015-01-27 19:51:40
684
原创 前端优化的一些点
1 CSS放在head中，JavaScript放在前2 减少重排、重绘3 减少DOM操作次数4 使用CDN5 合并、压缩静态资源，减少HTTP请求数量6 前后端采用JSON通信
2015-01-25 23:04:40
365
原创 JavaScript
1 字符串操作方法string.slice(start[, end]);如果只提供start参数，则表示从start位置到字符串结束。string.slice(start, end)包含start，但不包含end。[start, end)
2015-01-25 20:02:56
333
原创 HTML Templates
HTML TemplatesHTML Templates相当于模板，它提供了可复用重用的DOM结构块，在模板内容的DOM块跟普通的HTML DOM结构块没有什么区别。1 定义（声明）HTML Templates，定义/声明HTML Templates，需要借助新的标签，如下示例： This is the description for ...可
2015-01-17 20:01:33
974
原创 Web Components
Web Components 概述Web Components是W3C目前正在制定的一系列前沿规范，其目的是希望基于HTML、CSS与JavaScript的开发能够实现以下的目标：1、开发者可以根据业务需求，综合使用HTML、CSS和JavaScript来创建自定义的HTML元素、扩展原有（原生）的HTML，构建自己的组件（widgets）；2、解决样式、脚本的作用域（影响范围）问题，
2015-01-17 19:08:55
1045
翻译 AngularJS自定义指令标签
创建一个模块var app = angular.module('app', []);创建一个简单指令标签app.directive('alert', function(){ return { template: '' + '' + 'something went wrong!' + '' + '' +
2015-01-10 19:24:29
2164
翻译 使用Promises
promise是JavaScript中处理异步事务的一种方式，这样的事务会在后续的某个时间点上完成。通常会在使用Ajax请求的时候使用到promise，浏览器在后台发起HTTP请求，并且在请求完成后使用promise通知相应的应用程序。以下程序示例，演示了一个极简单的AngularJS应用，并在其中调用Ajax请求。 Example To Do
2015-01-10 19:17:42
485
翻译 AngularJS 教程（二）
1 AngularJS简介Angular是一个构建吸引眼球的Web应用的客户端MVW JavaScript框架。其由Google创建与维护，且在网上提供了新版本的更新。MVW是指Model-View-Whatever，它使我们在构建应用时在设计模式上有了更灵活的选择。我们可以选择MVC（Model-View-Controller）模式或者MVVM（Model-View-ViewMo
2015-01-10 19:08:15
535
翻译 AngularJS 教程
简介创建一个简单的邮件应用程序，学习核心的AngularJS概念。在结束该教程的学习时，你将能够看到（虚构的）邮件应用程序，在该程序中，可以根据邮件主题查询邮件，还可以阅读或删除邮件。 学习的先决条件：会使用jQuery创建简单的JavaScript应用懂得如何启动简单的HTTP服务器（如 python -m SimpleHTTPServer）会从Github上克隆
2015-01-10 18:56:55
568
原创 前端代码规范
Web 前端代码规范 必须1 结构、样式、行为三层分离；2 采用统一的缩进（两个或四个空格/Tab）；3 嵌套标签应当缩进一次，必须合理嵌套；4 HTML页面必须包含文档类型声明，采用HTML5文档类型声明； Document 5 CSS样式全部采用外链的方式在标签中引入；禁用行内样式，复用已有的样式规则；
2015-01-10 18:52:01
474
原创 Grunt
Grunt 1 安装Grunt命令行工具包 grunt-clinpm install -g grunt-cli Grunt被分为好几个包，每个包用于特定的目的。grunt-cli包为我们提供了一个命令行界面。但我们还需要安装grunt才能使用该界面。安装grunt-cli时并没有为我们自动安装grunt。 需要在我们
2015-01-10 18:43:24
455
原创 JavaScript基础知识
JavaScript JavaScript由核心（ECMAScript），文档对象模型（DOM），浏览器对象模型（BOM）三部分组成。 JavaScript是弱类型语言，表明该语言在表达式运算中不强制校验运算元的数据类型。 JavaScript能识别6种数据类型：undefined，number，stirn
2015-01-10 18:39:19
516
原创 在JSP中使用JavaBean
在JSP中应用JavaBean的标签来操作简单类，则此类必须满足如下要求： （1）所有的类必须放在包中，在Web中没有包的类是不存在的； （2）所有的类必须声明为public class，这样才能被外部所访问； （3）类中所有的属性都必须封装，即使用private声明； （4）封装的属性如果需要被外部所操作，则必须编写对应的setter、getter
2015-01-10 18:35:01
636
原创 JSTL
JSTL 1 表达式：${expression} 通过表达式语言，可以简单滴访问JavaBean中的属性。 表达式语言可以方便地访问对象中的属性、提交的参数或者是进行各种数学运算，而且表达式语言如果输出的内容为null，则会自动使用空字符串（""）表示。 使用表达式语言可以输出4种属性范围中的内容，如果此时在不同的属性范围中设置了同一个属性名称
2015-01-10 18:29:02
369
原创 JSP基础知识（二）
1 JSP内建对象 在所有的JSP页面中都能使用内建对象。所有的隐含对象只有对Scriptlet或者表达式有用，在JSP声明中不可用。 （1）out （2）request （3）response （4）session session只能保存对象，不能保存原生类型。 （5）pageContext
2015-01-10 18:28:27
388
原创 JSP基础知识（一）
JSP文件主要由模板元素、指令元素、动作元素、脚本元素、声明、表达式、Scriptlets和JSP内建对象组成。 1 模板元素 模板元素是指JSP的静态HTML或者XML内容。 2 注释 （1）HTML/XML注释 （2）JSP注释 （3）Scriptlets注释//单行注释/* * 多行
2015-01-10 18:22:50
354
原创 Servlet
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException{ response.setContentType("text/html; charset=utf-8"); PrintWriter out = respons
2015-01-10 18:19:40
330
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人