不忘初心,不负韶华,砥砺前行!
Pages: 1/296 First page 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next page Final page [ View by Articles | List ]
Jul 11
子曰:吾十有五而志于学,三十而立,四十而不惑,五十而知天命,六十而耳顺,七十而从心所欲,不逾矩。
希望时光安详静宜,偶尔的小确幸足以
Highslide JS
Jun 10
首先,移除一些冷门的 feature(比如 filter、inline-template 等);

其次,引入 tree-shaking 的技术,减少打包体积。

第一点很好理解,所以这里我们来看看 tree-shaking,它的原理很简单,tree-shaking 依赖 ES2015 模块语法的静态结构(即 import 和 export),通过编译阶段的静态分析,找到没有引入的模块并打上标记。
举个例子,一个 math 模块定义了 2 个方法 square(x) 和 cube(x) :

我们在这个模块外面只引入了 cube 方法:

最终 math 模块会被 webpack 打包生成如下代码:

可以看到,未被引入的 square 模块被标记了, 然后压缩阶段会利用例如 uglify-js、terser 等压缩工具真正地删除这些没有用到的代码。

也就是说,利用 tree-shaking 技术,如果你在项目中没有引入 Transition、KeepAlive 等组件,那么它们对应的代码就不会打包,这样也就间接达到了减少项目引入的 Vue.js 包体积的目的。
May 20
如果拿到的offsetTop为0,则往上循环得到设置滚动的root 容器的高度
        getOffsetTop (herfId) {
          let offsetTop = 0
          try {
            if (document.getElementsByClassName(herfId).length > 0) {
              let eleId = document.getElementsByClassName(herfId)[0]
              let par = eleId.offsetParent
              if (par.dataset.id == 带滚动的根容器id){ 
                // 当节点为body可直接使用offsetTop获取距离
                offsetTop += eleId.offsetTop// 获取高度
              } else {
                while (par) {  
                  // 循环获取当前对象与body的高度
                  offsetTop += par.offsetTop;
                  par = par.offsetParent;
                }
              }
            }
          } catch (e) {
            console.log(`getOffsetTop:${e.message}`)
          }
          return offsetTop
        }
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 31
遇到vue一直报错assigning to rvalue解决,一直以为是js代码的问题,后面找了很久的原因,才发现是在html的模板中v-model绑定的属性并没有在data属性中定义

v-model绑定错误引起
Pages: 1/296 First page 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next page Final page [ View by Articles | List ]