js组件化开发发展

从第一代程序员写下第一行代码开始到上个世纪的80年代的软件危机,程序员一直在考虑一个问题,怎么写代码更容易。所形成的一套思路就是大团队的协同合作(如同cpu发展史一样,从飙主频到飙核数)

几乎所有的程序员开始写代码的时候,写代码都是以自我为中心的,代码风格随意看心情。这就导致了写代码协作起来极为麻烦,为什么呢?我写代码的时候,我和上帝知道我写的什么,过了一个月就只有上帝知道写的是什么了。这个问题在前端领域尤其严重,原因有如下几点:

1:因为这个领域没有多少年(1997 年,JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会(ECMA)

2:html/js/css发明出来的时候就只是玩玩而已的工具,技术非常不成熟。

3:这个领域人员水平参差不齐。

4:这个最重要也是最坑的:js是单线程的,css是全局的,如果几个人一起开发,一个bug集体加班(活那么多,人那么多,相互坑不出活,老板会fire掉大家)

很早就有人来想办法解决这个问题,解决这个问题的法宝---组件化。当然当时不是这样叫的,是通过两个原则来规范这个问题的,这两个原则就是:内聚性和耦合性。

意思就是:我想按时回家哄妹子!!!你怎么写代码我不管,你的功能全在你这儿实现(内聚性),不要让我还帮你写那块功能。另外,求你了,你代码不要影响我的代码(低耦合性)。

既然解决问题的思路在这里,前端大牛一代代前赴后继在这条路上飞奔下去。

第一代:YUI

200X年的时候,这个框架火啊,把js的坑都填了以后,比较low的事情就差不多解决完了,就直接扑组件化,当时一派盛世,仿佛从此以后,前端界一马平川,大家再也不用一行行代码去写了。

你要写个切换头图-----new Y.SlideShow,你要写个时间取值----new Y.Timepicker。

但是YUI还是倒在历史的车轮下(jquery UI也一样),为什么呢

YUI解决了组件化的问题,但是太过学院派。要求每个用这个的程序员如同学校里的好学生一样要熟悉整套UI规范和使用规范。就是你还要熟悉YUI的CSS,HTML,JS,这样才能用的非常爽。这就如同你如果是个学渣,学霸把卷子给你抄了,如果你没好好听过课,给你抄你都会把&抄成8。

第二代 ExtJS

extjs是踩着YUI的尸体走过来的,第一版的extjs完全是拿yui改的。我第一次接触EXtjs的时候,我哭了。。。我感觉我要失业了。太特么的好用了,这完全是给后端程序员的大大的礼物,看着一个个java程序员写着自己的业务逻辑,顺带把前端全搞定,而且还比你们一个个前端程序员还搞的好得多的时候,完完全全的失落感,好像时间已经完全不需要前端了,整个世界都变黑了。。。。

extjs比YUI进步在哪儿呢,首先他表面上有一套漂亮的UI。这个实质上就是你不用写CSS,他帮你写好了。另外你HTML也不用写了,他也帮你写好了。这不对啊,前端页面怎么可以没有HTML和CSS呢----------------extjs都帮你封装到js里了。。。。。

就如同你是个学渣,学霸把卷子给你抄了,而且这回的卷子还都是选择题。。。

可是PM、老板都不是吃素的。。。大家都有一身好手艺,难分高下,那来个附加题吧。。。这一块不好看,价格闪闪的效果,那一块只有动动吧。。。

extjs用是很简单,定制的话。。。。还是改错一处,全局错。。。。

第三代:web component

w3c跟google 突然有一天发现,iphone移除,我们的数钱数得手抽筋的好日子是快完了吧。以后感觉没web什么事了额。。。。。

帅哥,美女一见面都问装啥app,都不用电脑,笔记本,更谈不上看网页了呢。。。。

   gg一想,"不行啊",然后google买了android,"还是不行啊,我现在这么容易挣这么多钱,我就是把android养大了也不见得挣现在这么多钱额。我还是得把web这块保住啊”,w3c赶紧附和道:“对,对,对”。然后大家都知道了chrome 拼命刷版本从1~47没用几年吧。。。。web的规范是一波波的出啊, es4,5,6,7全出来了。
然后就有了web component横空出世,带着四个小弟shadow dom/custom element/template/import.
这次的组件化完完全全不一样了,custom element的出来的组件,可以是以前任意的东西,然后注册成任意一个名字的组件,可以就<niubi-xxxcomponent>,也可叫<my-cat>,反正你想叫啥,就叫啥,然后小伙伴(host)把你的组件(element)直接import进去了以后,完全不会影响大家的开发。注意,是完全不会影响,css只是组件局部,js也是只管自己的。终于实现了大家一起出力,各干各的,完全不会相互影响。。。。这可是真正的齐头并进啊。
来个例子:
<link rel="import" href="banner.html">
<link rel="import" href="phones.html">
<link rel="import" href="list.html">
<template name="t-listBox">
    <t-banner></t-banner>
    <t-phone></t-phone>
    <t-list></t-list>
</template>

这是前端代码么,怎么这么少。。。。。
这可是妥妥一个完整的界面啊,有banner,电话输入框,和电话列表啊。
   这正是奥妙之所在,可以三个同学同时写<t-banner><t-phone><t-list>三个组件,然后直接import进来以后就可以直接用了。。。
高内聚,低耦合
但是一般都是故事的,这规范到不成熟,到处都是坑
说个简单的,这一个个组件都是独立的,那样式不受外部影响,那通用样式怎么办,难道一个个组件去改嘛
当组件化时代已经开启,为了填原生js的坑,
已有无数勇士踩着前者的尸体来了:
1:angular
2:VUE
3: react
<think>嗯,用户想了解如何在Leaflet中设置地图背景颜色。我之前记得处理过类似的问题,可能需要参考之前的回答。首先,用户提到的引用里提到了几种方法,比如使用Canvas修改颜色、设置容器背景色,或者使用插件调整滤镜。首先,我需要确认Leaflet地图的背景颜色通常由什么决定。Leaflet的地图图层通常是瓦片图层,覆盖在容器之上。如果瓦片有透明部分,容器的背景色就会显示出来。所以,设置容器div的背景颜色可能是一个简单的方法。引用[2]中提到通过设置容器背景色和调整图层透明度来实现,这可能适用于天地图的情况,因为天地图瓦片可能有白色背景,调整透明度后容器颜色显现。 另外,使用像leaflet.tilelayer.colorfilter这样的插件可以应用滤镜效果,比如反色、灰度调整,或者调整亮度、饱和度等。引用[3]中的例子展示了如何添加滤镜,这样可以改变整个图层的颜色表现,从而间接改变地图的整体色调。这种方法可能更灵活,适合需要复杂效果的情况。还有一种情况是,如果底图本身是纯色且不透明,可能需要先处理瓦片颜色。比如使用Canvas绘制瓦片,修改像素颜色,再重新渲染。引用[1]提到这种方法适用于Leaflet、Cesium等,但可能需要更多代码和处理步骤。用户的需求是设置背景颜色,可能包括整个地图容器的背景,或者改变底图颜色风格。需要分情况讨论:如果是容器背景,直接设置CSS即可;如果是修改底图颜色,可能需要滤镜或处理瓦片。还要考虑不同底图服务的特性,比如天地图瓦片是否有透明区域。需要确保回答的结构清晰,分步骤说明不同的方法,并给出代码示例。同时,检查是否有遗漏的情况,比如是否所有底图都适用容器背景色,或者插件是否兼容最新版本的Leaflet。可能还需要提醒用户注意图层叠加时的透明度和顺序,避免背景色被覆盖。</think>在Leaflet中设置地图背景颜色可通过以下三种方法实现: ### 一、基础容器背景色设置 1. 修改地图容器CSS样式 ```css #map-container { background-color: #2a3546; /* 设置深色背景 */ } ``` 2. 调整图层透明度 ```javascript L.tileLayer(url, { opacity: 0.8 // 降低瓦片图层透明度使背景色可见 }).addTo(map); ``` *适用于天地图等带底色瓦片服务[^2]* ### 二、使用颜色滤镜插件 1. 安装leaflet.tilelayer.colorfilter ```bash npm install leaflet.tilelayer.colorfilter ``` 2. 应用颜色滤镜 ```javascript import 'leaflet.tilelayer.colorfilter'; const filters = [ 'brightness:90%', // 亮度 'hue:180deg', // 色相旋转 'contrast:120%' // 对比度 ]; L.tileLayer.colorFilter('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { filter: filters }).addTo(map); ``` *支持亮度/色相/饱和度等12种滤镜效果[^3]* ### 三、Canvas像素级处理 ```javascript L.TileLayer.include({ _createTile: function() { const tile = L.DomUtil.create('canvas', 'leaflet-tile'); const ctx = tile.getContext('2d'); // 加载瓦片后处理像素 const img = new Image(); img.onload = () => { ctx.drawImage(img, 0, 0); const pixels = ctx.getImageData(0,0,256,256); // 修改RGB通道值 for(let i=0; i<pixels.data.length; i+=4){ pixels.data[i] *= 0.8; // R通道 pixels.data[i+1] *= 0.6; // G通道 pixels.data[i+2] *= 0.4; // B通道 } ctx.putImageData(pixels,0,0); }; img.src = this.getTileUrl(coords); return tile; } }); ``` *适用于需要精确控制每个像素的场景[^1]*
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值