分类 web前端 下的文章

在无意间漫游网上的文章时,看到一个指出对JavaScript误解的部分提到了这个关于JavaScript私有对象的问题。

Private Members in JavaScript

在该文章中指出,在对象内部使用 var 创建的变量属于私有变量、这个是外部无法访问的。 在这里var的变量我们换一种说法就是局部变量。事实上不能算是真正的私有属性。

我们知道在面向对象编程中,一个类的属性、方法如果能够被其他类访问调用,那么这个是public 公开属性、方法。 但是他有一个隐式条件就是,他也能被类自身其他的方法访问。类的private 私有属性、方法虽然不能被外部属性访问,但是他是需要满足被同一个父类下的其他方法访问的。

而局部变量是方法内部创建的,他只能在当前方法的生命周期内被调用,如果一个JavaScript对象中包含了多个方法,在方法内部var创建的属性和方法,是不能被其他任何方法、包括同一个类的其他子方法调用。


在现代JavaScript的很多案例中,如果希望保持属性的私有性,我们一般可以采用 封装返回的方式生成对象。

var Constructor = function( id, el ){
    var obj = {};
    var id = id;
    obj.getElement = function(){ return el; }
    obj.getId = function(){ return id; }
    return obj;
}

在上述对象构造方法中,我们可以通过getElement(),getId()分别取出对应的元素和id,但是无法直接使用 .id, .el 的方式获取到对应的值、也无法直接修改更新该值。

在多数现代浏览器中我们都可能会遇到图片跨域被阻止的问题,一般来说跨域问题主要出现在前后端分离,云架构的web系统中。 在两年前的时候通过网上的搜索勉强应付了问题,但是每次使用或多或少还会有需要解决的小问题。这次弄清楚了之后发现之前网上大多数也都是一知半解,并没有解决核心问题,所以导致了瞎试,碰运气的方式来处理。

首先html2canvas跨域问题的原因 我们希望将html渲染为canvas 进而渲染为图像,这就需要将html中的资源加载到临时的canvas中,而这个时候,如果资源和当前页面不同源,就会被canvas认为有污染拒绝加载。这是出于浏览器出于安全的角度做的一个设定。

在这个时候,我们需要做的其实比较简单,在所有因为跨域被拒绝的资源从服务端返回一个header

Access-Control-Allow-Origin: https://aaa.bbb.com
Access-Control-Allow-Methods: POST, GET, PUT, DELETE

诸如网上的一些都是,不需要的:

Access-Control-Expose-Headers: 
Access-Control-Allow-Credentials: true

以阿里云OSS跨域做个说明, 在阿里云OSS后台的基础设置中,我们可以添加跨域设置。 来源:http://aaa.bbb.com METHODS: GET,POST (如果只针对于显示图片 GET就可以了) 允许headers,暴露headers都留空即可。 缓存时间留空或者写一个秒为单位的数字即可。

设置完之后,正常的跨域上传、跨域访问图片就已经可以正常工作了。(比如阿里云的JSSDK上传)

但是我们在html2canvas的部分,依旧是会报跨域问题。 这里的原因是,我们没有在访问跨域图片的时候,发送 origin 参数,这个origin参数需要时我们刚才在后台允许的 来源列表中。

我们为图片或其他资源添加origin可以直接写入到元素中,也可以通过js来添加

<img src="......." crossorigin="https://aaa.bbb.com" > <!-- 图片会发送跨域来源 -->
// var img = new Image();  
// var img = document.querySelector('img');
img.src = "......"; // 图片地址
img.crossOrigin = "https://aaa.bbb.com"; // 跨域来源

这时,我们通过浏览器的开发者工具查看网络请求,即可以看到Request中有一项: Origin: https://aaa.bbb.com

此时跨域问题得到精确解决。

README.md

后台管理系统结构说明

引入服务端入口(管理后台接口)

  • 初始化管理后台 Manager对象

    • 处理登录、鉴权
    • 处理默认访问路径
    • 初始化权限
  • 引入页面文件

    • header HTML头文件
    • customHeader (自定义)
    • aside 侧边栏导航菜单
    • customAside (自定义)
    • act ( page | default ) 核心内容输出 优先page路径
    • script 通用脚本
    • customFooter 自定义脚本
    • footer HTML底部 ( act页customJS在这里生效 )

系统用户的默认权限设置

90000 超级管理员 80000 管理员

40000 网站编辑 30000 创作者 10000 普通用户

最近有将AppSite框架进行公开发布(开源)的想法。 不过开源也就意味着更多的一份责任,如果是普通的个人系统还好,我们的系统商业化在很多中大型项目上,安全也是一个隐忧。

暂且先梳理一下

Appsite的宗旨是用于快速开发网络\云应用\物联网

全栈支持引擎 Full stack Supporting Engine 介于CMS与Framework之间

AppSite主要思想是面向数据编程

从某个侧面来看计算机信息技术本身就是对于数据的各种处理,而AppSite就是这样的思想,我们的核心引擎着重解决的是提供一个可以自适应处理各种不同结构数据的一套程序开发套件。 基于这些高度自适应的基础功能,我们可以方便的创建各种方法或对象、进而快速实现不同的业务逻辑的新增或调整。

例如,我们对于向数据库添加数据的时候,通用的使用的是:

$DB->add( $data, $table );      // 数据库实例化操作方法
USER::add( $data );                 // 组件静态方法

这里相当于我们告诉程序 “我有这些数据,你添加一下。” 程序则通过设定好的规范自动去完成数据整理以及后续操作。

- 阅读剩余部分 -

总体来说 Typecho做到了简洁实用,有些部分虽然有些简单或是有些不足,但是自行修改是十分便捷的,这非常适合用来维持一个单纯的博客系统。

因为近期实在是感受到了记忆力下滑、接触面过广的时候对于笔记、知识点记忆搜索的需求很强烈,不得不重新拾起曾经一度丢弃的个人博客。 区别在于以前更多的是设计作品展示、图片展示。现在更重要的是做技术博客。

在很久之前我一直以来习惯的就是使用WordPress来搭建博客和网站,曾经在做设计师的时候折腾过蛮多次WordPress来制作个人网站、在线教育网站,包括给别人搭建电子商务网站。 2017年 基本主义在线商城: 基本主义

但是由于一些原因、我不打算再尝试WordPress这个较重、同时风险也比较高的CMS 其中最主要原因还是因为折腾成本太高、想要去自定义的时候需要很了解这个框架的设计、想要深度定制的难度很大、修改别人的主题、模板的时候由于代码的结构化很差、所以想要做修改的时间成本异常的高。

(也正是因为2017年痛的领悟,所以自行开发了AppSite全栈框架) 现在自己再去写一个博客又感觉挺浪费时间的。

简书、lofter这类自由度不够、cnblogs、CSDN等技术博客又太过不能入眼, 所以决定还是找一个极简的cms来做,这时候正好发现了Typecho。

- 阅读剩余部分 -

Android WebView不能加载ajax?加载ajax无效?

!苹果或高版本的安卓webview可能会有跨域被拦截的问题,需要在服务端允许跨域。 另外高版本的webview注意使用HTTPS协议的请求,普通http将会被拦截 php示例代码:

header('content-type:application:json;charset=utf8');
header('Access-Control-Allow-Origin:*'); // 被允许的访问来源
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with,content-type');

1、WebView的支持js是否打开; webSettings.setJavaScriptEnabled(true);

2、webView拓展的api是否打开: webSettings.setDomStorageEnabled(true);

- 阅读剩余部分 -

客户: 博诺司明 技能: 视觉设计,网页设计,前端Html+Css3+Jquery 时间:2013.06-2013.7 链接:www.think-light.com 商用作品(请勿盗用)

thinklight-t.jpg

博诺司明是一家为客户提供照明一体化解决方案, 并且致力于推广高效舒适, 节能环保的照明理念的灯光服务解决商. 服务包括从项目初期的照明设计, 中期的灯具和智能化控制系统配置. 以及后期的系统维护和增值服务在内的全程照明服务.

对于该项目的理解主要集中在几个关键词: 透亮、节能、优雅 所选颜色:深灰+亮白+荧绿 设计元素:细实线

我们用荧光绿来营造节能环保的科技感,同时以亮白色搭配来提升整体页面的通透性,深灰色的元素图和文字与白色搭配彰显优雅的品味。 结构方面采用了细实线来穿插页面,是用来表现光线以及建筑结构的一种表达。 该方案得到了客户的一致好评,于2013年7月完结。

- 阅读剩余部分 -

客户: AGRION (议伦比) 技能: 网页设计 时间:2013.04-2013.04 链接:yilunbi.com 商用作品(请勿盗用)

index_style1.jpg

13年初自己成立的工作室的一个外企单子,客户是法国AGRION议伦比公司 这个案例主要是要求一种清新,简洁的商务风格,但同时对方公司希望强调一种活跃,有生气的氛围感。 给对方一共三个方案,分别是强调绿色科技、商务会谈、商务娱乐。最后客户选择了最后一个方案,对配色比较满意,同时他们也很喜欢不拘一格的版面结构。

- 阅读剩余部分 -