关于js开发的小问题
一、开发当中经常会动态拼接html,当然为了简便性好多人直接就是使用内联事件:
$('#td1').html( '<a href="#" onclick="app.showPostEdit('+aData+')"></a>');
$.Test = {
GetData: function () {
$.post("/Home/GetData", function (backdata) {
var strHtml = "";
$.each(backdata, function (itemIndex, item) {
strHtml += "<div class=\"row\">";
strHtml += " <div class=\"col-md-4\">";
strHtml += " " + item.Id;
strHtml += " </div>";
strHtml += " <div class=\"col-md-4\">";
strHtml += " " + item.Url;
strHtml += " </div>";
strHtml += " <div class=\"col-md-4\">";
strHtml += " <button class=\"btn btn-sm\" onclick=\"$.Test.AppendBtn(" + item + ")\">" + item.Name + "</button>";
strHtml += " </div>";
strHtml += "</div>";
});
$("#content").append(strHtml);
});
},
AppendBtn: function (str) {
console.log(str);
alert(str.Name);
}
};
浏览器会把它解析为:
<button class="btn btn-sm" onclick="$.Test.AppendBtn(eval([object Object]))">Name1</button>
毫无疑问,上面这种情况肯定是不对的;通常这种解决方案有两种:
1、使用全局变量,函数中传递对象索引,在具体的函数根据索引取出相应的对象
2、不使用内联事件,动态注册事件
当然还有一种方法,就是把对象的属性分别取出来进行传递;如果只有一两个还可以,否则.........你懂的!如果有更好的解决方案,请指教,多谢哦!
二、当业务比较复杂,一个页面中可能要写多个js文件,某个js文件可能使用common.js中的方法,而真正去写代码时会发现没有提示;
只需要把common.js拖到你当前的js文件中即可;
你的js文件会出现:/// <reference path="common.js" />
关于js开发的小问题的更多相关文章
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- 【转】利用 three.js 开发微信小游戏的尝试
前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...
- MPVUE - 使用vue.js开发微信小程序
MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...
- 《Node入门》读书笔记——用Node.js开发一个小应用
Android APP的开发告一段落,一个稳定的.实现了基本功能的APP已经交付用户使用了!我和老板交流了下,接下来准备转战Node.js了,而且一部分前端的功能也要做进去!哈哈哈~~~接下来要朝一个 ...
- 尝试用Vue.js开发网页小游戏的过程
准备 首先去官方下载并安装VSCODE,下载地址 https://code.visualstudio.com/.安装后打开会发现是英文版的,需要去安装插件来汉化.具体是在扩展插件搜索chinese,选 ...
- JS开发页面小组件:table组件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- node.js 开发简易的小爬虫
node.js 开发简易的小爬虫 最近公司开发一款医药类的软件,所以需要一些药品的基础数据,所以本人就用node.js写一个简易的小爬虫,并写记录这个Demo以供大家参考. 一.开发前的准备: 1, ...
- 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图
如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...
- 从微信小程序到鸿蒙js开发【11】——页面路由
目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ...
随机推荐
- h5页与ios通信
直接上代码 1 粘第一段 //ios function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBri ...
- css选择器浅谈
css选择器有很多,种类的话总结起来有5种.即: id选择器,class选择器,elements选择器,级联选择器,相邻选择器. 前三个没什么好说的,分别是id,class和标签的选择,注意选中对象的 ...
- postgresql-9.0.18-1-linux.run启动
下载地址:http://www.enterprisedb.com/products-services-training/pgdownload选择合适版本 基本都是下一步就可以到设置密码时记住密码以后要 ...
- Java 界面编程【03】事件监听
当你把界面都设计好了,总需要添加相应的执行动作给组件,在JAVA中有相应的时间处理机制,叫做“监听器”,给组件添加相应执行动作的过程叫做“注册”,其中的“监听器”是一个接口,里面包含了相应的执行函数, ...
- [原创][FPGA]时钟分频之奇分频(5分频)
0. 简介 有时在基本模块的设计中常常会使用到时钟分频,时钟的偶分频相对与奇分频比较简单,但是奇分频的理念想透彻后也是十分简单的,这里就把奇分频做一个记录. 1. 奇分频 其实现很简单,主要为使用两个 ...
- BZOJ——1622: [Usaco2008 Open]Word Power 名字的能量
http://www.lydsy.com/JudgeOnline/problem.php?id=1622 Description 约翰想要计算他那N(1≤N≤1000)只奶牛的名字的能量.每只 ...
- 洛谷——P2912 [USACO08OCT]牧场散步Pasture Walking(lca)
题目描述 The N cows (2 <= N <= 1,000) conveniently numbered 1..N are grazing among the N pastures ...
- error错误信息状态码含义
XMLHttpRequest.status: 200:成功. 401:拒绝访问. 403:禁止访问. 404:找不到. 405:方法不被允许. 407:要求进行代理身份验证. 500:内部服务器错误. ...
- Maven添加坐标(依赖)及在Eclipse中的操作
例如:添加一个spring-test.jar的依赖过程,普遍的做法就是直接操作pom.xml文件. 1.打开maven的中央仓库:http://search.maven.org/ 2.搜索仓库: 进入 ...
- InnoDB: Warning: a long semaphore wait 解决办法
http://blog.csdn.net/wulantian/article/details/37560849