位置: 编程技术 - 正文

不用一句js代码初始化组件(js 不用var)

编辑:rootadmin

推荐整理分享不用一句js代码初始化组件(js 不用var),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js 不用var,不用javascript可以吗,js代码不能写在哪个位置,代替js的语言,代替js的语言,不用一句js代码可以吗,不用一句js代码可以吗,js代码不起作用,内容如对您有帮助,希望把文章链接给更多的朋友!

最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里面,可是从后台取数据就需要js的初始化,所以导致页面初始化的时候js的初始化代码里面出现很多重复的代码,看着很闹心。于是想起bootstrap table里面的data属性来,如果能够直接在html里面使用data-*这种方式来初始化简单的组件,那该多爽。我们先来看看bootstrap table的文档:

可以看到bootstrap table里面几乎所有的属性、事件都可以用data-*这种方式来做,感觉还不错。那博主就要开始研究了。data-*这东西是哪里来的呢?

一、jquery data()初探网上查了一圈,终于找到data-*的出处了,原来是Jquery和html5里面的,好东西,真是好东西!我们先来看看jquery的API

原始用法如下:

作用其实很明显,就是给元素加某些属性和数据,或者取值。

下面看看data()方法和html5 data-*属性的结合使用

哈哈,这个东西好,通过html5 的data-*设置的值,能够用jquery 的data()方法取到。这里的规则如下:

1)所有的data属性必须以“data-”开头, 2)属性用“-”隔开, 3)jquery里面取属性的时候去掉“data”和“-”即可。

有了这个作为基础,我们就知道如何在标签里面设置属性,然后在js里面取对应的属性了。下面就结合上次封装combobox的例子来说明下。

不用一句js代码初始化组件(js 不用var)

二、jquery data()实现data-*初始化组件还记得之前JS组件系列——封装自己的JS组件,你也可以这篇里面封装了一个简单的combobox,可以通过url去后台取数据。那么下面我们仍然在这个组件的基础上做手脚,实现直接在select标签里面添加data-*属性来初始化下拉框组件。

1、js组件封装代码

很明显,就是在页面初始化完成之后通过样式选择器去初始化组件。使用了each,如果有多个.combobox样式,依次去初始化每一个。通过 $.fn.combobox.call($combobox, $combobox.data()); 调用call方法去调用combobox的初始化,call方法里面两个参数分别对应:

1)当前初始化的jquery对象 2)参数列表。这里通过$combobox.data()得到的就是所有html里面的data-*属性。将所有的data-*属性作为参数传入combobox的初始化方法中。

2、html里面通过data-*初始化

指定data-*属性。从上面我们知道这里初始化是通过样式选择器.combobox来初始化组件的,所以就要求,如果想要使用data-*做组件的初始化,必须要设置一个class="combobox"样式,这样后台才取得到需要初始化的标签。

3、后台C#方法

测试代码,没什么好说的。

4、调试效果

得到效果

这样基本就完成通过data-*来初始化组件了。

上面简单演示了下jquery data()方法结合html5 data-*属性的使用。基本上能达到需求:不用多写一行js代码直接初始化标签。使用的时候直接引用jquery.js和jquery.extension.js文件即可。但是我们知道既然是html5里面的特性,那么对浏览器就得有一定的要求了。当然,此用法功能比较初级,但是对于一些简单组件的初始化够用了。

标签: js 不用var

本文链接地址:https://www.jiuchutong.com/biancheng/382727.html 转载请保留说明!

上一篇:封装属于自己的JS组件(封装是借助什么达到的)

下一篇:JS实现动态生成表格并提交表格数据向后端(js动态生成html页面)

  • 定期定额征收的个体户怎么报个人所得税
  • 个人天猫怎么开网店
  • 个体工商户怎么申请开普票
  • 按份共同保证和连带共同保证
  • 费用多报销了,但已经给了,怎么办
  • 累计净值包含业务收入吗
  • 个人承包工程怎么交个税
  • 应收款和应付款对抵
  • 营业外收支计入哪里
  • 固定资产无法使用不能带来经济利益是否需计提租金
  • 所得税可以预交吗现在
  • 怎么在网上申请电话卡
  • 购买生产设备上税怎么算
  • 股东分红是净利润还是毛利润
  • 建设工程材料检测费
  • 个人投资者取得现金红利的过程不用支付利息税
  • 企业不得将生产经营项目、场所
  • 应收账款减值后可以转回吗
  • 收到跨境分红的会计处理怎么做?
  • 公司为员工每月几号缴社保
  • 购货方跨月进项税额转出分录
  • 房地产企业增值税预缴
  • 发票作废是不是很麻烦
  • 居民企业非货币性资产投资、转让所得如何缴税?
  • 国外进口的食品还能吃吗
  • 公司按揭购车
  • 合同取得成本与销售费用
  • 外商投资企业盈余公积转增资本是否交预提所得税
  • 公司面临清算,外包企业的员工怎么处理?
  • 增值税一般纳税人申报流程
  • 资产负债表结构是什么
  • 公司注销帐上的钱取出来要交税吗
  • 土建工程成本核算怎么做
  • PHP:xml_set_character_data_handler()的用法_XML解析器函数
  • ecshop有哪些bug
  • PHPfor循环语句10的阶乘
  • 采购物资发生什么费用
  • 以固定资产换入无形资产
  • 拼多多改地址怎么改视频
  • 苹果电脑字体文件怎么拖出来
  • 集团内部资金拆借利息增值税
  • 计提企业税费和缴纳分录怎么做
  • 低值易耗品摊销方法名称怎么选
  • php foreach as
  • 资产负债表货币资金公式
  • 因果推断的常用标准
  • 销售费用的主要类型有哪些
  • 哪些费用计入管理费用中
  • 实际缴纳增值税和应缴纳增值税
  • 包装物押金属于应税货物吗
  • 委托加工业务的组成计税价格
  • 小微企业报税是多久报一次
  • 用友u8财务报表打印设置在哪
  • 异地车辆登记证书怎么补办
  • 超市出租摊位交什么税
  • 代扣个税返还需要交增值税吗
  • 用人单位劳务派遣人员工资怎么做账
  • 公司费用分摊给各部门
  • 一次性补缴养老保险的最新规定
  • 印花税可以去地方申报吗
  • 退税勾选选成抵扣勾选怎么办
  • 固定资产应计入什么账户
  • 餐饮服务属于什么职业
  • 企业其他应收款余额非常大的原因
  • docker安装使用
  • ubuntu怎么清理内存
  • 番茄花园论坛
  • win7系统开机无限重启
  • win7任务栏还原到下面快捷键
  • win7系统检测
  • win8.1怎么用
  • linux shell中 if else以及大于、小于、等于逻辑表达式介绍
  • unity3d动态加载资源
  • 用python编写
  • 性能优化是什么
  • unity怎么写接口
  • 怎么打印纳税申报清单
  • 增值税税控系统专用设备及技术维护费
  • 工业生产和农业生产区别
  • 地税局属于市直单位吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设