前端开发大纲&命名规范等

阳光穿透心脏的1/2处 2022-06-06 05:39 223阅读 0赞

前端开发面试知识点大纲：

HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。

JavaScript： 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

其他： HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯

--------------------

**• 什么是编程规范？**  
• 在当前软件行业迅猛的发展下，软件逐渐走向大型化  
• 在这种软件走向大型化的形势下，一个软件需要众多的人参与  
• 这样我们就不得不建立相关约束来管理项目开发  
**• 编程规范的作用**  
• 提高代码的可读性  
• 降低代码错误率  
• 提高代码的整合效率和重用性  
• 为后期的维护提供更高的遍历  
**规范分类：**  
• 命名规范：html命名、图片命名、脚本命名  
• 文件存放位置规范  
• CSS书写规范：class与id的命名规范、css命名规范  
• html代码书写规范：head区域、链接、表格、缓存、浏览器兼容  
• javascript书写及使用规范  
• 注释规范：注释编写要求和规范  
• 开发测试及其使用工具规范：WebStorm、hbuilder、dreamwaver  
**规范的具体介绍**

> **HTML-命名规范介绍**  
> \* HTML命名规则：\*  
> • 统一用小写的字母、数字和下划线的组合（不得包含空格和特殊字符）  
> • 文件名条件：方便理解和易于查找  
> *页面文件类型*  
> • htm、html、asp、aspx、jsp、php等  
> *页面文件名命名规则*  
> • 首页统一取名为：index或者home，一般默认都是用index为首页命名  
> • 其他子页面统一用英文翻译或者中文拼音取名，但是不建议英文和中文拼音混合使用  
> 注意：优先使用英文，如果英文单词比较长，则可以选择用拼音或者用简写

--------------------

> **图片-命名规范介绍**  
> 图片命名规则  
> • 图片的名称为头尾两部分，用下划线隔开  
> • 图片的头部表示此图片的大类（如：广告、标志、菜单、按钮等等）  
> 大类常规命名  
> • 放在页面首部的广告、装饰图等长方形大图取名：banner  
> • 标志性图片取名：log  
> • 有链接的图片取名：button  
> • 没有链接的标题图片取名：title  
> • 装饰用的照片取名：pic  
> • 在页面上连续出现、性质相同的栏目图片取名：menu

--------------------

> **js脚本-命名规范介绍**  
> • 自定义js文件模块：模块.描述.js格式，如：check.js、login.js、regist.js、pop.js  
> • 公用文件模块：commom.js或者basic.js  
> • 外部资源模块：Jquery.min.js、Jquery.js

--------------------

> **文件存放位置规范**  
> 文件存放目录结构  
> • js：存放编写的js文件  
> • css：存放编写的css文件  
> • image：存放需要使用的图片文件  
> • flash：存放需要使用的flash文件  
> • media：存放需要使用的多媒体文件，包括视频和音频  
> • library：存放一些库文件，包括js库和css库

--------------------

> **class和id-命名规范介绍**  
> class和id区别  
> • class的值在整个page页面中可以重复  
> • id的值在整个page页面中不可以重复  
> • class一般在css中使用，id一般在js中使用（css也可以用id来选择，不建议）  
> 命名规则注意点  
> • 整个大布局框架命名：header、footer、nav、article、left、right  
> • 其他的组件命名由英文单词和数字组合使用，尽量避免使用中文命名  
> • 避免重复命名规则：从属命名写法  
> 如：
> 
>   
> ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1] ![这里写图片描述][SouthEast 2]

--------------------

> **head标签规范**  
> head部分包含的标签（一）  
> • title：网页的标题内容，格式：标题内容  
> • meta标签：用于定义文件头信息，告诉浏览器需要干一些什么事情  
> • 网页字符集：设置浏览器解释页面的字符内容  
> 格式：  
> • 自动跳转：设置网页过多久跳转到指定页面  
> 格式：http://www.baidu.com“>  
> • keyword：设置搜索关键字内容，格式：  
> • description：设置描述关键内容，格式：  
> • author：设置网页作者，格式：  
> head部分包含的标签（二）  
> • link：引入css文件，格式：  
> • script：引入js文件，格式：  
> • 收藏夹图标：当网页被收藏后，显示的图标  
> 格式：

--------------------

> **链接和表格编辑规范**  
> 超链接规范  
> • 网站中链接路径统一用相对路径  
> • 浏览器中如果有个空链接，由两种设置模式：\#和javascript:void(null)

<a href="#">撮我</a>：链接到当前页面
      <a href="javascript:void(null)">撮我</a>：空连接，不跳转到任何页面

> • 表格规范 • 尽量避免表格嵌套过多（会导致延长加载页面时间） • tr和td标签能不换行最好不要换行，可能会影响页面展示效果

--------------------

**浏览器兼容测试工具**  
什么是兼容性（compatibility）  
• 兼容性是指硬件之间、软件之间或是软硬件组合系统之间的相互协调工作的程度。如CPU、主板、显示卡等，如果在工作时能够相互配合、稳定地工作，就说它们之间的兼容性比较好，反之就是兼容性不好。

前端浏览器兼容  
• 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，是所设计的网页和浏览器的兼容性。  
• 主要体现：网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。  
浏览器兼容性产生原因  
• 各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同；  
• 以及用户客户端的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。  
• 最常见的问题就是网页元素位置混乱，错位。  
需要测试的兼容浏览器  
• IE浏览器：6以前版本、7、8、9、10、11-内核Trident  
• Edge浏览器（Edge）-内核EdgeHTML（全新内核）  
• 谷歌浏览器（Chrome）-内核webkit  
• 火狐浏览器（Firefox）-内核Gecko  
• 苹果浏览器（Safari）-内核Webkit

http://tongji.baidu.com/data/browser

兼容性测试工具  
• IE浏览器自带仿真  
• Multibrowser  
**• 判断IE浏览器版本方法**  
• 条件判断固定格式：  
• 排除条件：\[if !IE 6\] 除了IE6其他的都能显示  
• 等于条件和或者条件：\[if IE 8\]、\[if(IE 8)|(IE 10)\]  
• 高于版本和低于版本(不包含当前版本)：\[if gt IE 8\] 和 \[if lt IE 8\]  
• 高于版本和低于版本(包含当前版本)：\[if gte IE 8\] 和 \[if lte IE 8\]  
• 介于两个版本之间：\[if(gt IE 7)&(lt IE 10)\]

[SouthEast]: https://img-blog.csdn.net/20171101120444659?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ2FycmllX3p6eg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://img-blog.csdn.net/20171101120510917?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ2FycmllX3p6eg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: /images/20220606/ee3fe7a4992b465cbf6fdb06d3ac392f.png