web前端架构-新一次的尝试机会
上一家电商公司烧了半年,有点烧不动了,我就赶紧跑了。
感谢上一家电商公司,让我有机会操刀搞了一次电商交易类网站的架构体验。
这次换了一家公司,做语音媒体的。就是在PC端听语音广播,类似于喜马拉雅的PC版的东西。具名就不提了。
这一次呢,依然是整个网站的前端都由我一个人来负责。我很自然的就想从架构上搞搞好,而不是简单的切页面写功能。
聊之前,还是看下定义。
架构,啥叫架构呢?
架构,又名软件架构,是有关软件整体结构与组件的抽象描述,用于指导大型软件系统各个方面的设计。
软件架构,前端算是软件吗?
按过去的眼光看肯定不是软件,因为它是一个一个的网页,多个网页组成一个网站。
要按现在的趋势来看,它就是一种软件。一种运行在PC端浏览器环境中的软件,即,网站就是一个大应用,应用就是软件。
哎呀,不管了,反正它就是软件,我说是它就是了。
然后呢,就是它的整体的结构和组件的。。描述。“抽象”这个我说不好,就不提了。
好了,明确了,架构就是网站的整体的结构和组件的设计。
网站的结构设计,至少有用户,首页,各栏目,栏目内列表,栏目详情页,社区,支付等,这些基本都是产品经理和BOSS他们定,具体的需求我还没拿到,。
然后就是网站的组件的设计了,其实就是前端组件的模块化。
现在模块化有二种思路,
一是复用,就是我写一个模块,在哪都通用。例如一个弹窗,到哪个网站我都通用。OK这个想法没错。
二是独立性,就是这个模块可以不通用,但它一定是可以独立存在的。需要它的时候,可以很方便的加载到整个网站中,不需要很复杂的配置。。。不需要它的时候,去掉一个引用就可以。。。当它出错的时候,它只是自己卡住而不会影响其它。
我现在比较倾向于第二种,即独立性。因为复用的话,就要兼容很多种情况,要多很多兼容方面的代码,很多时候这些代码其实根本用不到。
JS模块化现在百花齐放了,AMD/CMD/ES6/LESS/SAAS/.....但在我看来其实都一样。
因为模块化从来都是一种思路,从未和任何语言模块绑定。当然那些那些模块化库都应该学,我不学只是我懒。
现在搞清楚,我要写的是相对独立的前端组件。
我个人认为前端组件应该是简约不简单。意思就是说,它的规则很简单就几句,但在这个规则之下,这个组件可以写的很复杂。
规则有啥用?以后会有新的WEB前端同事加入进来,安排某个独立的组件给他开发。他要按照相应的规范来写,这个组件才能在这个网站之内通用。否则他自己怎么想怎么写,那这个组件就成了一锅汤里的那粒老鼠屎。
要有规矩。
组件应该怎么写?研究怎么写之前要想先好怎么安排它们。
以前是一个网站有许多网页组成,组件化就变成一个网站有许多组件、模块组成了。前端发一个请求到后端,后端返回一个结果数据,通过模板生成html页面,页面根据需要加载相应的模块,返回浏览器渲染生成网页。
在这个过程中,没有具体的某个网页了,网页都变成了模板。
那么网站的结构就由“网页”的目录结构,变成了“组件”的目录结构。
至少是这样的:
site:
-components
----ajax
----config
----buttom
----header
----tab
----list
-view
----images
----css
-js
----jquery.1.72.js
...
然后具体到某个组件中,
至少是这样的:
-buttom
----buttom.html
----buttom.js
----buttom.css
----buttomImg(目录)
某组件的相关资料,都在此组件的目录中。除顶层公共JS库之外不需要去其它目录引用资源。
...
然后在页面渲染的时候,是这样的,
(借图一张)
这是一种理想的情况。
我准备在这家公司,搞一下试试!
- ExtJs学习笔记(19)_复杂Form示例
- Linux快速入门01-基础概念
- SQL学习之Insert的特殊用法(插入检索出的数据,表之间的数据复制)
- 对php多态的理解
- JavaScript值延迟脚本和异步脚本
- JavaScript之arguments.callee
- JavaScript之面向对象学九(原型式继承和寄生式继承)
- ExtJs学习笔记(18)_ExtJs嵌入FCK示例
- Html与CSS快速入门01-基础概念
- 利用Fck的javascript-API创建fck编辑器
- ASPNET_WEBAPI快速学习02
- ExtJs学习笔记(17)_table布局
- Markdown快速入门
- JavaScript之apply()和call()的区别
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- charles工具使用
- 干货 | 从0到1,搭建一个体系完善的前端React组件库
- LeetCode 01两数之和&02两数相加
- 给GitHub "彩蛋" readme 生成自定义统计信息
- Android |《看完不忘系列》之okhttp
- pt-osc改表过程中的中文乱码问题
- Hive Query生命周期 —— 钩子(Hook)函数篇
- python快速排序
- 扩展 Microsoft.Owin.Security
- Angular 2 版本的 ng-bootstrap 初体验
- 揭开MySQL“锁”的神秘面纱
- 从0到1开发测试平台(九)后端对接口response的封装
- 在 Mac OS X 上安装和配置 Wine
- 性能测试之nginx访问日志分析
- Pytest之断言