JavaScript 全局污染 回调函数

目录

变量名与函数名重复

全局污染

回调函数 

预处理器

变量（$）

父选择器（&）

插值语句（#{变量}）

混合指令

继承（extend）

占位符选择器（%）

---

 

变量名与函数名重复

1. 正常：函数整体提升，变量（声明）在提升
2. 函数名称与变量名称相同时，函数提升后，变量不在提升

全局污染，不同位置的同名全局变量，值 会互相影响

全局作用域，script标签下，默认就是全局作用域 

全局污染

解决方案：；（function（）{}）（）//匿名函数自调用，自调用前加分号

回调函数 

函数传递函数

1. 带名字的普通函数，传递函数名
2. 不带名字的匿名函数，传递匿名函数整体
3. 将函数类型的值，作为参数传递，被传递的就是回调函数，回调函数自动调用

function 函数名（el）{

        函数体

        el（）//调用传入的回调函数

} 

函数名（callback  name）

函数名（function（）{……}）

预处理器

sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

变量（$）

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样

父选择器（&）

1. 嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器
2. 用 & 代表嵌套规则外层的父选择器

插值语句（#{变量}）

通过 #{} 插值语句可以在选择器或属性名中使用变量

$abc: 10px;
$nav: nav;
$list: list;
// .nav-item
.#{$nav}-item {
  color: red($color: #000000);
}
.#{$list}-item {
  color: aqua;
}

混合指令

1. @mixin 混入指令名称，创建混合指令名称，自定义名称不能以数字开头
2. @include 混合指令名称，传参数

继承（extend）

某个元素使用另一个元素的全部样式，

注意：继承不可以选择

占位符选择器（%）

1. 继承选择器，样式被继承
2. 不会编译到css文件中