js如何进行标准的组件化封装

css部分
图片说明
主体部分
图片说明
js部分
图片说明

这是一个ul li模拟select的,第一次做组件化,求教如何将其改造成比较规范的。

以下附js代码
(function($){
$.extend({
select:function(options){
var id=options.id;
var ulheight=options.height==null?200:options.height;
var inputBoxWidth=parseFloat($("#"+id+">input").css("padding-right"))+parseFloat($("#"+id+">input").css("padding-left"))+parseFloat($("#"+id+">input").css("width"))
$("#"+id+">ul").css("width",inputBoxWidth+"px")
$(document).click(function(event){
if($("#"+id+">ul").css("display")!="none"){
if($("#"+id+">input").is(event.target)){
}else{
$("#"+id+">ul").fadeOut("fast");
}
}
})
$("#"+id+">input").click(function(){
var thisinput=$(this);
var thisul=$(this).parent().find("ul");
if(thisul.css("display")=="none"){
if(thisul.height()>parseFloat(ulheight)){thisul.css({
height:ulheight+"px"
,"overflow-y":"scroll"
})
};
thisul.fadeIn("100");
thisul.find("li").click(function(){
thisinput.val($(this).text());
thisul.fadeOut("100");
})
}
else{
thisul.fadeOut("fast");
}
})
}
})
})(jQuery)

5个回答

一般是下面这样写插件,保持jquery的链式写法

 $.fn.select=function(options){
return this.each(function(){
//组件代码
})
}

1.组件化首先要明确目的,你的组件期望依赖什么环境(jquery,vue,react,angular或者不依赖任何库)
2.明确了解浏览器的生命周期,来确定你的组建在浏览器生命周期的何时进行加载执行
3.明确你的组件的生命周期(何时创建,何时加载,何时更新,何时销毁)
4.明确你的组件的模式(单例,工厂)
5.你的组件内部运转机制要抽象合理(这里可以巧用设计模式和数据结构的模型进行抽象)

比如你期望把你的组件写成一个jQuery插件,就要知道jQuery是基于原型链的库,所有jquery的api都是这样挂载的

//jQuery选择器,其实就是jQuery构造函数
function $(){

}
//jQuery构造函数原型
 $.fn=jQuery.prototype={
    style:function(){}
    css:function(){}
    append:(){}
}

因此你只需要扩展jquery的原型链即可

 $.extend($.fn,{
    select:function(settings){
        return new Select(settings,$(this));
    }
})

最后你只要实现Select构造函数,就可以完成这个jquery插件了
//组件默认配置

 var default = {
    url:''
}
function Select(settings,dom){
  this.options = $.extend({},_default,settings);//合并组件配置项
    this.dom=dom
    this.init();
}

Select.prototype={
    init:function(){//组件生命周期初始化

    }
    onSelectChange:function(){//选择时触发

    },
    destroy:function(){//组件生命周期销毁

    }
}

由于涉及的知识点过于多且杂,不能一一列举,还需要楼主平时注意积累,扎实基础,组件封装这种事情,随着积累会迎刃而解

react 组件化 也不错

使用 vue 就能很快学会组件化使用。

qq_36326485
787873842 人家问的是怎么封装,使用谁不会。
一年多之前 回复

用vue吧,组件化比较方便点。原生的比较难。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
使用requirejs封装echarts

我想用reqirejs的方式,定义一个define,使用AMD的方式依赖于jquery和echarts,使用javascript函数返回一个方法,当其他地方调用时,可以直接调用这个返回的方法生成一个echarts图表。有没有人有实际的例子给参考下?

JavaScript实现菜单的隐藏与显示

如图片示意,网页由框架布局,主框架左侧还有一个控制条,点击可使左侧的导航菜单实现隐藏和显示的效果。目前有两种思路:使主框架向左浮动;隐藏左边导航菜单所在框架。请问这思路对吗?我没有代码基础,所以不懂怎么写代码,求好心人相助。另外想问,用Dreamweaver可以实现吗?非常感谢了![图片说明](https://img-ask.csdn.net/upload/201509/22/1442911284_395870.png)

关于jsp链接外部js的问题···

首先是jsp的代码,jsp代码如下: <script type="text/javascript" src="${pageContext.request.contextPath}/resources/script/seckill.js"></script> <script type="text/javascript"> //使用EL表达式传入参数 $(function(){ seckill.detail.init({ seckillId : ${seckill.seckillId}, startTime : ${seckill.startTime.time},//毫秒,方便js作解析 endTime : ${seckill.endTime.time} }); }); </script> 这个jsp所链接js如下: var seckill={ //封装秒杀相关ajax的url URL:{ }, //验证手机号 validatePhone : function(phone){ if(phone && phone.length == 11 && isNaN(phone)){ return true; }else{ return false; } }, //详情页秒杀逻辑 detail:{ //详情页初始化 init : function(params){ //手机验证和登陆,计时交互 //规划交互流程 //在Cookie中查找手机号 var userPhone = $.cookie('userPhone'); var startTime = params['startTime']; var endTime = params['endTime']; var seckillId = params['seckillId']; if(!seckill.validatePhone(userPhone)){ //请先登陆 //控制输出 var userPhoneModel = $('#phoneModel');//拿到bootstrap的组件 //调用这个组件的方法,传递json参数 userPhoneModel.modal({ show : true, //显示弹出层 backdrop : 'static',//禁止位置关闭 keyboard : false //关闭键盘事件 }); $('#userPhoneBtn').click(function(){ var inputPhone = $('userPhoneKey').val(); if(seckill.validatePhone(inputPhone)){ //将用户手机写入到cookie $.cookie('userPhone',inputPhone,{expires:7,path:'/seckill'}); window.location.reload(); }else{ $('#userPhoneMessage').hide().html('<label class="label label-danger">手机填写有误</label>').show(300); } }); } } } } 然后使用浏览器调试的时候发现····访问到的js内容根本就不是上面的js····而是我写的另外一个jsp页面···这是什么鬼错误- -有没有大神解释一下··

webstorm格式化.vue文件,stylus样式中间会新增一行,怎么才可以不新增一行?

![图片说明](https://img-ask.csdn.net/upload/201909/03/1567515348_679163.png)

关于vue头部导航栏菜单展示问题

ant design vue 当中配置路由菜单后,能在页面重发打开两个相同的菜单甚至多个,如下图: ![图片说明](https://img-ask.csdn.net/upload/202004/28/1588044447_989238.png) 这个问题该如何解决,坐等大佬

java团队公司的核心开发框架,应该是什么样子?

公司里需要统一开发框架,减少学习成本,人员可动态调配,要能适应绝大多数项目需要。那么,理想中的开发框架应该是什么路线呢?最近在搞框架升级,但有点看不情方向。 最早框架是MVC模式的,十年来已经积累了很多组件和代码了,mybatis+springmvc+freemarker+jquery,界面一半是后台渲染模式,freemarker输出html页面,一半是ajax方式,用的是json的freemarker模板输出json,只是换个模板,业务代码不变。非常成熟,做任何应用也没有障碍,只是总觉得脱离了前后端分离的大趋势,技术太旧了。 但是新的应该是什么路线呢?大致上,我们选择是mybatis+springboot+vue,那么: 1、应该完全放弃后台渲染吗? mvc 和前后端分离是不同的,但很多项目有时还要求支持IE8环境,网站内容管理这类需求一直是后台渲染+静态化的处理方式,现在要放弃mvc模式吗?我们当前的想法是支持vue和jquery两套前端(有必要吗?),但是jquery这种又有两种模式,传统的后台渲染MVC和前后端分离模式,后者完全用json,即使静态化也是静态化为json文件,这样,freemarker基本就用不上了。--后台渲染感觉也很好啊,返回一个完整页面,似乎现在很多团队前端用vue,后端用note.js,也有很多后台渲染。 2、WebFlux响应式编程方式要用吗? 感觉WebFlux整个思想全变了,大多数业务都能用这个开发吗?WebFlux会成为主流的开发框架吗?关键是,这个连关系数据库都不用了,简直匪夷所思,是否只在特定领域会用到呢? 这次框架升级希望能用至少十年,升级一次极为困难,所有的产品和组件都需要重写,甚至很多公司都撑不过这种变革。请大家各抒己见,谢谢!

mfc activex控件开发问题

mfc activex控件(封装另外一个dll文件中的接口)中的方法在vs2008中经过编译注册后通过js调用有效,而单独进行注册则提示“对象不支持此属性或方法”,这是什么原因啊?各位大神!!!

IE11浏览器报语法错误

**错误定位在main.js** ![图片说明](https://img-ask.csdn.net/upload/201911/20/1574233145_989245.png) ## # main.js代码如下 ``` // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import "babel-polyfill" import Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui' import store from './store' import Config from './config/' import Api from './api/' import Common from './utils/common' import PageAtion from '../src/components/PageAtion' // 自定义封装的分页组件 import CKEditor from '@ckeditor/ckeditor5-vue' // 自定义指令 import has from './utils/directive/has' // 引入全局样式 import '../static/css/index.css' import '../static/css/common.css' import '../static/css/style.css' import '../static/css/font-awesome.all.css' import 'tinymce/skins/ui/oxide/skin.css' // svgIcon import './icons' // 国际化语言设置(语言切换) import i18n from './lang' // 挂载全局变量 Vue.prototype.$Config = Config; Vue.prototype.$Api = Api; // 全局API Vue.prototype.$Common = Common; // 自定义函数 // Vue.prototype.$ReqUrl = ReqUrl // 自定义函数 // 注册全局组件 Vue.component('pageAtion', PageAtion); // 分页组件 Vue.use(ElementUI); Vue.use(has); Vue.use({ i18n: (key, value) => i18n.t(key, value) }); Vue.use(CKEditor); // 登录状态判断 (路由拦截) router.beforeEach((to, from, next) => { let userName = sessionStorage.getItem('user') if (!userName) { //未登录 sessionStorage.clear() if (to.path === '/login' || to.path === '/') { next() } else { next('/login') } } else { Api.getUserInfo().then(res => { // if (res) { if (res.data.result) { // 有 session 信息 let loginName = res.data.result.loginName // 新用户登录 if (userName != loginName) { store.dispatch('GetUserInfo') .then(res => { if (res.data.result) { next() } else { next('/login') } }) .catch(error => { next('/login') }) } else { if (to.path == '/layout') { next() } else { if (to.path == '/login' || to.path == '/') { next('/layout') } else { next() } } } } else { // session 过期 sessionStorage.clear() if (to.path == '/login' || to.path == '/') { next() } else { next('/login') } } // } else { // sessionStorage.clear() // if (to.path == '/login' || to.path == '/') { // next() // } else { // next('/login') // } // } }) } }) // 用户手动刷新页面 重新获取本地存储的用户信息 if (sessionStorage.getItem('userinfo')) { let token = sessionStorage.getItem('token') let userName = sessionStorage.getItem('user') store.commit('SET_TOKEN', token) store.commit('SET_LOGINNAME', userName) // 用户信息 let userinfo = JSON.parse(sessionStorage.getItem('userinfo')) store.commit('SET_USERINFO', userinfo) // 统计信息 let statisMap = JSON.parse(sessionStorage.getItem('statisMap')) store.commit('SET_STATISMAP', statisMap) } Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', router, i18n, store, components: { App }, // template: '<App/>' render: h => h(App) }) ```

vue弹出的模态框中的表单还存在上次的数据怎么办?

![图片说明](https://img-ask.csdn.net/upload/201908/06/1565072207_646173.png) ![图片说明](https://img-ask.csdn.net/upload/201908/06/1565072216_359093.png) 我给一个按钮绑定单击事件,弹出个模态框,这模态框是组件形式的,里面是表单, 遇见问题就是:第二次打开时里面数据还是上次的 这你们怎么处理的? 比如添加按钮,每次添加,表单里数据都需要是空的 模态框里有提交 和关闭 按钮 这两个点击时我可以清空,但是就要写到两个地方啊 我想在一打开时就清空

JAVA WEB 项目 数据库访问设计问题

我接手一个系统的二次开发,需要新增接口。 接口大致是对接一个前端的报表的实时展示:即需要实时访问数据库表的最新数据。 原系统的方案: 前端:采用js + Ajax 轮询调用 接口。 服务端接口:连接数据库(Sql Server 2012) 做查询和数据的封装返回。 我的疑问: 这种设计不会存在服务器性能与数据库性能问题吗? js中轮询,最低要求 每秒查询一次,多个用户并发访问服务接口。 系统为内部使用,保守并发量100个考虑, 对于一个接口每秒产生100个请求与数据库连接。多个接口的话数据库连接占用更多。 另外,据我了解,数据库有多个服务访问,且都是每秒实时查询的。

ts语法在vue中的使用问题

我用TS语法创建的vue项目,封装了axios模块,取名叫http 在main.ts中引入 ``` import http from "./http/http" Vue.prototype.http = http; ``` 然后我在组件中引用出错 ``` ERROR in F:/daimaku2/tsqianduan/src/App.vue(54,12): 54:12 Property 'http' does not exist on type 'CombinedVueInstance<Vue, { tupian: string; }, { huoqudingtu(): void; }, unknown, Readonly<Record<never, any>>>'. 52 | window.console.log("开始获取"); 53 | const that2 = this; > 54 | this.http | ^ 55 | .get("/dingtu/") 56 | .then(function(value: any) { 57 | window.console.log(JSON.parse(value.data)); Version: typescript 3.7.5 Time: 1607ms ``` ![图片说明](https://img-ask.csdn.net/upload/202003/01/1583067289_478807.png)

vue 的单元测试在实际项目中主要测试哪些内容?

vue 的单元测试在实际项目中主要测试哪些内容?能有助于版本迭代管理。 项目涉及到store,封装axios,全局引入自定义公共组件,测试用例该怎么写?

JQuery插件-HighCharts 一个令我蛋疼的事 求教、、

<div class="quote_title">引用</div><div class="quote_div"> <br />&nbsp; 最近在做一个监控系统,需要制作两个图形,一个度盘,一个波形图,最先开始使用了JFreeChart绘制图形,但是在服务器端绘制图形鸭梨很大,占用带宽多,浏览图形不畅快,抛弃之。 <br />&nbsp;&nbsp;&nbsp; 然后觉得可以使用Java Applet在客户端绘制图形,但是这个要求JRE环境,于是也被无情的抛弃了。 <br />&nbsp;&nbsp;&nbsp; 然后在网上找了会,发现一个HighCharts类库,一个JQuery插件,使用这个绘制出来的图形挺好看的,效果也令人满意,但是目前跟AJAX结合之后,highcharts制造出来的内存一直没有删除,PF使用率以每秒3MB的速度网上猛涨,令人大感鸭梨、、、(波形图现在困到这一个内存问题了) <br />&nbsp;&nbsp; 最后的度盘,在刚开始采用的Highcharts画的饼图,弄的一块一块的 效果也差,所以在GOOGLE了把JS绘图技术,搜出了 令我大感兴奋的矢量绘图技术,SVG AND VML,SVG支持除IE外大部分的浏览器,VML仅支持IE5以上的浏览器器,所以采用了SVG+VML结合在浏览器中绘图,图形不错,最后结合AJAX也没有发现内存问题。 <br />&nbsp;&nbsp; 所以现在在这想跟大家讨论一下HighCharts的使用、、请各位发表意见 <br /> <br /></div>自己要做一个实时的监控数据的图形,但是跟AJAX结合的时候,内存增长的速度 比较快,谁能帮我看看怎么回事,谢谢了!<img src="/images/smiles/icon_redface.gif"/> <br /><pre name="code" class="java"> waveLineImage = { chart: { renderTo: 'waveImage', //绘制到DIV容器中,根据ID defaultSeriesType: 'line', //绘制类型 目前是曲线 plotBorderWidth: 1, plotBorderColor: '#99CC99', marginRight: 12, showAxes: true }, title: { text: '', x: -20 //center }, xAxis: { tickWidth: 0, tickInterval: 5, gridLineWidth: 1, gridLineColor: '#99CC99', categories: [] }, yAxis: { title: { text: '' }, min: -1, tickInterval: 5, gridLineWidth: 1, gridLineColor: '#99CC99' }, plotOptions: { series: { animation: false, marker: { enabled: false } } }, tooltip: { enabled:false, formatter: function(){ return null; } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: "monitor", data: [] }, { name: "temp", data: [] }] }</pre> <br /> <br />上面是 初始化曲线图的实例 <br /> <br /><pre name="code" class="java"> var tempArray = null; function drawOscillogram(waveData){ if (waveData) { //传输过来的JSON数据 var dataArray = new Array(); var array = null, point = null, num = null,item = null; var waveDataLength = waveData.length; for (var i = 0; i &lt; waveDataLength; i++) { array = waveData[i].split(","); point = 1 / array.length; for (var j = 0; j &lt; array.length; j++) { num = i + Math.round((point * j) * 10) / 10; item = parseFloat(array[j]); dataArray.push([num, item]); num = null; } array = null; item = null; point = null; } if (waveDataLength &lt; 60) { //当不足60个点时,创建一个临时的数据,绑定到temp当中 if (tempArray == null) { tempArray = new Array(); for (var i = 0; i &lt; 61; i++) { tempArray.push([i, -6]); } } if(!waveLineImage.series[1]) waveLineImage.addSeries("",true,false); waveLineImage.series[1].data = tempArray; } else { tempArray = null; waveLineImage.series[1].remove(); } waveLineImage.series[0].data = dataArray; dataArray = null; waveDataLength = null; waveLineImage.redraw(); //重新绘制HighCharts图形 new Highcharts.Chart(waveLineImage); //绘制HIghcharts图形,这一句会生成大内 //存,想直接调用redraw重绘方法,完成绘图,这样不用重新刷新区域,而是在旧的基础上绘制,会减少内存,但 //是曲线什么都显示不出来 } } </pre> <br /> <br />waveData 是 传过来的 数据,把他绑定到图形中 ,内存长的飞快,每秒3MB,怎么修改,怀疑是//new Highcharts.Chart(waveLineImage);这句话增长的内存,然后调用 highCharts 的redraw 方法,重画,可是没有效果出来 求高手 提错!!!!<br/><strong>问题补充</strong><br/>上面有做出来的效果图,可以下载出来看一下、、 <br /> <br />另外HighCharts有一个redraw重绘方法,但是应该怎么调用呢,我调用无效!<br/><strong>问题补充</strong><br/>主要就是内存的方面了,也看了好多的JavaScript方面性能问题,内存释放问题,但是都不太理想,<br/><strong>问题补充</strong><br/> <br /><table class="bbcode"><tr><td>怎么没人回复啊 泪奔、、</td><td>太遗憾了吧</table><br/><strong>问题补充</strong><br/><div class="quote_title">引用</div><div class="quote_div"><ul> <li>用不用我加点注释 、、 汗 </li><li>哪一点有问题啊 泪奔中、、 </li><li>不回复也得顶起来啊 呜呜、 </li><li>大家都来探讨一下啊 呵呵 </li><li>大家在客户端都用什么方法绘制图表呢 </li></ul></div><br/><strong>问题补充</strong><br/><img src="/images/smiles/icon_sad.gif"/>&nbsp;<img src="/images/smiles/icon_surprised.gif"/>&nbsp;<img src="/images/smiles/icon_lol.gif"/>&nbsp;<img src="/images/smiles/icon_cool.gif"/>&nbsp;<img src="/images/smiles/icon_confused.gif"/>&nbsp;<img src="/images/smiles/icon_eek.gif"/>&nbsp;<img src="/images/smiles/icon_mad.gif"/>&nbsp;<img src="/images/smiles/icon_razz.gif"/>&nbsp;<img src="/images/smiles/icon_redface.gif"/>&nbsp;<img src="/images/smiles/icon_cry.gif"/> <br/><strong>问题补充</strong><br/><div class="quote_title">引用</div><div class="quote_div"><ul> <li><span style="color: #00ff00">咱么是顶起呢?还是顶起呢?呵呵</span> </li><li><span style="color: #0000ff">咱么是顶起呢?还是顶起呢?呵呵</span> </li><li><span style="color: red">顶顶顶 力压千钧</span> </li><li><span style="color: black">虽说晚上不上班 也不至于吧</span> </li><li><span style="color: #adefaa">有哪一点会是不好的 大大们都去哪了</span> </li></ul></div><br/><strong>问题补充</strong><br/><div class="quote_title">奥义之舞 写道</div><div class="quote_div"><div class="quote_title">引用</div><div class="quote_div"><ul> <li><span style="color: #00ff00">咱么是顶起呢?还是顶起呢?呵呵</span> </li><li><span style="color: #0000ff">看帖不回帖 很不给力啊</span> </li><li><span style="color: red">顶顶顶 力压千钧</span> </li><li><span style="color: black">虽说晚上不上班 也不至于吧</span> </li><li><span style="color: #adefaa">有哪一点会是不好的 大大们都去哪了</span> </li></ul></div></div> <br />+1<br/><strong>问题补充</strong><br/><div class="quote_title">引用</div><div class="quote_div">在highcharts官网http://www.highcharts.com/ref/#chart-object查了很久,经过测试,发现一个方法可行,很给力的时刻,修改了点代码,现在使用这种代码之后,可以保持在120KB/s左右的增长率</div> <br />修改后的代码:<pre name="code" class="java">waveLineImage = new Highcharts.Chart({ chart: { renderTo: 'waveImage', //绘制到DIV容器中,根据ID defaultSeriesType: 'line', //绘制类型 目前是曲线 plotBorderWidth: 1, plotBorderColor: '#99CC99', marginRight: 12, showAxes: true }, title: { text: '', x: -20 //center }, xAxis: { tickWidth: 0, tickInterval: 5, gridLineWidth: 1, gridLineColor: '#99CC99', categories: [] }, yAxis: { title: { text: '' }, min: -1, tickInterval: 5, gridLineWidth: 1, gridLineColor: '#99CC99' }, plotOptions: { series: { animation: false, marker: { enabled: false } } }, tooltip: { enabled:false, formatter: function(){ return null; } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: "monitor", data: [] }, { name: "temp", data: [] }] });</pre> 直接实例化绘图对象 <br /><pre name="code" class="java"> var tempArray = null; function drawOscillogram(waveData){ if (waveData) { //传输过来的JSON数据 var dataArray = new Array(); var array = null, point = null, num = null,item = null; var waveDataLength = waveData.length; for (var i = 0; i &lt; waveDataLength; i++) { array = waveData[i].split(","); point = 1 / array.length; for (var j = 0; j &lt; array.length; j++) { num = i + Math.round((point * j) * 10) / 10; item = parseFloat(array[j]); dataArray.push([num, item]); num = null;item=null; } array = null; item = null; point = null; } array = null; item = null; point = null; num = null; item=null; if (waveDataLength &lt; 60) { //当不足60个点时,创建一个临时的数据,绑定到temp当中 if (tempArray == null) { tempArray = new Array(); for (var i = 0; i &lt; 61; i++) { tempArray.push([i, -6]); } } if(!waveLineImage.series[1]) waveLineImage.addSeries("",true,false); waveLineImage.series[1].setData(tempArray); } else { tempArray = null; waveLineImage.series[1].remove(); } waveLineImage.series[0].setData(dataArray); //在这里通过setData方法设置数据 dataArray = null; waveDataLength = null; waveLineImage.redraw(); //这样调用图例对象的重绘方法可以找的到数据,以前数 //据是设置到JSON里面了,这个对象的数据应该没有更新 } } </pre> <br />不过这种现在仍然有100多KB的增长率,对于一个长期停留在页面中不刷新的局面,仍然是一个问题,各位老大们,有没有一个很好的意见提出来,让我继续改进,thank you<br/><strong>问题补充</strong><br/><div class="quote_title">tanqimin 写道</div><div class="quote_div">这个图表真的很蛋痛!</div> <br />哥们这个图表怎么了,很好看啊 呵呵 就是性能有点扯淡,不过性能是决定页面技术的优先选择、、 <br />很惆怅&nbsp;<img src="/images/smiles/icon_eek.gif"/> <br/><strong>问题补充</strong><br/><div class="quote_title">夜之son 写道</div><div class="quote_div">想让大家说什么呢,图太少,不给力。</div> <br />ok 上图 <br/><strong>问题补充</strong><br/>另外这个是VML画的度盘,跟AJAX结合 也不卡,很给力啊 呵呵 推荐 SVG + VML 结合 一秒 10多KB的增长量<br/><strong>问题补充</strong><br/>发现看英文文档狠让人蛋疼的事,有木有,中文帮助文档在哪里 呜呜 <br /> <br /><div class="quote_title">引用</div><div class="quote_div"> <br />希望对我的循环提出哪里可以优化点在、、感觉这里面也会浪费点性能 <br />希望最后能把PF增长率 控制在 10KB以内 <br />希望告我一个 JS代码 控制页面刷新的 代码 <br />这样我可以再内存增长到一定程度的时候 刷新释放内存 <br /></div><br/><strong>问题补充</strong><br/><div class="quote_title">hyj1254 写道</div><div class="quote_div">highChart我也在用,倒是没深究内存增长的问题。它也是vml+svg。内存不释放跟js代码和浏览器自身实现方式都有关系,有些情况你是无法有效释放内存的:比如在ie中,希望刷新释放内存是无法实现的,你可以到taobao、google地图等网站验证下,它默认将所有的页面元素都缓存起来,因此即使js完全没有问题它所占的内存也会越来越大。但chrome就好得多,每次刷新都显著地释放一些内存。至于highChart你可以到官网上反映下,看是否是内存泄露导致的。</div>+1 <br /><div class="quote_title">引用</div><div class="quote_div">用的浏览器 IE 和 火狐的 ,谷歌到没有看,不过同事通过谷歌浏览器访问了一下,正常,内存这块到没有看,这个浏览器的问题一直在关注, IE 和 FireFox的 掐架 一直没有停止 、、、</div> <br /><div class="quote_title">引用</div><div class="quote_div"> <br />&nbsp;&nbsp; 另外JS代码构造对象和释放对象之间,这个度由于刚开始关注性能问题,也没能做的很好,大家看到哪一点可以优化的,可以提出来、、 <br />over&nbsp;<img src="/images/smiles/icon_cry.gif"/>&nbsp;<img src="/images/smiles/icon_lol.gif"/>&nbsp;<img src="/images/smiles/icon_surprised.gif"/> <br /></div> <br /> <br /><br/><strong>问题补充</strong><br/><div class="quote_title">clue 写道</div><div class="quote_div">哦哦。。。原来是HighCharts <br />官方声称是有解决内存泄漏问题,但关键是。。。它指的泄漏是关闭浏览器仍不释放的泄漏,而非运行中释放 <br /> <br />基本上,想要解决难度很大,几乎底层代码都要过一遍,加上清理事件、解除Dom引用的逻辑。 <br />好像excanvas也需要一同改进 <br /> <br />HighCharts代码不便放出(就算放出也没用,版本低,改动大),但还是能做到将近0增长的。 <br /> <br />P.S. 推荐使用sIEve查看IE下Dom节点释放情况,JS本身的GC是很完善的,但与Dom循环引用就无能为力了。所以查看Dom节点的释放情况就知道是哪里有泄漏了。</div> <br />高手、、那按照你这样说,我要想做到内存0增长或近0增长,必须修改highcharts的源代码是么? <br />期待回答/// <br />对于上SIEVE这个软件,下载了也是用了 ,还有一个 火狐里面可以查看内存的软件,也使用了,但是 但是很头疼, <br />还没有找到解决的办法、 <br />还是经验少啊<br/><strong>问题补充</strong><br/><div class="quote_title">纪红玉 写道</div><div class="quote_div">JavaEye/ItEye <br />1号群 现招人 QQ 群号:39211996 <br />女程序员群7736086 <br />发完帖子我的号就没了,哎! <br /></div> <br />找女程序员群,貌似很难吧,估计你这个也是新创的、<br/><strong>问题补充</strong><br/><div class="quote_title">yintingbird 写道</div><div class="quote_div">我建议你用FusionCharts,你可以在网上搜一下,他的图表显示就很好,我用的就是这个,很简单的,你可以再往上找一个破解版的,但是破解版的柯南找的时候有点不好找。</div> <br />这个项目 已经基本完成了,这时候在动这个技术不太可可能,有可能到最后的时候 换成 SVG + VML了, <br />觉得这个 可以 控制,但是 AJAX 刷新时,内存也是嗖嗖的网上长啊,一秒10几KB 这还只是 小图形。 <br /> <br /> <br />不过应该比当年用DIV时候强吧、、<img src="/images/smiles/icon_cool.gif"/> <br/><strong>问题补充</strong><br/>很奇怪,为什么要投隐呢,难道我发的板块不对 晕、、<br/><strong>问题补充</strong><br/>偷偷的用 到时候 还得改 先拿着个练练手啊!<br/><strong>问题补充</strong><br/><div class="quote_title">conanca 写道</div><div class="quote_div"><div class="quote_title">奥义之舞 写道</div><div class="quote_div"><div class="quote_title">yintingbird 写道</div><div class="quote_div">我建议你用FusionCharts,你可以在网上搜一下,他的图表显示就很好,我用的就是这个,很简单的,你可以再往上找一个破解版的,但是破解版的柯南找的时候有点不好找。</div> <br />这个项目 已经基本完成了,这时候在动这个技术不太可可能,有可能到最后的时候 换成 SVG + VML了, <br />觉得这个 可以 控制,但是 AJAX 刷新时,内存也是嗖嗖的网上长啊,一秒10几KB 这还只是 小图形。 <br /> <br /> <br />不过应该比当年用DIV时候强吧、、<img src="/images/smiles/icon_cool.gif"/> </div> <br /> <br />HighCharts 商业用的话要收费吧。 <br />你们买了授权还是做的是国内项目?</div> <br />先拿这个练手,到时候重新换一个 <br />准备用raphael 谁用过这个,这个性能怎么样呢,封装的SVG+VML<br/><strong>问题补充</strong><br/><div class="quote_title">红四团 写道</div><div class="quote_div">HighCharts所renderer出来的每个Element都是可以destroy的,每个element都有destroy方法。HighCharts封装了VML和SVG,基本上能够跨浏览器。</div> <br />这个还真不知道,只知道总的有个释放的对象,结果一 释放,悲剧的事情发生了,整个图形都没有了<img src="/images/smiles/icon_cry.gif"/> <br /> <br /> <br />另外想知道 highcharts商用要上交多少money啊 <br /><br/><strong>问题补充</strong><br/><div class="quote_title">sunofsummer 写道</div><div class="quote_div">我以前和你遇到过同样的问题,amcharts可以解决。</div> <br />性能方面可以解决么,内存长的快不,和AJAX交互怎么样,<br/><strong>问题补充</strong><br/><div class="quote_title">kiven 写道</div><div class="quote_div">http://www.open-lib.com/Type/164-1.jsp <br /> <br />这里面或许有你要找的。大家都共享一下自己项目用的图标组件吧。</div> <br />thank you <br /> <br /> <br /> <br /> <br /> <br /> <br />不知道who用过Flex么 他生成的swf文件是在客户端生成的,还是服务器生成之后传输过来的呢,如果我要对他进行定时刷新,速度怎么样<br/><strong>问题补充</strong><br/><div class="quote_title">ahzzhen2 写道</div><div class="quote_div">用过Flex as3脚本写过一个监控的,内存占用是用仪表盘形式做的。也试过用pushlet+highchart写过(不是很理想,抛弃)</div> <br />貌似没理解我的意思,我说的是Flex监控 实时刷新 内存部分长的块么, 是在客户端 或者 服务器端绘图,绘制出来的图形传递速度怎么样,占用带宽多么<br/><strong>问题补充</strong><br/><div class="quote_title">sunofsummer 写道</div><div class="quote_div"><div class="quote_title">奥义之舞 写道</div><div class="quote_div"><div class="quote_title">sunofsummer 写道</div><div class="quote_div">我以前和你遇到过同样的问题,amcharts可以解决。</div> <br />性能方面可以解决么,内存长的快不,和AJAX交互怎么样,</div> <br /> <br />amcharts是基于flash实现的 如果网页游戏不存在内存问题的话 它也不会有的。 <br /></div> <br />额 这种的是不是刚开始都要进行加载等待一下啊

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Python可以这样学(第四季:数据分析与科学计算可视化)

Python可以这样学(第四季:数据分析与科学计算可视化)

组成原理课程设计(实现机器数的真值还原等功能)

实现机器数的真值还原(定点小数)、定点小数的单符号位补码加减运算、定点小数的补码乘法运算和浮点数的加减运算。

javaWeb图书馆管理系统源码mysql版本

系统介绍 图书馆管理系统主要的目的是实现图书馆的信息化管理。图书馆的主要业务就是新书的借阅和归还,因此系统最核心的功能便是实现图书的借阅和归还。此外,还需要提供图书的信息查询、读者图书借阅情况的查询等

土豆浏览器

土豆浏览器可以用来看各种搞笑、电影、电视剧视频

Java面试题大全(2020版)

发现网上很多Java面试题都没有答案,所以花了很长时间搜集整理出来了这套Java面试题大全,希望对大家有帮助哈~ 本套Java面试题大全,全的不能再全,哈哈~ 一、Java 基础 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境。 JRE:Java Runtime Environ...

Java8零基础入门视频教程

Java8零基础入门视频教程

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

TTP229触摸代码以及触摸返回值处理

自己总结的ttp229触摸代码,触摸代码以及触摸按键处理

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

深度学习原理+项目实战+算法详解+主流框架(套餐)

深度学习系列课程从深度学习基础知识点开始讲解一步步进入神经网络的世界再到卷积和递归神经网络,详解各大经典网络架构。实战部分选择当下最火爆深度学习框架PyTorch与Tensorflow/Keras,全程实战演示框架核心使用与建模方法。项目实战部分选择计算机视觉与自然语言处理领域经典项目,从零开始详解算法原理,debug模式逐行代码解读。适合准备就业和转行的同学们加入学习! 建议按照下列课程顺序来进行学习 (1)掌握深度学习必备经典网络架构 (2)深度框架实战方法 (3)计算机视觉与自然语言处理项目实战。(按照课程排列顺序即可)

java jdk 8 帮助文档 中文 文档 chm 谷歌翻译

JDK1.8 API 中文谷歌翻译版 java帮助文档 JDK API java 帮助文档 谷歌翻译 JDK1.8 API 中文 谷歌翻译版 java帮助文档 Java最新帮助文档 本帮助文档是使用谷

Ubuntu18.04安装教程

Ubuntu18.04.1安装一、准备工作1.下载Ubuntu18.04.1 LTS2.制作U盘启动盘3.准备 Ubuntu18.04.1 的硬盘空间二、安装Ubuntu18.04.1三、安装后的一些工作1.安装输入法2.更换软件源四、双系统如何卸载Ubuntu18.04.1新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列...

快速排序---(面试碰到过好几次)

原理:    快速排序,说白了就是给基准数据找其正确索引位置的过程.    如下图所示,假设最开始的基准数据为数组第一个元素23,则首先用一个临时变量去存储基准数据,即tmp=23;然后分别从数组的两端扫描数组,设两个指示标志:low指向起始位置,high指向末尾.    首先从后半部分开始,如果扫描到的值大于基准数据就让high减1,如果发现有元素比该基准数据的值小(如上图中18&amp;lt...

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

HTML期末大作业

这是我自己做的HTML期末大作业,花了很多时间,稍加修改就可以作为自己的作业了,而且也可以作为学习参考

Python数据挖掘简易入门

Python数据挖掘简易入门

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

C++语言基础视频教程

C++语言基础视频教程

UnityLicence

UnityLicence

软件测试2小时入门

软件测试2小时入门

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

Python数据分析师-实战系列

系列课程主要包括Python数据分析必备工具包,数据分析案例实战,核心算法实战与企业级数据分析与建模解决方案实战,建议大家按照系列课程阶段顺序进行学习。所有数据集均为企业收集的真实数据集,整体风格以实战为导向,通俗讲解Python数据分析核心技巧与实战解决方案。

YOLOv3目标检测实战系列课程

《YOLOv3目标检测实战系列课程》旨在帮助大家掌握YOLOv3目标检测的训练、原理、源码与网络模型改进方法。 本课程的YOLOv3使用原作darknet(c语言编写),在Ubuntu系统上做项目演示。 本系列课程包括三门课: (1)《YOLOv3目标检测实战:训练自己的数据集》 包括:安装darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 (2)《YOLOv3目标检测:原理与源码解析》讲解YOLOv1、YOLOv2、YOLOv3的原理、程序流程并解析各层的源码。 (3)《YOLOv3目标检测:网络模型改进方法》讲解YOLOv3的改进方法,包括改进1:不显示指定类别目标的方法 (增加功能) ;改进2:合并BN层到卷积层 (加快推理速度) ; 改进3:使用GIoU指标和损失函数 (提高检测精度) ;改进4:tiny YOLOv3 (简化网络模型)并介绍 AlexeyAB/darknet项目。

超详细MySQL安装及基本使用教程

一、下载MySQL 首先,去数据库的官网http://www.mysql.com下载MySQL。 点击进入后的首页如下:  然后点击downloads,community,选择MySQL Community Server。如下图:  滑到下面,找到Recommended Download,然后点击go to download page。如下图:  点击download进入下载页面选择No...

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

董付国老师Python全栈学习优惠套餐

购买套餐的朋友可以关注微信公众号“Python小屋”,上传付款截图,然后领取董老师任意图书1本。

爬取妹子图片(简单入门)

安装第三方请求库 requests 被网站禁止了访问 原因是我们是Python过来的 重新给一段 可能还是存在用不了,使用网页的 编写代码 上面注意看匹配内容 User-Agent:请求对象 AppleWebKit:请求内核 Chrome浏览器 //请求网页 import requests import re //正则表达式 就是去不规则的网页里面提取有规律的信息 headers = { 'User-Agent':'存放浏览器里面的' } response = requests.get

web网页制作期末大作业

分享思维,改变世界. web网页制作,期末大作业. 所用技术:html css javascript 分享所学所得

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

Spring Boot -01- 快速入门篇(图文教程)

Spring Boot -01- 快速入门篇 今天开始不断整理 Spring Boot 2.0 版本学习笔记,大家可以在博客看到我的笔记,然后大家想看视频课程也可以到【慕课网】手机 app,去找【Spring Boot 2.0 深度实践】的课程,令人开心的是,课程完全免费! 什么是 Spring Boot? Spring Boot 是由 Pivotal 团队提供的全新框架。Spring Boot...

立方体线框模型透视投影 (计算机图形学实验)

计算机图形学实验 立方体线框模型透视投影 的可执行文件,亲测可运行,若需报告可以联系我,期待和各位交流

Python数据清洗实战入门

Python数据清洗实战入门

软件测试入门、SQL、性能测试、测试管理工具

软件测试2小时入门,让您快速了解软件测试基本知识,有系统的了解; SQL一小时,让您快速理解和掌握SQL基本语法 jmeter性能测试 ,让您快速了解主流来源性能测试工具jmeter 测试管理工具-禅道,让您快速学会禅道的使用,学会测试项目、用例、缺陷的管理、

SAS9.4 SID(win 64位) 可使用至2021年5月

SAS 9.4 最新SID可使用至2021年5月,之前的2020年4月30日即将过期,过期后再更换SID会麻烦些,请及时更新SID。

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

相关热词 c# dbml文件 修改 c#遍历tree c# 能够控制单片机 c#对象写入数据库 c# 添加activex c#2005 json c# 数据库在云端 c# 字符串移位加密 c#禁用滚轮 c#实体类list去重复
立即提问