Comments (14)
我打算写个 create-template-app 这样就能快速搭建一个项目现场了o(╯□╰)o
from template.js.
升级到 >= [email protected] 已修复这个问题
先按in的方式修复的,后面有时间改为 hasOwnProperty
from template.js.
能否贴点代码?
from template.js.
呃。。那我就贴个简写的代码吧:
// js
let userTpl = require("./tpl/index.tmpl");
let USER_INFO = {isExpired:0}
$("#userInfoTpl").html(
userTpl(
$.extend(USER_INFO, {
// isExpired: USER_INFO.isExpired + "", // 如果值是数字0,那么tmpl会丢失这个变量(这是后来写的)
})
)
)
<!-- index.tmpl -->
if(isExpired != 0) {#>
<p>一开始是被提了 bug,查了发现这个 if 判断结果一直是 true</p>
<#}#>
<p>然后我就打印了一下发现没有打印出 0,而是空<#:=isExpired#></p>
// webpack.base.conf.js
module: {
rules: [
// eslint
{
test: /\.(js)$/,
loader: "eslint-loader",
enforce: "pre",
include: [path.join(__dirname, "src")],
options: {
fix: true
}
},
// 处理js, 兼容处理到es5
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
plugins: [
"@babel/plugin-transform-runtime",
"@babel/plugin-transform-modules-commonjs"
]
}
}
},
// html处理
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
minimize: true, // 压缩
attrs: ["img:src", "img:data-src", "audio:src"], // 处理html文件中的src引用
root: path.resolve(__dirname, "./dist")
}
}
]
},
// ejs模板处理
{
test: /\.ejs$/,
use: ["ejs-loader?variable=data"]
},
// 字体处理
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
use: {
loader: "file-loader",
options: {
// 保留原文件名和后缀名
name: "[name].[hash:7].[ext]",
// 输出到dist/fonts/目录
outputPath: "fonts"
}
}
},
// htc文件处理
{
test: /\.(htc)$/,
use: {
loader: "file-loader",
options: {
// 保留原文件名和后缀名
name: "[name].[hash:7].[ext]",
// 输出到dist/static/目录
outputPath: "static"
}
}
},
// templatejs处理
{
test: /\.tmpl/,
loader: "templatejs-loader",
options: {
sTag: "<#",
eTag: "#>",
escape: false,
expression: 'require("@templatejs/runtime").default'
}
},
// 图片处理
{
test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
loader: "url-loader",
options: {
esModule: false, // 不使用es语法加载
limit: 1024, // 大小范围内使用base64
name: "[name].[hash:7].[ext]",
// publicPath: "./img",
outputPath: "img"
}
}
]
},
from template.js.
收到,我排查下 看起来很奇怪
from template.js.
亲 我好像没能复现啊
我的 app.js
var tpl = require('./demo.tmpl');
var html = tpl({
a: 0,
isExpired: 0,
});
document.getElementById('test').innerHTML = html;
我的demo.tmpl
<# if(isExpired != 0) {#>
<p>一开始是被提了 bug,查了发现这个 if 判断结果一直是 true</p>
<#}#>
结果是好的,下面是build完的代码,可以看到isExpired
也就是u
的判断都在的
(function(t) {
r.exports = function(r) {
var n = e(3).default
, o = "object" == typeof self && self.self === self && self || "object" == typeof t && t.global === t && t || this
, u = r.isExpired || n.functionMap.isExpired || o.isExpired;
try {
var i = "";
n.modifierMap;
return i += "",
0 != u && (i += "\n",
i += " <p>一开始是被提了 bug,查了发现这个 if 判断结果一直是 true</p>\n",
i += " "),
i
} catch (r) {
return r.name = "RenderError",
r.tpl = "demo.tmpl",
n.handelError(r),
"template.js error"
}
}
}
).call(this, e(2))
你是哪里搞的不对?我看你的代码里,if前面缺少一个 <#
<!-- index.tmpl -->
if(isExpired != 0) {#>
<p>一开始是被提了 bug,查了发现这个 if 判断结果一直是 true</p>
<#}#>
<p>然后我就打印了一下发现没有打印出 0,而是空<#:=isExpired#></p>
from template.js.
代码肯定是没问题的啦,少 <# 是因为少复制了吧大概,我修完那个 bug 以后昨天在开发新功能的时候又遇到了这个问题,今天我又试了一下,0 和 false 都会导致值丢失,如果正常无法复现的话可能是和我项目里的其他东西配合时出了问题吧。。。
如果 create-template-app 弄好的话麻烦@我一下,我想试试如何复现😂
from template.js.
我看了一下编译出来的代码
// 您复现编译出来是:
u = r.isExpired || n.functionMap.isExpired || o.isExpired;
// 我复现编译出来是:
a = e["emailTime"] || r.functionMap["emailTime"] || i["emailTime"];
这个 emailTime 就是昨天我写代码时又遇到时的变量
from template.js.
嗯我知道咋回事了,这个判断有问题啊。。。
e["emailTime"] 为0 或者徦值时 就会取||后面的。。。
a = e["emailTime"] || r.functionMap["emailTime"] || i["emailTime"]
应该这样判断。。。
a = "emailTime" in a ? e["emailTime"] : r.functionMap["emailTime"]
bug捉到了,我得发个版😳
from template.js.
嗯我知道咋回事了,这个判断有问题啊。。。
e["emailTime"] 为0 或者徦值时 就会取||后面的。。。a = e["emailTime"] || r.functionMap["emailTime"] || i["emailTime"]应该这样判断。。。
a = "emailTime" in a ? e["emailTime"] : r.functionMap["emailTime"]bug捉到了,我得发个版😳
这两种方式都有一个问题,会访问到原型链上的属性
var a = {};
a.toString // 能获取到
'toString' in a // true
更好的方式是用hasOwnProperty判断
a = a.hasOwnProperty("emailTime" ) ? e["emailTime"] : r.functionMap["emailTime"]
from template.js.
看着下只有2.x有这个问题,0.x没这个问题,不用修复
0.x的实现方式是遍历data
for(var key in data) {
var magickey = data['key'] // magickey 是一个黑魔法,相当于 var [key] = data['key']
}
- 0.x版本的问题是会存在击穿模式,如果一个变量data中没有传入,就会访问到window上
- 2.x修复了这个问题
- sandbox模式(沙盒)下,所有变量,即便data上没有传入,也不会访问到window上,更安全,但是用到系统api也需要注入,类似angular和vue
- 出于兼容性考虑,非sanbox模式下,依然会访问到window上的变量
- sandbox更安全
from template.js.
TODO:后面改成hasOwnProperty,同时加了单元测试后,在关闭这个issue
from template.js.
cli写好了,试试^_^
$ npx @templatejs/cli new myapp
# 选择对应的平台
# ❯ webpack4
# rollup
# parcel
# fis3
# browserify
# gulp
# browser
from template.js.
vscode插件上新,欢迎尝试
https://marketplace.visualstudio.com/items?itemName=yanhaijing1234.templatejs
from template.js.
Related Issues (20)
- 如何添加多个标签属性 HOT 3
- 对于双层循环中的使用 HOT 12
- 怎么设置sTag,eTag HOT 1
- 目录结构中以数字开头会导致编译错误 HOT 4
- 有没有类似于vue的格式化功能? HOT 3
- else怎么用呢 HOT 6
- html标签中class插值 在多class插值时会出现除第一个插值以外的值作为属性存在 HOT 3
- 变量中有中文会出现编码问题 HOT 3
- 在react中如何使用 HOT 1
- template.js模板语法使用自增变量出现异常 HOT 1
- template.js支持{{ }}这种语法格式吗? HOT 1
- templatejs-loader当tmpl模板文件使用CRLF换行时会出现Unexpected token ILLEGAL错误 HOT 4
- 请问兼容ie吗? HOT 9
- 使用问题 HOT 4
- 是否考虑类似 v-if、v-for 的写法? HOT 8
- 2020-08-18T21:25:03.000+08:00 日期怎么转换阿 HOT 5
- 请问这个数据为什么渲染不进去呢? HOT 2
- template-loader在webpack5下如何配置 HOT 2
- template里传入的data的key是uuid的情况下会报错。 HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from template.js.