没有合适的资源?快使用搜索试试~ 我知道了~
首页框架无界:掌握前端开发自由度
框架无界:掌握前端开发自由度
需积分: 9 12 下载量 38 浏览量
更新于2023-03-16
1
收藏 3.62MB PDF 举报
"《框架无界前端开发》是一本专门探讨在不依赖框架或第三方库的情况下进行前端应用程序开发的实战指南。作者Francesco Strazzullo针对那些寻求技术自由度和选择权的JavaScript开发者、负责新项目技术栈决策的技术经理以及计划重构现有前端代码库的顾问,提供了一套清晰且实用的方法。 本书的核心内容包括深入理解DOM操作的工作原理,学习如何有效地管理前端应用的状态,通过不同的模式(如Redux、MobX等)。作者引导读者如何安全地将现有应用迁移到无框架或轻量级的代码结构,同时强调了选择框架对代码健康度和项目寿命的影响。书中还介绍了如何使用决策工具,如框架罗盘图和架构冲突分析,帮助开发者在技术选型时做出明智判断。 书中的“Do You Control Your Dependencies Or Are They Controlling You?”章节揭示了过度依赖框架可能带来的技术债务问题,以及框架对项目长远发展的影响。作者提倡从零开始编写高质量代码,同时培养对技术决策原则的理解,确保项目的可持续性和长期可维护性。 通过阅读这本书,读者不仅能够掌握基础的前端编码技巧,还能学会如何在框架与自定义实现之间做出平衡,提升团队的技术自主性和项目灵活性。《框架无界前端开发》不仅是一本技术手册,也是一本关于技术决策策略的实用指南,适合所有渴望掌控技术栈并追求高效、灵活前端开发实践的专业人士。"
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/11545354/bg10.jpg)
3
Comparing Frameworks toLibraries
I am going to use some code snippets to show the difference between
frameworks and libraries. For this comparison, I will use Angular and
Moment.js.
Listing 1-1 and Listing 1-2 are basic examples of Component and
Service in Angular.
Listing 1-1. Angular Service Example
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
const URL = 'http://example.api.com/';
@Injectable({
providedIn: 'root',
})
export class PeopleService {
constructor(private http: HttpClient) { }
Figure 1-1. Relationship between frameworks, libraries, and code
CHAPTER 1 LET’S TALK ABOUT FRAMEWORKS
![](https://csdnimg.cn/release/download_crawler_static/11545354/bg11.jpg)
4
list() {
return this.http.get(URL);
}
}
Listing 1-2. Angular Component Example
import { Component, OnInit } from '@angular/core';
import { PeopleService } from '../people.service';
@Component({
selector: 'people-list',
templateUrl: './people-list.component.html'
})
export class PeopleListComponent implements OnInit {
constructor(private peopleService: PeopleService) { }
ngOnInit() {
this.loadList();
}
loadList(): void {
this.peopleService.getHeroes()
.subscribe(people => this.people = people);
}
}
Listing 1-3 is an example of using Moment.js to format the date.
CHAPTER 1 LET’S TALK ABOUT FRAMEWORKS
![](https://csdnimg.cn/release/download_crawler_static/11545354/bg12.jpg)
5
Listing 1-3. Moment.js Example
import moment 'moment';
const DATE_FORMAT = 'DD/MM/YYYY';
export const formatDate = date => {
return moment(date).format(DATE_FORMAT);
}
Given the previous definition, it’s quite easy to understand
that Angular is a framework, while Moment.js is a library (used to
manipulate dates). In Angular, to let PeopleListComponent interact with
PeopleService, you should use the @Injectable annotation and put the
instance in the constructor. Angular offers a structure to fill with your code
and a set of utilities (like HttpClient) to help with standard tasks.
Moment.js is completely unopinionated on how to structure your
application code. You just import it and use it. As long as you respect
the public API, you’re good to go. Using this same definition, you can
categorize a lot of your favorite npm packages. Frameworks include
Angular, Vue.js, and Ember.js. A lot of libraries can be categorized by
purpose, as seen in Table1-1.
Table 1-1. Some JavaScript Libraries
Purpose Libraries
Utilities Lodash, Underscore.js
Date manipulation Moment.js, date-fns
Data visualization D3.js, Highcharts
Animations Tween.js, Anime.js
HTTP requests axios
CHAPTER 1 LET’S TALK ABOUT FRAMEWORKS
![](https://csdnimg.cn/release/download_crawler_static/11545354/bg13.jpg)
6
I deliberately left out React—one of the most popular tools front-end
developers—from this list. So, is React a library or a framework? Before
answering this question, I want to introduce a new concept that will help
shed some light on this topic: the framework’s way.
The Framework’s Way
As you saw in Listing 1-3, Moment.js has no opinion on how to integrate it
into your code. Angular is very opinionated. You may see some of its strong
ideas in the simple example shown in the previous section. The following
sections discuss some of the constraints.
Language
Even if it is actually doable to build an Angular application with plain
ECMAScript, TypeScript is the de facto standard in the Angular ecosystem.
TypeScript is a typed superset of JavaScript that compiles to plain
JavaScript. Apart from type checking, it lets you use features that are not
present in the original language, such as annotations.
TypeScript could be very useful if you are used to working with strongly
typed languages. But if you use Angular, all of your code is written in a
language that requires a transpiler.
Dependency Injection
To let elements communicate in an Angular application, you need to inject
them with a dependency injection mechanism based on types. The old
AngularJS had a dependency injection mechanism based on a service
locator pattern. The same injection in AngularJS looks like Listing 1-4.
CHAPTER 1 LET’S TALK ABOUT FRAMEWORKS
![](https://csdnimg.cn/release/download_crawler_static/11545354/bg14.jpg)
7
Listing 1-4. AngularJS Dependency Injection
const peopleListComponent = peopleService => {
//Actual Code
};
angular.component('people-list',[
'peopleService',
peopleListComponent
]);
Later in the book, you will see how to create a very simple service
locator to keep your code well organized.
Observables
Angular is heavily designed around RxJS, a library for reactive
programming using observables. To get data from PeopleListService,
you have to use the subscribe method of the Observable object. This
approach is different from the other front-end frameworks, where HTTP
requests are designed like promises. Promises are a standard way to
represent the eventual completion (or failure) of an asynchronous
operation. RxJS lets you easily transform an observable into a promise, and
vice versa.
If you need to integrate a promise-based library in your Angular
project, you need to do some extra work. Listing 1-5 and Listing 1-6
show how to use axios, a library for making HTTP requests based on
promises.
CHAPTER 1 LET’S TALK ABOUT FRAMEWORKS
剩余256页未读,继续阅读
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)