W3C,HTML5,xhtml+css,div+css,ajax代码之美,始终努力坚持写出漂亮高效的代码!
Pages: 1/47 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 ]
Oct 20


在生成的.husky目录下新建

新建pre-commit文件

新建commit-msg文件


package.json,这样后面的兄弟们在yarn的时候就初始化husky了


根目录新建.commitlintrc.js文件
Oct 20
在项目下新建文件.npmrc

重新yarn
Sep 22
Vue3.0 正式版已经发布一段时间了,除了拥抱函数式编程,还带来了新的语法糖,用以替代原本需要大量 return 的写法
基础用法
想要使用 setup 模式只要在 script 标签上面加个 setup 属性就可以了。这个模式下不需要 return 和 export 就可以在模板中使用。

使用 props、emit

使用生命周期钩子

setup 语法糖的缺陷
这个语法糖暂时还不支持单文件导出内容,如果使用 export 导出模块会导致编译报错。

不支持设置组件名,传统的 options 写法有个 name 属性可以设置组件名,这个在编写递归组件的时候很有用

不支持 jsx,不过如果需要使用 jsx 的话,个人还是建议直接使用传统方式,setup 函数可以直接 return 一个 jsx 函数。而且 Vue 3.0 已经默认支持 css module 了,jsx 的体验会比之前更好。


其他



写在最后
这个特性其实还是实验性质的,可能会有不少我暂时还没遇到的奇怪 bug,所以不建议在生产环境使用。不过他确实可以精简不少的代码,特别是哪种内容比较丰富的页面,尽管可以拆成多个子组件和 hooks,但是在拆分的比较多的情况下,引入模块也不可避免地要写一堆的模板代码,相信这样的编码方式以后会成为 Vue 的标准范式。
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
        }
Jul 31
遇到vue一直报错assigning to rvalue解决,一直以为是js代码的问题,后面找了很久的原因,才发现是在html的模板中v-model绑定的属性并没有在data属性中定义

v-model绑定错误引起
Jul 31
xml字符串和对象转换
xml string转xmlobject


xml object转string


js操作xml对象方法和属性集合

节点对象属性

childNodes—返回节点到子节点的节点列表

firstChild—返回节点的首个子节点。
lastChild—返回节点的最后一个子节点。

nextSibling—返回节点之后紧跟的同级节点。

nodeName—返回节点的名字,根据其类型。
nodeType—返回节点的类型。
nodeValue—设置或返回节点的值,根据其类型。

ownerDocument—返回节点的根元素(document对象)。

parentNode—返回节点的父节点。

previousSibling—返回节点之前紧跟的同级节点。

text—返回节点及其后代的文本(IE独有)。

xml—返回节点及其后代的XML(IE独有)。

节点对象的方法

appendChild()—向节点的子节点列表的结尾添加新的子节点。

cloneNode()—复制节点。

hasChildNodes()—判断当前节点是否拥有子节点。

insertBefore()—在指定的子节点前插入新的子节点。

normalize()—合并相邻的Text节点并删除空的Text节点。

removeChild()—删除(并返回)当前节点的指定子节点。

replaceChild()—用新节点替换一个子节点。

IE6独有

selectNodes()—用一个XPath表达式查询选择节点。

selectSingleNode()—查找和XPath查询匹配的一个节点。

transformNode()—使用XSLT把一个节点转换为一个字符串。

transformNodeToObject()—使用XSLT把一个节点转换成为一个文档。

NodeList对象

length –返回节点列表中的节点数目。

item()—返回节点列表中处于指定的索引号的节点。

例如:

Javascript代码

输出:title element:4
Jun 22
https://www.npmjs.com/package/px2rem
https://www.npmjs.com/package/postcss-px-to-viewport
Pages: 1/47 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 ]