写着写着，就会跑偏，没错又走上了一个岔道……就是不知道这条岔道以后会不会越来越宽，有的说他是未来，有的说…… 这里不知道，也不做什么评断。减少一些重复性的工作，提高开发效率这是最根本的。说白了就是偷懒呗！又说了一大堆废话。接触过angularjs、vue还有一点点的reactjs，组件化的思想给开发带来了很大便利，但是但是但是，同一个组件我们要开发三遍吗？可不是嘛，我们的项目中就是两遍，因为没有使用react……我想偷懒，所有才有了这篇笔记。

　　第一个Web Components写的是：单滑块（SingleSlider）。第一个组件写的比较粗糙，但也实现了一些基本功能：

　　1、定制轨道高度、轨道颜色、已经划过的轨道颜色、加载颜色（这里颜色实在不知道怎么命名了，这个需求来自于：音乐播放器的播放进度条，不知道你有没有发现还有一个歌曲的加载进度，对就是这个）、滑块大小以及颜色（对就是那个小圆圈）

　　2、值改变时向往外发送事件，外部使用时可以监听，这里支持input和change

　　3、通过dom对象获取和设置组件的值

　　……

　　下面看一下截图

　　第一个就写了这个组件，因为在做一个web音乐播放器的demo，播放器进度和音量需要用到这个，基本上满足了需求，以后有时间在完善……

　　吐槽一下，这东西的兼容性兼容性兼容性，这是硬伤啊！

　　这里就不放代码了，有兴趣的可以看下面的预览。

　　预览地址：SingleSlider

我的第一个原生Web Components——滑块（SingleSlider）的更多相关文章

  1. 前端未来趋势之原生API：Web Components

    声明:未经允许,不得转载. Web Components 现世很久了,所以你可能听说过,甚至学习过,非常了解了.但是没关系,可以再重温一下,温故知新. 浏览器原生能力越来越强. js 曾经的 JQue ...

  2. 【转】Facebook React 和 Web Components（Polymer）对比优势和劣势

    原文转自:http://segmentfault.com/blog/nightire/1190000000753400 译者前言 这是一篇来自 StackOverflow 的问答,提问的人认为 Rea ...

  3. Facebook React 和 Web Components（Polymer）对比优势和劣势

    目录结构 译者前言 Native vs. Compiled 原生语言对决预编译语言 Internal vs. External DSLs 内部与外部 DSLs 的对决 Types of DSLs - ...

  4. Fiori Fundamentals和SAP UI5 Web Components

    这周有位同事邀请我给团队讲一讲SAP技术的演进历史,所以我准备了下面几个主题来介绍. 其中SAP的技术回顾和演进,我的思路就是从前后台两方面分别介绍. 我画了一张非常简单的图: 去年5月我写过一篇文章 ...

  5. Web API之Web Components

    本文参考<你的前端框架要被web组件替代了>. 于2011年面世的Web Components是一套功能组件,让开发者可以使用 HTML.CSS 和 JavaScript 创建可复用的组件 ...

  6. Polymer——Web Components的未来

    什么是polymer? polymer由谷歌的Palm webOS团队打造,并在2013 Google I/O大会上推出,旨在实现Web Components,用最少的代码,解除框架间的限制的UI 框 ...

  7. Web Components

    Web Components是不是Web的未来   今天 ,Web 组件已经从本质上改变了HTML.初次接触时,它看起来像一个全新的技术.Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力,可以 ...

  8. 腾讯发布新版前端组件框架 Omi，全面拥抱 Web Components

    Omi - 合一 下一代 Web 框架,去万物糟粕,合精华为一 → https://github.com/Tencent/omi 特性 4KB 的代码尺寸,比小更小 顺势而为,顺从浏览器的发展和 AP ...

  9. 从HTML Components的衰落看Web Components的危机 HTML Components的一些特性 JavaScript什么叫端到端组件 自己对Polymer的意见

    http://blog.jobbole.com/77837/ 原文出处: 徐飞(@民工精髓V) 搞前端时间比较长的同学都会知道一个东西,那就是HTC(HTML Components),这个东西名字很现 ...

随机推荐

  1. 国内jenkins搭建不再龟速的方式

    最新国内jenkisn搭建过程 第一步下载jenkins 点击进入清华源jenkins下载地址,我们下载的是jenkins-2.204.2.zip版本 之后解压后安装. 第二步配置管理员密码 自动弹出 ...

  2. Element-UI ( Dropdow )下拉菜单组件command传输对象

    通过 :command绑定对象数据,handleCommand方法处理数据 template <div v-for="(item, index) in FlyWarningList&q ...

  3. 高灵敏度自带DSP降噪算法的audio codec解决方案

    背景调研   随着AI渗透到各行各业,人们对语音的需求也越来越大,最近一两年,各种AI音频设备如雨后春笋般冒出.各种智能AI设备的推出,意味者市场对低成本的音频采集设备越来越多.针对这种情况,我们开发 ...

  4. 企业应用开发的大趋势，65%的应用开发将通过低代码完成 ZT

    全球知名的咨询公司Gartner于近日发表了最新版的<低代码开发平台魔力象限>,并在报告中指出,到2024年65%的应用开发工作都将通过低代码的方式完成.Gartner长期关注软件开发领域 ...

  5. LeetCode刷题专题

    1. https://leetcode-cn.com/problems/container-with-most-water/ 思想:左右边界  i,j   向中间收敛 ,左右夹逼 方法一: 一维数组的 ...

  6. CSS背景说明及连写

    一.CSS背景说明 CSS 可以添加背景颜色和背景图片,以及来进行图片设置. 1.1 背景图片(image) background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以多背 ...

  7. opencv —— getTickCount、getTickFrequency 计时函数

    getTickCount 函数 返回 CPU 自某个事件(如启动电脑)以来走过的时钟周期数. getTickFrequency 函数 返回 CPU 一秒钟所走过的时钟周期数. 二者结合使用,可以用来计 ...

  8. P1001 A+B Problem（int，long long）

    题目描述 输入两个整数 a,b,输出它们的和(∣a∣,∣b∣≤109). 注意 Pascal 使用 integer 会爆掉哦! 有负数哦! C/C++ 的 main 函数必须是 int 类型,而且最后 ...

  9. linux安装Nginx 以及 keepalived 管理Nginx

    linux安装Nginx 1.1将Nginx素材内容上传到/usr/local目录(pcre,zlib,openssl,nginx)(注意:必须登录用对这个文件具有操作权限的) 1.2安装pcre库 ...

  10. 2019牛客多校第八场 F题 Flowers 计算几何+线段树

    2019牛客多校第八场 F题 Flowers 先枚举出三角形内部的点D. 下面所说的旋转没有指明逆时针还是顺时针则是指逆时针旋转. 固定内部点的答案的获取 anti(A)anti(A)anti(A)或 ...