教你用webgl急速创制二个小世界,致大家必定组件

时间:2019-10-04 09:45来源:美高梅游戏网站
二、随机生成阶梯的达成 率性生成阶梯是玩玩的最基本部分。依照游戏的急需,阶梯由「无障碍物的阶砖」和「有障碍物的阶砖」的组成,何况阶梯的浮动是随机性。 致我们必定组件

二、随机生成阶梯的达成

率性生成阶梯是玩玩的最基本部分。依照游戏的急需,阶梯由「无障碍物的阶砖」和「有障碍物的阶砖」的组成,何况阶梯的浮动是随机性。

致我们必定组件化的Web

2015/11/25 · HTML5 · 1 评论 · 组件化

原来的书文出处: AlloyTeam   

那篇小说将从八年前的一次手艺纠纷起来。冲突的聚集正是下图的多少个目录分层结构。小编说按模块划分好,他说您傻逼啊,当然是按财富划分。

美高梅游戏网站 1 《=》美高梅游戏网站 2

”按模块划分“目录结构,把当前模块下的享有逻辑和财富都放一块了,那对于多个人独立开垦和掩护个人模块不是很可以吗?当然了,这争持的结果是本身宝宝地改回主流的”按能源划分“的目录结构。因为,未有做到JS模块化和财富模块化,仅仅物理地点上的模块划分是未有意义的,只会扩展营造的资金财产而已。

虽说他说得好有道理小编无话可说,可是自个儿心不甘,等待她近日端组件化成熟了,再来世界一战!

而前几天便是本身一再正义的光景!只是那时非常跟你撕逼的人不在。

模块化的难以为继

模块经常指能够独立拆分且通用的代码单元。由于JavaScript语言自身并未有内置的模块机制(ES6有了!!),大家平日会动用CMD或ADM创设起模块机制。今后超越八分之四稍稍大型一点的体系,都会选拔requirejs可能seajs来贯彻JS的模块化。多少人分工合营开辟,其个别定义信任和暴光接口,维护功效模块间独立性,对于项目标成本功效和体系中期扩大和维护,都以是有非常大的赞助意义。

但,麻烦我们有个别略读一下底下的代码

JavaScript

require([ 'Tmpl!../tmpl/list.html','lib/qqapi','module/position','module/refresh','module/page','module/net' ], function(listTmpl, QQapi, Position, Refresh, Page, NET){ var foo = '', bar = []; QQapi.report(); Position.getLocaiton(function(data){ //... }); var init = function(){ bind(); NET.get('/cgi-bin/xxx/xxx',function(data){ renderA(data.banner); renderB(data.list); }); }; var processData = function(){ }; var bind = function(){ }; var renderA = function(){ }; var renderB = function(data){ listTmpl.render('#listContent',processData(data)); }; var refresh = function(){ Page.refresh(); }; // app start init(); });

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
require([
    'Tmpl!../tmpl/list.html','lib/qqapi','module/position','module/refresh','module/page','module/net'
], function(listTmpl, QQapi, Position, Refresh, Page, NET){
    var foo = '',
        bar = [];
    QQapi.report();
    Position.getLocaiton(function(data){
        //...
    });
    var init = function(){
        bind();
        NET.get('/cgi-bin/xxx/xxx',function(data){
            renderA(data.banner);
            renderB(data.list);
        });
    };
    var processData = function(){
    };
    var bind = function(){
    };
    var renderA = function(){
    };
    var renderB = function(data){
        listTmpl.render('#listContent',processData(data));
    };
    var refresh = function(){
        Page.refresh();
    };
    // app start
    init();
});

地点是有血有肉有个别页面包车型地铁主js,已经封装了像Position,NET,Refresh等作用模块,但页面包车型大巴主逻辑照旧是”面向进度“的代码结构。所谓面向进度,是指依据页面包车型客车渲染进度来编排代码结构。像:init -> getData -> processData -> bindevent -> report -> xxx 。 方法之间线性跳转,你大概也能感受那样代码破绽。随着页面逻辑更是复杂,那条”进度线“也会愈发长,並且特别绕。加之缺少专门的工作约束,别的品种成员依据各自须要,在”进度线“加插各自逻辑,最后那些页面包车型地铁逻辑变得难以保证。

美高梅游戏网站 3

支付要求小心,生怕影响“进度线”前面平常逻辑。并且每二次加插或修改都以bug泛滥,无不令产品有关人口一律愁肠百结。

 页面结构模块化

听大人讲上边的面向进度的主题素材,行当内也可以有不菲消除方案,而大家公司也总计出一套成熟的建设方案:Abstractjs,页面结构模块化。我们得以把大家的页面想象为二个乐高机器人,须要不一样零件组装,如下图,假如页面划分为tabContainer,listContainer和imgsContainer多个模块。最后把那些模块add到终极的pageModel里面,最后采用rock方法让页面运行起来。

美高梅游戏网站 4
教你用webgl急速创制二个小世界,致大家必定组件化的Web美高梅游戏网站:。(原经过线示例图)

美高梅游戏网站 5
(页面结构化示例图)

下面是伪代码的兑现

JavaScript

require([ 'Tmpl!../tmpl/list.html','Tmpl!../tmpl/imgs.html','lib/qqapi','module/refresh','module/page' ], function(listTmpl, imgsTmpl, QQapi, Refresh, Page ){ var tabContainer = new RenderModel({ renderContainer: '#tabWrap', data: {}, renderTmpl: "<li soda-repeat='item in data.tabs'>{{item}}</li>", event: function(){ // tab's event } }); var listContainer = new ScrollModel({ scrollEl: $.os.ios ? $('#Page') : window, renderContainer: '#listWrap', renderTmpl: listTmpl, cgiName: '/cgi-bin/index-list?num=1', processData: function(data) { //... }, event: function(){ // listElement's event }, error: function(data) { Page.show('数据重返十分[' + data.retcode + ']'); } }); var imgsContainer = new renderModel({ renderContainer: '#imgsWrap', renderTmpl: listTmpl, cgiName: '/cgi-bin/getPics', processData: function(data) { //... }, event: function(){ // imgsElement's event }, complete: function(data) { QQapi.report(); } }); var page = new PageModel(); page.add([tabContainer,listContainer,imgsContainer]); page.rock(); });

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
45
46
47
48
49
require([
    'Tmpl!../tmpl/list.html','Tmpl!../tmpl/imgs.html','lib/qqapi','module/refresh','module/page'
], function(listTmpl, imgsTmpl, QQapi, Refresh, Page ){
 
    var tabContainer = new RenderModel({
        renderContainer: '#tabWrap',
        data: {},
        renderTmpl: "<li soda-repeat='item in data.tabs'>{{item}}</li>",
        event: function(){
            // tab's event
        }
    });
 
    var listContainer = new ScrollModel({
        scrollEl: $.os.ios ? $('#Page') : window,
        renderContainer: '#listWrap',
        renderTmpl: listTmpl,
        cgiName: '/cgi-bin/index-list?num=1',
        processData: function(data) {
            //...
        },
        event: function(){
            // listElement's event
        },
        error: function(data) {
            Page.show('数据返回异常[' + data.retcode + ']');
        }
    });
 
    var imgsContainer = new renderModel({
        renderContainer: '#imgsWrap',
        renderTmpl: listTmpl,
        cgiName: '/cgi-bin/getPics',
        processData: function(data) {
            //...
        },
        event: function(){
            // imgsElement's event
        },
        complete: function(data) {
           QQapi.report();
        }
    });
 
    var page = new PageModel();
    page.add([tabContainer,listContainer,imgsContainer]);
    page.rock();
 
});

我们把那几个常用的央求CGI,管理数量,事件绑定,上报,容错管理等一名目大多逻辑格局,以页面块为单位封装成叁个Model模块。

这般的二个架空层Model,大家得以清楚地见到该页面块,央求的CGI是什么样,绑定了哪些风浪,做了什么样上报,出错怎么处理。新添的代码就相应放置在对应的模块上相应的动静方法(preload,process,event,complete…),杜绝了今后的无准则乱增代码的小说。并且,依照差异专门的学问逻辑封装分化类别的Model,如列表滚动的ScrollModel,滑块成效的SliderModel等等,能够开展中度封装,聚焦优化。

明天基于Model的页面结构开垦,已经富含一点”组件化“的含意。每一种Model都包含各自的多少,模板,逻辑。已经算是三个完完全全的作用单元。但相差真正的WebComponent依然有一段距离,起码知足不断笔者的”理想目录结构“。

 WebComponents 标准

咱俩回想一下选择一个datapicker的jquery的插件,所须求的步奏:

  1. 引进插件js

  2. 引进插件所需的css(假若有)

  3. copy 组件的所需的html片段

  4. 增加代码触发组件运营

眼下的“组件”基本上只可以落得是有些意义单元上的成团。他的能源都是松散地分散在二种财富文件中,何况组件功用域揭发在大局意义域下,紧缺内聚性很轻易就能跟其它零件发生顶牛,如最简便易行的css命名争辨。对于这种“组件”,还比不上上边的页面结构模块化。

于是乎W3C按耐不住了,制定一个WebComponents标准,为组件化的现在指引了明路。

上面以较为轻松的办法介绍那份正经,力求大家能够急迅驾驭完结组件化的内容。(对那有的摸底的同校,能够跳过这一小节)

1. <template>模板工夫

模板那东西浙大学家最熟谙不过了,二〇二〇年见的相当多的模板品质战役artTemplate,juicer,tmpl,underscoretemplate等等。而前些天又有mustachejs无逻辑模板引擎等新入选手。但是大家有未有想过,这么基础的本领,原生HTML5是不帮助的(T_T)。

而后天WebComponent就要提供原生的模版技巧

XHTML

<template id="datapcikerTmpl"> <div>笔者是原生的模板</div> </template>

1
2
3
<template id="datapcikerTmpl">
<div>我是原生的模板</div>
</template>

template标签内定义了myTmpl的模板,供给使用的时候将在innerHTML= document.querySelector('#myTmpl').content;能够看看这几个原生的沙盘够原始,模板占位符等成效都尚未,对于动态数据渲染模板技能只好自力更新。

2. ShadowDom 封装组件独立的内部结构

ShadowDom可以驾驭为一份有独立功效域的html片段。那些html片段的CSS蒙受和主文书档案隔开分离的,各自作者保护持内部的独立性。也多亏ShadowDom的独自特性,使得组件化成为了可能。

JavaScript

var wrap = document.querySelector('#wrap'); var shadow = wrap.createShadowRoot(); shadow.innerHTML = '<p>you can not see me </p>'

1
2
3
var wrap = document.querySelector('#wrap');
var shadow = wrap.createShadowRoot();
shadow.innerHTML = '<p>you can not see me </p>'

在具体dom节点上行使createShadowRoot方法就可以生成其ShadowDom。就像在整份Html的房内面,新建了二个shadow的房子。房间外的人都不亮堂房间内有何样,保持shadowDom的独立性。

3. 自定义原生标签

首先接触Angularjs的directive指令功效,设定好组件的逻辑后,一个<Datepicker />就能够引进整个组件。如此狂炫丽炸碉堡天的机能,实在令人拍手叫好,跃地三尺。

JavaScript

var tmpl = document.querySelector('#datapickerTmpl'); var datapickerProto = Object.create(HTMLElement.prototype); // 设置把我们模板内容我们的shadowDom datapickerProto.createdCallback = function() { var root = this.createShadowRoot(); root.appendChild(document.importNode(tmpl.content, true)); }; var datapicker = docuemnt.registerElement('datapicker',{ prototype: datapickerProto });

1
2
3
4
5
6
7
8
9
10
11
12
var tmpl = document.querySelector('#datapickerTmpl');
var datapickerProto = Object.create(HTMLElement.prototype);
 
// 设置把我们模板内容我们的shadowDom
datapickerProto.createdCallback = function() {
    var root = this.createShadowRoot();
    root.appendChild(document.importNode(tmpl.content, true));
};
 
var datapicker = docuemnt.registerElement('datapicker',{
    prototype: datapickerProto
});

Object.create格局持续HTMLElement.prototype,得到一个新的prototype。当解析器开采咱们在文书档案中标志它将检查是不是一个名叫createdCallback的办法。假设找到那几个点子它将马上运转它,所以大家把克隆模板的剧情来创建的ShadowDom。

最终,registerElement的法子传递大家的prototype来注册自定义标签。

地点的代码开头略显复杂了,把前面七个力量“模板”“shadowDom”结合,产生组件的中间逻辑。最终经过registerElement的主意注册组件。之后方可欢悦地<datapicker></datapicker>的运用。

4. imports消除组件间的注重

XHTML

<link rel="import" href="datapciker.html">

1
<link rel="import" href="datapciker.html">

以此类php最常用的html导入功效,HTML原生也能扶助了。

WebComponents标准内容大意到那边,是的,作者这里未有何德姆o,也未尝试行经验分享。由于webComponents新特点,基本上巳了高版本的Chrome扶助外,其余浏览器的支撑度甚少。即便有polymer支持拉动webcompoents的仓库储存在,但是polymer本身的渴求版本也是异常高(IE10+)。所以明天的栋梁并不是她。

咱俩大概来回想一下WebCompoents的四部分机能:

1 .<template>定义组件的HTML模板技艺

  1. Shadow Dom封装组件的内部结构,並且保持其独立性

  2. Custom Element 对外提供组件的标签,达成自定义标签

  3. import解决组件结合和信赖性加载

 组件化实践方案

合法的科班看完了,大家寻思一下。一份真正成熟可信的组件化方案,需求全数的力量。

“能源高内聚”—— 组件能源内部高内聚,组件资源由自个儿加载控制

“作用域独立”—— 内部结构密闭,不与全局或别的零件产生潜濡默化

“自定义标签”—— 定义组件的行使方法

“可相互结合”—— 组件正在有力的地点,组件间组装整合

“接口标准化”—— 组件接口有联合规范,恐怕是生命周期的管住

民用以为,模板本事是基础技术,跟是或不是组件化未有强联系,所以并未有提议二个大点。

既然如此是奉行,现阶段WebComponent的支撑度还不成熟,不能够看做方案的花招。而除此以外一套以高质量设想Dom为切入点的零件框架React,在facebook的造势下,社区收获了大力发展。其余一名骨干Webpack,担负解决组件财富内聚,同期跟React极其相符形成补充。

所以【Webpack】+【React】将会是那套方案的核心工夫。

不通晓你今后是“又是react+webpack”认为失望美高梅游戏网站 6,照旧“太好了是react+webpack”不用再学一遍新框架的愉悦美高梅游戏网站 7。无论怎么样上面包车型客车剧情不会让您失望的。

一,组件生命周期

美高梅游戏网站 8

React天生便是强制性组件化的,所以能够从根脾性上化解面向进度代码所拉动的辛勤。React组件自个儿有生命周期方法,能够满意“接口标准化”技术点。而且跟“页面结构模块化”的所封装抽离的多少个法子能挨个对应。别的react的jsx自带模板效率,把html页面片直接写在render方法内,组件内聚性尤其严密。

鉴于React编写的JSX是会先生成虚构Dom的,须求机会才真的插入到Dom树。使用React必须要精通组件的生命周期,其生命周期四个情景:

Mount: 插入Dom

Update: 更新Dom

Unmount: 拔出Dom

mount那单词翻译扩大,嵌入等。作者倒是提议“插入”越来越好领会。插入!拔出!插入!拔出!默念三次,懂了没?别少看黄段子的力量,

美高梅游戏网站 9

零件状态正是: 插入-> 更新 ->拔出。

然后每种组件状态会有三种管理函数,一前一后,will函数和did函数。

componentWillMount()  打算插入前

componentDidlMount()  插入后

componentWillUpdate() 筹划更新前

componentDidUpdate()  更新后

componentWillUnmount() 妄图拔出前

因为拔出后基本都以贤者形态(笔者说的是组件),所以并未有DidUnmount那些措施。

除此以外React其余二个主干:数据模型props和state,对应着也可能有自个状态方法

getInitialState()     获取初步化state。

getDefaultProps() 获取暗中认可props。对于那个尚未父组件传递的props,通过该格局设置暗中同意的props

componentWillReceiveProps()  已插入的零部件收到新的props时调用

还会有一个离奇情状的处理函数,用于优化管理

shouldComponentUpdate():判断组件是还是不是必要update调用

累加最重大的render方法,React自己带的方法刚刚好12个。对于初学者的话是相比难以消化摄取。但事实上getInitialStatecomponentDidMountrender多个情景方法都能幸不辱命大多数零件,不必惧怕。

回去组件化的大旨。

二个页面结构模块化的组件,能独立包装整个组件的进度线

美高梅游戏网站 10

作者们换算成React生命周期方法:

美高梅游戏网站 11

 

组件的情事方法流中,有两点必要特殊表明:

1,二遍渲染:

鉴于React的杜撰Dom性情,组件的render函数不需本人触发,依据props和state的更换自个通过差别算法,得出最优的渲染。

需要CGI日常都以异步,所以必然带来三次渲染。只是空数据渲染的时候,有十分大希望会被React优化掉。当数码回来,通过setState,触发三回render

 

2,componentWiillMount与componentDidMount的差别

和大许多React的科目作品不同,ajax央浼笔者提出在WillMount的不二秘技内实行,并不是组件最先化成功之后的DidMount。那样能在“空数据渲染”阶段在此之前需要数据,尽早地回降三次渲染的日子。

willMount只会推行二回,非常切合做init的事务。

didMount也只会奉行贰次,何况这时候真实的Dom已经产生,非常符合事件绑定和complete类的逻辑。

 

 二,JSX极不好看,不过组件内聚的显要!

WebComponents的正规之一,须求模板本事。本是认为是大家听得多了自然能详细说出来的模版技艺,但React中的JSX那样的怪物照旧令人斟酌纷纭。React还尚未火起来的时候,我们就曾在乐乎上尖锐地嘲笑了“JSX写的代码那TM的丑”。那实则只是德姆o阶段JSX,等到实战的大型项目中的JSX,包蕴多情状大多据多事件的时候,你会发掘………….JSX写的代码依旧好丑。

美高梅游戏网站 12
(纵然用sublime-babel等插件高亮,逻辑和渲染耦合一同,阅读性仍然略差)

干什么我们会感觉丑?因为大家已经经对“视图-样式-逻辑”分离的做法潜移默化。

据说维护性和可读性,乃至质量,我们都不建议直接在Dom上边绑定事件也许直接写style属性。我们会在JS写事件代理,在CSS上写上classname,html上的正是清楚的Dom结构。我们很好地维护着MVC的设计形式,一切平安。直到JSX把她们都夹杂在联合具名,所守护的才具栈受到侵袭,难免存有抗拒。

 

只是从组件化的指标来看,这种高内聚的做法未尝不可。

下边的代码,在此之前的“逻辑视图分离”格局,我们供给去找相应的js文件,相应的event函数体内,找到td-info的class所绑定的平地风波。

对待起JSX的可观内聚,所有的事件逻辑就是在本身jsx文件内,绑定的正是小编的showInfo方法。组件化的个性能即刻呈现出来。

(注意:就算写法上大家好像是HTML的内联事件管理器,不过在React底层并从未实际赋值类似onClick属性,内层依然使用类似事件代理的章程,高效地保障着事件管理器)

再来看一段style的jsx。其实jsx未有对体制有硬性规定,大家一起可比照在此以前的定义class的逻辑。任何一段样式都应当用class来定义。在jsx你也全然能够那样做。然而出于组件的独立性,小编建议部分唯有“三回性”的体裁直接行使style赋值越来越好。减弱冗余的class。

XHTML

<div className="list" style={{background: "#ddd"}}> {list_html} </div>

1
2
3
<div className="list" style={{background: "#ddd"}}>
   {list_html}
</div>

也许JSX内部有担负繁琐的逻辑样式,可JSX的自定义标签工夫,组件的黑盒性立马能体验出来,是否一下子美好了众多。

JavaScript

render: function(){ return ( <div> <Menus bannerNums={this.state.list.length}></Menus> <TableList data={this.state.list}></TableList> </div> ); }

1
2
3
4
5
6
7
8
render: function(){
    return (
      <div>
         <Menus bannerNums={this.state.list.length}></Menus>
         <TableList data={this.state.list}></TableList>
      </div>
   );
}

虽说JSX本质上是为了虚构Dom而准备的,但这种逻辑和视图中度合一对于组件化未尝不是一件好事。

 

上学完React那个组件化框架后,看看组件化工夫点的完毕意况

“财富高内聚”—— (33%)  html与js内聚

“作用域独立”—— (一半)  js的成效域独立

“自定义标签”—— (百分之百)jsx

“可交互结合”—— (四分之二)  可组成,但缺乏使得的加载格局

“接口规范化”—— (百分之百)组件生命周期方法

 

Webpack 财富组件化

对于组件化的能源独立性,平日的模块加载工具和营造流程视乎变得吃力。组件化的塑造筑工程程化,不再是事先大家广阔的,css合二,js合三,而是体验在组件间的信赖于加载关系。webpack正好相符必要点,一方面填补组件化工夫点,另一方扶助大家完善组件化的完整创设境遇。

先是要阐雅培(Abbott)点是,webpack是多少个模块加载打包工具,用于管理你的模块能源信任打包难点。那跟我们熟谙的requirejs模块加载工具,和grunt/gulp创设筑工程具的定义,多多少少某个出入又有一些雷同。

美高梅游戏网站 13

首先webpak对于CommonJS与AMD同期帮助,满意大家模块/组件的加载格局。

JavaScript

require("module"); require("../file.js"); exports.doStuff = function() {}; module.exports = someValue;

1
2
3
4
require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;

JavaScript

define("mymodule", ["dep1", "dep2"], function(d1, d2) { return someExportedValue; });

1
2
3
define("mymodule", ["dep1", "dep2"], function(d1, d2) {
    return someExportedValue;
});

自然最强劲的,最卓绝的,当然是模块打包功用。那正是这一功力,补充了组件化财富信赖,以及完整工程化的技艺

基于webpack的规划思想,全数财富都以“模块”,webpack内部贯彻了一套能源加运载飞机制,能够把想css,图片等财富等有依赖关系的“模块”加载。那跟大家选择requirejs这种单纯管理js大大分化。而那套加运载飞机制,通过贰个个loader来实现。

 

JavaScript

// webpack.config.js module.exports = { entry: { entry: './index.jsx', }, output: { path: __dirname, filename: '[name].min.js' }, module: { loaders: [ {test: /.css$/, loader: 'style!css' }, {test: /.(jsx|js)?$/, loader: 'jsx?harmony', exclude: /node_modules/}, {test: /.(png|jpg|jpeg)$/, loader: 'url-loader?limit=10240'} ] } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// webpack.config.js
module.exports = {
    entry: {
     entry: './index.jsx',
    },
    output: {
        path: __dirname,
        filename: '[name].min.js'
    },
    module: {
        loaders: [
            {test: /.css$/, loader: 'style!css' },
            {test: /.(jsx|js)?$/, loader: 'jsx?harmony', exclude: /node_modules/},
            {test: /.(png|jpg|jpeg)$/, loader: 'url-loader?limit=10240'}
        ]
    }
};

上边一份轻巧的webpack配置文件,在乎loaders的安顿,数组内四个object配置为一种模块能源的加运载飞机制。test的正则为协作文件准则,loader的为匹配到文件将由什么加载器管理,三个计算机之间用相隔,管理顺序从右到左。

 

style!css,css文件通过css-loader(管理css),再到style-loader(inline到html)的加工管理流。

jsx文件通过jsx-loader编写翻译,‘?’开启加载参数,harmony补助ES6的语法。

图片财富通过url-loader加载器,配置参数limit,调节少于10KB的图形将会base64化。

 能源文件怎么样被require?

JavaScript

// 加载组件本身css require('./slider.css'); // 加载组件信任的模块 var Clip = require('./clipitem.js'); // 加载图片能源 var spinnerImg = require('./loading.png');

1
2
3
4
5
6
// 加载组件自身css
require('./slider.css');
// 加载组件依赖的模块
var Clip = require('./clipitem.js');
// 加载图片资源
var spinnerImg = require('./loading.png');

在webpack的js文件中大家除了require我们如常的js文件,css和png等静态文件也足以被require进来。咱们因此webpack命令,编写翻译之后,看看输出结果如何:

JavaScript

webpackJsonp([0], { /* 0 */ /***/ function(module, exports, __webpack_require__) { // 加载组件本人css __webpack_require__(1); // 加载组件注重的模块 var Clip = __webpack_require__(5); // 加载图片能源 var spinnerImg = __webpack_require__(6); /***/ }, /* 1 */ /***/ function(module, exports, __webpack_require__) { /***/ }, /* 2 */ /***/ function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(3)(); exports.push([module.id, ".slider-wrap{rn position: relative;rn width: 100%;rn margin: 50px;rn background: #fff;rn}rnrn.slider-wrap li{rn text-align: center;rn line-height: 20px;rn}", ""]); /***/ }, /* 3 */ /***/ function(module, exports) { /***/ }, /* 4 */ /***/ function(module, exports, __webpack_require__) { /***/ }, /* 5 */ /***/ function(module, exports) { console.log('hello, here is clipitem.js') ; /***/ }, /* 6 */ /***/ function(module, exports) { module.exports = "data:image/png;base64,iVBORw0KGg......" /***/ } ]);

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
webpackJsonp([0], {
/* 0 */
/***/ function(module, exports, __webpack_require__) {
          // 加载组件自身css
          __webpack_require__(1);
          // 加载组件依赖的模块
          var Clip = __webpack_require__(5);
          // 加载图片资源
          var spinnerImg = __webpack_require__(6);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
 
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
          exports = module.exports = __webpack_require__(3)();
          exports.push([module.id, ".slider-wrap{rn position: relative;rn width: 100%;rn margin: 50px;rn background: #fff;rn}rnrn.slider-wrap li{rn text-align: center;rn line-height: 20px;rn}", ""]);
 
/***/ },
/* 3 */
/***/ function(module, exports) {
 
/***/ },
 
/* 4 */
/***/ function(module, exports, __webpack_require__) {
/***/ },
 
/* 5 */
/***/ function(module, exports) {
          console.log('hello, here is clipitem.js') ;
/***/ },
/* 6 */
/***/ function(module, exports) {
          module.exports = "data:image/png;base64,iVBORw0KGg......"
/***/ }
]);

webpack编写翻译之后,输出文件视乎乱糟糟的,但实在每二个财富都被封装在几个函数体内,何况以编号的款式标识(注释)。这个模块,由webpack的__webpack_require__其间方法加载。入口文件为编号0的函数index.js,可以看来__webpack_require__加载其余编号的模块。

css文件在号码1,由于采用css-loader和style-loader,编号1-4都是拍卖css。当中编号2大家可以看我们的css的string体。最后会以内联的诀窍插入到html中。

图表文件在编号6,能够看出exports出base64化的图纸。

 组件一体输出

JavaScript

// 加载组件自己css require('./slider.css'); // 加载组件信任的模块 var React = require('react'); var Clip = require('../ui/clipitem.jsx'); // 加载图片财富 var spinnerImg = require('./loading.png'); var Slider = React.createClass({ getInitialState: function() { // ... }, componentDidMount: function(){ // ... }, render: function() { return ( <div> <Clip data={this.props.imgs} /> <img className="loading" src={spinnerImg} /> </div> ); } }); module.exports = Slider;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 加载组件自身css
require('./slider.css');
// 加载组件依赖的模块
var React = require('react');
var Clip = require('../ui/clipitem.jsx');
// 加载图片资源
var spinnerImg = require('./loading.png');
var Slider = React.createClass({
    getInitialState: function() {
        // ...
    },
    componentDidMount: function(){
        // ...
    },
    render: function() {
        return (
            <div>
               <Clip data={this.props.imgs} />
               <img className="loading" src={spinnerImg} />
            </div>
        );
    }
});
module.exports = Slider;

如若说,react使到html和js合为紧凑。

那正是说丰盛webpack,两个结合一齐的话。js,css,png(base64),html 全数web能源都能合成几个JS文件。那多亏那套方案的核心所在:组件独立一体化。假如要引用四个零部件,仅仅require('./slider.js') 即可完结。

 

步向webpack的模块加载器之后,我们组件的加载难题,内聚难题也都工作有成地消除掉

“资源高内聚”—— (百分之百) 全部能源得以一js出口

“可相互结合”—— (百分之百)  可构成可依靠加载

 

 CSS模块化执行

很喜悦,你能阅读到此地。如今我们的零部件完结度特别的高,财富内聚,易于组合,成效域独立互不污染。。。。等等美高梅游戏网站 14,视乎CSS模块的实现度有欠缺。

那么近些日子组件完结度来看,CSS效用域其实是全局性的,并不是组件内部独立。下一步,大家要做得正是哪些让大家组件内部的CSS作用域独立。

那时候也可能有人立即跳出,大喊一句“德玛西亚!”,哦不,应该是“用sass啊傻逼!”。不过花色组件化之后,组件的里边封装已经很好了,其里面dom结商谈css趋向轻巧,独立,乃至是破碎的。LESS和SASS的一体式样式框架的设计,他的嵌套,变量,include,函数等丰盛的作用对于全体大型项目标样式管理拾叁分有效。但对此三个效果单一组件内部样式,视乎就变的有个别扞格难入。“不可能为了框架而框架,合适才是最棒的”。视乎原生的css技艺已经满意组件的体裁要求,唯独就是地方的css效能域难题。

 

此地笔者付诸考虑的方案: classname随意写,保持原生的点子。编写翻译阶段,依据组件在项目路径的独一性,由【组件classname+组件独一路线】打成md5,生成全局独一性classname。正当自家要写一个loader完成自己的主张的时候,开采歪果仁已经早在先走一步了。。。。

此间具体方案参谋笔者后边博客的译文:

在此以前大家研商过JS的模块。今后因此Webpack被加载的CSS财富叫做“CSS模块”?笔者认为如故有标题标。今后style-loader插件的落到实处精神上只是创办link[rel=stylesheet]要素插入到document中。这种作为和常见引进JS模块特差异。引入另三个JS模块是调用它所提供的接口,但引入八个CSS却并不“调用”CSS。所以引进CSS自身对于JS程序来讲并海市蜃楼“模块化”意义,纯粹只是表明了一种能源重视——即该零件所要实现的效果还索要一些asset。

据此,那位歪果仁还增添了“CSS模块化”的概念,除了下面的我们须要部分成效域外,还应该有众多意义,这里不详述。具体参谋原来的文章 

丰裕赞的一点,正是cssmodules已经被css-loader收纳。所以大家无需借助额外的loader,基本的css-loader开启参数modules就能够

JavaScript

//webpack.config.js ... module: { loaders: [ {test: /.css$/, loader: 'style!css?modules&localIdentName=[local]__[name]_[hash:base64:5]' }, ] } ....

1
2
3
4
5
6
7
8
//webpack.config.js
...  
    module: {
        loaders: [
            {test: /.css$/, loader: 'style!css?modules&localIdentName=[local]__[name]_[hash:base64:5]' },
        ]  
    }
....

modules参数代表开启css-modules功效,loaclIdentName为设置我们编写翻译后的css名字,为了方便debug,大家把classname(local)和组件名字(name)输出。当然能够在终极输出的本子为了节省提交,仅仅使用hash值即可。其余在react中的用法大致如下。

JavaScript

var styles = require('./banner.css'); var Banner = new React.createClass({ ... render: function(){ return ( <div> <div className={styles.classA}></div> </div> ) } });

1
2
3
4
5
6
7
8
9
10
11
var styles = require('./banner.css');
var Banner = new React.createClass({
    ...
    render: function(){
        return (
            <div>
                <div className={styles.classA}></div>
            </div>
        )
    }
});

终极这里关于出于对CSS一些构思,

有关css-modules的其他成效,我并不计划选拔。在其间分享【大家竭尽所能地让CSS变得复杂】中聊到:

小编们项目中比较多的CSS都不会像boostrap那样供给变量来安装,身为一线开采者的大家大约能够感受到:设计员们改版UI,相对不是轻松的换个色或改个间距,而是万象更新的全新UI,那纯属不是二个变量所能化解的”维护性“。

相反项目实战进程中,真正要缓慢解决的是:在本子迭代进程中这么些淘汰掉的超时CSS,多量地堆叠在类型当中。大家像极了家中的欧巴酱不舍得抛弃没用的事物,因为那只是大家使用sass或less编写出具有莫斯中国科学技术大学学的可维护性的,断定有复用的一天。

这个堆叠的逾期CSS(or sass)之间又有一点点正视,一部分超时失效了,一部分又被新的体裁复用了,导致没人敢动那一个历史样式。结果现网项目迭代还带着大批量四年前没用的体制文件。

组件化之后,css的布局一样被改动了。只怕postcss才是您今后手上最相符的工具,而不在是sass。

 

到此处,我们总算把组件化最终贰个题目也化解了。

“成效域独立”—— (百分百) 仿佛shadowDom功能域独立

 

到此地,大家能够开一瓶82年的百事可乐,好好庆祝一下。不是啊?

美高梅游戏网站 15

 

 组件化之路还在后续

webpack和react还应该有那个新特别首要的特色和意义,介于本文仅仅围绕着组件化的为骨干,未有种种演说。其他,配搭gulp/grunt补充webpack构建技艺,webpack的codeSplitting,react的机件通讯难题,开荒与生产条件布署等等,都是整个大型项目方案的所必需的,限于篇幅难点。能够等等作者更新下篇,或大家可以活动查阅。

可是,不得不再安利一下react-hotloader神器。热加载的开支形式相对是下一代前端开辟必备。严俊说,只要未有了热加载,作者会很泼辣地放任那套方案,就算那套方案再怎么完美,笔者都讨厌react须求5~6s的编写翻译时间。不过hotloader可以在本人不刷新页面包车型客车气象下,动态修改代码,况且不单单是样式,连逻辑也是即时生效。

美高梅游戏网站 16

如上在form表单内。使用热加载,表单无需再行填写,修改submit的逻辑立即见效。那样的支付效能真不是巩固仅仅一个品位。必须安利一下。

 

只怕你发掘,使用组件化方案以往,整个技巧栈都被更新了一番。学习花费也不菲,并且能够预看见,基于组件化的前端还恐怕会数不胜数理欠款缺的难点,比方性能优化方案须求再度思索,以致最焦点的零部件可复用性不自然高。后边相当长一段时间,须求我们不断磨砺与优化,索求最优的前端组件化之道。

起码咱们得以想像,不再怀恋自身写的代码跟有些何人何人冲突,不再为找某段逻辑在两个公文和章程间持续,不再copy一片片逻辑然后改改。大家每回编写都以可选取,可组合,独立且内聚的零部件。而各样页面将会由叁个个嵌套组合的机件,相互独立却互相功能。

 

对此这么的前端今后,有所指望,不是很好呢

从这之后,感激您的阅读。

1 赞 6 收藏 1 评论

美高梅游戏网站 17

离线无缓存意况

会展示叁个默许的页面

美高梅游戏网站 18

-EOF-

打赏扶助本人写出越来越多好文章,多谢!

打赏我

3、将obj中多少真正的采取3D对象中去

JavaScript

Text3d.prototype.addFace = function(data) {     this.addIndex(+data[1], +data[4], +data[7], +data[10]);     this.addUv(+data[2], +data[5], +data[8], +data[11]);     this.addNormal(+data[3], +data[6], +data[9], +data[12]); };   Text3d.prototype.addIndex = function(a, b, c, d) {     if(!d) {         this.index.push(a, b, c);     } else {         this.index.push(a, b, c, a, c, d);     } };   Text3d.prototype.addNormal = function(a, b, c, d) {     if(美高梅游戏网站 ,!d) {         this.normal.push(             3 * this.normalArr[a], 3 * this.normalArr[a] + 1, 3 * this.normalArr[a] + 2,             3 * this.normalArr[b], 3 * this.normalArr[b] + 1, 3 * this.normalArr[b] + 2,             3 * this.normalArr[c], 3 * this.normalArr[c] + 1, 3 * this.normalArr[c] + 2         );     } else {         this.normal.push(             3 * this.normalArr[a], 3 * this.normalArr[a] + 1, 3 * this.normalArr[a] + 2,             3 * this.normalArr[b], 3 * this.normalArr[b] + 1, 3 * this.normalArr[b] + 2,             3 * this.normalArr[c], 3 * this.normalArr[c] + 1, 3 * this.normalArr[c] + 2,             3 * this.normalArr[a], 3 * this.normalArr[a] + 1, 3 * this.normalArr[a] + 2,             3 * this.normalArr[c], 3 * this.normalArr[c] + 1, 3 * this.normalArr[c] + 2,             3 * this.normalArr[d], 3 * this.normalArr[d] + 1, 3 * this.normalArr[d] + 2         );     } };   Text3d.prototype.addUv = function(a, b, c, d) {     if(!d) {         this.uv.push(2 * this.uvArr[a], 2 * this.uvArr[a] + 1);         this.uv.push(2 * this.uvArr[b], 2 * this.uvArr[b] + 1);         this.uv.push(2 * this.uvArr[c], 2 * this.uvArr[c] + 1);     } else {         this.uv.push(2 * this.uvArr[a], 2 * this.uvArr[a] + 1);         this.uv.push(2 * this.uvArr[b], 2 * this.uvArr[b] + 1);         this.uv.push(2 * this.uvArr[c], 2 * this.uvArr[c] + 1);         this.uv.push(2 * this.uvArr[d], 2 * this.uvArr[d] + 1);     } };

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
45
Text3d.prototype.addFace = function(data) {
    this.addIndex(+data[1], +data[4], +data[7], +data[10]);
    this.addUv(+data[2], +data[5], +data[8], +data[11]);
    this.addNormal(+data[3], +data[6], +data[9], +data[12]);
};
 
Text3d.prototype.addIndex = function(a, b, c, d) {
    if(!d) {
        this.index.push(a, b, c);
    } else {
        this.index.push(a, b, c, a, c, d);
    }
};
 
Text3d.prototype.addNormal = function(a, b, c, d) {
    if(!d) {
        this.normal.push(
            3 * this.normalArr[a], 3 * this.normalArr[a] + 1, 3 * this.normalArr[a] + 2,
            3 * this.normalArr[b], 3 * this.normalArr[b] + 1, 3 * this.normalArr[b] + 2,
            3 * this.normalArr[c], 3 * this.normalArr[c] + 1, 3 * this.normalArr[c] + 2
        );
    } else {
        this.normal.push(
            3 * this.normalArr[a], 3 * this.normalArr[a] + 1, 3 * this.normalArr[a] + 2,
            3 * this.normalArr[b], 3 * this.normalArr[b] + 1, 3 * this.normalArr[b] + 2,
            3 * this.normalArr[c], 3 * this.normalArr[c] + 1, 3 * this.normalArr[c] + 2,
            3 * this.normalArr[a], 3 * this.normalArr[a] + 1, 3 * this.normalArr[a] + 2,
            3 * this.normalArr[c], 3 * this.normalArr[c] + 1, 3 * this.normalArr[c] + 2,
            3 * this.normalArr[d], 3 * this.normalArr[d] + 1, 3 * this.normalArr[d] + 2
        );
    }
};
 
Text3d.prototype.addUv = function(a, b, c, d) {
    if(!d) {
        this.uv.push(2 * this.uvArr[a], 2 * this.uvArr[a] + 1);
        this.uv.push(2 * this.uvArr[b], 2 * this.uvArr[b] + 1);
        this.uv.push(2 * this.uvArr[c], 2 * this.uvArr[c] + 1);
    } else {
        this.uv.push(2 * this.uvArr[a], 2 * this.uvArr[a] + 1);
        this.uv.push(2 * this.uvArr[b], 2 * this.uvArr[b] + 1);
        this.uv.push(2 * this.uvArr[c], 2 * this.uvArr[c] + 1);
        this.uv.push(2 * this.uvArr[d], 2 * this.uvArr[d] + 1);
    }
};

那边大家思量到兼容obj文件中f(ace)行中4个值的景况,导出obj文件中能够强行选拔独有三角面,可是大家在代码中格外一下比较安妥

message事件

页面和serviceWorker之间可以透过posetMessage()方法发送音信,发送的新闻可以因而message事件接收到。

那是一个双向的历程,页面能够发新闻给service worker,service worker也能够发送音讯给页面,由于那么些本性,能够将service worker作为中间纽带,使得贰个域名依然子域名下的四个页面可以自由通讯。

这里是三个小的页面之间通讯demo

一、Infiniti循环滑动的兑现

景物层担任两边树叶装饰的渲染,树叶分为左右两有的,紧贴游戏容器的两边。

在客户点击显示屏操控机器人时,两边树叶会趁机机器人前进的动作反向滑动,来构建出娱乐活动的作用。况且,由于该游戏是无穷尽的,因而,须求对两边树叶完毕循环向下滑动的动画效果。

 

美高梅游戏网站 19

循环场景图设计要求

对此循环滑动的贯彻,首先要求统一计划提供可上下无缝过渡的场景图,并且提出其场景图中度或宽度超过游戏容器的冲天或宽度,以调瘦肚复绘制的次数。

然后依据以下步骤,我们就足以兑现循环滑动:

  • 再次绘制四回场景图,分别在定点游戏容器尾巴部分与在相持偏移量为贴图中度的最上部地点。
  • 在循环的进度中,一回贴图以同一的偏移量向下滑动。
  • 当贴图际遇刚滑出娱乐容器的循环节点时,则对贴图地点展开复位。

 

美高梅游戏网站 20

最棒循环滑动的贯彻

用伪代码描述如下:

JavaScript

// 设置循环节点 transThreshold = stageHeight; // 获取滑动后的新岗位,transY是滑动偏移量 lastPosY1 = leafCon1.y + transY; lastPosY2 = leafCon2.y + transY; // 分别开展滑动 if leafCon1.y >= transThreshold // 若碰着其循环节点,leafCon1重新恢复设置地点 then leafCon1.y = lastPosY2 - leafHeight; else leafCon1.y = lastPosY1; if leafCon2.y >= transThreshold // 若遇到其循环节点,leafCon2重新载入参数地点 then leafCon2.y = lastPosY1 - leafHeight; else leafCon2.y = lastPosY2;

1
2
3
4
5
6
7
8
9
10
11
12
// 设置循环节点
transThreshold = stageHeight;
// 获取滑动后的新位置,transY是滑动偏移量
lastPosY1 = leafCon1.y + transY;  
lastPosY2 = leafCon2.y + transY;
// 分别进行滑动
if leafCon1.y >= transThreshold // 若遇到其循环节点,leafCon1重置位置
  then leafCon1.y = lastPosY2 - leafHeight;
  else leafCon1.y = lastPosY1;
if leafCon2.y >= transThreshold // 若遇到其循环节点,leafCon2重置位置
  then leafCon2.y = lastPosY1 - leafHeight;
  else leafCon2.y = lastPosY2;

在实际贯彻的经过中,再对职务变动历程参与动画举行润色,Infiniti循环滑动的卡通效果就出来了。

迈向PWA!利用serviceworker的离线访谈形式

2017/02/08 · JavaScript · PWA

正文小编: 伯乐在线 - pangjian 。未经作者许可,防止转发!
款待到场伯乐在线 专栏撰稿人。

微信小程序来了,能够使用WEB工夫在微信塑造二个独具Native应用体验的应用,产业界非常看好这种样式。不过你们或者不驾驭,谷歌早就有左近的规划,以至档案的次序更加高。那便是PWA(渐进式加强WEB应用)。
PWA有以下三种特色:

  • Installablity(可安装性)
  • App Shell
  • Offline(离线能力)
  • Re-engageable(推送公告手艺)

享有那么些特点都以“文雅降级、渐进巩固的”,给帮助的道具更加好的心得,不扶助的设施也不会更差。那就和微信小程序这种蹩脚设计的有史以来不一样之处。

本博客也在向着PWA的主旋律迈进,第一步作者选择了Offline,也等于离线技术。能够让客商在尚未互连网连接的时候仍是能够行使一些服务。那么些本领运用了ServiceWorker手艺。

落到实处思路正是,利用service worker,另起贰个线程,用来监听全体网络央浼,讲曾经呼吁过的数量放入cache,在断网的情景下,直接取用cache里面包车型地铁资源。为呼吁过的页面和图纸,展现二个默许值。当有互联网的时候,再另行从服务器更新。
美高梅游戏网站 21
代码这里就不贴了,未来大概会特意写一篇来详细介绍ServiceWorker,有意思味的能够一贯参谋源码。
挂号起来也特别有帮助

JavaScript

// ServiceWorker_js (function() { 'use strict'; navigator.serviceWorker.register('/sw.js', {scope: '/'}).then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); })();

1
2
3
4
5
6
7
8
9
10
11
12
// ServiceWorker_js
(function() {
    'use strict';
    navigator.serviceWorker.register('/sw.js', {scope: '/'}).then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
 
})();

此处供给注意的是,sw.js所在的目录要压倒它的调整范围,约等于scope。我把sw.js身处了根目录来调整总体目录。

接下去看看咱们的终极效果呢,你也能够在和睦的浏览器下断网尝试一下。当然有一部分浏览器近期还不辅助,比如盛名的Safari。

结语

急需关注的是此处笔者用了别的一对shader,此时就关乎到了有关是用八个program shader依旧在同三个shader中使用if statements,那四头质量怎么样,有怎样界别
此间将身处下一篇webgl相关优化中去说

正文就到此处呀,有标题和提议的小友人应接留言一同座谈~!

1 赞 收藏 评论

美高梅游戏网站 22

生命周期

先来看一下二个service worker的运营周期

美高梅游戏网站 23
上海教室是service worker生命周期,出处

图中能够看来,叁个service worker要经历以下进程:

  1.  安装

2.  激活,激活成功未来,展开chrome://inspect/#service-workers可以查阅到近年来运营的service worker

美高梅游戏网站 24

  1. 监听fetch和message事件,下边二种事件交易会开简单描述

  2. 销毁,是还是不是销毁由浏览器决定,假若三个service worker短时间不使用也许机器内存有数,则只怕会销毁那么些worker

后言

何以笔者要选择这几点大旨内容来解析呢?
因为那是大家日常在打闹支付中常常会蒙受的难题:

  • 什么管理游戏背景循环?
  • 有 N 类物件,设第 i 类物件的出现可能率为 P(X=i) ,怎样贯彻爆发满足那样可能率分布的人身自由变量 X ?

与此同期,对于阶梯自动掉落的才具点开辟化解,也能够让大家认知到,游戏支付难题的缓和能够从视觉层面以及逻辑底层双方面思虑,学会转三个角度思虑,进而将难点一蹴即至简单化。

那是本文希望能够给我们在玩乐支付方面带来一些启示与探讨的大街小巷。最终,还是老话,行文仓促,若错漏之处还望指正,若有越来越好的主张,应接留言调换商讨!

别的,本文同一时候公布在「H5游戏开拓」专栏,要是你对该地点的多种小说感兴趣,招待关怀大家的专栏。

有关笔者:pangjian

美高梅游戏网站 25

庞健,金融IT男。 个人主页 · 作者的篇章 · 5 ·   

美高梅游戏网站 26

4、装饰星星

光秃秃的多少个文字断定非常不足,所以我们还须求或多或少点缀,就用多少个点作为星星,特不难
注意私下认可渲染webgl.POINTS是方形的,所以我们得在fragment shader中加工管理一下

JavaScript

precision highp float;   void main() {     float dist = distance(gl_PointCoord, vec2(0.5, 0.5)); // 计算距离     if(dist < 0.5) {         gl_FragColor = vec4(0.9, 0.9, 0.8, pow((1.0 - dist * 2.0), 3.0));     } else {         discard; // 丢弃     } }

1
2
3
4
5
6
7
8
9
10
precision highp float;
 
void main() {
    float dist = distance(gl_PointCoord, vec2(0.5, 0.5)); // 计算距离
    if(dist < 0.5) {
        gl_FragColor = vec4(0.9, 0.9, 0.8, pow((1.0 - dist * 2.0), 3.0));
    } else {
        discard; // 丢弃
    }
}

题目2. 权力太大

当service worker监听fetch事件现在,对应的央浼都会经过service worker。通过chrome的network工具,能够看出此类央求会注脚:from service worker。要是service worker中冒出了难题,会促成全部诉求失利,包涵日常的html文件。所以service worker的代码性能、容错性必必要很好本领担保web app平常运行。

 

参照作品:

1. 

2. 

3. 

4. 

5. 

1 赞 3 收藏 评论

美高梅游戏网站 27

编辑:美高梅游戏网站 本文来源:教你用webgl急速创制二个小世界,致大家必定组件

关键词: