现代前端技术解析：前端项目与技术实践

来源：互联网发布：c语言源程序的扩展名编辑：程序博客网时间：2024/04/30 07:49

head内容

? head中必须定义title、keyword、description，保证基本的SEO页面关键字和内容描述。移动端页面head要添加viewport控制页面不缩放，有利于提高页面渲染性能。建议在页面<head>加上基本的社交RICH化消息，保证网页地址分享后能够显示缩放图、图标和描述等。

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

<meta itemprop="name" content="页面标题">

<meta name="description" itemprop="description" content="页面内容描述">

<meta itemprop="image" content="http://xxx.com/logo.png">

img的alt属性

为<img>元素上加alt属性，用利于页面搜索引擎优化，对于盲人用户和图像加载失败的提示很实用（支持无障碍阅读）

<img src="banner.jpg" alt="宣传图片">

label的for属性

label的for属性或者将对应控件放在label标签内部，这样在点击label时，同时会关联到对应的input或textarea上选中，增加了输入的响应区域。

<label for="blue">蓝色</label><input type="radio" id="blue" name="color" value="#00f">

<label><input type="radio" name="color" value="#f00">红色</label

css规范

书写CSS样式不能用id选择器，因为id选择器很难复用；

如果属性值为0，不需要为0加单位；

先写元素的布局属性position、display、float、overflow等，再写元素的内容属性color、font、text-align等

多种浏览器兼容，先写私有属性、后写标准属性

.ui-news {

-webkit-box-shadow: 1px 1px 5px;

-moz-box-shadow: 1px 1px 5px;

-ms-box-shadow: 1px 1px 5px;

-o-box-shadow: 1px 1px 5px;

box-shadow: 1px 1px 5px;

}

JavaScript规范

条件判断

不要直接使用undefined进行变量判断。

// 不推荐

if(name == undefined) {return false;}

// 推荐

if(typeof person === 'undefined') {return false;}

数组拷贝

let ary = [1, {a: 2}];

let ary2 = [...ary];

let ary3 = {};

Object.assign(ary3, ary);

ary[1].a = 3;

ary2[1].a; // 3

ary3[1].a; // 3

注意：都是浅拷贝！！

数组遍历使用for…of，对象遍历使用for…in

let ary = ['a', 'b', 'c'];

let obj = { a: 1, b: 2};

for(let item of ary) {

console.log(item);

}

for(let key in obj) {

console.log(`${key}, ${obj[key]}`)

}

前端防御性编程规范

防御性编程是指通过检测任何可能存在的逻辑异常问题的代码实现，提高脚本执行过程健壮性的一种编程手段。

// 不推荐

t = data.userInfo.name;

// 推荐

t = data && data.userInfo && data.userInfo.name || 'ligang';

通过&&或者||进行检测，这也是函数式编程所提倡的！

前端组件规范

所谓的组件通常是指采用代码管理中的分治思想，将复杂的项目代码结构拆分成多个独立、简单、解耦合的结构或文件的形式进行分开管理，达到让项目代码和模块更加清晰的目的，而组件规范则是我们进行拆分、组织、管理项目代码方法的一种约定。不同的是，开发规范关注文件内部代码级别的一致性，组件规范则更关注项目中业务功能模块内容组织的一致性。任何一个独立的功能模块之间都应该是无耦合并能和其他模块很好对接和组合！

UI组件规范

（1）UI层风格统一化，相同功能的模块在相同场景下结构层和表现层应该一致；（2）增加UI层复用性；（3）更符合用户的体验习惯；（4）增加了开发规范的统一性。

模块化规范

JavaScript文件之间互相依赖引用的一种通用语法约定，即按照一定规范写javascript，方便被其他JavaScript文件引用。主要包括AMD（Asynchronous Module Definition，异步模块定义）、CMD（Common Module Definition，通用模块定义）、CommonJS、import/export等。参考：前端模块系统

项目组件化设计规范

为了实现对复杂的项目进行管理，我们通常使用组件，目前实现组件化的方案也越来越多：Web Component组件化、MVVM框架组件化（通常，将页面中的模块按照元素来划分，并将模块相关的描述语法、CSS样式、执行脚本放在同一个文件里进行引用）、基于Virtual DOM框架的组件化、直接基于目录管理的组件化等。

宁波微整医院www.lyxcl.org

阅读全文

0 0