FE-problem-collection
FE-problem-collection copied to clipboard
XIANFESchool
前端问题收集和知识经验总结
在书写 JSX 时，经常会有一类需求，就是在特定条件下 render 一些组件。 例如: - 显示警告信息时 ```jsx {this.showMessage && } ``` - 加载表格数据时 ```jsx {this.loading ? : } ``` 这里，我使用 JavaScript 表达式进行处理，这样做，从代码的可读性和可维护性上看起来都还不错。 继续增加复杂度 ```jsx { show && (isAdmin...
### 前端项目交接规范 #### 交接中关心的五大问题 1. 如何进行开发？ 2. 如何发布？ 3. 有没有什么难点？ 4. 后端谁负责？ 6. 测试谁负责？ #### 1.如何进行开发？ - 技术栈部分 (框架，库，工具，项目结构，还有开发规范，注意事项等) - 框架和库 - 例如 AngularJS 1，UI-Router 和 angular-utils 具体可以参考 package.json -...
最近在项目的制作过程中遇到超出需要折行的问题 如果是一行超出 ``` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ``` 当然还需要设置宽度的 还可以参考 之前的解决方案 https://github.com/ShuyunXIANFESchool/FE-problem-collection/issues/13 ## 问题 如果是两行显示，第一行折行，第二行需要超出省略该如何实现呢？ 或者第N行要省略该如何解决呢？ ## 解决 - 解决方案1 css 的不规则属性解决 `-webkit-line-clamp` 是一个不规则属性，不出现在css 草案中。用来实现块级元素显示几行，它需要与其他元素组合使用 ``` display：-webkit-box; -webkit-box-orient:...
最近在项目开发过程中，作为前端leader，发现前后端联调的时候，花费的时间特别多，按理说在接口定义清楚的前提下，联调是非常快速的。 然而事实上，当我仔细阅读接口文档后，发现很多东西，并未定义清楚，或者压根没有。 那么一个完善的接口文档应该是什么样的？ 1.首先接口的设计，需要遵循REST原则，如果有同学不懂REST，可以看看这篇文章 https://github.com/ShuyunXIANFESchool/FE-problem-collection/issues/4 2.接口的名称及作用描述。 3.接口的URL和请求时使用的HTTP Method。 4.接口的请求格式及参数包括参数类型，参数默认值，参数描述。 5.接口可能返回的状态码，及每个状态码下的响应类型和格式。 以下是一个接口文档的示例： > **ticket列表** > > 用于获取ticket列表，带分页功能 > > **接口：** > > GET /tickets > > **请求参数：** > > | 名称...
# 一、开始 > how Angular interacts with the browser's event loop?. - Angular 如何与浏览器的 event loop 相互作用？ - 再说，为什么要与浏览器的 event loop 相互作用？  Integration with the browser event loop ##...
随着互联网的发展，前端页面变的越来越复杂，越来越多的事情，被拿到前端来处理。这就导致 HTML 页面会被加载大量的资源 包括 JS，CSS 以及图片等。 本文从 HTTP 缓存的角度，来谈谈如何优化页面资源加载性能。 ### HTTP协议 在谈 HTTP 缓存之前，让我们先来聊聊 HTTP 协议，HTTP 作为一个非常重要的协议，它的发展却驻足不前，翻开的它的历史，它竟然只有三个版本: - HTTP/0.9，在HTTP 1.0 之前，HTTP 标准并未正式建立，所以统称 HTTP/0.9。 - HTTP/1.0, 1996年正式公布的版本，被记载在 RFC1945。 - HTTP/1.1, 1997年1月公布的，是目前的主要版本，它也是我们将要讨论的主要版本。...
#### HTML表格 最近，项目中很多地方涉及到了表格，但是发现很多同学并没有使用表格，或者部分使用表格去实现html页面，其实这样是不符合语义化的，仔细询问后，发现大家对 table 的特性还不是很了解，其实我自己也不了解，但是当我再翻看 taobao和京东的订单页面的时候，发现它们都使用的 table。 #### 表格都有哪些元素 我们来看一个例子: ``` html Name ID Favorite Color Jim 00001 Blue Sue 00002 Red Barb 00003 Green ``` 我们有 table thead tr...
#### 什么是 $resource ? $resource 是基于 $http 基础之上的一个 AngularJS 的服务，特别擅长与 RESTful 进行交互。 #### 什么是RESTful ?(摘自[RESTful API编写指南](http://blog.igevin.info/posts/restful-api-get-started-to-write/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io&from=timeline&isappinstalled=0)) > RESTful API的开发和使用，无非是客户端向服务器发请求（request），以及服务器对客户端请求的响应（response）。本真RESTful架构风格具有统一接口的特点，即，使用不同的http方法表达不同的行为： > - GET（SELECT）：从服务器取出资源（一项或多项） > - POST（CREATE）：在服务器新建一个资源 > - PUT（UPDATE）：在服务器更新资源（客户端提供完整资源数据） > -...
#### Express 是什么 ? 中文官网的回答: Express 是一个高度包容、快速而极简的 Node.js Web 框架。 #### 如何使用 - 安装 ``` js npm install express --save ``` - 写一个 http server （可以作为模板） ``` js var express...
### AngularJS 性能优化 说到 AngularJS 的性能优化，一个很重要的点就是从 数据的脏检查 开始: ### 理解脏检查机制 参考 https://github.com/ShuyunXIANFESchool/FE-problem-collection/issues/27 - $digest loop - $watch list ($$watchers) - $evalAsync queue ($$asyncQueue) 做一个试验，看看什么情况下，变量会被加入到 $$watchers 中 http://plnkr.co/edit/hDHmkdNjQQkdwscjouzE?p=preview - {{}} -...