懒加载
使用场景瀑布流:
延迟加载, 当页面需要加载大量图片时,优先加载可视窗口的图片
懒加载原理
<img src="url地址">
每个img都有src属性,当src属性发送请求时,就会下载数据,
如果src属性开始没有url地址,该img标签遍不会发送请求,
开始不要让所有的img标签都存储url,
将url保存在一个自定义属性中,
等img标签进入加载条件时,在将url赋值给src
加载条件
if (图片.top < 可视窗口的高度 + 滚动条的高度){
oImg[i].src = oImg[i].data_url
}
js作用
js只能实现浏览器页面的交互行为,
如操作dom,bom,发送ajax等
1.不能对文件进行读写
2.也不能直接操作windows api
nodejs是什么
Node.js 是一个开源和跨平台的 JavaScript 运行时环境.
Node.js = js的运行环境(谷歌v8js引擎) + 巨量的新API
js的运行环境(谷歌v8js引擎)作用,
以前js必须运行在浏览器,因为浏览器中有js引擎,而node.js将js引擎抽离出了浏览器,
所以js现在可以运行在服务器端
巨量的新API作用,可以做以前干不了的事,(对文件进行读写,可以直接操作windows api,可以搭建服务器,写后端代码)
为什么使用node.js作为后端服务器?
优势:
1.前端人员不必在重新学习一门后端语言
2.服务器运行效率极高
node的操作
双击exe安装node->证明node安装成功->打开cmd(window+r)
node -v 如果显示版本号,则安装成功
注意事项:路径的切换,必须保证编译的文件路径和用户路径相同
在js文件所在目录处,键入cmd
运行js文件的命令
node 文件名
模块化
没有html文件了,那么js文件和js文件之间怎么导入和导出.
必须研究js文件如何导入导出。
nodejs淡化了类的概念,通过模块替换了类.
模块:本质其实就是js文件,通过模块模拟类.
可以通过模块定义模块对象
模块的分类:
1.系统内置模块:http,fs
2.自定义模块:你写的js文件
3.第三方模块:通过npm下载的模块
nodejs模块的导入和导出:CommonJS
模块的导入:
const 模块对象 = require(模块文件);
导出:
方法1:
exports.属性1 = 值1;
exports.属性2 = 值2;
方法2:
module.exports = {
属性1:值1,
属性2:值2,
...
}
注意事项:1.被导入的模块的属性或方法,必须对外暴露,才能直接使用
2.平级目录文件导入,也得加./
3.CommonJS规则导入时,可以省略js后缀
4.node_modules文件夹包含的文件夹,可以直接通过文件夹名,导入里面的index.js模块
公有和私有的问题:
再类的设计中,有些属性往往是不愿被外部可以直接操作的,这种属性应设置为私有。
npm
node package manger 包管理工具
对于模块的下载
npm install 模块名称