分类
未分类

JS 排序方法总结

正序排序:

function campare(value1,value2){

if(value1>value2){

return 1;

}else if(value1 == value2){

return 0;}else{

return -1;

}}

降序排序:

function campare(value1,value2){

if(value1<value2){

return 1;}else if(value1 == value2){

return 0;

}else{

return -1;

}}

冒泡排序:

function sort(arr) {

for (let i = 0; i < arr.length – 1; i++) {

for (let j = 0; j < arr.length – 1; j++) {

if (arr[j] > arr[j + 1]) {

let temp = arr[j];

arr[j] = arr[j + 1];

arr[j + 1] = temp;

}

}

}

return arr;

}

分类
前端开发环境 技术

基于docker 搭建Verdaccio的教程

其实按照网上的教程基本都能成功启动,为了方便下次查找我在整理下

docker pull verdaccio/verdaccio

首先

docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio

这样就可以运行了,但是这样文件和更改不能持久化,一重启动就没了,肯定不是我们想要的效果

 -v /home/verdaccio/storage:/verdaccio/storage
 -v /home/verdaccio/config:/verdaccio/conf
 -v /home/verdaccio/plugins:/verdaccio/plugins

这样就可以了。

然后你兴高采烈的一敲命令,报错了。

这个由于启动时容器会去找 /home/verdaccio/config/config.yaml 文件,所以在 config 文件夹新建该文件,填入以下内容:

storage: /verdaccio/storage
auth:
  htpasswd:
    file: /verdaccio/conf/htpasswd
uplinks:
  npmjs:
    url: https://registry.npm.taobao.org/
packages:
  '@*/*':
    access: $all
    publish: $authenticated
    proxy: npmjs
  '**':
    proxy: npmjs
logs:
  - {type: stdout, format: pretty, level: http}
  • htpasswd 文件是用来存储 npm 用户及密码信息的文件
  • uplinks 上游源改为了淘宝的镜像源,这样在下载找不到的包的时候就会从淘宝下载。
  • 需要注意的是,上面配置文件的路径都是针对 docker 容器内部来说的。

这样打开你本地的 4873 就可以访问了,更多的设置建议看官方文档

参考链接

https://verdaccio.org/docs/zh-CN/next/docker

分类
ionic 前端开发环境 技术

ionic 编译的环境变量配置

No installed build tools found. Install the Android build tools version

有时候,新电脑编译apk的时候会报这些错,这其实都是环境变量没配置好导致的

首先先找到自己的sdk安装位置

打开环境变量配置

%ANDROID_HOME%\platform-tools

%ANDROID_HOME%\tools

修改完终端记得关闭下软件再重新打开才可以生效,当然直接重启电脑也是没问题的

分类
未分类

教浏览器说话

function say(text, lang) {
    var synth = speechSynthesis;

    var utter = new SpeechSynthesisUtterance(text);
    utter.voice = synth.getVoices().find(v => v.lang === lang);

    synth.speak(utter)
}

用法示例

say(‘你好’,’zh-CN’);

分类
未分类

angular 编译

当我们开发完一个Angular应用的时候,如果有vue开发经验的,vue-cli有 npm run build 命令,一键式将资源打包成生产模式。同样,在angular的应用中,如果是angular-cli构建的项目,也有 ng build 命令,但是如果不加参数,默认是dev环境打包,所以我们在线上环境的时候,需要用 ng build –prod 命令。同样是构建,你知道 ng build –dev 与 ng build –prod 的打包区别吗?

总结下来应该有以下5点:

1、source map[map 文件]

dev模式在打包的时候会生成map文件,而生产模式则不会打包。不熟悉map文件作用的这里做简单的介绍,map文件的作用就是为了在应用资源在压缩后,如果出现错误,因为是压缩的资源,变量及方法名称都经过最简化处理,所以我们很难定位,这时map文件就将发挥作用,它可以帮我们在资源文件快速定位到错误的具体行号。

source map文件帮我们快速定位线上bug。但是你不想生成source map文件的话,我们可以使用 ng build –dev -sm false。同样,如果你想在prod环境生成source map文件,则也可以将其设置为true即可。

2、extract css [css样式单独抽取]

在开发环境构建的时候,css文件是不会单独抽出来打包成css文件,而是融合在js文件中,而在生产环境则相反。

当然在开发环境build的时候,我们也可以通过 ng build –dev -ec true 来将样式文件单独抽离出来打包成css文件,只不过在prod环境默认设置成了true而已。

3、Minification and Uglification[资源压缩]

在生产环境打包的时候代码是经过压缩及beatufiy的。这里简单说下,代码压缩包括对代码的空格、换行及注释的处理,beautify处理就是将我们的代码变量及方法名、参数名经过最简化处理。这两个过程都是为了减少及压缩线上代码体积的大小。

4、Tree Shaking[去除不必要的资源]

生产环境打包模式的时候,代码是经过tree shaking处理的,而开发环境打包模式是没有的。这里讲一个概念,什么是tree shaking?打过比方,tree shaking就是相当于去除我们实际在线上没有用过到的代码。举一例子:比如我们在写代码的过程中,写了一个组件,但是我们在实际过程中没有用到这个组件,那么在实际打包过程,是不会将这个组件打包到最终的bundle里面的。tree shaking形象化来理解就是通过摇曳去除那些枯叶【没用的代码】。

5、AOT(Ahead-Of-Time) Compilation[预编译资源]

开发环境模式的编译模式是JIT编译模式,而生产环境的编译模式是AOT编译模式。这里说明下什么是AOT、JIT编译模式。AOT编译模式是指angular的模块及组件都是提前编译好的,所以当浏览器在懒加载到某个模块或组件的时候,它的响应相对来说会快些;而JIT编译模式则不会,它会相应的编译后才会出现来。当然AOT编译模式还具有其他的优势,比如减少实际的打包体积,同时如果应用本身在打包的过程如果出错的话,是会编译报错,不会打包成功。

分类
未分类

git 自动认证失败

git config –system –unset credential.helper

清楚保存的密码和用户名

然后重新尝试就会提示你输入用户名和密码了

分类
ionic

Could not resolve com.android.support:support-annotations:27.+

Could not resolve com.android.support:support-annotations:27.+

ionic 打包的时候

遇到这个问题的时候,ionic 编译会失败,出了更改版本外,还可以

找到所有的

build.gradle 加入这行就可以

repositories {
        google()
        maven { url "https://maven.google.com"}
        maven { url "https://dl.google.com/dl/android/maven2/"}
}

分类
angular

angular 不安全的url

当angular 引用外部的url 有时候会报错,比如在iframe 中嵌入了外部url

通用一点的做法是新建一个pipe 用来让url 变为安全 。

代码如下

Safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})

export class SafePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

module中引入

import { SafePipePipe } from ‘./SafePipe.pipe’;

@NgModule({
   imports: [
    
   ],
   declarations: [
      ...
      SafePipePipe
   ],
   entryComponents: [
    
   ],
   exports: [
     
   ]
})

HTML 中使用

 <iframe [src]=”url | safe”></iframe>

分类
未分类

修改ionic4的目标安卓版本

ionic4 有个叫 config.xml的文件

在这里加入几行就可以指定版本

<preference name="android-minSdkVersion" value="19" />
    <preference name="android-targetSdkVersion" value="26" />
    <preference name="android-maxSdkVersion" value="27" />

有什么作用的话,就是可以暂时规避android的安全设置。

最新的android版本对webview的http请求要求是https,但是https有时候设置起来不太方便。

这时候除了反代之外,其实可以将android的目标版本降低,这样就可以暂时规避,但为了数据安全考虑,建议尽早上https。

参考文档: https://cordova.apache.org/docs/en/latest/config_ref/

分类
未分类

html 内嵌到ios的环境下的缩放异常

尝试<head> 中加入

<meta name=”viewport”        content=”viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>