• 关于

    DOM的操作(中)

    的搜索结果

问题

jquery如何与ES6结合?

小旋风柴进 2019-12-01 19:34:09 1158 浏览量 回答数 1

问题

使用nodejs抓取时,出现转码问题

小旋风柴进 2019-12-01 19:28:09 976 浏览量 回答数 1

问题

求助使用nodejs抓取时,出现问题怎么解决?

吴孟桥 2019-12-01 19:36:00 1174 浏览量 回答数 1

万券齐发助力企业上云,爆款产品低至2.2折起!

限量神券最高减1000,抢完即止!云服务器ECS新用户首购低至0.95折!

回答

1、什么是 Vue.nextTick()? 定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 所以就衍生出了这个获取更新后的 DOM 的 Vue 方法。所以放在 Vue.nextTick()回调函数中的执行的应该是会对 DOM 进行操作的 js 代码; 理解:nextTick(),是将回调函数延迟在下一次 dom 更新数据后调用,简单的理解是:当数据更新了,在 dom 中渲染后,自动执行该函数, 使用 this.$nextTick() methods:{ testClick:function(){ let that=this; that.testMsg="修改后的值"; that.$nextTick(function(){ console.log(that.$refs.aa.innerText); //输出:修改后的值 }); } } 注意:Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM, 2、什么时候需要用的 Vue.nextTick()?? 1、Vue 生命周期的 created()钩子函数进行的 DOM 操作一定要放在 Vue.nextTick()的回调函数中,原因是在 created()钩子函数执行的时候 DOM 其实并未进行任何渲染,而此时进行 DOM 操作无异于徒劳,所以此处一定要将 DOM 操作的 js 代码放进 Vue.nextTick()的回调函数中。与之对应的就是 mounted 钩子函数,因为该钩子函数执行时所有的 DOM 挂载已完成。 created(){ let that=this; that.$nextTick(function(){ //不使用this.$nextTick()方法会报错 that.$refs.aa.innerHTML="created中更改了按钮内容"; //写入到DOM元素 }); } 2、当项目中你想在改变 DOM 元素的数据后基于新的 dom 做点什么,对新 DOM 一系列的 js 操作都需要放进 Vue.nextTick()的回调函数中;通俗的理解是:更改数据后当你想立即使用 js 操作新的视图的时候需要使用它 {{testMsg}} 3、在使用某个第三方插件时 ,希望在 vue 生成的某些 dom 动态发生变化时重新应用该插件,也会用到该方法,这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。 Vue.nextTick(callback) 使用原理: 原因是,Vue 是异步执行 dom 更新的,一旦观察到数据变化,Vue 就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个 watcher 被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和 DOm 操作。而在下一个事件循环时,Vue 会清空队列,并进行必要的 DOM 更新。 当你设置 vm.someData = 'new value',DOM 并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的 DOM 更新。如果此时你想要根据更新的 DOM 状态去做某些事情,就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

问问小秘 2019-12-02 03:21:01 0 浏览量 回答数 0

回答

1)JQuery代码之所以推荐写在DomReady事件发生的时候,是因为此时页面上的DOM元素已经存在,JQuery方法能够找到指定的DOM元素执行相应地操作2)在实际项目中,会有很多动态生成的元素,这种情况下有2种方式处理2.1 在Ajax方法加载完相应地DOM元素并添加到当前HTML文档后,再执行相关的JQuery操作具体到你的项目中,可以把这段代码移动到Ajax的实现方法中,load完成后执行回调 $(".content").load("./php.php",function(){ $(".delete").click(function(){ alert("成功"); }); });

小旋风柴进 2019-12-02 02:24:15 0 浏览量 回答数 0

回答

1.让JavaScript暂停下来,慢下来。 JavaScript排序是很快的,要我们肉眼能看到它的实现过程,我首先想到的是让排序慢下来。 排序的每一个循环都让它停300ms然后再继续进行。 怎么样才能停下来呢。查了一下JavaScript貌似没有sleep()这样的函数。暂停做不到,但是可以想办法让实现跟暂停差不多的效果。比如在循环里做一些无关的事情 。 首先尝试了让while(true)来一直执行一个空操作。执行一段时间再回到排序逻辑。代码大致是这样: for (var i = 0; i < 3; i++) { document.writeln(i); //DOM操作 var now = new Date().getTime(); while(new Date().getTime() - now < 3000){} } 慢是慢下来了。不过太耗资源,排序进行过程中dom并不会有任何改变,直到排序结束, DOM会变成排序好之后的样子。 但是如果设置断点一步步执行的时候 又可以看到一步步的排序变化。估计是因为这个操作太耗资源导致浏览器下达了一个DOM操作的命令但是一直腾不出资源来进行DOM操作。所以真正DOM操作的时候在js代码执行结束之后。 所以让JavaScript排序慢来来还是没有实现。 另一种让JavaScript暂停下来的思路: 写这个文章的时候又想到一种方法来让JavaScript停下来。 那就是AJAX的同步请求,以及超时操作。 也就是在要停下来的地方放一个AJAX请求,同步请求, 然后设置超时。超时的时间就是我们要暂停的时间。为了避免在到达超时请求之前服务 器就返回了我们的AJAX请求。可以在服务端运行类似 sleep()的程序 。从而保证AJAX不会返回。直接超时然后返回到我们的循环。不过这只是个设想。有兴趣的可以去尝试一下。 2.闭包和定时器。 这种思路不需要让排序过程慢下来。而是使用闭包缓存排序过程中数组的变化。然后使用setTimeout来确定展示每一个数组状态的顺序。在排序循环中放入类似下面的代码。 (function(){ var theArr = arr.slice();//当前数组状态的备份 setTimeout(function(){ bubbleSortDom(theArr);//排序的DOM操作。 },500*timeCount); timeCount++;//定时器的顺序。 })(); 不过后来发现这样子写的话代码量会比较大,逻辑有修改的话要修改的地方会有点多。局限性很多,比如要实现排序动画加快或减慢操作几乎是很困难的。所以还要另想办法。 3.缓存排序中的数组状态。 也就是在排序过程中。将数组的每一轮循环的状态保存到一个数组。然后再用这个数组依次将排序状态保存下来。 只需要在排序中加入一句就行。 this.pushHis(arr.slice(),i-1,j,k,temp); 这样就只需要一个setInterval()就可以了。并且可以很方便的实现动画的加快与减慢。逻辑也比较好理解 。 问题二:如何实现JavaScript排序动画的加快与减慢。 我们问题一使用的第三种方法。 得到一个保存了每一步排序状态的数组arr。 然后我们可以使用一个setInterval()定时器一步步展现排序状态。 如果要加快速度或减慢速度。就clearInterval(),修改定时器的执行间隔,重新setInterval(),从前一个定时器执行到数组中的位置开始执行。 问题三:对于使用递归实现的数组怎么办。 不是在原数组上进行操作的怎么办。 使用递归实现的排序。 可能并没有在一个数组上进行操作,只是最后返回一个排序好的数组出来。那么我们要如何获得排序中的数组的完整状态呢。 比如快速排序。 最开始不考虑动画,我的实现是这样的: function quickSort(arr){ var len = arr.length,leftArr=[],rightArr=[],tag; if(len<2){ return arr; } tag = arr[0]; for(i=1;i<len;i++){ if(arr[i]<=tag){ leftArr.push(arr[i]) }else{ rightArr.push(arr[i]); } } return quickSort(leftArr).concat(tag,quickSort(rightArr)); } 然后为了考虑动画,我改写了它的逻辑,让它在同一个数组上进行了实现。 其实是在递归的时候传入了当前的的子数组在原数组中的起始位置。从而在原数组上进行了操作。 用了两种方法来实现方式。在排序逻辑上略有不同。 第一种是先跟远处的对比。遇到比自己小的放到自己前面去。循环序号+1。比自己大的放到当前排序子数组的最后面去,循环序号不变。直到排列完成。 这种方法的缺点是即使是一个有序数组。它也会重新排。 第二种方法是 除了标记位,再设置一个对比位。 遇到比自己小的,放到前面去,标记位的位置+1,标记位与对比位之间所有的往后面移动一个位置。 遇到比自己大的。标记位不变,对比位+1。 这种方法的缺点是对数组进行的操作太多。优点是对有序数组不会再排。 方式一: function quickSort(arr,a,b,qArr){ var len = arr.length,leftArr=[],rightArr=[],tag,i,k,len_l,len_r,lb,ra,temp; if(a == undefined && b == undefined){ a = 0; b= arr.length-1;//初始化起始位置。 } if(qArr == undefined){ qArr = arr.slice(); } if((len == 2 && arr[0] == arr[1])||len<2){ return arr; } tag = qArr[a]; for (i = 1; i < len;) { if(qArr[a+i]<=tag){ leftArr.push(qArr[a+i]); qArr[a+i-1] = qArr[a+i]; qArr[a+i] = tag; k = a+i; i++; }else{ if(leftArr.length+rightArr.length == len-1){ break; } temp = qArr[a+i]; qArr[a+i] = qArr[b-rightArr.length]; qArr[b-rightArr.length] = temp; rightArr.push(temp); k = a+i-1; } this.pushHis(qArr.slice(),a,b,k); } len_l = leftArr.length; len_r = rightArr.length; if(len_l== 0){ lb = a; }else{ lb = a+len_l -1; this.sort(leftArr,a,lb,qArr); } if(len_r == 0){ ra = b; }else{ ra = b + 1 - len_r; this.sort(rightArr,ra,b,qArr) } return qArr } 方式二: function quickSort2(arr,a,b,qArr){ var len = arr.length,leftArr=[],rightArr=[],tag,i,j,k,temp,len_l,len_r,lb,ra; if(a == undefined && b == undefined){ a = 0; b= arr.length-1;//初始化起始位置。 } if(qArr == undefined){ qArr = arr.slice(); } if(len<2){ return arr; } if(len == 2 && arr[0] == arr[1]){ return arr; } tag = qArr[a]; for (i = 1,k = 0; i < len;) { if(qArr[a+i]>=tag){ rightArr.push(qArr[a+i]); i++; }else{ temp = qArr[a+i]; for(j = a+i;j>a+k;j--){ qArr[j] = qArr[j-1]; // this.pushHis(qArr.slice(),a,b,a+k); } qArr[a+k] = temp; leftArr.push(temp); k++; i++; } this.pushHis(qArr.slice(),a,b,a+k,i-1); } len_l = leftArr.length; len_r = rightArr.length; if(len_l== 0){ lb = a; }else{ lb = a+len_l -1; this.sort(leftArr,a,lb,qArr); } if(len_r == 0){ ra = b; }else{ ra = b + 1 - len_r; this.sort(rightArr,ra,b,qArr) } return qArr; } 具体的不同下面会有动画演示。 问题四:动画的流畅。 排序动画的DOM操作是很多的很快的。这里我做的优化只是让每一个排序步骤只涉及一个DOM操作。 全部由JavaScript拼接好,一次替换。类似下面的代码。 效果图: 主要实现了: 冒泡排序JavaScript动画演示 插入排序JavaScript动画演示 选择排序JavaScript动画演示 快速排序JavaScript动画演示 归并排序JavaScript动画演示 希尔排序JavaScript动画演示

liujae 2019-12-02 01:19:06 0 浏览量 回答数 0

回答

jquery 封装了所有dom的属性和方法吗?不知道 如果jquery中没有Dom的某个属性和方法,就混入Dom的js属性和方法呢?这是可以的。 $("#theID").html("<p>放在里面的内容</p>");和 $("#theID").get(0).innerHTML="<p>放在里面的内容</p>";是一样的。 get(0)操作把JQ对象转化成了DOM对象。 $("#theID")[0]也是一样的意思,把JQ对象转化成DOM对象,然后就可以用操作DOM方法操作它了。

小旋风柴进 2019-12-02 02:28:12 0 浏览量 回答数 0

回答

jQuery 1.8之后就不支持事件的切换,仅用来元素的隐藏与显示。不过,可以通过自己写代码实现。1.通过flag来控制执行执行哪个函数。比如执行fn1时,flag置为true;执行fn2时,flag置为false.2.通过给元素加减class来控制那个函数。和方法1类型。3.代码实现toggle,避免方法1和方法2中添加变量和操作dom,毕竟这两个都需要开销,原理类似于递归调用,代码如下。$('#btn').one('click', function(){ handler1();//第一次已经是click了,所以需要先执行一次handler1 setTimeout(fn1, 200);//防止后面定义的事件被触发。 }); function fn1(){ var obj = $(this); obj.one('click',function(){ handler2(); fn2(obj); }); } function fn2(obj){ obj.one('click',function(){ handler1(); fn1(obj); }); } function handler1(){ console.log('11'); } function handler2(){ console.log('22'); }当然为了使用方便,也可以封装成jQuery插件的模式。 $.fn.toggleEx = function(handler1, handler2){ $(this).one('click', function(){ handler1(); setTimeout(fn1, 200);//防止后面定义的事件被触发。 }); function fn1(){ var obj = $(this); obj.one('click',function(){ handler2(); fn2(obj); }); } function fn2(obj){ obj.one('click',function(){ handler1(); fn1(obj); }); } } //使用方式和之前一样。 $('#btn').toggleEx(function(){ console.log('11'); }, function(){ console.log('22');

小旋风柴进 2019-12-02 02:28:33 0 浏览量 回答数 0

回答

要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至seajsfunction styleOnload(node, callback) { // for IE6-9 and Opera if (node.attachEvent) { node.attachEvent('onload', callback); // NOTICE: // 1. "onload" will be fired in IE6-9 when the file is 404, but in // this situation, Opera does nothing, so fallback to timeout. // 2. "onerror" doesn't fire in any browsers! } } 很遗憾,这次在其他的浏览器中,想判断CSS是否加载完成就不是那么方便了,FF,webkit可以通过node.sheet.cssRules属性是否存在来判断是否加载完毕。而且需要使用setTimeout间隔事件轮询: 代码如下 复制代码 // 代码节选至seajs function poll(node, callback) { if (callback.isCalled) { return; } var isLoaded = false; if (/webkit/i.test(navigator.userAgent)) {//webkit if (node['sheet']) { isLoaded = true; } } // for Firefox else if (node['sheet']) { try { if (node['sheet'].cssRules) { isLoaded = true; } } catch (ex) { // NS_ERROR_DOM_SECURITY_ERR if (ex.code === 1000) { isLoaded = true; } } } if (isLoaded) { // give time to render. setTimeout(function() { callback(); }, 1); } else { setTimeout(function() { poll(node, callback); }, 1); } } setTimeout(function() { poll(node, callback); }, 0); SeaJS给出的完整的处理是这样的: 代码如下 复制代码 function styleOnload(node, callback) { // for IE6-9 and Opera if (node.attachEvent) { node.attachEvent('onload', callback); // NOTICE: // 1. "onload" will be fired in IE6-9 when the file is 404, but in // this situation, Opera does nothing, so fallback to timeout. // 2. "onerror" doesn't fire in any browsers! } // polling for Firefox, Chrome, Safari else { setTimeout(function() { poll(node, callback); }, 0); // for cache } } function poll(node, callback) { if (callback.isCalled) { return; } var isLoaded = false; if (/webkit/i.test(navigator.userAgent)) {//webkit if (node['sheet']) { isLoaded = true; } } // for Firefox else if (node['sheet']) { try { if (node['sheet'].cssRules) { isLoaded = true; } } catch (ex) { // NS_ERROR_DOM_SECURITY_ERR if (ex.code === 1000) { isLoaded = true; } } } if (isLoaded) { // give time to render. setTimeout(function() { callback(); }, 1); } else { setTimeout(function() { poll(node, callback); }, 1); } } // 我的动态创建LINK函数function createLink(cssURL,lnkId,charset,media){ var head = document.getElementsByTagName('head')[0], linkTag = null; if(!cssURL){ return false; } linkTag = document.createElement('link'); linkTag.setAttribute('id',(lnkId || 'dynamic-style')); linkTag.setAttribute('rel','stylesheet'); linkTag.setAttribute('charset',(charset || 'utf-8')); linkTag.setAttribute('media',(media||'all')); linkTag.setAttribute('type','text/css'); linkTag.href = cssURL; head.appendChild(linkTag); } function loadcss(){ var styleNode = createLink('/wp-content/themes/BlueNight/style.css'); styleOnload(styleNode,function(){ alert("loaded"); }); } 在看到seajs的代码的时候,我立刻想起了我看到Diego Perini的另一个解决方案: 代码如下 复制代码 /* Copyright (C) 2010 Diego Perini All rights reserved.* cssready.js - CSS loaded/ready state notification* Author: Diego Perini Version: 0.1 Created: 20100616 Release: 20101104* License: http://www.111cn.net * Download: http://javascript.nwbox.com/cssready/cssready.js*/ function cssReady(fn, link) { var d = document, t = d.createStyleSheet, r = t ? 'rules' : 'cssRules', s = t ? 'styleSheet' : 'sheet', l = d.getElementsByTagName('link'); // passed link or last link node link || (link = l[l.length - 1]); function check() { try { return link && link[s] && link[s][r] && link[s][r][0]; } catch(e) { return false; } } (function poll() { check() && setTimeout(fn, 0) || setTimeout(poll, 100); })(); } 其实,如果你读过jQuery的domready事件的判断的代码,原理也类似。也是通过setTimeout轮询的方式来判断DOM节点是否加载完毕。 还有,Fackbook则是通过在动态创建的CSS样式中包含一个固定的样式,例如#loadcssdom,loadcssdom就是一个高度为1px样式。然后动态创建一个DOM对象,添加这个loadcssdom样式。然后也是setTimeout轮询loadcssdo是否已经有1px的高度了。这个处理方式的解决方案,大家可以下《CSSP: Loading CSS with Javascript – and getting an onload callback.》 而《JavaScript Patterns》的作者Stoyan则在他的博客里,比较详细的说明了《When is a stylesheet really loaded?》。 看完了这些,你可能会感叹:汗,判断CSS是否加载完毕,目前还真不是那么容易!其实我这里算是一个抛砖引玉,因为开发中,除了动态加载CSS,我们还要动态加载JavaScript,动态加载HTML的操作,有空我也会写关于动态加载JavaScript的相关内容,不过在那之前,我建议你看看这些: 《ensure – Ensure JavaScripts/HTML/CSS are loaded on-demand when needed》,这个库是专门处理动态加载HTML,CSS,JavaScript的。就像作者介绍的那样: ensure is a tiny JavaScript library that provides a handy function ensure which allows you to load JavaScript, HTML, CSS on-demand, and then execute your code. ensure www.111cn.net ensures that the relevant JavaScript and HTML snippets are already in the browser DOM before executing your code that uses them. 《Tell CSS that JavaScript is available ASAP》 看完这个后,你可能就不会纠结:When you’re styling parts of a web page that will look and work differently depending on whether JavaScript is available or not。 好了,这次就说这么多了,希望对对大家的开发和学习有帮助!来源网络

元芳啊 2019-12-02 00:54:41 0 浏览量 回答数 0

问题

jquery dom操作性能

小旋风柴进 2019-12-01 19:34:10 823 浏览量 回答数 1

回答

显然你这里写的是错误的:componentDidMount : function(){ this.props.flag_form? $(this).slideDown(200):$(this).slideUp(200); },这里的 this 是什么? 这里的 this 指的是你 HeaderForm 这个组件对象,组件对象是 React 生成的,并不是真实的一个 Dom 节点,你不能用 jQuery 来操作他,没有用的。想要直接操作 Dom 的话,在 React 0.14 中你可以给 render 的 form 设置一个 ref , 然后再通过 this.refs.formNode (formNode 是你给 form 设置的 ref),这个对象才是那个 form 的真实 dom 节点,你可以用 jQuery 给他封装一下然后就可以调用 jQuery 的方法了 。如果你用的是 0.13 的话,还要加个 getdDOMNode() 这个函数才能拿到真实的 Dom 节点。

小旋风柴进 2019-12-02 02:24:35 0 浏览量 回答数 0

问题

dom4j 修改节点的原理是什么:报错

kun坤 2020-06-07 16:54:56 0 浏览量 回答数 1

回答

题主可能误解了data的用法, 题主可以试着看看jquery的源码中data的封装:data 很明显的表明$(element).data(); 是需要html标签中已经存在如这样的<div data-name="xxx"></div>,所以题主找不到比较正常。 一般操作的时候,都会在html标签中添加data-name="value",然后再通过jquery去修改 jquery的data方法并不会向attr属性一样,可以直接修改dom的属性。 $("div").attr("data-name","haha") 通过jquery源码可以得知,jquery把属性为data-*的html标签获取到,并取到data-*的value值,放在cache缓存里面,其实质改动的只是data数据而已。并不会修改dom属性。 <div data-name="value"> div's value </div> $("div").data("name"); // 得到值 value $("div").data("name","haha"); //改变data值,此时只是在cache里面改变而已,其实质上并没有修改data-name中的value。 // 此时仍然是 <div data-name="value"> div's value </div>, 但通过data获取的值就不是标签中的值了。 $("div").data("name"); //此时得到的值 是haha //包括之后移除了data-name $("div").removeAttr("data-name") // 结果为: [<div>​…​</div>​] //此时获取 $("div").data("name") //值依然存在 haha jQuery的data()方法只是作为数据的一种存取而已.并不修改Dom属性 如果想改变data-name中的值,建议直接用 $("div").attr("data-name","hahaha"); // <div data-name="hahaha"> div's value </div> 另外添加属性,不能通过data的方法,只能通过 $("div").attr("data-name1","value1"); //<div data-name1="value1" data-name="value"></div>

a123456678 2019-12-02 02:05:14 0 浏览量 回答数 0

回答

Zepto 对象 不能自定义事件 例如执行: $({}).bind('cust', function(){}); 结果: TypeError: Object has no method 'addEventListener' 解决办法是创建一个脱离文档流的节点作为事件对象: 例如: $('').bind('cust', function(){}); Zepto 的选择器表达式: [name=value] 中 value 必须用 双引号 " or 单引号 ' 括起来 例如执行:$('[data-userid=123123123]') 结果:Error: SyntaxError: DOM Exception 12 解决办法: $('[data-userid="123123123]"') or \$("[data-userid='123123123']") 2-1.zepto 的选择器没有办法选出 \$("div[name!='abc']") 的元素 2-2.zepto获取select元素的选中option不能用类似jq的方法$('option[selected]'),因为selected属性不是css的标准属性 应该使用$('option').not(function(){ return !this.selected }) 比如:jq:$this.find('option[selected]').attr('data-v') * 1 zepto:$this.find('option').not(function() {return !this.selected}).attr('data-v') * 1 但是获取有select中含有disabled属性的元素可以用 $this.find("option:not(:disabled)") 因为disabled是标准属性 参考网址:https://github.com/madrobby/zepto/issues/503 2-3、zepto在操作dom的selected和checked属性时尽量使用prop方法 Zepto 是根据标准浏览器写的,所以对于节点尺寸的方法只提供 width() 和 height(),省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight() Zepto.js: 由盒模型( box-sizing )决定 jQery: 忽略盒模型,始终返回内容区域的宽/高(不包含 padding 、 border )解决方式就是使用 .css('width') 而不是 .width() 。 3-1.边框三角形宽高的获取 假设用下面的 HTML 和 CSS 画了一个小三角形: <div class="caret" > </div > .caret { width: 0; height: 0; border-width: 0 20px 20px; border-color: transparent transparent blue; border-style: none dotted solid; } jQuery 使用 .width() 和 .css('width') 都返回 ,高度也一样; Zepto 使用 .width() 返回 ,使用 .css('width') 返回 0px 。 所以,这种场景,jQuery 使用 .outerWidth() / .outerHeight() ;Zepto 使用 .width() / .height() 。 3-2.offset() Zepto.js: 返回 top 、 left 、 width 、 height jQuery: 返回 width 、 height 3-3.隐藏元素 Zepto.js: 无法获取宽高; jQuery: 可以获取。 Zepto 的 each 方法只能遍历 数组,不能遍历 JSON 对象 Zepto 的 animate 方法参数说明 :详情点击-> zepto 中 animate 的用法 zepto 的 jsonp callback 函数名无法自定义 DOM 操作区别 jq 代码: (function($) { $(function() { var $list = $("<ul><li>jQuery 插入</li></ul>", { id: "insert-by-jquery" }); $list.appendTo($("body")); }); })(window.jQuery); jQuery 操作 ul 上的 id 不会被添加。 zepto 代码: Zepto(function($) { var $list = $("<ul><li>Zepto 插入</li></ul>", { id: "insert-by-zepto" }); $list.appendTo($("body")); }); Zepto 可以在 ul 上添加 id 。 事件触发区别 jq 代码: (function($) { $(function() { $script = $("<script />", { src: "http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js", id: "ui-jquery" }); $script.appendTo($("body")); $script.on("load", function() { console.log("jQ script loaded"); }); }); })(window.jQuery); 使用 jQuery 时 load 事件的处理函数 不会 执行 zepto 代码: Zepto(function($) { $script = $("<script />", { src: "http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js", id: "ui-zepto" }); $script.appendTo($("body")); $script.on("load", function() { console.log("zepto script loaded"); }); }); 使用 Zepto 时 load 事件的处理函数 会 执行。 zepto 阻止事件冒泡 zepto 的 slideUP 和 slidedown 事件到底部才能触发 document.addEventListener( "touchmove", function(event) { event.preventDefault(); }, false );

茶什i 2019-12-02 03:21:22 0 浏览量 回答数 0

问题

js中加入的新节点,某些功能失效

a123456678 2019-12-01 20:25:02 722 浏览量 回答数 1

回答

$ 我们经常使用向 $ 内传入一个字符串的方式来选择或生成 DOM 元素,但如果这个字符串是来自用户输入的话,那么这种方式就是有风险的。 先看一个 DEMO: http://jsbin.com/duwuzonife/1/edit?html,js,output $("<img src='' onerror='alert();'>"); 当用户输入的字符串是像这样的时,虽然这个 <img> 元素不会马上被插入到网页的 DOM 中,但这个 DOM 元素已经被创建了,并且暂存在内存里。而对于 <img> 元素,只要设置了它的 src 属性,浏览器就会马上请求 src 属性所指向的资源。我们也可以利用这个特性做图片的预加载。在上面的示例代码中,创建元素的同时,也设置了它的属性,包括 src 属性和 onerror 事件监听器,所以浏览器会马上请求图片资源,显然请求不到,随机触发 onerror 的回调函数,也就执行了 JavaScript 代码。 推荐阅读 $ 的官方文档: http://api.jquery.com/jQuery/ 类似的其他方法 .after() .append() .appendTo() .before() .html() .insertAfter() .insertBefore() .prepend() .prependTo() .replaceAll() .replaceWith() .unwrap() .wrap() .wrapAll() .wrapInner() .prepend() 以上这些方法不仅创建 DOM 元素,并且会马上插入到页面的 DOM 树中。如果使用 <script> 标签插入了内联 JS 会立即执行。 不安全的输入来源 document.URL * document.location.pathname * document.location.href * document.location.search * document.location.hash document.referrer * window.name document.cookie document 的大多数属性都可以通过全局的 window 对象访问到。加 * 的属性返回的时编码 (urlencode) 后的字符串,需要解码才可能造成威胁。 不安全的操作 把可以被用户编辑的字符串,用在以下场景中,都是有隐患的。总体来说,任何把字符串作为可执行的代码的操作,都是不安全的。 1.通过字符串创建函数 (1)eval (2)new Function (3)setTimeout/setInterval 2.跳转页面 location.replace/location.assign 修改 <script> 标签的 src 属性 修改事件监听器 总结 如果发生在用 jQuery 时被 DOM-XSS 攻击的情况,大多是因为忽视了两个东西: 1. 在给$传参数时,对参数来源的把控。 2. 用户的输入途径不只有表单,还有地址栏,还可以通过开发者工具直接修改 DOM ,或者直接在控制台执行 JS 代码。 答案来源网络,供参考,希望对您有帮助

问问小秘 2019-12-02 03:05:01 0 浏览量 回答数 0

问题

Java 处理 XML 的三种主流技术及介绍:报错

kun坤 2020-06-09 23:26:43 0 浏览量 回答数 1

回答

ajax提交到edit.php,edit.php中若保存成功,用header("Location:update.php");返回。。 其实我想你是想用ajax完成,只要一个edit文件,提交之后,edit接收到表单,保存成功,把保存的信息比如转成json返回,游览器接收到再去完成一些dom操作。 like $.ajax({ type:'post', url:'edit.php', success:function(data){ $(result).html(JSON.parse(data)); } }) 全选复制放进笔记// 摘自自己去年年初写的页面TAT大牛请轻喷 <?php include("common/conn.php");//链接数据库 $type=htmlspecialchars($_POST['type']); $uid=$_SESSION['uid']; $content=htmlspecialchars($_POST['content']); $content=mysql_escape_string($content); $create_time=date("Y-m-d H:i:s"); $checkstate='1'; $query="INSERT INTO f_post(type,uid,content,create_time,checkstate) VALUES('$type','$uid','$content','$create_time','$checkstate')"; $queryId="SELECT P.`id` FROM `f_post` P WHERE `uid`=".$uid." ORDER BY P.`id` DESC LIMIT 1"; if($mysqli->query($query)===TRUE){ if($pids=$mysqli->query($queryId)) { while($id=$pids->fetch_object()) { $pid=$id->id; } } $result = array( 'id'=>$pid, 'type'=>$type, 'uid'=>$uid, 'content'=>$content, 'create_time'=>date("H:i:s Y-m-d",strtotime($create_time)), 'editable'=>true ); echo json_encode($result); } else exit();

小旋风柴进 2019-12-02 02:19:17 0 浏览量 回答数 0

回答

认真看了一遍题目。。。才发现我理解错了,你说的生html结果。html默认会生成、、这三个标签,如果要在三个标签内加元素,就可以像下面那样操作var fragment = document.createDocumentFragment();//创建dom内容文段(不知道术语是不是这样的。。。) var div= document.createElement("div");//创建div节点 var p = document.createElement("p");//创建p节点 div.className = "xc";//添加类名,其它属性同理 p.innerText = "innerText"; div.appendChild(p);//将p放进div里面,变成子元素 fragment.appendChild(div);//div加入dom内容文段 document.body.appendChild(fragment);//显示到boy中

爵霸 2019-12-02 02:52:38 0 浏览量 回答数 0

回答

1、jsonp必须遵循一个固定的格式。即请求的URL的search中必须存在一个jsonpcallback=functionName;响应的格式为functionName(/ json data /); 原理就是利用script不受同源策略限制的特点。2、在server返回数据之后,尽量删掉这个script。因为页面中有n多个jsonp,就会有n多个生成的script标签。造成dom臃肿。并且别人也可以通过观察html来指导你jsonp的请求细节。3、是看重写的mimeType是不是和server返回的一样。如果一样就没必要重写mimeType了。除此之外还用了setRequestHeader、overriderMimeType、abort等方法。4、看代码流程即可。我写了一个简单点的例子 (function (global) { // 防止低版本ie里,undefined被重写 var undefined = void(0); // 定义命名空间 var namespace = {}; // 默认的参数列表 var defaultOptions = { // ajax请求的路径是什么 url: '', // 往服务器发送的数据 data: '', // 使用什么http方法 type: 'get', // ajax请求方式,同步还是异步。默认为异步 async: true, // 成功时执行的函数 success: function (data) { }, // 失败时执行的函数 error: function (errInfo) { }, // 自定义请求首部列表 header: {}, // 重写的mimeType overrideMimeType: '', // 是否走缓存 cache: false, // 超时毫秒数。默认为0 表示不执行超时逻辑 timeout: 0, // 是否格式化参数为uri string processData: true, // 请求的mime类型 默认为表单提交 contentType: 'application/x-www-form-urlencoded', // 返回的数据格式 text|json dataType: 'text' }; /** * CORE * @param {Object} options 用户输入的参数 * @throw TypeError */ var ajax = function (options) { // 判断参数是否为对象,如果不是则抛出类型错误 if (!tool.isObject(options)) { throw new TypeError('参数类型错误'); } // 合并用户输入的参数列表和默认的参数列表 返回一个全新的参数列表对象 var userOptions = tool.extend(defaultOptions, options); // ajax第一步:获取ajax对象 var xhr = tool.getXHR(); // 1、如果是get系 需要把data拼接到url后面 if (/^(get|delete|head)$/img.test(userOptions.type)) { var data = tool.encodeToURIString(userOptions.data); userOptions.url = tool.hasSearch(userOptions.url, data); // 因为get系不需要传send参数,所以设置为null userOptions.data = null; } // 2、是否走缓存,如果不走缓存则在url后面加一个随机数来防止缓存 if (userOptions.cache === false) { // 因为search是有固定格式的 key=value 如果只写一个value是不合法的,所以必须构造一个key,而且这个key不能和已有的key重复 var random = '_=' + (Math.random() * 0xffffff).toFixed(0); userOptions.url = tool.hasSearch(userOptions.url, random); } // ajax操作第二步 xhr.open(userOptions.type, userOptions.url, userOptions.async); // 2.1 设置自定义请求首部信息 if (userOptions.header && tool.isObject(userOptions.header)) { tool.eachObject(userOptions.header, function (key, value) { xhr.setRequestHeader(key, value); }) } // 2.2 设置content-type http里表现mimeType的字段就是content-type // 设置请求的mimeType if (userOptions.contentType && tool.isString(userOptions.contentType)) { xhr.setRequestHeader('content-type', userOptions.contentType); } // 2.3 设置重写的mime类型 // 设置响应的mimeType if (userOptions.overrideMimeType && tool.isString(userOptions.overrideMimeType)) { xhr.overrideMimeType(userOptions.overrideMimeType); } // 2.4 判断是否执行超时逻辑 if (tool.isNumber(userOptions.timeout) && userOptions.timeout > 0) { xhr.timeout = userOptions.timeout; // 标准浏览器 if ('ontimeout' in xhr) { xhr.ontimeout = function () { userOptions.error('timeout'); } } else { // 低版本ie setTimeout(function () { // http的事务是否还没有完成 if (xhr.readyState !== 4) { // 强制终止http事务 xhr.abort(); } }, xhr.timeout); } } // 2.5 是否需要处理给服务器发送的数据,判断processData是否为true // 当给服务器发送的数据为二进制或者formData的时候,不需要处理这个数据 // 要把processData设置为false if (/^(post|put)$/igm.test(userOptions.type) && userOptions.processData === true) { userOptions.data = tool.encodeToURIString(userOptions.data); } // ajax第三步:接收响应 xhr.onreadystatechange = function () { // http的事务是否完成 if (xhr.readyState === 4) { // 获取响应主体 var responseText = xhr.responseText; // 判断状态码是否成功 if (/^2\d{2}$/.test(xhr.status)) { // 判断是否需要把响应主体格式化为json对象 if (userOptions.dataType === 'json') { // 因为不合法的json字符串无法转换为json对象,会出异常 try { responseText = tool.JSONParse(responseText); } catch (ex) { userOptions.error(ex); return; } } userOptions.success(responseText); // R如果响应码是错误的类型 } else if (/^(4|5)\d{2}$/.test(xhr.status)) { // 直接执行error userOptions.error(xhr.status); } } }; // ajax第四步:发送 xhr.send(userOptions.data); }; /** * 利用闭包,实现获取数据类型 * @param {string} type 数据类型 * @returns {Function} */ var getType = function (type) { return function (obj) { // 为什么要用Object.prototype.toString来判断类型? return Object.prototype.toString.call(obj) === '[object ' + type + ']'; } }; var tool = { /** * 利用惰性函数,实现获取ajax对象的方法 */ getXHR: (function () { var list = [function () { return new XMLHttpRequest; }, function () { return new ActiveXObject('Microsoft.XMLHTTP'); }, function () { return new ActiveXObject("Msxml2.XMLHTTP"); }, function () { return new ActiveXObject("Msxml3.XMLHTTP"); }]; var len = list.length; var xhr = null; while (len--) { try { list[len](); xhr = list[len]; break; } catch (ex) { continue; } } if (xhr !== null) { return xhr; } throw new Error('当前浏览器不支持此方法'); })(), /** * 合并多个对象 * @returns {{}} 合并后的对象 */ extend: function () { // 因为参数长度不固定,所以把参数列表转成数组 // var params = [].slice.call(arguments, 0); var voidObj = {}; this.each(arguments, function (item) { // item为每一个参数对象 tool.eachObject(item, function (key, value) { voidObj[key] = value; }); }); return voidObj; }, /** * 循环帮助函数,利用惰性函数 */ each: (function () { if ([].forEach) { return function (list, callback, context) { [].forEach.call(list, callback, context); } } return function (list, callback, context) { for (var i = 0, j = list.length; i < j; i++) { callback.call(context, list[i], i, list); } } })(), /** * 循环对象 * @param {Object} obj 要循环的对象 * @param {Function} callback 回调函数 * @param {Object|undefined} context 回调函数里头的上下文对象 */ eachObject: function (obj, callback, context) { for (var n in obj) { if (!obj.hasOwnProperty(n)) continue; callback.call(context, n, obj[n]); } }, /** * 给tool动态添加判断数据类型的方法 */ init: function () { this.each(['Object', 'Function', 'Array', 'String', 'Number'], function (item) { tool['is' + item] = getType(item); }) }, /** * 把一个对象格式化为uri string * @param {*} data 需要格式化的数据 * @return {string} 格式化之后得到的uri string */ encodeToURIString: function (data) { if (this.isString(data)) return data; if (!this.isObject(data)) return ''; var arr = []; this.eachObject(data, function (key, value) { arr.push(encodeURIComponent(key) + '=' + encodeURIComponent(value)); }); return arr.join('&'); }, /** * 往url后面拼接参数的方法 * @param {string} url url * @param {string} padString 要拼接的参数 * @returns {string} 拼接之后的url */ hasSearch: function (url, padString) { if (!padString) return url; // 如果有问号,说明url里已经有参数了,因为参数和参数之间用&来分隔 /*if (/\?/.test(url)) { return url + '&' + padString; } else { return url + '?' + padString; }*/ return url + (/\?/.test(url) ? '&' : '?') + padString; }, /** * 把json字符串格式化为json对象 * @param {string} jsonString json字符串 * @return {Object} json对象 */ JSONParse: function (jsonString) { if (window.JSON) { return JSON.parse(jsonString) } return eval('(' + jsonString + ')'); } }; tool.init(); // 把ajax方法放入命名空间中 namespace.ajax = ajax; tool.each(['get', 'post'], function (item) { /** * 动态添加get和post方法 * @param {string} url 请求的url * @param {Object} data 往服务器发送的数据 * @param {Function} callback 成功的回调函数 * @param {string} dataType 数据格式 */ namespace[item] = function (url, data, callback, dataType) { ajax({ url: url, type: item, data: data, success: callback, dataType: dataType }); } }); // 先把全局里已经存在的x先放到一边 var globalX = global.x; /** * 解决全局变量名冲突 * @param {string|undefined} symbol 更改的全局变量名 * @returns {Object} */ namespace.noConflict = function (symbol) { if (symbol && tool.isString(symbol)) { window[symbol] = namespace; } global!==undefined&&(window.x = globalX); return namespace; }; // 暴露到全局环境中 global.x = namespace; })(this); 用法和jquery的一样。不过我暴露的是x变量,不是$.

小旋风柴进 2019-12-02 02:28:33 0 浏览量 回答数 0

问题

jQuery的`append`操作不能即时渲染

小旋风柴进 2019-12-01 19:29:20 1308 浏览量 回答数 1

回答

1.代码规范 其中width="300px" height="300px"这种写法是不符合w3c规范的,用 The W3C Markup Validation Service 检测会报错。属性width、height的值是个非负数,直接写数字即可,如width="300" 2.width是img公认的(非自定义的)特性,会以属性的形式添加到DOM对象中,所以可以通过dom.attr的形式去操作属性值。 imgDom.width = value;//此处的value是个number类型的非负值,若value为其他值时,转化为0console.log(typeof imgDom.width)//为number类型 document.getElementById("iImg").width=600; //方式①,结果为 width="600"; 赋值成功 document.getElementById("iImg").width="600px";//结果为 width="0" 赋值失败 因为width是img的属性,所以当然也可以用下面这种形式赋值: document.getElementById("iImg").setAttribute("width", "600");//方式② 3.方式①②是通过改变img的属性值来改变图片的大小,也可以通过改变css样式来改变图片的大小,当两者同时改变,谁又占上风呢? document.getElementById("iImg").style.width='600px';//方式③,这个是带px的,图片width渲染成功document.getElementById("iImg").width=900;//只改变属性值,但不影响图片的大小 综上,如果只是改变图片显示的大小,可以使用上述三种方式来达到目的,当有css样式来控制图片大小的时候,属性值的改变不影响图片的实际渲染尺寸: document.getElementById("iImg").width=600;//方式①,通过改变属性值来改变图片大小document.getElementById("iImg").setAttribute("width", "600");//方式②,通过改变属性值来改变图片大小document.getElementById("iImg").style.width='600px';//方式③,通过css样式来改变图片大小 补充:方式①和方式②的区别当属性为自定义属性时,dom.attr的方式失效,如: SegmentFault document.getElementById("test").width; //undefineddocument.getElementById("test").width = 1200; //无效document.getElementById("div").setAttribute("width", "1200");//只能通过这种方式改变属性width的值,但不管怎么改变,都不会影响div的宽度值,因为width只是div的一个自定义属性

杨冬芳 2019-12-02 02:55:08 0 浏览量 回答数 0

回答

考量以下演示代码:let parent = document.body let child = document.createElement('div') child.addEventListener('click', clickHandler) parent.appendChild(child) 当我们移除 child 对象后: parent.removeChild(child)此时对于 DOM Tree 来说 child 当然是不存在的了,但是内存中依然有对于它的引用,也就是 child 本身,只不过它没有在 DOM Tree 中而已。因此,clickHandler 也同样驻留在内存中。当然了移除事件回调也不一定非要用 removeEventListener,像上例那种情况使用最简单的办法可以 child = null 即可。以上说的是最基本的情况,现实中其实要考虑很多因素。比如你说你做的是一个 SPA,那么假设你用了某种框架吧。现在的 SPA 基本上都会告诉你:如果你要做 DOM 操作,不要直接写在 Controller(或其他)地方,而是要写在组件(比如 Directive)里Basically,这么做的原因是框架的组件机制都会维护自身的生命周期,如果你要处理类似本问题中的“善后”工作,你可以利用这些生命周期来实现。框架会保障一些基本的东西,比如说判断 DOM Element 是否还存在于 DOM Tree 中,或者是否还有引用等等(一般来说,组件化有一个很大的好处就是 Isolation,也就是避免到处都是引用,因为人工判断和跟踪会很累很烦很容易出错)。老的浏览器存在很多 Bug,类似的“善后”工作可能要考虑的更细致和周全一些。

杨冬芳 2019-12-02 02:54:35 0 浏览量 回答数 0

回答

只要您的选择器实际上在工作,我就不会发现检查数组长度的代码有问题。那应该做你想要的。有很多方法可以使您的代码更简洁,更易读。这是一个清理过的版本,其中包含有关我清理过的内容的注释。 var album_text = []; $("input[name='album_text[]']").each(function() { var value = $(this).val(); if (value) { album_text.push(value); } }); if (album_text.length === 0) { $('#error_message').html("Error"); } else { //send data } 关于您正在做的事情和我所做的更改的一些说明。 $(this)始终是有效的jQuery对象,因此没有理由进行检查if ($(this))。它可能不是在它里面的任何DOM对象,但你可以检查与$(this).length如果你需要,但在这里是没有必要的,因为.each()如果没有项目,因此循环不会跑$(this)你的内.each()循环将永远是什么。 在同一函数中多次使用$(this)效率低下。最好一次将它放入一个局部变量,然后从该局部变量中使用它。 建议使用[]而不是初始化数组new Array()。 if (value)当值预计将是一个字符串将两者保护value == null,value == undefined而且value == ""这样你就不必做if (value && (value != ""))。您可以执行以下操作:if (value)检查所有三个空条件。 if (album_text.length === 0) 会告诉您该数组是否为空,只要它是有效的,已初始化的数组(就在此处)。 您要如何使用此选择器$("input[name='album_text[]']")?

保持可爱mmm 2020-02-08 11:18:44 0 浏览量 回答数 0

回答

一、接口的默认方法 Java 8允许我们给接口添加一个非抽象的方法实现,只需要使用 default关键字即可,这个特征又叫做扩展方法,示例如下: interface Formula { double calculate(int a); default double sqrt(int a) { return Math.sqrt(a); } } Formula接口在拥有calculate方法之外同时还定义了sqrt方法,实现了Formula接口的子类只需要实现一个calculate方法,默认方法sqrt将在子类上可以直接使用。 Formula formula = new Formula() { @Override public double calculate(int a) { return sqrt(a * 100); } }; formula.calculate(100); // 100.0 formula.sqrt(16); // 4.0 文中的formula被实现为一个匿名类的实例,该代码非常容易理解,6行代码实现了计算 sqrt(a * 100)。在下一节中,我们将会看到实现单方法接口的更简单的做法。 译者注: 在Java中只有单继承,如果要让一个类赋予新的特性,通常是使用接口来实现,在C++中支持多继承,允许一个子类同时具有多个父类的接口与功能,在其他语言中,让一个类同时具有其他的可复用代码的方法叫做mixin。新的Java 8 的这个特新在编译器实现的角度上来说更加接近Scala的trait。 在C#中也有名为扩展方法的概念,允许给已存在的类型扩展方法,和Java 8的这个在语义上有差别。 二、Lambda 表达式 首先看看在老版本的Java中是如何排列字符串的: List<String> names = Arrays.asList("peter", "anna", "mike", "xenia"); Collections.sort(names, new Comparator<String>() { @Override public int compare(String a, String b) { return b.compareTo(a); } }); 只需要给静态方法 Collections.sort 传入一个List对象以及一个比较器来按指定顺序排列。通常做法都是创建一个匿名的比较器对象然后将其传递给sort方法。 在Java 8 中你就没必要使用这种传统的匿名对象的方式了,Java 8提供了更简洁的语法,lambda表达式: Collections.sort(names, (String a, String b) -> { return b.compareTo(a); }); 看到了吧,代码变得更段且更具有可读性,但是实际上还可以写得更短: Collections.sort(names, (String a, String b) -> b.compareTo(a)); 对于函数体只有一行代码的,你可以去掉大括号{}以及return关键字,但是你还可以写得更短点: Collections.sort(names, (a, b) -> b.compareTo(a)); Java编译器可以自动推导出参数类型,所以你可以不用再写一次类型。接下来我们看看lambda表达式还能作出什么更方便的东西来 三、函数式接口 Lambda表达式是如何在java的类型系统中表示的呢?每一个lambda表达式都对应一个类型,通常是接口类型。而“函数式接口”是指仅仅只包含一个抽象方法的接口,每一个该类型的lambda表达式都会被匹配到这个抽象方法。因为 默认方法 不算抽象方法,所以你也可以给你的函数式接口添加默认方法。 我们可以将lambda表达式当作任意只包含一个抽象方法的接口类型,确保你的接口一定达到这个要求,你只需要给你的接口添加 @FunctionalInterface 注解,编译器如果发现你标注了这个注解的接口有多于一个抽象方法的时候会报错的。 @FunctionalInterface interface Converter<F, T> { T convert(F from); } Converter<String, Integer> converter = (from) -> Integer.valueOf(from); Integer converted = converter.convert("123"); System.out.println(converted); // 123 需要注意如果@FunctionalInterface如果没有指定,上面的代码也是对的。 译者注 将lambda表达式映射到一个单方法的接口上,这种做法在Java 8之前就有别的语言实现,比如Rhino JavaScript解释器,如果一个函数参数接收一个单方法的接口而你传递的是一个function,Rhino 解释器会自动做一个单接口的实例到function的适配器,典型的应用场景有 org.w3c.dom.events.EventTarget 的addEventListener 第二个参数 EventListener。 四、方法与构造函数引用 前一节中的代码还可以通过静态方法引用来表示: Converter<String, Integer> converter = Integer::valueOf; Integer converted = converter.convert("123"); System.out.println(converted); // 123 Java 8 允许你使用 :: 关键字来传递方法或者构造函数引用,上面的代码展示了如何引用一个静态方法,我们也可以引用一个对象的方法: converter = something::startsWith; String converted = converter.convert("Java"); System.out.println(converted); // "J" 接下来看看构造函数是如何使用::关键字来引用的,首先我们定义一个包含多个构造函数的简单类: class Person { String firstName; String lastName; Person() {} Person(String firstName, String lastName) { this.firstName = firstName; this.lastName = lastName; } } 接下来我们指定一个用来创建Person对象的对象工厂接口: interface PersonFactory<P extends Person> { P create(String firstName, String lastName); } 这里我们使用构造函数引用来将他们关联起来,而不是实现一个完整的工厂: PersonFactory<Person> personFactory = Person::new; Person person = personFactory.create("Peter", "Parker"); 我们只需要使用 Person::new 来获取Person类构造函数的引用,Java编译器会自动根据PersonFactory.create方法的签名来选择合适的构造函数。 五、Lambda 作用域 在lambda表达式中访问外层作用域和老版本的匿名对象中的方式很相似。你可以直接访问标记了final的外层局部变量,或者实例的字段以及静态变量。 六、访问局部变量 我们可以直接在lambda表达式中访问外层的局部变量: final int num = 1; Converter<Integer, String> stringConverter = (from) -> String.valueOf(from + num); stringConverter.convert(2); // 3 但是和匿名对象不同的是,这里的变量num可以不用声明为final,该代码同样正确: int num = 1; Converter<Integer, String> stringConverter = (from) -> String.valueOf(from + num); stringConverter.convert(2); // 3 不过这里的num必须不可被后面的代码修改(即隐性的具有final的语义),例如下面的就无法编译: int num = 1; Converter<Integer, String> stringConverter = (from) -> String.valueOf(from + num); num = 3; 在lambda表达式中试图修改num同样是不允许的。 七、访问对象字段与静态变量 和本地变量不同的是,lambda内部对于实例的字段以及静态变量是即可读又可写。该行为和匿名对象是一致的: class Lambda4 { static int outerStaticNum; int outerNum; void testScopes() { Converter<Integer, String> stringConverter1 = (from) -> { outerNum = 23; return String.valueOf(from); }; Converter<Integer, String> stringConverter2 = (from) -> { outerStaticNum = 72; return String.valueOf(from); }; } } 八、访问接口的默认方法 还记得第一节中的formula例子么,接口Formula定义了一个默认方法sqrt可以直接被formula的实例包括匿名对象访问到,但是在lambda表达式中这个是不行的。 Lambda表达式中是无法访问到默认方法的,以下代码将无法编译: Formula formula = (a) -> sqrt( a * 100); Built-in Functional Interfaces JDK 1.8 API包含了很多内建的函数式接口,在老Java中常用到的比如Comparator或者Runnable接口,这些接口都增加了@FunctionalInterface注解以便能用在lambda上。 Java 8 API同样还提供了很多全新的函数式接口来让工作更加方便,有一些接口是来自Google Guava库里的,即便你对这些很熟悉了,还是有必要看看这些是如何扩展到lambda上使用的。 Predicate接口 Predicate 接口只有一个参数,返回boolean类型。该接口包含多种默认方法来将Predicate组合成其他复杂的逻辑(比如:与,或,非): Predicate<String> predicate = (s) -> s.length() > 0; predicate.test("foo"); // true predicate.negate().test("foo"); // false Predicate<Boolean> nonNull = Objects::nonNull; Predicate<Boolean> isNull = Objects::isNull; Predicate<String> isEmpty = String::isEmpty; Predicate<String> isNotEmpty = isEmpty.negate(); Function 接口 Function 接口有一个参数并且返回一个结果,并附带了一些可以和其他函数组合的默认方法(compose, andThen): Function<String, Integer> toInteger = Integer::valueOf; Function<String, String> backToString = toInteger.andThen(String::valueOf); backToString.apply("123"); // "123" Supplier 接口 Supplier 接口返回一个任意范型的值,和Function接口不同的是该接口没有任何参数 Supplier personSupplier = Person::new; personSupplier.get(); // new Person Consumer 接口 Consumer 接口表示执行在单个参数上的操作。 Consumer greeter = (p) -> System.out.println("Hello, " + p.firstName); greeter.accept(new Person("Luke", "Skywalker")); Comparator 接口 Comparator 是老Java中的经典接口, Java 8在此之上添加了多种默认方法: Comparator comparator = (p1, p2) -> p1.firstName.compareTo(p2.firstName); Person p1 = new Person("John", "Doe"); Person p2 = new Person("Alice", "Wonderland"); comparator.compare(p1, p2); // > 0 comparator.reversed().compare(p1, p2); // < 0 Optional 接口 Optional 不是函数是接口,这是个用来防止NullPointerException异常的辅助类型,这是下一届中将要用到的重要概念,现在先简单的看看这个接口能干什么: Optional 被定义为一个简单的容器,其值可能是null或者不是null。在Java 8之前一般某个函数应该返回非空对象但是偶尔却可能返回了null,而在Java 8中,不推荐你返回null而是返回Optional。 Optional optional = Optional.of("bam"); optional.isPresent(); // true optional.get(); // "bam" optional.orElse("fallback"); // "bam" optional.ifPresent((s) -> System.out.println(s.charAt(0))); // "b" Stream 接口 java.util.Stream 表示能应用在一组元素上一次执行的操作序列。Stream 操作分为中间操作或者最终操作两种,最终操作返回一特定类型的计算结果,而中间操作返回Stream本身,这样你就可以将多个操作依次串起来。Stream 的创建需要指定一个数据源,比如 java.util.Collection的子类,List或者Set, Map不支持。Stream的操作可以串行执行或者并行执行。 首先看看Stream是怎么用,首先创建实例代码的用到的数据List: List stringCollection = new ArrayList<>(); stringCollection.add("ddd2"); stringCollection.add("aaa2"); stringCollection.add("bbb1"); stringCollection.add("aaa1"); stringCollection.add("bbb3"); stringCollection.add("ccc"); stringCollection.add("bbb2"); stringCollection.add("ddd1"); Java 8扩展了集合类,可以通过 Collection.stream() 或者 Collection.parallelStream() 来创建一个Stream。下面几节将详细解释常用的Stream操作: Filter 过滤 过滤通过一个predicate接口来过滤并只保留符合条件的元素,该操作属于中间操作,所以我们可以在过滤后的结果来应用其他Stream操作(比如forEach)。forEach需要一个函数来对过滤后的元素依次执行。forEach是一个最终操作,所以我们不能在forEach之后来执行其他Stream操作。 stringCollection .stream() .filter((s) -> s.startsWith("a")) .forEach(System.out::println); // "aaa2", "aaa1" Sort 排序 排序是一个中间操作,返回的是排序好后的Stream。如果你不指定一个自定义的Comparator则会使用默认排序。 stringCollection .stream() .sorted() .filter((s) -> s.startsWith("a")) .forEach(System.out::println); // "aaa1", "aaa2" 需要注意的是,排序只创建了一个排列好后的Stream,而不会影响原有的数据源,排序之后原数据stringCollection是不会被修改的。 System.out.println(stringCollection); // ddd2, aaa2, bbb1, aaa1, bbb3, ccc, bbb2, ddd1 Map 映射 中间操作map会将元素根据指定的Function接口来依次将元素转成另外的对象,下面的示例展示了将字符串转换为大写字符串。你也可以通过map来讲对象转换成其他类型,map返回的Stream类型是根据你map传递进去的函数的返回值决定的。 stringCollection .stream() .map(String::toUpperCase) .sorted((a, b) -> b.compareTo(a)) .forEach(System.out::println); // "DDD2", "DDD1", "CCC", "BBB3", "BBB2", "AAA2", "AAA1" Match 匹配 Stream提供了多种匹配操作,允许检测指定的Predicate是否匹配整个Stream。所有的匹配操作都是最终操作,并返回一个boolean类型的值。 boolean anyStartsWithA = stringCollection .stream() .anyMatch((s) -> s.startsWith("a")); System.out.println(anyStartsWithA); // true boolean allStartsWithA = stringCollection .stream() .allMatch((s) -> s.startsWith("a")); System.out.println(allStartsWithA); // false boolean noneStartsWithZ = stringCollection .stream() .noneMatch((s) -> s.startsWith("z")); System.out.println(noneStartsWithZ); // true Count 计数 计数是一个最终操作,返回Stream中元素的个数,返回值类型是long。 long startsWithB = stringCollection .stream() .filter((s) -> s.startsWith("b")) .count(); System.out.println(startsWithB); // 3 Reduce 规约 这是一个最终操作,允许通过指定的函数来讲stream中的多个元素规约为一个元素,规越后的结果是通过Optional接口表示的: Optional reduced = stringCollection .stream() .sorted() .reduce((s1, s2) -> s1 + "#" + s2); reduced.ifPresent(System.out::println); // "aaa1#aaa2#bbb1#bbb2#bbb3#ccc#ddd1#ddd2" 并行Streams 前面提到过Stream有串行和并行两种,串行Stream上的操作是在一个线程中依次完成,而并行Stream则是在多个线程上同时执行。 下面的例子展示了是如何通过并行Stream来提升性能: 首先我们创建一个没有重复元素的大表 int max = 1000000; List values = new ArrayList<>(max); for (int i = 0; i < max; i++) { UUID uuid = UUID.randomUUID(); values.add(uuid.toString()); } 然后我们计算一下排序这个Stream要耗时多久, 串行排序: long t0 = System.nanoTime(); long count = values.stream().sorted().count(); System.out.println(count); long t1 = System.nanoTime(); long millis = TimeUnit.NANOSECONDS.toMillis(t1 - t0); System.out.println(String.format("sequential sort took: %d ms", millis)); // 串行耗时: 899 ms 并行排序: long t0 = System.nanoTime(); long count = values.parallelStream().sorted().count(); System.out.println(count); long t1 = System.nanoTime(); long millis = TimeUnit.NANOSECONDS.toMillis(t1 - t0); System.out.println(String.format("parallel sort took: %d ms", millis)); // 并行排序耗时: 472 ms 上面两个代码几乎是一样的,但是并行版的快了50%之多,唯一需要做的改动就是将stream()改为parallelStream()。 Map 前面提到过,Map类型不支持stream,不过Map提供了一些新的有用的方法来处理一些日常任务。 Map<Integer, String> map = new HashMap<>(); for (int i = 0; i < 10; i++) { map.putIfAbsent(i, "val" + i); } map.forEach((id, val) -> System.out.println(val)); 以上代码很容易理解, putIfAbsent 不需要我们做额外的存在性检查,而forEach则接收一个Consumer接口来对map里的每一个键值对进行操作。 下面的例子展示了map上的其他有用的函数: map.computeIfPresent(3, (num, val) -> val + num); map.get(3); // val33 map.computeIfPresent(9, (num, val) -> null); map.containsKey(9); // false map.computeIfAbsent(23, num -> "val" + num); map.containsKey(23); // true map.computeIfAbsent(3, num -> "bam"); map.get(3); // val33 接下来展示如何在Map里删除一个键值全都匹配的项 map.remove(3, "val3"); map.get(3); // val33 map.remove(3, "val33"); map.get(3); // null 另外一个有用的方法 map.getOrDefault(42, "not found"); // not found 对Map的元素做合并也变得很容易了: map.merge(9, "val9", (value, newValue) -> value.concat(newValue)); map.get(9); // val9 map.merge(9, "concat", (value, newValue) -> value.concat(newValue)); map.get(9); // val9concat Merge做的事情是如果键名不存在则插入,否则则对原键对应的值做合并操作并重新插入到map中。 九、Date API Java 8 在包java.time下包含了一组全新的时间日期API。新的日期API和开源的Joda-Time库差不多,但又不完全一样,下面的例子展示了这组新API里最重要的一些部分: Clock 时钟 Clock类提供了访问当前日期和时间的方法,Clock是时区敏感的,可以用来取代 System.currentTimeMillis() 来获取当前的微秒数。某一个特定的时间点也可以使用Instant类来表示,Instant类也可以用来创建老的java.util.Date对象。 Clock clock = Clock.systemDefaultZone(); long millis = clock.millis(); Instant instant = clock.instant(); Date legacyDate = Date.from(instant); // legacy java.util.Date Timezones 时区 在新API中时区使用ZoneId来表示。时区可以很方便的使用静态方法of来获取到。 时区定义了到UTS时间的时间差,在Instant时间点对象到本地日期对象之间转换的时候是极其重要的。 System.out.println(ZoneId.getAvailableZoneIds()); // prints all available timezone ids ZoneId zone1 = ZoneId.of("Europe/Berlin"); ZoneId zone2 = ZoneId.of("Brazil/East"); System.out.println(zone1.getRules()); System.out.println(zone2.getRules()); // ZoneRules[currentStandardOffset=+01:00] // ZoneRules[currentStandardOffset=-03:00] LocalTime 本地时间 LocalTime 定义了一个没有时区信息的时间,例如 晚上10点,或者 17:30:15。下面的例子使用前面代码创建的时区创建了两个本地时间。之后比较时间并以小时和分钟为单位计算两个时间的时间差: LocalTime now1 = LocalTime.now(zone1); LocalTime now2 = LocalTime.now(zone2); System.out.println(now1.isBefore(now2)); // false long hoursBetween = ChronoUnit.HOURS.between(now1, now2); long minutesBetween = ChronoUnit.MINUTES.between(now1, now2); System.out.println(hoursBetween); // -3 System.out.println(minutesBetween); // -239 LocalTime 提供了多种工厂方法来简化对象的创建,包括解析时间字符串。 LocalTime late = LocalTime.of(23, 59, 59); System.out.println(late); // 23:59:59 DateTimeFormatter germanFormatter = DateTimeFormatter .ofLocalizedTime(FormatStyle.SHORT) .withLocale(Locale.GERMAN); LocalTime leetTime = LocalTime.parse("13:37", germanFormatter); System.out.println(leetTime); // 13:37 LocalDate 本地日期 LocalDate 表示了一个确切的日期,比如 2014-03-11。该对象值是不可变的,用起来和LocalTime基本一致。下面的例子展示了如何给Date对象加减天/月/年。另外要注意的是这些对象是不可变的,操作返回的总是一个新实例。 LocalDate today = LocalDate.now(); LocalDate tomorrow = today.plus(1, ChronoUnit.DAYS); LocalDate yesterday = tomorrow.minusDays(2); LocalDate independenceDay = LocalDate.of(2014, Month.JULY, 4); DayOfWeek dayOfWeek = independenceDay.getDayOfWeek(); System.out.println(dayOfWeek); // FRIDAY 从字符串解析一个LocalDate类型和解析LocalTime一样简单: DateTimeFormatter germanFormatter = DateTimeFormatter .ofLocalizedDate(FormatStyle.MEDIUM) .withLocale(Locale.GERMAN); LocalDate xmas = LocalDate.parse("24.12.2014", germanFormatter); System.out.println(xmas); // 2014-12-24 LocalDateTime 本地日期时间 LocalDateTime 同时表示了时间和日期,相当于前两节内容合并到一个对象上了。LocalDateTime和LocalTime还有LocalDate一样,都是不可变的。LocalDateTime提供了一些能访问具体字段的方法。 LocalDateTime sylvester = LocalDateTime.of(2014, Month.DECEMBER, 31, 23, 59, 59); DayOfWeek dayOfWeek = sylvester.getDayOfWeek(); System.out.println(dayOfWeek); // WEDNESDAY Month month = sylvester.getMonth(); System.out.println(month); // DECEMBER long minuteOfDay = sylvester.getLong(ChronoField.MINUTE_OF_DAY); System.out.println(minuteOfDay); // 1439 只要附加上时区信息,就可以将其转换为一个时间点Instant对象,Instant时间点对象可以很容易的转换为老式的java.util.Date。 Instant instant = sylvester .atZone(ZoneId.systemDefault()) .toInstant(); Date legacyDate = Date.from(instant); System.out.println(legacyDate); // Wed Dec 31 23:59:59 CET 2014 格式化LocalDateTime和格式化时间和日期一样的,除了使用预定义好的格式外,我们也可以自己定义格式: DateTimeFormatter formatter = DateTimeFormatter .ofPattern("MMM dd, yyyy - HH:mm"); LocalDateTime parsed = LocalDateTime.parse("Nov 03, 2014 - 07:13", formatter); String string = formatter.format(parsed); System.out.println(string); // Nov 03, 2014 - 07:13 和java.text.NumberFormat不一样的是新版的DateTimeFormatter是不可变的,所以它是线程安全的。 关于时间日期格式的详细信息:http://download.java.net/jdk8/docs/api/java/time/format/DateTimeFormatter.html 十、Annotation 注解 在Java 8中支持多重注解了,先看个例子来理解一下是什么意思。 首先定义一个包装类Hints注解用来放置一组具体的Hint注解: @interface Hints { Hint[] value(); } @Repeatable(Hints.class) @interface Hint { String value(); } Java 8允许我们把同一个类型的注解使用多次,只需要给该注解标注一下@Repeatable即可。 例 1: 使用包装类当容器来存多个注解(老方法) @Hints({@Hint("hint1"), @Hint("hint2")}) class Person {} 例 2:使用多重注解(新方法) @Hint("hint1") @Hint("hint2") class Person {} 第二个例子里java编译器会隐性的帮你定义好@Hints注解,了解这一点有助于你用反射来获取这些信息: Hint hint = Person.class.getAnnotation(Hint.class); System.out.println(hint); // null Hints hints1 = Person.class.getAnnotation(Hints.class); System.out.println(hints1.value().length); // 2 Hint[] hints2 = Person.class.getAnnotationsByType(Hint.class); System.out.println(hints2.length); // 2 即便我们没有在Person类上定义@Hints注解,我们还是可以通过 getAnnotation(Hints.class) 来获取 @Hints注解,更加方便的方法是使用 getAnnotationsByType 可以直接获取到所有的@Hint注解。 另外Java 8的注解还增加到两种新的target上了: @Target({ElementType.TYPE_PARAMETER, ElementType.TYPE_USE}) @interface MyAnnotation {}

日你dady哟 2019-12-02 03:08:13 0 浏览量 回答数 0

问题

12个非常实用的JavaScript小技巧

技术小菜鸟 2019-12-01 21:37:52 3620 浏览量 回答数 1

回答

在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素(currentTarget属性)、事件的类型(type属性)以及其他与特定事件相关的信息。例如,鼠标操作导致的事件 对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息。利用event.type属性可以将多个事件的处理逻辑写在一个事件处理函数中: function handler(event) { switch(event.type) { case: "click": //operation; case: "mouseover": //operation; } } 比较常用的还有,event.preventDefault(),用来阻止事件的默认行为,比如阻止标签click事件后的默认跳转。

小旋风柴进 2019-12-02 02:27:09 0 浏览量 回答数 0

回答

首先在p里面嵌套div是不正确的做法。你可以试试 $('p').length//2因为浏览器会自动进行纠错如下(Chrome): <p> aaaaa </p> <div>bbbbb</div> ccccc <div>ddddd</div> eeeee <p></p> 另外aaaaa,eeeee建议用span或者p包含起来。直接的文字节点不符合语义的做法。而且在进行DOM处理时会增加一些工作,这里文字左右是不可见的换行符。最重要的是,jQuery中的选择器是不会选择文本节点的,只能使用contents+filter了,使用contents操作有性能有影响,慎用。 将p改成div时可以这样做: <div id="el"> aaaaa <div>bbbbb</div> ccccc <div>ddddd</div> eeeee </div>​ 全选复制放进笔记var $rs = $('#el').contents().filter(function() { return this.nodeType === 3; }); var text = $rs.text(); $('#el').after(text);​//注意文字周围有换行符,需要再处理一下。

小旋风柴进 2019-12-02 02:18:01 0 浏览量 回答数 0

问题

在 berserkJS 中无缝使用 Wind.js:报错

kun坤 2020-06-07 14:00:40 0 浏览量 回答数 1

回答

//请写出输出内容 async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0) async1(); new Promise(function(resolve) { console.log('promise1'); resolve(); }).then(function() { console.log('promise2'); }); console.log('script end'); /* script start async1 start async2 promise1 script end async1 end promise2 setTimeout */ 这道题主要考察的是事件循环中函数执行顺序的问题,其中包括async ,await,setTimeout,Promise函数。下面来说一下本题中涉及到的知识点。 任务队列 首先我们需要明白以下几件事情: - JS分为同步任务和异步任务 - 同步任务都在主线程上执行,形成一个执行栈 - 主线程之外,事件触发线程管理着一个任务队列,只要异步任务有了运行结果,就在任务队列之中放置一个事件。 - 一旦执行栈中的所有同步任务执行完毕(此时JS引擎空闲),系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行。 根据规范,事件循环是通过任务队列的机制来进行协调的。一个 Event Loop 中,可以有一个或者多个任务队列(task queue),一个任务队列便是一系列有序任务(task)的集合;每个任务都有一个任务源(task source),源自同一个任务源的 task 必须放到同一个任务队列,从不同源来的则被添加到不同队列。 setTimeout/Promise 等API便是任务源,而进入任务队列的是他们指定的具体执行任务。 宏任务 (macro)task(又称之为宏任务),可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)。 浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行,会在一个(macro)task执行结束后,在下一个(macro)task 执行开始前,对页面进行重新渲染,流程如下: (macro)task->渲染->(macro)task->... (macro)task主要包含:script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境) 微任务 microtask(又称为微任务),可以理解是在当前 task 执行结束后立即执行的任务。也就是说,在当前task任务后,下一个task之前,在渲染之前。 所以它的响应速度相比setTimeout(setTimeout是task)会更快,因为无需等渲染。也就是说,在某一个macrotask执行完后,就会将在它执行期间产生的所有microtask都执行完毕(在渲染前)。 microtask主要包含:Promise.then、MutaionObserver、process.nextTick(Node.js 环境) 运行机制 在事件循环中,每进行一次循环操作称为 tick,每一次 tick 的任务处理模型是比较复杂的,但关键步骤如下: 执行一个宏任务(栈中没有就从事件队列中获取)执行过程中如果遇到微任务,就将它添加到微任务的任务队列中宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染- 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取) 回到本题 首先,事件循环从宏任务(macrotask)队列开始,这个时候,宏任务队列中,只有一个script(整体代码)任务;当遇到任务源(task source)时,则会先分发任务到对应的任务队列中去。然后我们看到首先定义了两个async函数,接着往下看,然后遇到了 console 语句,直接输出 script start。输出之后,script 任务继续往下执行,遇到 setTimeout,其作为一个宏任务源,则会先将其任务分发到对应的队列中script 任务继续往下执行,执行了async1()函数,前面讲过async函数中在await之前的代码是立即执行的,所以会立即输出async1 start。遇到了await时,会将await后面的表达式执行一遍,所以就紧接着输出async2,然后将await后面的代码也就是console.log('async1 end')加入到microtask中的Promise队列中,接着跳出async1函数来执行后面的代码。script任务继续往下执行,遇到Promise实例。由于Promise中的函数是立即执行的,而后续的 .then 则会被分发到 microtask 的 Promise 队列中去。所以会先输出 promise1,然后执行 resolve,将 promise2 分配到对应队列。 script任务继续往下执行,最后只有一句输出了 script end,至此,全局任务就执行完毕了。 根据上述,每次执行完一个宏任务之后,会去检查是否存在 Microtasks;如果有,则执行 Microtasks 直至清空 Microtask Queue。 因而在script任务执行完毕之后,开始查找清空微任务队列。此时,微任务中, Promise 队列有的两个任务async1 end和promise2,因此按先后顺序输出 async1 end,promise2。当所有的 Microtasks 执行完毕之后,表示第一轮的循环就结束了。 第二轮循环依旧从宏任务队列开始。此时宏任务中只有一个 setTimeout,取出直接输出即可,至此整个流程结束。

九旬 2020-05-24 22:19:57 0 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站