javascript-关于前端组件的封装的 问题

问题描述

关于前端组件的封装的 问题

如果不使用任何前端框架, 自己写前端代码
有些组件, 是跟数据有关联性的
比如, 有一种按钮, 他又三个状态, 在UI 上分别用三种不同的背景图片表示
在程序逻辑上, 分别给这些按钮的element对象添加一个属性来表示他的状态

 <button id="btnFoo"></button><button id="btnBar"></button>
 document.getElementById("btnFoo")["state"]="ready";

大家看看这种方式, 有没有什么不妥, 有没有更好的办法?
浏览器不支持HTML5的

解决方案

自定义属性用getAttribute、setAttribute方法来做,而不是 document.getElementById("btnFoo")["state"]="ready";如果你初始化了state属性,标准浏览器不能通过document.getElementById("btnFoo")["state"]来获取自定义属性值,可以使用document.getElementById("btnFoo").getAttribute('state')获取

 <input type="button" id="btn" value="state" state="ready"/>
<script>
var btn=document.getElementById('btn');
alert(btn['state'])//undefined
alert(btn.getAttribute('state'))//ready
</script>

解决方案二:

状态直接用class表示不行吗?一个class既解决不同背景问题又记录了该状态。

解决方案三:

我是菜鸟,我也要来学习一下

解决方案四:

楼上showbo说的对

时间: 2016-03-25

javascript-关于前端组件的封装的 问题的相关文章

基于唯一状态的前端组件开发

facebook的react的框架提出了一个基于唯一状态来渲染前端组件的想法,什么是唯一状态,采用唯一状态渲染到底有什么好处.希望大家看到这篇文章以后不用任何框架也可以写出基于唯一状态渲染的前端组件. 基于唯一状态的组件的开发模式就是组件内部永远只存在一份数据来表示组件的状态,并且更新组件时只只使用这一份数据. 这种开发模式的好处,主要体现在以下两个方面 减少事件与Dom元素的联系 便于保存和恢复组件的状态 减少事件与Dom元素的联系 我们先来看一段传统开发页面交互逻辑时写的代码: <span

前端组件化(未完)

大家都知道DRY (Don't Repeat Yourself),像 Angular2 一样 Focus on Components , 还有React, Vue.js等,前端组件化开发已经是一个很老的话题了,只是在前端领域,这个和用户最直接交互的舞台,要实现视觉和代码的完全组件化,像生产车间一样组装然后交给用户,并不是很轻松的一件事情.但做好了,绝对是提高前端工程化和生产力的有效手段.先分享几篇我收集的相关文章,觉得可以借鉴思考- 参考阅读: Web应用的组件化(一)基本思路 备注: 文章思路

jquery-如何用JavaScript在前端页面做出这种提示框效果?

问题描述 如何用JavaScript在前端页面做出这种提示框效果? 应该得用上onmouseover onmouseout这两个方法, 应该还需要div 当鼠标移动到对象上,那么就执行onmouseover所挂载的方法 方法需要把已经隐藏的div显示出来... 暂时脑补这些,还是听听大神的意见吧~ 解决方案 弹出层+js定位 或者弹出层+CSS动画 解决方案二: 看什么对象,如果是图片.链接直接用alt属性,里面写上提示,浏览器就会调用标准的提示框. 解决方案三: http://www.w3sc

《单页Web应用:JavaScript从前端到后端》——第1章 第一个单页应用 1.1 定义、一些历史和一些关注点

第1章 第一个单页应用 单页Web应用:JavaScript从前端到后端 本章涵盖的内容 定义单页应用 比较最流行的单页应用平台:Java.Flash和JavaScript 编写第一个JavaScript单页应用 使用Chrome开发者工具查看单页应用 探讨单页应用对用户的好处 本书是为Web开发人员.架构师和产品经理而编写的,他们至少要有些JavaScript.HTML和CSS的经验.如果你从来没有涉猎过Web开发,本书就不适合你,但不管怎样还是欢迎购买.有很多非常不错的教初学者开发和设计网站

基于JavaScript实现前端文件的断点续传_javascript技巧

还是先以图片为例,看看最后的样子 一.一些知识准备 断点续传,既然有断,那就应该有文件分割的过程,一段一段的传. 以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割,我们可以可以使用slice方法来分割文件. 所以断点续传的最基本实现也就是:前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接. 而我们需要对FileList对象进行修改再提交,在之前的文章中知晓了这种提交的一些注意点,因为F

JavaScript中cookie工具函数封装的示例代码_javascript技巧

一. 语法 1.1 获取当前页面的所有cookie: var allCookies = document.cookie; allCookies 是一个字符串,其中包含了以分号分隔的cookie列表字符串 (即 key=value 键值对). 1.2 写一个新cookie: document.cookie = updatedCookie; updatedCookie是一个键值对形式的字符串.只能用这个方法一次设置或更新一个cookie,而且写入并不是覆盖,而是添加.例如: document.coo

使用Javascript监控前端相关数据的代码_javascript技巧

本篇文章介绍了Javascript监控前端相关数据,项目开发完成外发后,没有一个监控系统,我们很难了解到发布出去的代码在用户机器上执行是否正确,所以需要建立前端代码性能相关的监控系统. 所以我们需要做以下的一些模块: 一.收集脚本执行错误 function error(msg,url,line){ var REPORT_URL = "xxxx/cgi"; // 收集上报数据的信息 var m =[msg, url, line, navigator.userAgent, +new Dat

JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题_javascript技巧

将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEventHandler:function (element,type,handler) { if (element.addEventListener) { element.addEventListener(type, handler,false); }else if(element.attachEven

我所知道的前端组件化与模块化

序言:组件化?模块化?这都是什么鬼?这是最初看到这2个新名词的反应.随着时间的推移,似乎.可能.大概明白了一点,于是想说说自己的理解(仅仅是自己的理解) 一.组件化 忘记什么时候看到这个词的了,由于用过bootstrap的前提下(一下简称BS),当时第一反应是这样的,组件化不就是像BS那样把html拆分为:按钮组.栅格系统.导航组等等N多个组件,用的时候直接用BS提供class不就行了吗? 当然简单可以这么理解,但是跟深层次的理解应该是这样的,如你看到的一个html源码可能是这样的: <body