扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
lastScrollY=-0; // 定义变量最后一个 滚动的Y
创新互联从2013年创立,先为定结等服务建站,定结等地企业,进行企业商务咨询服务。为定结企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
function backtop() { // 定义定时器的回调函数backtop
diffY=document.body.scrollTop; // body 的scrollTop也就是当前滚动的长度为diffY
percent=.1*(diffY-lastScrollY); // 定义变量percent 为 diffY - lastScrollY 乘0.1
// 上面的意思为 body 的滚动高度 减去定义的高度 的十分之一 赋值给 percent变量
if(percent0) {
percent=Math.ceil(percent);
} else {
percent=Math.floor(percent);
}
// 如果计算出来的值是大于0的 就上取整 否则就下取整 (如果不懂可以百度下这两个函数)
//document.all.toolTipLayer2.style.pixelTop+=percent;
// 然后给toolTipLayer2这个元素的 pixelTop属性。加上percent (因为定时器是每1毫秒执行
//一次所以说是不停的加上percent)
lastScrollY=lastScrollY+percent;
// lastScrollY 的值变为 lastScrollY和percent之和。
// 其实这段代码的含义就是 让一个元素不停的滚动, 因为lastScrollY每次都会成为之前
// 的lastScrollY和percent之和。 所以diffY 减去 lastScrollY 乘以0.1 的值就会越来越小
// 直到他们的值 小于0 后 被下取整后成为0 就不再滚动了。 也就是一个从快到慢的滚动过程
}
window.setInterval("backtop()",1);
看了题目,无力吐槽。
出题目的纯属刁难。
题1:
变量i纯属垃圾变量,while优化为:
while((j-=3)5){}
出题的干啥吃的。。。
题2:
统计字符串长度,考验的是基本上不会用到的转义"\02",这种写法我是第一次见,"\t"、"\x02"、"\u0002"这种写法还好,容易识别,"\02"TM纯属刁难,"\77"和"\78"的长度分别多少?
题3:
已知:true==1成立,true!=2、true2成立。if(2){console.log(true)}else{console.log(false)}控制台输出?
不知道出题的在除了出题目,还在什么场景直接写过if(abc)这种晦涩难懂的代码
React Hook 对于React来说无疑是一个伟大的特性,它将React从类组件推向了函数组件,从而让人们对于JavaScript的理解不再去可以理解晦涩的JS中的类,以及难以琢磨的this。在《你不知道的JavaScript》上卷中,作者就对JavaScript中的类,继承,面向对象做了一定的解释,总的来说就是,在JavaScript中生搬硬套用面向对象,得不偿失,很容易造成学习和理解负担。
在React16之前没有Hook的时候,必须在类组件去维护组件状态,因此必须理解JS中this的工作机制,并且在给元素绑定事件的时候总是需要绑定this。在组件之间复用状态逻辑比较困难,官方提供的 render props 和 高阶组件 确实很好用,但是整个用起来感觉很重,具体关于对类组件的吐槽可以参考React官网 Hook简介 这部分内容。
当使用React Hook去写React应用后,会发现再也不想用类组件了。。。
官方是这么介绍Hook的: Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
在React中提供了以下几种Hook
示例:
将useState这个钩子从react中导入,在函数组件Login中利用解构赋值的方式声明两个常量 num , setNum 作为 useState(0) 的返回值,useState钩子返回一个数组,第一个参数是我们声明的 state变量 ,第二个参数是一个 方法 ,用来手动改变第一个参数。
语法: const [num, setNum] = useState(0)
useState接受参数为基本类型如数字字符串等,也可以是引用类型对象数组等。用来作为初始值。
关于 useState返回值的第二个参数
示例:
官网这么说:如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount , componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
useEffect接收一个 函数 为第一个参数。
关于useEffect 这个Hook,它的形式有以下几种:
说了这么多那到底什么是 副作用 ?
React官网是这样解释的:数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。不管你知不知道这些操作,或是“副作用”这个名字,应该都在组件中使用过它们。
也就是说,当函数在运行的过程中对外部环境造成影响,或者与外部环境发生交互。比如操作DOM,发起请求,设置订阅这种,都属于副作用。同时有些副作用需要清除,比如订阅解绑,定时器延时器清除,有些不需要清除,比如数据获取,操作DOM。
那什么样的函数没有副作用呢?纯函数是不会有副作用的。
在使用useEffect hook的时候可以使用多个Effect分离关注点:
举一个场景来说下:弹窗场景。在父组件中点击按钮打开弹窗,在弹窗内部点击关闭按钮关闭弹窗。
此时控制弹窗打开与关闭的只能是一个状态isOpen,此时这个isOpen状态就需要在字符组件中共享。
使用isOpen控制弹窗的显示与隐藏,在父组件中调用setIsOpen方法,打开弹窗,在弹窗组件中使用useContext共享的父组件中的方法setIsOpen关闭弹窗。
注:父子组件一般不会存在一个文件中,需要将popContext导出再在子组件中导入使用。
官网这样解释: useState 的替代方案。它接收一个形如 (state, action) = newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法。(如果你熟悉 Redux 的话,就已经知道它如何工作了。)
示例:
useReducer第一个参数是一个reducer函数,第二个参数是初始化状态,在reducer函数中根据不同的type对state进行不同的处理。类似于redux中的reducer。
useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数( initialValue )。返回的 ref 对象在组件的整个生命周期内保持不变。
这个看来有两种用法:
第一种就是命令式操作DOM元素
第二种是关于其另外一个特性变更 .current 属性不会引发组件重新渲染
使用 myRef.count 来统计组件渲染次数。每一次组件重新渲染的时候,都将返回同一个 myRef 对象,并且, myRef 对象发生变化时,并不会导致组件渲染,这样的特性可以用来处理一些特殊场景下的需求。
当自定义一个myRef对象时,每次组件重新渲染都将返回一个新的对象。
这两个Hook可以用来做优化,比如以下例子,有name和age两个状态,子组件只需要在name发生变化时重新渲染,而在age发生变化时不需要重新渲染。
示例:
useMemo第一个参数接收一个函数第二个参数接收一个数组 useMemo(()=fn, []) ,数组里面是依赖,只有数组里面的依赖发生变化,函数才会执行。
useCallback(fn, deps) 相当于 useMemo(() = fn, deps) 。
React 官方也在极力推动Hook的发展,并且近期也有了React准备重写文档,更新后的文档针对Hook的内容肯定会更多,而且Vue在3.0版本出来后也使用了类似于React Hook的机制Composition API,这也是一个趋势。
最近在用webpack4+react16+ts4做自己的一个移动端小博客,功能正在完善中,主要是想学习使用一下React技术栈,期间发现React Hook确实非常好用,因此做一些记录。
博客 github 地址:
线上地址: (开发中)
avaScript和Java是两种不一样的语言,但是它们之间存在联系。
背景方面
Javascript(1995年,Netscape公司雇佣了程序员Brendan Eich开发这种网页脚本语言)最初名字叫做Mocha,1995年9月改为LiveScript。12月,Netscape公司与Sun公司(Java语言的发明者和所有者)达成协议,后者允许将这种语言叫做JavaScript。这样一来,Netscape公司可以借助Java语言的声势,而Sun公司则将自己的影响力扩展到了浏览器。使用Java语言开发网络应用程序,JavaScript可以像胶水一样,将各个部分连接起来。当然,后来的历史是Java语言的浏览器插件(applet)失败了,JavaScript反而发扬光大。
另: ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。在日常场合,这两个词是可以互换的。
语法方面
JavaScript的基本语法和对象体系,是模仿Java而设计的。但是,JavaScript没有采用Java的静态类型。正是因为JavaScript与Java有很大的相似性,所以这门语言才从一开始的LiveScript改名为JavaScript。基本上,JavaScript这个名字的原意是“很像Java的脚本语言”。
在JavaScript语言中,函数是一种独立的数据类型,以及采用基于原型对象(prototype)的继承链。这是它与Java语法最大的两点区别。JavaScript语法要比Java自由得多。数据结构部分则借鉴Java语言,包括将值分成原始值和对象两大类。
编译方面
另外,Java语言需要编译,而JavaScript语言则是运行时由解释器直接执行。
结语
总之,JavaScript的原始设计目标是一种小型的、简单的动态语言,与Java有足够的相似性,使得使用者(尤其是Java程序员)可以快速上手。
什么破书,讲东西那么拗口。
以上的答案是原始答案,一年过去了,为当时年轻的自己买单来了。
请各位看清楚,问题问的是:javascript(js)的代码和代码块,最佳答案里描述的,script标签是html的一个闭合标签,而不是什么js的代码块。好,吐槽结束,我来一个一个回答题主的问题。
怎么理解,js代码是语句的系列:这句话是要解释什么是js代码,那它说,这个js代码是什么呢?是“语句的系列“,怎么理解“语句的系列”呢,首先,语句指的是什么?当然指的是js语句。比如说一个js声明语句:
var a;
再比如说一个js赋值语句:
a = 0;
再比如说一个js计算语句:
a = a + 1;
理解了语句,然后我们来看一下语句的系列。当然指的就是这些语句写在一起,比如把上边的语句写在一起:
var a;
a = 0;
a = a + 1;
那么上面这些就是语句的系列。这也就是js语句了。
"语句是通过代码块的形式进行组合",再举例说明。
是啊,你要先知道什么是代码块,才能理解上面这句话。这句话是说,语句的组织形式。怎么把之前我们理解的js语句整合起来呢。比如说,我要实现一个累加器,每次点击页面上的一个按钮,我就在计数上加1。那么我就应该这么做:
var buttonClickedTimes = 0;
buttonClickedTimes = buttonClickedTimes + 1;
可是这样的代码,这两行是要一起运行么?显然不是的,每次当点击按钮的时候,应该只运行第二句,第一句应该只在页面初始化加载的时候执行一次,否则,每次点击按钮都把变量buttonClickedTimes 赋值为0.这样点击以后变量的值也总会是1。不能实现累加。
所以:这个代码应该这样写:
//初始化时运行一次
var buttonClickedTimes = 0;
//绑定事件到按钮元素
document.getElementById('buttonId').onclick = function(e) {
buttonClickedTimes += 1;
console.log(buttonClickedTimes);
}
这样我们看到,代码是不是就分成了两部分,每个部分,都有他们运行的时机。广义的说,这两个部分都可以叫做代码块。狭义来说,第二部分用大括号包起来的部分,是一个很典型代码块。这段代码只有当用户点击了页面上一个id为buttonId的按钮时,才会执行。那么理解了什么是代码块,我们也就能理解了“语句以代码块的形式进行组合”是什么意思了,对吧。
最后还是要说一声,这本教材很不好,用拗口的定义打消了那么多人写代码的乐趣。这是我比较反对的。给自己补坑完成。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流