shopify js冲突

2022.04.28

635

mfshop 提供专业shopify js冲突资讯,平台拥有众多shopify js冲突词分析师,帮助您解决您的问题,有任何疑问:shopify js冲突均可点击右侧客服进行咨询,我们为您提供一站式shopify js冲突服务,感谢您的访问!

Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star。本文将从各方面对Vue.js做一个深入的介绍。

开发初衷

2013年底,我还在谷歌创建实验室工作。 当时在项目中使用了Angular一段时间,在哀叹数据绑定提高生产力的同时,也觉得Angular的API设计过于繁琐,学习曲线变得陡峭。 出于对Angular数据绑定原理的好奇心,我开始“制造车轮”,自己实现了一个基于非常粗略依赖收集的数据绑定库。 这就是Vue.js的前身。 另外,在实际开发中,我们还发现用户界面可以在嵌套组件树中完全编写,而单个组件可以与MVVM的ViewModel兼容。 因此,我决定将数据绑定实验改进为真正的开源项目。 其核心思想是“数据驱动组件系统”。

MVVM 数据绑定

MVVM的本质是通过数据绑定链接View和Model,并将数据更改自动映射到视图更新。 Vue.js在数据绑定的API设计中参考了Angular的指令机制。 用户可以使用具有特殊前缀的HTML属性实现数据绑定,使用常规大括号模板进行插值,以及在表单元素中使用双向绑定。

! -命令-

span v-text='msg'/span

! 插值-

span{{msg}}/span

! -双向绑定-

input v-model='msg '插值本质上也是指令,只是为了方便模板的写入。 编译模板时,Vue.js会为需要动态更新的每个DOM节点创建指令对象。 每当指令对象观测到的数据发生变化时,都会对绑定的目标节点执行相应的DOM操作。 基于指令的数据绑定将所有特定的DOM操作合理地封装在指令定义中,业务代码只能涉及模板和数据状态操作,大大提高了APP应用程序的开发效率和可维护性。

shopify js冲突

图1 Vue.js的MVVM体系结构

与Angular不同,Vue.js中的API没有复杂的模块、控制器、scope、factory和service等概念,而是全部以“ViewModel实例”为基本单元。

! -模板-

div id='app '

{{msg}}

/div//作为本机对象的数据

var data={

msg: 'hello!'

}

创建ViewModel实例

var vm=new Vue({ (

//选择目标元素

El : ' # APP ',

//提供初始数据

data :数据

} )渲染结果:

div id='app '

你好!

/div在渲染的同时,Vue.js也完成了数据的动态绑定。 如果此时更改data.msg的值,DOM将自动更新。 不是很容易理解吗? 此外,Vue.js还大大简化了自定义命令和过滤器的API。 有了Angular的开发经验,得到的速度会非常快。

数据观测的实现

Vue.js的数据观测实现原理与Angular有本质区别。 了解Angular的读者可能知道Angular的数据观测采用了脏检查机制。 每个指令都有一个对象,称为watcher,用于观测数据;一个范围中有很多watcher。 每次需要更新接口时,Angular都会遍历当前范围中的所有watcher,逐一评估它们,并将其与以前保存的旧值进行比较。 当评估结果发生变化时,将触发相应的更新。 此过程称为digest cycle。 污渍检查有两个问题:

数据更改意味着必须重新评估当前范围内的所有watcher,因此,随着watcher数量的增加,不可避免地会影响APP应用程序的性能,从而使优化变得困难。 如果数据发生更改,框架将无法积极检测更改的发生。 必须手动启动digest cycle才能启动相应的DOM更新。 虽然Angular通过在DOM事件处理程序中自动触发digest cycle节避免了此问题,但用户可能需要手动触发它。 Vue.js采用了基于依赖收集的观测机制。 原理上与老字号MVVM框架Knockout相同。 依存收集的基本原理如下

将本地数据改造为“可观察的对象”。 可观察的对象可以取值,也可以赋值。 在watcher评估过程中,所有取值的可观察对象都将当前watcher注册为其订阅者,并成为当前watcher的依赖关系。 一旦分配了依赖的可观察对象,它就会通知所有订阅者对其watcher的重新评估,并触发相应的更新。 相关性收集的优点是可以准确主动地跟踪数据的变化,没有上述脏检查这两个问题。 但是,传统的依赖收集实现(如Knockout )通常需要包装本机数据以创建可观察的对象,在取值和赋值时需要采用函数调用的形式,在进行数据操作时书写复杂且不直观Vue.js利用ES5的Object.defineProperty方法将本机数据对象的属性直接改造为getter和setter,在这两个函数内部实现依赖收集和触发,从而实现嵌套对象结构对于数组,通过包装数组的push等可变方法监听数组的变化。 这样,在处理Vue.js的数据和处理本机对象之间几乎没有差别。 [注意:如果添加/删除:属性或更改数组的特定位置元素,则必须调用特定函数,如obj.$add(key,value )才能触发更新。 这受限于ES5的语言特性。 ],数据操作逻辑更清晰、更顺畅,也更容易与第三方数据同步方案集成。

shopify js冲突

图2 Vue.js的数据观测和数据绑定实现图解

组件系统

大型APP应用程序需要将APP应用程序抽象为多个相对独立的模块,以实现分工、复用和可维护性。 在传统的开发模式中,只有在考虑重用时,才会将某个部分作为组件。 但实际上,可以认为APP应用类UI都由组件树组成: shopify js冲突

图3 UI=组件树

因此,Vue.js的设计以组件为核心概念。 可以说所有的vue.js APP应用程序都是围绕组件开发的。

注册Vue.js组件很容易。

vue.com ponent (我的组件),

//模板

template : ' div { { msg } } { privatemsg }/div },

//接受参数

props: {

msg: Stringbr

(,

//私有数据必须用函数返回,以便多个实例不共享一个对象

data :功能{

返回{

privateMsg: 'component!'

}

}

} )注册后,可以在父组件模板中将子组件作为自定义元素调用。

我的组件msg=' hello ' /我的组件渲染结果:

div hello组件! /divVue.js的组件可以理解为预定义行为的ViewModel类。 一个组件可以预定义许多选项,但最重要的是:

模板:模板声明数据与最终呈现给用户的DOM之间的映射关系。 初始数据(data ) :组件的初始数据状态。 对于可复用组件,这通常是私人状态。 接受的外部参数(props ) :在组件之间通过参数传递和共享数据。 参数的缺省设置是从上到下的单向绑定,但也可以显式声明为双向绑定。 方法(methods ) :对数据的更改操作通常在组件的方法中发生。 可以使用v-on命令绑定用户输入事件和组件方法。 生命周期挂接函数(lifecycle hooks ) :一个组件调用多个生命周期挂接函数(created、attached、destroyed等)。 这些挂接函数可以封装自定义逻辑。 与传统的MVC相比,控制器的逻辑可以理解为分散在这些挂钩函数中。 专用资源(assets ) :在Vue.js中,用户自定义的命令、过滤器、组件等统称为资源。 因为全局注册资源容易导致名称冲突,所以一个组件可以声明自己的专用资源。 专用资源只能由该组件及其子组件调用。 此外,同一组件树中的组件之间还可以通过内置事件API进行通信。 Vue.js为定义、重用和嵌套组件提供了完善的API,使开发人员能够像积木一样在组件中组装整个APP应用程序的接口。 这一观点的可行性在Facebook开源React中也得到了证实。

基于构建工具的单文件组件格式

Vue.js核心库只提供基本的API,本身对如何组织APP应用程序的文件结构没有太大的限制。 但是,如果要构建大型APP应用程序,建议使用Webpack vue-loader组合来更高效地开发组件。

Webpack是由Tobias Koppers开发的开源前端模块构建工具。 基本功能是将以模块格式编写的多个JavaScript文件打包到一个文件中,同时支持CommonJS和AMD格式。 但是,与此不同的是,它提供了一个强大的loader API,用于定义各种文件格式的预处理逻辑,使CSS、模板和自定义文件格式可以用作JavaScript模块。 Webpack还提供了许多高级功能,包括基于loader的自动分块按需加载功能、自动定位图像资源引用、确定是否根据图像大小在base64线上进行,以及在开发时热交换模块

我以Webpack的loader API为基础开发了Vue-loader插件,可以用这种单文件格式*.vue编写vue组件。

斯泰尔斯

. my-component h2 {

color: red;

}

/style

模板

div class='my-component '

h2Hello from {{msg}}/h2

other-component/other-component

/div

/template

脚本

遵循CommonJS模块格式

varother component=require './other-component ' )

//导出组件定义

module.exports={

data :功能{

返回{

msg: 'vue-loader '

}

(,

组件: {

' other-component ' : other component

}

}

在/script的同时,也可以将其他预处理器用于*.vue文件。 只需安装对应的Webpack loader。

style lang='stylus '

. my-component h2

颜色红色

/style

template lang='jade '

div.my-component

h2 Hello from {{msg}}

/template

脚本lang=' babel '

用Babel编译ES2015

导出默认值{

数据{

返回{

msg: 'Hello from Babel!'

}

}

}

像/script这样的组件格式可以将一个组件的模板、样式和逻辑三个元素组合到一个文件中,从而使开发变得更容易,也更容易重用和维护。 Vue.js本身还支持组件异步加载,并且与Webpack的块打包功能配合使用,可以非常轻松地实现组件的异步按需加载。

其他特性

Vue.js有几个有趣的特性:

批量更新异步DOM :大量数据更改时,所有受影响的watcher都会推入一个队列,每个watcher只进行一次队列。 此队列在进程的下一个“tick”中异步运行。 此机制可避免因同一数据多次波动而导致的额外DOM操作,确保所有DOM写入操作一起执行,并避免因读写DOM而导致的布局。 动画系统: Vue.js提供了一个简单强大的动画系统,当一个元素的可见性发生变化时,用户不仅可以方便地定义相应的CSS Transition或Animation效果,而且可以方便地定义丰富的JavaScript效果可扩展性:除了自定义命令、过滤器和组件之外,Vue.js还提供灵活的mixin机制,允许用户在多个组件中重用通用功能。

了解

与Web Components的异同

web组件的读者看到这里可能会产生疑问。 Vue.js的组件和web组件的区别在哪里呢? 现在让我们来简单分析一下。

更好的比较对象可能是Polymer,因为Web Components是基础规范,不具有数据绑定、动画系统等高级功能。 Polymer与API在功能上类似于Vue.js,但由于对Web Components的高度依赖,浏览器支持存在问题。 不支持—— web组件规范的浏览器需要加载大量的poly文件,不仅具有性能,还有ShadowDOM等功能,同时web组件规范本身还不确定相反,Vue.js在支持的浏览器(IE9 )中没有任何依赖关系。

此外,在支持web组件的环境中,通过使用web组件的底层API将Vue.js组件封装到真正的自定义元素中,可以将Vue.js组件和其他框架封装到框架中

总结

发布之初,Vue.js原本着眼于轻量级嵌入式设备的使用场景。 即使在今天,Vue.js也适用于这样的场景。 重量轻(22kb min gzip ),性能高,所以也很适合移动场景。 更重要的是,要设计完整的组件系统及其相应的构建工具和插件,使Vue.js在保持简单API的同时,完全有能力开发复杂的大型APP应用程序。

在从诞生到现在的一年半的历史中,Vue.js经历了彻底的重构,经历了多次API的设计改进,现在已经稳定,测试覆盖率长期保持在100%,github bug的数量长期保持在一位数,在世界各地已经是公司Vue.js将在2015年晚些时候发布1.0版,敬请期待。

【参考链接】

Vue.js官网: http://vuejs.org

本文选自程序员电子版2015年8月a刊。 这段时间的更多文章请看这里。 自2000年创刊以来,所有的文章目录都请看程序员的封面表演。 欢迎使用面向程序员的电子版(包括iPad版、安卓版和PDF版)。

欢迎来到CSDN前端交流集团2:465281214。 进行前端技术交流。

扫描以下二维码,加入CSDN前端大礼堂微信群,享受高含金在线公开课的同时,还可以与专家讲师在线切磋交流。 如果组受到限制,请以“Rachel_qg”为朋友,注明“参加CSDN前端大礼堂”,申请加入组。 )

最近的CSDN前端大礼堂课程预告:

分享主题概述: React带来的革命性创新是前端世界过去几年中最令人兴奋的变化。 自从接触到React以来,React确信它将彻底改变客户端开发人员(包括前端、iOS和安卓)的开发体验。 本公开课将从目标平台(targets )、数据处理(data )、工具)、新挑战四个大方向分享React生态系统和社区发展及未来趋势。 它还在线回答前端开发人员在使用React时遇到的困难。

主讲人介绍:郭达峰,Strikingly.com CTO,联合创始人,有多年前端开发经验。 2010年开发了3个Facebook平台APP,获得千万以上的用户。 2012年成立台站平台Strikingly,成为首批进入YC孵化器的中国人团队。 Strikingly.com已经使用React重写了大部分的APP应用程序,是国内经常使用React的公司之一。

联系电话 400-6065-301

留言