分类： javascript

浏览器页面自动刷新

2017年9月6日 by admin·已关闭评论

基于python的自动加载模块
https://github.com/lepture/python-livereload

测试脚本

#!/usr/bin/env python

from livereload import Server, shell

server = Server()

server.watch('../app')
server.watch('../config')
server.watch('../include')
server.watch('../module')

server.serve(host='0.0.0.0')

#!/usr/bin/env python

from livereload import Server, shell

server = Server()

server.watch('../app')

server.watch('../config')

server.watch('../include')

server.watch('../module')

server.serve(host='0.0.0.0')

页面加入js

class AutoReloadProvider implements ServiceProviderInterface{

    /**
     * Registers services on the given container.
     *
     * This method should only be used to configure services and parameters.
     * It should not get services.
     *
     * @param Container $container A container instance
     */
    public function register($container){
        $container->extend('view', function(View $view){
            $view->js->addFile("http://192.168.0.175:5500/livereload.js");
        });
    }
}

class AutoReloadProvider implements ServiceProviderInterface{

/**

* Registers services on the given container.

* This method should only be used to configure services and parameters.

* It should not get services.

* @param Container $container A container instance

public function register($container){

$container->extend('view', function(View $view){

$view->js->addFile("http://192.168.0.175:5500/livereload.js");

});

}

webpack2编译scss

2017年6月2日 by admin·已关闭评论

cnpm install --save-dev webpack sass-loader node-sass css-loader extract-text-webpack-plugin

1	cnpm install --save-dev webpack sass-loader node-sass css-loader extract-text-webpack-plugin

package.json

  "scripts": {
    "dev": "webpack --progress --watch --config webpack.config.js"
  }

"scripts": {

"dev": "webpack --progress --watch --config webpack.config.js"

}

webpack.config.js

var path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: 'css-loader'
            })
        }, {
            test: /\.(sass|scss)$/,
            use: ExtractTextPlugin.extract({
                use: [
                    'css-loader',
                    'sass-loader',
                ]
            }),
        } ]
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
    ]
};

var path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

entry: './src/index.js',

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist')

module: {

rules: [{

test: /\.css$/,

use: ExtractTextPlugin.extract({

use: 'css-loader'

})

}, {

test: /\.(sass|scss)$/,

use: ExtractTextPlugin.extract({

use: [

'css-loader',

'sass-loader',

]

}),

} ]

plugins: [

new ExtractTextPlugin('styles.css'),

]

};

src/index.js

import './main.scss';
import './home.scss';
import 'font-awesome/css/font-awesome.min.css'

export {};

import './main.scss';

import './home.scss';

import 'font-awesome/css/font-awesome.min.css'

export {};

安装个字体库

cnpm install --save-dev file-loader url-loader

1	cnpm install --save-dev file-loader url-loader

配置webpack.config.js

            {
                test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[hash:7].[ext]'
                }
            }

{

test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: 'fonts/[name].[hash:7].[ext]'

}

简单弄个getJson()

2015年12月30日 by admin·已关闭评论

有时不得加载jq, 记录一下简单常用的函数

 var getJSON = (function(){
        var loadJsFile = function(file){
            var head = ghead();
            var e = document.createElement("script");
            e.type="text/javascript";
            e.src=file;
            head.appendChild(e);
        };

        var ghead = function(){
            var head, o = document;
            ((head = o.getElementsByTagName('head')[0]) || (head = o.body.parentNode.appendChild(o.createElement("head"))));
            return head;
        }

        return function(url, callback) {
            var tmpCallback = 'JCallback' + Math.ceil(Math.random() * 1000000);
            window[tmpCallback] = function(data){
                callback(data);
            };
            url = url + "&callback=" + tmpCallback ;
            loadJsFile(url);
        }
    })();

var getJSON = (function(){

var loadJsFile = function(file){

var head = ghead();

var e = document.createElement("script");

e.type="text/javascript";

e.src=file;

head.appendChild(e);

};

var ghead = function(){

var head, o = document;

((head = o.getElementsByTagName('head')[0]) || (head = o.body.parentNode.appendChild(o.createElement("head"))));

return head;

}

return function(url, callback) {

var tmpCallback = 'JCallback' + Math.ceil(Math.random() * 1000000);

window[tmpCallback] = function(data){

callback(data);

};

url = url + "&callback=" + tmpCallback ;

loadJsFile(url);

}

})();

没有同相同url地址判断

vue

2015年12月17日 by admin·已关闭评论

directive (DOM)
filter (文本)
computed（数据）
Components (widget)

异步组件

var exports;
var SyncComponent = {
    loaded : {},
    src : "/component/",
    load : function(name){
        if(this.loaded[name]){
           return;
        }

        var that = this;
        Vue.component(name, function(resolve){
            var scriptUrl = that.src + name + ".js";
            $.get(scriptUrl, function(script) {
                if(!/html$/.test(exports.template)) {
                    resolve(exports);
                    that.loaded[name] = true;
                } else {
                    var tplUrl = that.src + "template/" + name + ".html";
                    $.get(tplUrl, function(template) {
                        exports.template = template;
                        resolve(exports);
                        that.loaded[name] = true;
                    }, 'text');
                }
            }, 'script');
        });
    }
};

var exports;

var SyncComponent = {

loaded : {},

src : "/component/",

load : function(name){

if(this.loaded[name]){

return;

}

var that = this;

Vue.component(name, function(resolve){

var scriptUrl = that.src + name + ".js";

$.get(scriptUrl, function(script) {

if(!/html$/.test(exports.template)) {

resolve(exports);

that.loaded[name] = true;

} else {

var tplUrl = that.src + "template/" + name + ".html";

$.get(tplUrl, function(template) {

exports.template = template;

resolve(exports);

that.loaded[name] = true;

}, 'text');

}

}, 'script');

});

}

};

var JMessage = new Vue({
    el: '#main',
    data: {
        // api列表
        currentView : 'welcome',
        apis: [
            { label : 'home', api : 'welcome' },
            { label : '订阅者', api : 'customer' },
            { label : '状态', api : 'status'},
            { label : '消息', api : 'message' },
            { label : '管理', api : 'manager' }
        ]
    },

    methods : {
        show : function(api){
            console.log(api);
            SyncComponent.load(api);
            this.currentView = api;
        }
    },

    created : function(){
        SyncComponent.load('welcome');
    }
});

var JMessage = new Vue({

el: '#main',

data: {

// api列表

currentView : 'welcome',

apis: [

{ label : 'home', api : 'welcome' },

{ label : '订阅者', api : 'customer' },

{ label : '状态', api : 'status'},

{ label : '消息', api : 'message' },

{ label : '管理', api : 'manager' }

]

methods : {

show : function(api){

console.log(api);

SyncComponent.load(api);

this.currentView = api;

}

created : function(){

SyncComponent.load('welcome');

}

});

js中的单例

2015年10月28日 by admin·已关闭评论

var getSingle = function(fn){
    var rs;
    return function(){
        return rs || (rs = fn.apply(this, arguments));
    }
}

var getSingle = function(fn){

var rs;

return function(){

return rs || (rs = fn.apply(this, arguments));

}

常用于创建唯一dom

vue踩过的一次坑动态组件

2015年10月28日 by admin·已关闭评论

使用动态组件

<component :is="currentView"></component>

1	<component :is="currentView"></component>

组件的数据实始化使用function返回，否则无法初始化，如

data :  function(){
    return {
        services : [],
        msg : null
    }
}

data : function(){

return {

services : [],

msg : null

}

状态改变的hook，使用了route的组件，如果需要记得写router.activeate

activate: function (done) {
    done();
}

activate: function (done) {

done();

}

其它

数据(特别是复杂的对象)的改变尽量使用set函数或watch，如

that.$set('services', rs);

1	that.$set('services', rs);

watch : {
    api : {
        deep: true
    }
}

watch : {

api : {

deep: true

}

使用computed属性来设置动态变量

computed: {
    isWelcome : function(){
        return this.api.length &gt; 0;
    },

    hasDoc : function(){
        return this.func.doc.length &gt; 0;
    }
}

computed: {

isWelcome : function(){

return this.api.length > 0;

hasDoc : function(){

return this.func.doc.length > 0;

}

在线编辑器

加载编辑器js等相关资源，在组件事件函数中渲染组件

官方文档说明：
http://rc.vuejs.org/guide/components.html#Component_Option_Caveats
http://vuejs.org/guide/components.html#activate_Hook

html5 postMessage解决跨域、跨窗口消息传递

2015年5月29日 by admin·已关闭评论

一些麻烦事儿

平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题
1.页面和其打开的新窗口的数据传递
2.多窗口之间消息传递
3.页面与嵌套的iframe消息传递
4.上面三个问题的跨域数据传递

发送消息 postMessage()

这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin)方法接受两个参数

1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。

2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为”*”，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/”。

window.onload=function(){ window.frames[0].postMessage('getcolor','http://lslib.com'); }

1
2
3

window.onload=function(){
window.frames[0].postMessage('getcolor','http://lslib.com');
}

接收消息 onMessage

增加监控callback即可

window.addEventListener('message',function(e){ var color=e.data; document.getElementById('color').style.backgroundColor=color; },false);

1
2
3
4

window.addEventListener('message',function(e){
var color=e.data;
document.getElementById('color').style.backgroundColor=color;
},false);

参考

http://www.cnblogs.com/dolphinX/p/3464056.html
http://www.php100.com/html/program/html5/2013/0905/5442.html
http://segmentfault.com/a/1190000002448922

知识点滴

专注于php应用开发