读者福利
========
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
由于篇幅过长,就不展示所有面试题了,想要完整面试题目的朋友(另有小编自己整理的2024大厂高频面试题及答案附赠)
_forms.scss
_navigation.scss
layout/文件夹也会被称为partials/, 具体使用情况取决于个人喜好。
3. Components文件夹
对于小型组件来说,有一个components/文件夹来存放。相对于layout/的宏观(定义全局线框结构),components/更专注于局部组件。该文件夹包含各类具体模块,基本上是所有的独立模块,比如一个滑块、一个加载块、一个部件……由于整个网站或应用程序主要由微型模块构成,components/中往往有大量文件。
_media.scss
_carousel.scss
_thumbnails.scss
components/文件夹也会被称为modules/, 具体使用情况取决于个人喜好。
4.Pages文件夹
如果页面有特定的样式,最好将该样式文件放进pages/文件夹并用页面名字。例如,主页通常具有独特的样式,因此可以在pages/下包含一个_home.scss以实现需求。
_home.scss
_contact.scss
取决于各自的开发流程,这些文件可以使用你自己的前缀命名,避免在最终样式表中与他人的样式表发生合并。一切完全取决于你。
5.Themes文件夹
在大型网站和应用程序中,往往有多种主题。虽有多种方式管理这些主题,但是我个人更喜欢把它们存放在themes/文件夹中。
_theme.scss
_admin.scss
这个文件夹与项目的具体实现有密切关系,并且在许多项目中是并不存在的。
6.Utils文件夹
utils/文件夹包含了整个项目中使用到的Sass辅助工具,这里存放着每一个全局变量、函数、混合宏和占位符。该文件夹的经验法则是,编译后这里不应该输出任何CSS,单纯的只是一些Sass辅助工具。
_variables.scss
_mixins.scss
_functions.scss
_placeholders.scss (通常命名为_helpers.scss)
utils/文件夹也会被称为helpers/,sass-helpers/或者sass-utils/,具体使用情况取决于个人喜好。
7.Vendors文件夹
最后但并非最终的是,大多数的项目都有一个vendors/文件夹,用来存放所有外部库和框架(Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered……)的CSS文件。将这些文件放在同一个文件中是一个很好的说明方式:“嘿,这些不是我的代码,无关我的责任。”
_normalize.scss
_jquery-ui.scss
_select2.scss
如果你重写了任何库或框架的部分,建议设置第8个文件夹vendors-extensions/来存放,并使用相同的名字命名。
Main文件
主文件(通常写作main.scss)应该是整个代码库中唯一开头不用下划线命名的Sass文件。除 @import和注释外,该文件不应该包含任何其他代码。文件应该按照存在的位置顺序依次被引用进来:
vendors/
utils/
base/
layout/
components/
pages/
themes/
为了保持可读性,主文件应遵守如下准则:
-
每个 @import引用一个文件;
-
从相同文件夹中引入的文件之间不用空行;
-
从不同文件夹中引入的文件之间用空行分隔;
-
忽略文件扩展名和下划线前缀。
@import ‘vendors/bootstrap’;
@import ‘vendors/jquery-ui’;
@import ‘utils/variables’;
@import ‘utils/functions’;
@import ‘utils/mixins’;
@import ‘utils/placeholders’;
@import ‘base/reset’;
@import ‘base/typography’;
@import ‘layout/navigation’;
@import ‘layout/grid’;
@import ‘layout/header’;
@import ‘layout/footer’;
@import ‘layout/sidebar’;
@import ‘layout/forms’;
@import ‘components/buttons’;
@import ‘components/carousel’;
@import ‘components/cover’;
@import ‘components/dropdown’;
@import ‘pages/home’;
@import ‘pages/contact’;
@import ‘themes/theme’;
@import ‘themes/admin’;
这里还有另一种引入的有效方式。令人高兴的是,它使文件更具有可读性;令人沮丧的是,更新时会有些麻烦。不管怎么说,由你决定哪一个最好,这没有任何问题。 对于这种方式,主要文件应遵守如下准则:
-
每个文件夹只使用一个@import
-
每个@import之后都断行
-
每个文件占一行
-
新的文件跟在最后的文件夹后面
-
文件扩展名都可以省略@import
‘vendors/bootstrap’,
‘vendors/jquery-ui’;
@import
‘utils/variables’,
‘utils/functions’,
‘utils/mixins’,
‘utils/placeholders’;
@import
‘base/reset’,
‘base/typography’;
@import
‘layout/navigation’,
‘layout/grid’,
‘layout/header’,
‘layout/footer’,
JavaScript
-
js的基本类型有哪些?引用类型有哪些?null和undefined的区别。
-
如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)
-
Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?
-
JS常见的dom操作api
-
解释一下事件冒泡和事件捕获
-
事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?
-
对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?
-
this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?
-
call,apply,bind
-
显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链
-
创建对象的多种方式
-
实现继承的多种方式和优缺点
-
new 一个对象具体做了什么
-
手写Ajax,XMLHttpRequest
-
变量提升
-
举例说明一个匿名函数的典型用例
-
指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?
-
attribute和property的区别
-
document load和document DOMContentLoaded两个事件的区别
-
JS代码调试