金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 自定义元素教程,降低首屏时间金沙国际官网:

自定义元素教程,降低首屏时间金沙国际官网:

发布时间:2019-11-05 08:30编辑:web前端浏览(174)

    降低首屏时间,“直出”是个什么概念?

    2015/12/31 · HTML5 · 2 评论 · 首屏

    原文出处: VaJoy Larn   

    早几年前端还处于刀耕火种、JQuery独树一帜的时代,前后端代码的耦合度很高,一个web页面文件的代码可能是这样的:

    金沙国际官网 1

    金沙国际官网 2

    这意味着后端的工程师往往得负责一部分修改HTML、编写脚本的工作,而前端开发者也得了解页面上存在的服务端代码含义。

    有时候某处页面逻辑的变动,鉴于代码的混搭,可能都不确定应该请后端还是前端来改动(即使他们都能处理)。

    金沙国际官网 3

    前端框架热潮

    有句俗话说的好——“人啊,要是擅于开口‘关我屁事’和‘关你屁事’这俩句,可以节省人生中的大部分时间”。

    随着这两年被 angular 牵头带起的各种前端MV*框架的风靡,后端可以毋须再于静态页面耗费心思,只需要专心开发数据接口供前端使用即可。得益于此,前后端终于可以安心地互相道一声“关我屁事”或“关你屁事”了。

    以 avalon 为例,前端只需要在页面加载时发送个ajax请求取得数据绑定到vm,然后做view层渲染即可:

    var vm = avalon.define({ $id: "wrap", list: [] }); fetch('data/list.php') //向后端接口发出请求 .then(res => res.json()) .then(json => { vm.list = json; //数据注入vm avalon.scan(); //渲染view层 });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var vm = avalon.define({
        $id: "wrap",
        list: []
    });
     
    fetch('data/list.php')   //向后端接口发出请求
        .then(res => res.json())
        .then(json => {
            vm.list = json; //数据注入vm
            avalon.scan();  //渲染view层
        });

    静态页面的代码也由前端一手掌握,原本服务端的代码换成了 avalaon 的专用属性与插值表达式:

    ul ms-controller="wrap"> li ms-repeat="list">{el.name}li> ul>

    1
    2
    3
    ul ms-controller="wrap">
        li ms-repeat="list">{el.name}li>
    ul>

    前后端代码隔离的形式大大提升了项目的可维护性和开发效率,已经成为一种web开发的主流模式。它解放了后端程序员的双手,也将更多的控制权转移给前端人员(当然前端也因此需要多学习一些框架知识)。

    金沙国际官网 4

    弊端

    前后端隔离的模式虽然给开发带来了便利,但相比水乳交融的旧模式,页面首屏的数据需要在加载的时候向服务端发去请求才能取得,多了请求等候的时间(RTT)。

    这意味着用户访问页面的时候,这段“等待后端返回数据”的时延会处于白屏状态,如果用户网速差,那么这段首屏等候时间会是很糟糕的体验。

    当然拉到数据后,还得做 view 层渲染(客户端引擎的处理还是很快的,忽略渲染的时间),这又依赖于框架本身,即框架要先被下载下来才能处理这些视图渲染操作。那么好家伙,一个 angular.min.js 就达到了 120 多KB,用着渣信号的用户得多等上一两秒来下载它。

    这么看来,单纯前后端隔离的形式存在首屏时间较长的问题,除非未来平均网速达到上G/s,不然都是不理想的体验。

    另外使用前端框架的页面也不利于SEO,其实应该说不利于国内这些渣搜索引擎的SEO,谷歌早已能从内存中去抓数据(客户端渲染后的DOM数据)。

    so 怎么办?相信很多朋友猜到了——用 node 来助阵。

    金沙国际官网 5

    直出和同构

    直出说白了其实就是“服务端渲染并输出”,跟起初我们提及的前后端水乳交融的开发模式基本类似,只是后端语言我们换成了 node 。

    09年开始冒头的 node 现在成了当红炸子鸡,包含阿里、腾讯在内的各大公司都广泛地把 node 用到项目上,前后端整而为一,如果 node 的特性适用于你的项目,那么何乐而不为呢。

    我们在这边也提及了一个“同构”的概念,即前后端(这里的“后端”指的是直出端,数据接口不一定由node开发)使用同一套代码方案,方便维护。

    当前 node 在服务端有着许多主流抑或非主流的框架,包括 express、koa、thinkjs 等,能够较快上手,利用各种中间件得以进行敏捷开发。

    另外诸如 ejs、jade 这样的渲染模板能让我们轻松地把首屏内容(数据或渲染好的DOM树)注入页面中。

    这样用户访问到的便是已经带有首屏内容的页面,大大降低了等候时间,提升了体验。

    金沙国际官网 6

    示例

    在这里我们以 koa + ejs + React 的服务端渲染为例,来看看一个简单的“直出”方案是怎样实现的。该示例也可以在我的github上下载到。

    项目的目录结构如下:

    +---data //模拟数据接口,放了一个.json文件 +---dist //文件构建后(gulp/webpack)存放处 | +---css | | +---common | | ---page | +---js | | +---component | | ---page | ---views | +---common | ---home +---modules //一些自行封装的通用业务模块 +---routes //路由配置 ---src //未构建的文件夹 +---css | +---common | +---component | ---page +---js | +---component //React组件 | ---page //页面入口文件 ---views //ejs模板 +---common ---home

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    +---data   //模拟数据接口,放了一个.json文件
    +---dist  //文件构建后(gulp/webpack)存放处
    |   +---css
    |   |   +---common
    |   |   ---page
    |   +---js
    |   |   +---component
    |   |   ---page
    |   ---views
    |       +---common
    |       ---home
    +---modules  //一些自行封装的通用业务模块
    +---routes  //路由配置
    ---src  //未构建的文件夹
        +---css
        |   +---common
        |   +---component
        |   ---page
        +---js
        |   +---component //React组件
        |   ---page //页面入口文件
        ---views  //ejs模板
            +---common
            ---home

    1. node 端 jsx 解析处理

    node 端是不会自己识别 React 的 jsx 语法的,故我们需要在项目文件中引入 node-jsx ,即使现在可以安装 babel-cli 后(并添加预设)使用 babel-node 命令替代 node,但后者用起来总会出问题,故暂时还是采纳 node-jsx 方案:

    //app.js require('node-jsx').install({ //让node端能解析jsx extension: '.js' }); var fs = require('fs'), koa = require('koa'), compress = require('koa-compress'), render = require('koa-ejs'), mime = require('mime-types'), r_home = require('./routes/home'), limit = require('koa-better-ratelimit'), getData = require('./modules/getData'); var app = koa(); app.use(limit({ duration: 1000*10 , max: 500, accessLimited : "您的请求太过频繁,请稍后重试"}) ); app.use(compress({ threshold: 50, flush: require('zlib').Z_SYNC_FLUSH })); render(app, { //ejs渲染配置 root: './dist/views', layout: false , viewExt: 'ejs', cache: false, debug: true }); getData(app); //首页路由 r_home(app); app.use(function*(next){ var p = this.path; this.type = mime.lookup(p); this.body = fs.createReadStream('.'+p); }); app.listen(3300);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    //app.js
    require('node-jsx').install({  //让node端能解析jsx
        extension: '.js'
    });
     
    var fs = require('fs'),
        koa = require('koa'),
        compress = require('koa-compress'),
        render = require('koa-ejs'),
        mime = require('mime-types'),
        r_home = require('./routes/home'),
        limit = require('koa-better-ratelimit'),
        getData = require('./modules/getData');
     
    var app = koa();
     
    app.use(limit({ duration: 1000*10 ,
        max: 500, accessLimited : "您的请求太过频繁,请稍后重试"})
    );
    app.use(compress({
        threshold: 50,
        flush: require('zlib').Z_SYNC_FLUSH
    }));
     
    render(app, {  //ejs渲染配置
        root: './dist/views',
        layout: false ,
        viewExt: 'ejs',
        cache: false,
        debug: true
    });
     
    getData(app);
     
    //首页路由
    r_home(app);
     
    app.use(function*(next){
        var p = this.path;
        this.type = mime.lookup(p);
        this.body = fs.createReadStream('.'+p);
    });
     
    app.listen(3300);

    2. 首页路由(’./routes/home’)配置

    var router = require('koa-router'), getHost = require('../modules/getHost'), apiRouter = new router(); var React = require('react/lib/ReactElement'), ReactDOMServer = require('react-dom/server'); var List = React.createFactory(require('../dist/js/component/List')); module.exports = function (app) { var data = this.getDataSync('../data/names.json'), //取首屏数据 json = JSON.parse(data); var lis = json.map(function(item, i){ return ( <li>{item.name}</li> ) }), props = {color: 'red'}; apiRouter.get('/', function *() { //首页 yield this.render('home/index', { title: "serverRender", syncData: { names: json, //将取到的首屏数据注入ejs模板 props: props }, reactHtml: ReactDOMServer.renderToString(List(props, lis)), dirpath: getHost(this) }); }); app.use(apiRouter.routes()); };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    var router = require('koa-router'),
        getHost = require('../modules/getHost'),
        apiRouter = new router();
     
    var React = require('react/lib/ReactElement'),
        ReactDOMServer = require('react-dom/server');
    var List = React.createFactory(require('../dist/js/component/List'));
     
    module.exports = function (app) {
     
        var data = this.getDataSync('../data/names.json'),  //取首屏数据
            json = JSON.parse(data);
     
        var lis = json.map(function(item, i){
           return (
               <li>{item.name}</li>
           )
        }),
            props = {color: 'red'};
     
        apiRouter.get('/', function *() {  //首页
            yield this.render('home/index', {
                title: "serverRender",
                syncData: {
                    names: json,  //将取到的首屏数据注入ejs模板
                    props: props
                },
                reactHtml:  ReactDOMServer.renderToString(List(props, lis)),
                dirpath: getHost(this)
            });
        });
     
        app.use(apiRouter.routes());
     
    };

    注意这里我们使用了 ReactDOMServer.renderToString 来渲染 React 组件为纯 HTML 字符串,注意 List(props, lis) ,我们还传入了 props 和 children。

    其在 ejs 模板中的应用为:

    div class="wrap" id="wrap">-reactHtml%>div>

    1
    div class="wrap" id="wrap">-reactHtml%>div>

    就这么简单地完成了服务端渲染的处理,但还有一处问题,如果组件中绑定了事件,客户端不会感知。

    所以在客户端我们也需要再做一次与服务端一致的渲染操作,鉴于服务端生成的DOM会被打上 data-react-id 标志,故在客户端渲染的话,react 会通过该标志位的对比来避免冗余的render,并绑定上相应的事件。

    这也是我们把所要注入组件中的数据(syncData)传入 ejs 的原因,我们将把它作为客户端的一个全局变量来使用,方便客户端挂载组件的时候用上:

    ejs上注入直出数据:

    script> syncData = JSON.parse(''); script>

    1
    2
    3
      script>
        syncData = JSON.parse('');
      script>

    页面入口文件(js/page/home.js)挂载组件:

    import React from 'react'; import ReactDOM from 'react-dom'; var List = require('../component/List'); var lis = syncData.names.map(function(item, i){ return ( <li>{item.name}</li> ) }); ReactDOM.render( <List {...syncData.props}> {lis} </List>, document.getElementById('wrap') );

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    import React from 'react';
    import ReactDOM from 'react-dom';
    var List = require('../component/List');
     
    var lis = syncData.names.map(function(item, i){  
        return (
            <li>{item.name}</li>
        )
    });
    ReactDOM.render(
        <List {...syncData.props}>
            {lis}
        </List>,
        document.getElementById('wrap')
    );

    3. 辅助工具

    为了玩鲜,在部分模块里写了 es2015 的语法,然后使用 babel 来做转换处理,在 gulp 和 webpack 中都有使用到,具体可参考它们的配置。

    另外鉴于服务端对 es2015 的特性支持不完整,配合 babel-core/register 或者使用 babel-node 命令都存在兼容问题,故针对所有需要在服务端引入到的模块(比如React组件),在koa运行前先做gulp处理转为es5(这些构建模块仅在服务端会用到,客户端走webpack直接引用未转换模块即可)。

    ejs文件中样式或脚本的内联处理我使用了自己开发的 gulp-embed ,有兴趣的朋友可以玩一玩。

    4. issue

    说实话 React 的服务端渲染处理整体开发是没问题的,就是开发体验不够好,主要原因还是各方面对 es2015 支持不到位导致的。

    虽然在服务端运行前,我们在gulp中使用babel对相关模块进行转换,但像 export default XXX 这样的语法转换后还是无法被服务端支持,只能降级写为 module.exports = XXX。但这么写,在其它模块就没法 import XXX from ‘X’ 了(改为 require(‘X’)代替),总之不爽快。只能期待后续 node(其实应该说V8) 再迭代一些版本能更好地支持 es2015 的特性。

    另外如果 React 组件涉及列表项,常规我们会加上 key 的props特性来提升渲染效率,但即使前后端传入相同的key值,最终 React 渲染出来的 key 值是不一致的,会导致客户端挂载组件时再做一次渲染处理。

    对于这点我个人建议是,如果是静态的列表,那么统一都不加 key ,如果是动态的,那么就加吧,客户端再渲染一遍感觉也没多大点事。(或者你有更好方案请留言哈~)

    5. 其它

    有时候服务端引入的模块里面,有些东西是仅仅需要在客户端使用到的,我们以这个示例中的组件component/List为例,里面的样式文件

    require('css/component/List');

    1
    require('css/component/List');

    不应当在服务端执行的时候使用到,但鉴于同构,前后端用的一套东西,这个怎么解决呢?其实很好办,通过 window 对象来判断即可(只要没有什么中间件给你在服务端也加了window接口)

    var isNode = typeof window === 'undefined'; if(!isNode){ require('css/component/List'); }

    1
    2
    3
    4
    5
    var isNode = typeof window === 'undefined';
     
    if(!isNode){
        require('css/component/List');
    }

    不过请注意,这里我通过 webpack 把组件的样式也打包进了客户端的页面入口文件,其实不妥当。因为通过直出,页面在响应的时候就已经把组件的DOM树都先显示出来了,但这个时候是还没有取到样式的(样式打包到入口脚本了),需要等到入口脚本加载的时候才能看到正确的样式,这个过程会有一个闪动的过程,是种不舒服的体验。

    所以走直出的话,建议把首屏的样式抽离出来内联到头部去。

    1 赞 2 收藏 2 评论

    金沙国际官网 7

    HTML 自定义元素教程

    2017/06/22 · HTML5 · 自定义元素

    原文出处: 阮一峰   

    组件是 Web 开发的方向,现在的热点是 JavaScript 组件,但是 HTML 组件未来可能更有希望。

    本文就介绍 HTML 组件的基础知识:自定义元素(custom elements)。

    金沙国际官网 8

    一、浏览器处理

    我们一般都使用标准的 HTML 元素。

    XHTML

    <p>Hello World</p>

    1
    <p>Hello World</p>

    上面代码中,``

    ``就是标准的 HTML 元素。

    如果使用非标准的自定义元素,会有什么结果?

    XHTML

    <greeting>Hello World</greeting>

    1
    <greeting>Hello World</greeting>

    上面代码中,`就是非标准元素,浏览器不认识它。这段代码的[运行结果](http://jsbin.com/rifozonomu/edit?html,output)是,浏览器照常显示Hello World`,这说明浏览器并没有过滤这个元素。

    金沙国际官网 9

    现在,为自定义元素加上样式。

    JavaScript

    greeting { display: block; font-size: 36px; color: red; }

    1
    2
    3
    4
    5
    greeting {
      display: block;
      font-size: 36px;
      color: red;
    }

    运行结果如下。

    金沙国际官网 10

    接着,使用脚本操作这个元素。

    JavaScript

    function customTag(tagName, fn){ Array .from(document.getElementsByTagName(tagName)) .forEach(fn); } function greetingHandler(element) { element.innerHTML = '你好,世界'; } customTag('greeting', greetingHandler);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function customTag(tagName, fn){
      Array
        .from(document.getElementsByTagName(tagName))
        .forEach(fn);
    }
     
    function greetingHandler(element) {
      element.innerHTML = '你好,世界';
    }  
     
    customTag('greeting', greetingHandler);

    运行结果如下。

    金沙国际官网 11

    这说明,浏览器对待自定义元素,就像对待标准元素一样,只是没有默认的样式和行为。这种处理方式是写入 HTML5 标准的。

    “User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.”

    上面这段话的意思是,浏览器必须将自定义元素保留在 DOM 之中,但不会任何语义。除此之外,自定义元素与标准元素都一致。

    事实上,浏览器提供了一个HTMLUnknownElement对象,所有自定义元素都是该对象的实例。

    JavaScript

    var tabs = document.createElement('tabs'); tabs instanceof HTMLUnknownElement // true tabs instanceof HTMLElement // true

    1
    2
    3
    4
    var tabs = document.createElement('tabs');
     
    tabs instanceof HTMLUnknownElement // true
    tabs instanceof HTMLElement // true

    上面代码中,tabs是一个自定义元素,同时继承了HTMLUnknownElementHTMLElement接口。

    一篇文章带你快速入门createjs

    2017/06/30 · HTML5 · 2 评论 · createsjs

    本文作者: 伯乐在线 - 陈被单 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    开始用createjs这个框架的时候,发现网上的相关教程还是挺少的,所以写一篇文章,方便日后查看。

    createjs简介

    官网:

    createjs中包含以下四个部分:

    EaselJS:用于 Sprites、动画、向量和位图的绘制,创建 HTML5 Canvas 上的交互体验(包含多点触控)

    TweenJS:用于做动画效果

    SoundJS:音频播放引擎

    PreloadJS:网站资源预加载

    类似于SoundJS,PreloadJS,如果自己处理起来比较方便的话,也可以自己写,总的来说,它们相当于一个辅助作用,可选可不选。因此,本文章主要讲解EaselJS的使用。

    1. EaselJS的大致api

    • 画图片用(Bitmap)
    • 画图形,比如矩形,圆形等用(Shape) 【类似于改变坐标x,y,增加阴影shadow,透明度alpha,缩小放大scaleX/scaleY都可以做到】
    • 画文字,用(Text)
    • 还有容器Container的概念,容器可以包含多个显示对象

    2. EaselJS绘图的大致流程

    大致流程:创建显示对象→设置一些参数→调用方法绘制→添加到舞台→update(),代码如下:

    JavaScript

    <script src="easeljs-0.7.1.min.js"></script> //引入相关的js文件 <canvas id="canvas"></canvas> var canvas = document.querySelector('#canvas'); //创建舞台 var stage = new createjs.Stage(canvas); //创建一个Shape对象,此处也可以创建文字Text,创建图片Bitmap var rect = new createjs.Shape(); //用画笔设置颜色,调用方法画矩形,矩形参数:x,y,w,h rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100); //添加到舞台 stage.addChild(rect); //刷新舞台 stage.update();

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script src="easeljs-0.7.1.min.js"></script>  //引入相关的js文件
    <canvas id="canvas"></canvas>
     
    var canvas = document.querySelector('#canvas');
    //创建舞台
    var stage = new createjs.Stage(canvas);
    //创建一个Shape对象,此处也可以创建文字Text,创建图片Bitmap
    var rect = new createjs.Shape();
    //用画笔设置颜色,调用方法画矩形,矩形参数:x,y,w,h
    rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100);
    //添加到舞台  
    stage.addChild(rect);
    //刷新舞台
    stage.update();

    graphics可以设置一些样式,线条宽度,颜色等等,也可以调用一些方法绘制图形,比如矩形drawRect,圆形drawCircle等等,具体可以自己查看api。

    注意:记得一定要把shape对象加到舞台上,否则屏幕上不会显示。

    3. Ticker定时器

    写createjs肯定会遇到的一个,就是ticker,主要就是定时刷新舞台,理想的帧速率是60FPS

    JavaScript

    createjs.Ticker.setFPS(60);

    1
    createjs.Ticker.setFPS(60);

     

    4. 控制多个显示对象的层级关系

    stage,contain对象有个children属性代表子元素,是一个数组,里面的元素层级像下标一样从0开始,简单来说就是后面的覆盖前面的,addChild方法是添加到显示列表的最后。

    我们也可以动态改变children的层叠效果。

    JavaScript

    stage.setChildIndex(red,1);

    1
    stage.setChildIndex(red,1);

     

    5.容器 container

    它可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素,包含在一个Container中方便统一管理。

    比如一个人物,他由手,脚,头,身体组成,你可以将这几个部分放在同一个container中,统一移动。使用方法也比较简单:

    JavaScript

    var contain = new createjs.Container(); contain.addChild(bgImg); contain.addChild(bitmap); stage.addChild(contain);

    1
    2
    3
    4
    var contain = new createjs.Container();
    contain.addChild(bgImg);
    contain.addChild(bitmap);  
    stage.addChild(contain);

     

    蹬蹬蹬~本篇文章的重点,绘制图像并对图像进行处理

    6. 绘制图片

    var bg = new createjs.Bitmap("./background.png"); stage.addChild(bg); stage.update();

    1
    2
    3
    var bg = new createjs.Bitmap("./background.png");
    stage.addChild(bg);
    stage.update();

    按照上面的EaselJS的正常的绘制流程来说,上面这段代码应该可以正常显示。但是,只是有些情况下可以正常显示的,这个图像资源需要确定加载成功后才可以new,否则不会有图像在画布上,如果有做资源预加载,可以直接使用上面的代码,如果没有,则需要在image加载完成onload之后才进行绘制

    var img = new Image(); img.src = './img/linkgame_pass@2x.png'; img.onload = function () { var bg = new createjs.Bitmap("./background.png"); stage.addChild(bg); stage.update(); }

    1
    2
    3
    4
    5
    6
    7
    var img = new Image();
    img.src = './img/linkgame_pass@2x.png';
    img.onload = function () {
    var bg = new createjs.Bitmap("./background.png");
    stage.addChild(bg);
    stage.update();
    }

    仅仅绘制图片是不够的,createjs提供了几种处理图片的方法:

    6.1  给图片增加遮罩层

    使用mask属性,可以只显示图片和shape相交的区域

    JavaScript

    stage = new createjs.Stage("gameView"); bg = new createjs.Bitmap("./img/linkgame_pass@2x.png"); bg.x = 10; bg.y = 10; //遮罩图形 shape = new createjs.Shape(); shape.graphics.beginFill("#000").drawCircle(0, 0, 100); shape.x = 200; shape.y = 100; bg.mask = shape; //给图片bg添加遮罩 stage.addChild(shape); stage.addChild(bg); stage.update();

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    stage = new createjs.Stage("gameView");
    bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
    bg.x = 10;
    bg.y = 10;
    //遮罩图形
    shape = new createjs.Shape();
    shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
    shape.x = 200;
    shape.y = 100;
    bg.mask = shape;     //给图片bg添加遮罩
    stage.addChild(shape);
    stage.addChild(bg);
    stage.update();

    常用应用场景:用来剪裁图片,比如显示圆形的图片等

    金沙国际官网 12
    6.2 给图片增加滤镜效果

    JavaScript

    var blur = new createjs.BlurFilter(5,5,1); bg.filters = [blur];

    1
    2
    var blur = new createjs.BlurFilter(5,5,1);
    bg.filters = [blur];

    我们发现,图片还是没有变模糊,原因是图片添加了filter后stage立即刷新,filter只能保持一帧的效果,第二帧filter则失效了。而使用图片的cache()方法后,可以使得无论舞台怎么刷新,都可以保持住Filter的效果,添加cache还有很多作用,可以提高FPS,缓存等

    JavaScript

    bg.cache(0,0,bg.image.width,bg.image.height);

    1
    bg.cache(0,0,bg.image.width,bg.image.height);

     

    6.3 使用Rectangle剪裁图片
    使用EaselJS内置的Rectangle对象来创建一个选取框,显示图片的某各部分。

    JavaScript

    stage = new createjs.Stage("gameView"); bg = new createjs.Bitmap("./img/linkgame_pass@2x.png"); bg.x = 10; bg.y = 10; var rect = new createjs.Rectangle(0, 0, 121, 171); bg.sourceRect = rect; stage.addChild(bg); stage.update();

    1
    2
    3
    4
    5
    6
    7
    8
    stage = new createjs.Stage("gameView");
    bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
    bg.x = 10;
    bg.y = 10;
    var rect = new createjs.Rectangle(0, 0, 121, 171);
    bg.sourceRect = rect;
    stage.addChild(bg);
    stage.update();

    适用场景:拼图小游戏,剪裁图片……

    金沙国际官网 13

    7. createjs事件

    easeljs事件默认是不支持touch设备的,需要以下代码才支持:

    JavaScript

    createjs.Touch.enable(stage);

    1
    createjs.Touch.enable(stage);

    对于Bitmap,Shape等对象,都可以直接使用addEventListener进行事件监听

    JavaScript

    bitmap = new createjs.Bitmap(''); bitmap.addEventListener(‘click’,handle);

    1
    2
    bitmap = new createjs.Bitmap('');
    bitmap.addEventListener(‘click’,handle);

     

    8. CreateJs的渲染模式

    CreateJs提供了两种渲染模式,一种是用setTimeout,一种是用requestAnimationFrame,默认是setTimeout,默认的帧数是20,一般的话还没啥,但是如果动画多的话,设置成requestAnimationFrame模式的话,就会感觉到动画如丝般的流畅。

    JavaScript

    createjs.Ticker.timingMode = createjs.Ticker.RAF;

    1
    createjs.Ticker.timingMode = createjs.Ticker.RAF;

    9.适配

    在移动端开发中,不得不面对一个多屏幕,多尺寸的问题,所以适配问题显得特别重要。

    JavaScript

    <canvas id="game" width="1000" height="700"></canvas>

    1
    &lt;canvas id="game" width="1000" height="700"&gt;&lt;/canvas&gt;

    注意,以上代码的width,height不同于css中的width,height。

    比如,你在canvas内部绘制图片,用x,y轴进行定位,这里的x,y是相对于canvas这个整体。

    我们再把canvas当成一整张图片使用css进行适配

    JavaScript

    canvas{ width: 100%; }

    1
    2
    3
    canvas{
         width: 100%;
    }

    那么,就会有以下的效果,canvas会适配屏幕尺寸,里面的图片也会等比例变大变小。

     金沙国际官网 14    金沙国际官网 15

    打赏支持我写出更多好文章,谢谢!

    打赏作者

    二、HTML import

    有了自定义元素,就可以写出语义性非常好的 HTML 代码。

    XHTML

    <share-buttons> <social-button type="weibo"> <a href="...">微博</a> </social-button> <social-button type="weixin"> <a href="...">微信</a> </social-button> </share-buttons>

    1
    2
    3
    4
    5
    6
    7
    8
    <share-buttons>
      <social-button type="weibo">
        <a href="...">微博</a>
      </social-button>
      <social-button type="weixin">
        <a href="...">微信</a>
      </social-button>
    </share-buttons>

    上面的代码,一眼就能看出语义。

    如果将`元素的样式与脚本,封装在一个 HTML 文件share-buttons.html`之中,这个元素就可以复用了。

    使用的时候,先引入share-buttons.html

    <link rel="import" href="share-buttons.html">

    1
    <link rel="import" href="share-buttons.html">

    然后,就可以在网页中使用``了。

    XHTML

    <article> <h1>Title</h1> <share-buttons/> ... ... </article>

    1
    2
    3
    4
    5
    <article>
      <h1>Title</h1>
      <share-buttons/>
      ... ...
    </article>

    HTML imports 的更多用法可以参考教程(1,2)。目前只有 Chrome 浏览器支持这个语法。

    打赏支持我写出更多好文章,谢谢!

    任选一种支付方式

    金沙国际官网 16 金沙国际官网 17

    1 赞 3 收藏 2 评论

    本文由金沙国际官网发布于web前端,转载请注明出处:自定义元素教程,降低首屏时间金沙国际官网:

    关键词: