Watch 1 Star 1 Fork 0

hang1989 / readerTypeScript

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
一个用于网页阅读的web端程序 spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

Kylin 前端开发脚手架

开发原则

  • 现代网站必须能够响应并处理用户所做的所有操作,并保持UI的速度。

开发环境

  • Angular CLI 7.2.1
  • Node: 10.15.0
  • ng-zorro 7.0.0-rc.3 版本
  • 使用最新版vsCode或者webstorm
  • 使用platform-web-server搭建mock服务器(如果不需要可以跳过)

安装方法

  • 全局安装依赖 @angular/cli: npm i -g @angular/cli(避免使用cnpm)
  • 安装git
  • 使用git下载项目(git教程)
  • 进入项目安装依赖 npm i (这时候可以打包测试一下,如果正常,安装完成)

项目启动

  • 命令行下ng serve,默认访问地址:http://localhost:4200/

项目打包

  • npm run aot 项目下新生成的dist文件内

检查包体积

  • npm i -g webpack-bundle-analyzer@latest
  • npm run analyze
  • cd dist/
  • webpack-bundle-analyzer stats.json --port 88

命名规范

  • 指令:[kylinAcl] 驼峰写法,必须以kylin开头
  • 组件:'kylin-open-layer' 必须以kylin开头
  • 管道:'kylinPipe' 驼峰写法,必须以kylin开头
  • 更多规范请参考angular风格指南
  • 参照编辑器ts-lint提示书写

开发规范

  • 新增模块应该使用惰性加载的方式,引入sharedModule获取各种开发包依赖
  • 新增管道,组件,指令 放入shared模块对应目录下
  • shared模块下新增模块不建议使用独立模块,防止因为依赖出现奇怪的问题
  • 新增全局service 放在core模块下
  • 惰性加载模块内组件的service如果是单例服务,那么可以声明在使用此服务的组件内
  • 除非无法确定对象的数据结构,不然不应该使用any类型,应当使用自定义类来描述对象结构,方便查错和开发

如何快速新建一个惰性加载模块

  • ng g m module-name --routing
  • cd module-name
  • ng g c module-name --flat

使用工具快速生成一个惰性加载模块

  • ng g kylin-ma:all --name moduleName (moduleName就是你模块的命名)
  • 目前工具有一些BUG,会在app路径下生成此模块,直接拖动文件夹移动即可.会自动修改app.module.ts文件,只要使用编辑器撤销的他的修改即可

快捷方式

  • 引入http服务: import {HttpService} from '@http' ; 更多快捷方式请查看tsconfig.json文件
  • 引入shared模块 : import {SharedModule} from '@shared' ;
  • 引入shared下class: import {ResponseData, User, RequestParams, CustomRequestParams} from '@class' ;
  • 更多快捷引用方式,查看tsconfig.json文件

打包和测试

  • npm run aot 即可使用树摇优化打包项目
  • 注意: 如果有任何关于@NgModule内imports数组内容的变动,那么需要从新 ng server才能查看到最新改动! 切记!
  • 提交代码或者合并代码之前请使用npm run aot打包一下,确保代码没有错误,之后运行ng lint指令检查语法是否符合项目规范

页面设计规范

  • 所有按钮的事件都应该防止用户可以连续点击,最简单的解决方案就是给按钮添加loading状态.

core 模块里面的公共服务

  • 路由跳转 router.service.ts 使用 import {RouterService} from '@kylin/router';
  • HTTP服务 http.service.ts 同上
  • 路由守卫 auth-router.service.ts 同上
  • 浏览器缓存 cache.service.ts 同上

shared 模块内管道

  • date-pipe.ts 是时间格式处理管道 把时间戳处理成项目需求的YYYY-MM-DD HH:mm:ss的时间格式

underscore如何引用

  • import * as _ from 'underscore';

子组件修改父组件样式

  • :host ::ng-deep

参考资料

angular/cli 指令速查表

  • 点击属性名称可以查看当前属性支持的全部参数 : 请务必完整浏览一遍,可以大幅提升开发效率

浏览器缓存

  • 登陆成功以后后端返回的信息将会分类缓存在tokenService,menuService,userService等服务中
Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

angular自带pipe

管道 功能
DatePipe 日期管道,格式化日期
JsonPipe 将输入数据对象经过JSON.stringify()方法转换后输出对象的字符串
UpperCasePipe 将文本所有小写字母转换成大写字母
LowerCasePipe 将文本所有大写字母转换成小写字母
DecimalPipe 将数值按特定的格式显示文本
CurrentcyPipe 将数值进行货币格式化处理
SlicePipe 将数组或者字符串裁剪成新子集
PercentPipe 将数值转百分比格式

Comments ( 0 )

Sign in for post a comment

TypeScript
1
https://gitee.com/majiahang/reader.git
git@gitee.com:majiahang/reader.git
majiahang
reader
reader
master

Help Search