xml地图|网站地图|网站标签 [设为首页] [加入收藏]

皇家娱乐网址webpack使用理解,致我们终将组件化

来源:http://www.ccidsi.com 作者:集成介绍 人气:95 发布时间:2019-05-02
摘要:致我们一定组件化的Web 2015/11/25 · HTML5 · 1评论 ·组件化 原稿出处:AlloyTeam    那篇小说将从两年前的二回手艺争议起来。争辩的集中正是下图的五个目录分层结构。小编说按模块划分

致我们一定组件化的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

开辟必要谨慎,生怕影响“进程线”后边不荒谬逻辑。并且每1回加插或涂改都以bug泛滥,无不令产品有关人口无不行事极为谨慎。

 页面结构模块化

依靠上边的面向进程的难题,行当内也有诸多化解方案,而作者辈组织也总计出一套成熟的缓慢解决方案:Abstractjs,页面结构模块化。大家得以把大家的页面想象为1个乐高机器人,要求不相同零件组装,如下图,借使页面划分为tabContainer,listContainer和imgsContainer两个模块。最后把那么些模块add到最终的pageModel里面,最终利用rock方法让页面运行起来。

皇家娱乐网址 4
(原经过线示例图)

皇家娱乐网址 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,管理数量,事件绑定,上报,容错管理等壹多元逻辑形式,以页面块为单位封装成1个Model模块。

这么的3个虚幻层Model,大家能够清楚地察看该页面块,请求的CGI是何许,绑定了怎么着风浪,做了怎么样上报,出错怎么管理。新扩展的代码就相应放置在相应的模块上相应的气象方法(preload,process,event,complete…),杜绝了过去的无规则乱增代码的编写。并且,依照不一致专业逻辑封装不一致类其余Model,如列表滚动的ScrollModel,滑块功用的SliderModel等等,能够拓展高度封装,集中优化。

今昔依照Model的页面结构开荒,已经包罗一点”组件化“的深意。每一种Model都包含各自的多少,模板,逻辑。已经算是二个完全的效劳单元。但相距真正的WebComponent照旧有1段距离,至少满足不断笔者的”理想目录结构“。

 WebComponents 标准

大家回想一下运用1个datapicker的jquery的插件,所急需的步奏:

  1. 引进插件js

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

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

  4. 足够代码触发组件运维

眼下的“组件”基本上只可以落得是有个别意义单元上的汇集。他的能源都是松散地分散在二种财富文件中,而且组件功能域揭穿在大局意义域下,贫乏内聚性很轻巧就会跟别的零件发生争持,如最轻便易行的css命名龃龉。对于那种“组件”,还比不上上面包车型大巴页面结构模块化。

于是乎W3C按耐不住了,制定3个WebComponents标准,为组件化的前途教导了明路。

上边以较为轻松的章程介绍那份正经,力求我们能够火速通晓实现组件化的内容。(对那有个别摸底的同校,能够跳过这一小节)

1. <template>模板本领

模板那东西哈艺术高校家最熟知可是了,二零二零年见的较多的沙盘质量战斗artTemplate,juicer,tmpl,underscoretemplate等等。而明天又有mustachejs无逻辑模板引擎等新入选手。不过我们有未有想过,这么基础的手艺,原生HTML伍是不援救的(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能够知晓为1份有单独效能域的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的独立性。

三. 自定义原生标签

第一接触Angularjs的directive指令成效,设定好组件的逻辑后,3个<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>的利用。

四. imports