软件分析与设计
Pages: 1/7 First page 1 2 3 4 5 6 7 Next page Final page [ View by Articles | List ]
Jan 14
https://eslint.bootcss.com/docs/user-guide/getting-started

npm包:
Quotation

    "eslint": "^7.17.0",
    "eslint-plugin-vue": "^7.4.1",


配置lint文件
Quotation

。。。
"globals":{
        "Vue": true,
}
。。。

或js文件
/* global Vue */

配置.eslintignore
例如除了src目录,其他的都不检查
Quotation

!src

或js文件
/* eslint-disable */
。。。
/* eslint-enable */

rules:
"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用数组构造器
"no-bitwise": 0,//禁止使用按位运算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger

Jan 5
https://github.com/fxsjy/jieba
支持四种分词模式:
精确模式,试图将句子最精确地切开,适合文本分析;
全模式,把句子中所有的可以成词的词语都扫描出来, 速度非常快,但是不能解决歧义;
搜索引擎模式,在精确模式的基础上,对长词再次切分,提高召回率,适合用于搜索引擎分词。
paddle模式,利用PaddlePaddle深度学习框架,训练序列标注(双向GRU)网络模型实现分词。同时支持词性标注。paddle模式使用需安装paddlepaddle-tiny,pip install paddlepaddle-tiny==1.6.1。目前paddle模式支持jieba v0.40及以上版本。jieba v0.40以下版本,请升级jieba,pip install jieba --upgrade 。PaddlePaddle官网
支持繁体分词
支持自定义词典
MIT 授权协议
Jan 5
浏览器有一个安全机制即同源策略,所谓同源就是两个资源具有相同的协议(protocol),主机(host)端口号(port)。浏览器不允许客户端脚本访问非同源的资源,如果客户端发起这样的请求就产生了跨域问题。

跨域发生的场景:
前后端数据联调的时候,前端服务在A域名下,而后端API 服务在B域名下,从A发ajax请求到B就发生了跨域。

跨域的3种解决方案
一、JSONP
JSONP (JSON with Padding) 是一种目前不太常用的解决方案,他的原理是通过script标签去请求URI资源,后端收到请求后返回一个callback函数并将数据放到函数的参数中,前端执行函数时即可获取到参数数据。

之前小编在使用过程中踩过2个坑:

    
一个是当时同时发了2个JSONP的请求a和b,结果发现b得到是a请求的结果,后来发现两个JSONP请求设置了同一个函数名,显然当后一个请求完成时把之前的同名函数给覆盖了。
    
另一个是请求发出后浏览器一直报CORB的异常,提示后端返回数据的MIME类型应该是javascript,排查发现后端返回的content-type类型是application/json应该处理修改为application/javascript。
如上可以总结出,JSONP的几个特点:

    
必须前端和后端一起合作修改代码;
    
只能发送get请求;
    
script标签请求资源,而不是xhr;
二、web Server代理
假设前端服务在A域名下,而后端API 服务在B域名下,从A发ajax请求到B就发生了跨域。那么,前端服务器代理这种解决方案就是让前端一直访问同源的A域名,当匹配到某个路径开头的URL时(如"/api"),将其代理到B域名。

这种方式又称为隐藏跨域,浏览器一直认为访问的资源没有跨域,实际是服务器做了处理。我们开发的时候经常使用,比如:在vue.config.js或是webpack.config.js中配置devServer的相关参数来实现代理,或者是使用nginx做代理。

// vue.config.js module.exports = {   devServer: {       proxy: {         '/api/': {           target: 'http://localhost:4000',          }       }   } } 复制代码
三、CORS跨域资源共享--后端方案
跨域资源共享是w3c规范,真正意义上解决跨域问题。它需要服务器对请求进行检查并对响应头做相应处理,从而允许跨域请求。

1.简单请求:
对于简单请求,设置如下的响应头即可:

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000') 复制代码
可以根据后端的白名单去确定允许的源,当然测试时也可以设置允许任何源访问。

这里提到了简单请求,什么是简单请求?

满足简单请求的3个条件:

    
1.请求方法为:GET/POST/HEAD 之一;
    
2.当请求方法为POST时,Content-Type是application/x-www-
form-urlencoded,multipart/form-data或text/plain之一;

    
3.没有自定义请求头;
    
4.不使用cookie;
2.复杂请求先预检:
当有一项不符合简单请求的条件时,浏览器会发出OPTIONS预检请求,那么后端需要实现对OPTIONS请求的处理,并通过设置头允许访问资源。

举个例子:

1.当请求方式为PUT请求时,需要如下设置:

// 前端发送PUT请求 await axios.put("/api/users")  // OPTIONS  res.writeHead(200, {    "Access-Control-Allow-Origin": "http://localhost:3000",    "Access-Control-Allow-Methods": "PUT" }); // PUT res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); 复制代码
2.当此时需要给后端提交数据时,需如下设置:

// 前端发送PUT请求,且带数据
await axios.put("/api/users",{a:"b"})  
// OPTIONS  res.writeHead(200, {     "Access-Control-Allow-Origin": "http://localhost:3000",     "Access-Control-Allow-Headers": "Content-Type",     "Access-Control-Allow-Methods": "PUT" }); // PUT res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); 复制代码
3.在上面2的基础上还要设置自定义请求头,需如下设置:允许自定义请求头

// 前端发送PUT请求,且带数据 await axios.put("/api/users",{a:"b"},{headers:{"x-token":"jjj"}}) // OPTIONS  res.writeHead(200, {     "Access-Control-Allow-Origin": "http://localhost:3000",     "Access-Control-Allow-Headers": "Content-Type, x-token",     "Access-Control-Allow-Methods": "PUT" }); // PUT res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); 复制代码
4.在上面3的基础上还要请求带cookie,需如下设置:

// 前端发送PUT请求,且带数据
axios.defaults.withCredentials = true await axios.put("/api/users",{a:"b"},{headers:{"x-token":"jjj"}}) // OPTIONS  res.writeHead(200, {     "Access-Control-Allow-Origin": "http://localhost:3000",     "Access-Control-Allow-Headers": "Content-Type, x-token",     "Access-Control-Allow-Methods": "PUT",     'Access-Control-Allow-Credentials':'true' }); // PUT res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); res.setHeader('Set-Cookie', 'cookie=123;'); res.setHeader('Access-Control-Allow-Credentials', 'true'); 复制代码
Access-Control-Allow-Credentials的意义是允许客户端携带验证信息,例如 cookie;
Jul 28
保存为扩展名.reg的注册表文件后,双击导入注册表即可



Jun 21

 各位读者好,我最近在 Github 上面发起了一个 JavaScript 算法和数据结构 的仓库,里面有经典算法的集合,还有带有解释的以及进一步阅读的文章链接和 YouTube 的链接的用 JavaScript ES6 实现的数据结构。也有 算法和数据结构 的 YouTube 的播放列表,包含了所有在仓库中提到的视频,你或许会很方便地点击链接就进入课程学习了:)

因此我猜想你已经掌握了项目的主要理念 - 帮助开发者学习和练习算法并且通过 JavaScript 实现。

为了让这个过程更顺畅,我试着为每一个算法和数据结构放了图解的插画,有助于掌握和记住那些算法背后的原理。

你或许在根 README 文件里面发现一些实践的信息,你学习的时候会很方便。一些例如这样的信息:

        
  • 大 O 记号图 - 快速查看哪些算法是最糟的 O(n!) 或者 O(n²)
  •     
  • 一些最常用的大 O 记号列表和它们的性能比较 - 理解 10! 有多大(是 3628800)
  •     
  • 数据结构操作的复杂性 - 为不同的数据结构搜索,读取,插入有多快
  •     
  • 排序算法复杂度的比较表 - 帮助你根据实际情况选择更合适的排序算法。

所有的代码都有 100% 的测试覆盖率。这样做不仅保障了代码能够正确的运行,也给了一个每一个算法和数据结构是如何工作的说明,它们都有哪些基础的操作(假设轮询堆)和边界情况是什么(如果图是有向做什么)。

仓库也有一个训练场(playground)。这仅仅是一个带有空测试案例的小函数模板,在你克隆这个仓库后帮助你开始测试或者运行算法。

当前涵盖有以下数据结构

        
  • 链表(Linked List)
  •     
  • 队列(Queue)
  •     
  • 栈(Stack)
  •     
  • 哈希表(Hash Table)
  •     
  • 堆(Heap)
  •     
  • 优先队列(Priority Queue)
  •     
  • 前缀树/字典树(Trie)
  •     
  • 树(二叉查找树,平衡二叉树)(Tree Binary Search Tree,AVL Tree)
  •     
  • 图(有向和无向)(Graph both dirented and undirected)
  •     
  • 分离集(Disjoint Set)

最重要的是数据结构有超过 50 个流行算法实现。有 排序,查找算法,图/树/集合/字符串/数学 相关的算法。所有的算法也会按照他们的模式归类:

        
  • 暴力破解算法(Brute Force Algorithms) - 查看所有的可能性和选择最好的方案。
  •     
  • 贪婪算法(Greedy Algorithms) - 在当前时间做最好的选择,不用为未来考虑。
  •     
  • 分而治之算法(Divide and Conquer Algorithms) - 将问题分为更小的部分,然后解决它们。
  •     
  • 动态规划算法(Dynamic Programming Algorithms) - 根据之前发现的小解决方案构建一个解决方案。
  •     
  • 回溯算法(Backtracking Algorithms) - 类似于暴力破解,尝试生成所有可能的解决方案,但是每次生成一个解决方案测试是否满足所有的条件,再产生后续的解决方案。否则回溯,然后从不同的路径开始寻找解决方案。

JavaScript 算法和数据结构 仓库仍在开发状态,后面还有更多的算法和数据结构。你可以贡献你的代码为仓库的一部分,也可以是一些众所周知的算法的实现!

希望这个仓库对你有帮助!享受编程吧!

May 21
包管理工具npm和yarn缓存
npm
缓存命令
npm cache 提供了三个命令,分别是npm cache add, npm cache clean, npm cache verify。

npm cache add
官方解释说这个命令主要是 npm 内部使用,但是也可以用来手动给一个指定的 package 添加缓存。(This command is primarily intended to be used internally by npm, but it can provide a way to add data to the local installation cache explicitly.)

npm cache clean
删除缓存目录下的所有数据。从 [email protected] 开始,为了保证缓存数据的有效性和完整性,需要加上 --force 参数。

npm cache verify
验证缓存数据的有效性和完整性,清理垃圾数据。

缓存策略
npm 的缓存目录是通过 cache 变量指定的,一般默认是在 ~/.npm 文件夹(Windows 系统在 %AppData%/npm-cache 文件夹),可以执行下面的命令查看

npm config get cache
[email protected] 以前,每个缓存的模块在 ~/.npm 文件夹中以模块名的形式直接存储,例如 koa 模块存储在 ~/.npm/koa 文件夹中。而 [email protected] 版本开始,数据存储在 ~/.npm/_cacache 中,并且不是以模块名直接存放。

npm 的缓存是使用 pacote 模块进行下载和管理,基于 cacache 缓存存储。由于 npm 会维护缓存数据的完整性,一旦数据发生错误,就回重新获取。因此不推荐手动清理缓存,除非需要释放磁盘空间,这也是要强制加上 --force 参数的原因。

目前没有提供用户自己管理缓存数据的命令,随着你不断安装新的模块,缓存数据也会越来越多,因为 npm 不会自己删除数据。

离线安装
npm 提供了离线安装模式,使用 --offline, --prefer-offline, --prefer-online 可以指定离线模式。

–prefer-offline / --prefer-online
“离线优先/网络优先”模式。

如果设置为 --prefer-offline 则优先使用缓存数据,如果没有匹配的缓存数据,则从远程仓库下载。

如果设置为 --prefer-online 则优先使用网络数据,忽略缓存数据,这种模式可以及时获取最新的模块。

–offline
完全离线模式,安装过程不需要网络,直接使用匹配的缓存数据,一旦缓存数据不存在,则安装失败。

yarn
缓存命令
yarn cache 提供了三个命令,分别是yarn cache ls, yarn cache dir, yarn cache clean。

yarn cache ls
列出当前缓存的包列表。

yarn cache dir
显示缓存数据的目录。

yarn cache clean
清除所有缓存数据。

缓存策略
官方文档没有详细介绍缓存策略,不过进入缓存目录也可以看出一些端倪。在 ~/Library/Caches/Yarn 文件夹中,每个缓存的模块被存放在独立的文件夹,文件夹名称包含了模块名称、版本号等信息。

离线安装
yarn 默认会使用 “prefer-online” 的模式,也就是先尝试从远程仓库下载,如果连接失败则尝试从缓存读取。yarn 也提供了 --offline 参数,即通过 yarn add --offline 安装依赖。

另外 yarn 还支持配置离线镜像,通过以下命令设置离线缓存仓库。具体细节参照官方博客《Running Yarn offline》。

yarn config set yarn-offline-mirror ./npm-packages-offline-cache
May 7
有后台的,npm组件的,基于ts的,集成单元测试的,更多可git上撸一下
Highslide JS
https://github.com/typescript-project

Pages: 1/7 First page 1 2 3 4 5 6 7 Next page Final page [ View by Articles | List ]