Web 开发问题汇总(四)
###1.如何实现如下布局:两个元素A和B,其中A的宽度为包裹其内容,B则占用剩余的宽度? A:A 元素利用 float 的包裹性,B 元素则利用 BFC。
<div class="container">
<div class="right"></div>
<div class="left"></div>
</div>
.container {
width:600px;
height:200px;
border:1px solid;
}
.left {
width:auto;
height:200px;
background:red;
overflow:hidden;
}
.right {
height:200px;
width:200px;
background:blue;
float:left;
}
Reference:Expand a div to fill the remaining width
###2.Meaning of ~ in import of scss files A:
From documentation on a
sass-loader#imports
project,
webpack provides an advanced mechanism to resolve files. The sass-loader uses node-sass’ custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from node_modules. Just prepend them with a ~ to tell webpack that this is not a relative import
So if you have a file named foo.css and a module foo then you would use ~ if you want to include the module.
Reference:Meaning of ~ in import of scss files
###3.为什么创建 Observable 时传入的函数签名不需要包含 this? 示例如下:
// API Document:
constructor(subscribe?: (this: Observable<T>, subscriber: Subscriber<T>) => TeardownLogic)
// Usage code:
const observable = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
setTimeout(() => {
subscriber.next(4);
subscriber.complete();
}, 1000);
});
A:Here this is a special syntax in Typescript. It specifies the type of the “this” the function expects. So here it just means it should be called by a Observable with the same Type T as the Subscriber.
It comes first in the parameter list. It is a fake parameter, and should invoked without it.
More info can be found Here.
Reference:Confused by Rxjs Observable constructor and ‘this’ argument
###4.How to make a div take the remaining height? A:
- Flex
- Absolute Positioning
- Table
- CSS3 cacl
Reference:How to make a div take the remaining height
###5.Dynamic modal height based on content in Ionic4? A:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
###6.Invalid Host Header
A:通过外网访问本地的 ionic 开发服务时提示 Invalid Host Header,原因是 angular 默认会对 host 进行验证,所以我们可以通过传入 --disableHostCheck=true
来关闭验证,由于是 ionic 工程,我们传入的参数需要在 --
之后,也就是类似如下命令: ionic serve --port 8080 -- --disableHostCheck=true
.
ionic serve uses the Angular CLI. Use ng serve –help to list all Angular CLI options for serving your app. See the ng serve docs[1] for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the – separator after the Ionic CLI arguments.
Reference:Ionic 4 angular - Invalid Host header error
Reference:
###7.error: illegal character: ‘\ufeff’ in java A:You probably have a Byte Order Marker (BOM) at the start of the file. You can use sed to remove it:
sed '1s/^.//' infile >> outfile
Reference:
###8.Why super.clone can downcast to subclass?
A:
The method clone for class Object performs a specific cloning operation. First, if the class of this object does not implement the interface Cloneable, then a CloneNotSupportedException is thrown. Note that all arrays are considered to implement the interface Cloneable and that the return type of the clone method of an array type T[] is T[] where T is any reference or primitive type. Otherwise, this method creates a new instance of the class of this object and initializes all its fields with exactly the contents of the corresponding fields of this object, as if by assignment; the contents of the fields are not themselves cloned. Thus, this method performs a "shallow copy" of this object, not a "deep copy" operation.
Reference:
###9.How to generate MetaModel classes with Spring Data JPA in eclipse? A:
- add maven denpendency
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-jpamodelgen</artifactId>
</dependency>
- Maven > Update project
###10.Use webroot plugin to obtain certificates A:
$ certbot-auto certonly --webroot --webroot-path /var/lib/tomcat8/webapps/ROOT -d www.tenneshop.com --webroot-path /var/lib/tomcat8/apiapps/ROOT -d api.tenneshop.com
Reference:
###11.flex 布局下怎样实现text-overflow: ellipsis 效果? A:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
|
Reference:
###12.Disable Hypertext Application Language (HAL) in JSON?
A:spring.data.rest.default-media-type=application/json
Reference:
- Disable Hypertext Application Language (HAL) in JSON?
- How to set the default media type for spring-data-rest?
###13.What is the speed of each preset option for network throttling? A:
1 2 3 4 5 6 7 8 9 |
|
Reference:
###14.Allocation failed - JavaScript heap out of memory
A:export NODE_OPTIONS=--max_old_space_size=8192
Reference:
###15.How to Find JAVA_HOME
A: java -XshowSettings:properties -version
Reference: