Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

增加导入模板(import template)功能 #722

Closed
wants to merge 8 commits into from
Closed

增加导入模板(import template)功能 #722

wants to merge 8 commits into from

Conversation

aben1188
Copy link
Contributor

@aben1188 aben1188 commented Jan 2, 2018 •
edited

Checklist
  • npm run test passes
  • tests and/or benchmarks are included
  • documentation is changed or added
  • cases or donate is changed or added
  • documentation is changed or added

@coveralls
Copy link

Coverage Status

Coverage remained the same at 86.096% when pulling d0f8ce2 on aben1188:master into 6f77e79 on Tencent:master.

@coveralls
Copy link

Coverage Status

Coverage remained the same at 86.096% when pulling b54cf64 on aben1188:master into 6f77e79 on Tencent:master.

@coveralls
Copy link

Coverage Status

Coverage remained the same at 86.096% when pulling b54cf64 on aben1188:master into 6f77e79 on Tencent:master.

Gcaufy
Gcaufy reviewed Jan 3, 2018
View reviewed changes
packages/wepy-cli/src/compile-template.js Outdated
//语法：<template import src="../relative/path/to/template.wpy" />
// 其中import属性也可写成import="true"
// 除了import属性与src属性，不支持其他属性
[].slice.call(node.childNodes || []).forEach(function (child) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updateBind 方法用于更新xml节点的属性，本身就是一个递归方法，在这里再遍历childNodes不合适

Copy link
Contributor Author

@aben1188 aben1188 Jan 3, 2018 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我测试下，看能否在compileXML方法内遍历......

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

经测试，不能在compileXML方法内遍历。而且，发现还只能放在updateBind方法的现有位置进行childNodes遍历，因为虽然updateBind方法本身确实存在递归调用不假，但这个递归调用是在if语句中进行的......

packages/wepy-cli/src/compile-template.js Outdated
// 其中import属性也可写成import="true"
// 除了import属性与src属性，不支持其他属性
[].slice.call(node.childNodes || []).forEach(function (child) {
if (child.tagName === 'template' && child.hasAttribute('import') && child.getAttribute('src')) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

使用template字段与本身的 script,template,style 相冲突， 另外，没有看到import字段的存在有什么意义，好像不使用这个字段也可以

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

template标签内要是没有import属性，则不能导入，因此必须显式地设置该属性，才能导入模板，这样就可以明显地区别于wepy模板标签和小程序原生模板标签了。

至于使用template与本身的 script,template,style 相冲突，我测试中倒是没发现（我测试了在页面中导入、在组件中导入，还测试了循环导入的情形），具体情况可能你更了解了。

@Gcaufy
Copy link
Collaborator

Gcaufy commented Jan 3, 2018

另外，这个与官方提供的 template 功能有什么区别呢？

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

@Gcaufy
Copy link
Collaborator

Gcaufy commented Jan 3, 2018

和wpy组件引用的方式又有什么区别呢？

@aben1188
Copy link
Contributor Author

aben1188 commented Jan 3, 2018

与小程序原生模板的区别就在于，原生模板本质上是残弱版的组件，有独立作用域，插值的变量必须在父组件中传值进去，父组件中无法直接操控原生模板内部，这一点与js的import和less/sass/scss的import在语义上并不一致。而我现在pr的这个模板导入语法中的import，在语义上倒是与这两者一致了。

@aben1188
Copy link
Contributor Author

aben1188 commented Jan 3, 2018 •
edited

由于小程序原生模板本质上与wepy组件都属于组件，因此属于纵向的代码组织形式，粒度上相对更粗，而我现在pr的这个模板导入，与js的import和less/sass/scss的import一样，粒度上相对更细，属于横向的代码组织形式。因此，两者完全正交。

@Gcaufy
Copy link
Collaborator

Gcaufy commented Jan 3, 2018

还是类似 php 中的 include的功能。这一类功能现在来说几乎没有使用场景了。
如果你想加入这个功能的话，在不影响原来编译的情况下，可以做为一个enhance功能加入。
代码请修改为：

<template>
    <include src="./a.wxml"></include>
</template>

@aben1188
Copy link
Contributor Author

aben1188 commented Jan 3, 2018 •
edited by Gcaufy

是的，与php的include功能类似，不过也与less中的import功能类似（与js在表现上倒是略有不同，虽然实际效果差不多）。在前端环境中，似乎使用import关键字比使用include关键字更为合适，不过小程序官方已经使用了import关键字。刚刚还发现，其实官方已经有了include wxml的功能https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/import.html
因此include关键字也被使用了。

@Gcaufy
Copy link
Collaborator

Gcaufy commented Jan 3, 2018

@aben1188 我在评论里已经说过，官方有模板的功能

@aben1188
Copy link
Contributor Author

aben1188 commented Jan 3, 2018 •
edited

但这是不同的：1）官方include的是.wxml，而我想要include的是.wpy（虽然这里include的其实也只是template模板部分，但变量插值语法与.wxml略有不同，比如事件处理函数的参数插值语法等）；2）官方include的.wxml是在原生小程序编译阶段复制合并的，而我想要include的.wpy是在wepy编译阶段复制合并的。

@Gcaufy
Copy link
Collaborator

Gcaufy commented Jan 3, 2018

  1. 不管是哪种include 都只能include wxml 文件， wpy 文件只能以组件的形式import进来
  2. 可以。 但本质上区别不大。

@aben1188
Copy link
Contributor Author

aben1188 commented Jan 3, 2018 •
edited

在wepy编译阶段复制合并，就意味着不仅可以在wepy页面中include，而且还可以在wepy组件中include wepy语法风格的template，并使用wepy组件的作用域，因此include进来的template中所插值的变量可以替换成$comName$varName的形式（我之前说不希望做这种形式的替换，其实当时的理解不够准确；准确地说应该是不作为wepy组件引用，否则会有独立的作用域，因此会被多套一层$comName，从而使得模板部分无法直接使用当前.wpy文件的作用域）。

@aben1188
Copy link
Contributor Author

aben1188 commented Jan 3, 2018 •
edited

测试了下，目前include标签中src属性所指向的.wxml文件，并不会在wepy编译阶段以及原生小程序编译阶段复制合并到当前文件。

@coveralls
Copy link

Coverage Status

Coverage remained the same at 86.096% when pulling 42ed0a2 on aben1188:master into 6f77e79 on Tencent:master.

@coveralls
Copy link

Coverage Status

Coverage remained the same at 86.096% when pulling 224cec5 on aben1188:master into 6f77e79 on Tencent:master.

@coveralls
Copy link

Coverage Status

Coverage remained the same at 86.096% when pulling ba8380b on aben1188:master into 6f77e79 on Tencent:master.

@aben1188
Copy link
Contributor Author

aben1188 commented Jan 3, 2018 •
edited

根据你之前的意见，改为了include标签，这样也与官方原生include标签在语义上保持了一致。

而与官方原生include的区别在于：
1）原生include只是“相当于”复制合并到当前文件，而这里的include是实际会复制合并到当前文件的，这样可以使得使用wepy语法的模板被wepy编译；
2）同时也使得复制合并过来的wepy模板能够参与当前文件作用域，这对于在wepy组件模板部分中include模板很有用。

@coveralls
Copy link

Coverage Status

Coverage remained the same at 86.096% when pulling ba8380b on aben1188:master into 6f77e79 on Tencent:master.

@coveralls
Copy link

Coverage Status

Coverage remained the same at 86.096% when pulling 81abf09 on aben1188:master into 6f77e79 on Tencent:master.

@stale
Copy link

stale bot commented Jun 12, 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
因为这个 Issue 最近没有任何有效回复，所以被自动标记为了stale。 如果在未来7天依旧没有任何激活操作，那么该 Issue 将会被自动关闭。 感谢您的提问。

@stale stale bot added the inactive Inactive issue, will be auto closed in 7 days label Jun 12, 2018
@stale stale bot closed this Jun 19, 2018
@snyk-bot snyk-bot mentioned this pull request Dec 31, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Gcaufy Gcaufy Gcaufy left review comments

Assignees
No one assigned
Labels
inactive Inactive issue, will be auto closed in 7 days
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@aben1188 @coveralls @Gcaufy