大前端
2024-08-19 15:27:02 47 举报AI智能生成
前端
作者其他创作
大纲/内容
具体模块
表单
禁止输入/仅展示
input使用ng-readonly其他用ng-disabled
去除不必要下拉选项和选择器等
不能有必填属性required
有禁用、启用、拉黑等按钮的表单需要有redonly的inut状态在页面里告知当前状态
form标签加入novalidate去除html自带的验证提示
UI资源
angular1相关插件介绍
Angular UI
Angular第三方插件
开发工具
nginx
下载地址
npm
配置
TCP链接
长连接
长时间保持连接状态
不安全
消耗服务器性能
短连接
一次性会话
报文收发
异步
报文的收发互不影响
异步双工
异步单工
报文发送后将等待返回
socket
同过端口号实现双向通信
Fluetter
主题
MaterialApp
需在main->runApp(materialApp())作为根节点运行
代码结构
表单按钮
1.必须放在<form>标签内
ng属性与html属性不写在同一行
时间组件
开始时间和结束时间
公共模块
表单验证
手机和电话号码
样式
页面样式
每个页面顶部都用page-form/list-*来标识页面样式范围
表格
不频繁使用的功能不要在列表项显示
操作放在右侧固定
表格每一列都要有固定的minWidth
联想搜索typeahead
html写法
js写法
参考
多功能下拉选择
基本规则
需求
只认导图，有问题直接问后台
需求只跟后台讨论
项目相关地址
数据库
公共代码
项目代码
文档代码
js代码规范
子主题.不要在同一行声明多个变量。
2.请使用 ===/!==来比较true/false或者数值
3.使用对象字面量替代new Array这种形式
4.不要使用全局函数。
5.Switch语句必须带有default分支
6.函数不应该有时候有返回值，有时候没有返回值。
7.For循环必须使用大括号
8.If语句必须使用大括号
9.for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。
angular1
模块化
MVC
指令（directive）
angular2
组件化（Component）
react
JSX语法（在JS里写xml）
虚拟DOM（Virtual DOM）机制：数据变化——重构DOM（在内存中操作）——对比差异——局部更新
组件化开发
vue
数据驱动的渐进式框架
响应的数据绑定
组合的视图组件
MVVM模式
自由主题
微前端
根系统
路由管理
注册子系统
注册子系统路由
路由加载（子系统）
无缝刷新（得提前缓存）
去缓存（新发版本能在线同步）
在线切换路由
容错
子系统、子路由的移除或异常不影响外界
实现方法
single-spa+systemJS
Iframe+反向代理（nginx）
监听URL手动修改子窗口路由
Web Components
组件化子系统
消息通讯
消息收发
单向
双向
转发
实现方法
路由传参-url地址的query参数
数据存储（单向，按需自提）-localStorage、sessionStorage
多窗口消息监听和发送（window.postMessage）
vuex、redux--使用局限性较高，适用数据复用、通信
rxjs
子系统管理
同步皮肤
共享数据
用户信息
权限信息
后端数据字典
多语言
缓存清理
功能页
导航菜单
登录页
设置页
子系统
消息通讯
发消息
其他子系统
根系统
响应
触发事件
触发路由
模块级公共代码
公共类库
公共组件
公共接口
样式隔离
规范命名
vue类名前缀
全局变量隔离
子系统不能定义window变量
规范
系统名/模块名/页面名、CSS类名、事件名、本地存储、Cookies命名规则
能标识出根系统、系统级公共代码、子系统之间兼容性的版本号命名规则
子系统领域划分
按导航菜单（业务）
按集中的发包情况（变更频率）
按权限组（组织结构）
跟后端一致
实现方式
1. 使用http服务器（nginx反向代理）重定向路由
2. 使用iframe嵌套以及自定义的消息通信（陈旧技术）
3. 使用纯web components 构建应用（适合新的项目）
4. 使用single-spa的方式来实现
5. 使用single-spa结合web components的结合方式（待定）
6. qinakun框架
系统级公共代码（多版本）
公共组件
公共类库
http请求代理类
公共接口
工具类
Mixins
公共样式
公共资源
图片
字体
图标
公共配置
前端数据字典
表单正则
请求配置（域名、状态码）
版本化
仅对改动的一类型文件设置版本合并打包发布
修改整个项目版本，打包后的各文件名固定
开发部署
打包
异步加载
离线应用
共享代码
实现方法
SystemJS
git
一个项目文件夹下多个独立git仓库
已发布版有对应版本标签标识
本地开发
本地开发能与线上版本联调
一键安装所有系统package包
一键运行所有系统
各子系统能链接独立git仓库的公共代码
配置化
请求路径配置
各系统访问地址配置
期望
1. 子系统可以独立打包部署
2. 减少单个项目的协作人员的代码冲突
3. 优化打包速度
前提
1. 工程项目过大
2. 打包速度过慢
3. 团队协作人员多，代码冲突多
4. 每次发版都是全量发布，影响用户
5. 技术栈单一，不能使用多中技术栈（待定）
0 条评论
下一页
