<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[winstar1688的专栏]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/winstar1688</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; winstar1688]]></copyright><item><title><![CDATA[Broccoli & Babel使用示例]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/46957575</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/46957575</guid><author>winstar1688</author><pubDate>Sun, 19 Jul 2015 20:08:48 +0800</pubDate><description><![CDATA[1 创建项目工程目录：test
2 在test下执行
npm init
按提示填写package.json文件
3 安装broccoli命令行工具broccoli-cli
npm install -g broccoli-cli
4 在test目录下安装broccoli依赖
npm install --save-dev broccoli


5 在test目录下安装broccol]]></description><category></category></item><item><title><![CDATA[ECMAScript 6新特性之Proxy]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/46957245</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/46957245</guid><author>winstar1688</author><pubDate>Sun, 19 Jul 2015 19:25:31 +0800</pubDate><description><![CDATA[ECMAScript 6中新增了一个全局构造函数：Proxy。该构造函数可以接收两个参数：一个目标对象，一个处理对象。
代码示例：
var target = {};
var handler = {};
var proxy = new Proxy(target, handler);

proxy将具有与target类似的内部属性/方法；handler可以作为proxy方法的拦截器。]]></description><category></category></item><item><title><![CDATA[CSS之BFC]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/46943487</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/46943487</guid><author>winstar1688</author><pubDate>Sat, 18 Jul 2015 16:26:10 +0800</pubDate><description><![CDATA[BFC（Block Formatting Context，块格式上下文）
具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。
在CSS3中，BFC叫做Flow Root。
在CSS2.1中，有三种定位方案——普通流（Normal Flow），浮动（Float）和绝对定位（Absolute Positioning）。


（1）如何触发BFC？]]></description><category></category></item><item><title><![CDATA[JavaScript变量提升示例]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/46763913</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/46763913</guid><author>winstar1688</author><pubDate>Sun, 05 Jul 2015 16:55:27 +0800</pubDate><description><![CDATA[直接先看两段代码
        function getSum() {
            var sum = a + b;
            var a = 1;
            var b = 2;
            return sum;
        }
        getSum();
        function getSum() {
      ]]></description><category></category></item><item><title><![CDATA[ECMAScript 6 新特性]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/44704345</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/44704345</guid><author>winstar1688</author><pubDate>Sat, 28 Mar 2015 19:05:16 +0800</pubDate><description><![CDATA[1 字符串处理新方法
（1）includes()
          判断字符串中是否包含某个子串，若包含则返回true，否则返回false
（2）startsWith()
          判断字符串是否以某个子串开始，若是则返回true，否则返回false
（3）endsWith()
          判断字符串是否以某个子串结束，若是则返回true，否则返回false
以上]]></description><category></category></item><item><title><![CDATA[Jasmine 语法]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/44702057</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/44702057</guid><author>winstar1688</author><pubDate>Sat, 28 Mar 2015 15:45:03 +0800</pubDate><description><![CDATA[// A test suite in Jasmine
describe('My Function', function() {
    var t;
    // Similar to setup
    beforeEach(function() {
        t = true;
    });


    afterEach(function() {
        ]]></description><category></category></item><item><title><![CDATA[AngularJS 2.0 尝鲜]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/44701227</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/44701227</guid><author>winstar1688</author><pubDate>Sat, 28 Mar 2015 14:18:45 +0800</pubDate><description><![CDATA[Angular 2.0 目前还处在制定完善中，尚未正式发布。
本文通过AngularJS官网的一个例子，介绍AngularJS的一些新特性、新写法（这些内容到正式发布时可能会有改动）。


（1）创建一个Angular 2工程目录， 如创建一个文件夹并命名为angular2


（2）从GitHub repository上clone一份项目种子，该种子提供了快速开发所需的资源，包括A]]></description><category></category></item><item><title><![CDATA[使用gulp搭建web服务器]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/44160013</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/44160013</guid><author>winstar1688</author><pubDate>Mon, 09 Mar 2015 21:00:11 +0800</pubDate><description><![CDATA[gulp是一个node.js模块，也是前端自动化任务构建工具。
使用gulp，可以做以下工作：文件拷贝、文件合并、文本替换、图片压缩、CSS压缩、js压缩等等，当然这些工作主要是依靠gulp的相应插件来完成的。


本系列将介绍如何使用gulp来搭建一个Web服务器，并在这个服务器上完成上述一些工作。
（1）初始化安装
创建一个项目目录：gulp
在这个目录下执行
npm inst]]></description><category></category></item><item><title><![CDATA[Less]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/44134183</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/44134183</guid><author>winstar1688</author><pubDate>Sun, 08 Mar 2015 17:03:01 +0800</pubDate><description><![CDATA[Less 既可以在客户端编译也可以在服务端编译；在客户端编译时，能够看到实时的样式效果，且客户端编译不会保存编译后的产出结果，而刷新浏览器时会重新编译一次；在服务端编译时，可以将编译后的产出结果保存为静态的CSS文件。
Less能够提高书写CSS代码的效率，可视为CSS的编程语言。它包含了内置的函数，变量等等。这些特性使代码重用、维护等等更为方便。
（1）在客户端编译示例：]]></description><category></category></item><item><title><![CDATA[跨域问题]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/44132027</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/44132027</guid><author>winstar1688</author><pubDate>Sun, 08 Mar 2015 14:46:10 +0800</pubDate><description><![CDATA[解决跨域问题，可以采用以下方法：
1 后端服务代理
2 使用JSONP -- JSONP只支持GET方式的请求，不支持POST方式的请求
3 使用HTML5提供的XMLHttpRequest Level 2
   使用方法：在服务器端设置
   header('Access-Control-Allow-Origin: *');
   header('Access-Control-All]]></description><category></category></item><item><title><![CDATA[Shadow DOM获取Shadow host的内容]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/43574779</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/43574779</guid><author>winstar1688</author><pubDate>Fri, 06 Feb 2015 21:33:43 +0800</pubDate><description><![CDATA[在Shadow DOM（二）中，介绍了与Shadow DOM相关的概念，包括Shadow host等等。
本文将重点介绍如何将Light DOM中的内容传到Shadow DOM中。
而在Shadow DOM 与HTML Templates一文的示例中可以看到Shadow host： Hello World!的内容在该节点创建并附加Shadow Root后并没有在浏览器中得到渲染，也就是说Sha]]></description><category></category></item><item><title><![CDATA[Shadow DOM 与 HTML Templates]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/43539927</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/43539927</guid><author>winstar1688</author><pubDate>Thu, 05 Feb 2015 23:01:44 +0800</pubDate><description><![CDATA[在之前的Web Components系列文章中，简单介绍了Web Components概要，HTML
 Templates，Shadow DOM，Shadow DOM（二）。
本文将在此基础上，介绍Shadow DOM与HTML Templates如何一起协作。
在Shadow DOM（二）中，介绍了如何创建Shadow DOM：通过调用createShadowRoot()方法创建root节]]></description><category></category></item><item><title><![CDATA[Shadow DOM（二）]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/43494533</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/43494533</guid><author>winstar1688</author><pubDate>Wed, 04 Feb 2015 21:37:33 +0800</pubDate><description><![CDATA[在前一篇博文中，简单地介绍了Shadow DOM是什么。
本文，将重点介绍Shadow DOM能做什么、如何创建Shadow DOM以及Shadow DOM的相关概念。
Shadow DOM 能做什么
简单地说，有了Shadow DOM（若浏览器支持该规范），开发者可以封装HTML标签，CSS样式以及JavaScript，提供一个新的作用域空间。Shadow DOM结合后续将介绍的其他Web]]></description><category></category></item><item><title><![CDATA[Shadow DOM]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/43378687</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/43378687</guid><author>winstar1688</author><pubDate>Sun, 01 Feb 2015 23:06:03 +0800</pubDate><description><![CDATA[Shadow DOM是什么
Shadow DOM是Web Components规范中的一个组成部分。Web Components的概要介绍，可以参考之前的几篇博文：Web Components概述、HTML
 Templates。
在介绍Shadow DOM之前，可以先看一个例子。


新建一个HTML页面，代码如下：



    
    Demo


    


在浏览器中]]></description><category></category></item><item><title><![CDATA[CSS之渐变效果]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/43373637</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/43373637</guid><author>winstar1688</author><pubDate>Sun, 01 Feb 2015 19:52:40 +0800</pubDate><description><![CDATA[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]]></description><category></category></item><item><title><![CDATA[CSS之边框及盒子效果]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/43373283</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/43373283</guid><author>winstar1688</author><pubDate>Sun, 01 Feb 2015 19:20:39 +0800</pubDate><description><![CDATA[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]]></description><category></category></item><item><title><![CDATA[CSS之背景]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/43372865</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/43372865</guid><author>winstar1688</author><pubDate>Sun, 01 Feb 2015 17:40:10 +0800</pubDate><description><![CDATA[1 background-attachment

background-attachment: scroll | fixed | local
 2 background-repeat


background-repeat: repeat | no-repeat | repeat-x | repeat-y | space | round
 3 多背景图

语法：

E { b]]></description><category></category></item><item><title><![CDATA[CSS之多列布局]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/43342057</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/43342057</guid><author>winstar1688</author><pubDate>Sat, 31 Jan 2015 17:05:38 +0800</pubDate><description><![CDATA[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]]></description><category></category></item><item><title><![CDATA[CSS之文本效果]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/43341821</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/43341821</guid><author>winstar1688</author><pubDate>Sat, 31 Jan 2015 16:43:05 +0800</pubDate><description><![CDATA[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; }]]></description><category></category></item><item><title><![CDATA[CSS之选择器]]></title><link>https://blog.youkuaiyun.com/winstar1688/article/details/43341269</link><guid>https://blog.youkuaiyun.com/winstar1688/article/details/43341269</guid><author>winstar1688</author><pubDate>Sat, 31 Jan 2015 15:22:43 +0800</pubDate><description><![CDATA[1 属性选择器
E[attr] {... } /* 匹配具有某个属性的元素 */
E[attr="value"] { ... } /* 匹配具有某个属性且其值为特定value的元素 */
E[attr~="value"] { ... } /* 匹配具有某个属性且其值包含value值的元素 */
E[attr|="value"] { ... } /* 语言属性选择器 */E[attr^="valu]]></description><category></category></item></channel></rss>