前端架构应该考虑哪些？
前端技术更新可以说是“⽩驹过隙”，如何搭建⼀个合格的前端架构能够适配我们现在快速迭代和千变万化的迭代需求呢？我认为要通过（规范制定，模块化管理，组件管理，⾃动化打包测试）
规范制定
如图所⽰ 想到孩⼦的玩具 是⾮常困难的 熊孩⼦都是调⽪的 那怎么让这些熊孩⼦的玩具都能放在该放的地⽅呢 。最好的办法就是 不在规定地⽅的玩具不能玩。
玩具
对于我们的 代码也是  相应的规范可以让⾃⼰和团队程序员更加容易理解代码 梳理逻辑 也能让程序员保持良好的⼼情  主要规范有以下⼏点
1 CSS规范
戳我查看CSS规范
2 HTML规范
戳我查看HTML规范
3 JS规范
戳我查看JS规范
4 ⽂件⽬录规范
5 GIT使⽤发布规范
戳我查看git常⽤命令
6 接⼝规范
戳我查看阿⾥云前后端分离之API规范
7 UI规范
8 组件数据传递规范
模块化管理
什么是模块化思想呢，简单说就是 做该做的事情 具有原⼦性 单⼀性 例如 ⼀个台电脑 需要 CPU 需要主板  电源 组装 起来  ，模块化的意思就是 电源只做电源的事情 那就是供电 ，⾄于是给风扇供电 还是给CPU供电 他是不⽤知道的，电源只需要暴露⼀个 接⼝ 参数是需要多少伏的电即可。于此同理 模块化就是 单⼀功能的拆分
模块化是指在解决某⼀个复杂问题或者⼀系列的杂糅问题时，依照⼀种分类的思维把问题进⾏系统性的分解以之处理。模块化是⼀种处理复杂系统分解为代码结构更合理，可维护性更⾼的可管理的模块的⽅式。可以想象⼀个巨⼤的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是⼀种何等意义的存在。
在团队开发的过程中如果不考虑模块化会遇到下列问题：
在团队开发的过程中如果不考虑模块化会遇到下列问题
命名冲突：每个⼈都有⾃⼰的开发习惯，或者说开发过程中新⽼交替，模块复杂就会导致命名⼀样的情况 ⽐如js，都是时间的意思那么就会出现命名冲突
下⾯的代码
var time = "" //界⾯A
var time = ""//界⾯B
代码重复
代码重复：⼀个⼩⼩的时间⽇期格式化函数可能写了30个版本，有些可能代码完全相同，另外CSS也存在这个问题 ，不当是命名重复 还有代码重复 功能重复
⽅便后期维护
提升开发效率和⽅便后期维护
所以这时候我们需要模块化开发的概念⽤来 提升开发效率和
前端ui框架是什么意思1 JS模块化
先说说Node.js 中关于ports与exorts的区别
exports = ports = {};
exports是ports的⼀个引⽤require引⽤模块后，返回给调⽤者的是ports⽽不是，相当于在导出对象上挂属性，该属性对调⽤模块直接可见exports =相当于给exports对象重新赋值，调⽤模块不能访问exports对象及其属性如果此模块是⼀个类，就应该直接赋值ports，这样调⽤者就是⼀个类构造器，可以直接new实例
假如有模块a.js代码如下：
假如有模块a.js代码如下
exports.str = 'a';
exports.fn = function() {};
对a模块的调⽤：
var a = require('./a');
console.log(a.str);
console.log(a.fn());
这样⽤是对的，如果改造a如下：
exports.str = 'a';
exports = function fn() {};
在调⽤a模块时⾃然没⽤fn属性了。
再改造下a模块：
exports.str = 'a';
这时a模块其实就是fn函数的引⽤，也就是说可以require('./a')()这样使⽤，⽽同时不再有str属性了。
ES6中的模块化
⾸先ES6 的模块⾃动采⽤严格模式，不管你有没有在模块头部加上"use strict";。
严格模式主要有以下限制。
变量必须声明后再使⽤
函数的参数不能有同名属性，否则报错
不能使⽤with语句
不能对只读属性赋值，否则报错
不能使⽤前缀 0 表⽰⼋进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作⽤域引⼊变量
eval和arguments不能被重新赋值
arguments不会⾃动反映函数参数的变化
不能使⽤arguments.callee
不能使⽤arguments.caller
禁⽌this指向全局对象
不能使⽤fn.caller和fn.arguments获取函数调⽤的堆栈
增加了保留字（⽐如protected、static和interface）
ES6的模块化的特点
每⼀个模块只加载⼀次， 每⼀个JS只执⾏⼀次， 如果下次再去加载同⽬录下同⽂件，直接从内存中读取。 ⼀个模块就是⼀个单例，或者说就是⼀个对象；
每⼀个模块内声明的变量都是局部变量， 不会污染全局作⽤域；
模块内部的变量或者函数可以通过export导出；
⼀个模块可以导⼊别的模块
export多对象
export let getStore = function (name) {
return JSON.Item(name))
}
/**
*  设置本地存储书籍 统⼀⽤Object或者Array
*/
export let setStore = function (name, val = {}) {
localStorage.setItem(name, JSON.stringify(val))
}
然后import
import {a]getStore,setStore} from '../../export/util.js';
　如果不想暴露变量的名称：使⽤as可以重命名关键字
export {getStore as A, setStore as B} from '../../export/util.js';
想要了解ES6模块化的可以点这⾥ES6模块化
SASS/LESS模块化
定义基础颜⾊，字体，间距
// Colors
$black:        hsl(0, 0%, 4%) !default
$black-bis:    hsl(0, 0%, 7%) !default
$black-ter:    hsl(0, 0%, 14%) !default
/
/ Typography
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
$family-monospace: monospace !default
$render-mode: optimizeLegibility !default
……
定义基础的⽅法 ⼯具类

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。