电商网站前端架构 学习笔记(全是干货)

1:前端架构的基本知识

1: 前端工程师必须会的一些技能

前端工程师基本技能图.PNG

2: 前端架构基本知识

  • 什么是前端架构?
    每个人对每个架构有不同的认识和一些想法。没有一个架构是完美的,只有一个架构是不是适合你的。哪个个架构符合你的需求的时候,你使用它就是了啦。另外,要记住的是架构是为完成产品服务的.一个简单的网站也可能涉及到前端架构,比如代码的复用.
  • 做前端架构的目的?
    做架构的目的并不是为了技术做架构而是因为产品才做架构的;
  • single page application (SPA)
    单页网站页面的应用,所有应用页面的切换通过页面的哈希完成,做这样的事需要一些比较复杂的框架,像backbone,anjular.js.单页面应用最近几年开始流行起来了,像qq邮箱,雅虎邮箱等都已经在应用了.

2:前端建构技术基础介绍

  • 技术基础的作用:做好技术基础的好处在于:后面做网站的整体规划和架构设计就会轻松非常多

语言基础

  • javascript,html & css

基本框架和类库

  • jQuery (更方便做代码开发)& require.js/ seajs(模块化框架),MVX farmwork
  • 帮助我们更高效的去开发代码

设计模式

  • 继承,重用
  • 代码如何组织:比如我们在页面上有两个地方的代码有重复,我们把代码封装成一个函数,这是最基本的设计模式-代码重用

性能优化

  • http cache,local cache,compress(代码压缩),DOM render(DOM渲染)
  • 如何解决性能瓶颈问题:
    1: 最常见的就是找到缓存的点,可以从http协议层面可以做缓存,利用HTML5做本地缓存
    2: 做代码压缩
    3:更科学的做DOM树的渲染

其它

  • Resful API design(前后台数据联调),自动化(Group/node.js),跨终端适配,代码托管

3:产品设计和发布

如果我们想让产品更加具有灵魂感,我们必须自己去思考产品应该被设计成什么样

交互设计图.PNG


4:数据分析和优化

数据分析和优化是做前端架构的必要前提,因为前端页面的数据对于我们前端工程师来说是非常重要的,比如可以根据数据波动去发现页面中的bug等等;最终的目的是提高产品的整体的体验和质量
大家以一个比较全局的观点去考虑这个问题的时候,不要以技术的观点去想,而要以产品的规划和产品怎么为用户服务的理念去想


5:前端架构组织方式和目录组织

架构组织的维度分以下几个方面

目录层面
利用操作系统与生俱来的目录结构,合理规划目录结构,是好的架构实现的基础
页面层面
页面层面,通常用来组织视图( HTML )
功能层面
最简单的网站,单个文件通常是一个或多个相关功能的聚合
组件化和设计模式层面
当一个逻辑需要多次被使用时,我们就开始组件化和抽象


1 :目录层面的组织

  • 目录系统在前端架构中所充当的作用:
  • 更高效的组织开发目录: 好的组织方式,甚至可以代替那些复杂的代码组织框架
  • CSS,JS 和图片要分开存放:分开存放,往往不是出于技术的考量,而是从团队协作和迭代管理层面触发
举例: js目录结构,根据以下三层,分门别类的放置文件
1: Model: 数据层,存放与服务器打交道的代码 
2: UI: 控制视图业务逻辑的代码
3: Controller: 控制层

2: 页面层面的组织

  • 由于页面中有不同的代码,所以不能用相同的方式进行组织架构的划分,在我们页面中有 js(逻辑性代码)html(结构性代码);css 描述性代码

  • 重用:一般页面与页面之间经常会有公共的部分,我们把公共的部分抽象出来,存放到一个文件夹,然后将里面的文件作为公用部分.
    同常来讲,页面与页面之间之间 不太存在逻辑之间的关系,而是包含与被包含的关系,比如一个页面包含某个子结构.

3: 功能层面

  • 最简单的网站,单个文件通常是一个或多个相关功能的聚合

6: 组件化和设计模式层面(详细讲解,单独作为一节)

  • JS中的继承和Extend
    继承和拷贝是JS中抽象的基础,因为JS不像其它面对对象语言,与生俱来就有这些功能,所以呢,要自己写

  • 浅拷贝简单例子

var a = {};
var b = {c:100, d:200};
//想让 a 具有 b 的属性,就用到浅拷贝; 其实用到的就是for in 方法
var i;
for (i in b){
a[i] = b[i] 
}
a; // {c: 100, d: 200}
//封装函数
function extend(sub,sup) {var i ;for (i in sub) {sub[i] = sup[i]}
}
  • JS继承继承方式:原型链
    偷懒继承方式:
//people
var people = function(){this.name = 'jiangdeng'
}
people.prototype.getName = function() {return this.name
}
//man
var man = function() {this.sex = 'male';people.call(this); //将man函数的this指向 people对象
}
//继承
//想要man获取people对象上的属性
//最简单的方式,也是偷懒的方式
man.prototype = people.prototype;
var Man = new man();
Man.getName()

偷懒方式的问题: man 的 prototype 中的 constructor 属性指向的是 people 的构造函数,当 people 的 getName 方法 被重写后,man再调用 getName 方法也会被重写

修改后的继承方式

//peopel
var people = function() {this.name = 'jiangdeng'
}
people.prototype.getName = function() {return this.name
}
//man
var man = function() {this.sex = 'male';people.call(this); //将man函数的this指向 people对象
}
//继承
//不让man的原型指向people的原型,而是指向people的实例
//指向people的实例后,man的constructor改变了,得把它设回它本身
man.prototype = new peopl();
man.prototype.constructor = man;
var Man = new man();
Man.getName() //jiangdeng
  • 命名空间
    命名空间的基础:前端模块拆分的最基本形式可以认为是闭包的一种应用,但是这种方式对于命名空间的管理过于随意
  • 组件化
    高级一点的组件化:可以使用开源框架完成最终的组件的组织和管理,例如requirejs/seajs
    require.js(国外人写的)
    sea.js(国人写的)
  • 组件化中的AMD和CMD的区别
    CMD -- 依赖就近 (按需求再加载)
    AMD -- 依赖前置 (提前一锅端,都加载)

7:前端架构实施

1:前端架构实施前的思考

  • 更合理的技术选型 --例如团队成员都精通jQuery,就没必要选YUI作为类库;
  • 需求分解后,模块的边界划分;模块的边界划分不是一个人的事,每个代码的贡献者都有义务提出建议;
  • 如何设计借口更加友好
  • 自动化的发布和快速迭代
  • 如何降低维护成本,维护成本通常体现在架构的可扩展性和易用性,好的设计会一劳永逸;

2:优化和扩展
从哪些方面着手?

  • 代码层面
    code review & 代码规范
  • 架构层面
    可扩展性是否受约束
  • 协议层面
    通过 http(s) 协议优化
  • 综合
    优化往往是多种技术的综合使用

3: 前端自动化

  • 前端自动化原因: 人会犯错 ;提高开发效率
  • 前端自动化基础: node.js /grunt
  • 自动化的方向: 发布 测试 开发

课程地址: 电商网站前端架构



作者:一杯浊酒
链接:https://www.jianshu.com/p/9df989dedd08
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249219.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

爱好-摩托车:铃木

ylbtech-爱好-摩托车:铃木1.返回顶部 2.返回顶部3.返回顶部4.返回顶部5.返回顶部 1、http://www.suzuki-china.com/motor/2、6.返回顶部作者:ylbtech出处:http://ylbtech.cnblogs.com/本文版权归作者和博客园共有,欢迎转载&#x…

Unable to preventDefault inside passive event listener

转自:https://segmentfault.com/a/1190000008512184 测试: body {margin: 0;height: 2000px;background: linear-gradient(to bottom, red, green); }// 在 chrome56 中,照样滚动,而且控制台会有提示,blablabla window…

thymeleaf 中文文档

https://raledong.gitbooks.io/using-thymeleaf/content/

vue面试题,知识点汇总(有答案)

一. Vue核心小知识点 1、vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于…

EF中Take和Skip的区别

以例子来说明: 数据库中Orders表如下: 代码部分: 运行结果: 可以看出:Take()方法的作用是从查询结果中提取前n个结果;而Skip()方法则是跳过前n个结果,返回剩余的结果。转载于:https://www.cnblo…

最短路径次短路径算法

容易理解:https://blog.csdn.net/m0_37345402/article/details/76695930 https://blog.csdn.net/qq_36386435/article/details/77403223 https://blog.csdn.net/u011815404/article/details/80441443转载于:https://www.cnblogs.com/genggeng/p/9810316.html

springmvc 中文文档

https://www.w3cschool.cn/spring_mvc_documentation_linesh_translation/spring_mvc_documentation_linesh_translation-9ivd27r4.html

详解Vuex常见问题、深入理解Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的…

Gym 101982 (2018-2019 ACM-ICPC Pacific Northwest Regional Contest (Div. 1) )

传送门&#xff1a; Problem A 温暖的签到题 #include<bits/stdc.h> using namespace std; const int maxn1007; char s1[maxn],s2[maxn]; int main(){ios::sync_with_stdio(false);cin.tie(0);int n,k,sum00,sum10;cin>>k>>s1>>s2;nstrlen(s1);for (i…

day02 while循环 运算符 格式化输出 编码

今日主要内容 while循环:判断条件是否成立。 如果成立执行循环体。然后再次判断条件&#xff0c;。。。。。直到条件不成立的时候跳出循环 语法&#xff1a; while 条件:   循环体 else:   当条件不成立的时候执行这里 和break没关系 break 终止当前循环 continue 停止当前…

Bootstrap中文文档

https://v3.bootcss.com/css/

Mac OS Git 安装

一、Git是一个分布式的代码版本管理工具。类似的常用工具还有SVN,CVS。最大的特点也是优点在于提供分布式的代码管理 1、分支代码只有一份&#xff01; 使用过svn的童鞋想必都知道&#xff0c;当我们要开发一个新功能或者增加一个新版本或者修改一个复杂bug的时候&#xff0c…

kubeadm安装k8s 1.13版本

一&#xff1a;环境初始化 1.关闭selinux,iptables 2.做好本地的dns解析&#xff0c;我这里用的是/etc/hosts 3.做一下免密传输 4. master:10.0.18.210 node1:10.0.18.211 node2:10.0.18.212 二&#xff1a;配置yum源 [rootmaster yum.repos.d]# vim kuberbetes.repo [kubernet…

MyBastis 三种批量插入方式的性能比较

数据库使用的是MySQL&#xff0c;JDK版本1.8&#xff0c;运行在SpringBoot环境下 本文章源代码&#xff1a;https://github.com/runbeyondmove/mybatis-batch-demo 对比3种可用的方式 1、反复执行单条插入语句2、xml拼接sql3、批处理执行 先说结论&#xff1a;少量插入请使用反…

JS对象与jQuery对象

JS对象大致可以分为三种&#xff0c;如下图&#xff1a; JS常用内置对象&#xff08;JS自身所持有的对象&#xff0c;不需要创建&#xff0c;直接可用&#xff09;&#xff1a; String&#xff1a;API跟java的字符串API大致相同 两种创建对象的方式&#xff1a;String s1 “…

Vue-router 中hash模式和history模式的区别

Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash"; mode:"history"; hash模式和history模式的不同 对于vue这类渐进式前端开发框架&#xff0…

Nginx Slab内存管理

L38 Slub内存管理适用 ngx_http_limit_conn_module、ngx_http_limit_req_module 模块场景 我们可以用阿里第三方模块Slab_Stat模块 并且用add-module 方式编译进openresty中 转载于:https://www.cnblogs.com/jackey2015/p/10684151.html

day2---while else

# -*- coding:utf-8 -*-while 条件&#xff1a;循环体终止循环 else&#xff1a; while else 解释&#xff1a;当循环体中没有被break打断则会运行else&#xff0c;打断则不会运行else# 例子 a 0 while a < 5:print(a)a 1break else:print(循环结束) # 0 转载于:https:/…

jQuery中this与$(this)的区别总结

https://www.cnblogs.com/gfl123/p/8080484.html

2019前端必会黑科技之PWA

一、背景 从2018年到现在&#xff0c;作为号称下一代web应用模型的PWA&#xff0c;逐渐成为了一个各大前端厂商争先恐后进行涉足&#xff0c;布局的一个新的技术&#xff0c; 其主要的对标物Native app&#xff0c;作为现在最主流的mobile端应用&#xff0c;它的安全&#xff…