【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”
用VUE之类的前端,PHP/Java就变成了接口开发了,返回数据什么的。 不像以前还要结合模板引擎
VUE这种相当于运行在浏览器上的模板引擎,当然功能不止于此
表示正在学react三件套.
项目中有用到react.
其实我是希望只做php, 至少目前为止php好多不会.
MVVM 缺点就是模板数据绑定部分难以调试,除非MVVM框架能够给出准确的报错信息。
如有兴趣那就建议学习MVVM框架。但不是必须的。单页体验虽好,但开发成本也高一些。
/* jquery.pjax.mine.js */ (function($){ $.fn.pjax = function(selector, container) { //IE8之流不支持HTML5 onpopstate,自然不会执行插件 if("onpopstate" in window) { //AJAX加载函数 var load = function(href) { var time = 600; $(document).trigger("pjax:start", [time]); //执行开发者的自定义事件(如:显示加载进度条) var start = new Date().getTime(); $.ajax({ type: "GET", url: href, data: {_pjax_: new Date().getTime()} }).done(function(data){ //在回调函数中解析出head中的title和body中的指定块并更新(这样服务器端就不需要改变输出格式) var dom = $("<div>").html(data); document.title = dom.find("title").first().text(); $(container).first().html(dom.find(container).first().html()); var spend = new Date().getTime() - start; setTimeout(function(){ $(document).trigger("pjax:done"); //执行开发者的自定义事件(如:隐藏加载进度条) }, spend >= time ? 0 : time - spend); }); }; history.replaceState({href:location.href}, "", location.href); window.onpopstate = function() { //用户点击后退和前进按钮时触发该事件 if(history.state != null) { load(history.state.href); } } $(document).on("click", selector, function(e){ //用户点击页面链接时改变地址栏(URL)并写入历史记录以及AJAX加载页面 e.preventDefault(); var href = $(this).attr("href"); if(href != "javascript:void(0)") { history.pushState({href:href}, "", href); load(href); } }); } }; })(jQuery); //调用插件,用户点击链接后局部刷新class为pjax-container(要求唯一)的块并写入历史记录 $(document).pjax("a:not([target='_blank'])", ".pjax-container"); $(document).on("pjax:start", function(e, time){ //显示加载进度条 $(".load").css("width", 0).show().animate({width: '100%'}, time, 'swing'); }); $(document).on("pjax:done", function(){ //隐藏加载进度条 $(".load").hide(); });
我一直很好气,vue的出现关php屌事,你java或者node的性能好,你倒是去用啊。。。市面上这么多小型创意型项目,还真以为自己的项目一天到晚都能遇到性能瓶颈了。。。
用VUE之类的前端,PHP/Java就变成了接口开发了,返回数据什么的。 不像以前还要结合模板引擎
VUE这种相当于运行在浏览器上的模板引擎,当然功能不止于此
表示正在学react三件套.
项目中有用到react.
其实我是希望只做php, 至少目前为止php好多不会.
MVVM 缺点就是模板数据绑定部分难以调试,除非MVVM框架能够给出准确的报错信息。
如有兴趣那就建议学习MVVM框架。但不是必须的。单页体验虽好,但开发成本也高一些。
你可以看下实现同样功能Vue和jQuery的对比:
在input中输入内容后按enter键往ul里添加一条li和删除:
从回调函数里的操作可以看出,Vue面向数据编程,jQuery面向DOM编程.
Vue:
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{todo.text}}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
var vm = new Vue({
el: '#app',
data: {
newTodo: '',
todos: [{text: 'Add some todos'}]
},
methods: {
addTodo: function() {
var text = this.newTodo.trim();
if(text) {
this.todos.push({text: text});
this.newTodo = '';
}
},
removeTodo: function(index) {
this.todos.splice(index, 1); //从下标index开始,删除1个元素
}
}
});
jQuery:
<div id="app">
<input>
<ul>
<li><span>jQuery</span> <button>X</button></li>
</ul>
</div>
//处理enter添加事件
$("#app input").on("keyup", function(e){
if(e.keyCode == 13 && $(this).val() != "") {
$("#app ul").append("<li>"+this.value+" <button>X</button></li>");
$(this).val("").focus();
}
}).focus();
//处理button删除事件(因为button是后期动态生成的,所以需要把选择器写在on里面)
$("#app").on("click", "button", function(){
$(this).parent().remove();
});
PHP开发者还是先玩好jQuery比较有优势,而且PHP后端渲染HTML返回的方式也利于SEO.比如我自己写的一个jQuery小插件,后端不用改变,前端几行代码就能实现PJAX无刷新加载页面,而不支持PJAX的老旧浏览器则使用原始的方式刷新加载整个页面.
用我这个PJAX小插件的思路不需要改造后端就能实现单页应用的体验.
我一直很好气,vue的出现关php屌事,你java或者node的性能好,你倒是去用啊。。。市面上这么多小型创意型项目,还真以为自己的项目一天到晚都能遇到性能瓶颈了。。。