前端的javascript、框架中一些区别，知道多少呢？

最新推荐文章于 2024-06-14 09:24:52 发布

zhoutingxixi

最新推荐文章于 2024-06-14 09:24:52 发布

阅读量158

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_43844696/article/details/106877812

版权

var、let、const的区别

1、var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2、let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3、const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
4、同一个变量只能使用一种方式声明，不然会报错

在JavaScript中，null 和 undefined 几乎相等

在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等

null和undefined的区别

console.log(null==undefined);    //true  因为两者都默认转换成了false
console.log(typeof undefined);    //"undefined"  
console.log(typeof null);       //"object"  
console.log(null===undefined);    //false   "==="表示绝对相等，null和undefined类型是不一样的，所以输出“false”

null 和 undefined 基本同义，二者又有什么区别呢？

null表示没有对象，即该处不应该有值

1）作为函数的参数，表示该函数的参数不是对象

2）作为对象原型链的终点

undefined表示缺少值，即此处应该有值，但没有定义

1）定义了形参，没有传实参，显示undefined

2）对象属性名不存在时，显示undefined

3）函数没有写返回值，即没有写return，拿到的是undefined

4）写了return，但没有赋值，拿到的是undefined

null和undefined转换成number数据类型

null 默认转成 0

undefined 默认转成 NaN

0.1 + 0.2 !== 0.3 为 True
assets与static的区别
相同点：资源在html中使用，都是可以的。

不同点：使用assets下面的资源，在js中使用的话，路径要经过webpack中file-loader编译，路径不能直接写。

assets中的文件会经过webpack打包，重新编译，推荐该方式。而static中的文件，不会经过编译。项目在经过打包后，会生成dist文件夹，static中的文件只是复制一遍而已。简单来说，static中建议放一些外部第三方，自己的放到assets，别人的放到static中。

注意：如果把图片放在assets与static中，html页面可以使用；但在动态绑定中，assets路径的图片会加载失败，因为webpack使用的是commenJS规范，必须使用require才可以
vue-router与location.href的用法区别

①vue-router使用pushState进行路由更新，静态跳转，页面不会重新加载；location.href会触发浏览器，页面重新加载一次

②vue-router使用diff算法，实现按需加载，减少dom操作

③vue-router是路由跳转或同一个页面跳转；location.href是不同页面间跳转；

④vue-router是异步加载this.$nextTick(()=>{获取url})；location.href是同步加载

单页面多页面区别

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：

1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小

2，前后端分离

3，页面效果会比较炫酷（比如切换页面内容时的专场动画）

单页面缺点：

1，不利于seo

2，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

3，初次加载时耗时多

4，页面复杂度提高很多

location.href和vue-router跳转有什么区别

①vue-router使用pushState进行路由更新，静态跳转，页面不会重新加载；location.href会触发浏览器，页面重新加载一次

②vue-router使用diff算法，实现按需加载，减少dom操作

③vue-router是路由跳转或同一个页面跳转；location.href是不同页面间跳转；

④vue-router是异步加载this.$nextTick(()=>{获取url})；location.href是同步加载

vue 中v-once指令

只渲染元素和组件一次, 这可以用优化更新性能. 执行一次性地插值，当数据改变时，插值处的内容不会更新。

import和require的区别

node编程中最重要的思想就是模块化，import和require都是被模块化所使用。

遵循规范

require 是 AMD规范引入方式
import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法

调用时间

require是运行时调用，所以require理论上可以运用在代码的任何地方
import是编译时调用，所以必须放在文件开头

本质

require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量
import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5 再执行，import语法会被转码为require

懒加载（图片）

懒加载的原理
原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如 data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

Vue实现自定义指令 Vue.directive

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p v-color="red">我是自定义指令</p> red绑定到data里面的变量
    <p v-color="'blue'">我是自定义指令</p> 也支持字符串
  </div>
<script src='vue.js'></script>
<script>
  // 注册一个全局的自定义指令
  Vue.directive('color', {
   inserted: function (el,binding) {
    console.log(el,binding)
    el.style.color = binding.value
   }
  })
  new Vue({
    el:'#app',
    data:{
      red:'red'
    }
  })
</script>
</body>
</html>

zhoutingxixi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的javascript、框架中一些区别，知道多少呢？

var、let、const的区别 1、var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。2、let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。3、const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。4、同一个变量只能使用一种方式声明，不然会报错在JavaScript中，null 和 undefined 几乎相等在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等..
复制链接

扫一扫