以上对前端服务端环境和语言的单纯性要求太过复杂,所以我编写了一个轻量化、较为灵活、模块的MVVM前端框架——view。起始最初的想法是摆脱MVC进入MVVM,彻底摆脱PHP模板渲染做一个单纯的view,让项目做到“模块化+健壮可维护”。
-
-
index.html——pages.js——index.js——获取url路由——渲染模块html——引入公共css和js——渲染foot等公共html模块——引入本页html模块css和js——执行页面入口函数start_this_page()
新建并访问模块:
1)新建模块:pages/名字/名字.htm(格式.htm、.html都可以),pages/名字/名字.css,pages/名字/名字.js;
2)注册模块:config/pages.js,配置变量pages的参数即可,可以参照404页面模块的用法,注意路径和文件引入即可;
3)页面公共html模块部分渲染,需要将/pages/common/foot/foot/foot.js;
4)作为一款意在做前后端分离的框架,一款编译发生在客户端的框架,一款灵活并且页面模块化的应用,请保持自己自由自在的自信状态;
5)访问新建模块:“index.html#route=名字”,成功访问即可。
1)在pages/名字/名字.js中的start_this_page()为页面起始函数,本模块的其他操作应由此函数开始执行。
1)在文件夹pages/common/中新建文件“名字/名字.html”和“名字/名字.js ”;
2)在pages.js中将注册“名字/名字.js ”到页面公共资源变量page_public_file下即可;
3)具体“名字/名字.js ”内容可参考foot的写法。
1)将view应用放在服务器环境,比如apache、nginx、node、甚至对象存储里面;
2)直接部署,不需要再次编译。
1)本应用需要一个简单的服务器环境,直接从本地进入是不能运行的;
2)本应用不需要重新编译,即改即用;
3)浏览器最低需要支持ES6语法;
4)js、css等文件默认缓存100s。
---------------------------------------------------------------------
v2.2.0
1. 在使用过程中,发现view的所依赖的公共参数变量名称容易与pages里面的参数重名,虽然不影响项目运行,但是还是觉得很膈应。所以,这一次将config参数、pages.js参数利用Object将它们封装起来,减少函数或参数起名的难度;
2. 使用过程中,强调了pages入口函数的重要性,即在框架安全检测完,框架解析完,才能做页面模块的数据初始化;
3. 这一次巧妙融合了微信域名防封机制,利用后端语言PHP做最先的safe_check工具。剥离safe_check机制,已经将足够重复的js功能打包。同时,可以将view应用在微信公众号网页授权,而不依赖后端语言。总而言之,强调了前后端分离,强调了web的模块化应用。
v2.1.0
1. 依赖于ES6+jQ(+Api),其中jQ主要负责处理ajax请求;
2. 单页面,模块化,静态化;
3. 思维来源于php的模板渲染,同时为了摆脱代码中夹杂php代码;
4. 一些安全设置来自于语言自带的特性(比如:模块页面上添加的js不能运行,但是css可以。);
5. 众所周知,基于api的页面无法更好的支持SEO。
整个web端项目完全托管于CDN容器里面,速度贼快。 http://cdn.meishid.cn/view-play/index.html
view框架的应用demo。BBC,VOA等在线广播收听——利用view的框架和设置实际应用一个web应用。 https://github.com/fyonecon/view-play
https://github.com/fyonecon/view-php
0. view的速度能力完全依靠文件的【CDN+api+客户端】能力,可以不依赖于node。渲染过程:依赖器将初步页面组装完成——页面进行api交互丰富页面内容。只需要两步即可完成页面所有内容的加载;
1. view/depend/文件夹包含了框架解析与加载模块文件,需要单独配置view/data/pages.js文件来注册模块文件;view/public/文件夹包含了公用和模块公用js;view/pages/文件夹是放置模块源文件的地方;
2. 页面没有太多的服务端环境和语言版本的要求,不需要分开发环境和生产环境,即改即用。甚至可以将整个项目直接放置在CDN里面,因为所有文件都是静态文件,数据依赖于ajax来渲染;
3. 配置与操作文档在public/doc文件夹;
4. 中型项目+多人协同 应该是没毛病的;
5. 对域名要求比较高的情况比如在微信中传播请将入口index.html更换为index.php,以便处理服务器状态返回和防标记页面。
6. 页面生命周期(index.html--config.js--框架解析index.js--公共all.js/css文件--执行Wi-Fi广告劫持的验证与清除--pages.htm--pages.js--page_loaded.js)
打印日志:view.log(txt)
写入htm文件:view.write_htm(file_path, by_id, cal_func)
写入js文件:view.write_js(js_src_array, call_func)
获取url中的参数:view.get_url_param(url, key)
设置cookie:view.set_cookie(name, value, time)
获取cookie:view.get_cookie(name)
删除cookie:view.del_cookie(name)
获取localStorage:view.get_data(name, value)
md5加密:view.md5(string)
base64加密:base64_encode(string)
base64解密:base64_decode(string)
设置页面数据缓存,即用即走:view.set_cache(key, value)
读取页面数据缓存:view.get_cache(key)
POST请求:view.request_post(api, map_data, call_func)
GET请求:view.request_get(api, map_data, call_func)
string转json格式:string_to_json(string)
json转string格式:json_to_string(json)
设置、读取、删除、清除本地数据(关闭页面数据仍存在):set_data(key, value)、get_data(key)、del_data(key)、clear_data()
-------------------------------------------------------------------------
-