Comments (6)
想问下老师对于 Node 作为 API 和静态页面中间层的处理。场景是既要满足SEO,又可以体现服务端渲染的首屏性能。类似的用户登录态 COOKIE/Token 该怎么维护,怎么处理既存在模板渲染又存在 JS 操作 DOM的情况。
比方说用ejs来初始化渲染一个列表,但是列表可能会动态变化,这时候又需要 JS 利用 AJAX 来获取数据后进行 DOM 操作这个列表。感觉很多重复性的工作可能会做两遍。如果项目的规模没有必要做类似 React Vue 的同构的话,怎么去平衡的处理「模板」和 「AJAX」.d
这里有个代码示例,一个 Controller
// node
async list() {
const res = await this.ctx.curl(
'/sth/list',
{
dataType: 'json',
},
);
await this.ctx.render('list.ejs', {
dataList: res.data || [],
});
}
一个 ejs
<% dataList.list.forEach(function(data) {%>
<p>xxxx</p>
<%})%>
还有 AJAX
const res = await fetch('/sth/list')
const listId = document.getElementById('list-id');
res.list.forEach(() => {
// replace or append html string...
})
from 2018.10.
@Beace ejs也有浏览器版引擎啊,然后利用webpack引入模版不就好了~
from 2018.10.
@miniflycn 嗯嗯,这个可以 👍。但是说到 webpack,毕竟是个多页面应用,我这里用 html-webpack-plugin 去注入生成的 CSS 和 JS 的时候,它识别不了 ejs include
之类的语法。对于多页面应用貌似必须把所有的 page 都定义到 entry 需要 js 的时候都 new 一下 html-webpack-plugin ,于是我就有一下的代码
const htmlPlugins = files.map(
file =>
new HtmlWebpackPlugin({
inject: 'body',
template: `!!raw-loader!${path.join(
__dirname,
`./client/pages/${file.filename}.ejs`,
)}`,
filename: path.join(__dirname, `./app/view/${file.filename}.ejs`),
chunks: file.chunks,
}),
);
module.exports = {
entry: {
page1: xxxx.js,
page2: xxx.js,
...xxxx,
}
....
plugins: [
...,
...htmlPlugins,
]
}
这样的做法是最好的方式吗?
from 2018.10.
@Beace 参考:
- jantimon/html-webpack-plugin#443 (comment)
- https://stackoverflow.com/questions/39063450/webpack-html-ejs-include-other-templates
1、可以换一个支持 include 的 loader 试试;
2、entry
可以用 fs.readdirSync
来自动生成(基于命名约定)。
from 2018.10.
问题1:老师在公司中会用类似Egg这样的框架,还是在koa这种基础上搭建。另外会用这种egg这种约定式的项目结构吗?,还是自己灵活配置的?
问题2:一次请求,nginx一层logs,pm2一层log,log4自己打一层log,我不知道这样描述是否准确,多层log在实际项目中怎么管理?遇到问题怎么看log。
问题3:在公司里面,怎么发布 部署?能否说下流程。(版本 灰度发布)。如果有空也说下前端项目的发布部署可以吗?感觉我们公司的部署方式太low
from 2018.10.
@javenchen 可以答疑的时候聊聊
from 2018.10.
Related Issues (20)
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 2018.10.